Lenguajes de Marcas y

Sistemas de Gestión de la
Información

07 UD7 – JavaScript
Licencia

Toda la documentación de esta asignatura queda recogida bajo la licencia de Creative Commons

https://creativecommons.org/licenses/by-nc-nd/4.0/

En el caso de incumplimiento o infracción de una licencia Creative Commons, el autor, como con cualquier otra obra y licencia, habrá de recurrir a los
tribunales. Cuando se trate de una infracción directa (por un usuario de la licencia Creative Commons), el autor le podrá demandar tanto por infracción de la
propiedad intelectual como por incumplimiento contractual (ya que la licencia crea un vínculo directo entre autor y usuario/licenciatario). El derecho moral de
integridad recogido por la legislación española queda protegido aunque no aparezca en las licencias Creative Commons. Estas licencias no sustituyen ni
reducen los derechos que la ley confiere al autor; por tanto, el autor podría demandar a un usuario que, con cualquier licencia Creative Commons, hubiera
modificado o mutilado su obra causando un perjuicio a su reputación o sus intereses. Por descontado, la decisión de cuándo ha habido mutilación y de
cuándo la mutilación perjudica la reputación o los intereses del autor quedaría en manos de cCutacia Juez o Tribunal.

Olga M. Moreno Martín 2

ÍNDICE
1. ¿Qué es JavaScript? 14. ¿Qué son los bucles?
2. Insertar JavaScript en nuestro 15. Bucle ‘for’.
proyecto. 16. Bucle ‘while’.
3. Opciones para la salida de 17. Funciones – Tipos de sintaxis.
datos en JS. 18. Las funciones flecha.
4. Sintaxis de JS. 19. Métodos en los tipos de datos.
5. Variables y constantes. 20. Objetos en JS.
6. Tipos de datos. 21. Los tipos Set y Map
7. Interacción. 22. Clases en JS.
8. Conversión de tipos. 23. Archivos JSON.
9. Operadores aritméticos. 24. Manejar el DOM desde JS.
10. Operadores de comparación.
11. Sentencia ‘if-else’ y ‘nullish
coalescing’.
12. Operadores lógicos
13. Sentencia ‘switch-case’.

Olga M. Moreno Martín 3

Introducción - ¿Qué ES JAVASCRIPT?
• JavaScript es un lenguaje de script de amplio uso en la web

• También se utiliza en otros contextos, como en servidor→ Node.js

• Lenguaje de programación ligero (Script).

• Lenguaje para añadir interactividad a páginas web (Originalmente).

• Débilmente tipado

• JavaScript != Java
Nombre similar por
decisiones de marketing

Creado por Netscape para su navegador (1995).

Olga M. Moreno Martín 4

ECMAScript
• Define el estándar de JavaScript, independiente de la implementación de cada navegador.

• ECMAScript 3 → 1999, implementada por todos los navegadores

• ECMAScript 4 → se desechó

• ECMAScript 5 → 2009 → añade al lenguaje algunos objetos, métodos y propiedades y el modo estricto
(strict mode): Es la especificación que cumplen todos los navegadores modernos

• ECMAScript 6 → 2015 → añade promesas (son acciones que se resolverán a futuro, cuando se pueda, y
que sabremos si se llevaron a cabo con éxito o no)

• JavaScript es un lenguaje en evolución, regularmente se agregan nuevas características.

Para ver la compatibilidad por navegador y otros motores, consultar: https://caniuse.com

Olga M. Moreno Martín 5

¿Qué podemos hacer con JavaScript?
• Crear contenido en una página.
• Modificar contenido de una página.
• Reaccionar a eventos (P.ej. Ratón).
• Validar datos (Formularios).
• Detectar el navegador del usuario (y reaccionar en función de ello).
• Crear, leer y manipular cookies.
• Y miles de cosas más...

Olga M. Moreno Martín 6

Y bueno… ¿Por qué JavaScript?
Dynamic HTML: Conjunto de técnicas para crear páginas web interactivas, en contraste con las
páginas web estáticas.

DHTML= HTML + CSS + JavaScript + DOM.

– HTML: Definición y estructuración del contenido.

– CSS: Presentación visual.

– JavaScript: Lenguaje de programación. Define las acciones que se realizan según determinadas
condiciones.

– DOM: Document Object Model. Los diferentes elementos de una página web
modelados/representados como objetos, lo que permite interactuar con ellos y modificarlos
desde un lenguaje orientado a objetos.

Olga M. Moreno Martín 7

Insertar JavaScript en nuestro proyecto
Para utilizar JavaScript dentro de una página web, En un archivo externo (con extensión .js), de
usaremos la etiqueta <script>. Mediante esta modo que se pueda reutilizar entre varios
etiqueta, podemos incluir el código: documentos usando el atributo src:

• En el propio documento HTML con la etiqueta EJ2

<script></script>.

EJ1

Esta es la forma que nosotros usaremos por ser

la mejor en cuanto a usabilidad.
Olga M. Moreno Martín 8
Comentarios

// Comentario de una sola línea

/* Esto es un comentario
multilínea.
Las líneas son ignoradas */

Olga M. Moreno Martín 9

Opciones para la salida de datos en JS
JavaScript puede mostrar datos de formas diferentes:

• Mediante la consola del navegador utilizando console.log( ).

• Escribiendo en una caja de alertas, usando window.alert( ).

• Escribiendo en un elemento HTML, utilizando innerHTML. Para acceder a un elemento

podemos usar el método: let element = document.getElementById(id).

• Escribiendo en la salida estándar de HTML, mediante document.write( ). Esto es solo

recomendable en fases de prueba.

Olga M. Moreno Martín 10

Sintaxis de JavaScript
La sintaxis de JavaScript define como el código de los programas está construido. Nos vamos a
encontrar lo siguiente:

• Valores: Pueden ser literales, constantes o variables, que almacenan los valores de los datos.

• Operadores: Hay aritméticos, de comparación y lógicos.

• Expresiones: Combinan operadores, valores literales y variables; que dan como resultado un
valor.

• Palabras clave: Identifican una acción a realizar, como puede ser crear una variable.

• Comentarios: Parte del código que no debe ser ejecutado y sirven para la comprensión del
código.

• Identificadores: Son nombres que sirven para identificar variables, funciones o palabras clave.

Olga M. Moreno Martín 11

variables
• Una variable es un “almacén con un nombre” para guardar datos. Podemos usar variables para
almacenar golosinas, visitantes, y otros datos.
• Para generar una variable en JavaScript, se usa la palabra clave let.
• La siguiente declaración genera (en otras palabras: declara o define) una variable con el
nombre “message”:

• Ahora podemos introducir datos en ella al utilizar el operador de asignación =:

let message; message = 'Hola'; EJ3

5 2 5

A A A A
Variable llamada A Insertamos 5 en A “vale” 5 A deja de
la variable A valer 5 y ahora vale 2

Por eso se llaman variables, porque su valor puede variar

Olga M. Moreno Martín 12

variables
• También podemos declarar variables múltiples en una sola línea:
let user = 'John', age = 25, message = 'Hola';
• Esto puede parecer más corto, pero no lo recomendamos. Por el bien de la legibilidad, por favor utiliza una línea por
variable.
• La versión de líneas múltiples es un poco más larga, pero se lee más fácil:
let user = 'John';
let age = 25;
let message = 'Hola';
• Algunas personas también definen variables múltiples en estilo multilínea:
let user = 'John’,
age = 25,
message = 'Hola';
• …Incluso en este estilo “coma primero”:
let user = 'John’
, age = 25
, message = 'Hola';
• Técnicamente, todas estas variantes hacen lo mismo. Así que, es cuestión de gusto personal y preferencia estética.

Olga M. Moreno Martín 13

variables
Declarar dos veces lanza un error

• Una variable debe ser declarada solamente una vez.

• Una declaración repetida de la misma variable es un error:

let message = "This"; // 'let' repetidos lleva a un error

let message = "That"; // SyntaxError: 'message' ya fue declarado

• Debemos declarar una variable una sola vez y desde entonces referirnos a ella sin let.

Olga M. Moreno Martín 14

variables
var en vez de let

• En scripts más viejos, a veces se encuentra otra palabra clave: var en lugar de let:

var mensaje = 'Hola’;

• La palabra clave var es casi lo mismo que let.

• También hace la declaración de una variable, aunque de un modo ligeramente distinto, y más
antiguo.
• Existen sutiles diferencias entre let y var, pero no nos interesan en este momento. Cubriremos
el tema a detalle en la diapositiva La vieja "var".

Olga M. Moreno Martín 15

nombrar las variables
Existen dos limitaciones de nombre de variables en JavaScript:

1. El nombre únicamente puede incluir letras, dígitos, o los símbolos $ y _.

2. El primer carácter no puede ser un dígito.

• Ejemplos de nombres válidos: let userName; let test123;

• Cuando el nombre contiene varias palabras, comúnmente se utiliza camelCase. Es decir: palabras
van una detrás de otra, con cada palabra iniciando con letra mayúscula: miNombreMuyLargo.
• Es interesante notar que el símbolo del dólar '$' y el guion bajo '_' también se utilizan en nombres.
Son símbolos comunes, tal como las letras, sin ningún significado especial.

• Los siguientes nombres son válidos: ✅

let $ = 1; // Declara una variable con el nombre "$"
let _ = 2; // y ahora una variable con el nombre "_"
alert($ + _); // 3

Ejemplos de nombres incorrectos: ❌

let 1a; // no puede iniciar con un dígito
let my-name; // los guiones '-' no son permitidos en nombres
Olga M. Moreno Martín 16
nombrar las variables
Nombres reservados
• Hay una lista de palabras reservadas, las cuales no pueden ser utilizadas como nombre de
variable porque el lenguaje en sí las utiliza.

• Por ejemplo: let, class, return, y function están reservadas.

Una asignación sin utilizar use strict

• Normalmente, debemos definir una variable antes de utilizarla. Pero, en los viejos tiempos, era
técnicamente posible crear una variable simplemente asignando un valor sin utilizar ‘let’. Esto
aún funciona si no ponemos ‘use strict’ en nuestros scripts para mantener la compatibilidad
con scripts antiguos.
// nota: no se utiliza "use strict" en este ejemplo
num = 5; // se crea la variable "num" si no existe
antes alert(num); // 5
• Esto es una mala práctica que causaría errores en ‘strict mode’:

"use strict";
num = 5; // error: num no está definida

Olga M. Moreno Martín 17

constantes
Para declarar una variable constante (inmutable) usamos const en vez de let:

const myBirthday = '06.01.1994';

Las variables declaradas utilizando const se llaman “constantes”. No pueden ser alteradas. Al
intentarlo causaría un error:
const myBirthday = '18.04.1982’;
myBirthday = '01.01.2001'; // ¡error, no se puede reasignar la constante!
Cuando un programador está seguro de que una variable nunca cambiará, puede declarar la
variable con const para garantizar y comunicar claramente este hecho a todos.

Olga M. Moreno Martín 18

constantes
Constantes mayúsculas

• Existe una práctica utilizada ampliamente de utilizar constantes como aliases de valores
difíciles-de-recordar y que se conocen previo a la ejecución.
• Tales constantes se nombran utilizando letras mayúsculas y guiones bajos.

• Por ejemplo, creemos constantes para los colores en el formato “web” (hexadecimal):

const COLOR_RED = "#F00";

const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00"; // ...cuando debemos elegir un color
let color = COLOR_ORANGE;
alert(color); // #FF7F00

Ventajas:
• COLOR_ORANGE es mucho más fácil de recordar que "#FF7F00".
• Es mucho más fácil escribir mal "#FF7F00" que COLOR_ORANGE.
• Al leer el código, COLOR_ORANGE tiene mucho más significado que #FF7F00.

Olga M. Moreno Martín 19

constantes
• ¿Cuándo se deben utilizar letras mayúsculas para una constante, y cuando se debe nombrarla
de manera normal? Dejémoslo claro.

• Ser una “constante” solo significa que el valor de la variable nunca cambia. Pero hay
constantes que son conocidas previo a la ejecución (como el valor hexadecimal del color rojo) y
hay constantes que son calculadas en el tiempo de ejecución, pero no cambian después de su
asignación inicial.

• Por ejemplo: const pageLoadTime = /* el tiempo que tardó la página web para cargar */;

• El valor de pageLoadTime no se conoce antes de cargar la página, así que la nombramos

normalmente. No obstante, es una constante porque no cambia después de su asignación
inicial.

• En otras palabras, las constantes con nombres en mayúscula son utilizadas solamente como
alias para valores invariables y preestablecidos (“hard-coded”).

Olga M. Moreno Martín 20

Nombrar cosas correctamente
• Una variable debe tener un nombre claro, de significado evidente, que describa el dato que
almacena.

• Nombrar variables es una de las habilidades más importantes y complejas en la programación.

Un vistazo rápido a el nombre de las variables nos revela cuál código fue escrito por un
principiante o por un desarrollador experimentado.

• En un proyecto real, la mayor parte del tiempo se pasa modificando y extendiendo una base de
código en vez de empezar a escribir algo desde cero. Cuando regresamos a algún código
después de hacer algo distinto por un rato, es mucho más fácil encontrar información que está
bien etiquetada. O, en otras palabras, cuando las variables tienen nombres adecuados.
• Por favor pasa tiempo pensando en el nombre adecuado para una variable antes de declararla.
Hacer esto te da un retorno muy sustancial.

Olga M. Moreno Martín 21

nombrar cosas correctamente
Algunas reglas buenas para seguir:

• Use términos legibles para humanos como userName o shoppingCart.

• Evite abreviaciones o nombres cortos a, b, c, al menos que en serio sepa lo que está haciendo.

• Cree nombres que describen al máximo lo que son y sean concisos. Ejemplos que no son
adecuados son data y value. Estos nombres no nos dicen nada. Estos solo está bien usarlos en
el contexto de un código que deje excepcionalmente obvio cuál valor o cuales datos está
referenciando la variable.

• Acuerda en tu propia mente y con tu equipo cuáles términos se utilizarán. Si a un visitante se

le llamara “user”, debemos llamar las variables relacionadas currentUser o newUser en vez
de currentVisitor o newManInTown.

• ¿Suena simple? De hecho lo es, pero no es tan fácil crear nombres de variables descriptivos y
concisos a la hora de practicar.

Olga M. Moreno Martín 22

¿Reusar o crear?
¿Reusar o crear?

Existen programadores haraganes que, en vez de declarar una variable nueva, tienden a reusar
las existentes.

El resultado de esto es que sus variables son como cajas en las cuales la gente introduce cosas
distintas sin cambiar sus etiquetas. ¿Que existe dentro de la caja? ¿Quién sabe? Necesitamos
acercarnos y revisar.

Dichos programadores se ahorran un poco durante la declaración de la variable, pero pierden

diez veces más a la hora de depuración.

Una variable extra es algo bueno, no algo malvado.

Los minificadores(.min.js) de JavaScript moderno, y los navegadores optimizan el código

suficientemente bien para no generar cuestiones de rendimiento. Utilizar diferentes variables
para distintos valores incluso puede ayudar a optimizar su código.

Olga M. Moreno Martín 23

Resumen
Podemos declarar variables para almacenar datos al utilizar las palabras clave var, let, o const.

• let – es la forma moderna de declaración de una variable.

• var – es la declaración de variable de vieja escuela. Normalmente no lo utilizamos en absoluto.

• const – es como let, pero el valor de la variable no puede ser alterado.

Las variables deben ser nombradas de tal manera que entendamos fácilmente lo que está en su
interior.

Olga M. Moreno Martín 24

tipos de datos
Un valor en JavaScript siempre pertenece a un tipo de dato determinado. Por ejemplo, un string
o un número.

Hay ocho tipos de datos básicos en JavaScript.

Podemos almacenar un valor de cualquier tipo dentro de una variable. Por ejemplo, una variable
puede contener en un momento un string y luego almacenar un número:

EJ4

Los lenguajes de programación que permiten estas cosas, como JavaScript, se denominan
“dinámicamente tipados”, lo que significa que allí hay tipos de datos, pero las variables no están
vinculadas rígidamente a ninguno de ellos.

Olga M. Moreno Martín 25

number
• El tipo number representa tanto números enteros como de
punto flotante.

• Hay muchas operaciones para números. Por ejemplo,

multiplicación *, división /, suma +, resta -, y demás. EJ4
• Además de los números comunes, existen los llamados “valores
numéricos especiales” que también pertenecen a este tipo de
datos: Infinity, -Infinity y NaN.

• Infinity representa el Infinito matemático ∞. Es un valor especial

que es mayor que cualquier número. Podemos obtenerlo como
resultado de la división por cero o simplemente hacer referencia
a él directamente.

• NaN representa un error de cálculo. Es el resultado de una

operación matemática incorrecta o indefinida. NaN es
“pegajoso”. Cualquier otra operación sobre NaN devuelve NaN.
Por lo tanto, si hay un NaN en alguna parte de una expresión
matemática, se propaga a todo el resultado (con una única
excepción: NaN ** 0 es 1).
Olga M. Moreno Martín 26
bigint
• En JavaScript, el tipo “number” no puede representar de forma segura valores enteros mayores
que (253-1) (eso es 9007199254740991), o menor que -(253-1) para negativos.

• Para ser realmente precisos, el tipo de dato “number” puede almacenar enteros muy grandes
(hasta 1.7976931348623157 * 10308), pero fuera del rango de enteros seguros ±(253-1) habrá un
error de precisión, porque no todos los dígitos caben en el almacén fijo de 64-bit. Así que es
posible que se almacene un valor “aproximado”.

• Por ejemplo, estos dos números (justo por encima del rango seguro) son iguales:

EJ4

• Podemos decir que ningún entero impar mayor que (253-1) puede almacenarse en el tipo de
dato “number”.
• Para la mayoría de los propósitos, el rango ±(253-1) es suficiente, pero a veces necesitamos
números realmente grandes; por ejemplo, para criptografía o marcas de tiempo de precisión
de microsegundos.

Olga M. Moreno Martín 27

bigint
• BigInt se agregó recientemente al lenguaje para representar enteros de longitud arbitraria.
• Un valor BigInt se crea agregando n al final de un entero:

EJ4

• Como los números BigInt rara vez se necesitan, no los cubrimos aquí sino que les dedicamos
un capítulo separado <info: bigint>. Léelo cuando necesites números tan grandes.

Problemas de compatibilidad
En este momento, BigInt está
soportado por
Firefox/Chrome/Edge/Safari, pero no
por IE. Olga M. Moreno Martín 28
String
• Un string en JavaScript es una cadena de caracteres y debe colocarse entre comillas.

EJ4

• En JavaScript, hay 3 tipos de comillas:

1. Comillas dobles: "Hola".
2. Comillas simples: 'Hola'.
3. Backticks (comillas invertidas): `Hola`.
• Las comillas dobles y simples son comillas “sencillas” (es decir, funcionan igual). No hay
diferencia entre ellas en JavaScript.
• Los backticks son comillas de “funcionalidad extendida”. Nos permiten incrustar variables y
expresiones en una cadena de caracteres encerrándolas en ${...}, por ejemplo:

EJ4

Olga M. Moreno Martín 29

string
• La expresión dentro de ${...} se evalúa y el resultado pasa a formar parte de la cadena. Podemos
poner cualquier cosa ahí dentro: una variable como name, una expresión aritmética como 1 + 2,
o algo más complejo.
• Toma en cuenta que esto sólo se puede hacer con los backticks. ¡Las otras comillas no tienen
esta capacidad de incrustación!

EJ4

No existe el tipo carácter

En algunos lenguajes, hay un tipo especial “carácter” para un
solo carácter. Por ejemplo, en el lenguaje C y en Java es char.
En JavaScript no existe tal tipo. Sólo hay un tipo: string. Un
string puede estar formado por un solo carácter, por ninguno,
o por varios de ellos. Olga M. Moreno Martín 30
boolean
• El tipo boolean tiene sólo dos valores posibles: true y false.

• Este tipo se utiliza comúnmente para almacenar valores de sí/no: true significa “sí, correcto,
verdadero”, y false significa “no, incorrecto, falso”.

EJ4

• Los valores booleanos también son el resultado de comparaciones:

EJ4

Olga M. Moreno Martín 31

El valor “null” (nulo)
• El valor especial null no pertenece a ninguno de los tipos descritos anteriormente.
• Forma un tipo propio separado que contiene sólo el valor null:

• En JavaScript, null no es una “referencia a un objeto inexistente” o un “puntero nulo” como en

otros lenguajes.
• Es sólo un valor especial que representa “nada”, “vacío” o “valor desconocido”.
• El código anterior indica que el valor de age es desconocido o está vacío por alguna razón.

Olga M. Moreno Martín 32

El valor “undefined” (indefinido)
• El valor especial undefined también se distingue. Hace un tipo propio, igual que null.
• El significado de undefined es “valor no asignado”.
• Si una variable es declarada, pero no asignada, entonces su valor es undefined:

EJ4

• Técnicamente, es posible asignar undefined a cualquier variable. Pero no recomendamos

hacer eso. Normalmente, usamos null para asignar un valor “vacío” o “desconocido” a una
variable, mientras undefined es un valor inicial reservado para cosas que no han sido
asignadas.
Olga M. Moreno Martín 33
Object y symbol
• El tipo object (objeto) es especial.

• Todos los demás tipos se llaman “primitivos” porque sus valores pueden contener una sola
cosa (ya sea una cadena, un número o lo que sea). Por el contrario, los objetos se utilizan para
almacenar colecciones de datos y entidades más complejas.

• Siendo así de importantes, los objetos merecen un trato especial. Nos ocuparemos de ellos
más adelante en el apartado dedicado a Objetos después de aprender más sobre los
primitivos.

• El tipo symbol (símbolo) se utiliza para crear identificadores únicos para los objetos. Tenemos
que mencionarlo aquí para una mayor integridad, pero es mejor estudiar este tipo después de
los objetos.

Olga M. Moreno Martín 34

 El operador typeof
• El operador typeof devuelve el tipo del argumento. Es útil cuando queremos procesar valores de
diferentes tipos de forma diferente o simplemente queremos hacer una comprobación rápida.
• La llamada a typeof x devuelve una cadena con el nombre del tipo:

Las últimas tres líneas pueden necesitar una explicación adicional:

• Math es un objeto incorporado que proporciona operaciones EJ4

matemáticas. Lo aprenderemos en el capítulo Números. Aquí sólo sirve
como ejemplo de un objeto.

• El resultado de typeof null es "object". Esto es oficialmente un error de

comportamiento de typeof que proviene de los primeros días de
JavaScript y se mantiene por compatibilidad. null no es un objeto. Es un
valor especial con un tipo propio separado.

• El resultado de typeof alert es "function" porque alert es una función.

Estudiaremos las funciones en los próximos capítulos donde veremos
que no hay tipo especial “function” en JavaScript. Las funciones
pertenecen al tipo objeto. Pero typeof las trata de manera diferente,
devolviendo function. Además proviene de los primeros días de
JavaScript. Técnicamente dicho comportamiento es incorrecto, pero
puede ser conveniente en la práctica.
Olga M. Moreno Martín 35
resumen
Hay 8 tipos básicos en JavaScript

Siete tipos de datos primitivos:

1. number para números de cualquier tipo: enteros o de punto flotante, los enteros están
limitados por ±(253-1).
2. bigint para números enteros de longitud arbitraria.
3. string para cadenas. Una cadena puede tener cero o más caracteres, no hay un tipo especial
para un único carácter.
4. boolean para verdadero y falso: true/false.
5. null para valores desconocidos – un tipo independiente que tiene un solo valor nulo: null.
6. undefined para valores no asignados – un tipo independiente que tiene un único valor
“indefinido”: undefined.
7. symbol para identificadores únicos.

Y un tipo de dato no primitivo:

1. object para estructuras de datos complejas.
El operador typeof nos permite ver qué tipo está almacenado en una variable.
Dos formas: typeof x o typeof(x).
• Devuelve una cadena con el nombre del tipo. Por ejemplo "string".
• Para null devuelve "object": esto es un error en el lenguaje, en realidad no es un objeto.

Olga M. Moreno Martín 36

Interacción: alert, prompt, confirm
Como usaremos el navegador como nuestro entorno de demostración, veamos un par de
funciones para interactuar con el usuario: alert, prompt y confirm.

ALERT
• Este ya lo hemos visto. Muestra un mensaje y espera a que el usuario presione “Aceptar”.
• Por ejemplo:

EJ5

• La mini ventana con el mensaje se llama ventana modal . La palabra “modal” significa que el
visitante no puede interactuar con el resto de la página, presionar otros botones, etc., hasta
que se haya ocupado de la ventana. En este caso, hasta que presionen “OK”.

Olga M. Moreno Martín 37

Interacción: alert, prompt, confirm
PROMPT EJ5
• Muestra una ventana modal con un mensaje
de texto, un campo de entrada para el
visitante y los botones OK/CANCELAR.

• title: El texto a mostrar al usuario.

• default: Un segundo parámetro opcional, el Corchetes en la sintaxis [...]
valor inicial del campo de entrada. Los corchetes alrededor de default en la sintaxis de
arriba denotan que el parámetro es opcional, no
• El usuario puede escribir algo en el campo requerido.
de entrada de solicitud y presionar OK. Así
obtenemos ese texto en result. O puede En IE: proporciónale un predeterminado siempre
cancelar la entrada presionando Cancelar o El segundo parámetro es opcional, pero si no lo
presionando la tecla Esc obteniendo null en proporcionamos, Internet Explorer insertará el texto
result. "undefined” en el prompt.
• La llamada a prompt retorna el texto del Ejecuta este código en Internet Explorer para verlo:
let test = prompt("Test");
campo de entrada o null si la entrada fue
Por lo tanto, para que las indicaciones se vean bien en
cancelada. IE, recomendamos siempre proporcionar el segundo
argumento: let test = prompt("Test", ''); // <-- para IE

Olga M. Moreno Martín 38

Interacción: alert, prompt, confirm
CONFIRM

• La función confirm muestra una ventana modal con una pregunta y dos botones: OK y
CANCELAR.
• El resultado es true si se pulsa OK y false en caso contrario.

• Por ejemplo: EJ5

Olga M. Moreno Martín 39

RESUMEN
Cubrimos 3 funciones específicas del navegador para interactuar con los usuarios:
• alert: muestra un mensaje.
• prompt: muestra un mensaje pidiendo al usuario que introduzca un texto. Retorna el texto o, si
se hace clic en CANCELAR o Esc, retorna null.
• confirm: muestra un mensaje y espera a que el usuario pulse “OK” o “CANCELAR”.
Retorna true si se presiona OK y false si se presiona CANCEL/Esc.

• Todos estos métodos son modales: detienen la ejecución del script y no permiten que el
usuario interactúe con el resto de la página hasta que la ventana se haya cerrado.

Hay dos limitaciones comunes a todos los métodos anteriores:

• La ubicación exacta de la ventana modal está determinada por el navegador. Normalmente,

está en el centro.
• El aspecto exacto de la ventana también depende del navegador. No podemos modificarlo.
• Ese es el precio de la simplicidad. Existen otras formas de mostrar ventanas más atractivas e
interactivas para el usuario, pero si la “apariencia” no importa mucho, estos métodos funcionan
bien.

Olga M. Moreno Martín 40

conversiones de tipos
• La mayoría de las veces, los operadores y funciones convierten automáticamente los valores
que se les pasan al tipo correcto. Esto es llamado “conversión de tipo”.

• Por ejemplo, alert convierte automáticamente cualquier valor a string para mostrarlo. Las
operaciones matemáticas convierten los valores a números.

• También hay casos donde necesitamos convertir de manera explícita un valor al tipo esperado.

Aún no hablamos de objetos

En este capítulo no hablamos de objetos. Por ahora, solamente veremos los valores primitivos.
Más adelante, después de haberlos tratado, veremos la conversión de objeto a valor primitivo.

Olga M. Moreno Martín 41

conversiones de tipos
ToString
• La conversión a string ocurre cuando necesitamos la representación en forma de texto de un
valor.
• Por ejemplo, alert(value) lo hace para mostrar el valor como texto.
• También podemos llamar a la función String(value) para convertir un valor a string:

EJ6

• La conversión a string es bastante obvia. El boolean false se convierte en "false", null en "null",
etc.

Olga M. Moreno Martín 42

conversiones de tipos
ToNumber
• La conversión numérica ocurre automáticamente en funciones matemáticas y expresiones.
• Por ejemplo, cuando se dividen valores no numéricos usando /:

• Podemos usar la función Number(value) para convertir de forma explícita un valor a un

número:

EJ6

• La conversión explícita es requerida usualmente cuando leemos un valor desde una fuente
basada en texto, como lo son los campos de texto en los formularios, pero que esperamos que
contengan un valor numérico.
• Si el string no es un número válido, el resultado de la conversión será NaN. Por ejemplo:

Olga M. Moreno Martín 43

conversiones de tipos
ToNumber
Reglas de conversión numérica:

Valor Se convierte en…

undefined NaN
null 0
true and false 1y0
Se eliminan los espacios (incluye espacios, tabs \t, saltos de línea \n, etc.) al
string inicio y final del texto. Si el string resultante es vacío, el resultado es 0, en caso
contrario el número es “leído” del string. Un error devuelve NaN.

EJ6

• Ten en cuenta que null y undefined se comportan de distinta manera aquí: null se convierte
en 0 mientras que undefined se convierte en NaN.
Olga M. Moreno Martín 44
conversiones de tipos
Adición ‘+’ concatena strings

• Casi todas las operaciones matemáticas convierten valores a números. Una excepción notable
es la suma +. Si uno de los valores sumados es un string, el otro valor es convertido a string.

• Luego, los concatena (une):

EJ6

• Esto ocurre solo si al menos uno de los argumentos es un string, en caso contrario los valores
son convertidos a número.

Olga M. Moreno Martín 45

conversiones de tipos
ToBoolean

• La conversión a boolean es la más simple.

• Ocurre en operaciones lógicas (más adelante veremos test condicionales y otras cosas
similares), pero también puede realizarse de forma explícita llamando a la función
Boolean(value).

Las reglas de conversión:

• Los valores que son intuitivamente “vacíos”, como 0, "", null, undefined, y NaN, se convierten
en false.
• Otros valores se convierten en true. Ten en cuenta: el string con
EJ6 un cero "0" es true
Por ejemplo: Algunos lenguajes (como
PHP) tratan "0" como false.
Pero en JavaScript, un string
no vacío es siempre true.

Olga M. Moreno Martín 46

resumen
Las tres conversiones de tipo más usadas son a string, a número y a boolean.
ToString – Ocurre cuando se muestra algo. Se puede realizar con String(value). La conversión a
string es usualmente obvia para los valores primitivos.
ToNumber – Ocurre en operaciones matemáticas. Se puede realizar con Number(value).
La conversión sigue las reglas:
Valor Se convierte en…
undefined NaN
null 0
true / false 1/0
El string es leído “como es”, los espacios en blanco (incluye espacios, tabs \t, saltos de línea \n, etc.) tanto al
string
inicio como al final son ignorados. Un string vacío se convierte en 0. Un error entrega NaN.

ToBoolean – Ocurren en operaciones lógicas. Se puede realizar con Boolean(value).

Sigue las reglas:
Valor Se convierte en…
0, null, undefined, NaN, "" false
cualquier otro valor true

La mayoría de estas reglas son fáciles de entender y recordar. Las excepciones más notables donde
la gente suele cometer errores son:
• undefined es NaN como número, no 0.
• "0" y textos que solo contienen espacios como " " son true como boolean.
47
 operadores aritméticos o matemáticos
Operador Descripción Ejemplo
Operador binario. Devuelve el resto entero de dividir
Resto (%) 12 % 5 devuelve 2.
los dos operandos.
Operador unario. Agrega uno a su operando. Si se
usa como operador prefijo (++x), devuelve el valor de Si x es 3, ++x establece x en 4 y
Incremento (++) su operando después de agregar uno; si se usa devuelve 4, mientras que x++ devuelve
como operador sufijo (x++), devuelve el valor de su 3 y , solo entonces, establece x en 4.
operando antes de agregar uno.
Operador unario. Resta uno de su operando. El valor Si x es 3, entonces --x establece x en 2 y
Decremento (--) de retorno es análogo al del operador de devuelve 2, mientras que x-- devuelve
incremento. 3 y, solo entonces, establece x en 2.
Operador unario. Devuelve la negación de su
Negación unaria (-) Si x es 3, entonces -x devuelve -3.
operando.
Operador unario. Intenta convertir el operando en +"3" devuelve 3.
Positivo unario (+)
un número, si aún no lo es. +true devuelve 1.
Calcula la base a la potencia de exponente, es 2 ** 3 returns 8.
Operador de exponenciación (**)
decir, baseexponente 10 ** -1 returns 0.1.

Normalmente el operador + suma números. Pero si se aplica el + binario a una cadena, los une (concatena)

Olga M. Moreno Martín 48

operadores aritméticos o matemáticos
Ejemplos:

EJ7

Olga M. Moreno Martín 49

OPERADORES ARITMÉTICOS O MATEMÁTICOS
Ejemplos:

EJ7

Olga M. Moreno Martín 50

operadores aritméticos o matemáticos
Incremento/decremento entre otros operadores
• Los operadores ++/-- también pueden ser usados
dentro de expresiones. Su precedencia es más alta
que la mayoría de los otros operadores aritméticos.
Por ejemplo:

• Compara con:

• Aunque técnicamente está bien, tal notación

generalmente hace que el código sea menos
legible. Una línea hace varias cosas, no es bueno.
• Mientras lee el código, un rápido escaneo ocular
“vertical” puede pasar por alto fácilmente algo
como ‘counter++’ y no será obvio que la variable
aumentó.
• Aconsejamos un estilo de “una línea – una acción”:

EJ7
Olga M. Moreno Martín 51
operadores aritméticos o matemáticos
Coma
• El operador coma , es uno de los operadores más raros e inusuales. A veces, es utilizado para
escribir código más corto, entonces tenemos que saberlo para poder entender qué está
pasando.
• El operador coma nos permite evaluar varias expresiones, dividiéndolas con una coma ,. Cada
una de ellas es evaluada, pero sólo el resultado de la última es devuelto.

• Por ejemplo:

EJ7
• Tales trucos se usan en muchos frameworks de JavaScript. Por eso los estamos mencionando.
Pero generalmente no mejoran la legibilidad del código, por lo que debemos pensar bien
antes de usarlos.
Olga M. Moreno Martín 52
 operadores de comparación
var var1 = 3;
var var2 = 4;

Operador Descripción Ejemplos (devuelven true)

3 == var1"3" == var1
Igual (==) Devuelve true si los operandos son iguales.
3 == '3'
var1 != 4
No es igual (!=) Devuelve true si los operandos no son iguales.
var2 != "3"
Estrictamente igual (===) Devuelve true si los operandos son iguales y del mismo tipo. 3 === var1

var1 !== "3"

Desigualdad estricta (!==) Devuelve true si los operandos son del mismo tipo pero no iguales, o son de diferente tipo.
3 !== '3'
var2 > var1
Mayor que (>) Devuelve true si el operando izquierdo es mayor que el operando derecho.
"12" > 2
var2 >= var1
Mayor o igual que (>=) Devuelve true si el operando izquierdo es mayor o igual que el operando derecho.
var1 >= 3
var1 < var2
Menor que (<) Devuelve true si el operando izquierdo es menor que el operando derecho.
"2" < 12
var1 <= var2
Menor o igual (<=) Devuelve true si el operando izquierdo es menor o igual que el operando derecho.
var2 <= 5

Olga M. Moreno Martín 53

operadores de comparación
Ejemplos: El algoritmo para comparar dos cadenas :
1. Compare el primer carácter de ambas
EJ8 cadenas.
2. Si el primer carácter de la primera
cadena es mayor (o menor) que el de la
otra cadena, entonces la primera
cadena es mayor (o menor) que la
segunda. Hemos terminado.
3. De lo contrario, si los primeros
caracteres de ambas cadenas son los
mismos, compare los segundos
caracteres de la misma manera.
4. Repita hasta el final de cada cadena.
5. Si ambas cadenas tienen la misma
longitud, entonces son iguales. De lo
contrario, la cadena más larga es mayor.

Olga M. Moreno Martín 54

operadores de comparación
Comparación de diferentes tipos
Al comparar valores de diferentes tipos, JavaScript convierte los valores a números. Por ejemplo:

EJ8

Una consecuencia graciosa o endemoniada

Es posible que al mismo tiempo:
Dos valores sean iguales.
Uno de ellos sea true como booleano y el otro sea false como booleano.
Por ejemplo:

Desde el punto de vista de JavaScript, este resultado es bastante normal. Una comparación de
igualdad convierte valores utilizando la conversión numérica (de ahí que "0" se convierta en 0),
mientras que la conversión explícita Boolean utiliza otro conjunto de reglas.

Olga M. Moreno Martín 55

operadores de comparación
Ejemplos:

EJ8

Olga M. Moreno Martín 56

resumen
• Los operadores de comparación retornan un valor booleano.

• Las cadenas se comparan letra por letra en el orden del “diccionario”.

• Cuando se comparan valores de diferentes tipos, se convierten en números (excepto un

control de igualdad estricta).

• Los valores null y undefined son iguales == entre sí y no equivalen a ningún otro valor.

• Ten cuidado al usar comparaciones como > o < con variables que ocasionalmente pueden
ser null/undefined. Revisar por separado si hay null/undefined es una buena idea.

Olga M. Moreno Martín 57

Programación Estructurada
• Estructura condicional simple IF

Iniciamos

FALSE
IF(condición)

TRUE

Ejecutamos el interior del IF

Salimos del IF
EJ9

Olga M. Moreno Martín 58

Programación Estructurada
• Estructura condicional caso contrario IF - ELSE

Iniciamos

IF(condición)

TRUE FALSE

Ejecutamos el interior del Ejecutamos el interior del

IF ELSE

Salimos
EJ9

Olga M. Moreno Martín 59

Programación Estructurada
• Estructura condicional compleja IF – ELSE IF - ELSE

Iniciamos

TRUE Ejecutamos el
IF(condición)
interior del IF

FALSE

ELSE IF TRUE Ejecutamos el

(condición) interior del IF

FALSE

Ejecutamos el
interior del ELSE

EJ9
Salimos
Olga M. Moreno Martín 60
programación estructurada
EJ9
• Operador ternario ‘?’

A veces necesitamos asignar una variable dependiendo de

alguna condición.

Entonces el operador “ternario” también llamado “signo de

interrogación” nos permite ejecutar esto en una forma más
corta y simple. El operador está representado por un signo de
interrogación de cierre ? . A veces es llamado “ternario”
porque el operador tiene tres operandos. Es el único
operador de JavaScript que tiene esta cantidad de ellos.
La Sintaxis es:
let result = condition ? value1 : value2;
Se evalúa condition: si es verdadera entonces
devuelve value1 , de lo contrario value2.

Técnicamente, podemos omitir el paréntesis alrededor

de age > 18. El operador de signo de interrogación tiene una
precedencia baja, por lo que se ejecuta después de la
comparación >.

Olga M. Moreno Martín 61

operadores lógicos

Operador Uso Descripción

Devuelve expr1 si se puede convertir a false; de lo contrario,

AND devuelve expr2. Por lo tanto, cuando se usa con valores
expr1 && expr2
Lógico (&&) booleanos, && devuelve true si ambos operandos son true; de lo
contrario, devuelve false.

Devuelve expr1 si se puede convertir a true; de lo contrario,

devuelve expr2. Por lo tanto, cuando se usa con valores
OR lógico (||) expr1 || expr2
booleanos, || devuelve true si alguno de los operandos es true; si
ambos son falsos, devuelve false.

Devuelve false si su único operando se puede convertir a true; de

NOT lógico (!) !expr
lo contrario, devuelve true.

Olga M. Moreno Martín 62

operadores lógicos
Ejemplos con OR:
EJ10

Olga M. Moreno Martín 63

operadores lógicos
Ejemplos con AND:
EJ10

La precedencia de AND && es mayor que la de OR ||

La precedencia del operador AND && es mayor que la de OR ||.
Así que el código a && b || c && d es básicamente el mismo que si la
expresiones && estuvieran entre paréntesis: (a && b) || (c && d).

Olga M. Moreno Martín 64

operadores lógicos
Ejemplos con NOT:

La precedencia de
NOT ! es la mayor de
todos los
operadores lógicos,
así que siempre se
ejecuta primero,
antes que && o ||.

EJ10

Olga M. Moreno Martín 65

operador nullish coalescing ‘??’
El operador “nullish coalescing” (fusión de null) se escribe con un doble signo de cierre de
interrogación ??.
Como este trata a null y a undefined de forma similar, usaremos un término especial para este
artículo. Diremos que una expresión es “definida” cuando no es null ni undefined.

El resultado de a ?? b:
• si a está “definida”, será a,
• si a no está “definida”, será b.

Es decir, ?? devuelve el primer argumento cuando este no es null ni undefined. En caso contrario,
devuelve el segundo.
El operador “nullish coalescing” no es algo completamente nuevo. Es solamente una sintaxis
agradable para obtener el primer valor “definido” de entre dos.

Podemos reescribir result = a ?? b usando los operadores que ya conocemos:

result = (a !== null && a !== undefined) ? a : b;

Olga M. Moreno Martín 66

operador nullish coalescing ‘??’
• El uso típico de ?? es brindar un valor
predeterminado.

• Por ejemplo, aquí mostramos user si su valor

está “definido” (que no es null ni undefined). De
otro modo, muestra Anonymous:

• También podemos usar una secuencia

de ?? para seleccionar el primer valor que no
sea null/undefined de una lista. EJ10
• Digamos que tenemos los datos de un usuario
en las variables firstName, lastName y
nickName. Todos ellos podrían ser indefinidos
si el usuario decide no ingresar los valores
correspondientes.

• Queremos mostrar un nombre usando una de

estas variables, o mostrar “anónimo” si todas
ellas son null/undefined.
Olga M. Moreno Martín 67
operador nullish coalescing ‘??’
Comparación con ||
• El operador OR || puede ser usado de la misma manera que ??,
EJ10
tal como está explicado en diapositivas anteriores.
• Por ejemplo, en el código de arriba podemos reemplazar ?? por ||
y obtener el mismo resultado:
• Históricamente, el operador OR || estuvo primero. Existe desde el
origen de JavaScript, así que los desarrolladores lo estuvieron
usando para tal propósito durante mucho tiempo.
• Por otro lado, el operador “nullish coalescing” ?? fue una adición
reciente, y la razón es que la gente no estaba del todo satisfecha
con ||.

La gran diferencia es que:

• || devuelve el primer valor verdadero
• ?? devuelve el primer valor definido.

• El || no distingue entre false, 0, un string vacío "", y

null/undefined. Todos son lo mismo: valores “falsos”. Si
cualquiera de ellos es el primer argumento de ||, obtendremos el
segundo argumento como resultado.
• Pero en la práctica podemos querer usar el valor
predeterminado solamente cuando la variable es null/undefined,
es decir cuando el valor realmente es desconocido o no fue
establecido. 68
operador nullish coalescing ‘??’
Uso de ?? con && y ||
• Por motivos de seguridad, JavaScript prohíbe el uso de ?? junto con los operadores && y ||,
salvo que la precedencia sea explícitamente especificada con paréntesis.
• El siguiente código desencadena un error de sintaxis:

• La limitación es debatible. Fue agregada a la especificación del lenguaje con propósito de

evitar equivocaciones cuando la gente comenzara a reemplazar || por ??.
• Usa paréntesis explícitos para solucionarlo:

EJ10
Olga M. Moreno Martín 69
resumen
• El operador “nullish coalescing” ?? brinda una manera concisa de seleccionar un valor
“definido” de una lista.

• Es usado para asignar valores por defecto a las variables:

• El operador ?? tiene una precedencia muy baja, un poco más alta que ?: y =.

• Está prohibido su uso con || y && sin paréntesis explícitos.

EJ10
Olga M. Moreno Martín 70
Programación Estructurada
• Estructura condicional basada en casos SWITCH – CASE:

• Una sentencia switch puede reemplazar múltiples condiciones if.

• Provee una mejor manera de comparar un valor con múltiples variantes.

Iniciamos

SWITCH
(condición)
Caso 1
Ejecutamos
caso 1

Caso 2 Ejecutamos
caso 2

default Ejecutamos
caso N Salimos

Olga M. Moreno Martín 71

programación estructurada
• Ejemplos con SWITCH-CASE:

Olga M. Moreno Martín 72

programación estructurada
Bucles WHILE y FOR:

• Usualmente necesitamos repetir acciones.

• Por ejemplo, mostrar los elementos de una lista uno tras otro o simplemente ejecutar el mismo
código para cada número del 1 al 10.

• Los Bucles son una forma de repetir el mismo código varias veces.

• Podemos distinguir tres tipos de bucles:

a. While

b. Do…While

c. For

Olga M. Moreno Martín 73

Programación Estructurada
• Bucle Simple WHILE:

Iniciamos

WHILE
Salimos
(condición) FALSE
Mientras la
TRUE condición condition sea
verdadera, el código del
Ejecutamos el interior
del WHILE
cuerpo del bucle será
y actualizamos ejecutado.
EJ11
Olga M. Moreno Martín 74
programación estructurada
• Ejemplos WHILE:

• Cada ejecución del cuerpo del bucle se llama iteración. El bucle en el ejemplo de arriba realiza
3 iteraciones.
• Si faltara i++ en el ejemplo de arriba, el bucle sería repetido (en teoría) eternamente. En la
práctica, el navegador tiene maneras de detener tales bucles desmedidos; y en el JavaScript
del lado del servidor, podemos eliminar el proceso.
• Cualquier expresión o variable puede usarse como condición del bucle, no solo las
comparaciones: El while evaluará y transformará la condición a un booleano.
• Por ejemplo, una manera más corta de escribir while (i != 0) es while (i):

EJ11
Olga M. Moreno Martín 75
 Programación Estructurada
• Bucle postcondición DO-WHILE: Esta sintaxis solo
debe ser usada
Iniciamos cuando quieres que
el cuerpo del bucle
sea ejecutado al
menos una vez sin
DO:
Ejecutamos el interior importar que la
y actualizamos
condición sea
TRUE
verdadera.
Usualmente, se
FALSE
prefiere la otra
WHILE
Salimos forma: while(…) {…}.
(condición) EJ11
Olga M. Moreno Martín 76
Programación Estructurada
• Bucle FOR:

Iniciamos

Iniciamos el índice

FALSE
FOR
(condición) Salimos

parte
TRUE comienzo let i = 0 Se ejecuta una vez al comienzo del bucle.
Comprobada antes de cada iteración del bucle. Si es falsa, el
condición i<3
Ejecutamos el interior bucle finaliza.
del FOR cuerpo alert(i) Se ejecuta una y otra vez mientras la condición sea verdadera.
y actualizamos el
paso i++ Se ejecuta después del cuerpo en cada iteración.
índice en la cabecera

Olga M. Moreno Martín EJ11 77

programación estructurada
Bucle FOR- Omitiendo partes:
• Cualquier parte de for puede ser omitida.
• Por ejemplo, podemos quitar comienzo si no necesitamos realizar nada al inicio del bucle.

EJ11
Olga M. Moreno Martín 78
programación estructurada
Rompiendo el bucle:
• Normalmente, se sale de un bucle cuando la condición se vuelve falsa.
• Pero podemos forzar una salida en cualquier momento usando la directiva especial break.
• Por ejemplo, el bucle debajo le pide al usuario por una serie de números, “rompiéndolo”
cuando un número no es ingresado:
EJ11

• La directiva break es activada en la línea (*) si el usuario ingresa una línea vacía o cancela la
entrada. Detiene inmediatamente el bucle, pasando el control a la primera línea después de el
bucle. En este caso, alert.
• La combinación “bucle infinito + break según sea necesario” es ideal en situaciones donde la
condición del bucle debe ser comprobada no al inicio o al final de el bucle, sino a la mitad o
incluso en varias partes del cuerpo.
Olga M. Moreno Martín 79
programación estructurada
Continuar a la siguiente iteración:
• La directiva continue es una “versión más ligera” de break. No detiene el bucle completo. En su
lugar, detiene la iteración actual y fuerza al bucle a comenzar una nueva (si la condición lo
permite).
• Podemos usarlo si hemos terminado con la iteración actual y nos gustaría movernos a la
siguiente.
• El bucle debajo usa continue para mostrar solo valores impares:

No break/continue a la derecha de ‘?’

Por favor, nota que las construcciones
sintácticas que no son expresiones no pueden
ser usadas con el operador ternario ?. En
particular, directivas como break/continue no
son permitidas aquí.

• Para los valores pares de i, la directiva continue deja de ejecutar el cuerpo y pasa el control a la
siguiente iteración de for (con el siguiente número). Así que el alert solo es llamado para
valores impares.
EJ11
Olga M. Moreno Martín 80
programación estructurada
Etiquetas para break/continue:
• Una etiqueta es un identificador con un signo de dos puntos “:” antes de un bucle.

• En el código de arriba, break outer mira hacia arriba por la etiqueta llamada outer y nos saca
de dicho bucle.
• Así que el control va directamente de (*) a alert('Listo!’).
• Las etiquetas no son “goto”: Las etiquetas no nos permiten saltar a un lugar arbitrario en el
código. Por ejemplo, es imposible hacer esto:

EJ11
Olga M. Moreno Martín 81
resumen
Cubrimos 3 tipos de bucles:

• WHILE – La condición es comprobada antes de cada iteración.

• DO-WHILE – La condición es comprobada después de cada iteración.

• FOR (;;) – La condición es comprobada antes de cada iteración, con ajustes adicionales
disponibles.

Para crear un bucle “infinito”, usualmente se usa while(true). Un bucle como éste, tal y como
cualquier otro, puede ser detenido con la directiva break.

Si queremos detener la iteración actual y adelantarnos a la siguiente, podemos usar la

directiva continue.

break/continue soportan etiquetas antes del bucle. Una etiqueta es la única forma de
usar break/continue para escapar de un bucle anidado para ir a uno exterior.

Olga M. Moreno Martín 82

funciones
• Muy a menudo necesitamos realizar acciones similares en muchos lugares del script.
• Las funciones son bloques de código que ejecutan una tarea determinada y que pueden ser
ejecutados solo cuando se les llama mediante una parte del código en ejecución, por ejemplo,
ante un evento.
• Las funciones se definen mediante la palabra clave function, seguida de un identificador,
parámetros de entrada entre paréntesis y un bloque de código a ejecutar entre { }.
• Al invocar una función, se le pasan como argumento valores que serán tratados como
parámetros dentro de ella.
• Cuando queremos terminar la ejecución una función, usamos la palabra return, y volveremos a
la parte del código donde fue invocada. Las funciones pueden devolver o no un valor.
• Utilizamos funciones para poder reutilizar código, se define una vez y se usa todas las que se
necesite. También pueden ser utilizadas para asignar valores.
• Por ejemplo, debemos mostrar un mensaje atractivo cuando un visitante inicia sesión, cierra
sesión y tal vez en otros momentos.
• Las funciones son los principales “bloques de construcción” del programa. Permiten que el
código se llame muchas veces sin repetición.

Declaración: EJ1

Olga M. Moreno Martín 83

variables locales
• Una variable declarada dentro de una función solo es visible dentro de esa función.

EJ2
Olga M. Moreno Martín 84
variables externas
• Una función también puede acceder a una variable externa.
• La función tiene acceso completo a la variable externa. Puede modificarlo también.
• La variable externa solo se usa si no hay una local. Si una variable con el mismo nombre se
declara dentro de la función, le hace sombra a la externa.

EJ3

85
parámetros
• Podemos pasar datos arbitrarios a funciones usando parámetros.
• En el siguiente ejemplo, la función tiene dos parámetros: from y text.
• Cuando la función se llama (*) y (**), los valores dados se copian en variables locales from y text.
Y la función las utiliza.

EJ4

Olga M. Moreno Martín 86

parámetros
• Aquí hay un ejemplo más: tenemos una variable from y la pasamos a la función. Tenga en
cuenta: la función cambia from, pero el cambio no se ve afuera, porque una función siempre
obtiene una copia del valor:

EJ5

• Cuando un valor es pasado como un parámetro de función, también se denomina argumento.

Para poner los términos claros:
• Un parámetro es una variable listada dentro de los paréntesis en la declaración de función (es
un término para el momento de la declaración)
• Un argumento es el valor que es pasado a la función cuando esta es llamada (es el término
para el momento en que se llama).
• Declaramos funciones listando sus parámetros, luego las llamamos pasándoles argumentos.
• En el ejemplo de arriba, se puede decir: "la función showMessage es declarada con dos
parámetros, y luego llamada con dos argumentos: from y "Hola"". 87
valores prederminados
• Si una función es llamada, pero no se le proporciona un argumento, su valor correspondiente
se convierte en undefined.
• Por ejemplo, la función mencionada anteriormente showMessage(from, text) se puede llamar
con un solo argumento:

EJ5
• Eso no es un error. La llamada mostraría "Ann: undefined". Como no se pasa un valor de text,
este se vuelve undefined.
• Podemos especificar un valor llamado “predeterminado” o “por defecto” (es el valor que se usa
si el argumento fue omitido) en la declaración de función usando =:

Olga M. Moreno Martín 88

 valores prederminados
• Ahora, si no se pasa el parámetro text, obtendrá el valor "sin texto"
• El valor predeterminado también se asigna si el parámetro existe pero es estrictamente igual
a undefined:

• Aquí "sin texto" es un string, pero puede ser una expresión más compleja, la cual solo es
evaluada y asignada si el parámetro falta. Entonces, esto también es posible:

EJ5
Evaluación de parámetros predeterminados
En JavaScript, se evalúa un parámetro predeterminado cada vez que se llama a la función sin el parámetro respectivo.
En el ejemplo anterior, anotherFunction() no será llamado en absoluto si se provee el parámetro text.
Por otro lado, se llamará independientemente cada vez que text se omita.

Olga M. Moreno Martín 89

devolviendo un valor
• Una función puede devolver un valor al código
de llamada como resultado. El ejemplo más
sencillo sería una función que suma 2 valores:

• La directiva return puede estar en cualquier

lugar de la función. Cuando la ejecución lo
alcanza, la función se detiene y el valor se
devuelve al código de llamada (asignado al
result anterior).

• Puede haber muchos casos de return de una

sola función.

• Es posible utilizar return sin ningún valor. Eso

hace que la función salga o termine
inmediatamente.

EJ5
Olga M. Moreno Martín 90
devolviendo un valor
• Una función con un return vacío, o sin return, devuelve undefined.

Nunca agregue una nueva línea entre return y el valor

Para una expresión larga de return, puede ser tentador ponerlo en una línea separada, como ésta:
return
(una + expresion + o + cualquier + cosa * f(a) + f(b))
Eso no funciona, porque JavaScript asume un punto y coma después del return. Eso funcionará igual que:
return;
(una + expresion + o + cualquier + cosa * f(a) + f(b))

EJ5
Olga M. Moreno Martín 91
nomenclatura de funciones
• Las funciones son acciones. Entonces su nombre suele ser un verbo. Debe ser breve, lo más
preciso posible y describir lo que hace la función, para que alguien que lea el código obtenga
una indicación de lo que hace la función.
• Es una práctica generalizada comenzar una función con un prefijo verbal que describe
vagamente la acción. Debe haber un acuerdo dentro del equipo sobre el significado de los
prefijos.

Funciones que comienza con…

• "get…" – devuelven un valor,
• "calc…" – calculan algo,
• "create…" – crean algo,
• "check…" – revisan algo y devuelven un boolean, etc.
• "show…" - muestran algo y lo escriben en el DOM usualmente.

Una función – una acción

Una función debe hacer exactamente lo que sugiere su nombre, no más.
Dos acciones independientes por lo general merecen dos funciones, incluso si generalmente se convocan
juntas (en ese caso, podemos hacer una tercera función que llame a esas dos).

Olga M. Moreno Martín 92

resumen
• Una declaración de función se ve así:

• Los valores pasados a una función como parámetros se copian a sus variables locales.
• Una función puede acceder a variables externas. Pero funciona solo de adentro hacia afuera. El
código fuera de la función no ve sus variables locales.
• Una función puede devolver un valor. Si no lo hace, entonces su resultado es undefined.
• Para que el código sea limpio y fácil, se recomienda utilizar principalmente variables y
parámetros locales en la función.
• Siempre es más fácil entender una función que obtiene parámetros, trabaja con ellos y
devuelve un resultado que una función que no obtiene parámetros, pero modifica las variables
externas como un efecto secundario.

Nomenclatura de funciones:
• Un nombre debe describir claramente lo que hace la función. Una función es una acción, por
lo que los nombres de las funciones suelen ser verbos.
• Existen muchos prefijos de funciones bien conocidos como create…, show…, get…, check… y así.
Úsalos para insinuar lo que hace una función.
• Las funciones son los principales bloques de construcción de los scripts. Ahora hemos cubierto
los conceptos básicos, por lo que en realidad podemos comenzar a crearlos y usarlos.

Olga M. Moreno Martín 93

expresiones de función
• También podríamos haber usado una expresión de función para declarar sayHi en la primera
línea:

¿Por qué hay un punto y coma al final?

Tal vez te preguntes por qué la Expresión de Función tiene un punto y coma ; al final, pero la
Declaración de Función no lo tiene.
La respuesta es simple: una expresión de función se crea aquí como function(…) {…} dentro de la
sentencia de asignación let sayHi = …;. El punto y coma se recomienda para finalizar la sentencia,
no es parte de la sintaxis de función.
El punto y coma estaría allí para una asignación más simple tal como let sayHi = 5;, y también
está allí para la asignación de función.

EJ6
Olga M. Moreno Martín 94
expresiones de función
• En JavaScript, una función no es una “estructura mágica del lenguaje”, sino un tipo de valor
especial.
• La sintaxis que usamos antes se llama Declaración de Función:

• Existe otra sintaxis para crear una función que se llama una Expresión de Función.
• Esto nos permite crear una nueva función en el medio de cualquier expresión

EJ6
Olga M. Moreno Martín 95
expresiones de función
• Reiteremos: no importa cómo es creada la función, una función es un valor.

• Tenga en cuenta que la última línea no ejecuta la función, porque no hay paréntesis después
de sayHi. Existen lenguajes de programación en los que cualquier mención del nombre de una
función causa su ejecución, pero JavaScript no funciona así.
• En JavaScript, una función es un valor, por lo tanto podemos tratarlo como un valor. El código
de arriba muestra su representación de cadena, que es el código fuente.
• Por supuesto que es un valor especial, en el sentido que podemos invocarlo de esta
forma sayHi().
• Pero sigue siendo un valor. Entonces podemos trabajar con ello como trabajamos con otro tipo
de valores.
1.La Declaración de la Función (1) crea la función y
la coloca dentro de la variable llamada sayHi.
2.Línea(2) copia la función en la variable func.
3.Ahora la función puede ser llamada de ambas
maneras, sayHi() y func().
EJ6
Olga M. Moreno Martín 96
expresiones de función
• También podríamos haber usado una expresión de función para declarar sayHi en la primera
línea:

¿Por qué hay un punto y coma al final?

Tal vez te preguntes por qué la Expresión de Función tiene un punto y coma ; al final, pero la
Declaración de Función no lo tiene.
La respuesta es simple: una expresión de función se crea aquí como function(…) {…} dentro de la
sentencia de asignación let sayHi = …;. El punto y coma se recomienda para finalizar la sentencia,
no es parte de la sintaxis de función.
El punto y coma estaría allí para una asignación más simple tal como let sayHi = 5;, y también
está allí para la asignación de función.

EJ6
Olga M. Moreno Martín 97
Funciones Callback
Veamos más ejemplos del pasaje de funciones como valores y el uso de expresiones de función.
Escribimos una función ask(question, yes, no) con tres argumentos:
• question: Texto de la pregunta
• yes: Función a ejecutar si la respuesta es “Yes”
• no: Función a ejecutar si la respuesta es “No”

La función deberá preguntar la question y, dependiendo de la respuesta del usuario, llamar yes() o no():

EJ7
En la práctica, tales funciones son bastante útiles. La mayor diferencia entre la función ask en la vida real
y el ejemplo anterior es que las funciones de la vida real utilizan formas para interactuar con el usuario
más complejas que un simple confirme. En el navegador, una función como tal normalmente dibuja una
ventana de pregunta atractiva. Pero esa es otra historia. 98
Funciones Callback
Los argumentos de ask se llaman funciones callback o simplemente callbacks.
• La idea es que pasamos una función y esperamos que se “devuelva la llamada” más tarde si es
necesario. En nuestro caso, showOk se convierte en la callback para la respuesta “Yes”,
y showCancel para la respuesta “No”.
• Podemos usar Expresión de Función para redactar una función equivalente y más corta:

• Aquí, las funciones son declaradas justo dentro del llamado ask(...). No tienen nombre, y por lo
tanto se denominan anónimas. Tales funciones no se pueden acceder fuera de ask (porque no
están asignadas a variables), pero eso es justo lo que queremos aquí.
• Éste código aparece en nuestros scripts de manera muy natural, está en el archivo de
comandos de JavaScript. EJ7

Una función es un valor representando una “acción”

Valores regulares tales como cadena de caracteres o números representan los datos.
Una función puede ser percibida como una acción.
La podemos pasar entre variables y ejecutarla cuando nosotros queramos. 99
Expresión de Función vs Declaración de Función
Formulemos las principales diferencias entre Declaración y Expresión de Funciones.
Primero, la sintaxis: cómo diferenciarlas en el código.
• Declaración de Función: una función, declarada como una instrucción separada, en el flujo de
código principal.

• Expresión de Función: una función, creada dentro de una expresión o dentro de otra
construcción sintáctica. Aquí, la función es creada en el lado derecho de la “expresión de
asignación” =:

• La diferencia más sutil es cuándo la función es creada por el motor de JavaScript.

EJ8
Olga M. Moreno Martín 100
Expresión de Función vs Declaración de Función
Una Expresión de Función es creada cuando la ejecución la alcance y es utilizable desde ahí en adelante.
• Una vez que el flujo de ejecución pase al lado derecho de la asignación let sum = function… – aquí
vamos, la función es creada y puede ser usada (asignada, llamada, etc.) de ahora en adelante.
• Las Declaraciones de Función son diferente.
Una Declaración de Función puede ser llamada antes de ser definida.
• Por ejemplo, una Declaración de Función global es visible en todo el script, sin importar dónde se esté.
• Esto se debe a los algoritmos internos. Cuando JavaScript se prepara para ejecutar el script, primero
busca Declaraciones de Funciones globales en él y crea las funciones. Podemos pensar en esto como
una “etapa de inicialización”.

Y después de que se procesen todas las Declaraciones de Funciones, el código se ejecuta. Entonces tiene
acceso a éstas funciones.

La Declaración de Función sayHi es creada cuando JavaScript está preparándose para iniciar el script y es
visible en todas partes.
Las Expresiones de Función son creadas cuando la ejecución las alcance. Esto podría pasar solamente en
la línea (*). Demasiado tarde.

EJ8
Olga M. Moreno Martín 101
Expresión de Función vs Declaración de Función
En modo estricto, cuando una Declaración de Función se encuentra dentro de un bloque de
código, es visible en todas partes dentro de ese bloque. Pero no fuera de él.
• Por ejemplo, imaginemos que necesitamos declarar una función welcome() dependiendo de la
variable age que obtengamos durante el tiempo de ejecución. Y luego planeamos usarlo algún
tiempo después.
• Si utilizamos la Declaración de Funciones, no funcionará como se esperaba:

Esto se debe a que

una Declaración de
Función sólo es visible
dentro del bloque de
código en el que
EJ8
reside.
Olga M. Moreno Martín 102
Expresión de Función vs Declaración de Función
¿Qué podemos hacer para que welcome sea visible fuera de ‘if’?
• El enfoque correcto sería utilizar una Expresión de Función y asignar welcome a la variable que
se declara fuera de ‘if’ y tiene la visibilidad adecuada.

EJ8 Olga M. Moreno Martín 103

resumen
• Las funciones son valores. Se pueden asignar, copiar o declarar en cualquier lugar del código.

• Si la función se declara como una declaración separada en el flujo del código principal, eso se
llama “Declaración de función”.

• Si la función se crea como parte de una expresión, se llama “Expresión de función”.

• Las Declaraciones de Funciones se procesan antes de ejecutar el bloque de código. Son visibles
en todas partes del bloque.

• Las Expresiones de Función se crean cuando el flujo de ejecución las alcanza.

En la mayoría de los casos, cuando necesitamos declarar una función, es preferible una
Declaración de Función, ya que es visible antes de la declaración misma. Eso nos da más
flexibilidad en la organización del código, y generalmente es más legible.

Por lo tanto, deberíamos usar una Expresión de Función solo cuando una Declaración de Función
no sea adecuada para la tarea.

Olga M. Moreno Martín 104

Funciones flecha
• Hay otra sintaxis muy simple y concisa para crear funciones, que a menudo es mejor que las
Expresiones de funciones.

• Se llama “funciones de flecha”, porque se ve así:

• Esto crea una función func que acepta los parámetros arg1..argN, luego evalúa la expresión del
lado derecho mediante su uso y devuelve su resultado. En otras palabras, es la versión más
corta de:

EJ9
Olga M. Moreno Martín 105
funciones flecha
Como puedes ver, (a, b) => a + b significa una función que acepta dos argumentos llamados a y b.
Tras la ejecución, evalúa la expresión a + b y devuelve el resultado.

• Si solo tenemos un argumento, se pueden omitir paréntesis alrededor de los parámetros, lo

que lo hace aún más corto.

• Si no hay parámetros, los paréntesis estarán vacíos; pero deben estar presentes:

EJ9
Olga M. Moreno Martín 106
funciones flecha
• Las funciones de flecha se pueden usar de la misma manera que las expresiones de función.

• Por ejemplo, para crear dinámicamente una función:

• Las funciones de flecha pueden parecer desconocidas y poco legibles al principio, pero eso
cambia rápidamente a medida que los ojos se acostumbran a la estructura.

• Son muy convenientes para acciones simples de una línea, cuando somos demasiado flojos
para escribir muchas palabras.
EJ9
Olga M. Moreno Martín 107
funciones flecha
Funciones de flecha multilínea

• Las funciones de flecha que estamos viendo son muy simples. Toman los parámetros a la
izquierda de =>, los evalúan y devuelven la expresión del lado derecho.

• A veces necesitamos una función más compleja, con múltiples expresiones o sentencias. En
ese caso debemos encerrarlos entre llaves. La diferencia principal es que las llaves necesitan
usar un return para devolver un valor (tal como lo hacen las funciones comunes).

• Como esto:

EJ9
Olga M. Moreno Martín 108
resumen
Las funciones flecha son útiles para acciones simples, especialmente las de una sola línea. Vienen
en dos variantes:

• Sin llaves: (...args) => expression – el lado derecho es una expresión: la función la evalúa y
devuelve el resultado. Pueden omitirse los paréntesis si solo hay un argumento, por ejemplo n
=> n*2.

• Con llaves: (...args) => { body } – las llaves nos permiten escribir varias declaraciones dentro de la
función, pero necesitamos un return explícito para devolver algo.

Olga M. Moreno Martín 109

strings
• En JavaScript, los datos textuales son almacenados como
strings (cadena de caracteres). No hay un tipo de datos
separado para caracteres unitarios.
• El formato interno para strings es siempre UTF-16, no está
vinculado a la codificación de la página.

Comillas
• Recordemos los tipos de comillas. Los strings pueden estar
entre comillas simples, comillas dobles o backticks (acento
grave).

• Comillas simples y dobles son esencialmente lo mismo. En

cambio, los “backticks” nos permiten además ingresar
expresiones dentro del string envolviéndolos en ${…}:

• Otra ventaja de usar backticks es que nos permiten

extender en múltiples líneas el string:

Para acceder a un carácter en la

posición pos, se debe usar
corchetes, [pos]: single[0] = ’c’;
Olga M. Moreno Martín 110
string y sus métodos
• Ya hemos visto qué son los strings, vamos a ver algunos de los métodos y propiedades que
tienen:
• length: Propiedad para saber la longitud de un string.
• substring (inicio, final): Método con el que podemos sacar una subcadena entre dos posiciones
del string.
• toUpperCase ( ): Para convertir sus caracteres a mayúsculas.
• concat (string, string,…): Este método devuelve la unión de varios strings.
• split (string): Método que nos permite convertir el string en un array con las subcadenas que
quedan separadas por el carácter que le especifiquemos.
• indexOf (string): podemos saber cuál es la posición de un carácter o un string en la cadena.
• slice (inicio, final): Para extraer la subcadena contenida entre dos posiciones.
• replace (string, string): Permite remplazar una subcadena por otra.
• includes (string): Devuelve un valor booleano según si nuestra cadena contiene la que le
pasamos.
• at(n): Muestra el carácter situado en la posición n de la cadena.
length es una propiedad
Quienes tienen experiencia en otros lenguajes pueden cometer el error de escribir str.length() en
vez de str.length. Eso no funciona.
Nota que str.length es una propiedad numérica, no una función. No hay que agregar paréntesis
después de ella. No es .length(), sino .length.

Olga M. Moreno Martín 111

arrays
• Los objetos te permiten almacenar colecciones de datos a través de nombres. Eso está bien.
• Pero a menudo necesitamos una colección ordenada, donde tenemos un 1ro, un 2do, un 3er
elemento y así sucesivamente. Por ejemplo, necesitamos almacenar una lista de algo: usuarios,
bienes, elementos HTML, etc.
• No es conveniente usar objetos aquí, porque no proveen métodos para manejar el orden de los
elementos. No podemos insertar una nueva propiedad “entre” los existentes. Los objetos no
están hechos para eso.
• Existe una estructura llamada Array (llamada en español arreglo o matriz/vector) para
almacenar colecciones ordenadas.

Declaración

• Hay dos sintaxis para crear un array vacío:

• Casi siempre se usa la segunda.

Olga M. Moreno Martín 112

arrays
• Podemos suministrar elementos iniciales entre los corchetes:

• Los elementos del array están numerados comenzando desde cero.

• Podemos obtener un elemento por su número entre corchetes:

• Podemos reemplazar un elemento:

• …o agregar uno nuevo al array:

Olga M. Moreno Martín 113

Array y sus métodos
Ya hemos visto lo que son los arrays, vamos a ver ciertos métodos propios que tiene:
• pop( ): Borra el último elemento de un array.
• shift(): Obtiene el elemento del principio, avanzando la cola, y, así el segundo elemento se vuelve
primero.
• unshift(elemento): Agrega el elemento/s al principio del array.
• push(elemento): Añade un nuevo elemento/s al final de un array.
• sort( ): Este método ordena un array de forma alfabética.
• reverse( ): Invierte el orden de los elementos de un array.
• splice (índice, número de elementos, elementos a insertar): Borra tantos elementos como le
especifiquemos, además de ser capaz de añadir elementos nuevos en su lugar.
• slice(start, end) – crea un nuevo array y copia elementos desde la posición start hasta end (no
incluido) en el nuevo array.
• concat(...items) – devuelve un nuevo array: copia todos los elementos del array actual y le
agrega ítems. Si alguno de los ítems es un array, se toman sus elementos.
• indexOf/lastIndexOf(item, pos): busca por ítem comenzando desde la posición pos, devolviendo el
índice o -1 si no se encuentra.
• sort(fn): Cuando usamos arr.sort(), este ordena el propio array cambiando el orden de los
elementos.

Olga M. Moreno Martín 114

Array y sus métodos
• includes(value): devuelve true si el array tiene value,
si no false.
• find/filter(func): filtra elementos a través de la
función, devuelve el primer/todos los valores que
devuelven true.
• findIndex es similar a find, pero devuelve el índice
en lugar del valor.

Para iterar sobre elementos:

• forEach(func): llama la func para cada elemento, no
devuelve nada.
• for…( key of array ): no da acceso al número del
elemento en curso, solamente a su valor, pero en la
mayoría de los casos eso es suficiente.

Olga M. Moreno Martín 115

Array y sus métodos
Para transformar el array:
• map(func) – crea un nuevo array a partir de los resultados de llamar a la func para cada elemento.
• split/join – convierte una cadena en un array y viceversa.
• reduce/reduceRight(func, initial) – calcula un solo valor para todo el array, llamando a la func para
cada elemento, obteniendo un resultado parcial en cada llamada y pasándolo a la siguiente.

Adicional:
• Array.isArray(value) comprueba si value es un array.

Por favor tener en cuenta que sort, reverse y splice modifican el propio array.

Olga M. Moreno Martín 116

Objetos en JS
• Los objetos son tipos de datos que pueden contener varios atributos y métodos propios. Estos
atributos o propiedades se escriben con pares nombre:valor, y pueden ser accedidos desde
cualquier parte mediante objectName.propertyName o objectName[“propertyName”].

• Los métodos son acciones que pueden ser realizadas en los objetos, son funciones propias del
mismo. Podemos acceder a ellos de forma similar a los atributos con la forma
objectName.functionName( ).
•
• Mediante la palabra clave this, podemos hacer referencia al objeto en cuestión dentro de sus
propios métodos. Podemos definir sus propiedades tanto de forma conjunta como de una en
una.

Olga M. Moreno Martín 117

Crear objetos en JS
• Ya hemos visto como definir los objetos, ahora vamos a aprender a crearlos mediante una
función constructora, que nos permitirá crear varios objetos distintos con las mismas
propiedades. Lo haremos de la siguiente manera:

Olga M. Moreno Martín 118

Clases en JS
Las clases representan una sintaxis
mucho más clara y simple para crear
objetos. Están compuestas por:
• Declaraciones de clases: Usadas
para definir una clase, con la
palabra class y un nombre para
ella.
• Constructores: Métodos especiales
para crear e inicializar un objeto
creado con una clase. Solo puede
haber uno con el nombre
constructor.
• Métodos de la clase: Diferentes
métodos que pueden ser aplicados
a cada objeto perteneciente a esa
clase.

Olga M. Moreno Martín 119

¿Qué es un set?
• Un set es un tipo de dato que representa una colección iterable de valores únicos. Cada uno
puede aparecer solo una vez en el Set.

• Tiene varios métodos propios, como add( ), forEach( ), values( ), has( ), size,…

Olga M. Moreno Martín 120

¿Qué es un MAp?
• Un Map es un tipo de dato que representa una
colección de pares clave-valor donde las claves
pueden ser cualquier tipo de dato, a diferencia de
los objetos en los que deben ser strings o símbolos.

• Tiene varios métodos propios, como set( ), get( ),

delete( ), has( ), clear( ),…

Olga M. Moreno Martín 121

El bucle "for..in"
• Para recorrer todas las claves de un objeto existe una forma especial de bucle: for..in. Esto es algo
completamente diferente a la construcción for(;;).
• Por ejemplo, mostremos todas las propiedades de user:
• Nota que todas las construcciones “for” nos permiten declarar variables para bucle dentro del
bucle, como let key aquí.

• Además, podríamos usar otros nombres de

variables en lugar de key.
• Por ejemplo, "for (let prop in obj)" también se usa
bastante.

Olga M. Moreno Martín 122

JSON – Javascript object notation
JSON es un formato para transportar y guardar
datos. Es usado frecuentemente a la hora de
recibir datos de un servidor. Son pares nombre-
valor, con los datos separados por comas. Hay
diferentes tipos de datos:
• Nombre-valor: Un nombre que representa un
campo seguido de un valor.
• Objetos: Encerrados entre llaves.
• Arrays: Parecidos a los arrays en JS, pueden
contener objetos, que se almacenan entre
corchetes.

• Para convertir de JSON a JavaScript

utilizaremos la función JSON.parse(texto).

Olga M. Moreno Martín 123

DOM
• La creación del Document Object Model o DOM
es una de las innovaciones que más ha influido
en el desarrollo de las páginas web dinámicas y
de las aplicaciones web más complejas.

• DOM permite a los programadores web acceder

y manipular las páginas XHTML como si fueran
documentos XML. De hecho, DOM se diseñó
originalmente para manipular de forma sencilla
los documentos XML.

• A pesar de sus orígenes, DOM se ha convertido

en una utilidad disponible para la mayoría de
lenguajes de programación (Java, PHP,
JavaScript) y cuyas únicas diferencias se
encuentran en la forma de implementarlo.

Olga M. Moreno Martín 124

Manejar el DOM desde JS
Tenemos varias funciones que nos permiten realizar esto:

• document.getElementById: Nos permite seleccionar un

elemento HTML por su id para manipularlo.
• document.getElementsByTagName: Nos permite
seleccionar elementos HTML por su nombre de etiqueta
para manipularlos.
• document.getElementsByClass: Nos permite seleccionar
elementos HTML por su clase en CSS para manipularlos.
• element.innerHTML: Nos permite insertar código HTML
desde JavaScript en un elemento que seleccionemos.
• element.style.property: Nos permite cambiar el valor de
una propiedad de un estilo dentro de un elemento, pero
no es la que se debe usar, si no classList.
• element.classList: es un objeto especial con métodos para
agregar, eliminar y alternar (add/remove/toggle) una sola
clase.
• element.setAttribute: Nos permite añadir un nuevo
atributo a un elemento HTML, con un par nombre-valor.

Olga M. Moreno Martín 125

¿PREGUNTAS?

Olga M. Moreno Martín 126