Manual Imprescindible

CURSO DE
JAVASCRIPT

Astor de Caso Parra MULTIMEDIA

í ndice
de contenidos
Sintaxis del lenguaje.........................................................................................................32
Mayúsculas y minúsculas..........................................................................................32
Comentarios.................................................................................................................32
Separación de instrucciones.......................................................................................33
Navegadores sin soporte JavaScript...............................................................................34

2. Variables y tipos de datos................................................................. 36

Variables.............................................................................................................................37
Declaración de variables.............................................................................................38
¿Y las constantes?........................................................................................................40
Tipos de datos....................................................................................................................40
Números.......................................................................................................................41
Lógicos..........................................................................................................................42
Cadenas.........................................................................................................................42
Objetos...........................................................................................................................45
Valores especiales........................................................................................................46

3. Operadores y conversión entre tipos............................................... 48

Cómo usar este libro............................................................................. 16 Operadores en JavaScript.................................................................................................49
Conocimientos previos.....................................................................................................17 Operador de asignación.............................................................................................49
Estructura del libro...........................................................................................................18 Operadores aritméticos..............................................................................................49
Ejemplos del libro..............................................................................................................18 Operador sobre cadenas.............................................................................................53
Operadores lógicos......................................................................................................54
Introducción.......................................................................................... 20 Operadores condicionales o de comparación..........................................................55
¿De qué trata este libro?...................................................................................................21 Operadores sobre bits o binarios...............................................................................59
Navegadores web..............................................................................................................21 Operadores especiales................................................................................................66
Herramientas de programación......................................................................................22 Precedencia de los operadores..................................................................................70
Editores como aplicación............................................................................................22 Conversión entre tipos.....................................................................................................71
Editores online..............................................................................................................23 Conversión implícita...................................................................................................71
Herramientas de desarrollo.............................................................................................23 Conversión explícita...................................................................................................72
Consola..........................................................................................................................23 Comportamientos booleanos especiales........................................................................73
Depurador....................................................................................................................24 Operador NO o de negación (NOT).........................................................................73
Notas finales......................................................................................................................25 Operador Y (AND)......................................................................................................74

1. Introducción a JavaScript.................................................................. 26 4. Estructuras de control....................................................................... 76

Versiones de JavaScript....................................................................................................27 Estructuras condicionales................................................................................................77
¿Qué es eso de ECMAScript?..........................................................................................29 Sentencia if - else..........................................................................................................78
Integración con HTML.....................................................................................................31 Sentencia switch - case................................................................................................80

8 Índice de contenidos Índice de contenidos 9

 Estructuras de bucle..........................................................................................................83 Asignar funciones existentes a un método............................................................134
Sentencia while............................................................................................................83 Ventajas de ES6 al definir métodos.........................................................................136
Sentencia do - while....................................................................................................84 Acceder a propiedades desde un método..............................................................136
Sentencia for.................................................................................................................85 Getters y setters...........................................................................................................137
Sentencias break y continue.......................................................................................87 Otros operadores sobre un objeto.................................................................................139
Estructuras de control de errores....................................................................................88 Estructuras de control sobre objetos.............................................................................140
Sentencia try-catch-finally..........................................................................................88 Sentencia for - in........................................................................................................140
Sentencia throw...........................................................................................................92 Sentencia for - of........................................................................................................142
Estructuras de manipulación de objetos........................................................................94 Punteros y parámetros por referencia..........................................................................142
Punteros......................................................................................................................142
5. Funciones.......................................................................................... 96 Parámetros por referencia........................................................................................144
Declaración de funciones.................................................................................................97
Parámetros.......................................................................................................................100 7. Objetos básicos de JavaScript....................................................... 146
Definición de parámetros.........................................................................................100 Objeto Boolean.................................................................................................................147
Múltiples parámetros................................................................................................102 Constructor.................................................................................................................148
Parámetros opcionales y obligatorios.....................................................................103 Propiedades y métodos............................................................................................149
Valores de retorno...........................................................................................................106 Objeto Number................................................................................................................149
Variables como función..................................................................................................109 Constructor.................................................................................................................149
Funciones flecha..............................................................................................................109 Propiedades................................................................................................................150
Funciones predefinidas..................................................................................................110 Métodos......................................................................................................................151
Función isNaN...........................................................................................................110 Objeto String....................................................................................................................154
Función isFinite.......................................................................................................... 111 Constructor.................................................................................................................154
Función parseInt........................................................................................................ 111 Propiedades................................................................................................................155
Función parseFloat....................................................................................................113 Métodos......................................................................................................................155
Función eval...............................................................................................................114 Objeto Math.....................................................................................................................161
Ámbito o alcance de las variables.................................................................................115 Constructor.................................................................................................................161
Ámbito local...............................................................................................................115 Propiedades................................................................................................................162
Ámbito global............................................................................................................116 Métodos de objeto.....................................................................................................162
Prioridad de las variables.........................................................................................117 Objeto JSON.....................................................................................................................167
Bucles con funciones. Recursividad.............................................................................118 Constructor.................................................................................................................167
Closures. Programación funcional................................................................................120 Propiedades y métodos............................................................................................168
Objeto Error......................................................................................................................172
6. Programación orientada a objetos................................................. 124 Constructor.................................................................................................................173
Definición de un objeto (constructor)...........................................................................125 Propiedades y métodos............................................................................................173
Propiedades de un objeto...............................................................................................126
Definición de propiedades.......................................................................................127 8. Objetos intermedios de JavaScript................................................ 176
Ventajas de ES6 al definir propiedades..................................................................130
Expresiones regulares.....................................................................................................177
Modificación de las propiedades............................................................................130
Escribir una expresión regular.................................................................................177
Métodos de un objeto.....................................................................................................132
Bloques en una expresión regular...........................................................................182
Definición de métodos..............................................................................................132

10 Índice de contenidos Índice de contenidos 11

 Modificadores............................................................................................................183 Objeto Map.......................................................................................................................250
Expresiones regulares útiles.....................................................................................184 Constructor.................................................................................................................250
Objeto RegExp.................................................................................................................184 Propiedades................................................................................................................251
Constructor.................................................................................................................184 Métodos......................................................................................................................252
Propiedades................................................................................................................185 Clonar un Map...........................................................................................................254
Métodos......................................................................................................................186 Combinar elementos en un Map.............................................................................255
Expresiones regulares en objeto String...................................................................187 Objeto Set..........................................................................................................................256
Reutilizar texto de las expresiones regulares........................................................189 Constructor.................................................................................................................256
Objeto Date.......................................................................................................................191 Propiedades................................................................................................................257
Constructor.................................................................................................................193 Métodos......................................................................................................................257
Métodos de objeto.....................................................................................................196 Combinar elementos en un Set................................................................................259
Métodos de instancia................................................................................................197
Trabajar con fechas....................................................................................................201 10. Clases............................................................................................ 262
Fechas útiles...............................................................................................................203 Definición de una clase (constructor)...........................................................................263
Objeto Object....................................................................................................................205 Propiedades.....................................................................................................................264
Constructor.................................................................................................................205 Propiedades de clase.................................................................................................264
Propiedades................................................................................................................205 Propiedades de instancia..........................................................................................265
Métodos de objeto.....................................................................................................205 Métodos............................................................................................................................270
Métodos de instancia................................................................................................210 Métodos de clase.......................................................................................................270
Clonar un objeto........................................................................................................211 Métodos de instancia................................................................................................271
Asignación por desestructuración..........................................................................213 Asignar funciones existentes a un método............................................................272
Operador de propagación (spread)........................................................................215 Acceder a propiedades desde un método..............................................................274
Acceder a propiedades desde funciones existentes.............................................274
9. Objetos avanzados de JavaScript.................................................. 218 Getters y setters...........................................................................................................279
Protocolo iterador ..........................................................................................................219 Subclases. Herencia.........................................................................................................280
Objeto Array.....................................................................................................................220 Acceder a la clase padre...........................................................................................281
Constructor.................................................................................................................220 Añadir propiedades a una instancia de subclase.................................................283
Propiedades................................................................................................................221 Operadores sobre una clase...........................................................................................285
Operar con arrays.......................................................................................................222 Estructuras de control sobre clases...............................................................................286
Métodos de objeto.....................................................................................................224
Métodos de instancia................................................................................................225 11. Módulos........................................................................................ 288
Estructuras de control sobre arrays.........................................................................236 Definir un módulo. Exportar.........................................................................................289
Asignación por desestructuración..........................................................................238 Utilizar un módulo. Importar.......................................................................................291
Operador de propagación (spread)..........................................................................239 Importar módulos en front-end................................................................................293
Arrays multidimensionales......................................................................................242 Navegadores sin soporte de módulos....................................................................294
Cadenas como iterables............................................................................................247 Renombrar elementos al exportar o importar............................................................294
Argumentos de una función como un array..........................................................249 Importar un módulo como un objeto...........................................................................296
Exportación de elemento por defecto..........................................................................297
Importar un módulo varias veces.................................................................................301
Módulos eficientes..........................................................................................................302

12 Índice de contenidos Índice de contenidos 13

12. Promesas. Operaciones asíncronas.............................................. 306 Eventos en back-end.........................................................................................................377
Generar un evento.....................................................................................................378
Primeros pasos por la programación asíncrona.........................................................308
Añadir manejadores de eventos. Listeners.............................................................378
Promesas...........................................................................................................................311
Eliminar manejadores de eventos...........................................................................381
Estados de una promesa...........................................................................................311
Limitar la cantidad de listeners................................................................................382
Estructura de una promesa......................................................................................312
Consultar el array de listeners...................................................................................382
Capturar errores con then()......................................................................................314
Eventos especiales.....................................................................................................384
Encadenar promesas.................................................................................................315
Lanzar errores en promesas.....................................................................................319
Índice alfabético.................................................................................. 386
Almacenar valores de promesas encadenadas......................................................319
Objeto Promise................................................................................................................322
Constructor.................................................................................................................322
Métodos......................................................................................................................326
Combinando el mundo síncrono y asíncrono.............................................................328

13. Objetos DOM del navegador....................................................... 332

¿Qué es el DOM?.............................................................................................................333
Compatibilidad entre navegadores..............................................................................333
Objeto window................................................................................................................334
Colección de objetos..................................................................................................334
Propiedades................................................................................................................335
Métodos......................................................................................................................340
Objeto location.................................................................................................................343
Propiedades................................................................................................................344
Métodos......................................................................................................................345
Objeto document.............................................................................................................346
Colección de objetos..................................................................................................346
Propiedades................................................................................................................347
Métodos......................................................................................................................347
Objeto element.................................................................................................................351
Colección de objetos..................................................................................................351
Propiedades................................................................................................................351
Métodos......................................................................................................................354

14. Eventos......................................................................................... 358

Eventos en front-end........................................................................................................359
Trabajar con eventos..................................................................................................361
Propagación o bubbling.............................................................................................369
El objeto Event...........................................................................................................370
Eventos múltiples......................................................................................................376

14 Índice de contenidos Índice de contenidos 15

2
Variables
Una variable es un espacio de memoria donde almacenamos temporalmente
un dato que utilizamos en las operaciones dentro de nuestro código, como, por
ejemplo, el resultado de una suma. Ese dato podrá ser recuperado en cualquier
momento e incluso ser modificado.
En el código, cada variable estará identificada por un nombre a nuestra elec-
Variables ción y podrá estar formado por caracteres alfanuméricos, el carácter guión bajo
o subrayado (_) y el símbolo de dólar ($). La única restricción es que no puede
y tipos de datos comenzar por un número. También es importante recordar que se distingue entre
mayúsculas y minúsculas, por lo que la variable suma no será la misma que la
variable SUMA. Puede ver ejemplos en la tabla 2.1.

Tabla 2.1. Ejemplos de nombres de variables.

Nombre válido Nombre no válido

dos_numeros 2_numeros
nombre1 nombre-1
_Documento @Documento
nombreApellidos nombre&apellidos
$dinero dinero

También debe tener en cuenta que el nombre de una variable no puede coincidir
En este capítulo aprenderás: con el de una palabra reservada de JavaScript (véase la tabla 2.2) ni con el de otro
elemento que hayamos definido (funciones u objetos).

Tabla 2.2. Lista de palabras reservadas ECMAScript.

• Declarar variables y constantes.
• Los tipos de datos disponibles en JavaScript. Palabras reservadas
• Los valores especiales de las variables. abstract else int synchronized
await enum interface this
boolean export let throw
break extends long throws
byte false native transient
case final new true
catch finally null try
char float package typeof
class for private var
const function protected void
Valor operando Ejemplo Resultado Operador O (OR)
var x = "hola"; var y = !x; y vale false El comportamiento es similar al operador AND, salvo que devuelve como resul-
var x = "false"; var y = !x; y vale false
tado el primer operando interpretado como true o el último en otro caso.
var x = undefined; var y = !x; y vale true Tabla 3.27. Operador lógico O con variables no booleanas.

Valor operando 1 Valor operando 2 Ejemplo Resultado

Operador Y (AND) var x = true; var y = 0; var z = x || y; z vale true (primer valor true)
var x = 0; var y = true; var z = x || y; z vale true (primer valor true)
Con este operador vamos a poder utilizar variables de cualquier tipo, pero no var x = true; var y = 1; var z = x || y; z vale true (primer valor true)
vamos a obtener siempre un resultado booleano. En estos casos, el operador var x = 1; var y = true; var z = x || y; z vale 1 (primer valor true)
va a ir examinando cada operando mientras se evalúen como true y entonces
var x = false; var y = 0; var z = x || y; z vale 0 (último valor false)
devuelve el último como resultado, sea del tipo que sea. Si alguno se traduce
var x = 0; var y = false; var z = x || y; z vale false (último valor
como false, entonces lo devuelve y deja de mirar el resto. false)
Tabla 3.26. Operador lógico Y con variables no booleanas. var x = false; var y = 1; var z = x || y; z vale 1 (primer valor true)
var x = 1; var y = false; var z = x || y; z vale 1 (primer valor true)
Valor operando 1 Valor operando 2 Ejemplo Resultado
var x = 1; var y = 0; var z = x || y; z vale 1 (primer valor true)
var x = true; var y = 0; var z = x && y; z vale 0 (primer valor false)
var x = ""; var y = true; var z = x || y; z vale true (primer valor true)
var x = 0; var y = true; var z = x && y; z vale 0 (primer valor false)
var x = ""; var y = 0; var z = x || y; z vale 0 (último valor false)
var x = true; var y = 1; var z = x && y; z vale 1 (último valor true)
var x = "hola"; var y = true; var z = x || y; z vale "hola" (primer valor
var x = 1; var y = true; var z = x && y; z vale true (último valor true)
true)
var x = true; var y = var z = x || y; z vale true (primer valor true)
var x = false; var y = 0; var z = x && y; z vale false (primer valor undefined;
false)
var x = null; var y = true; var z = x || y; z vale true (primer valor true)
var x = 0; var y = 1; var z = x && y; z vale 0 (primer valor false)
var x = ""; var y = "hola"; var z = x || y; z vale "hola" (primer valor
var x = true; var y = ""; var z = x && y; z vale "" (primer valor false) true)
var x = ""; var y = true; var z = x && y; z vale "" (primer valor false) var x = NaN; var y = "hola"; var z = x || y; z vale "hola" (primer valor
var x = true; var y = "hola"; var z = x && y; z vale "hola" (último valor true)
true) var x = "hola"; var y = "adiós"; var z = x || y; z vale "hola" (primer valor
var x = "hola"; var y = true; var z = x && y; z vale true (último valor true)
true)
var x = true; var y = undefined; var z = x && y; z vale undefined (primer
valor false)
var x = null; var y = true; var z = x && y; z vale null (primer valor
false)
var x = ""; var y = "hola"; var z = x && y; z vale "" (primer valor false)
var x = NaN; var y ="hola"; var z = x && y; z vale NaN (primer valor
false)
var x = "hola"; var y = "adiós"; var z = x && y; z vale "adiós" (último valor
true)

74 Capítulo 3 Operadores y conversión entre tipos 75

 set marca(valorMarca) { // Asignamos valor a la propiedad
this._marca = valorMarca; unCoche.marca = "Fiat";
} // Accedemos a la propiedad
}; console.log(unCoche.marca); // Mostraría "Fiat"
// Utilizamos el setter
unCoche.marca = "Fiat"; Pero, si lo hemos eliminado, ¿cómo es que no da error? Si observa atento el valor
// Accedemos al getter
console.log(unCoche.marca); // Mostraría "Fiat" recuperado, podrá ver que ya no es el mismo texto que habíamos definido con
el getter y setter, sino que es simplemente el valor sin alterar. Esto nos da la pista
ADVERTENCIA: para concluir que lo que hemos hecho en realidad es añadir de nuevo marca
El nombre del método set no puede coincidir con el de la propiedad a la que se vincula, como una propiedad normal, sin métodos get y set.
pues crearíamos un bucle infinito de llamadas al método (recuerde, una asignación
invoca al setter).
Otros operadores sobre un objeto
Como ha visto en los ejemplos, hemos definido una pseudopropiedad marca que Aunque en las secciones anteriores han ido apareciendo la mayoría de los opera-
realmente no está definida en el objeto (this.marca), pero hemos sido capaces dores que nos ofrece JavaScript para trabajar con los objetos (this, new, etc.), aún
de utilizarla como si fuera una propiedad normal. El getter y setter quedan vincu- quedan un par más para ayudarle a tener más control sobre los objetos.
lados en este caso con una propiedad real _marca, a la cual podríamos acceder
con total normalidad (unCoche._marca), pero la finalidad de estos métodos es • instanceof: Nos dice si la instancia especificada proviene del objeto que indi-
"esconder" en cierta medida el nombre real. Además, también nos pueden ser quemos. Esto es, nos indica mediante un valor true o false si la instancia
útiles si la propiedad necesita algún tipo de cálculo o tratamiento en alguna de ha sido creada a partir de un objeto concreto. Veamos su sintaxis y funciona-
las dos operaciones. miento con un pequeño ejemplo:
// Objeto con getter y setter // Objeto definido con llaves
var unCoche = { var coche1 = {
get marca() { marca: "Fiat"
return ‛Este coche es: ${this._marca}‛; };
}, // Objeto definido con function
set marca(valorMarca) { function MiCoche(valorMarca) {
this._marca = ‛--- ${valorMarca} ---‛; // Definición de propiedad
} this.marca = valorMarca;
}; }
// Utilizamos el setter // Definimos instancias
unCoche.marca = "Fiat"; var coche2 = new MiCoche("Fiat");
// Accedemos al getter console.log(coche1 instanceof MiCoche); // false, objeto definido con llaves
console.log(unCoche.marca); // Mostraría "Este coche es: --- Fiat ---" console.log(coche2 instanceof MiCoche); // true, es instancia de MiCoche

Para terminar, quería mencionarle que también es posible eliminar un getter y • in: Nos permite saber si una propiedad o método existe en el objeto o instancia
setter mediante el operador delete como si fuera una propiedad más. que indiquemos, devolviendo un valor true o false. El nombre a comprobar
debe estar escrito como un string. Si lo usamos contra un objeto, solamente
// Accedemos al getter
console.log(unCoche.marca); // Mostraría "Este coche es: --- Fiat ---"
funcionará con los que vienen predefinidos en JavaScript (detallados en los
// Eliminamos la pseudopropiedad siguientes capítulos).
delete unCoche.marca;
console.log(unCoche.marca); // Mostraría undefined // Objeto definido con llaves
var coche1 = {
marca: "Fiat"
Puede que esté pensando: "¿Y qué ocurre si vuelvo a asignar un valor a la };
propiedad marca?". Pues vamos a verlo. // Objeto definido con function

138 Capítulo 6 Programación orientada a objetos 139

7
Dentro del núcleo de JavaScript, existen varios objetos que ya están definidos
y tienen una serie de funcionalidades tremendamente útiles en muchos casos.
Para no desarrollar un apartado demasiado extenso, he preferido dividirlos en
varios grupos y dedicarle un capítulo a cada uno de esos grupos:

1. Objetos básicos: Les he dado este nombre ya que son objetos sin una
excesiva complejidad o son un envoltorio (wrapper) de los tipos de datos

Objetos básicos predefinidos (booleano, número y cadena o string), es decir, crear una
instancia de uno de estos objetos mediante la sentencia new equivale a

de JavaScript declarar una variable directamente con el valor. Son los que veremos en este
capítulo.
2. Objetos intermedios: Aquí se engloban objetos que tienen cierta persona-
lidad propia y utilizan tipos de datos que aún no hemos visto.
3. Objetos avanzados: No se asuste por el nombre. La única diferencia respecto
a los grupos anteriores es que manejan estructuras de datos que aún no hemos
presentado y por eso requieren una explicación algo más extensa.

De cada uno de los objetos expondremos el constructor, propiedades y métodos

que tengan asociados (al menos, los principales), así como ejemplos de algunos
de ellos para mejorar su comprensión o utilidad.

NOTA:

En este capítulo aprenderás: Algunos métodos han sido introducidos en versiones posteriores a ES6, por lo que
aparecerán marcados entre corchetes (por ejemplo, [ES7]) para que tenga en cuenta que,
si los utiliza, el entorno donde lo utilice debe soportar la especificación correspondiente
• Manejar los objetos fundamentales de JavaScript. de ECMAScript.
• Diferenciar los métodos de objeto y de instancia.
• El objeto JSON. Le adelanto que todos los objetos predefinidos en JavaScript disponen el
método toString(), que devuelve el objeto expresado como una cadena, reali-
zando para ello conversiones implícitas si es necesario. Para hacer uso de él,
basta con hacer la llamada desde la instancia que nos interese: miInstancia.
toString().

Objeto Boolean
Como puede imaginar, este objeto expresa un valor como un booleano, o lo que
es lo mismo, como true o false.
Objeto Array 4. Mediante el uso de corchetes ([] o [valor1, valor2, ..., valorN]): No es
propiamente un constructor, sino que equivaldría a crear directamente una
instancia, como ocurría con los objetos definidos con llaves. Obtendremos un
¡Vamos por fin con este objeto que tantas veces hemos nombrado páginas
array vacío si no se indican valores o bien uno relleno con los valores pasados
atrás!
como parámetros.
Las variables de JavaScript normalmente almacenan un único valor, el cual
// Creación de instancias
podemos recuperar cuando utilizamos su nombre dentro de una expresión. Esto var array1 = []; // Vacío y sin posiciones
se nos puede quedar corto en determinadas ocasiones como si, por ejemplo, var array2 = [5]; // 1 posición, valor number
quisiéramos almacenar por separado los platos del menú de un restaurante para var array3 = ["a", "b", "c"]; // 3 posiciones, valores string
var array4 = [1, 2, 3]; // 3 posiciones, valores number
después mostrarlos en nuestra página. Gracias a los arrays podremos almacenar var array5 = ["a", 2, false]; // 3 posiciones, valores de tipos distintos
todos estos platos en una única variable como si esta tuviera huecos o casillas
que se rellenan con los valores, permitiéndonos acceder a cada plato individual El tipo de datos de los valores almacenados en un array puede ser cualquiera,
con tan solo indicar cuál es su hueco, es decir, la posición dentro del array. A esta incluso puede ser distinto en cada una de las posiciones. En otros lenguajes,
posición se le denomina índice. los arrays están forzados a que los datos sean siempre del mismo tipo (entero,
booleano, etc.).

Constructor TRUCO:
Podemos crear una instancia (mediante corchetes) con posiciones vacías simplemente
Para crear un array tenemos varios constructores: poniendo tantas comas como huecos necesitemos, omitiendo los valores. Equivaldría
al constructor new Array(longitud).
1. new Array(): Crea un array vacío, sin huecos donde almacenar nuestros datos.
Esto es útil cuando no sabemos la longitud inicial que tendrá el array cuando // Creación de instancia con posiciones vacías
var array1 = [ , ]; // 1 posición
lo utilicemos en nuestro código. var array2 = [ , , , ]; // 3 posiciones
// Objeto Array // Mostramos valores
var miArray = new Array(); // Vacío y sin posiciones console.log(array1); // [undefined]
console.log(array2); // [undefined, undefined, undefined]
2. new Array(longitud): En este caso el array se crea con tantos huecos como
indique el parámetro longitud. Cada hueco tendrá un valor undefined.
// Objeto Array
Propiedades
var miArray = new Array(5); // 5 posiciones vacías
El objeto Array solo dispone de una propiedad:
3. new Array(valor1, valor2, ..., valorN): Con este constructor crearemos
un array con tantas posiciones como valores hayamos pasado como pará- • length: Nos indicará la longitud o número de elementos del array. Aquí hay
metros y, además, dichos huecos irán rellenos con el valor correspondiente. que prestar atención, puesto que no influye el que los huecos tengan valor o
Tenga cuidado, pues, si únicamente indica un valor y es de tipo numérico, no, sino que basta con que la posición exista y sea accesible.
JavaScript lo interpretará como el constructor anterior. // Creación de instancias
var array1 = new Array();
// Objeto Array var array2 = new Array(3);
var array1 = new Array("5"); // 1 posición, 1 valor string var array3 = ["a", "b"];
var array2 = new Array("a", "b", "c"); // 3 posiciones, valores string // Mostramos valores
var array3 = new Array(1, 2, 3); // 3 posiciones, valores number console.log(array1.length); // 0
var array4 = new Array("a", 2, false); // 3
 posiciones, valores de tipos console.log(array2.length); // 3
distintos console.log(array3.length); // 2

220 Capítulo 9 Objetos avanzados de JavaScript 221

Para poder experimentar la asincronía y no tener solamente pseudocódigo, le Ahora está preparado para seguir profundizando en la programación asíncrona
presento una función de JavaScript que nos permitirá simular la respuesta a una con JavaScript.
llamada asíncrona.
• setTimeout(fnCallback, milisegundos, param1, param2, ...paramN): ADVERTENCIA:
Ejecuta una función callback pasado el intervalo de tiempo indicado en mili- Tenga en cuenta que en las operaciones asíncronas el orden de las respuestas no siempre
segundos. Si este no se especifica, tomará valor cero por defecto. Los pará- coincide con el que han sido escritas las instrucciones.
metros siguientes son opcionales y son pasados a la función callback como // Declaración de función
argumentos. function mostrarMensaje(texto) {
console.log(texto);
// Declaración de función }
function mostrarMensaje() { // Varias operaciones asíncronas
console.log("Hola"); setTimeout(mostrarMensaje, 5000, "Buenos días");
} setTimeout(mostrarMensaje, 10000, "Buenas tardes");
// Mostraría "Hola" pasados 5 segundos setTimeout(mostrarMensaje, 3000, "Buenas noches");
setTimeout(mostrarMensaje, 5000); // Se mostrarán los mensajes en este orden:
// Mostraría "Hola otra vez" pasados 10 segundos // "Buenas noches", a los 3 segundos
setTimeout(() => console.log("Hola otra vez"), 10000); // "Buenos días", 2 segundos después (5 en total)
// Mostraría "Hola de nuevo" pasados 3 segundos // "Buenas tardes", a los 5 segundos (10 en total)
setTimeout(console.log, 3000, "Hola de nuevo");

Puede comprobar que es una función sencilla de entender y de manejar, así que
vamos a volver a modificar nuestro ejemplo para que se realice el sumatorio con
cinco segundos de retardo, simulando la espera de respuesta de la base de datos. Promesas
// Suma de números, modo asíncrono
// Declaración de función Las promesas surgen como la interpretación de JavaScript para manejar peti-
function sumar(acumulado, numero) {
return acumulado + numero;
ciones asíncronas y que se integraron de forma nativa en ECMAScript 6, por lo
} que no hay que recurrir a librerías adicionales. Además, incluyen mecanismos
// Función de callback para conocer y controlar el resultado de la misma, que puede cumplirse o no,
function calcularSuma(array) {
var resultado = array.reduce(sumar, 0); como en la vida real. Cuando una promesa se cumple, decimos que se resuelve
console.log(resultado); // 6 (resolve) y, en caso contrario, que se rechaza (reject).
}
// Código asíncrono
function obtenerNumeros(fnCallback) {
numeros = [1, 2, 3]; Estados de una promesa
setTimeout(() => fnCallback(numeros), 5000);
} Cuando se trabaja con este concepto de asincronía, podemos pasar por varias
// Obtención de datos y callback cuando termine
obtenerNumeros(calcularSuma);
fases durante su ciclo de vida.
console.log("Esperando el resultado...");
// Se mostrarán los mensajes: • Pendiente (pending): Corresponde a su estado inicial, cuando todavía no
// "Esperando el resultado..." conocemos su resultado.
// 6 (5 segundos más tarde)
• Resuelta (fulfilled): Indica que la promesa se ha cumplido y obtendremos
¡El experimento es todo un éxito! Con esto hemos podido comprobar que el un valor a cambio que será el resultado de la ejecución.
flujo de ejecución no se detiene en la llamada a obtenerNumeros, puesto que
la instrucción siguiente se ejecuta al instante (el mensaje de espera) y el callback • Rechazada (rejected): Nos hace saber que la ejecución ha fallado y nos propor-
calcularSuma lo hace segundos más tarde. cionará el motivo del error.

310 Capítulo 12 Promesas. Operaciones asíncronas 311

14
Cuando alguien visita nuestra página o sitio web, no se limita simplemente a leer
el texto que contiene o a contemplar las imágenes que hayamos insertado, sino que
llega un punto en que el usuario necesita interactuar con nuestra página, como
por ejemplo darle al botón de compartir en redes sociales, y nosotros tenemos
que ser capaces de preparar nuestra página para reconocer esas interacciones y
realizar las operaciones que sean necesarias. A estas acciones que puede hacer
el usuario se les denomina eventos y engloban cosas como pasar simplemente el
Eventos puntero del ratón por encima de una imagen o hacer clic sobre un botón.
JavaScript es capaz de detectar estos eventos y también nos permite asociarles
unas instrucciones que se ejecutarán cuando se produzcan.
Este escenario que hemos explicado sucede únicamente en un entorno front-end,
pero los eventos son algo que también están presentes en back-end, aunque ahí
se desencadenan desde el propio código. En este capítulo veremos cómo tratar
los eventos en ambos entornos.

NOTA:
Los eventos se consideran operaciones asíncronas, ya que no sabemos cuándo van a
suceder.

Eventos en front-end
En JavaScript existe una amplia variedad de eventos que podremos utilizar a
En este capítulo aprenderás: nuestro antojo para crear las situaciones que queramos o conseguir un efecto
concreto. La tabla 14.1 le mostrará los eventos principales y la acción que los
genera.
• Reaccionar a eventos desde el front-end.
Tabla 14.1. Lista de eventos en front-end.
• El objeto Event.
Evento Origen
• Controlar la propagación de eventos.
Click Se hace clic sobre un elemento.
• Trabajar con eventos desde el back-end.
DblClick Se hace doble clic sobre un elemento.
MouseDown Se hace clic con un botón cualquiera del ratón.
MouseUp Se libera un botón del ratón que estaba pulsado.
MouseMove Se mueve el puntero por la pantalla.
MouseOver El puntero entra en el área que ocupa un elemento (se pasa por encima).
MouseOut El puntero sale del área que ocupa un elemento (se quita de encima).
KeyPress Una tecla es pulsada. Se genera después de KeyDown.
KeyDown Una tecla es pulsada sin soltarla.
 Métodos
Ahora que conoce un poco más a los traviesos eventos, le presento algunos
métodos de Event que nos proporcionan un mayor control sobre ellos.
• preventDefault(): Cancela un evento, evitando que se ejecute su acción por
defecto. Esto no evita que el evento se siga propagando. Veamos un ejemplo
con un checkbox, cuya acción por defecto en un evento click es marcarse
Figura 14.5. Información al hacer clic sobre boton2. o desmarcarse.
<HTML>
Tabla 14.3. Propiedades de un evento de ratón. <BODY>
<DIV ID="capa1">
Propiedad Tipo Descripción <FORM ID="formulario1">
altKey Booleano Devuelve true cuando se ha presionado la tecla Alt. <INPUT
TYPE="checkbox"
button Entero Indica el botón del ratón que ha sido pulsado. (Ver tabla 14.4). ID="check1"
clientX /> Confirmar
Entero Indica la posición horizontal del cursor donde se ha hecho clic,
</FORM>
dentro del área disponible en el documento.
</DIV>
clienteY Entero Indica la posición vertical del cursor donde se ha hecho clic, <SCRIPT TYPE="text/javascript">
dentro del área disponible en el documento. // Declaración de función
function cancelarEvento(evento) {
ctrlKey Booleano Devuelve true cuando se ha presionado la tecla Control. evento.preventDefault();
type String Indica el tipo de evento que se ha producido (click, console.log(‛Evento ${evento.type} cancelado‛);
mouseover, etc.). }
// Asignación de manejadores
screenX Entero Indica la posición horizontal del cursor donde se ha hecho clic, document
dentro de la resolución de pantalla del usuario. .getElementById("check1")
screenY .onclick = cancelarEvento;
Entero Indica la posición vertical del cursor donde se ha hecho clic,
document
dentro de la resolución de pantalla del usuario.
.getElementById("capa1")
shiftKey Booleano Devuelve true cuando se ha presionado la tecla Mayús. .onclick = () => console.log("Clic en capa1");
</SCRIPT>
</BODY>
Tabla 14.4. Valores de la propiedad button. </HTML>

Valor Descripción Si hacemos clic sobre check1, veremos que no se selecciona nunca, ya que
0 Botón izquierdo del ratón. hemos cancelado su acción por defecto, pero sí se muestran por consola tanto
1 Botón central del ratón. el mensaje de cancelación como el mensaje de la capa1 porque se propaga el
2 Botón derecho del ratón.
evento hasta ella.
3 Para un cuarto botón. • stopPropagation(): Detiene la propagación de un evento hacia niveles
4 Para un quinto botón. superiores del DOM.
<HTML>
<BODY>
NOTA: <DIV ID="capa1">
<INPUT
Si tenemos el ratón configurado para zurdos, los valores de la tabla 14.4 pueden TYPE="checkbox"
mostrarse en otro orden. ID="check1"
/> Confirmar

374 Capítulo 14 Eventos 375

Curso de JavaScript

Manual Imprescindible

JavaScript lleva presente en el mundo Web prácticamente desde que Internet fue accesible
para el mundo entero, pero ha sabido crecer y adaptarse a las nuevas necesidades y tendencias
convirtiéndose en un lenguaje con un peso importante.
Este libro pretende enseñarle JavaScript desde su base para que pueda comprender
perfectamente cómo está estructurado internamente y así le resulte mucho más sencillo dar
el paso hacia los siguientes niveles, puesto que sus secretos no terminan en la última página.
La manera de abordar la materia será siempre de un modo progresivo, con explicaciones
claras y mostrando uno o varios ejemplos de lo expuesto, de forma que un capítulo sirva
como preludio del siguiente, como si se estuviera construyendo una escalera hacia su
objetivo: dominar JavaScript.

2311350

MULTIMEDIA www.anayamultimedia.es