Tema 2

Desarrollo Web: Full Stack

Tema 2. Introducción a
JavaScript
Índice
Esquema

Ideas clave

2.1. Introducción y objetivos

2.2. Historia de JavaScript

2.3. IDE y herramientas

2.4. Conceptos básicos de JavaScript

2.5. Estructuras de control en JavaScript

2.6. Estructuras iterativas en JavaScript

2.7. Estructuras de datos en JavaScript

2.8. Código de apoyo y ejercicios

2.9. Referencias bibliográficas

A fondo

Cláusula switch

Método forEach

Documentación de JavaScript

Test
 Esquema

Desarrollo Web: Full Stack 3

Tema 2. Esquema
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

2.1. Introducción y objetivos

El lenguaje de programación por excelencia para la programación en el lado cliente

es JavaScript. Prácticamente todos los navegadores modernos y más utilizados

tienen soporte para este lenguaje.

En este tema realizaremos una introducción a este lenguaje y veremos los siguientes

aspectos:

▸ Historia. Una breve introducción a la historia de este lenguaje desde su concepción

hasta nuestros días.

▸ IDE (Integrated Development Environment) y herramientas. Exploraremos cuáles

van a ser las herramientas que usaremos para desarrollar código en JavaScript.

▸ Conceptos básicos. Se estudiarán la base de este lenguaje, su sintaxis y los tipos

de datos que podemos utilizar con él. Como verás, comparte similitudes con otros
lenguajes de programación muy conocidos, pero tiene algunas peculiaridades que
señalaremos.

▸ Estructuras de control e iterativas. Estudiaremos cuáles son las sentencias en

JavaScript que nos permiten crear lógicas más complejas, en función de ciertas

condiciones, incluyendo las iteraciones (bucles).

Si bien todo el contenido que se expondrá aquí es suficiente para conocer las

bases de este lenguaje, recomendamos leer la documentación de este lenguaje

en el recurso de A fondo, Documentación de JavaScript, siempre que se quiera

obtener más información sobre cualquiera de los puntos que se mencionarán.

Desarrollo Web: Full Stack 4

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

2.2. Historia de JavaScript

Una mañana de mayo de 1995, un directivo de Netscape se acercó a un joven,

Brendan Eich, y le dijo algo como esto:

«En menos de dos semanas lanzamos nuestro siguiente navegador: el Netscape

Navigator 2.0. Queremos que incorpore un intérprete para un lenguaje de programación

que pueda interactuar con las páginas HTML que el usuario visualice. Por cierto, le

pondremos algún nombre relacionado con Java, ya que este es ahora mismo el lenguaje

más famoso y se usa cada vez más en navegadores. Nos vamos a aliar con Sun

Microsystems (quien detenta la marca Java) para intentar frenar a nuestro principal
competidor: Microsoft (y su navegador Internet Explorer)».

El joven Eich ya sabía lo que tenía que hacer: sacar un nuevo lenguaje de

programación de la chistera en un muy corto espacio de tiempo y hacer que se

pareciera algo a Java para poder venderlo como tal a la comunidad de

desarrolladores.

Inicialmente llamó a su creación Mocha (por el café moca) y luego lo cambió a

LiveScript, sin embargo, fue obligado a incluir la palabra Java por motivos

exclusivamente comerciales. Sun Microsystems (creador de Java) y Netscape tenían

intereses en potenciar el JavaScript y querían que su nombre tuviera gancho. Justo

en ese momento, Java era el lenguaje de programación más popular.

A pesar de compartir ciertas similitudes sintácticas, Java y JavaScript

son lenguajes completamente distintos y no están relacionados.

Desarrollo Web: Full Stack 5

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

JavaScript hizo su debut en la versión 2.0 del navegador Netscape (1995). En 1996,

Microsoft, mediante ingeniería inversa, lanzó su propia versión de JavaScript a la que

llamó JScript (para evitar infringir la marca ostentada por Netscape) en la versión 3.0

de Internet Explorer.

JavaScript se popularizó inmediatamente, ya que disponía de una baja barrera de

aprendizaje. Como contrapartida, pocos desarrolladores se preocuparon por

aprender el lenguaje desde el punto de vista técnico y teórico. La mayoría de los

programadores web se limitaban (y aún sucede más de lo que a cualquiera le

gustaría) a copiar y pegar segmentos de código que veían aquí y allá sin entender

cómo funcionaban. Esto llevó a una incomprensión muy grande de un pedazo de

tecnología maravillosa. Los programadores profesionales siempre han denostado a

JavaScript hasta épocas recientes.

1996. JavaScript pasa a ser un estándar internacional

Sun Microsystems decidió estandarizar el lenguaje junto con la Asociación Europea

de Fabricantes de Computadoras (ECMA), quien lo acogió. La versión del lenguaje

estandarizado fue llamada ECMAScript para evitar conflictos futuros con la marca

Java (ostentada por Sun). A veces, esta doble nomenclatura causa confusión.

A efectos prácticos podemos considerar que ECMAScript es lo mismo que

JavaScript, pero típicamente suele emplearse el término JavaScript para ECMAScript

en el navegador.

2005. Comienza la dignificación de JavaScript

A comienzos de 2005 emergieron una serie de sitios web que mostraban la

versatilidad que podía alcanzarse con aplicaciones web. Estamos hablando de

servicios populares, como Google Maps o Gmail. Estos sitios web prácticamente se

comportaban como aplicaciones de escritorio. A estas altas capacidades y

versatilidad se las llamó comúnmente web 2.0.

Desarrollo Web: Full Stack 6

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

JavaScript resultó esencial en la consecución de la web 2.0, pero, más

concretamente, lo que de verdad supuso una catapulta fue la capacidad de modificar

ciertas partes de una página web sin necesidad alguna de recarga.

Es lo que se conoce como AJAX, concepto originalmente acuñado por James Garret

en un famoso artículo de 2005, Ajax: A New Approach to Web Applications.

AJAX permite la búsqueda de información por parte de una página web (mediante

código JavaScript albergado en la misma) y el «redibujado» de la misma con base en

la información recabada.

2009. Llega JavaScript en el servidor con Node

Un buen día de 2009, un chico sencillo llamado Ryan Dahl (https://tinyclouds.org/)

tuvo una idea sensacional: usar el motor V8 de Google y sacarlo fuera del
navegador. Su sencillo gesto cambió el mundo de la tecnología tal y como lo

conocemos. Se convirtió en un software tremendamente popular y, rápidamente,

mucha gente comenzó a desarrollar aplicaciones escritas en JavaScript, pero que

eran ejecutadas en un ordenador normal y corriente. Es decir, estos programas se

ejecutaban como cualquier otro software por parte del sistema operativo.

Hoy en día, Node (o Node.js, https://nodejs.org/en/) es un componente

fundamental de cualquier desarrollo en el mundo web, ya sea en el

cliente (navegador) o servidor.

Junto a Node tenemos al NPM (Node Package Manager), que es el gestor de

paquetes por defecto que incluye la instalación de Node (a partir de la versión 0.6.3).

NPM se ejecuta desde la línea de comandos y se encarga de manejar las

dependencias de una aplicación escrita en JavaScript.

Desarrollo Web: Full Stack 7

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

2.3. IDE y herramientas

Para trabajar con JavaScript se recomienda hacer uso de las siguientes

herramientas, aunque cada alumno puede elegir otras si así lo desea.

Tabla 1. Herramientas usadas para JavaScript. Fuente: elaboración propia.

Desarrollo Web: Full Stack 8

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

2.4. Conceptos básicos de JavaScript

En esta sección se estudiará la sintaxis básica de JavaScript. Trataremos los

siguientes aspectos:

▸ Tipos de datos primitivos.

▸ Declaración de variables y constantes.

▸ Expresiones y sentencias.

Tipos de datos primitivos

JavaScript es un lenguaje dinámico, esto implica que no es necesario especificar el

tipo de los valores (si es un número, una palabra, una lista de cosas, etc.), sino que

JavaScript los averigua de manera automática y, además, estos pueden cambiar sin

ningún problema. Por ejemplo, es posible especificar que un valor vale inicialmente 1

(un número) y luego «hola» (una cadena de texto).

Figura 1. Variable cuyo tipo de dato cambia dinámicamente. Fuente: elaboración propia.

JavaScript discernirá automáticamente que esa variable a es primero de tipo número

(number) y luego de tipo cadena de texto (string). El ejemplo anterior produciría un

error gravísimo en otros lenguajes tipados como Java o C++. En estos lenguajes,

una vez que una variable ha sido especificada con un valor (de manera implícita o

explicita), ya no hay vuelta atrás: no puede cambiar de tipo.

Desarrollo Web: Full Stack 9

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

En los lenguajes tipados, si un valor nace con un tipo, ya no es posible

cambiarlo. Esto busca que el código sea más seguro y menos propenso

a errores. JavaScript es un lenguaje no tipado, es decir, dinámico.

Hay otros muchos lenguajes dinámicos además de JavaScript, los principales serían

Ruby y Python.

Los tipos de datos básicos (también llamados primitivos) en JavaScript son:

Tabla 2. Tipos de datos primitivos en JavaScript. Fuente: elaboración propia.

JavaScript cuenta con la instrucción typeof para averiguar el tipo de una variable:

Figura 2. Instrucción typeof . Fuente: elaboración propia.

Desarrollo Web: Full Stack 10

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

En realidad, typeof es lo que se conoce como un operador: es una construcción

sintáctica especial que se comporta de manera parecida a una función, pero que se

diferencia de estas en la semántica. Los operadores actúan sobre operandos y

devuelven un resultado, mientras que las funciones reciben parámetros y también

devuelven (o no) un resultado.

Un operador como typeof es un operador unario (solo recibe un

operando).

Un operador binario requiere dos operandos, por ejemplo, en:

Figura 3. Operador binario de suma. Fuente: elaboración propia.

El operador es el símbolo + y sus operandos son el 4 y el 10.

Cadenas de texto

Una cadena de texto no es más que una secuencia de caracteres. En muchos

lenguajes de programación, una cadena de texto no es más que un vector o un array

de letras. Sin embargo, en JavaScript, una cadena de texto es un tipo de dato

básico. Para definir una cadena de texto, simplemente tenemos que poner letras

entre comillas (dobles o simples):

Figura 4. Cadenas de texto. Fuente: elaboración propia.

Desarrollo Web: Full Stack 11

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

A esta forma de definir cadenas de texto se la llama definición literal. Estrictamente,

para crear una cadena de texto, deberíamos usar una función constructora junto con

la cláusula new. Ejemplo:

Figura 5. Construcción de cadenas con new. Fuente: elaboración propia.

Sin embargo, como este método es algo farragoso, JavaScript permite crear cadenas

de texto de manera literal, es decir, simplemente poniéndolas entre comillas.

Las cadenas de texto plantilla o template literals son un tipo especial de cadenas

de texto. Este tipo de cadenas hace uso de las comillas invertidas. Además, los

template literals permiten, entre otras cosas, la intercalación de código JavaScript

con cadenas de texto. Veamos algunos ejemplos:

Figura 6. Template literal. Fuente: elaboración propia.

A diferencia de otros lenguajes de programación, los tipos de datos primitivos tienen

métodos. Los métodos son conjuntos de instrucciones (funciones) que se aplican

sobre el dato.

Desarrollo Web: Full Stack 12

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Otros métodos interesantes son los siguientes (la funcionalidad perseguida por cada

uno es bastante directa a partir de su nombre):

Figura 7. Métodos sobre cadenas. Fuente: elaboración propia.

Números

Los números en JavaScript pueden ser enteros (4, 1, 0, -98, etc.) o en coma flotante

(1.21). Al igual que las cadenas de texto, los números también cuentan con métodos

para obtener otros resultados derivados.

La diferencia es que, en vez de usar un único punto, tenemos que usar dos para

esquivar el punto de la notación decimal:

Figura 8. Notación exponencial 1. Fuente: elaboración propia.

Aunque también es posible usar paréntesis y recuperar la notación de punto habitual:

Figura 9. Notación exponencial 2. Fuente: elaboración propia.

Desarrollo Web: Full Stack 13

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Cuando un número no es computable, JavaScript, como hacen otros lenguajes,

cuenta con la palabra reservada NaN (not a number). Por ejemplo, no es posible

computar la multiplicación de un número por una cadena de texto y esta operación

devolvería NaN. Ejemplo:

Figura 10. NaN. Fuente: elaboración propia.

Es posible convertir cadenas de texto en números con la función Number():

Figura 11. Función Number. Fuente: elaboración propia.

De igual manera podemos llevar a cabo la operación inversa:

Figura 12. Numero a string. Fuente: elaboración propia.

Booleanos

Los valores booleanos solo pueden ser verdaderos o falsos (true o false). Además,

las siguientes expresiones se consideran falsas (lo mismo que false) en JavaScript:

Figura 13. Valores falsos para un booleano. Fuente: elaboración propia.

Desarrollo Web: Full Stack 14

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Como regla general podemos decir que undefined suele ser usado por JavaScript de

modo automático (cuando no hay valor) y null es utilizado por los programadores de

manera manual para dejar bien claro que algo no tiene ningún dato asignado.

Por ejemplo:

Figura 14. Asignación a null . Fuente: elaboración propia.

Con esto queremos dejar claro explícitamente que x no tiene valor alguno o que x

está vacía.

Declaración de variables y constantes

Las variables se usan en programación para referirse a un dato almacenado en

memoria. Las variables han de declararse antes de usarse. Con la aparición de la

versión 2015 de JavaScript, también conocida como ES6, las variables deben

declararse con las palabras clave let o const .

▸ Con let , una variable puede cambiar de valor.

▸ Cuando usamos const , puede decirse que en este caso se trata de una *constante*

en lugar de una variable. Su valor no cambiará y será inmutable.

También, al declarar una variable como constante debe quedar «inicializada» (debe

recibir un valor) en esa misma línea. Veamos varios ejemplos:

Figura 15. Declaración de variables y constantes. Fuente: elaboración propia.

Desarrollo Web: Full Stack 15

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

La afirmación anterior tiene una excepción: los objetos. Es decir, aunque una

variable se declare como const , si hace referencia a un objeto, sí que es posible

mutar ese objeto. Ejemplo:

Figura 16. Modificando objetos aún con const . Fuente: elaboración propia.

Antiguamente, en lugar de let y const solo existía la palabra var para identificar algo

como una variable. A efectos prácticos, var se parece mucho a let . Entonces, ¿por

qué dos términos para la misma funcionalidad? Muy sencillo. Cuando una variable se

declara con var, no respeta el ámbito.

Y, ¿qué es un ámbito? El ámbito es un término muy relevante, es casi cualquier

entorno de programación. Se refiere a dónde es posible hacer referencia a una

variable (o constante). Empleando un término matemático, se trata del dominio de

definición de un valor.

Existen siempre dos tipos de ámbitos principales en cualquier programa JavaScript:

global y local.

Ámbito global

Indistintamente de la variable declarada fuera de cualquier bloque se dice que

pertenece al ámbito global y es accesible desde cualquier lugar de nuestro programa.

El ámbito global es único (para un programa). Parece, de entrada, algo estupendo,

pero no siempre es la mejor idea. Lo ideal es solo declarar variables lo más cerca

posible (en términos de ámbito) de dónde van a ser utilizadas. Existen muchas

razones para esta práctica: desde la limpieza y legibilidad del código a la seguridad.

Desarrollo Web: Full Stack 16

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Ámbito local

Lo primero que tenemos que decir del ámbito local es que, en realidad, existen tantos

ámbitos locales como bloques hayamos definido. En cada bloque tenemos un ámbito

local. Por descontado, cada bloque define su ámbito local y una variable definida ahí

solo es visible dentro del bloque. Si el nombre de una variable se declara fuera y

dentro de un bloque, el valor que cuenta para el bloque es el definido en este último.

Si no se vuelve a declarar en un bloque interno, desde ese bloque

interno se puede tener acceso a una variable declarada en un bloque

más externo.

Un ejemplo de lo anterior:

Figura 17. Ámbitos local y global. Fuente: elaboración propia.

Cuando asignamos un valor a una variable, esta asignación puede ser directa o

indirecta, también conocida como por referencia. Por defecto, si asignamos un

valor primitivo, la asignación es directa, es decir, al ejecutar la instrucción.

Desarrollo Web: Full Stack 17

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Figura 18. Asignación por valor. Fuente: elaboración propia.

Es como si la variable a «albergara» dentro de sí el valor 10 (lo contiene dentro de

sí).

Sin embargo, con objetos esta asignación es por referencia, de manera

que varias variables pueden referirse al mismo objeto.

Por ejemplo, en este código:

Figura 19. Asignación por referencia. Fuente: elaboración propia.

Las variables x e y apuntan al mismo objeto: { a: 1, b: 2 }, de manera que es posible

cambiarlo (alterar sus contenidos) tanto desde x como desde y.

Figura 20. Acceso a las propiedades de un objeto. Fuente: elaboración propia.

Y ahora, el objeto original se ha transformado a { a: 4, b: 9 }. En el caso de los tipos

de datos básicos, una variable contiene un valor.

Desarrollo Web: Full Stack 18

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Por lo que si hacemos algo parecido al ejemplo anterior:

Figura 21. Asignación por valor implícito. Fuente: elaboración propia.

Ahora x e y contienen una copia distinta y personal de la cadena de texto «hola», por

lo que si ahora modificamos una de ellas (x, por ejemplo), la otra permanece

inalterada como si nada hubiera pasado.

Figura 22. Comprobando el efecto de las asignaciones por valor. Fuente: elaboración propia.

Expresiones básicas

Haciendo uso de todos los elementos que se han presentado hasta ahora, hemos

construido algunas expresiones o sentencias en lenguaje JavaScript. Un tipo de

expresión muy común son las comparaciones. Este tipo de sentencias constan de

un operador y de dos operandos.

Para realizar comparaciones de igualdad, en otros lenguajes se suele utilizar el

operador de igualdad (==), que en JavaScript devolverá true si los operandos son

iguales, pero no se realiza ninguna comprobación de tipo. Para una comparación

más exhaustiva que tenga en cuenta el tipo de los operandos, se recomienda utilizar

e l operador de igualdad estricta (===) que, además de tener en cuenta el valor,

tiene en cuenta el tipo. En JavaScript podemos encontrar además de estos, otros

operadores muy similares a los que hay en cualquier lenguaje de programación.

Desarrollo Web: Full Stack 19

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Algunos ejemplos:

Figura 23. Operadores de comparación. Fuente: elaboración propia.

Además, también es posible combinar sentencias como las anteriores mediante

operadores lógicos como pueden ser || (OR lógico) y && (AND lógico). El

comportamiento de estos operadores es idéntico al que podemos observar en otros

lenguajes de programación.

Figura 24. Usando varios operadores lógicos. Fuente: elaboración propia.

Desarrollo Web: Full Stack 20

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

2.5. Estructuras de control en JavaScript

Muy a menudo, es necesario que una parte del código JavaScript escrito se ejecute

cuando una o varias condiciones se cumplan y que no se ejecute en caso contrario.

Es decir, tendremos código que se ejecutará de forma condicional. Para poder

realizar este tipo de sentencias, JavaScript dispone de diferentes estructuras de

control del flujo del código.

La cláusula
If

La sentencia más sencilla y conocida es la que comienza por la cláusula i f , que

seguida de una condición lógica (que se evaluará como true o false) define un bloque

de código que se ejecutará únicamente si la condición es satisfecha. Un ejemplo

sería:

Figura 25. Estructura if . Fuente: elaboración propia.

La consola solo mostrará la frase si la variable edad tiene un valor estrictamente

menor que 78.

Junto a la cláusula if tenemos otras dos que suelen acompañarla casi siempre. Son

else if y else . Si estamos barajando varias opciones en nuestro programa, podemos

hacer uso de else if para tratar los diferentes escenarios. Por último, si ninguna de las

condiciones anteriores se cumplió, podemos hacer uso de else para indicar las

acciones a realizar en el caso de que ninguna de las condiciones anteriores se diese.

Observemos un ejemplo:

Desarrollo Web: Full Stack 21

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Figura 26. Estructura if-else . Fuente: elaboración propia.

Al igual que en otros lenguajes de programación, en JavaScript también podemos

hacer uso del operador ternario para comprobar una condición y actuar en

consecuencia de su cumplimiento (o no) en una única línea.

Su sintaxis, al igual que en otros lenguajes, es la siguiente:

Figura 27. Operador ternario. Fuente: elaboración propia.

Un ejemplo sería:

Figura 28. Código del operador ternario. Fuente: elaboración propia.

Desarrollo Web: Full Stack 22

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

La cláusula switch

La cláusula switch nos permite construir disyuntivas más complejas. En realidad,

es una copia de la estructura if-then-else , pero resulta más adecuada cuando el

número de casos para tener en cuenta es excesivo.

Te recomendamos que consultes el recurso de A fondo, Cláusula switch, para

obtener más información sobre esta cláusula.

Desarrollo Web: Full Stack 23

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

2.6. Estructuras iterativas en JavaScript

Una estructura iterativa nos permite construir bucles en los cuáles es posible repetir

una o varias líneas de código. Estudiaremos por tanto los bucles for y while.

Bucles while

Los bucles while ejecutan las instrucciones que haya dentro de un bloque mientras la

condición enunciada se cumpla. Un ejemplo:

Figura 29. Bucle while. Fuente: elaboración propia.

Si ejecutamos este código en la consola de JavaScript, veremos que el resultado que

se imprime por pantalla es el siguiente:

Figura 30. Ejecución del bucle while. Fuente: elaboración propia.

Nótese que se ha hecho uso de template literals para intercalar cadenas de texto

con el valor de las variables con las que estamos trabajando. Es muy importante que

el código que se encuentre dentro del bloque del while pueda dar lugar a un cambio
en la condición que se está evaluando. De no ser así, se podría formar un bucle

infinito, algo que casi con toda seguridad será un comportamiento no deseado.

Desarrollo Web: Full Stack 24

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Existe una variación del bucle while llamada do while. La diferencia entre ambas es

que la versión do while se ejecutará siempre una vez como mínimo, ya que la

condición del while se comprobará al final del bloque, mientras que esto no ocurre

con la versión que acabamos de ver. Un ejemplo sería el siguiente:

Figura 31. Bucle do-while. Fuente: elaboración propia.

Si ejecutamos este código en la consola de JavaScript, veremos que el resultado que

se imprime por pantalla es el siguiente:

Figura 32. Ejecución del bucle do-while. Fuente: elaboración propia.

Bucles for

Se trata de otra estructura diferente para poder realizar bucles. Su sintaxis es

bastante distinta a la de la opción anterior:

Figura 33. Bucle for. Fuente: elaboración propia.

Desarrollo Web: Full Stack 25

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Un bucle for tiene cuatro partes muy diferenciadas:

Tabla 3. Partes del bucle for. Fuente: elaboración propia.

Al igual que ocurría con los bucles while, es necesario definir bien la condición, el

valor inicial de la variable de estado y cómo va a modificarse su valor en cada

iteración para evitar dar lugar a bucles infinitos no deseados.

Desarrollo Web: Full Stack 26

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Veamos un ejemplo de este tipo de bucles transcribiendo el ejemplo de la Figura 29:

Figura 34. Bucle for. Fuente: elaboración propia.

Si ejecutamos este código en la consola de JavaScript, veremos que el resultado que

se imprime es idéntico al que recibíamos en el caso anterior.

Los bucles for son muy usados para recorrer estructuras de datos, como

los arrays o las listas. Ahondaremos más sobre este aspecto en la

próxima sección.

Existe una variante de este bucle llamado forEach. Realmente es un método que se

ejecuta sobre los arrays. El método forEach ejecuta una función para cada uno de los

elementos del array.

Te recomendamos leer la documentación sobre este método en el recurso de A

Fondo, Método forEach.

Desarrollo Web: Full Stack 27

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

2.7. Estructuras de datos en JavaScript

En esta sección estudiaremos diferentes estructuras de datos muy usadas a la hora

de trabajar con JavaScript:

▸ Vectores o arrays.

▸ Conjuntos o sets.

▸ Mapas.

Lo primero que debemos conocer sobre estos tres tipos de estructuras es que son

objetos. En JavaScript existen diferentes tipos de datos básicos. Pues bien, todo

aquello que no es un dato básico es un objeto. La diferencia principal entre los

objetos y los datos básicos es la forma de almacenarlos y manejarlos.

Los datos básicos se manejan como valores independientes (varias

variables tienen una copia personal de un mismo dato), pero los objetos

se manejan por referencia de manera que distintas variables pueden

apuntar a un mismo pedazo de información.

Una vez dicho esto, pasamos a detallar cada una de las estructuras indicadas

anteriormente.

Vectores o

arrays

Un vector (en adelante, array) es un conjunto de valores indexado. Esto quiere decir

que cada elemento del array tiene una posición concreta, definida por un índice y

que, salvo que se produzcan modificaciones, se mantendrá durante toda su vida útil.

Desarrollo Web: Full Stack 28

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Podemos crear un array de diversas maneras, dependiendo de si queremos

inicializarlo vacío o con datos.

Figura 35. Creación de arrays. Fuente: elaboración propia.

Todos los elementos de un array están indexados y podemos utilizar el índice

asociado a cada elemento para obtenerlo. Por ejemplo, en el array creado antes,

podemos obtener el valor del primer elemento de este, accediendo al elemento cero
de la estructura (recordemos que el cero se refiere al primer elemento):

Figura 36. Acceso a elementos de un array. Fuente: elaboración propia.

Utilizando la misma notación es posible añadir un nuevo elemento al array, haciendo

uso de nuevo del operador de asignación (=):

Figura 37. Operador de asignación. Fuente: elaboración propia.

L o s arrays pueden contener cualquier tipo de datos en su interior, incluso otros

arrays, lo que daría lugar a arrays multidimensionales o matrices. Sin embargo,

aquellas variables declaradas con const no podrían ver modificado su valor.

Entonces, ¿por qué hemos podido añadir un nuevo elemento al array,

modificándolo?

Desarrollo Web: Full Stack 29

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

La razón es muy sencilla. No hemos modificado la referencia de memoria a la que la

variable está apuntando, sino que hemos modificado el contenido de memoria

asociado a dicha referencia. No es, por tanto, posible redefinir la referencia a la que

la variable apunta, como podemos ver en este ejemplo:

Figura 38. Arrays y referencias. Fuente: elaboración propia.

A pesar de declarar un objeto como constante, es posible modificar sus contenidos.

El contenido de un array declarado como const sigue siendo mutable.

Conjuntos

Los conjuntos fueron introducidos en la versión 6 de JavaScript. Un conjunto o set es

una estructura que representa una colección de valores únicos (no se pueden

repetir).

Los sets permiten manejar conjuntos de datos y asegurarnos de manera automática

que no contiene duplicados. Para crear un set vacío recurrimos a una función

constructora y al operador new:

Figura 39. Declaración de conjunto. Fuente: elaboración propia.

Para añadir un elemento a un set utilizamos el método .add(elemento).

Desarrollo Web: Full Stack 30

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Figura 40. Añadir elementos a un conjunto 1. Fuente: elaboración propia.

Este método devuelve nuevamente el set con el nuevo elemento añadido, por lo que
es posible encadenar nuevos.add(). Ejemplo:

Figura 41. Añadir elementos a un conjunto 2. Fuente: elaboración propia.

Fíjate que, a pesar de haber declarado la variable conjunta como constante,

podemos modificar el set. Esto es así porque los sets son también objetos y estos

sí son modificables a pesar de que hayan sido introducidos mediante la cláusula

const.

¿Qué pasa si intentamos añadir un elemento que ya existe en el set? Si intentamos

añadir un elemento que ya estaba presente en el set, la orden es ignorada.

Podemos añadir varios elementos de una vez a un set con un array:

Figura 42 Creación de un conjunto a partir de un array. Fuente: elaboración propia.

Si dicho array contuviese elementos ya repetidos, estos son automáticamente

filtrados para eliminar duplicidades. Ejemplo:

Figura 43. Los conjuntos no contienen duplicados. Fuente: elaboración propia.

Desarrollo Web: Full Stack 31

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

La afirmación anterior tiene una excepción: los objetos. Sí es posible añadir a un

set dos objetos que aparentemente son iguales. Esto es así porque los objetos se

manejan por referencia y, aunque dos objetos se parezcan, están en espacios de

memoria distintos y, por ende, son tratados como entes independientes por parte de

JavaScript. Si por ejemplo ejecutamos:

Figura 44. Los conjuntos no contienen referencias duplicadas 1. Fuente: elaboración propia.

Se trataría de un set con dos elementos iguales (dos objetos vacíos, en este caso),

pero que son independientes desde el punto de vista lógico. Veamos otro ejemplo:

Figura 45. Los conjuntos no contienen referencias duplicadas 2. Fuente: elaboración propia.

Aunque los dos arrays [1,2] y [1,2] contienen la misma información a nuestros ojos,

se trata de objetos distintos (a los ojos de JavaScript). Recordemos que los arrays en

JavaScript también son objetos.

Como otros contenedores de información en JavaScript, los sets también poseen

métodos interesantes para obtener información de estos. Algunos ejemplos son:

La propiedad .size devuelve el tamaño del set:

Figura 46. Método size. Fuente: elaboración propia.

El método .has(elemento) comprueba si un elemento existe dentro de un set:

Desarrollo Web: Full Stack 32

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Figura 47. Método has. Fuente: Elaboración propia

El método .delete(elemento) borra valores de un set. Devuelve true o false según el

éxito de la operación.

Figura 48. Método delete. Fuente: elaboración propia.

E l método .clear() vacía el conjunto completamente y nos devuelve un conjunto

vacío:

Figura 49. Método clear. Fuente: elaboración propia.

Desarrollo Web: Full Stack 33

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

En el siguiente vídeo, Trabajando con estructuras de datos en JavaScript , podrás

afianzar algunos de los conceptos que hemos tratado en esta sección con más

ejemplos:

Trabajando con estructuras de datos en JavaScript

Accede al vídeo:
https://unir.cloud.panopto.eu/Panopto/Pages/Embed.aspx?id=04efe442-0d61-
4bfb-8ee0-b1d800df1e83

Mapas

Los mapas no son más que listas de parejas clave-valor, donde la clave y el valor

pueden ser cualquier tipo de dato. En otros lenguajes de programación, son

conocidos también como mapas hash, tablas o diccionarios. En JavaScript, los

mapas también son objetos.

Las claves de un mapa deben ser únicas (algo que ocurre también en los sets). No

cuentan con una forma literal para su definición, por lo que para crearlos es

necesario usar una función constructora.

Desarrollo Web: Full Stack 34

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Figura 50. Construcción de un mapa. Fuente: elaboración propia.

Al igual que ocurría con los sets, los mapas tienen distintos métodos que nos

permiten trabajar con ellos. Los más importantes son:

▸ Método set (clave, valor), que permite añadir una nueva pareja clave-valor al mapa.

▸ Método get (clave), a partir de la clave, nos devuelve su valor asociado, si existe.

▸ Método has (clave), que devolverá true o false en función de si el mapa contiene

alguna pareja con la clave indicada.

▸ Método delete (clave), el cual permitirá borrar una entrada del mapa que tenga la

clave especificada.

▸ Método clear (), que permitirá vaciar completamente el mapa.

Las siguientes líneas de código ilustran el funcionamiento de estos métodos:

Figura 51. Métodos sobre mapas. Fuente: elaboración propia.

Desarrollo Web: Full Stack 35

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

2.8. Código de apoyo y ejercicios

Recuerda que tienes a tu disposición todo el código de apoyo necesario para el

correcto seguimiento de las clases en el repositorio global de GitHub de la

asignatura, en la sección de Código de apoyo de este tema.

UnirCs (s. f.-c). DWFS-GLOBAL/Tema_2/Codigo de ejemplo at master ·

UnirCs/DWFS-GLOBAL. GitHub. https://github.com/UnirCs/DWFS-

GLOBAL/tree/master/Tema_2/Codigo%20de%20ejemplo

Recuerda también que tienes a tu disposición los ejercicios de este tema en el

repositorio global de GitHub de la asignatura, en la sección de Ejercicios.

UnirCs (s. f.-d). DWFS-GLOBAL/Tema_2 at master · UnirCs/DWFS-GLOBAL.

GitHub. https://github.com/UnirCs/DWFS-GLOBAL/tree/master/Tema_2

Tratamiento de imágenes con JavaScript

¿Alguna vez has utilizado un filtro en una red social? ¿Sabes que las imágenes que

subes están formadas por píxeles y que, mediante funciones matemáticas, se

consiguen los fabulosos resultados que vemos en Instagram o Snapchat? Con este

ejercicio, vamos a aprender a tratar con los píxeles de las imágenes, usando

JavaScript.

El objetivo de este ejercicio es trabajar con operadores básicos, operaciones

combinadas, condicionales y bucles, junto con matrices en JavaScript, mientras se

aplican filtros RGB a una imagen. Completa las funciones siguiendo las instrucciones
del comentario en el fichero actividad.js . No deberías tener que modificar el código en

ImageHandler.js en ningún caso.

Desarrollo Web: Full Stack 36

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Por favor, no cambies las líneas que ya están escritas: en cada función ya viene

declarado el outputPath , y en la variable pixels tienes la imagen ya cargada en

formato matriz de valores RGB. Al mismo tiempo, al final de cada función ya se

encuentra el savePixels para guardar la imagen en el outputPath .

Instalación

Debes descargar Node.js desde su página oficial, que traerá incluido NPM. Una vez
tengáis NodeJS y NPM instalado, en la terminal de vuestro IDE tenéis que escribir

las siguientes líneas una por una:

npm install fs
npm install save-pixels
npm install get-pixels
npm install deasync
npm install ndarray

Operativa básica

Simplemente se crea un objeto ImageHandler con el path a la imagen y, usando la

función getPixels() , se consigue la información de la imagen en formato RGB.

Para guardar una imagen, simplemente llamamos a la función encargada de

actualizar los píxeles de la imagen, savePixels(pixelsToSave, newPath) . Esta función

también acepta un nuevo ancho/alto de imagen en caso de que la imagen que

queremos guardar no tenga los mismos valores que la original.

Al final del código, hay una sentencia de ejecución que guarda en output la imagen

resultante de los cambios que hayáis programado para la opción elegida.

Desarrollo Web: Full Stack 37

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

Teoría de píxeles

La función getPixels() devuelve una matriz de pixeles RGB. Una matriz no es más que

un array con arrays en sus posiciones para representar los píxeles en la pantalla. A

su vez, cada píxel es un array con 3 posiciones, una para cada valor RGB. Por

ejemplo, si tenemos una imagen 2x2 con 4 píxeles tal que:

Rojo Verde

Azul Blanco

Esto corresponderá a la siguiente matriz:

[[[255, 0, 0], [0, 255, 0]],

[[0, 0, 255], [255, 255, 255]]]

Como puedes ver, tenemos un array con 2 filas. En cada una de las filas tenemos 2

columnas. Finalmente, en cada fila y columna tenemos un array con los 3 valores

RGB del píxel.

Algoritmo de selección de butacas de un cine

Continuamos con el ejercicio de la selección de butacas de un cine. En este caso,

vamos a usar JavaScript para hacer una preselección de los asientos que un usuario

puede elegir. No se aceptan soluciones que violen las invariantes de un bucle. El

objetivo de este ejercicio es trabajar con matrices en JavaScript para crear un

algoritmo que permita seleccionar butacas de cine.

Desarrollo Web: Full Stack 38

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

En el tema anterior, diseñamos una sala de cine. Se incluía una matriz de asientos

(cuadrada, mismo número de filas y columnas). En código JavaScript, utilizaremos

una matriz para representar los asientos. Serán objetos y tendrán dos atributos. El id

que será un entero, y el estado que será un booleano ( true si está ocupada y false

si está libre). Se pide desarrollar en JavaScript la función suggest que recibe como

argumento el número de asientos que se desea reservar.

▸ Si el número de asientos solicitados excede el tamaño máximo de la fila, la función

debe devolver un set vacío.

▸ Si en ninguna fila hay suficientes asientos disponibles juntos, la función debe

devolver un set vacío.

▸ Se comenzará a buscar asientos juntos en la fila más lejana a la pantalla, por lo

que, si varias filas pudiesen albergar el número de asientos solicitado, se elegiría

siempre la más lejana a la pantalla. El resultado debe ser un set con los id de los

asientos preseleccionados.

Si lo consideras necesario, puedes utilizar el siguiente código como punto de partida

para tu solución. En él, se crea la matriz de asientos con la especificación indicada.

Queda lista para ser tratada. Para probar la efectividad del algoritmo, puedes

modificar el estado de algunos asientos a true . Siéntete libre de modificar el código a

tu gusto.

Desarrollo Web: Full Stack 39

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

// Definir el tamaño de la matriz de butacas

const N = 10; // Número de filas y columnas

// Función para inicializar la matriz de butacas

function setup() {
let idContador = 1; // Iniciar el contador de IDs en 1 (los humanos no
empezamos a contar desde 0)
let butacas = [];

for (let i = 0; i < N; i++) {

// Nueva fila
let fila = [];
for (let j = 0; j < N; j++) {
// Nuevo asiento
fila.push({
id: idContador++,
estado: false // Estado inicial libre
});
}
butacas.push(fila);
}
return butacas;
}

// Inicializar la matriz
let butacas = setup();

// Imprimir la matriz
console.log(butacas);

Desarrollo Web: Full Stack 40

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 Ideas clave

2.9. Referencias bibliográficas

Ciclo invariante (2023, 28 febrero). En Wikipedia.

https://es.wikipedia.org/wiki/Ciclo_invariante

Node.js — Download Node.js®. (s. f.). https://nodejs.org/en/download/package-

manager

Desarrollo Web: Full Stack 41

Tema 2. Ideas clave
© Universidad Internacional de La Rioja (UNIR)
 A fondo

Cláusula switch

Mdn web docs. (2022, marzo 22). switch.

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/switch

El recurso presenta documentación sobre la cláusula switch con ejemplos.

Desarrollo Web: Full Stack 42

Tema 2. A fondo
© Universidad Internacional de La Rioja (UNIR)
 A fondo

Método forEach

Mdn web docs. (2021, febrero 11). Array.prototype.forEach().

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Arra

y/forEach

El enlace presenta documentación sobre el método forEach con ejemplos.

Desarrollo Web: Full Stack 43

Tema 2. A fondo
© Universidad Internacional de La Rioja (UNIR)
 A fondo

Documentación de JavaScript

Mdn web docs_. (2022, febrero 2). JavaScript.

https://developer.mozilla.org/es/docs/Web/JavaScript

El recurso es un enlace a la documentación de JavaScript desarrollada por Mozilla.

Contiene explicaciones detalladas de todas las posibilidades que ofrece el lenguaje,

así como ejemplos interactivos.

Desarrollo Web: Full Stack 44

Tema 2. A fondo
© Universidad Internacional de La Rioja (UNIR)
 Test

1. ¿Qué significa NaN?

A. Not a Negation.

B. Nor and Neither.

C. Nano.

D. Ninguno de los anteriores.

2. Una cadena de texto (string) en JavaScript es:

A. Un objeto.

B. Un tipo de dato básico.

C. Lo mismo que un array.

D. Todas las anteriores son falsas.

3. ¿Cómo debemos comparar la igualdad entre dos valores?

A. Con el operador triple igual.

B. Con un único signo igual.

C. Con el operador flecha.

D. Con el método .isTheSameAs().

4. ¿Qué ocurre cuando igualamos una variable a null?

A. Nada en absoluto, JavaScript ignora esa línea de código.

B. Estamos indicando explícitamente que dicha variable puede tener cualquier

valor.

C. Estamos dándole un valor al azar.

D. Ninguna de las anteriores.

Desarrollo Web: Full Stack 45

Tema 2. Test
© Universidad Internacional de La Rioja (UNIR)
 Test

5. ¿Qué símbolo se usa para notación exponencial?

A. Exp.

B. Power.

C. e.

D. ^.

6. ¿Qué permite una cadena de texto literal?

A. Una cadena de texto de un solo carácter.

B. Una cadena de texto cuyo mensaje es siembre verdadero.

C. Una cadena de texto vacía.

D. Una cadena de texto que admite instrucciones JavaScript internamente.

7. ¿Qué símbolo se utiliza para indicar una cadena de texto literal?

A. Dobles comillas invertidas.

B. Dobles comillas.

C. Dos signos de admiración.

D. Tres puntos suspensivos a cada lado.

8. JavaScript admite solo comillas dobles para indicar una cadena de texto:

A. Verdadero.

B. Falso.

9. Las cadenas de texto admiten métodos:

A. Verdadero.

B. Falso.

Desarrollo Web: Full Stack 46

Tema 2. Test
© Universidad Internacional de La Rioja (UNIR)
 Test

10. La asignación de valores por referencia:

A. Es lo mismo que la asignación directa.

B. Solo puede usarse con números enteros positivos.

C. Se utiliza, por defecto, con objetos.

D. No existe en JavaScript.

Desarrollo Web: Full Stack 47

Tema 2. Test
© Universidad Internacional de La Rioja (UNIR)