by

Ya
ko
19
76
id
en
ti.
io
JavaScript
¿A quién va dirigido este libro?
¿Dónde está el código?
Requisitos
Lo básico
¿Qué es JavaScript?
Ventajas de JavaScript
Desventajas de JavaScript
JavaScript vs Java
Programación en JavaScript
Dónde introducir el código
En la página HTML
Fuera de una página HTML
Consola del navegador (browser)
Statement y variables
Array
Operadores y construcciones base
Funciones
Objetos
Clases
DOM
¿Qué es?
Utilizar los elementos
Conclusiones
Todos estamos de acuerdo en que los PC ofrecen una gran ventaja para los seres humanos, principalmente en
términos de tiempo y fiabilidad. Todos podemos calcular 15x2.07x35, personalmente utilizo unos minutos con lápiz
y papel, pero un PC toma unos milisegundos.
Por supuesto, necesitamos comunicarnos con el ordenador y por lo tanto necesitamos un lenguaje de programación
que puede ser de alto o bajo nivel. De bajo nivel significa un lenguaje más cercano a la máquina, así que pensemos
en Assembly, para un alto nivel nos referimos a un lenguaje más abstracto y cercano al hombre como JavaScript.
Puede parecer uno nuevo, especialmente si eres nuevo en la programación, pero debes saber que JavaScript ha
existido desde 1995 por lo tanto podemos hablar de un lenguaje maduro y popular.
Aprenderás a crear partes de códigos funcionantes y te enseñaré a detectar errores de bug línea por línea.
JavaScript hoy en día se utiliza para la lógica de presentación dentro de páginas HTML o JSP por lo que está muy
extendida tanto en el lado del client como en el lado del server, especialmente en los últimos años con varios
framework como Node.js. De hecho, muchos framework se han desarrollado en este lenguaje de programación,
como Angular, React, Vue.js, Node.js, Backbone.js y más.
¿A quién va dirigido este libro?
Este libro está dirigido a estudiantes, webmasters o simplemente personas curiosas de conocer y profundizar este
lenguaje de programación. El conocimiento, aunque mínimo, de cómo funciona una página web, qué es HTML y
CSS es importante, para que puedas entender cómo se integra JavaScript.
En este e-book comenzaremos desde lo básico sin dar nada por sentado, pero preferimos un propósito práctico en
lugar de una gran cantidad de teoría. Haremos algunos ejercicios que te darán una mejor comprensión del idioma y
su estructura.

¿Dónde está el código?

Las referencias de código se resaltarán con una fuente de un solo espaciado y diferentes colores para resaltar las
palabras claves de JavaScript. Las partes del código serán auto coherentes o harán referencias a programas ya
explicados en capítulos o párrafos anteriores.
Los programas tendrán la siguiente forma:

io
function fattoriale(n) {
if (n == 0) {
return 1;

ti.
} else {
return fattoriale(n - 1) * n;

en
}
}

Usando un comentario seguido de una flecha mostraremos la salida de una función o código propuesto de la
siguiente manera:
console.log(fattoriale(10));
id
76
// -> 3628800
19
ko
Ya
by
Requisitos
JavaScript es uno de los lenguajes de programación que todos los desarrolladores web deben conocer porque abarca
los elementos principales de una página web o una aplicación, junto con HTML y CSS.
HTML se encarga del contenido de las páginas que crea, mientras el CSS se ocupa del layout de las páginas que
crea, entre estos se incluye JavaScript que define el comportamiento de las páginas.
Por esta razón, reitero que el conocimiento de los lenguajes de scripting mencionados es bienvenido para tener
mayor seguridad y disposición de comprender los conceptos.
No hay requisitos para tu PC, ya que hay entornos también disponibles en línea por lo que incluso un PC un poco
antiguo puede funcionar bien para seguir este libro e-book, mientras que si deseas instalar un IDE que proporcione
auto-completar y características avanzadas sugiero que tengas 4 GB de RAM libre.
Para los curiosos, sugiero los siguientes IDE: Visual Studio Code, WebStorm y Atom.

Lo básico
Casi todos los sitios web que visitamos hoy en día utilizan JavaScript o un framework derivado de él, un efecto en
una imagen, un carrusel de imágenes, pop-ups mostrados para información adicional o confirmación de una
operación. Todo esto es el resultado del uso de este lenguaje y su integración con la estructura de la página y el
diseño proporcionado por el CSS.
JavaScript es un lenguaje compacto pero muy flexible y versátil. Puedes empezar desde pequeños fragmentos de
código para crear juegos, aplicaciones enteras, gráficos 3D o incluso bases de datos.
¿Qué es JavaScript?
JavaScript es la herramienta que permite a cada desarrollador web expresar su creatividad, ya que permite la
creación de una interfaz atractiva e interactiva.
Recuerda que debajo de cada ventana de chat y cualquier elemento en movimiento dentro de una página web hay un
archivo JavaScript.
Una arquitectura de aplicación web clásica supone el uso de al menos dos equipos independientes: un server y un
client.
Cuando JavaScript se utiliza del lado del client, por lo general se ejecuta en un navegador que a su vez interpreta o
decodifica lo que hemos escrito y lo muestra en una página del navegador.
La página o archivo que contiene el código para el client es proporcionado por un servidor Web que ni siquiera
puede estar escrito en JavaScript, de hecho, los servidores Web que utilizan ASP, Java u otros lenguajes de
programación son comunes.
JavaScript es un lenguaje que no requiere compilación, es decir, hay un intérprete también llamado motor de
Scripting que traduce las instrucciones en instrucciones comprensibles para nuestro equipo. La ausencia de un
compilador conduce inmediatamente a la ejecución del código escrito, a veces acelerando el ciclo de vida hasta que
se ejecuta.
El motor utilizado por JavaScript está integrado directamente en el navegador y esto le permite interceptar y manejar
fácilmente los eventos del navegador y ser capaz de interactuar con ellos. Por ejemplo, pensemos en los cuadros de
entrada que se vuelven rojos si introducimos los datos incorrectos, o simplemente hacer clic para confirmar una
acción.
JavaScript es un lenguaje de programación orientado a objetos y orientado a eventos, lo que significa que todo en
este lenguaje se representa como un objeto, la instancia de una clase única y separada de las demás. Este modelo de
programación facilita la representación de la realidad porque podemos definir un objeto Machine que consta de 4
instancias de la clase Rotate.
Además, este modelado permite un mejor mantenimiento de la aplicación, garantizando la reutilización y
modularidad de las clases creadas.
Ventajas de JavaScript
En este párrafo vamos a analizar cuáles son los puntos fuertes de JavaScript y por qué lo preferimos a otras
soluciones.
JavaScript permite un desarrollo rápido gracias a una sintaxis simple y concisa con una curva de aprendizaje baja,
esto significa que es fácil de usar.
Como se mencionó anteriormente JavaScript es un lenguaje interpretado y muy rápido especialmente del lado client,
esto garantiza una excelente interoperabilidad porque al ponerlo en una página web estamos seguros de que va a
funcionar con cualquier navegador y en cualquier sistema operativo.
Esto garantizará que la interfaz del usuario sea la misma para todos y podamos llenar algunos cuadros de entrada
dinámicamente, como una lista de municipios para una provincia determinada, o crear una alerta para campos
incorrectos o que faltan.
Por último, intercambiar datos en tu aplicación será muy fácil, ya que puedes recibir o enviar datos sin tener que
volver a cargar la página en cada interacción. Interesante, ¿no?
Resumiendo, las principales ventajas:
• Velocidad de ejecución del lado client
• Interactividad del usuario
• Compatibilidad con todos los navegadores
• Velocidad de desarrollo
• Intercambio de datos

Desventajas de JavaScript
Una de las grandes desventajas de JavaScript, que por desgracia afecta a la seguridad de la página web, es la
capacidad de ver el código que se ejecutará el navegador. Esto afecta negativamente ya que no podremos guardar
datos de inicio de sesión o credenciales dentro de nuestros archivos .js (extensión de archivo JavaScript).
Otro problema que puedes encontrar son errores o excepciones producidas por el navegador. Cuando un error se
encuentra automáticamente, es imposible seguir viendo la página, en este sentido el buen manejo de errores por
parte del programador es esencial, y los navegadores son cada vez más tolerantes a los errores de JavaScript.
Por último, al ser un lenguaje de scripting tiene capacidades limitadas, por razones de seguridad, por lo que debes
recurrir a otros lenguajes como Java (piense en operaciones de hardware).
En el siguiente capítulo veremos las diferencias entre Java y JavaScript y por qué tienes que saber distinguirlas,
tienen un nombre similar, pero ten cuidado, no son lo mismo.

JavaScript vs Java
Hay dos escenarios posibles en este punto del e-book:
1. Eres un programador que usó Java y sabes lo que es
2. Nunca has tenido que lidiar con este lenguaje
En cualquier caso, te recomendamos que sigas leyendo el capítulo porque en ambos casos descubrirás las diferencias
entre los dos idiomas y entenderás para qué sirven.
Java es un lenguaje de programación nacido en 1995 que utiliza un procesador virtual en el que se ejecutan los
programas. Este procesador virtual no es más que un intérprete que traduce programas escritos a un lenguaje que
nuestro PC puede entender.
Con Java se puede programar para la web a través de applets, pero en 1995 inmediatamente comenzaron a notar
límites en las interacciones con las acciones del usuario, de hecho, muy pronto nació JavaScript.
Hoy en día los applets están en desuso y Java se utiliza principalmente para aplicaciones independientes o
características clásicas del lado del server.
Los dos lenguajes tienen en común la capacidad de ejecutar sus aplicaciones en navegadores, ambos se pueden
utilizar del lado del server (piense en servidores web como WebSphere) y finalmente, ambos tienen bibliotecas y
framework que facilitan a los programadores la reutilización y modularidad del código.
Las similitudes son muy pocas en comparación con las diferencias que vamos a explicar. Estas son diferencias
sustanciales, aunque la etimología puede parecer la misma. La primera diferencia es el entorno de ejecución Java,
que también puede ser una máquina virtual, mientras JavaScript se ejecuta solo en un navegador.
Si conoces Java sabes que es un lenguaje interpretado, también lo hemos mencionado antes, pero no es del todo
cierto. Java, a diferencia de JavaScript, compila antes de la ejecución generando un código de bytes y en esta etapa
observa cualquier error en el código escrito. Gracias a los IDE, la detección de errores es muy sencilla, ya que a
menudo no se escribe bien un nombre de clase, y nuestro código nos informa de una serie de errores.
Otra diferencia radica en la naturaleza de Java, que al ser un lenguaje de programación puede crear aplicaciones
independientes en lugar de JavaScript, que necesariamente debe incluirse en una página HTML. La curva de
aprendizaje, de hecho, es diferente entre los dos idiomas: sólo piensa que en Java hay diferentes tipos de datos para
representar números (byte, short, int, long, float, double), en su lugar en JavaScript hay simplemente number.
La sintaxis de Java y JavaScript es similar a la del lenguaje C y C++, por lo que tenemos los bloques if...else, while,
for ecc; pero Java está fuertemente tipado en lugar de JavaScript que no lo es. Esto se traduce en una sintaxis más
articulada y tal vez difícil de recordar para Java, pero realmente simple y eficaz para JavaScript.
Programación en JavaScript
Dónde introducir el código
Comencemos a usar JavaScript y tengamos dos escenarios posibles: en una página HTML, fuera de una página
HTML, o utilicemos la consola de cualquier navegador. Sugerimos leer todos los métodos propuestos, ya que todos
pueden ser útiles para entender las diferencias.

En la página HTML
HTML es un lenguaje de markup utilizado para crear páginas Web, sus elementos son los bloques que construyen la
página y se representan mediante etiquetas. Hay diferentes tipos de etiquetas y necesitas pensar en tu página como
un periódico teniendo en cuenta un título, subtítulo, párrafo, etc. Pero enriquecido con contenido multimedia como
audio y vídeo. Cada etiqueta se compone y comienza con corchetes angulares <>y termina con</>.
Una página web mínima se forma así:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>

<h1>Encabezado principal</h1>
<p>Párrafo</p>

</body>
</html>

Puedes crear cualquier archivo de texto con lo siguiente y luego cambiar la extensión del archivo a .html, yo creé mi
archivo welcome.html.
Las dos primeras líneas del archivo identifican que es una página HTML y luego tenemos dos secciones principales:
head y body. En la primera sección están toda la información relacionada con el documento, por ejemplo, el autor de
la página, el título, etc., en la segunda sección están los elementos que vamos a mostrar. La etiqueta <h1>
normalmente identifica el encabezado principal y la etiqueta <p> identifica un párrafo.

La página que hemos creado todavía no contiene ningún código JavaScript, vamos a ver dónde y cómo insertarlo en
nuestra página. El código debe colocarse dentro de las etiquetas <script></script> y se puede incluir en la sección de
head o body de nuestra página.
Vamos a insertar un nuevo párrafo ahora a través de JavaScript y no por etiquetado en la sección head:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>

<script>
function cambiaPárrafo() {
document.getElementById("parag").innerHTML = "Nuevo párrafo";
}
</script>
</head>
<body>

<h1>Encabezado principal</h1>
<p id="parag">Para</p>
<button type="button" onclick="cambiaPárrafo()">Cambia Párrafo </button>
 </body>
</html>

Hemos añadido una sección a la etiqueta head que contiene nuestro código JavaScript con la función
changeParagraph. La función recupera todos los elementos con el id de parag de la página y cambia su texto. Esta
función se activa cuando se hace clic en el botón definido por la etiqueta <button>, para que el texto se cambie al
hacer clic en ese botón.
Guardamos el archivo con estos cambios y lo volvemos a abrir desde el navegador o, si ya está abierto, simplemente
vuelve a cargar la página para ver los nuevos elementos insertados.
Ahora vamos a tratar de mover el código JavaScript de la sección head a la sección del body. La página seguirá
funcionando como esperamos y mostrará los mismos elementos.

io
ti.
en
id
76
19
ko
Ya
by
Este es el aspecto de nuestro welcome.html ahora:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>

<h1>Encabezado principal</h1>
<p id="parag">Párrafo</p>
<button type="button" onclick="cambiaPárrafo()">Cambia párrafo</button>

<script>
function cambiaPárrafo () {
document.getElementById("parag").innerHTML = "Nuevo párrafo";
}
</script>
</body>
</html>

¿De acuerdo, pero si no hay diferencias en la apariencia y las características cuál debo usar? ¿Por qué poner el
código en una sección en lugar de en la otra?
Si deseas que un script se ejecute con eventos (como el clic del usuario), es mejor colocar las etiquetas <script>
</script> dentro de la sección head. Si el código JavaScript genera contenido visible, como un párrafo, una imagen u
otra cosa, es mejor insertarlo en la sección body.
Supongamos que tenemos un sitio lleno de elementos, probablemente usaremos un enfoque mixto o tendremos
etiquetas <script></script> en ambas secciones y tendremos que prestar atención a qué poner.
Colocar código al final de la sección body mejora la velocidad de visualización, ya que el código solo se evaluará
cuando ya se haya construido todo. Este enfoque, sin embargo, tiene un gran problema relacionado: el navegador no
puede iniciar otras descargas hasta que el documento se haya interpretado completamente.
Para evitar este problema, a menudo se utiliza otro método de inclusión de scripts, todo el código JavaScript se
coloca en uno o más archivos externos.

Fuera de una página HTML

Otro método de incluir un código JavaScript dentro de una página HTML es mediante la creación de un archivo .js,
que hace que la página descargue el archivo e interprete el código.
Ahora vamos a crear el archivo code.js que simplemente contendrá nuestra función de la siguiente manera:
function cambiaPárrafo() {
document.getElementById("parag").innerHTML = "Nuevo párrafo";
}

Ten en cuenta que el archivo code.js no debe contener ninguna etiqueta <script></script> de lo contrario el
intérprete no podrá continuar. Para simplificar, el archivo debe crearse en el mismo árbol que el archivo
welcome.html para que no se especifique toda la ruta de acceso.
Nuestra página HTML ahora tiene este aspecto:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>

<h1>Encabezado Principal</h1>
<p id="parag">Párrafo</p>
<button type="button" onclick="cambiaPárrafo()">Cambia párrafo</button>

<script src="codice.js"></script>
</body>
</html>

Una vez más la funcionalidad y el aspecto de la página no cambian, pero hemos utilizado un archivo externo que se
puede reutilizar para otras páginas. Esta técnica es generalizada y útil en sitios web donde algunas páginas
comparten elementos, componentes o estilos para dar coherencia al sitio en sí.
Esta técnica también tiene otras ventajas, ya que separa la capa lógica de la capa de presentación, hace que sea más
fácil de mantener y leer, y en última instancia aprovechando la caché de archivos JavaScript, puede acelerar la
visualización de páginas.
Al desarrollar sitios grandes es recomendable crear una carpeta que amenace todos los archivos JavaScript, por
ejemplo, he creado la carpeta denominada js que contiene mis archivos code.js.
De esta manera tengo que entrar en el camino de la siguiente manera:
<script src="/js/code.js"></script>

Consola del navegador (browser)

Hay una gran cantidad de IDE disponibles en línea y muy bien hechos como https://stackblitz.com/ y
https://jsfiddle.net/ que te permiten crear páginas web y obtener una vista previa de ellos en tiempo real, se pueden
utilizar en las propias consolas de tu navegadores para funciones cortas que no se transcriben a archivos localmente.
Personalmente a menudo uso esta técnica cuando quiero hacer pruebas directamente en la página, profundizaremos
este tema en la sección dedicada al debug de este e-book. Por ahora, es suficiente saber que cada navegador te
permite utilizar una consola para inspeccionar variables JavaScript, definir otras nuevas, etc.
Para el navegador Chrome, simplemente presiona la tecla F12 para abrir un panel que muestra la consola, en este
caso simplemente imprimimos un texto en la pantalla:

Incluso para el navegador Mozilla, simplemente presiona la tecla F12 para abrir el panel de desarrolladores donde
también se encuentra la consola JavaScript. En este caso definimos una variable a la que le dimos el valor de cadena
'Pippo':

Para todos los demás navegadores, así como para Chrome y Firefox, la clave para activar las características del
desarrollador es F12 y debe aparecer un panel similar a los mostrados.
Ahora que sabemos dónde poner el código que escribimos y cómo conseguir que se ejecute en nuestro PC vamos a
entrar en la definición de variables, funciones, eventos array y más.

Statement y variables
Las líneas de código que componen el código se denominan statement, por lo que es importante saber que JavaScript
no tiene que incluir punto y coma (;) para finalizar cada instrucción.
En cualquier caso, recomiendo usarlo siempre porque esto evita comportamientos no deseados, especialmente
cuando eres novato con el lenguaje y, te aseguro, te ahorrará mucho tiempo.
En JavaScript los comentarios se definen como en Java, por esto, pueden ser comentarios de una o varias líneas,
como de la siguiente manera:

// Este es un comentario de una sola línea

/* Comentario
línea
múltiples */
JavaScript tiene 5 tipos de datos primitivos:
1. Números
2. Cadenas
3. Boolean
4. Null
5. Undefined
También hay un tipo de datos complejos al cual se reconduce todo, los objetos. Prácticamente cualquier dato se
puede rastrear hasta un objeto, de hecho, las funciones, lo array e incluso los tipos de datos primitivos tienen objetos
correspondientes. Esto puede no parecer nuevo para aquellos que ya están familiarizados con Java.
Echemos un vistazo más de cerca a estos tipos de datos y comencemos nuestro excursus a partir de los números, es
muy simple y fácil recordar la definición de una variable en Javascript:
 // Definisco alcune variabili

var primo = 1;
var secondoNeg = -2;
var reducido a la mitad = 0.5;

Entre los números hay valores particulares como Infinity y -Infinity, estos valores se utilizan cuando se va más allá
del rango que comienza desde-1.79769*10308 y alcanza 1.79769*10308. Otro valor particular es NaN que se utiliza
cuando, por ejemplo, intentas ejecutar una división que tiene una cadena como dividendo y un valor numérico como
divisor.
'divideme' / 10
// -> NaN

Una cadena se puede declarar en este idioma con comillas simples o dobles:
 var línea1 = 'Prueba';
var línea2 = "Prueba";
Continuando con la creación de cadenas, podemos encontrar excepciones como:
var línea = 'L'Italia es bella’;
// -> VM19502:1 Uncaught SyntaxError: Unexpected identifier

Este error se debe a la falta de un carácter escape de hecho JavaScript cree que la cadena contiene sólo el carácter L,
pero al ir seguida de otros caracteres no se respeta la sintaxis, por lo que genera un error.
A continuación, corregimos el error introduciendo el carácter / antes del superíndice que genera el error:
var línea = 'Italia es bella';
// -> undefined

Como podemos ver la asignación no devolvió ningún error, pero devuelve undefined que es otro tipo de datos. Esto
indica, de hecho, un valor inexistente, que es indefinido y normalmente se asigna a variables sin ninguna
inicialización.
Otro tipo de datos particulares es null, porque solo el valor null indica que no se ha asignado ningún valor a una
variable, por ejemplo:
var sueldo = null;
Los dos últimos tipos de datos discutidos, undefined y null pueden parecer lo mismo, pero realmente no lo son.
Siempre se evalúan con el valor boolean false, pertenecen a la categoría de falsy value y, representan cosas
diferentes. El primero se utiliza para indicar una variable declarada pero indefinida, mientras que el segundo es un
valor asignado, es decir, nada.
El último tipo de datos es el tipo boolean, que solo tiene dos valores: true o false:
var luzEncendida;
uzEncendida = false;
luzEncendida = 0;
luzEncendida = 'apagada';
luzEncendida = null;

Como ya hemos discutido en los capítulos anteriores JavaScript tiene un tipo débil por lo que un código como el del
ejemplo será aceptado por el intérprete. Precisamente por esta razón se necesita más atención que en un lenguaje
fuertemente tipado, ya que no hay errores por parte del compilador que nos adviertan.
En cualquier momento, puedes comprobar el tipo de variable utilizando el operador type of:
typeof 'Pippo'
// -> "string"
typeof true
// -> "boolean"
typeof 12.6
// -> "number"

Array
Las Array son estructuras de datos que se utilizan ampliamente en la programación porque permiten agrupar
elementos que tienen afinidad entre sí. Una vez definidos los elementos que forman parte de él, puede acceder
directamente a cada elemento, y podemos utilizar esta estructura de datos para crear bucles como un bucle for que
imprime el nombre de cada mes del año:
const MESES_AÑO = [
'Enero',
'Febrero',
'Marzo',
'Abril',
 'Mayo',
'Junio',
'Julio',
'Agosto',
'Septiembre',
'Octubre',
'Noviembre',
'Diciembre'];
// -> undefined

// Selecciono el primer mes

MESES_AÑO[0]
// -> "Enero"

for (var i = 0; i < MESES_AÑO.length; i++) console.log(MESES_AÑO [i]);

// -> Enero
// -> Febrero
// -> Marzo
// -> Abril
// -> Mayo
// -> Junio
// -> Julio
// -> Agosto
// -> Septiembre
// -> Octubre
// -> Noviembre
// -> Diciembre
Como puedes ver la numeración del índice, como en Java, comienza desde cero por lo que la longitud de nuestro
array será 11.
Los array pueden ser homogéneos o heterogéneos, es decir, compuestas de elementos del mismo tipo o no, en este
caso nuestro array es de un tipo homogéneo porque todos los elementos que la componen son cadenas.
Un array heterogéneo contiene elementos de un tipo diferente, por ejemplo:
var array_heterogéneo = ["pippo", null, false, 12.6, 'paperino'];

Operadores y construcciones base

Consideremos una expresión como 7–4=3, en este caso 7 y 4 se denominan operandos, y el símbolo '-' se denomina
operador. En JavaScript, puedes utilizar diferentes tipos de operadores, empezando por operadores aritméticos,
operadores lógicos, asignación y operadores de condición, también denominados operadores ternarios.
Estos son los operadores aritméticos que también son los más fáciles de usar:
• + (Adición)
• - (Sustracción)
• * (Multiplicar)
• / (División)
• % (Formulario)
• ++ (Incremento)
• -- (Decremento)
Podemos probar estos operadores aritméticos dentro de nuestra consola del navegador como en los siguientes
ejemplos:
var a =22.5;
var b =10;
 console.log('Adición: ' + (a + b));
// -> Suma: 32.5

console.log('Diferencia: ' + (a - b));

// -> Diferencia: 12.5

console.log('Multiplicación: ' + (a * b));

// -> Multiplicación: 225

console.log('División: ' + (a / b));

// -> División: 2.25

console.log('Formulario: ' + (a % b));

// -> Formulario: 2.5

console.log('Incremento a = ' + ++a);

// -> Incremento a = 23.5

console.log('Decremento b = ' + --b);

// -> Decremento b = 9
Ten en cuenta que introdujimos los paréntesis para que la expresión interpretara correctamente, es decir, queríamos
imprimir en la pantalla una cadena que contenía el nombre de la operación seguida de los dos puntos y el valor de la
operación aritmética, en caso de que no tuviéramos los paréntesis tendríamos una cadena como:
var a = 22.5;
var b = 10;

console.log('Suma: ' + a + b);

// -> Suma: 22.510

También hay los llamados operadores de comparación que devuelven valores true o false en función del resultado de
la operación. Ahora veamos con ejemplos prácticos cómo se utilizan:
var a = 10;
var b = 8;

// Comparar la igualdad de valor

console.log(a == b);
// -> false

// Comparar valor e igualdad de tipos

console.log(a ==="10");
// -> false

console.log(a ===10);
// ->true

// Comparar la desigualdad de valores

console.log(a != b);
// ->true

// Comparar si el valor de la izquierda es mayor que el valor de la derecha

console.log(a > b);
// ->true

// Compara si el valor de la izquierda es mayor o igual que el valor de la derecha

console.log(a >= b);
// ->true

// Comparar si el valor de la izquierda es menor que el valor de la derecha

console.log(a < b);
// -> false

// Compara si el valor de la izquierda es menor o igual que el valor correcto

console.log(a <= b);
// -> false
La última categoría de operadores que vamos a describir ahora son los operadores lógicos, que son esos elementos
que conectan dos proposiciones en el álgebra de Boole:
• El operador lógico AND(símbolo &&)
• El operador lógico OR (símbolo ||)
• El operador lógico NOT (símbolo !)
El operador AND comprueba que ambos valores a su izquierda y derecha contienen un valor válido que no es 0,
false, undefined, null o cadena vacía.
El operador OR se asegura de que al menos uno de los dos operadores contenga un valor válido, mientras que el
operador NOT deniega una condición.
var a = true;
var b = false;

console.log(a && b);

// -> false

console.log(a || b);

io
// ->true

ti.
console.log(!b);
// ->true

en
Ahora que sabemos cómo comparar valores y cómo realizar algunas operaciones simples vamos a crear un flujo de
control o empezar a agregar lógica más compleja a nuestros programas con el fin de hacerlos más completos y
funcionales.
Hay diferentes tipos de gestión de flujo, y probablemente si tienes que utilizar otros lenguajes de programación, ya
id
sabes algo al respecto. Las construcciones que abordamos nos permitirán realizar acciones basadas en ciertas
decisiones, realizar una serie de acciones siempre que se produzca una condición de salida o controlar las
76
excepciones que puedan producirse.
Piensa en una función JavaScript que asigne una etiqueta a la edad de una persona, en particular queremos que
devuelva 'Twenty' si la edad varía de 20 a 29 años, 'Thirty' si varía de 30 a 39, 'Fourty' si varía de 40 a 49 y así
sucesivamente.
19

La función podría implementarse de la siguiente manera:

function etiquetaEdad(edad){
ko

if(eta>=20 && edad<30){

console.log('Twenty');
}
else if(edad>=30 && edad<40){
Ya

console.log('Thirty');
}
else if(edad>=40 && edad<50){
console.log('Fourty');
by

}
else if(edad>=50 && edad<60){
console.log('Fifty');
}
}

etiquetaEdad(25);
// -> Twenty

etiquetaEdad(58);
// -> Fifty
Como se puede ver la implementación es muy simple y clara, se puede insertar sólo un if sin un bloque else, un
bloque if...else, o un bloque if seguido de tantos else como en este caso.
Esta implementación es bastante simple y fácil de leer, pero sabes que también puedes utilizar un switch.
El Switch utiliza la palabra clave case para encontrar el bloque correcto a ejecutar, por default, para encontrar el
bloque para ejecutar cuando no se ha cumplido ninguna condición, y finalmente break que termina el bloque actual y
sale de la función.
El modificador hace que el código sea más legible cuando nos enfrentamos a varios if en cascada.
Vamos a reescribir la función anterior con un switch:
function etiquetaEdad(edad){
switch(edad){
case20:
case21:
case22:
case23:
case24:
case25:
case26:
case27:
case28:
case29:
console.log('Twenty');
break;
case30:
case31:
case32:
case33:
case34:
case35:
case36:
case37:
case38:
case39:
console.log('Thirty');
break;
.....
default:
console.log('No clasificado');
}
}

etiquetaEdad(25);
// -> Twenty

etiquetaEdad(58);
// -> Fifty
Como podemos ver esto no es tan fácil de leer como el ejemplo anterior, pero en algunos casos, especialmente
cuando hay pocos elementos, puedes usarlo para mejorar el código.
En este caso también tenemos una comprobación adicional, es decir, en el bloque default especificamos que, si la
edad que se da en la entrada a la función no es prevista, en cualquier caso, se imprimirá el mensaje no clasificado.
Otro bloque que se utiliza normalmente en lenguajes de programación es el for que indica que se ejecuta un bloque
de instrucciones un cierto número de veces. Un bucle for funciona bien cuando se compone de una condición de
inicialización, una condición de salida y una condición de cambio (normalmente un incremento de un contador).
Es importante definir correctamente la condición de evaluación y modificación porque si no se produce una
condición de salida, se puede ejecutar indefinidamente.
La implementación clásica de un bucle de este tipo es que una variable se inicializa en 0 y cada vez que se ejecuta el
bloque, se incrementa para alcanzar la condición de salida.
for(i =0; i <5; i++){
console.log("El número es: " + i);
}

// -> El número es: 0

 // -> El número es: 1
// -> El número es: 2
// -> El número es: 3
// -> El número es: 4

El bucle recién definido inicializa la variable i a 0 y comienza a ejecutar el bloque que, cuando haya terminado,
comprueba si la variable es menor que 5. Si se ejecuta la condición de cambio, se incrementa el valor de i. Esto
continúa hasta que el valor de i es 4 porque después de ejecutar el bloque, el valor que ahora es 5 se incrementa de
nuevo, que ya no respeta la condición del bucle.
También podemos usar un bucle de este tipo para examinar todos los elementos de un array, en el siguiente ejemplo
agregaremos if a las condiciones dentro del bucle. En particular, queremos imprimir todas las marcas de coches que
comienzan con la letra 'A'.
 var marcas =["Alfa Romeo","BMW","Audi","Fiat","Nissan","Ford"];
for(marca of marcas){
if(marca.substring(0,1) == 'A'){
console.log(marca);
}
}

// -> Alfa Romeo

// -> Audi

En este ejemplo, usamos un método que JavaScript proporciona para todas las cadenas y que devuelve una
subcadena definida entre los índices especificados. En particular, el primero es el índice inicial 0 que representa el
primer carácter de la cadena, y 1 que representa el índice final.
Las dos últimas construcciones sobre los ciclos son muy simples y son el while y el do...while. Ambos se basan en el
mismo principio, es decir, se ejecutará un bloque de instrucciones hasta que se verifique la condición.
Ahora replicaremos el bucle for creado en el ejemplo anterior, pero usando un bucle while:
var i =0;
while(i <5){
console.log("El número es: "+ i);
i++;
}

// -> El número es: 0

// -> El número es: 1
// -> El número es: 2
// -> El número es: 3
// -> El número es: 4

Como puedes ver el resultado es el mismo, pero la forma es diferente, es probablemente más compacto y más fácil
de leer. La variable i se inicializa con el valor 0, y hasta que el valor es 5 el valor actual se imprime en la consola,
tan pronto como el valor es 5 se sale del bucle.
Al utilizar bucles, presta especial atención a la condición de salida, si deseas experimentar un bucle infinito, sólo
necesitas eliminar la cuarta línea donde está el incremento de la variable. La eliminación de esta línea nunca
incrementará el valor, por lo que siempre será 0, y ese bloque de código se ejecutará muchas veces consecutivas.
Esto llevará tu PC a un esfuerzo considerable y probablemente tendrás que cerrar por la fuerza tu navegador.
El ciclo do...while que es una variante de la que acabas de utilizar, y las instrucciones en el bloque delimitado por
palabras clave se ejecutan hasta que se comprueba la condición.
Vamos a reescribir el bucle anterior con esta construcción:
var i =0;

do{
console.log("El número es: "+ i);
i++;
}
while(i <5)

La última construcción que veremos en esta sección nos permite controlar excepciones como la lectura de un
archivo, un método indefinido, un problema de red y muchas otras posibles excepciones.
El manejo de errores a menudo se pasa por alto, pero es un aspecto fundamental de la programación porque, cuando
es posible, permite a la aplicación seguir ejecutándose e informar al usuario del problema.
Las excepciones son errores que produce el intérprete en tiempo de ejecución y que capturan los bloques try...catch.
La operación es muy simple, hay dos bloques de código: el try donde vamos a escribir el código que puede generar
errores y el bloque catch donde se manejarán los errores si se producen. Si no se produce ningún error mientras se
ejecuta el primer bloque, se omitirá el segundo bloque. Si se producen errores dentro del primer bloque, las líneas de
código restantes del primer bloque no se ejecutarán y se ejecutará el segundo bloque (catch).
En el ejemplo siguiente, crearemos un bloque try... catch que controlará un método indefinido como una excepción.
 try{
console.log(‘Invoco un método indefinido’);
metodo_inesistente();
}catch(err){
alert('¡Se ha producido una excepción!');
}

// -> Invoco un método indefinido

En este caso, invocamos un método que no se ha definido para que el intérprete produzca una excepción que vamos
a capturar con un mensaje que informa al usuario. Este cuadro de advertencia contiene solo un botón que confirma
que su lectura.
También es posible utilizar la variable err (de la que podemos cambiar el nombre) para realizar una inspección del
objeto de error obteniendo información sobre el tipo y lo que lo causó.
JavaScript ofrece el objeto del error con propiedades:
• Nombre del error (en nuestro caso ReferenceError)
• Mensaje de error (en nuestro caso method_non-existent () is not defined)
• Stack de llamadas que llevaron al error
También es posible anidar el control de errores, es decir, pueden producirse excepciones mientras se controla una
excepción, son casos especiales, pero para darte una idea proponemos el siguiente ejemplo:
try{
try{
method_non-existent();
}
catch(err){
console.error(err.message);
}
}
catch(err){
console.error(err.message);
}

// -> method_non-existent is not defined

En este caso, las instrucciones se ejecutan primero en el primer try, luego ingresamos el segundo try y lanzamos una
excepción que se controla mediante el primer bloque catch.
Te sugiero que utilices el switch que hemos visto antes dentro de un bloque catch para que puedas manejar cada
excepción con un error personalizado que pueda ayudarte aún más. Incluso puedes crear una función común para
llamar cuando se produce una excepción (veremos cómo en la siguiente sección).
try{
// Instrucciones para ejecutar
}
catch(ex){
switch(ex.name){
case "TypeError":
console.log("Usar el tipo de datos correctos");
break;
case "ReferenceError":
console.log("Variable o función no definida");
break;
case "SyntaxError":
console.log("Hay algún carácter no válido");
break;
...
}
}
Como puedes ver en el control de excepciones, se utilizó un nuevo método de consola: el método de error.
Este método se utiliza a menudo para resaltar los errores que se escriben en la consola tanto que, como todos los
errores, tienen el color rojo.
Hay otros métodos de consola para imprimir mensajes y varían en función de la gravedad de lo que deseas escribir.
Los métodos son log() para la salida general, info() que imprime mensajes de información, warn() para mensajes que
requieren atención especial y error() que ya hemos tenido manera de ver.
Ahora que sabemos cómo utilizar operadores, almacenar variables, administrar el flujo y las excepciones de nuestro
código, estamos listos para abordar específicamente las funciones en JavaScript y cómo se utilizan.

Funciones
Las funciones en JavaScript consisten en un nombre que se utiliza para utilizarlas, por lo que primero es esencial
definir una función y luego poder utilizarla. La definición informa al intérprete sobre cuál es la tarea, la invocación
se utiliza para permitir que la función realice la tarea.
Como vimos en las definiciones de los ejemplos anteriores, la declaración comienza con la palabra clave function
seguida del nombre que queremos dar a la función, siguiendo los paréntesis redondos que encierran los argumentos
de la función. Sin embargo, en llaves, la tarea que debe realizar la función es explícita.
Las funciones pueden tener un valor para devolver o no, una función que introduce un mensaje y lo imprime en la
consola no necesita devolver nada, mientras que una función que suma números debe devolver un valor.
Las funciones pueden devolver un valor mediante la palabra clave return, piensa en una función que suma todos los
números de un array:
 function sumaTodos(array){
var resultado =0;
for(numero of array){
resultado = resultado + numero;
}

return resultado;
}

var numeros = [1,7,8,10,-15,5,-20];

sumaTodos(numeros);

// -> -4

También podemos crear funciones a las que no sabemos exactamente cuántos parámetros pasar, podemos pasar un
número indefinido gracias al array arguments. De esta manera podríamos crear una función que suma todos los
valores que pasamos como argumentos sin tener o crear necesariamente un array para usar la función sumAll.
Las funciones JavaScript, como todo lo demás, se pueden rastrear hasta objetos, por lo que son realmente versátiles.
Esta peculiaridad te permite pasar una función como argumento a otra función. La función que recibe la entrada de
otra función también se denomina orden superior.
Las funciones que se pasan como parámetro de entrada también se denominan callback, que es uno de los conceptos
básicos de este lenguaje y en la programación funcional general.
Tomemos un ejemplo práctico: imaginemos que tenemos que mostrar la calificación de un examen de nuestro
estudiante, pero por supuesto para mostrar la calificación debe haber tomado primero un examen. Vamos a definir
una función que describe este escenario:
 var hacer_examen = function(){...}
var muestra_ calificación = function(callback);

// pasamos muestra_calificación como parámetro de hacer el examen

muestra_calificación(hacer_examen);

En este caso definimos explícitamente una función que hace esto, pero esta función podría no tener un nombre por
lo que sería una función anónima llamada:
var muestra_calificación = function(callback){...};
muestra_calificación(function(){...});

¿Cómo sabemos cuándo el estudiante tomó el examen y luego mostrar la calificación, es decir, quién nos informa
que la primera función ha terminado la ejecución?
Cuando pasamos una función en la entrada, podemos especificar cuándo queremos ejecutarla. En los siguientes
ejemplos haremos una solicitud HTTP a nuestro servidor para obtener esta información:
// en este ejemplo hacemos una solicitud GET a nuestro servidor y ejecutamos nuestro callback cuando
recibimos la respuesta
var hacer_examen = function(callback){
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// Cuando recibimos una respuesta
callback(xmlHttp.responseText);
}
}
// true para la llamada asincrónica
xmlHttp.open("GET", "www.mioserver.com", true);
xmlHttp.send(null);
}

var muestra_calificación = function(examen){

console.log(examen_calificación);
}

muestra_calificación(hacer_examen);
Veamos cómo se ve el mismo programa usando una función anónima:
// en este ejemplo hacemos una solicitud GET a nuestro servidor y ejecutamos nuestro callback cuando
recibimos la respuesta
var hacer_examen = function(callback){
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// cuando recibimos una respuesta
callback(xmlHttp.responseText);
}
}
// true para la llamada asincrónica
xmlHttp.open("GET", "www.mioserver.com", true);
xmlHttp.send(null);
}

muestra_calificación(function(examen){
console.log(examen.calificación);
});

En este ejemplo, usamos invocaciones asincrónicas que representan la esencia de la programación de eventos, en
este caso cuando se desencadena el evento (se realiza un examen) se desencadena la función para mostrar la
calificación del examen.
En el siguiente párrafo profundizaremos los objetos en JavaScript, lo que son y por qué son realmente importantes y
centrales para la naturaleza del lenguaje.
Objetos
La centralidad de los objetos en JavaScript se puede entender completamente si pensamos que cualquier cosa que no
sea un tipo de datos primitivo es un objeto. Un objeto es un tipo de contenedor formado por valores que también
pueden ser de una naturaleza diferente entre sí, pero combinado crear una estructura de datos única.
En lenguajes de programación orientados a objetos, un objeto representa una entidad, por ejemplo, un alumno que
imaginamos tiene al menos dos propiedades de cadena: nombre y apellido, y una propiedad numérica que indica la
edad. Un estudiante también puede tener características como estudiar, escribir, aprender.
A partir de este ejemplo, podemos deducir que cada objeto tiene propiedades y métodos, y las propiedades también
pueden ser otros objetos, no necesariamente datos primitivos.
 var estudiante = {
nombre:"Filippo",
apellido:"Bianchi",
dirección:{
calle:"Via Principale",
numero:15,
código postal:"00100",
ciudad:"Roma"
}
};

También tenemos otra forma de definir un objeto: a través de un constructor. Un constructor no es más que una
función que nos permite definir objetos con propiedades bien definidas.

io
ti.
en
id
76
19
ko
Ya
by
Podríamos crear un constructor para nuestro objeto estudiante:
function Estudiante(nombre, apellido, calle, número, CAP, códigopostal) {
this.nombre = nombre;
this.apellido = apellido;
this.dirección = {};
this.dirección.calle = calle;
this.dirección.número = número;
this.dirección.códigopostal = códigopostal;
this.dirección.ciudad = ciudad;
}

var Estudiante2 = new Estudiante('Antonio','Rossi','calle Trento', 1, 20100, 'Milano');

Tomemos esta definición para siempre ignorando el significado de la palabra clave this que explicaremos en breve.
Los constructores se utilizan ampliamente porque permiten centrar la lógica en un solo lugar, en lugar de crear toda
la estructura del objeto con cada nueva instancia.
En el ejemplo anterior, también vimos cómo se crea una nueva instancia del objeto o cómo podemos crear un nuevo
alumno mediante el uso del constructor.
Podemos acceder a los valores de un objeto a través de un enfoque de notación de puntos, por lo que solo
necesitamos separar el objeto con un punto de la propiedad que queremos recuperar para obtener su valor.
Si quisiéramos encontrar el valor que le dimos a la propiedad apellido de la variable estudiante:
estudiante.apellido

// -> "Bianchi"

Introducimos una nueva propiedad al objeto recién definido, queremos introducir el promedio de los exámenes
realizados y para Felipe el promedio es de 27,5. Este enfoque también se denomina definición incremental, es decir,
agregamos propiedades que no teníamos en cuenta al definir el objeto.
estudiante.media-exàmenes =27.5

// -> UncaughtReferenceError: Invalid left-hand side in assignment

El intérprete rechazó esta instrucción, ¿crees que el error es el punto y coma que falta al final de la cadena?
El problema no está en la terminación de cadena, ya que el punto y coma es opcional, pero se recomienda
encarecidamente.
El problema radica en el nombre de la propiedad, de hecho, media-exámenes se enfrenta con los límites del dot
notation, para solucionar este problema podríamos definir la variable con un nombre diferente o utilizar otro enfoque
para definir usando los corchetes.
estudiante["media-exámenes"]=27.5;

// -> 27.5

Esta instrucción es válida para el intérprete porque entiende que la cadena dentro de los paréntesis será el nombre de
propiedad del objeto de alumno.
Las acciones que un objeto puede realizar son métodos o funciones. Suponemos que tenemos que construir una
página web que enumera todos los estudiantes de la universidad con su nombre, apellido y media de los exámenes.
Una función para el objeto estudiante que devuelve los datos solicitados puede ser útil:

estudiante.info = function(){
return this.nombre + " " + this.apellido + " " + this["media-examenes"];
}

De esta manera hemos declarado una función, así como la escritura, el estudio o el aprendizaje.
Imaginemos que cada estudiante dice su nombre, apellido y media de exámenes. Como aprendimos antes, solo
definimos la función, pero no la invocamos también, ya que habrás notado que usamos la palabra clave this que
indica el objeto al que se hace referencia. Al cambiar las propiedades del objeto, se recuperará la información
actualizada:
estudiante.info();
 // -> "Filippo Bianchi 27.5"

estudiante.nombre='Antonio';
estudiante['media-exámenes'] = 29;
estudiante.info();

// -> "Antonio Bianchi 29"

Clases
Otra pieza que necesitamos añadir a nuestro código JavaScript son las clases ya que ya sabemos cómo funciona un
constructor. Una clase JavasSript es una nueva forma de escribir funciones constructoras utilizando las propiedades
de los prototipos de función.
¿Qué es un prototipo de una función? Cada vez que se define una función en JavaScript, el intérprete le agrega la
propiedad prototype y todos los objetos heredan propiedades y métodos de prototype.
Así que vamos a crear nuestra clase Estudiante, es posible que hayas notado que usé la letra mayúscula para la
inicial del nombre de la clase, esta es una convención que debe mantenerse.
class Estudiante {
constructor(nombre, apellido, calle, número, códigopostal, ciudad) {
this.nombre = nombre;
this.apellido = apellido;
this.dirección = {};
this.dirección.calle = calle;
this.dirección.numero = número;
this.dirección.códigopostal = códigopostal;
this.dirección.ciudad = ciudad;
}

info() {
return this.nombre + " " + this.apellido + " " + this["media-examenes"];
}
}

Desde la clase recién creada se puede ver que básicamente una clase es una manera de agrupar un constructor con
propiedades y métodos de la clase, combinamos el constructor y el método info() creados anteriormente. De esta
manera, podemos crear muchas instancias de la misma clase sin redefinir la estructura ya que IDE e incluso las
consolas del navegador proporcionan como una sugerencia el nombre de los parámetros a pasar. Ahora veamos
cómo crear instancias de un objeto de la clase:
var Estudiante2 = new Estudiante('Antonio','Rossi','calle Trento', 1, 20100, 'Milano');

La creación de un objeto de la clase declarada es idéntica a la del constructor, pero lo que cambia de la definición
del constructor por sí solo, es que ahora podemos invocar el método info() para la variable estudiante2.
Esto muestra que el concepto de clase y constructor están muy cerca el uno del otro en JavaScript, pero hay algunas
cosas a considerar:
1. el constructor requiere la palabra clave new, para la clase no es necesario
2. si no agregamos un constructor a una clase, se agregará un constructor en blanco por default
3. las declaraciones de clase, a diferencia de los constructores, no se mueven automáticamente a la parte superior de
todas las instrucciones, por lo que el código siguiente funciona:

var estudiante2 = new Estudiante('Antonio','Rossi','calle Trento', 1, 20100, 'Milano');

function Estudiante(nombre, apellido, calle, número, códigopostal, ciudad) {

 this.nombre = nombre;
this.apellido = apellido;
this.dirección = {};
this.dirección.calle = calle;
this.dirección.número = número;
this.dirección.códigopostal =códigopostal;
this.dirección.ciudad = ciudad;
}

Aunque el código siguiente devolverá un ReferenceError:

var estudiante2 = new Estudiante('Antonio','Rossi','calle Trento', 1, 20100, 'Milano');

class Estudiante {
constructor(nombre, apellido, calle, número, códigopostal, ciudad) {
this.nombre = nombre;
this.apellido = apellido;
this.dirección = {};
this.dirección.calle = calle;
this.dirección.número = número;
this.dirección.códigopostal =códigopostal;
this.dirección.ciudad = ciudad;
}

info() {
return this.nombre + " " + this.apellido + " " + this["media-examenes"];
}
}

// -> VM84:1 Uncaught ReferenceError: Studente is not defined at <anonymous>:1:17

Ten en cuenta que cada clase puede tener solo un constructor como máximo, y si una clase extiende a otra clase, el
constructor de la clase secundaria puede invocar la clase primaria mediante la palabra clave super, pero esto lo
profundizaremos más adelante.
Las clases pueden tener los llamados métodos estáticos. Vamos a hacernos esta pregunta cuando definimos un
método: ¿tiene sentido invocarlo incluso si el objeto aún no se ha construido? Si la respuesta es sí, el método que
estamos definiendo debe tener la palabra clave static de la siguiente manera:
class Estudiante {
constructor(nombre, apellido, calle, número, códigopostal, ciudad) {
this.nombre = nombre;
this.apellido = apellido;
this.dirección = {};
this.dirección.calle = calle;
this.dirección.número = número;
this.dirección.códigopostal =códigopostal;
this.dirección.ciudad = ciudad;
}

info() {
return this.nombre + " " + this.apellido + " " + this["media-examenes"];
}

static saludaProf() {
return 'Buenos días profesor';
}
}
 Estudiante.saludaProf();

// -> "Buenos días profesor"

Como podemos ver, hemos definido un método para cada estudiante que se sirve para saludar al profesor a su
llegada. Este método será el mismo para todos los alumnos, por lo que se puede utilizar sin crear una instancia de la
clase, tal como se muestra en el ejemplo.
86
Una clase también puede tener métodos para recuperar o establecer valores de propiedad, estos métodos se
denominan getter e setter (captadores y establecedores) respectivamente.
A continuación, hemos creado estos métodos para recuperar y establecer el valor de la propiedad ciudad dentro de la
dirección:
class Estudiante {
constructor(nombre, apellido, calle, número, códigopostal, ciudad) {
this.nombre = nombre;
this.apellido = apellido;
this.dirección = {};
this.dirección.calle = calle;
this.dirección.número = número;
this.dirección.códigopostal =códigopostal;
this.dirección.ciudad = ciudad;
}

info() {
return this.nombre + " " + this.apellido + " " + this["media-examenes"];
}

static saludaProf() {
return 'Buenos días profesor';
}

get ciudad() {
if (this.dirección) return this.dirección.ciudad;
else return null;
}

set ciudad(valor) {
if (valor.length < 2) {
alert("El nombre que ha introducido es demasiado corto!");
return;
}

if (this.dirección) {
this.dirección.ciudad = valor;
} else {
alert("Dirección no definida!");
}
}
}

var estudiante = new Estudiante('Antonio','Rossi','calle Trento', 1, 20100, 'Milano');

estudiante.ciudad;

// -> "Milano"

estudiante.ciudad = 'Bergamo';
 estudiante.ciudad;

// -> "Bergamo"

En JavaScript puedes extender una clase, de hecho, podríamos pensar que nuestra clase Estudiante extiende la clase
Persona. En el ejemplo siguiente declaramos estas dos clases y para cada una declaramos algunos métodos:
class Persona {
saluda() {
alert('Hola!');
}

camina() {
alert('Estoy caminando!');
}
}

class Estudiante extends Persona {

saluda() {
alert('Hola amigo!');
}

estudia() {
alert('Estoy estudiando!');
}
}

var persona = new Persona();

persona.saluda();
// -> "Hola!"

var estudiante = new Estudiante();

estudiante.saluda();
// -> "Hola amigo!"

estudiante.estudia();
// -> "Estoy estudiando!"

estudiante.camina();
// -> "Estoy caminando!"

persona.estudia();
// -> Uncaught TypeError: persona.estudia is not a function
En el ejemplo, puedes ver cómo los métodos de la clase estudiante secundaria sobrescriben los métodos de la clase
Persona, por lo que el método saluda()devuelve un mensaje diferente. El método camina() incluso si no se ha
definido en la clase Estudiante se ejecuta habiendo sido definido en la clase primaria Persona.
El método estudia(),por otro lado, es el mismo que la clase Estudiante, por lo que si se invoca en una variable de tipo
Persona, devolverá el error descrito. Como puedes ver, el intérprete de JavaScript devuelve errores que "hablan", lo
que facilita la reordenación del problema, como en este caso.
Es posible que necesitemos comprobar cuál es la clase de una instancia y podemos hacerlo usando el operador
instanceof. Este operador devuelve true si el operando a su izquierda es una instancia del operando a su derecha.
 persona instanceof Estudiante
// -> false

estudiante instanceof Estudiante

// -> true

estudiante instanceof Persona

// -> true
En este caso hemos llevado a cabo algunas pruebas interesantes, de hecho, Persona no es una instancia de la clase
Estudiante, por lo que el operador devuelve false, estudiante es obviamente una instancia de la clase Estudiante
porque lo creamos a través de su constructor.
El último caso es el más interesante ya que la variable estudiante resulta ser una instancia de la clase Persona ya que
las clases están relacionadas entre sí y, en particular, Estudiante hereda de Persona.
El operador instanceof también se puede utilizar en tipos primitivos de hecho:
var fruta = new String("piña");
fruta instanceof String;
// -> true

// ahora no especifico ningún tipo

var fruta = "manzana";
fruta2 instanceof String;
// -> false
// frutto2 no es un objeto String

var número = 12.3;

número instanceof Número;
// -> false

var número = new Número(12.3);

número instanceof Número;
// -> true
Tanto las clases como los constructores imitan un modelo de herencia orientado a objetos en JavaScript, que es un
lenguaje de herencia basado en prototipos, como hemos visto.
Comprender la herencia es fundamental para ser un buen desarrollador de JavaScript, y estar familiarizado con las
clases es extremadamente útil, incluso cuando se tratan de usar framework basados en JavaScript.
DOM
¿Qué es?
Al abrir una página web en el explorador, esta recupera el texto HTML de la página y lo analiza, o crea una plantilla
de la estructura del documento que utiliza para dibujar la página en la pantalla. Esta representación es una estructura
de datos que puedes leer o editar en tiempo real: al editar la página en la pantalla, se actualiza para reflejar los
cambios.
DOM significa Document Object Model y representa una propiedad que hemos considerado poco hasta ahora, pero
que merece más investigación. El DOM indica el documento HTML que se carga en la ventana del explorador y
proporciona la estructura del documento en una vista jerárquica también denominada árbol DOM.
Por lo tanto, el DOM se compone de nodos y cada nodo puede hacer referencia a otros nodos o elementos
secundarios, que a su vez pueden tener otros elementos secundarios. Se trata de estructuras anidadas donde los
elementos pueden contener subalgos que son similares a sí mismos. La estructura de datos de árbol es ampliamente
utilizada en la informática porque, además de representar estructuras recursivas como documentos HTML o
programas, son útiles para mantener los conjuntos de datos ordenados por lectura y entrada de datos rápida y
eficientemente.
Un árbol típico tiene diferentes tipos de nodos como es en el DOM, que puede contener varias etiquetas HTML, que,
a su vez, pueden tener elementos secundarios o no, son los llamados nodos hoja.
Cada NODO del DOM contiene una referencia a los nodos vecinos, de hecho, cada nodo tiene una propiedad
parentNode que hace referencia a su elemento primario, si existe. Si el elemento primario no está presente, el nodo
en cuestión se denomina raíz.
Tomamos nuestra página welcome.html y después de iniciarla en el navegador examinamos su apariencia haciendo
clic con el botón derecho -> Inspeccionar.
El código HTML de la página que examinaremos es:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>

<body>
<h1>Encabezado principal</h1>
<p id="parag">Párrafo</p>
<button type="button" onclick="cambiaParagrafo()">Cambia párrafo</button>

<script src="codice.js"></script>
</body>
</html>
:

Utilizar los elementos

El DOM es fundamental porque nos permite modificar elementos de la página utilizando código JavaScript. Hay
varios métodos para recuperar elementos y podemos hacer esto principalmente a través de id o tag (etiqueta).

var p = document.getElementById("parag");

Este método, uno de los más utilizados para el control DOM, devuelve un objeto que representa el nodo de tipo de
elemento que tiene el atributo id con el valor especificado. Si hay varios elementos con el mismo id, devuelve el
primer detectado, si no existe, devuelve null.
Un método similar es getElementsByName que recupera una lista de nodos de página cuyo valor de atributo name
coincide con el del parámetro.
La diferencia entre los dos es que el segundo devuelve una lista de nodos, mientras que el primero siempre devuelve
solo un elemento, si existe.
Otra forma de recuperar elementos es a través de su etiqueta:
var listapárrafos = document.getElementByTagName("p");

De esta manera vamos a recuperar una lista de nodos del tipo de párrafo, especificando el parámetro devolverá la
lista que contiene todos los nodos que crean la página.
Estos métodos son para el acceso directo a los nodos que deseas recuperar, pero recuerda que también puedes
navegar a través de su vínculo primario-secundario a través de la parentNode propiedad. Además de esta propiedad,
hay firstChild, qye señala al primer hijo de un elemento, así como lastChild propiedad que punta al último método,
especialmente útil cuando tienes una lista de elementos. En las listas de elementos podría ser útil tener acceso a un
elemento adyacente, para este JavaScript que nos ofrece los métodos previousSibling y nextSibling, respectivamente
para el nodo antes o después.
Pongamos en práctica lo que hemos visto hasta ahora:
var párrafo = document.getElementById("parag");
párrafo.parentNode

// -> <body>
<h1>Encabezado principal</h1>
<p id="parag">Párrafo</p>
<button type="button" onclick="cambiaParagrafo()">Cambia párrafo</button>
<script src="codice.js"></script>
</body>

Vamos a tratar de explorar el parentNode de la variable de párrafo:

párrafo.parentNode.children

// -> HTMLCollection(4) [h1, p#parag, button, script, parag: p#parag]

Devuelve una colección de elementos HTML que representan las etiquetas contenidas en el body de la página o el
contenido visible de nuestra página.
La sintaxis es fácil de recordar y "hablar" por lo que los nombres de los métodos son familiares especialmente para
aquellos que escriben su propio código en inglés:
párrafo.parentNode.parentNode.firstChild

// -> <head><title> Título de la página </title></head>

¿Puedo cambiar el estilo de un elemento usando JavaScript? Por supuesto, aunque se recomienda, siempre que sea
posible, utilizar las propiedades CSS para mantener la separación de roles.
Ahora vamos a crear un efecto con JavaScript que nos permitirá aprovechar al máximo lo que hemos aprendido.
Vamos a definir una página web que consta de un solo div:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>

<body>
<div id="movimiento"></div>
<script src="codice.js"></script>
</body>
</html>

Ahora usamos JavaScript para crear dinamismo dentro de la página, especialmente veremos texto en movimiento en
la sección que acabas de crear.
El archivo code.js útil para el funcionamiento del código será:
var texto = " Hola, estoy empezando a usar JavaScript y es genial";
var str = texto.split("");
var el = document.getElementById('movimiento');
(function animación() {
if (str.length > 0) {
el.innerHTML = el.innerHTML + str.shift();
}
else {
clearTimeout(running);
}
var running = setTimeout(animación, 100);
})();

Después de copiar este código, vuelve a cargar la página y verás un efecto muy agradable, puedes cambiar la

io
velocidad del efecto "máquina de escribir" cambiando el parámetro 100 del setTimeout.
Ahora voy a explicar lo que hemos hecho para lograr este efecto lindo:
1. Vamos a definir el texto que se va a escribir.

ti.
2. El método split() divide cada cadena en una letra y la inserta en un array, también podríamos usar el método
substring() y luego poner todo en un array-

en
3. Recuperamos del document el nodo con id igual al movimiento.
4. Definimos la función de animación que evalúa la longitud del array str, si es mayor que 0, entonces imprime el
elemento en la página y lo elimina del array. Si el array tiene un tamaño 0, se cancela el tiempo de espera que invoca
la función de repetición.
id
5. Llamamos a un tiempo de espera que cada 100 milisegundos invocn la función de animación.
76
19

Conclusiones
Hemos visto que JavaScript es un lenguaje con gran potencial y es útil para editar prácticamente todo, desde la
ko

estructura hasta el contenido y la interacción del usuario. Si antes de este lenguaje se pudiera considerar un opcional
para embellecer nuestras páginas ahora, resulta ser una necesidad para nuestras páginas. En este punto de nuestro
libro de JavaScript, esperamos que estés familiarizado con el lenguaje, y esperamos que no hayas encontrado
Ya

grandes dificultades. La sintaxis es bastante simple de entender y es "hablar". Sigue practicando y con experiencia
podrás construir páginas web más complejas de las que hemos propuesto.
Desde 2006, desde jQuery, este lenguaje se ha propagado como la pólvora tanto, que es ampliamente utilizado tanto
en clientes como en servidores, y se espera que los estándares ECMAScript se propaguen aún más rápidamente en
by

los próximos años. En vista de todo esto te recomiendo que continúes programando en JavaScript porque además de
ser un lenguaje interesante, realmente parece ser el lenguaje del futuro cercano.