MÓDULO 3:

Introducción a JavaScript
Juan Quemada, DIT - UPM

1
© Juan Quemada, DIT, UPM
Índice
MODULO 3 - Introducción a JavaScript
1. Introducción a JavaScript (ES6+) de cliente, expresiones y la consola .......................................... 3
2. Programas, sentencias var, let, const, y ops ++, --, +=, -=, .. ........................................................... 15
3. Ejecución de scripts, funciones, objeto función, notación arrow y ámbitos …................................... 25
4. Objetos, propiedades, métodos, DOM, eventos e interacción .......................................................... 36
5. Booleanos, sentencias if-else, switch-case y bucles ............…......................................................... 50
6. Arrays .......................................................................................................…..................................... 56

© Juan Quemada, DIT, UPM

Introducción a JavaScript (ES6+) de
cliente, expresiones y la consola
Juan Quemada, DIT - UPM

3
© Juan Quemada, DIT, UPM
JavaScript
Lenguaje de programación diseñado en 1995 por Brendan Eich
n Para animar páginas Web y realizar aplicaciones en el Navegador Netscape
w Hoy se ha convertido en el lenguaje de programación más utilizado en Internet

JavaScript tiene pocos elementos genéricos y potentes

n Literales, funciones, objetos, tipado débil, prototipos, ....
w JavaScript tiene además algunas partes mal diseñadas, que se recomienda no utilizar

Este curso se centra en la partes buenas (Good parts) de JavaScript

n Libro: JavaScript: The Good Parts, Douglas Crockford, O'Reilly Media, 2008
w jslint (http://www.jslint.com/) o eslint (http://eslint.org/) comprueban el buen uso

Llamado también ECMAScript: norma de European Comp. Manuf. Asoc.

n Normas: ES5 (2011), ES6 (2015), ES7 (2016), ES8 ... (Versión anual desde ES6)
w Este curso cubre ES5 y las mejoras más importantes de ES6, ES7, ES8, ES9, ...

Documentación y tutoriales de JavaScript (ES6+)

n https://javascript.info, https://flaviocopes.com/page/ebooks/
n https://developer.mozilla.org/es/docs/Web/JavaScript, https://t.co/nLNMwtgHV5
4
© Juan Quemada, DIT, UPM
Curso de JavaScript
(ES6) en Navegador
Este curso se centra en "Vainilla JavaScript"
n Se denomina "Vainilla JavaScript" a usar ES6 y posteriores
w Evitando el uso de librerías como jQuery y muchas otras

La adaptación de los navegadores a ES6 ha sido lenta

n Las versiones actuales de los navegadores están adaptadas,
w Ver tabla de soporte: https://kangax.github.io/compat-table/es6/
n Polyfills: traducen ES6 y posteriores para browsers antiguos
w Babel: https://babeljs.io
w Traceur: https://github.com/google/traceur-compiler
w otros

Los navegadores ejecutan scripts de 2 formas

n Ejecutan scripts JavaScript en una página HTML
n Ejecutan sentencias en la consola
w

5
© Juan Quemada, DIT, UPM
Tipo number: números y operadores
JavaScript permite construir expresiones con operadores predefinidos
n +, -, * y / son operadores binarios (2 valores) infijos (operador en el centro)
w La evaluación (=>) de la expresión genera otro valor como resultado

13 + 7 => 20 // Suma de números

13 - 1.5 => 11.5 // Resta de números
(8*2 - 4)/3 => 4 // Expresión con paréntesis En JavaScript los decimales
9%6 => 3 // Resto de se separan con un punto,
igual que en inglés.
2**3 => 8 // Potencia (ES6)
Una expresión es una sentencia de JavaScript con una sintaxis estricta
n Al ejecutarla se comprueba que la sintaxis es correcta y se evalúa el resultado
w Expresiones mal construidas dan error y pueden bloquear la ejecución

Expresión incorrecta: 2 operadores seguidos

8/*3 => …?
Expresión incorrecta: dos números sin operador entre ellos 8 3 => …?

Doc: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math
6
© Juan Quemada, DIT, UPM
La consola JavaScript del navegador (Chrome)

La consola JavaScript del

navegador permite evaluar
expresiones y ejecutar
programas JavaScript paso a
Abrir la consola JavaScript paso. Evaluar
Las instrucciones se ejecutan
expresiones
después de haber ejecutado los o ejecutar
scripts de la página cargada en instrucciones
el navegador.

© Juan Quemada, DIT, UPM

Intérprete JavaScript: expresiones

Consola JavaScript del navegador (chrome). Todos los

navegadores permiten desplegarla y ejecutar instrucciones de
forma interactiva.

El intérprete analiza y ejecuta el texto introducido al teclear

nueva línea (Enter).

Si tecleamos una expresión la evalúa y presenta el resultado.

Esta captura muestra cómo evalúa JavaScript las

expresiones de la transparencia anterior.

Teclear una expresión erronea genera un mensaje de error.

Haciendo clic en enlace da más info sobre el error.

8
© Juan Quemada, DIT, UPM
Tipo string: texto
El texto escrito se representa en JavaScript con strings
n Un string delimita el texto con comillas, apóstrofes o acento grave, por ej.
w "hola, que tal" o 'hola, que tal' // Las comillas y apóstrofes solo permiten strings mono-línea
w `hola,
que tal` o `hola, que tal` // El acento grave permite strings multi-línea y mono-línea

Algunos ejemplos
n "entre 'comillas' " o `entre 'comillas' ` // 'comillas' es parte del texto
n String vacío: "" o '' o ``

Operador + concatena strings, por ejemplo

n ´Hola´ + " " + 'Pepe' => "Hola Pepe"

La propiedad length de un string indica su longitud (Número de caracteres)

n "Pepe".length => 4
n `Hola Pepe`.length => 9

Doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
9
© Juan Quemada, DIT, UPM
Ejemplos de string

Consola JavaScript del navegador (chrome). Todos los

navegadores permiten desplegarla y ejecutar instrucciones
de forma interactiva.

Los strings "Eva", 'Eva' o ´Eva´ son literales de string

que representan exactamente el mismo string o texto.

El string " ", ' ' o ` ` representa el carácter espacio (space)

o blanco (blank), que separa palabras en un texto.

Un string delimitado con acento grave (`..)

puede ser multi-línea, como aquí.

El operador + aplicado a strings los concatena o une,

generando un nuevo string con su unión. Es asociativo
y permite concatenar más de 2 strings.

"Eva".length devuelve el contenido de la propiedad length

del string, el número de caracteres del string.
10
© Juan Quemada, DIT, UPM
Sobrecarga de operadores
Los operadores son caracteres especiales
n Por ejemplo, el operador suma tiene asignado el carácter +
w El operador + está sobrecargado con 3 semánticas (significados) diferentes
n El intérprete utiliza las reglas sintácticas de JavaScript para determinar la semántica

Suma de números
n Operador binario de números (tipo number), infijo (operador en medio)

13 + 7 => 20
Signo de un número
n Operador prefijo unario de número que define el signo positivo de un número

+13 => 13
Concatenación de strings
n Operador binario de cadenas de caracteres (tipo string), infijo (op. en medio)

"Hola " + "Pepe" => "Hola Pepe"

11
© Juan Quemada, DIT, UPM
Conversión de tipos

JavaScript realiza conversión automática de tipos

n La ambigüedad de una expresión se resuelve
w con las reglas sintácticas y la prioridad entre operadores
n Concatenación (strings) es más prioritaria que la suma

La expresión "13" + 7 es ambigua

n porque combina un string con un number
w Si hay ambigüedad, JavaScript da prioridad al operador + de concatenación de strings,
convirtiendo 7 a string y concatenando ambos strings

La expresión +"13" también necesita conversión automática de tipos

n El operador + solo está definido para number (no hay ambigüedad)
w JavaScript debe convertir el string "13" a number antes de aplicar operador +

12
© Juan Quemada, DIT, UPM
 La prioridad de los operadores es descendente y de izquierda a derecha. (Mayor si más arriba o más a izq.)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

. [] new Acceso a propiedad o invocar método; Índice de array; Crear objeto

() Invocación de función/método o evaluar expresión
++ -- Pre o post auto-incremento; Pre o post auto-decremento
! ~ Negación lógica (NOT); complemento de bits
+ - Operador unitario, números. Signo positivo; Signo negativo
delete Borrar propiedad de un objeto
typeof void ** Devolver tipo; Valor indefinido (operador de escasa utilidad); Potencia (ES6)
* / % Números. Multiplicación; División; Modulo (o resto)
++ - Concatenación de strings; Números: Suma y Resta
<< >> >>> Desplazamientos de bit
< <= > >= Menor; Menor o igual; Mayor; Mayor o igual
instanceof in ¿Objeto pertenece a clase?; ¿Propiedad pertenece a objeto?
== != === !== Igualdad; Desigualdad; Identidad; No identidad
& Operación y (AND) de bits
^
|
Operación ó exclusivo (XOR) de bits
Operación ó (OR) de bits
8*2 - 4 => 12
* tiene más prioridad que -, pero (..)
&& Operación lógica y (AND)
obliga a evaluar antes - en:
|| Operación lógica o (OR)
?: Operador ternario condicional 8*(2 - 4) => -16
= Asignación de valor
OP= Asignación con operación: += -= *= /= %= <<= >>= >>>= &= ^= |=
yield (ES6) Generar nuevo elemento de un "iterable"
... (ES6) Distribuir (Spread) elems (array, obj, ..) o agrupar (Rest) parámetros (función)
, Evaluación múltiple

© Juan Quemada, DIT, UPM

Operadores ES5 y ES6 13
 La prioridad de los operadores es descendente y de izquierda a derecha. (Mayor si más arriba o más a izq.)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

. [] new Acceso a propiedad o invocar método; Índice de array; Crear objeto

() Invocación de función/método o evaluar expresión
++ -- Pre o post auto-incremento; Pre o post auto-decremento
! ~ Negación lógica (NOT); complemento de bits
+ - Operador unitario, números. Signo positivo; Signo negativo
delete Borrar propiedad de un objeto
typeof void ** Devolver tipo; Valor indefinido (operador de escasa utilidad); Potencia (ES6)
* / % Números. Multiplicación; División; Modulo (o resto)
++ - Concatenación de strings; Números: Suma y Resta
<< >> >>> Desplazamientos de bit
< <= > >= Menor; Menor o igual; Mayor; Mayor o igual
instanceof in ¿Objeto pertenece a clase?; ¿Propiedad pertenece a objeto?
== != === !== Igualdad; Desigualdad; Identidad; No identidad
& Operación y (AND) de bits
^ Operación ó exclusivo (XOR) de bits
|
&&
Operación ó (OR) de bits
Operación lógica y (AND)
+" " 3 + 7 => 10
+ unitario (signo) tiene mas prioridad
|| Operación lógica o (OR) que + binario (suma) y se evalúa antes
?: Operador ternario condicional
= Asignación de valor
OP= Asignación con operación: += -= *= /= %= <<= >>= >>>= &= ^= |=
yield (ES6) Generar nuevo elemento de un "iterable"
... (ES6) Distribuir (Spread) elems (array, obj, ..) o agrupar (Rest) parámetros (función)
, Evaluación múltiple

© Juan Quemada, DIT, UPM

Operadores ES5 y ES6 14
Programas, sentencias var, let, const,
y ops ++, --, +=, -=, ..

Juan Quemada, DIT - UPM

15
© Juan Quemada, DIT, UPM
Programa, sentencia y código fuente
Comentario
multi-línea:
delimitado
Sentencia 1: define la variable x con valor 7. con /* …. */

Programa: secuencia de sentencias

/* Ejemplo de
n Se ejecutan en el orden en que están escritas programa JavaScript */
w Salvo tomas de decisiones (if..else, ..) y bucles (while, ..)

Sentencia: orden al procesador let x = 7; // def. de variable

n Especifica una tarea a realizar por el procesador // visualizar x en el navegador
w El punto y coma (;) indica final de sentencia
document.write(x * 1.13);
nAunque es opcional se recomienda incluir siempre!
Sentencia 2: Muestra
w Las sentencias pueden acabar también con nueva línea (\n)
el valor x * 1,13 en
n Pero, no se recomienda terminarlas así!
el navegador

Comentario: solo tienen valor informativo

Comentario mono-línea: empieza
n Documenta el programa y ayuda a entenderlo mejor con // y acaba al final de la línea.
w Hay dos tipos de comentarios: mono-línea y multi-línea

Código fuente: texto con las sentencias y comentarios de un programa

n Se edita con editor de texto plano: nano, notepad, vi, vim, sublime-text, ….
w Fichero fuente: fichero que contiene un programa JavaScript ejecutable
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals
https://javascript.info/structure 16
© Juan Quemada, DIT, UPM
 La etiqueta <script> de HTML
Script: programa JavaScript encapsulado entre marcas <script>
n Se ejecuta al cargar en el navegador la página Web que lo contiene
w JavaScript es un lenguaje interpretado que ejecuta las instrucciones a medida que las va leyendo
n document.write(<expresión>) convierte <expresión> a string y lo visualiza en el navegador
w El string se interpreta como HTML y se visualiza en el lugar de la página donde esta el script JavaScript

Una variable guarda valores para uso posterior

n Una variable representa el valor que contiene
w Puede utilizarse en expresiones como cualquier otro valor

Define la variable
euro con valor 10

Visualizan en el
navegador el
resultado de
evaluar las Separación de
expresiones línea HTML
17
© Juan Quemada, DIT, UPM
Definición y asignación de variables
Una variable es un contenedor de un valor, cuyo contenido puede variar
Las variables JavaScript son no tipadas y pueden contener cualquier tipo de valor
n Pueden contener números, strings, undefined, objetos, ..

La sentencia de definición de variables debe empezar por la palabra reservada let (ES6+)
n Seguida de una o más definiciones de variables separadas por comas
w En ES5 se utilizaba var pero ahora no se recomienda utilizarlo

La sentencia de asignación introduce un nuevo valor en la variable, p.e. x = 8;

undefined: valor especial que significa indefinido
n Si no se le asigna ningún valor inicial a la variable, contendrá el valor undefined

Define las variables x, con valor inicial x y

5, e y con valor inicial undefined. let x = 5, y;
5 undefined
Asigna el string "Hola" a la variable x. x = "Hola";
"Hola"
Asigna el valor undefined a la variable x. x = undefined; undefined
Asigna un objeto con la fecha y la x = new Date(); Mon Sep 02 2013
hora a la variable x. new Date()
09:16:47 GMT+0200
crea este objeto sacando fecha y
hora del reloj del sistema.
18
© Juan Quemada, DIT, UPM
Constantes y variables (ES6) Un bloque, definido con
corchetes, define un
let (ES6) define variables ámbito de visibilidad.
n La variables son no tipadas
w Pueden contener cualquier tipo de valor x
n Tienen ámbito de visibilidad de bloque let x = 1; 1
w Son visibles desde su definición hasta el final Z
del bloque y en bloques de nivel inferior const Z = 2; 2
n Doc: https://javascript.info/variables
{ x = 3; 3 y
const (ES6) define constantes
Se debe asignar un valor al definirlas let y = 2; 2
n

w El valor no puede modificarse

M
n Suelen estar en mayúsculas const M = 4; 4
Definiciones del ámbito exterior y = y + M + x; 9
n Se denominan globales y son visibles }
en todo el programa x = 5; 5
var define variables ES5
n Se recomienda no utilizarlas salvo
x = y;
Error
cuando se deba utilizar ES5 La variable y y la constante M dejan de ser visibles
w Tienen visibilidad en todo el programa y no al final del bloque. La referencia a y provoca un
son seguras (https://javascript.info/var) error de ejecución, al no ser visible aquí.
19
© Juan Quemada, DIT, UPM
Sintaxis: variables y constantes
El nombre (o identificador) de una variable o constante debe comenzar por:
n letra, _ o $

w El nombre pueden contener además números

n Nombres bien construidos: x, ya_vás, $A1, $, _43dias
n Nombres mal construidos: 1A, 123, %3, v=7, a?b, ..
w Nombre incorrecto: da error_de_sintaxis e interrumpe el programa

Un nombre de variable no debe ser una palabra reservada de JavaScript

n por ejemplo: var, let, const, function, return, if, else, while, for, new, …

Las variables son sensibles a mayúsculas

n mi_var y Mi_var son variables distintas

20
© Juan Quemada, DIT, UPM
Expresiones con variables
Una variable representa el valor que contiene
n Puede ser usada en expresiones como cualquier otro valor
Una variable puede utilizarse en una expresión asignada a si misma
n La parte derecha usa el valor anterior a la ejecución de la sentencia
w Si y contiene 8 antes de ejecutar y = y - 2, esta asigna el valor 6 (8-2) a y

Usar una variable no definida en una expresión

n provoca un error y la ejecución del programa se interrumpe

x
let x = 3; 3 y
let y = 5 + x; 8
y = y - 2;
6
x = y + z;
Error El error se produce porque la
variable z no ha sido definida.

21
© Juan Quemada, DIT, UPM
Pre y post auto incremento o decremento
JavaScript posee los operadores ++ y -- de auto-incremento o decremento
n ++ suma 1 y -- resta 1 a la variable a la que se aplica
w ++ y -- se pueden aplicar por la derecha o por la izquierda a las variables de una expresión
n Si ++/-- se aplica por la izquierda a la variable (pre), el incremento/decremento se realiza antes de
evaluar la expresión
n Si ++/-- se aplica por la derecha (post) se incrementa/decrementa después de evaluarla
n Ojo! Usar con cuidado, sus efectos laterales llevan a programas difíciles de entender.
Documentación adicional
n https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
x
let x = 2; 2 Al ser pre-incremento el
orden de ejecución es:
++x 3 1) Paso 3.1: x=x+1 Con post-decremento el
de ejecución orden es:
2) Paso 3.2: y=x+2
1) Paso 4.1: z=y+2
let y = ++x + 2; Paso 3.1
4 y 2) Paso 4.2: y=y-1
Paso 3.2
6
z
let z = y-- + 2; Paso 4.1
8
Paso 4.2 5
22
© Juan Quemada, DIT, UPM
Operadores de asignación
JavaScript tiene operadores especiales de asignación
n +=, -=, *=, /=, %=, …… (para otros operadores del lenguaje)
w https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators

Estos componen la variable con el operador y la expresión

n Por ejemplo: x += 7; es lo mismo que x = x + 7;

x
let x = 3; // Create x with value 3
3
x += 2; // add 2 to x 5
x *= 3; // multiply x by 3 15
x %= 4; // reminder of dividing by 4 3

23
© Juan Quemada, DIT, UPM
 Ventanas popup: prompt, confirm y alert
JavaScript incluye tres funciones globales para interactuar con el usuario
n alert(msj): Presenta un pop-up con mensaje al usuario y retorna al pulsar OK
n confirm(msj): Presenta un pop-up con mensaje y pide confirmación/rechazo
w Retorna al pulsar y devuelve true al pulsar Ok o false al pulsar Cancel
n prompt(msj): Presenta mensaje y pide un dato de entrada
w Retorna al pulsar OK (devuelve string introducido) o Cancel (devuelve null)

Este ejemplo pide un valor con prompt() y muestra el resultado con alert()

Pop-up generado con

prompt(...) que pide un valor
para inicializar la variable euro.

Pop-up generado con

alert(...) que
Página HTML final. muestra el resultado.
Las aplicaciones de cliente se
relanzan cargando la página
de nuevo. © Juan Quemada, DIT, UPM 24
Ejecución de scripts, funciones,
objeto función, notación arrow y
ámbitos

Juan Quemada, DIT - UPM

25
© Juan Quemada, DIT, UPM
JavaScript en
el Navegador
Navegador Web: ejecuta JavaScript de 2 formas
1. Como un script en una página HTML
2. En la consola JavaScript

El navegador ejecuta scripts JavaScript

n Al cargar una página Web
w El script permite interacción con ratón, teclado, …
n Un script es un elemento HTML
w <script type=“text/javascript”>
n ….. programa JavaScript …..
w </script>

El navegador tiene además una consola JavaScript

n Muy similar a la consola interactiva de node.js
w Permite ejecutar instrucciones paso a paso una vez cargada la
página y ejecutados sus scripts

26
© Juan Quemada, DIT, UPM
Varios scripts
Varios scripts en una página
forman un único programa
JavaScript
n Las definiciones (variables, funciones,
…) son visibles entre scripts de una
misma página Web

Los scripts se ejecutan siguiendo

el orden en la página
n Instrucciones adicionales
ejecutadas en la consola del
navegador, se ejecutarán después
del último script

mostrar_fecha() debe invocarse en

el punto donde debe ir el texto
n Su definición se realiza en la cabecera
y es visible en otros scripts

27
© Juan Quemada, DIT, UPM
 Función Definición de la función

Invocación (ejecución) de la función

Una función encapsula código, que se invoca (ejecuta) por su nombre

n Una función debe definirse primero, para poder invocarla (ejecutarla) posteriormente
w Documentación: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones

La definición de la función comienza por la palabra reservada: function

n A continuación viene el nombre de la función
w En tercer lugar vienen los parámetros entre paréntesis: () indica sin parámetros en este ejemplo
n Por último viene el bloque de código, entre corchetes ({...})

La invocación de la función ejecuta el bloque de código de la función

n Se invoca con el nombre y el operador paréntesis (), por ej. my_preferred_movies()

© Juan Quemada, DIT, UPM 28

Parámetros de
invocación y Definición de la función

de retorno

Invocación (ejecución) de la función

Una función recibe parámetros de entrada (parámetro x del ejemplo)

n Cada parámetro define una variable, que solo es visible dentro del bloque de código
w Como es una variable, el valor asignado puede cambiarse (aunque esto no se hace en el ejemplo)
n El valor inicial del parámetro es el valor pasado al invocar la función (valores 2 y 3 del ejemplo)
Una función devuelve un parámetro de retorno con la sentencia: return <expr>;
n Esta sentencia finaliza la ejecución de la función y devuelve el valor resultante de evaluar <expr>
w Si la función llega a final del bloque sin ejecutar return, finaliza y devuelve undefined

Una función puede componerse en expresiones como otro valor más

n La función se ejecutará y se sustituirá por el valor retornado en la expresión
© Juan Quemada, DIT, UPM 29
Función con varios parámetros
function greet (greeting, person) {
return greeting + " " + person + ", how are you?" ;
};

greet ("Good morning", "Peter"); // => "Good morning Peter, how are you?"
greet ("Hi", "Peter"); // => "Hi Peter, how are you?"

greet ("Hi", "Peter", "John"); // => "Hi Peter, how are you?"
greet ("Hi"); // => "Hi undefined, how are you?"
greet (); // => "undefined undefined, how are you?"

La función greet(..) genera saludos en inglés utilizando 2 parámetros

n Los parámetros se concatenan con texto para generar los saludos mostrados

Una función se puede invocar con un número variable de parámetros

n Un parámetro definido, pero no pasado en la invocación, toma el valor undefined

30
© Juan Quemada, DIT, UPM
 arguments: el array de parámetros
function greet () {
return `${arguments[0]} ${arguments[1]}, how are you?`;
};

greet ("Good morning", "Peter"); // => "Good morning Peter, how are you?"

greet ("Hello", "Peter"); // => "Hello Peter, how are you?"

Una función tiene un array de nombre arguments

n arguments contiene los valores de los parámetros en la invocación
w El array arguments permitiría saber su número total y acceder a todos

Esta función greet(..) es similar a la anterior

n Pero utiliza arguments en vez de parámetros explícitos
31
© Juan Quemada, DIT, UPM
Funciones como objetos
Las funciones son objetos de pleno derecho
n pueden asignarse a variables, a propiedades, pasarse como parámetros, ….

Literal de función: function (<argumentos>){<sentencias>}

n Construye un objeto de tipo función que no tiene nombre
w Puede guardarse en variables o parámetros como cualquier otro valor
n Se invoca aplicando el operador paréntesis: ()

El operador paréntesis () ejecuta el código de un objeto function

n Este operador solo es aplicable a funciones (objetos de la clase Function), sino da error
w Se pueden incluir parámetros explícitos separados por coma, accesibles en el código de la función

const greet = function (greeting, person) {

return `${greeting} ${person}, how are you?` ;
};

greet ("Hi", "Peter"); // => "Hi Peter, how are you?"

const x = greet;

x ("Hi", "Peter"); // => "Hi Peter, how are you?"

© Juan Quemada, DIT, UPM 32
 Valores por defecto de parámetros (ES6)

function greet (greeting = "Hi", person = "my friend") {

return `${greeting} ${person}, how are you?` ;
};

greet ("Hello"); // => "Hello my friend, how are you?"

greet (); // => "Hi my friend, how are you?"

ES6 permite valores por defecto en parámetros explícitos de funciones

n Los valores por defecto se asignan al parámetro en la definición
w utilizando el operador =, como en las definiciones de variables

El valor por defecto se utiliza en la invocación, cuando ese parámetro

está undefined
33
© Juan Quemada, DIT, UPM
Notación flecha (arrow) de ES6
ES6 añade la notación flecha para literales de función (funciones sin nombre)
n Por ejemplo (x, y) => {return x+y;)
w Es concisa y se recomienda utilizarla en programación con estilo funcional
n https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Tiene las siguientes diferencias con funciones tradicionales

n No tienen la variable de argumentos predefinida arguments
n No modifica el contexto: el objeto this tiene visibilidad léxica
w Esto hace que no puedan ser constructores de objetos

const greet = function (greeting, person) { // defined with function literal

return `${greeting} ${person}, how are you?` ;
};
// Similar function to previous one defined with arrow notation
const greet = (greeting, person) => {
return `${greeting} ${person}, how are you?` ;
};
// Parenthesis may be omitted if only one parameter
const square = x => x*x; // One instruction blocks may omit curly brackets and return

const say_hi = () => "Hi, how are you?"; // function without parameters
© Juan Quemada, DIT, UPM 34
 x
let x = "x_glo"; "x_glo" y
let y = "y_glo";
Declaraciones
"y_glo"

function f1 () { x
locales de una let x = "x_loc";
return x + " & " + y ;
"x_loc"

función y ámbito };

// global variable
x; // => "x_glo"

// local x and global y

f1(); // => "x_loc & y_glo"

Las variables y funciones tienen visibilidad sintáctica en JavaScript

n Son visibles solo dentro del ámbito donde se declaran
w En ES5 solo se podían crear ámbitos de visibilidad con funciones
w En ES6 el bloque { ..statements.. } y el módulo crean también nuevos ámbitos de visibilidad
n OJO! Las funciones son visibles antes de su declaración (igual que las variables var)

Una función puede tener declaraciones locales de variables y funciones

n Las declaraciones son visibles solo dentro de la función

Variables y funciones externas son visibles en el bloque de la función

n Siempre que no sean tapadas por otras declaraciones locales del mismo nombre
w Una declaración local tapa a una global del mismo nombre
35
© Juan Quemada, DIT, UPM
Objetos, propiedades, métodos,
DOM, eventos e interacción

Juan Quemada, DIT - UPM

36
© Juan Quemada, DIT, UPM
Objetos JavaScript: métodos y propiedades
pd
.. ..p
Un Objeto es una agrupación de
n variables "especiales" denominadas propiedades pi
.. p
p1
2
c pl

n funciones "especiales" denominadas métodos pj pk

Las propiedades de los objetos forman un árbol pt
n Los objetos pueden crear árboles multi-nivel anidando unos objetos en otros pz

Los nombres de propiedades y métodos

n Tienen la misma sintaxis que las variables: a, _method, $1, …
n Conviene que sean diferentes si pertenecen al mismo objeto (aunque no es obligatorio)

El operador "." se utiliza con propiedades y métodos

n Para acceder a una propiedad de un objeto, por ejemplo
w Consulta del valor de la propiedad y de obj: obj.y
w Asignar el valor de la propiedad y de obj: obj.y = 5;
n Para invocar un método en un objeto, por ejemplo document.write("<h1> Título </h1>")
w OJO! Invocar un método, que no pertenece a un objeto, causa error

Documentación: https://javascript.info/object-basics

© Juan Quemada, DIT, UPM 37

 Entorno global: window, document y Web APIs
window

screen document o o o o o o
history undefined Infinity
o o o o o o o o o o o o
HTML
HEAD BODY

o o o o o o

El objeto window es el entorno global de ejecución de JavaScript en el navegador

n Sus propiedades dan acceso a los elementos de pagina Web, del navegador y de JavaScript
w this es una referencia entorno de ejecución y referencia window cuando el programa esta en el entorno global
n https://javascript.info/browser-environment

Este entorno global da también acceso a las numerosas APIs del navegador actual
n DOM, Canvas, Fetch, Storage, Full Screen, Touch Events, Service Workers, WebRTC, WebGL, ..
w https://developer.mozilla.org/en-US/docs/Web/API

document da acceso a la página HTML con la API DOM (Document Object Model)
n document se referencia como: window.document, this.document o document
w Doc: https://javascript.info/dom-nodes, https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

38
© Juan Quemada, DIT, UPM
Acceso DOM y cajas visuales
Objetos DOM (Document Object Model)
n Objetos JavaScript que permiten manipular elementos HTML desde un programa
Objeto DOM: tiene una caja visual asociada
n Las modificaciones afectarán a la caja visual del elemento HTML asociado
w La caja visual asociada a comandos CSS es la misma que la asociada a DOM

document.getElementById("id_x")
n Método que obtiene el objeto DOM del elemento HTML con atributo id="id_x"

© Juan Quemada, DIT, UPM 39

Acceso a elementos
HTML con DOM

document
n Objeto del entorno que da acceso al documento HTML

getElementById("titulo")
n Método que retorna el objeto DOM del elemento HTML con id="titulo"

innerHTML
n Propiedad con el HTML interno asociado a ese objeto DOM
© Juan Quemada, DIT, UPM 40
HTML interno y externo
HTML interno: texto HTML contenido entre las marcas del elemento
n innerHTML: propiedad del objeto DOM que da acceso al HTML interno
HTML externo: texto HTML completo del elemento (incluyendo sus marcas)
n outerHTML: propiedad del objeto DOM que contiene el HTML externo

Elemento HTML <h2 id="titulo">….</div>

Objeto DOM asociado con: document.getElementById("titulo")

innerHTML

outerHTML

© Juan Quemada, DIT, UPM 41

Modificar la página HTML cargada desde la
consola JavaScript

Modificar
HTML
mostrado

document.getElementById("titulo").innerHTML="Cambio";
Modifica el HTML y por lo tanto lo que se muestra en el navegador.

42
© Juan Quemada, DIT, UPM
 window

screen document o o o
history location navigator
o o o o o o o o o o o o
HTML

BODY
Location, history,
HEAD
o o o o o o screen, ...
location: propiedad que contiene el URL a la página en curso
n location = "http://www.upm.es" Carga una página en el navegador
n location.reload() re-carga la página en curso
w Doc: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
history: propiedad con la historia de navegación
n Métodos para navegar por la historia: history.back(), history.forward(), ...
w Doc: https://developer.mozilla.org/en-US/docs/Web/API/Window/history
screen: dimensiones de la pantalla
n width, height, availWidth, availHeight: para adaptar apps a pantallas móviles
w Doc: https://developer.mozilla.org/en-US/docs/Web/API/Window/screen
43
© Juan Quemada, DIT, UPM
Propiedades de
window

44

© Juan Quemada, DIT, UPM

Mini-calculadora:
elementos HTML
de interacción
Interacción con el usuario:
n <input type="text" id="n1"….>
w Cajetín: donde teclear texto
n <button ...>nombre</button>
w Botón: donde hacer clic

Propiedad value: contenido del cajetín

n Lectura de lo tecleado en el cajetín
w document.getElementById("n1").value => "4"
n Mostrar resultado en el cajetín
w document.getElementById("n1").value = 16

45
© Juan Quemada, DIT, UPM
 Mini-calculadora: eventos y manejadores
Eventos: se disparan al ocurrir acciones exteriores al programa, p.e. teclear, pulsar botón, ..
n Tienen funciones asociadas que permiten atender al evento
w Eventos: http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html

El atributo onclick="fx()"
n Asocia fx() al elemento HTML con el atributo
w Ejecuta fx() al clicar en la caja visual del elemento

Esta calculadora utiliza 2 eventos

n Evento 1: clicar en el cajetín
w Ejecuta vaciar(): vacía el cajetín
n Evento 2: clicar en el botón x2
w Ejecuta cuadrado(): muestra resultado en cajetín

46

© Juan Quemada, DIT, UPM

Mini-calculadora:
añadir botón 1/x
En este ejemplo añadimos
n Un botón más a la calculadora que
calcula el inverso (1/x) del cajetín

Añadir un nuevo botón es sencillo

n Se añade la función: inverso()
w Calcula el inverso del número del cajetín
n Se añaden marcas de nueva línea
w Para separar el cajetín de los botones
n Se añade un nuevo botón HTML
w con el texto: 1/x
w con atributo : onclick=“inverso()"
n asocia inverso() a clic en él

47
© Juan Quemada, DIT, UPM
document y sus métodos de acceso
document
n Objeto DOM de acceso al documento HTML
w Incluye los métodos y propiedades necesarios para procesar el documento HTML
n https://developer.mozilla.org/en/docs/Web/API/Document

getElementById("<id>")
n Devuelve el objeto DOM con el identificador buscado o null si no lo encuentra
w https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

querySelectorAll("<CSS_selector>")
n Devuelve el array de objetos DOM que casan con <CSS_selector>, por ej.
w querySelectorAll("#id1”) array con objeto DOM del elemento con id="id1", si existe
w querySelectorAll(".cl1”) array con objetos de todos los elementos con class="cl1"
w querySelectorAll("h1.cl1”) array con objetos de todos los elementos <h1 class="cl1">
n https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

48
© Juan Quemada, DIT, UPM
Ejemplo de querySelectorAll (..)
querySelectorAll("<patrón>") devuelve un array de objetos DOM
n El array incluye todos los objetos DOM de elementos HTML que cumplen el patrón
w El array estará vacío si ningún elemento HTML casa con el patrón.

En el ejemplo los patrones casan de la siguiente forma

n "#date" casa solo con el bloque div con id="date" y el array devuelto tiene solo ese objeto DOM.
n ".msg" casa solo con el bloque div con class="msg" y el array devuelto tiene solo ese objeto DOM.
w Si hubiese devuelto mas elementos habría que procesarlos co un bucle.
n

Paso 1: Bloques <div>

vacíos no visualizan nada.

<div id="date"></div>
define un bloque vacío donde
añadir la fecha por programa.
<div id="msg"></div>
define un bloque vacío donde
añadir un mensaje por progr.

Paso 2: Insertado por el script al

ejecutarse en un segundo paso.

querySelectorAll(..) devuelve un
array con un único objeto DOM.
Hay que indexarlo con [0].
© Juan Quemada, DIT, UPM 49
Booleanos, sentencias if-else,
switch-case y bucles
Juan Quemada, DIT - UPM
50
© Juan Quemada, DIT, UPM
Tipo boolean Los operadores lógicos booleanos son:
negación: ! !true => false
El tipo boolean tiene 2 valores !false => true
n true: verdadero
operador y: && true && true => true
n false: falso true && false => false
Booleanos: permiten crear expresiones lógicas false && true => false
false && false => false
n Utilizando los operadores lógicos
operador o: || true || true => true
((x % 2) === 0) indica si el resto de true || false => true
dividir x por 2 es 0, es decir si x es par. false || true => true
false || false => false

Las comparaciones resultan en un booleano:

- comparación de orden
menor: < menor_o_igual: <=
mayor: > mayor_o_igual: >=
- comparación de identidad
identidad: === no_identidad: !==

© Juan Quemada, DIT, UPM 51

 Ejecución condicional: if-else
Sintaxis: if (<condición>) <sentencia-if> else <sentencia-else> Resultado de ejecutar
n Doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else los ejemplos.

Si <condición> es true, se ejecuta <sentencia-if>, sino <sentencia-else>

n El bloque else es opcional
Las sentencias (if y else) pueden ser una sentencia o varias delimitadas con {..}
Sentencia
if...else: El primer bloque de sentencias
comienza new Date().getHours() devuelve va después de la condición,
con la la hora del día (0-23). delimitado entre llaves: {}
palabra
reservada El segundo bloque de sentencias va
if. precedido por la palabra reservada
else y delimitado entre llaves: {}

Ejemplo de programa que muestra

La condición (hora <12) el mensaje "Good morning, ..."
va entre paréntesis a o "Good afternoon, ..."
continuación y según se dependiendo de la hora.
evalúe a true o false,
decide si se ejecuta el
primer o el segundo
Ejemplo equivalente al primero pero
bloque.
con sentencia if sin bloque else.
© Juan Quemada, DIT, UPM 52
Sentencia switch-case
La sentencia switch-case está controlada por el <valor> de una variable
n Comienza la ejecución en "case <valor>:" de la variable
w Documentación: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

La sentencia break finaliza la ejecución (de la sentencia switch-case)

Una sentencia switch-case puede sustituirse por un if-else encadenado
Math.round(Math.random()*10)
La sentencia switch-case evalúa la genera un número aleatorio de 0 a 9
expresión asociada (result) y pasa a
ejecutar la sentencia justo después
del "case" que coincide con el valor
resultante de evaluar la expresión.

La sentencia break finaliza la ejecución

de la sentencia switch-case. Es Se pueden agrupar varios case si comparten el mismo
necesario ponerla para finalizar cada código. case es solo un punto de comienzo de ejecución.
case (o conjunto de case), porque
sino continuará ejecutando las
sentencias del siguiente case.

Cuando el valor resultante de evaluar la

expresión no coincide con ninguno
asociado a un case, se pasa a ejecutar
las sentencias asociadas a default: (es
opcional incluirlo). 53
© Juan Quemada, DIT, UPM
Bucles while y for
Condición de permanencia (azul).
Iniciación del bucle (rosa).

El bucle for permite incluir aquí una acción que

Acciones de bucle (amarillo). se ejecuta al finalizar el bloque de acciones.

Estos dos bucles son equivalentes. Calculan 2n (2*2*…*2, una multiplicación en cada iteración). Tienen 3 partes:

1) Iniciación del bucle: define e inicia las variables n y res utilizadas para el cálculo y para control del bucle.
2) Condición de permanencia: indica si el bucle se debe seguir ejecutando o finalizar.
3) Acciones del bucle: instrucciones ejecutadas en cada vuelta al bucle. Se delimitan con llaves {}, salvo en
bloques de una sentencia, en que las llaves pueden omitirse.

54
© Juan Quemada, DIT, UPM
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
STATEMENT SINTAX DESCRIPCIÓN DE LA SENTENCIA JAVASCRIPT

block { statements } | statement; Agrupar un bloque de sentencias (como 1 sentencia)

break break [label]; Salir del bucle o switch o sentencia etiquetada
case case expression: [ statements ] Etiquetar sentencia dentro de sentencia switch
const const name [ = expr] [ ,... ]; Declarar e initializar una o mas constantes (ES6)
continue continue [label]; Salto a sig. iteración de bucle actual/etiquetado
debugger debugger: Punto de parada (breakpoint) del depurador
default default: Etiquetar sentencia default de sentencia switch
do-while do block while(expression); Alternativa al bucle while con condición al final
empty ; Sentencia vacía, no hace nada
expression expression; Evaluar expresión (incluyendo asignación a variables)
for for(init; test; incr) block Bucle: init: iniciación; test: condición; incr: acciones final bucle
for-in for (var in obj) block Bucle for-in: Itera en los nombres de propiedades de obj
for-of for (var in obj) block Bucle for-of: Itera en los elementos del objeto iterable obj (ES6)
function function name([param[,-]]) block Declarar una función de nombre "name"
func_arrow param | ([param[,-]]) => block | expr Definir un literal de función con visibilidad léxica (ES6)
if-else if (expr) block1 [else block2] Ejecutar block1 o block2 en función de expr
label label: statement Etiquetar sentencia con nombre label
let let name [ = expr] [ ,- ]; Declarar e inicializar una o mas variables (ES6)
return return [expression]; Devolver un valor desde una función
switch switch (expression) { case } Multi-opción con etiquetas "case" o "default"
throw throw expression; Lanzar una excepción o error
try try block Define un manejador de excepciones con el bloque catch
[catch block] que procesa las exceptions lanzadas (throw) en el bloque try,
[finally block] el bloque finally, si existe, se ejecuta siempre
strict "use strict"; Activar restricciones strict a scripts o funciones
var var name [ = expr] [ ,... ]; Declarar e initializar una o mas variables
while while (expression) block Bucle básico con condición al principio
with with (object) block Extender cadena de ámbito (no recomendado)

55
© Juan Quemada, DIT, UPM
Arrays

Juan Quemada, DIT - UPM

56
© Juan Quemada, DIT, UPM
 Arrays // Otros ejemplos de array
let nombres = ["Olga", "Eva", "Juan"];
Array let mezcla = [1, "uno", "1", true];
n Colección indexada de elementos
w Pueden ser heterogéneos // Ejemplo de array
let a = [7, 4, [1, 2]];
literal de array: [e1, e2, ...]
a.length => 3
n Define un array con los valores de una lista
a[0] => 7
length: propiedad con el tamaño del array a[1] => 4
a[2] => [1, 2]
array[i] da acceso al elemento i del array a[2][0] => 1
n El 1er elemento se accede con índice 0 a[2][1] => 2
n El último elemento se accede con array.length-1 a[8] => undefined

n Indexar elementos fuera de rango devuelve undefined

n [i] puede aplicarse varias veces para acceder a arrays de arrays

Doc: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
© Juan Quemada, DIT, UPM 57
Sumatorio
de
números
En este
bucle se
suman los
números
Ilustra el uso de bucles para procesar arrays del array
obtenido
n Con la función sumatorio de n números: Σ x
con split().
El sumatorio de los números 1, 2, 3, 4 es:
n Σ (1, 2, 3, 4) = 1 + 2 + 3 + 4 = 10

Formato CSV (Coma Separated Values)

Los bloques de una + convierte string
n String con valores separados por comas
sentencia pueden a number (suma
w por ejemplo: "1, 2, 3, 4" o "1,2,3,4"
omitir las llaves {…} aritmética).
n Muy utilizado en BBDD, hojas de calculo, …

Los números se introducen en el cajetín

n En formato CSV (Coma Separated Values)

El método split(",") transforma un string en un array con los substrings separados "," (coma).
Por ejemplo, "1, 2, 3, 4". split(",") => ["1", " 2", " 3", " 4" ]
Mas info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

© Juan Quemada, DIT, UPM 58

Clase Array: ordenar, invertir, concatenar o buscar
sort() ¡Los métodos de esta transparencia no modifican el array sobre el que se aplican!

n devuelve el array ordenado

[1, 5, 3].sort() // => [1, 3, 5]
reverse()
n devuelve el array invertido
[1, 5, 3].reverse() // => [3, 5, 1]
concat(e1, .., en)
n devuelve un nuevo array con [1, 5, 3].concat(9, 3) // => [1, 5, 3, 9, 3]
e1, .., en añadidos al final [1, 5, 3].concat([9, 3]) // => [1, 5, 3, 9, 3]
w si ex es un array, añade sus elementos esparcidos
Los métodos que retornan
[1, 5, 3].concat([2, 4]).sort().reverse() // => [5, 4, 3, 2, 1] un array (3 anteriores)
pueden encadenarse tal y
como se ilustra aquí.
join(<separador>)
n concatena elementos en un string
[1, 5, 3, 7].join(';') // => '1;5;3;7'
w introduce <separador> entre elementos
[1, 5, 3, 7].join('') // => '1537'
indexOf(elem, offset)
n devuelve índice de primer elem o -1
[1, 5, 3, 5, 7].indexOf(5) // => 1
w offset: comienza búsqueda (por defecto 0) [1, 5, 3, 5, 7].indexOf(5, 2) // => 3
Más métodos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
© Juan Quemada, DIT, UPM 59
 Clase Array: extraer, modificar o añadir elementos
slice(i,j): devuelve la rodaja entre i y j
n Indice negativo (j) es relativo al final
[1, 5, 3, 7].slice(1, 3) => [5, 3]
[1, 5, 3, 7].slice(1, -1) => [5, 3]
w índice "-1” es igual a a.length-2
n No modifica el array original

splice(i, n, e1, e2, .., en) let a = [1, 3, 7];

n sustituye n elementos en array, desde i a.splice(1, 0, 5) => [] // añade 1 elem
a => [1, 5, 3, 7]
w por e1, e2, ..,en
n Modifica el array original a.splice(2, 1) => [5] // quita 1 elem
a => [1,5, 7]
n Devuelve rodaja eliminada
a.splice(1, 1, 4, 2) => [5]
a => [1, 4, 2, 7]
push(e1, .., en)
n añade e1, .., en al final del array

w devuelve el tamaño del array (a.length) let b = [1, 5, 3];

n Modifica el array original b.push(6, 7) => 5
b => [1, 5, 3, 6, 7]
pop()
b.pop() => 7
n elimina último elemento y lo devuelve
b => [1, 5, 3, 6]
w Modifica el array original
Más métodos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
© Juan Quemada, DIT, UPM 60
Final del tema

© Juan Quemada, DIT, UPM 61