Lenguaje de Programación Frontend

JavaScript 2021
Desde Cero
Tiago Nahuel Pujia

Manual de JavaScript. Adéntrate en el lenguaje de

programación rey de la web y conoce todas las
características de la programación del lado del cliente.

Javascript es el lenguaje de programación usado para

 Contenido
1. Conocimientos Básicos .................................................................................. 7
1.1. Fundamentos ........................................................................................... 7
1.1.1. ¿Qué es JavaScript? ............................................................................................. 7
1.1.2. Historia ..................................................................................................................... 9
1.1.3. Requerimientos Básicos ................................................................................... 12
1.1.4. Sintaxis ................................................................................................................... 13

1.2. ¿Como Funciona JavaScript? ................................................................15

1.2.1. Área de Trabajo................................................................................................... 15
1.2.2. Consola en el Navegador ................................................................................ 16
1.2.3. Depuración ........................................................................................................... 16
1.2.4. Variables y Constantes ..................................................................................... 17
1.2.5. Tipos de Datos .................................................................................................... 18
1.2.6. Operadores ........................................................................................................... 20
1.2.7. Números ................................................................................................................ 24
1.2.8. Strings .................................................................................................................... 30
1.2.9. Alertas e Ingreso de Datos ............................................................................. 36

1.3. Estructura de Control (algoritmo) .......................................................38

1.3.1. Condicionales ...................................................................................................... 39
1.3.2. Switch ..................................................................................................................... 43
1.3.3. Ciclos....................................................................................................................... 45
1.3.4. Funciones .............................................................................................................. 48

Pág. 1
 1.5. Array .......................................................................................................59
1.5.1. Definición y Sintaxis .......................................................................................... 59
1.5.2. Métodos ................................................................................................................ 61
1.5.3. Spread Operator en array ............................................................................... 69
1.5.4. Recorrer un array ................................................................................................ 71
1.5.5. .map, .filter y .reduce ......................................................................................... 75

2. Paradigma Orientado a Objetos.................................................................78

2.1. Conceptos Generales ............................................................................78
2.1.1. ¿Qué es POO? ...................................................................................................... 78
2.1.2. Los 4 pilares.......................................................................................................... 79

2.2. Objetos ...................................................................................................81

2.2.1. Definición .............................................................................................................. 81
2.2.2. Sintaxis ................................................................................................................... 82
2.2.3. Métodos ................................................................................................................ 84
2.2.4. this ........................................................................................................................... 85
2.2.5. Llamado ................................................................................................................. 86
2.2.6. Manipular Objetos ............................................................................................. 87
2.2.7. Recorrer Objetos con “in” ............................................................................... 89
2.2.8. [Link], keys y values .......................................................................... 90
2.2.9. Spread Operator ................................................................................................. 91
2.2.10. Mutabilidad ...................................................................................................... 92

2.3. Clases ......................................................................................................94

2.3.1. Definición .................................................................................................................. 94
2.3.2. Crear clases ........................................................................................................... 95
2.3.3. Métodos ................................................................................................................ 97
2.3.4. Herencia ................................................................................................................. 98
2.3.5. Llamar Clases ....................................................................................................... 99

Pág. 2
 2.4. Prototipos ........................................................................................... 100

2.5. JSON .................................................................................................... 101

3. Aplicar Lenguaje al DOM ......................................................................... 102

3.1. Introducción ....................................................................................... 102
3.1.1. DOM..................................................................................................................... 102
3.1.2. Nodos .................................................................................................................. 103
3.1.3. Selectores ........................................................................................................... 104
3.1.4. DOM Traversing ............................................................................................... 119

3.2. Manipular DOM .................................................................................. 124

3.2.1. NodeList ............................................................................................................. 124
3.2.2. Contenido Nodos ............................................................................................ 125
3.2.3. Insertar Nodos.................................................................................................. 129
3.2.4. Crear Etiquetas ................................................................................................. 130
3.2.5. Eliminar, Remplazar y Clonar ...................................................................... 132
3.2.6. Etiqueta Template ........................................................................................... 134
3.2.7. CSSSOM .............................................................................................................. 135

3.3. Eventos ................................................................................................... 137

3.3.1. Tipo Atributo..................................................................................................... 137
3.3.2. Eventos Modernos .......................................................................................... 138
3.3.3. Mouse .................................................................................................................. 139
3.3.4. Teclado ................................................................................................................ 142
3.3.5. Formulario.......................................................................................................... 144
3.3.6. DOM..................................................................................................................... 146
3.3.7. Navegador ......................................................................................................... 147
3.3.8. Multimedia......................................................................................................... 148
3.3.9. Delegación de eventos .................................................................................. 149
3.3.10. this .................................................................................................................... 151

Pág. 3
 3.4. BOM ..................................................................................................... 152
3.4.1. Objeto window ................................................................................................. 153
3.4.2. Objeto location ................................................................................................ 157
3.4.3. Objeto history ................................................................................................... 159
3.4.4. Objeto screen ................................................................................................... 160
3.4.5. Almacenar Datos ............................................................................................. 161

3.5. Objeto Date......................................................................................... 167

3.5.1. Instancia.............................................................................................................. 167
3.5.2. Métodos ............................................................................................................. 168

4. AJAX y WebSockets .................................................................................. 169

4.1. Introducción – Protocolo HTTP ........................................................ 169
4.1.1. Definición ........................................................................................................... 169
4.1.2. Métodos ............................................................................................................. 174
4.1.3. Código de Estado ............................................................................................ 176
4.1.4. Encabezados ..................................................................................................... 179

4.2. AJAX .................................................................................................... 181

4.2.1. ¿Qué es? ............................................................................................................. 181
4.2.2. Mediante HTML ............................................................................................... 182
4.2.3. XMLHttpRequest - XHR ................................................................................ 183
4.2.4. Promesas ............................................................................................................ 196
4.2.5. Crear Librería..................................................................................................... 202
4.2.6. Fetch .................................................................................................................... 205

4.3. WebSockets ........................................................................................ 209

4.3.1. Definición ........................................................................................................... 209
4.3.2. Practica ................................................................................................................ 211
4.3.3. Estado del WS................................................................................................... 213
4.3.4. Ejemplo Practico .............................................................................................. 214

Pág. 4
5. Enlaces Externos ........................................................................................ 215

Pág. 5
Pág. 6
1. Conocimientos Básicos

1.1. Fundamentos

1.1.1. ¿Qué es JavaScript?

Para entender que es JavaScript, debemos recordar que es un lenguaje de

programación, así que haremos un breve repaso:

Es el lenguaje por el cual se comunican las maquinas. Mediante una serie de

instrucciones, permite a un programador escribir un conjunto de órdenes,
acciones consecutivas, datos y algoritmos para, de esa forma, crear
programas que controlen el comportamiento físico y lógico de una máquina.

HTML y CSS no son lenguajes de programación porque no permiten la

manipulación de datos de a un nivel más alto. Estos son lenguajes informáticos
de diferentes tipos, como HTML un lenguaje de marcado o CSS un lenguaje de
estilos.

Pág. 7
Teniendo en cuenta la información nombrada en la página anterior, hablaremos
ahora sí de las características de JavaScript.

▪ Fue creado en 1995 tras la versión del navegador Netscape 2.0 creado
por la empresa Netsacpe. Su autor Brendan Eich.

▪ Tiene una sintaxis sencilla, cómoda de utilizar y fácil de aprender.

Orientado a la programación de alto nivel.

▪ JS fue creado para poder utilizar del FrontEnd (lado del cliente). Aunque
hoy en día evoluciono tanto que se considera de uso Universal: BackEnd
(servidor), escritorio, dispositivos híbridos, videojuegos, etc...

▪ Una de las funcionalidades y que primero se debe aprender, es poder

manipular nuestra página web como queramos. Es el único lenguaje que
viene integrado en los navegadores.

▪ Es Dinámicamente Tipado. Se refiere a que no indicamos el tipo de

dato, el motor sabe identificarlo.

▪ JavaScript es un lenguaje interpretado; significa que a las instrucciones

las analiza y procesa el navegador en el momento que deben ser
ejecutadas.

▪ También es “Multiparadigma”, quiere decir que acepta varios

paradigmas diferentes, quiere decir que acepta varios estilos de
programación. Además, incluye otros como funcional, imperativo e
interpretado.

▪ JS se encuentra en base en POO de tipo Prototipado.

▪ JS es un lenguaje asíncrono. Esto quiere decir que el lenguaje puede

salirse del flujo de ejecución, quiere decir que por ejemplo puede
ejecutar la línea 3 a pesar que no se ejecutó la 2.

Hay ciertas palabras que quizás no entendamos aún y se explicaran más

adelante.

Pág. 8
 1.1.2. Historia

Brendan Eich, un programador que trabajaba en Netscape, pensó adaptar otras

tecnologías existentes (como ScriptEase) al navegador Netscape Navigator 2.0,
que iba a lanzarse en 1995. Inicialmente, Eich denominó a su lenguaje LiveScript.

Posteriormente, Netscape firmó una alianza con Sun Microsystems (Creadores

de Java) para el desarrollo del nuevo lenguaje de programación. Además, justo
antes del lanzamiento Netscape decidió cambiar el nombre por el de JavaScript.
La razón del cambio de nombre fue exclusivamente por marketing, ya que Java
era la palabra de moda en el mundo informático y de Internet de la época.

La primera versión de JavaScript fue un completo éxito y Netscape Navigator

3.0 ya incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo
tiempo, Microsoft lanzó JScript con su navegador Internet Explorer 3, JScript era
una copia de JavaScript al que le cambiaron el nombre para evitar problemas
legales, el lenguaje era idéntico debido a que Microsoft quería tener el lenguaje
rey de los navegadores.

Para evitar una guerra de tecnologías, Netscape decidió que lo mejor sería
estandarizar el lenguaje JavaScript. De esta forma, en 1997 se envió la
especificación JavaScript 1.1 al organismo ECMA European Computer
Manufacturers Association).

ECMA creó el comité TC39 con el objetivo de "estandarizar de un lenguaje de

script multiplataforma e independiente de cualquier empresa". El primer
estándar que creó el comité TC39 se denominó ECMA-262, en el que se definió
por primera vez el lenguaje ECMAScript.

Pág. 9
versiones:

• ES1 – 1997
• ES2 – 1998
• ES3 – 1999
• ES4 – 2000:

Ya para este año tuvieron muchos problemas y no pudieron

ponerse de acuerdo y esta versión nunca salió, así que saltaron de
la 3 a la 5 de golpe

• ES5 – 2009
• ES5.1 – 2011:
Así se mantuvieron por mucho tiempo, “Jquery” era el “dios” del
internet en ese momento hasta el 2015, ya no vale la pena
aprender “Jquery”
• ES6 – 2015:
Acá ocurrió un gran cambio se agregaron muchos elementos
nuevos al lenguaje, a partir de acá ya se pusieron de acuerdo y
comenzaron a lanzar versiones como es debido, 1 por año.
• ES7 – 2016
• ES8 – 2017
• ES9 – 2019

Pág. 10
Este lenguaje contiene varias tecnologías, librerías y frameworks que pueden
utilizarse, entre los más populares:

• 2002 – JSON
(JavaScript Objet Notation)

• 2005 – Ajax
Creado por Microsoft, nos permite tener una comunicación con un
servidor externo para traer o enviar datos.

• 2006 – jQuery
La librería más utilizada de JavaScript creada en el 2006. Pero no
recomendable de usar hoy en día, pero si aprender.

• 2008 The Good parts – Douglas Crockford

Fue creado por un ingeniero de Yahoo! que escribió un libro hablando de
lo incomprendido que era JavaScript diciendo todo lo que le faltaba
(Actualmente tiene todo eso), en su momento valía la pena.

• 2009 – [Link]
Marco una nueva etapa de JavaScript que te permitía ejecutar JavaScript
en el servidor, podía conectarse a una base de datos. Se creo un nuevo
termino llamado “JavaScript Full Stack”

Frameworks:
• 2010 – AngularJS
• 2013 – [Link]
• 2014 – [Link]

Pág. 11
 1.1.3. Requerimientos Básicos

Para aprender este lenguaje de programación se deben cumplir ciertos

requerimientos.

Nivel de Conocimiento:

➢ Saber utilizar HTML5

➢ Saber utilizar CSS
➢ Conocimientos Básicos de la programación (opcional)

Nivel Material:

➢ Navegador Web (recomendado Firefox)

➢ Editor de Código (recomendado Visual Studio Code)

Pág. 12
 1.1.4. Sintaxis

Hay ciertas reglas que se deben de seguir para escribir cualquier script JS, en
cual además ofrece una sintaxis mucho más cómoda a diferencia del resto de
lenguajes.

• Comentarios
Sí hacemos memoria con HTML o CSS, los comentarios permiten desactivar
código sin tener que borrarlo, esto para hacer pruebas o dejar notas.

Hay 2 tipos de comentario:

➢ En línea: //
➢ En bloque: /* */

El comentario en línea desactivara todo el código que tenga por delante en la

misma línea. Y tipo en bloque puede comenzar donde quiera en una línea y
terminarla en otra.

Ejemplo:

• Punto y Coma
El punto y coma es un clásico en la programación. Esto se coloca al fina de toda
expresión para indicar que finalizo. Esto en JS es opcional siendo que utiliza el
salto de línea para indicar cuando finaliza, sin embargo, lo más recomendado es
utilizarlo por temas de velocidad de código, además que permite escribir más
expresiones en una misma línea.

Pág. 13
 • Espacios en Blanco
Los espacios en blanco en JavaScript dan igual, esto quiere decir que se puede
dejar la cantidad de espacios que queramos cada vez que damos un espacio,
con sentido común claro.

Ejemplo:

• Case Sensitive
Hay que tener cuidado a la hora de escribir porque este lenguaje diferencia bien
las mayúsculas y minúsculas.

Pág. 14
 1.2. ¿Como Funciona JavaScript?

1.2.1. Área de Trabajo

• Script Externo

Para poder hacer funcionar JavaScript debemos conectarlo con HTML, eso lo
podemos hacer atreves de la etiquete “script”, y dándole una ruta del archivo JS
con el atributo “src”. Ejemplo:

Dentro del documento que creamos escribiremos nuestro código JS.

• Script Interno

Tenemos la opción de alojar nuestro código JS dentro de la etiqueta en vez de

crear un documento, sin embargo, aunque sea cómodo a nivel profesional es
mejor separar el código JS del HTML. Ejemplo:

(no importa que no comprendamos el código, es solo un mero ejemplo)

Aunque lo que no podemos hacer es alojar nuestro código dentro de una

etiqueta script, y a la vez conectarlo a un documento externo con SRC.

• Ubicación

Esta etiqueta la podemos colocar donde queramos, en el head, body, donde

sea. Pero lo recomendado es ejecutarlo cuando se cargó todo el documento
HTML y que no se detenga a ejecutarlo; para eso podemos escribir las etiquetas
al final del body o hacer uso del atributo “defer”.

Pág. 15
 1.2.2. Consola en el Navegador

Todos los navegadores llevan una consola incluida, muestra mensajes de

información, errores o alerta que se reciben al hacer las peticiones para cargar
desde la red los elementos incluidos en las páginas. Además, incluye inspectores
o verdaderos depuradores de código.

La consola la podemos abrir de varias maneras. Una es ctrol + shift + i, otra es

dándole click derecho “inspeccionar codigo” o tocando solo F12.

Existen diferentes métodos para mostrar mensajes en la consola:

• [Link]( )
Muestra solo un mensaje, sin clasificarlo.

• [Link]( )
Imprime una representación del objeto con JavaScript.
Por ejemplo: "[Link]([Link])" muestra todos los enlaces en
la página.

• [Link]
Limpia la ventana de la consola

1.2.3. Depuración

La depuración es algo que se utilizara mucho no solo en JS, sino en todo

lenguaje de programación.

Esto trata sobre parar nuestro código en un momento que queramos para
revisar como compila todo el código que estuvimos escribiendo, para arreglar
errores que cometimos.

Para hacer esto debemos escribir en la zona que queremos revisar nuestro
código, la cláusula “debugger”.

Pág. 16
 1.2.4. Variables y Constantes

Las variables y constantes son las bases de todo lenguaje de programación.

Variables:

La variable es un contenedor para un dato, un dato que puede variar. Son

utilices porque permite tener un dato almacenado en memoria y usarlo muchas
veces.

La forma moderna de crear una variable es con la cláusula “let” que restringe la
cantidad de veces que puede ser creada a una sola vez. Esta es la diferencia con
la cláusula original llamada “var” además que este tiene un scope global (ya se
hablara de scope).

Para sintaxis para crear una variable es escribir la cláusula “let” seguida de su
nombre y le asignamos un dato con el signo igual “=”. Aunque lo de asignar es
opcional, dejándola vacía para asignar más tarde.

Hay unas normas que seguir: El nombre no puede comenzar con un número, no
puede haber acentos ni espacios entre medias, y solo algunos signos están
permitidos (más común el guion bajo “_”).

Podemos declarar variables separando por comas sin escribir siempre let
muchas veces. Ejemplo:

Constantes:

Estas son muy similares a las variables, la única diferencia es que una vez que es
creada con su dato asignado o no, no puede cambiarse.

Comparte más similitudes con la variable let que var, esto debido a que solo se
puede declarar una vez y el scope se limite a su bloque.
Pág. 17
 1.2.5. Tipos de Datos

JavaScript es dinámicamente tipado así no puedes decirle al interprete que tipo

de dato es cada uno, sin embargo, debemos aprenderlos igual.

Nos referimos a tipos de datos como una manera para representar información
básica de la vida a real a la informática. Existen diferentes de datos como texto,
números, vacíos y de más, estos se dividen en 2 categorías: primitivos y
compuestos.

Datos Primitivos
Este tipo son los más sencillos por así decirlo, siendo estos compuestos por un
valor en específico.
Nombre Descripción Ejemplo
Números Un número, claro jaja. Estos se indican 10
escribiéndolos tal cual. Tambien existen “NaN”
que significa “not a number”.
String Una cadena de Texto. Se indica entre comillas “Hola Mundo”
que pueden ser: “ ”, ‘ ’, ` `.

Lo mejor es usar (` `), debido a que además te

permite hacer saltos de línea, te permite
también usar una variable y escribir marcado
HTML. Ya se hablará después.
Boolean Son los True o False, es decir “verdadero” y” true
falso”.
Undefined Indefinido. Indica cuando no le asignas un valor let nombre
a algo, existe, pero no tiene un valor.
Null La diferencia de null con undefined, es que null
directamente no existe.

Datos Compuestos
Estos son mucho más complejos y deben ser viste en secciones aparte. Se
diferencian de los otros por ser capaces de contener dentro más de un dato.
Nombre Descripción Ejemplo
array Una lista de datos [‘Hola mundo’, 10, null]
objetos Una lista compuesta por propiedad + {‘nombre’: ‘Tiago’}
valor y métodos

Pág. 18
 • Valores Truthy y Falsy
Además, todos los datos pueden traducirse a un Boolean true o false, para esto
deben cumplir ciertas reglas:

• Falsy

Todos estos valores equivalen a “falsy”:

• 0
• String vacío
• NaN
• Undefined
• Null

• Truthy

Todos estos valores equivalen a “true”:

➢ String no vacío
➢ Números diferentes de cero
➢ Arrays
➢ Objetos

Pág. 19
 1.2.6. Operadores

Son signos que nos permiten hacer “operaciones”. Los operadores que usan dos
valores son llamados operadores binarios, mientras que aquellos que sólo
toman uno son llamados operadores unitarios.

Operadores Unarios
Estos solo pueden ser utilizados con un solo dato
typeof Nos retorna el tipo de dato que se está evaluando

Ejemplo:

Operadores de Concatenación
Este tipo sirve para unir cadenas de texto
+ Unimos 2 o más cadenas

Ejemplo:

Pág. 20
Operadores Aritméticos
Son los operadores para hacer cuentas matemáticas simples.
+ Suma. Curiosamente el mismo para concatenar
- Resta
/ División
* Multiplicación
% Resto de División
** Potencia de un numero
++ Incrementa un numero
-- Decrementa un numero

Ejemplo:

Pág. 21
Operadores de Asignación
Le asignamos o cambiamos el valor a una variable.
= Asignar o cambiamos un valor a una variable
+= Sumamos un valor a una variable
-= Restamos un valor a una variable
*= Duplicamos un valor a una variable
/= Dividimos un valor a una variable
%= Asignamos el resto de una división
**= Potenciamos un valor a una variable

Ejemplo:

Operadores de Comparación
Estos operadores sirven para comparar 2 datos
== Comprueba si ambos valores son iguales
=== Comprueba si ambos valores y tipo de dato son
iguales
!= Comprueba si ambos valores son distintos
!== Comprueba si ambos valores y tipo de dato son
distintos
< Menor que…
> Mayor que…
<= Menor o igual que…
>= Mayor o igual que…

Ejemplo:

Pág. 22
 Operadores Lógicos
! Invierte valor Booleano
&& Significa “y”. Evalúa 2 o más datos, retorna el primer
dato FALSE que consiga
|| Significa “o”. Evalua 2 o más datos, este retornara el
primer dato TRUE valido

Ejemplo:

• Operador Ternario

Estos son comparados con un tema próximo llamado condicionales, por lo que
será un poco complicado de entender.

Nos retornara determinado resultado si se cumple cierto valor u comparación

que le demos.

La sintaxis de este este compuesto por estos 2 signos a continuación del dato
dado:

➢ Si es true: ?
➢ Si es false: :

Ejemplo:

Pág. 23
 1.2.7. Números

Con los siguientes métodos y funciones podremos manipular el tipo de dato

número.

[Link]. NaN y Comprobar Numero

Es un valor que se devuelve cuando intentamos hacer una operación con

números, pero no podemos devolver un número. NaN significa “Not a
Number”.

Ejemplo:

• isNaN( )
Podemos utilizar “isNaN” para comprobar si un dato es un número. Nos
devolverá un boolean.

Ejemplo:

Pág. 24
 [Link]. Numero de Decimales (toFixed)

Especifica el número de decimales, la sintaxis:

nú[Link](cantidad)

Ejemplos:

También se puede usar para reducir decimales y redondear.

Ejemplo:

Pág. 25
 [Link]. Convertir texto a número (parse Int y Float)

• parseInt(texto)
• Number(texto)
Transforma un tipo de dato texto a número sin decimales.

Ejemplo:

• parseFloat(texto)
Agregar decimales a la hora de transformarlo.

Ejemplo:

Pág. 26
 [Link]. Función Math

Para trabajar con numero tenemos el objeto “Math”. Tiene las siguientes
opciones:

• [Link]( )
Redondea un numero hacia abajo. Ejemplo:

• [Link]( )
Redondea un numero hacia arriba. Ejemplo:

• [Link]( )
Redondea según el valor, si esta superior a .5 redondea hacia arriba y si
es menor redondea hacia abajo. Ejemplo:

Pág. 27
• [Link]( )
Devuelve un numero decimal aleatorio entre 0 y 1.
Podemos utilizar la lógica de multiplicar ese resultado hasta un número
que es en total el número máximo que puede salir. Ejemplo:

Siempre sale con números decimales y no es capaz de llegar a 10.

Si queremos que este sin decimales podemos hacer un pequeño código
en conjunto con uno de los anteriores. Ejemplo:

Debemos de utilizar el. ceil para que sea capaz de llegar al número 10 y
no salga el número 0.

Para poder hacer que tenga un mínimo debemos restar el valor máximo
con el mínimo, y después en el resultado final sumar el mínimo.

Podemos crear una función propia para utilizar este método de forma
cómoda (ya se explicará después que es una función):

Pág. 28
• [Link]( ) y [Link]( )
Podemos sacar el menor o mayor numero. Ejemplo:

• [Link]( )
Devuelve la raíz cuadrada

Pág. 29
 1.2.8. Strings

Con los siguientes métodos y funciones podremos manipular el tipo de dato

string.

[Link]. Propiedad

El texto tiene una propiedad, que es un valor que tiene un dato.

• [Link]
Cantidad de caracteres que tiene el texto. Ejemplo:

Pág. 30
 [Link]. Métodos

Los métodos son algo que pueden hacer, una operación.

[Link].1. Sin Parámetros

Existen 3 tipos:

• .trim( )
Quita los espacios en blancos del principio y fin. Ejemplo:

• .toUpperCase( )
Convierte todo el texto en mayúsculas.

• .toLoweCase( )
Transforma todo el texto en minúsculas.

Pág. 31
 [Link].2. Encontrar Caracteres

• .indexOf( )
Se utiliza para buscar palabras o letras, nos devolverá el indice que se
encuentra y si no lo está devuelve -1. Ejemplo:

Se puede buscar a partir de determinado índice, debes indicarlo como

segundo parámetro. Ejemplo:

Aunque claro si queremos el siguiente carácter necesitamos saber el

anterior. Para eso se puede hacer un código como este:

• .lastIndexOf( )
Es como el indexOf pero comienza a contar desde el final. Así que si
queremos el ultimo carácter debemos hacer esto en vez de dar tanta
vuelta como el anterior.

Pág. 32
• .incluides( )
Este en cambio, busca el string dado y devuelve un boolean. Ejemplo:

• .startsWith( )
Pregunta si comienza con determinado texto.

• .endsWith( )
Pregunta si termina con determinado texto.

Ejemplo:

Pág. 33
 [Link].3. Manipular Strings

Existen diferentes métodos para hacer transformaciones en los strigs. Esos son:

• .replace( )
Toma un texto y lo remplaza por otro. El primer parámetro es el texto a
buscar, y el segundo por el que será remplazado. Ejemplo:

• .split( )
Se utiliza para separar texto según determinados caracteres que le
demos, esto no devolverá en una lista de datos (array), el separador que
le digamos será eliminando. Ejemplo:

Se utilizo la letra “n” como separador, entonces ya no la almacena y la re

escribe.

También se puede separar en letras dejando un string nulo. Ejemplo:

Pág. 34
• .substring( )
Podemos extraer todo el texto a partir de un índice y saltear lo exterior.
Ejemplo:

También se le puede dar un final(opcional), aunque no se incluye en el

resultado. Ejemplo:

• .substr( )
el “substr” nos permite sacar extraer una determinada cantidad de
caracteres a partir de determinado índice y darnos el trozo que extrajo.
Primero especificamos el indicé y segundo la cantidad. Ejemplo:

Pág. 35
 1.2.9. Alertas e Ingreso de Datos

Estas son funciones (ya veremos que son funciones) que nos permite cierta
interacción con el usuario en pantalla, dándonos una mano mientras tanto.

• alert( )
Como su nombre lo indica, nos saltara una notificación para decirnos algo que
le indiquemos.

Ejemplo:

Pág. 36
 • confirm( )
Saltará una alerta con la opción de aceptar y cancelar, nos devolverá un boolean
dependiendo a cuál le de click el usuario.

Ejemplo:

• promt( )
Una alerta con un texto para ingresar aparece en la pestaña. Lo que ingrese el
usuario al input es el dato que nos devolverá el promt.

Ejemplo:

Pág. 37
 1.3. Estructura de Control (algoritmo)

Primero debemos definir que es un algoritmo. Un algoritmo es una sentencia de

instrucciones representando una solución para un determinado problema.

Los algoritmos son creados con las estructuras de control, siendo estas las
instrucciones que determinan el flujo de código. Existen distintos tipos, algunas
de esas son las condicionales, ciclos, funciones y switch.

Pág. 38
 1.3.1. Condicionales

[Link]. Definición

¿Qué es? Las condicionales permiten romper el flujo normal de lectura de

código que es de arriba hacia abajo.

Una condicional lo que hace es preguntar por una condición, si esa condición se
cumple el código se ejecuta y si esa condición no se cumple el código no se
ejecuta. Así de simple.

• If( ){ }
Con la cláusula “if” creamos una condicional, en que le debemos de dar una
operación que si se cumple se ejecutará el código que contendrá entre las
llaves.

Ejemplo:

Pág. 39
 [Link]. Tipos

• En línea

Esta sirve cuando queremos ejecutar código de una sola línea, siendo que no es
necesario escribir las llaves. Ejemplo:

• En bloque

Cuando se tenga que hacer más líneas de código, se hace en un bloque. Para
esto se deben utilizar llaves { } y escribir todo el código ahí. Ejemplo:

Toda variable declarada dentro del bloque no existe fuera de él, pero una
variable declarada fuera del bloque si existe dentro de él. A esto se le dice
maso menos “scope”. Ejemplo:

Variable declarada dentro del bloque:

Pág. 40
 [Link]. Con más Condiciones

Tenemos la opción de crear condicionales de “auxilio” en caso que no se

cumpla la primera.

• else if( ){ }
Si no se cumple la primera condición podemos crear una segunda con un
diferente código. Ejemplo:

• else { }
Esta cláusula se utiliza si no se cumple ninguna de las condicionales. Ejemplo:

Nota: Al cumplir toda la condición, solo tomara al primero… porque lo que hace
el programa es buscar la primera condición verdadera, una vez que
encuentra una condición verdadera la ejecuta y se saltara hasta al final.

Pág. 41
 [Link]. Condicional con Múltiples Evaluaciones

Recordemos que tenemos los operadores lógicos para poder crear varias
evaluaciones dentro de una misma condicional.

• &&
Requiere que ambas condiciones se cumplan. Ejemplo:

• ||
Requiere que al menos una condición se cumpla. Ejemplo:

[Link]. Condiciones anidadas

¿Qué es? Es una condición dentro de otra. Ejemplo:

Si la primera condición “padre” no se cumple, todas las condiciones “hijos”

tampoco se cumplirán.

Pág. 42
 1.3.2. Switch

La estructura de control switch es utilizada para tomar decisiones en función de

distintos estados o valores de una variable.

Es casi lo mismo que crear un “else if” continuo, pero queda de una manera
mucho más ordenada y cómoda.

Sintaxis:

Se pueden agregar la cantidad de casos que queramos, estos finalizan cuando

se escribe “break”, así que podemos poner varios casos juntos.

El default es como el “else”. Si no es ninguna de las opciones da como resultado

el default.

Pág. 43
Se pueden hacer ejercicios como estos:

Pág. 44
 1.3.3. Ciclos

Se utilizan para repetir una o más instrucciones un determinado número de

veces o mientras/hasta que se cumpla una condición.

Existen diferentes tipos.

[Link]. for

• for(declaración1; declaración2; declaración3){ }

El “for” pide 3 expresiones. La primera es declarar una variable con un valor,

luego le damos una condición que finalizara el ciclo. Y por último le debemos
dar un incremento para llegar a la condición. Por último, después de dar los
parámetros al ciclo, escribimos nuestro código en el bloque. Ejemplo:

Podríamos hacer que no sume de uno en uno. Le podríamos dar “i+=5” y

comienza a contar de 5 en 5.

Le podemos decir que, en vez de sumar, restar. Ejemplo:

Pág. 45
 [Link].1. Break y Continue

• continue
Hace que se salte una de las iteraciones del ciclo, Saltarte un valor. Ejemplo:

Se está imprimiendo todos los números de 0 a 100, excepto los múltiplos de 7.

• break
El “break” sirve para romper el ciclo. Ejemplo:

Aquí se está pidiendo los múltiplos de 7. Y cuando llegue a los primeros 5

múltiplos se rompe el ciclo.

Pág. 46
 [Link]. While

• while( ){ }
Seguirá en ciclo mientras la condición que se está evaluando es verdadera,
cuando sea falsa se detendrá.

Ejemplo:

[Link]. Do while

• do{ }while( )

Este bucle es una variante del bucle while. Este ciclo ejecutará el bloque de
código una vez, antes de verificar si la condición es verdadera, luego repetirá el
ciclo mientras la condición sea verdadera.

Aquí la condición no se cumple, pero se ejecutará una vez.

Pág. 47
 1.3.4. Funciones

[Link]. ¿Qué es?

Una función es un trozo de código reutilizable o en el que hay un conjunto de

instrucciones dentro que harán ciertas cosas y puede llegar a retornar un
resultado. De cierta manera puede funcionar como un tipo de dato.

input => función => output

Una función puede devolver datos que van hacer los datos de entrada de una
segunda función o varias. Así:

input => funcion1 => output1 => funcion2 => output2 => funcion3 =>
output3…

input => argumentos

output => valor de retorno

Nota: las funciones sin valor de retorno devuelven undefined.

Pág. 48
 [Link]. Tipos de declaraciones

• Forma Clásica
Esta es la forma más clásica que esta desde los origines de JavaScript.

Hacemos uso de la cláusula function seguido del nombre, los parámetros entre
paréntesis una llave de bloque donde estarán todas nuestras instrucciones.
Ejemplo:

Recordar que la función debe tener un dato de salida que especificaremos con
la cláusula return.

Pág. 49
 • Funciones en Variables

Son funciones anónimas que son guardadas dentro de variables o constantes.

Ejemplo:

No es una forma recomendad de uso, pero se sigue viendo hoy en día.

• Forma Moderna, declaración en flechas

La declaración moderna desde la versión de 2016. La sintaxis trata de una
función de flecha anónima guardada en una variable/constante, la función de
flecha esta compuesta por los parámetros y unas llaves de bloque apuntado por
una flecha (aunque las llaves son opcionales), nada más. Ejemplo:

Aunque las llaves son opcionales, pudiendo crear una función de una sola línea
retornando directamente algo. Ejemplo:

Pág. 50
 [Link]. Parámetros y Argumentos

Parámetros:
Los parámetros de función son los nombres enumerados en la definición de la
función. Ejemplo:

const saludar = (persona,sexo) => { }

Donde (persona,sexo) son los parametros.

Argumentos:
Son los valores reales asignados a los parámetros.

Si hay más argumentos que específica, los adicionales se ignoran.

Si hay menos argumentos que parámetros:

• los faltantes dan undefined

• A menos que tengan un valor por defecto. Ejemplo:

const saludar = (persona = ‘visitante’, sexo = ‘m’) => { }

Donde (‘visitante’, ‘m’) son los argumentos por defecto.

De esa manera si no elige ninguno o por alguna otra falla. No da como

resultado “undefined”.

Pág. 51
 [Link].1. Parametros Rest con Spread Operator

• …

Parámetros rest (spread operator)

Tiene muchos usos, pero específicamente en este caso lo que nos permite es
mandar cualquier cantidad de argumentos a la función. Hacemos uso de esta en
forma de array.

Ejemplo:

Pág. 52
 [Link]. Tipos de funciones

• Funciones Puras
Las funciones puras son aquellas que no causan efectos secundarios, y
siempre devuelve los mismos valores para los mismos parámetros.
Ejemplos:

La variable “a” no es modificada, se está haciendo uso de la variable, pero

no es modificada.

• Funciones AutoInvocadas
Este tipo de funciones son aquellas que no necesitan ejecutarse dentro
de un paréntesis. Se ejecutan solas. Ejemplo:

No tuvimos que darle los valores dentro de unos paréntesis al lado de

saludar.

Nota: Este tipo de funciones ya no se utiliza hoy en día.

Pág. 53
 • Funciones Anónimas
Las funciones anónimas no pueden ser nombradas ni llamadas, suelen ser
utilizadas para pasársela como parámetro a otras funciones nativas de JS o
nuestras, que se les llama callbacks (una función pasada a otra función como
parámetro).

Para crear las nombradas no debemos darle un nombre, pero pueden ser
guardados en una variable y tendremos que llamarla como tal. Como las
funciones que guardamos en variables, como las de flechas.

• Nombradas
Las nombradas son aquellas que sí tienen un nombre definido, las que de
variable no cuentan porque la estamos guardando, no la estamos nombrando.
Son las normales.

Pág. 54
 [Link]. Scope

Scope significa el alcanza de las variables respecto a su entorno. Estas

limitaciones de scope tiene sus puntos positivos y negativos.

Las limitaciones es que una variable creada dentro de un bloque no puede ser
llamada desde el exterior, pero una variable del exterior si puede ser llamada
desde un bloque.

Ejemplo:

Pág. 55
 [Link]. This

Representa al objeto del cual se ejecuta la función.

This se utiliza para indicar que buscar un valor que le pidamos, dentro de su
bloque padre sin tener que ir al scope máximo.

Las arrow functions permiten acceder al this superior dentro de un closure

(lexical this).

Nota: Esto se verá al detalle en el próximo curso “orientado a objetos” en

donde se verá bien el valor this debido a que es un tema muy amplio.
Ahora nos daremos un acercamiento.

Pág. 56
 [Link]. Técnicas

[Link].1. Closures

Trata de una función que retorna otra función, permitiéndonos guardar el

llamado de la primera función (con su parámetro pasado) en una variable,
haciendo que podamos llamar a esta variable, pasarle los parámetros de la
función retornada y ejecutarse.

La forma más cómoda es con las funciones de flecha, y podemos agregar la

cantidad que queramos.

Ejemplo:

Resultado:

Pág. 57
 [Link].2. Recursividad

La recursividad es una técnica de programación, trata sobre una función que se

llama así misma hasta que devuelve el valor deseado.

Ejemplo:

[Link].3. Llamar Funciones de Manera Acortada

Puede ser almacenadas en variable o constantes. Función por expresión:

const c = [Link]

Por ejemplo, en este caso “c” equivaldría a “[Link]”, ahorrándonos tiempo

a la hora de escribir todo el codigo.

lo que no se debe hacer es ponerlo de la siguiente manera

const c = [Link]( )

Pág. 58
 1.5. Array

1.5.1. Definición y Sintaxis

• Definición
Un array (o arreglo o matriz) es una lista de valores enumerada compuesto por
datos (string, números, booleans, etc…). Se le llama tipo de dato compuesto
porque tiene la capacidad de almacenar varios diferentes tipos de datos a la
vez.

Esta comparte ciertas propiedades y métodos con los strings.

• Sintaxis
Para crear un arreglo tenemos 2 maneras:

o Array( )
o []
o new Array()

Ejemplo:

• Acceder
Para poder acceder a un valor que contiene un array, debemos utilizar los
corchetes cuadrados e indicar el índice del dato a acceder (recordar que cuenta
a partir de 0). Ejemplo:

Pág. 59
 • Modificación Básica
Para cambiar un valor específico del array, debemos llamarlo junto con su índice
e igualarlo al nuevo dato. Ejemplo:

Hay 1000 maneras diferentes de producir cambios de un arreglo con métodos,

pero la modificación más básica de un valor especifico es de esta manera.

• propiedad
Tiene una propiedad que nos permite saber la cantidad de elementos que tiene
guardado dentro el arreglo. Hacemos uso de “.length”:

Pág. 60
 1.5.2. Métodos

[Link]. Agregar y Quitar

Podemos agregar o quitar valores dentro de un array, puede ser al principio,

final o uno personalizado. Se utilizan así:

[Link].1. Al final

• .push( )
Podemos agregar un valor más a la lista en el final.

• .pop( )
Quitará el último elemento de la lista, no le debemos dar parámetros
porque será siempre el ultimo.

[Link].2. Al principio

• .unshift( )
Podemos agregar un valor al principio de la lista.

• .Shift( )
Elimina el primer valor de la lista, no hay que darle un parámetro,
siempre será el primero.

Pág. 61
 [Link].3. Posicionamiento personalizado

• .splice( )
Lo utilizamos para extraer datos de un arreglo y modificarlo.

La sintaxis es la siguiente:

.splice(StartIndex, quantity, value1, value 2, value3, … )

1. StartIndex
Debemos indicarle el índice de comienzo.

2. quantity
la cantidad de elementos que vamos a eliminar (Si le pasamos 0
no eliminamos ninguno).

3. value
luego los valores a los que vamos a agregar.

Ejemplo:

Pág. 62
• .slice( )
Crearemos un nuevo array donde extraemos los valores de otro sin
modificarlo.

La sintaxis es la siguiente:

.slice(start[end])

1. Start
Debemos indicarle de donde comienza a extraer del array

2. End (opcional)
Debemos indicarle donde termina de extraer

Ejemplo:

Pág. 63
 [Link]. Ordenar elementos de un array

Tenemos métodos para orden los valores dentro de los arrays.

• .reverse( )
Invierte toda la lista de elementos

Pág. 64
• .sort(callback)
Con este elemento, podemos ordenar las palabras por abecedario de
mayor a menor, Ejemplo:

Ahora, si lo quisieras ordenar por números no funcionaria. Para ordenar

los números debemos usar un “callback” que nos permite el .sort( ).

[Link]((a,b) => a - b)

Pág. 65
Explicación:

Se está aplicando una función que es así:

((a, b) => a - b = resultado

Si el resultado es positivo, “a” es mayor que “b” (Se intercambia los

números). Si el resultado es negativo, “b” es mayor que a””. (No se
cambian los números).

Pág. 66
 [Link]. Unir arrays, transformar a Strings

• .Join(“ ”)
Con Join podemos unir los valores del array a string, debemos indicar
porque será remplazado los separadores, como por ejemplo espacios.
Ejemplo:

• .concat( )
Se utiliza para poder unir 2 o más array en uno solo, debemos escribir la
variable. Ejemplo:

Pág. 67
 [Link]. Encontrar elementos en un array

• .indeOf(value)
Podemos encontrar el índice de un valor de array, si no encuentra
ninguno nos devolverá -1. Ejemplo:

• .find(Callback)
Recibe un callback (Una función) y el primer elemento que coincida con
el callback no los entrega. Ejemplo:

• .findIndex(Callback)
El “findindex” es igual que indeOf y find. Le debemos dar un callback y
nos devolverá el índice del primer valor que coincida. Ejemplo:

Pág. 68
 1.5.3. Spread Operator en array

El Spread Operator es un operador de 3 puntos “…”, lo que hace este operador

es expandir. Saca todos los valores del array y los trabaja como si fueran valores
únicos. Se pueden utilizar para:

[Link]. Eliminar elementos duplicados

Podemos eliminar elementos duplicados dentro de un array con el objeto “set”,

no permite valores duplicados solo toma el primero. Sintaxis:

Hay un problema cuando lo utilizamos y es que devuelve un objeto, no un array.

Para solucionarlo debemos utilizar este truco de Implementarlo dentro de un
array.

Para no tener que estar escribiéndolo constantemente podemos crear una

función simple. Ejemplo:

const removeDuplacates = arr => […new Set(arr)]

Esta función la utilizaras bastante, es importante aprenderla. Se te dejara este

link de la MDN hablando de este tema en específico.
[Link]

Pág. 69
 [Link]. Objeto Math con arrays

Si queremos sacar el mayor o menor número de un array con Math (Se vio en
los operados de números) en un array, nos dará NaN.

Los Math no reciben arrays, ellos necesitan una lista de parámetros sin los
corchetes, Debemos utilizar antes como “eliminar elementos duplicados” los 3
puntos. Ejemplo:

Pág. 70
 1.5.4. Recorrer un array

Como ya sabemos un array es una lista de elementos, pero, ¿Cómo lo

recorremos? Bueno tenemos distintas formas:

• for( )
Podemos utilizarlo como una técnica para recorrer un arreglo. Ejemplo:

Queremos imprimir cada valor en líneas diferentes

Es útil, pero tenemos formas más cómodas para recorrer un array.

Pág. 71
• for of
La sintaxis es la siguiente:

for(let element of arry) { }

Primero creas una variable dentro que guardara un elemento que del
arreglo que cambiara en cada ciclo, e indicamos “of” y el arreglo a
recorrer.

Le estamos diciendo, recórreme el array y en cada ciclo usa la variable

“element” para guardar el valor en esa posición.

Dentro del bloque puedes hacer lo que quieras

Pág. 72
• .forEach( )
El forEach es un método y lo utilizamos cuando queremos darle una
función a cada elemento. Sintaxis:

[Link]( (el,i) => { })

Con esta sintaxis podemos sacar el índice de cada elemento por ciclo

Ejemplos:

Pág. 73
 • .some( ) y .every( )
Podemos utilizar estos métodos si quisiéramos saber si un elemento o
todos los elementos de la función cumplen con una condición, en vez de
hacer una iteración tan larga e incómoda con if, forEach, etc…

La función que incluirá puede tener 3 parámetros:

1. Elemento
2. Índice del Elemento
3. Arreglo entero pasado
Podemos utilizar some para buscar si un valor coincide con el que le
demos, le tenemos que dar un callback. Ejemplo:

La diferencia con every es que pide que todos los elementos del array
cumplan con la condición. Ejemplo:

Acá le estamos diciendo si todos los elementos del array tienen al menos
la letra que le demos.

Nota: Los métodos some y every no recorren todo el array. El método some se
detiene cuando al menos un elemento del array cumple la condición y el
método every se detiene en el primer elemento que no cumpla la
condición.

Pág. 74
 1.5.5. .map, .filter y .reduce

Estos 3 elementos son métodos muy utilices que nos permite manipular los
arreglos de forma sencilla. Estos 3 métodos no modifican el array original, crean
un nuevo array los 3, nunca modifican el array original. Salvo en el dom.

[Link]. map

Transforma todos los elementos del array según el callback que le demos. La
función que incluirá puede tener 3 parámetros:

4. Elemento
5. Índice del Elemento
6. Arreglo entero pasado

Ejemplo:

Acá estamos queriendo sacar el cuadrado de cada valor del array

Pág. 75
 [Link]. filter

Filtra los elementos que coincidan con la condición que este en el callback. La
función que incluirá puede tener 3 parámetros:

1. Elemento
2. Índice del Elemento
3. Arreglo entero pasado

Ejemplo:

Estamos queriendo obtener todos los valores que sean mayor que 15.

Pág. 76
 [Link]. reduce

Este es posiblemente el más complicado de utilizar de los 3 pero el más útil.

Reduce todos los elementos a un único valor; va comparando de 2 en 2 los

elementos y al final devuelve solamente 1. El callback de primer parámetro
puede recibir 4 parámetros:

1. Total
2. Elemento
3. Índice del elemento
4. Arreglo pasado

Pero se puede utilizar un segundo parámetro, que es el valor de inicio, puede

ser cualquier tipo de dato y al final retornara ese dato.

Un ejemplo sencillo:

Vamos a sumar todos los valores del array

Pág. 77
2. Paradigma Orientado a Objetos

2.1. Conceptos Generales

2.1.1. ¿Qué es POO?

▪ Es un paradigma de la programación y el más usado hoy en día. Además, que

es aplicable a muchos otros lenguajes de programación incluyendo en este
caso JavaScript.

Un paradigma es un modelo documentado para crear software, esto trata

de un conjunto de métodos que es agregado al lenguaje.

Existen mucho paradigma como “funcional” o “imperativa”, nosotros

veremos POO. Un lenguaje tiene al menos 1 paradigma o puede ser
multiparadigma como JS, los más clásicos serian “Java”, “Python” o este
incluido.

▪ Nos referimos a “POO” o “OOP” como “Object Oriented Programing” o

“Programación Orientada a Objetos”.

▪ POO se basa principalmente en el uso de “objetos”, entidades que

representan datos abstraídos y comportamientos del problema a resolver.

▪ No debemos de instalar nada, los paradigmas ya están incorporados en los

lenguajes.

▪ Existen varios tipos de POO: Basado en clases, prototipos o estructuraras. JS

está basada en prototipado.

Se vere más adelanta la buena definición, pero por ahora tendremos en

cuenta el mecanismo se basa en la reutilización de Objetos clonándolos.

Pág. 78
 2.1.2. Los 4 pilares

Existen muchos conceptos en POO como las clases u objetos. Sin embargo, hay
4 pilares que forman la base de programación orientada a objetos.

Estos 4 pilares son: Abstracción, Encapsulamiento, Herencia y Polimorfismo.

• Abstracción
Cuando hacemos una abstracción, queremos omitir detalles que no son
necesarios para nosotros, y queremos solamente lo que sí es relevante. Este
sería el proceso para definir los atributos y métodos de un objeto.

Podemos realizar una abstracción de una entidad del mundo real. Ejemplo:
Tenemos una persona que tiene tal edad, nombre, nacionalidad, genero,
familia, etc.… pero nosotros solo “abstraemos” lo que nos interesa que
podría ser solo el nombre y edad.

• Encapsulamiento
El encapsulamiento nos permite controlar quien puede ver y utilizar los distintos
módulos internos de nuestro sistema. Sería un sistema de seguridad.

Como, por ejemplo. Tenemos una serie de libros guardados en objetos

que contiene el nombre, precio e idioma, esos datos serán agregados al
carrito, pero el usuario puede acceder al código y cambiar el precio,
entonces lo encapsulamos para evitarlo.

Nota: Actualmente en JS no está habilitado el encapsulamiento

• Herencia
La herencia la utilizamos para compartir código y ahorrarnos código y
optimización. Nos permite heredar las características de una clase padre.

Pág. 79
 • Polimorfismo
Proviene de Poli = muchas, morfismo = formas.

Se refiere a la capacidad de realizar una acción en diferentes formas. Sería como

en una herencia sustituir un método con algunas variantes.

Trabaja cuando hay una herencia. Heredar el mismo método, pero modificarlo
para cada objeto que creamos

Pág. 80
 2.2. Objetos

2.2.1. Definición

▪ En este tema entraría la abstracción. Los objetos serian una abstracción de

datos y comportamiento al problema a resolver, tomamos solamente los que
nos interesa y queremos.

Por ejemplo, tenemos un auto que tiene tal marca, color, peso, caballos de
fuerza, etc… pero solo abstraemos lo que nos interesa, como la marca,
asientos disponibles y caballos de fuerza. Quedando algo así:

Marca: Chevrolet

Asientos: 5

Caballos de fuerza: 115 hp

▪ Una diferencia con los arrays seria que estos tienen índice y para llamar a un
dato lo tenemos que indiciar por índice también, mientas que los objetos no
además que nos permite crear clases, uso de JSON y de más que ya veremos.

▪ En JavaScript todo está echo de objetos, un ejemplo es el “Math” para hacer

cálculos con números. Otro seria la creación de datos como un array en que
hay 2 formas:
➢ new Array( ) | Objeto constructor
➢ [] | Objeto literario

Siempre es más rápido hacerlo de la forma constructora, pero es totalmente

recomendado hacerlo solo con datos compuestos.

Nota: más adelante veremos a que se refiere constructor.

Pág. 81
 2.2.2. Sintaxis

1. Comienza usando un corchete (Es más fácil que usar el constructor).

2. dentro vamos a crear un atributo/propiedad con un valor, este puede

llevar comillas como un string o no, se comportan igual. después para
declarar el valor podemos poner 2 puntos “:”

3. El valor hay que ponerlo tal cual como cualquier dato

4. Si quisiéramos seguir agregando atributos/propiedad, debemos poner

una coma “,” al final de cada uno.

Ejemplo de uso:

Pág. 82
 [Link]. Detalles Atributos

▪ Deben de seguir las mismas reglas que una variable de JavaScript.

▪ No es necesario que lleve comillas a no ser que rompa una regla de las
variables. Ejemplo:

Igual lo mejor es evitarnos romper una regla, puede darnos problemas.

▪ Podemos hacer ciertas operaciones para poner el nombre a un atributo, lo

debemos hacer entre corchetes cuadrados “[ ]”. Ejemplo:

▪ Cuando un atributo y un variable externa se llaman igual, no es necesario

especificar el valor, el atributo será el nombre de la variable. Ejemplo:

Pág. 83
 2.2.3. Métodos

Los métodos es una función de callback que se le pasa como valor a un atributo
de los objetos, tenemos 3 formas diferentes

1. Funcion moderna ESM6

2. Funcion clasica con “function”

3. Predeterminada de los objetos

Lo mejor es utilizar la 2 o 3, debido que nos permite utilizar “this”, vamos a verlo
a continuación.

Pág. 84
 2.2.4. this

la clave “this” se refiere a la instancia actual con la que estamos trabajando,

tiene varios usos y no solo en los objetos. Fue agregado tras la actualización de
ESMC 6 de 2016. Ejemplo:

En este caso, this es equivalente al objeto “usuario”, y estamos llamando al

atributo nombre. Sería equivalente a esto:

Pero no nos serviría si tenemos que cambiar el nombre de la variable o

duplicarlo o cualquier cosa así, para eso tenemos this.

Lo podemos usar también por ejemplo en algunas callbacks de talvez los

eventos, en cual se verán más adelante en JS:

Pág. 85
 2.2.5. Llamado

• Objeto
Para llamar a un objeto lo debemos poner tal cual el nombre de su variable (Si
lo guardamos en una claro). Ejemplo:

• Atributo
Debemos utilizar el punto “.” Y después el nombre del atributo. Ejemplo:

Sí se encuentra un objeto dentro de otro debemos continuar utilizando la

sintaxis del punto sucesivamente.

• Atributo rompiendo reglas

En vez de utilizar la sintaxis del punto, debemos usar los corchetes cuadrados y
dentro pasarle un string con el nombre del atributo. Ejemplo:

• Métodos
Utilizaríamos la sintaxis de punto. Ejemplo:

Pág. 86
 2.2.6. Manipular Objetos

[Link]. Modificar Valor

Debemos llamar al atributo existente e igualarlo al valor que queremos cambiar.

Ejemplo:

[Link]. Agregar Atributo

Sería una combinación entre “llamarlo atributo” y “modificar valor”.

Usamos la sintaxis de punto o corchetes (dependiendo el caso), para darle

nombre a nuestro atributo a continuación de un signo igual con su valor.

Pág. 87
 [Link]. Eliminar Atributo

Utilizamos la palabra clave “delete” y a continuación seleccionamos el atributo.

Nos devuelve un boolean si fue el eliminado de forma correcta. Ejemplo:

Pág. 88
 2.2.7. Recorrer Objetos con “in”

• in
Es un operador que nos devuelve un boolean sí tiene o no esa propiedad. La
sintaxis seria pasarle primero el nombre del atributo que queremos buscar en el
objeto, en forma de string, después la palabra clave “in” y por último el nombre
del objeto. Ejemplo:

• for in
Es un ciclo que usamos obtener y “hacer algo” con cara atributo. Misma sintaxis
que “for of”. Ejemplo:

En la variable “propiedad” (Aunque la podemos llamar como queramos) guarda

en cada ciclo el nombre del atributo que estamos recorriendo. Este sería el
resultado:

Pág. 89
 2.2.8. [Link], keys y values

• [Link]( )
Nos devuelve un array, contendrá la entrada (atributo y valor) dentro de un
array, según el objeto que le pasemos como parametro. Ejemplo:

• [Link]( )
Nos dará un array con todos los atributos del objeto que le pasemos como
parámetro. Ejemplo:

• [Link]( )
Entrega la parte opuesta, referenciándose a todos los valores del objeto.
Ejemplo:

Pág. 90
 2.2.9. Spread Operator

Este tema también existe para los arrays en cual ya fue visto y explicado.

El “spread operator” lo utilizamos como para “expandir” o también dicho

“liberar” la información guardada en los datos compuestos (Arrays y Objetos).

Hacemos uso de los 3 puntos “…” que aplicaremos delante de la variable con el
dato compuesto.

Ejemplo:

También nos sirve para duplicar datos compuestos sin mutabilidad, al cual será
visto a continuación.

Pág. 91
 2.2.10. Mutabilidad

• Datos Inmutables
Los inmutables son los objetos cuyo estado no se puede cambiar una vez
creado el objeto.

Todos los datos primitivos son inmutables. Acá tendríamos un ejemplo:

• Datos Mutables
Un objeto mutable es un objeto cuyo estado puede modificarse después de su
creación.

Todos los tipos de datos compuestos son mutables.

Pág. 92
 [Link]. Duplicar Datos sin Mutabilidad

Sería un problema si estamos “duplicando” datos compuestos y estos se andan

mutando. Para eso tenemos estos trucos:

Para duplicar datos compuestos sin mutabilidad haríamos uso del spread
operator, liberamos sus ítems en un nuevo ítem que debe de ser el mismo tipo
de dato. Aplicaría a los 2 datos compuestos, arrays y objetos. Ejemplo:

Pág. 93
 2.3. Clases

2.3.1. Definición

Cuando tenemos que crear diferentes objetos, talvez nos confundimos y no

seguimos el formato inicial, como, por ejemplo:

Bueno, para solucionar estos errores podemos hacer una especie de plantilla o
un patrón en que podamos basarnos, a este concepto se lo llama Clases.

Pág. 94
 2.3.2. Crear clases

• class
Utilizamos esta palabra clave, siguiendo del nombre de la clase (Por buena
práctica deben comenzar en mayúscula) y después abrimos unas llaves.
Ejemplo:

Dentro vamos a construir los atributos que necesita, para eso necesitamos una
función constructora y para declararlo utilizaremos:

• constructor( )
Recibe los parámetros que nosotros quisiéramos agregar a un atributo
(Opcional). Después debemos almacenar esos datos en esa instancia, el nombre
del atributo y asignarle el parámetro recibido. Ejemplo:

El “this” está haciendo referencia que lo vamos a almacenar en esta clase el

atributo. El this no es necesario si no usamos el constructor, pero no le
podemos pasar parámetro a la instancia de la clase. Ejemplo:

Pág. 95
Un problema que ocurre cuando instanciamos la clase, es que si no le pasamos
todos los parámetros lo rellenara con “undefined”. Ejemplo:

Le estamos pasando tan solo 2 parámetro en vez de 3, este sería el resultado:

Para solucionar este problema podemos hacer uso de JavaScript básico, como
predefinir los valores de los parámetros. Ejemplo:

Este sería el resultado si solo le pasamos 2 parámetros cuando puede recibir 3:

Pág. 96
 2.3.3. Métodos

Antes se dijo la definición de los métodos en los objetos, una función de

callback que se le pasa como valor de un atributo para un objeto.

Para poder crearlo le debemos pasar a un atributo un callback.

Pág. 97
 2.3.4. Herencia

La herencia se utilizar cuando tenemos varias clases parecidas entre sí, para eso
heredamos los atributos de una “clase padre”.

La herencia es la posibilidad/habilidad que nos da POO de poder heredar tanto

los atributos y métodos de una clase padre.

• extends
Se lo debemos poner después del nombre de la clase que creamos junto con el
nombre de la clase a Heredar. Ejemplo:

• super( )
Le debemos pasar como parámetro de los atributos que queramos agregar. Lo
colocamos dentro de la función constructora.

Ejemplo de herencia:

Pág. 98
 2.3.5. Llamar Clases

• new
Con “new” declaramos que estamos creando una nueva instancia de una clase,
le debemos pasar como parámetros los valores de los atributos que creamos
antes. Si lo llevamos a consola seria así:

Sí quisiéramos llamar un método seria lo mismo que un objeto normal porque

se comportan igual:

Pág. 99
 2.4. Prototipos

Lo primero que hay que saber es que en JavaScript casi todo es un objeto, y que
JS está basado en prototipos.

Los prototipos son un mecanismo por el cual un objeto hereda propiedades y

métodos de un padre, entonces en JavaScript la herencia funciona por
prototipos, clonando objetos.

Para que pueda proporcionar herencia a través de cada objeto que contiene un
objeto prototipo. El objeto prototipo podría contener la referencia al objeto del
cual se deben heredar los métodos y las propiedades. Además, cada objeto
prototipo contiene un objeto prototipo que puede heredar aún más los
métodos y propiedades. Esto se conoce como una cadena de prototipo.

La propiedad “Prototype” está oculta y presente internamente, es un objeto.

Para obtener más información visite:

[Link]/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

[Link]

[Link]

[Link]

Pág. 100
 2.5. JSON

“JavaScript Object Notation” y en español seria “Notación de objetos de

JavaScript”, apareció en 1999 y se estandarizo en 2013.

Un uso serio que se usa para transferir información entre un servidor y cliente.
Antes de JSON se utilizaba XML, pero este resulto ser mucho más sencillo,
rápido y eficiente.

Crearemos un archivo con el formato “.json”.

Su formato es similar a los objetos literarios de JS, JSON entiende los números y
arrays, por lo general se suele comenzar con un array.

El atributo debe estar únicamente en dobles comillas y también el (valor si es

string). El resto sería igual que objetos literarios.

Este archivo lo podemos abrir en el navegador, y como detalle se ve muy

cómodo en “Firefox Developer Edition”.

Pág. 101
3. Aplicar Lenguaje al DOM

3.1. Introducción

En este libro aplicaremos los conocimientos de JavaScript Básico al documento

HTML para que el usuario pueda interactuar con él. Un ejemplo, cuando le
damos click a un botón y este cambia de color o aparece otra etiqueta oculta.

3.1.1. DOM

Son las iniciales de “Document Object Model”, es castellano “Modelo de Objeto

de Documento”. Es la interfaz para los documentos HTML (y XML), define la
manera en que se accede y manipular un archivo de este tipo.

Una página web es un documento, incluso no los dice al principio de este con
“doc-type”. El DOM está basado en el paradigma POO, así que cada Nodo (Item
del DOM, por ahora) es un objeto que representa cada parte del documento y
puede ser manipulada mediante JS.

La columna vertebral de este son las mismas etiquetas como ya se dijo, al cual
son unos hijos de otro formando una especie de árbol.

Pág. 102
 3.1.2. Nodos

Un nodo es cada dato que se encuentra en el DOM, además de ser un objeto

como se especificó en el DOM.

Hay diferentes tipos de nodos, existen 12 en total, pero solo serán visto
los más vistos, además que algunos están obsoletos, cada uno además tiene un
valor número y un nombre:

➢ Etiqueta | ELEMENT_NODE |1
➢ Atributo | ATRIBUTTE_NODE |2
➢ Texto | TEXT_NODE |3
➢ Comentario | COMMENT_NODE |8

• $0
Podemos seleccionar un nodo yendo a las herramientas de desarrollador y
clickeando un nodo, después en la consola ejecutamos “$0” y nos devuelve el
nodo.

• .nodeType
Con esta propiedad nos devolverá el tipo de nodo. Ejemplo:

• .nodeName
Es otra propiedad que nos dará el nombre correspondiente del nodo
seleccionado. Ejemplo:

Pág. 103
 3.1.3. Selectores

Seleccionaremos únicamente etiquetas para manipular Nodos del DOM.

• [Link]( )
Lo utilizamos para seleccionar etiquetas solo por ID y solo uso. Debemos
pasarle como parámetro un string con el nombre del ID tal [Link] que se utiliza
en JavaScript para manipular el DOM son mayorialmente los ID. Es la mejor
forma para seleccionar por ID, incluso por las siguientes. Ejemplo:

• [Link]( )
Es un selector global, esto quiere decir que lo utilizamos para seleccionar por
clase, tag, id, atributos, etc… Recibe un string con un selector que veremos a
continuación. Es un selector individual, así que si hay muchos solo escoge el
primero.

• [Link]( )
Es el mismo selector que el anterior, pero la diferencia es que agarra todos los
elementos que puede y no solo uno. Le debemos pasar un string con un
selector variado que veremos a continuación.

Pág. 104
El “document” significa que lo estamos buscando en el documento HTML en el
que nos encontramos (No la etiqueta “html”), nos es el Nodo más alto tiene
hermanos e incluso padre.

Los ID son identificadores únicos así que no es necesario buscarlo en el

document porque solo existe uno y no es necesario buscar apartir de tal lugar.
Escribimos el nombre tal cual, aunque tal vez puede ser algo arriesgado e
inelegible en el código. Ejemplo:

También, podemos comenzar a buscar desde tal elemento, no solo en el

documento, para eso seleccionamos un elemento y aplicamos un selector.
Ejemplo:

Pág. 105
 [Link]. Básicos

En resumen, Es como en CSS:

➢ . | Clase
➢ # | ID
➢ [] | Atributo
➢ | Etiqueta (sin signo)
➢ * | Universal
➢ , | Múltiple

Pág. 106
 • ID
Usamos un hash con el nombre del selector para los id. Ejemplo:

• Clases
Tendrá que comenzar con un punto “.” y después el nombre de la clase.
Ejemplo:

• Etiquetas
Tendríamos que poner el nombre de la etiqueta sin cierre y abertura. Ejemplo:

Pág. 107
 • Universal
Selecciona todas las etiquetas que hay en un elemento especificado, o si lo no
hacemos selecciona todos los que hay en el DOM. Ejemplo:

Ahora veremos el uso de “>” en “jerarquia”.

• Múltiples
Podemos seleccionar varias etiquetas dentro de una variable en JS, se debe
dejar una coma “,” entre cada selector. Debemos utilizar si o si el
“querySelectorAll”. Ejemplo:

Pág. 108
 • Atributos
Hacemos uso de los corchetes cuadrados “[ ]”, dentro podemos pasarle solo el
nombre del atributo y nos selecciona todos los que tengan ese tal atributo,
también le podemos pasar un valor como en HTML y seleccionara todas las
etiquetas que tengan tal atributo y valor. Ejemplo:

También tenemos una notación para filtrar atributos, debemos agregar un signo
antes del igual:

➢ Selecciona todos los elementos que su atributo comience con un

valor que le pasemos, utilizamos el acento circunflejo “^”. Ejemplo:

➢ Selecciona todos los elementos que su atributo termine con un valor

que le pasemos. Utilizamos el signo dólar “$”. Ejemplo:

➢ Selecciona todos los elementos que contenga en su atributo un valor

especifico que le pasemos. Hacemos uso de “*”. Ejemplo:

Pág. 109
 [Link]. Jerarquía

• Hijo directo
Utilizaríamos el mayor-menor “>”, lo usamos para buscar una etiqueta dentro
de otra etiqueta (Hijo), pero no busca en los nietos. Ejemplo:

HTML:

Selecciono todos los div hijos de la clase “padre”, quiere decir todos los divs con
la clase “hijo”.

Pág. 110
 • Hermanos siguientes
Seleccionamos el hermano de un elemento y debemos utilizar “~”. Ejemplo:

HTML:

Acá estamos seleccionando todos los hermanos de etiqueta “div”.

Pág. 111
 • Descendencia
Buscamos elementos que se encuentra directamente en su descendencia,
incluyendo hijos y nietos... Esto lo hacemos dejando un espacio vacío entre los
elementos. Ejemplo:

HTML:

Pág. 112
 [Link]. Filtrados

Para los ejemplos estaremos utilizando en general el siguiente HTML, aunque

hay veces que deberá de cambiar para dejar claro el ejemplo:

• :first-child
Selecciona los elementos que son el primer hijo de su padre. Ejemplo:

• :last-child
Sería lo opuesto a “:first-child”. Selecciona todos los elementos que son el
ultimo hijo de su padre.

Pág. 113
 • :first-of-type
Selecciona todos los elementos que son el primer hijo y diferente de su padre.
Ejemplo:

HTML:

• :last-of-type
Selecciona el ultimo ítem de sus hermanos del mismo tipo. Opuesto a “first-of-
type”.

Pág. 114
 • :nth-child( )
Podemos seleccionar elementos específicos en un patrón que queramos o un
elemento en concreto.

Elemento por índice:

Lo primero que podés hacer es seleccionar un elemento de acuerdo a su índice
padre. Ejemplo:

Estamos seleccionando el Ítem 1 y 4 que son el primer hijo de su padre.

Hay que tener en cuenta que acá comienza a contar en 1 y no en 0.

Sería prácticamente lo mismo que utilizar el Split para seleccionarlo.

Pág. 115
Elementos pares e impares:
Puede ser usado también para seleccionar elementos pares con “even”, o
impares con “odd” pasándolo como parámetro.

➢ even | Pares
➢ odd | Impares

Ejemplo:

HTML:

Pág. 116
Patrón personalizado:
Seleccionamos ítems en un orden especifico que le pasemos, por ejemplo,
queremos que cada 4 ítems nos seleccionen uno. Puede recibir 3 parámetros (1
opcional):

:nth-child(An+B)

1. A | Tamaño de pasos
2. n | Indicar que es un patrón personalizado
3. B | Pasos desplazados [Opcional]

Mostraremos un par de ejemplos usando el mismo HTML:

Ejemplo 1:

Estamos seleccionando cada 3 pasos un ítem, en este caso se selecciona

los ítems 3 y 6.

Ejemplo 2:

Estamos seleccionando cada 4 pasos un ítem y lo estamos desplazando

1 paso atras, daría como resultado ítem 4 y 8.

Recordad que los elementos pares son igual a 2n y los impares a 2n+1

even = 2n

odd = 2n+1

Recordar también que comienza siempre a contar desde el primer elemento

Pág. 117
 • :nth-last-child( )
Sería prácticamente lo mismo que nth-child aplica las mismas reglas, pero en
vez de contar desde el primer elemento comienza en el último. Ejemplo:

Nos selecciona el Ítem 3 y 6 que son el ultimo de su padre.

Pág. 118
 3.1.4. DOM Traversing

Se refiere a recorrer el DOM para saber loso elementos que se encuentra en su

entorno como hijos, hermanos, padres, nietos, abuelos, etc…

Vamos a estar utilizando este contexto de forma predeterminada para los

ejemplos:

Pág. 119
 [Link]. Hijos

• .childNodes
Nos devuelve todos los nodos hijos, pero no los nietos. Ejemplo:

• .children
Nos devuelve todas las etiquetas hijos, pero no nietos. Ejemplo:

• .firstChild
Devuelve el primer nodo que encuentra en el elemento seleccionado

Pág. 120
 • .firstChildElement
Nos devuelve el primer elemento.

• .lastChild
Nos devuelve el ultimo nodo que encuentre.

• .lastElementChild
Nos devuelve el último elemento.

• .hasChildNodes( )
Nos devuelve un boolean si el elemento seleccionado tiene almenos un nodo
dentro.

Pág. 121
 [Link]. Hermanas

• .nextSibling
Devuelve el nodo hermano siguiente.

• .nextElementSibling
Devuelve el elemento hermano siguiente.

• .previousSibling
Devolverá el nodo hermano anterior.

• .previousElementSibling
Nos dará el anterior elemento hermano que seleccionamos.

Pág. 122
 [Link]. Padres

• parentNode
Llama el nodo padre que seleccionamos.

• parentElement
Llama al elemento padre que seleccionamos.

Sí quisiéramos subir otro nivel superior volveríamos a pasarle la misma sintaxis

sucesivamente hasta el punto que queramos. Ejemplo:

Pág. 123
 3.2. Manipular DOM

3.2.1. NodeList

Cuando llamamos una lista de elementos con el querySelectorAll en la consola,

no nos devuelve un array, incluso no los dice la misma consola:

Es un “NodeList”, una lista compuesta por nodos de cualquier tipo incluyendo

texto, atributos, etc… Lo mismo pasaría con otros tipos de datos como
“HTMLCollection” que solo son etiquetas. A lo que se quiere llegar es, no son un
array y no puede ser manipulado como tal.

No podemos hacer interacciones básicas como recorrer, modificar, agregar, usar

“map”, “filter”, etc…

• [Link]( )
Utilizamos este método del objeto “array”, para transformar el NodeList a un
arreglo, y poder hacer todas las interacciones de este.

Debemos pasarle como parámetro el “NodeList”, “HTMLCollection” o lo que

queramos transformar. Ejemplo:

Pág. 124
 3.2.2. Contenido Nodos

Vamos aprender a obtener valores y tener la capacidad de modificarlos, lectura

y escritura.

[Link]. Etiquetas

• .textContent
Con esta propiedad podemos sacar el contenido texto que se encuentra en la
etiqueta. Solo texto no las etiquetas hijos, pero si el texto de estas.

• .innerHTML
Nos devuelve todos los nodos Etiquetas con sus atributos y Texto, incluyendo a
todos sus hijos y nietos.

• .outerHTML
Recibimos todo el elemento completo con sus atributos, etiquetas y texto de si
mismo.

Sí quisiéramos modificar del “textContent”, “innerHTML” o “outerHTML”

tendríamos que igualarlo a un valor. Ejemplo:

Pág. 125
 [Link]. Atributos

• .getAttribute( )
Debemos seleccionar una etiqueta, después pasarle un string con el nombre del
atributo que queremos que nos devuelva como valor. Ejemplo:

• .setAtributte( )
Asignamos un nuevo atributo o modificamos el valor de uno ya preexistente,
seleccionamos primero el elemento y luego le pasamos como parámetro a este
método:

1. Atributo
2. Valor

Ejemplo:

Pág. 126
Hay otra manera más sencilla para asignar u obtener un atributo.

Recordemos que en JavaScript todo es un objeto incluyendo las etiquetas, y la

mayoría de atributos generales se encuentran en el mayor scope, así que
podemos acceder de la misma manera que un objeto, con la sintaxis de punto o
corchetes cuadrados. Ejemplo:

Ahora sí, no es del todo recomendado porque hay atributos que no se

encuentran en el scope mayor del objeto y si encuentra en otro lugar inferior.
Por eso es debemos saber de igual manera “getAtributte” y “setAtributte”.

Pág. 127
 [Link]. Clases

• .classList
Nos devuelve un arreglo con las clases asignadas del elemento que
seleccionamos.

• .[Link]( )
Estamos agregando una nueva clase al elemento seleccionado, debemos
pasarle un string con el nombre de este, y podemos pasarle cuantos parámetros
queramos. Ejemplo:

• .[Link]( )
Removemos clases que contiene el elemento seleccionado. Debemos pasarle un
string con el nombre de la clase, se lo pasamos como parámetro y la cantidad
que queramos. Ejemplo:

• .[Link]( )
Elimina o agrega una clase dependiendo el caso. Sí ya la tiene la elimina, sí no la
tiene la asigna. Nos devuelve un boolean indicando si se agregó o elimino.

Pág. 128
 3.2.3. Insertar Nodos

Seleccionamos primero el elemento al que vamos a insertar, después le

pasamos como parámetro un nodo que puede texto o una etiqueta.

A continuación, veremos cómo crear tags, o podemos extraerlas de otras.

• .before( )
Hermano anterior.

• .after( )
Hermano siguiente.

• .prepend( )
Primer hijo.

• .append( )
Ultimo hijo.

Ejemplo:

En este caso estamos cortando una etiqueta de su lugar y la estamos pegando

en el elemento “caja”.

Pág. 129
 3.2.4. Crear Etiquetas

• [Link]( )
Debemos pasarle el nombre del tag que queremos crear en forma de string.

Lo ideal es guardarlo en un variable y después manipularlo como queramos

para insertarlo en el documento. Estos datos son guardados en la memoria
RAM.

Ejemplo:

Pág. 130
 • [Link]( )
Un error de rendimiento es cuando tenemos muchos elementos creados y los
vamos insertando en el documento 1 por 1, esto es algo negativo al cual le
cuesta mucha labor al DOM.

Los que nos permite esto es almacenar todos esos datos y pintarlos todos
juntos a la vez cuando estén listo, y no dibujarlos en el documento 1 por 1.
Aumenta notablemente el rendimiento del programa.

Debemos estar insertando en esta estructura Nodos, después lo insertamos en

el documento. Ejemplo:

Pág. 131
 3.2.5. Eliminar, Remplazar y Clonar

• .remove( )
Podemos eliminar nodos completamente incluyendo a toda su descendencia,
no recibe ningún parámetro. Ejemplo:

Sí quisiéramos eliminar todos los hijos y dejar la etiqueta vacia, podríamos hacer
uso de “innerHTML” y darle valor vacío. Ejemplo:

• .replaceWith( )
Remplazamos todo el “outerHTML” del nodo que seleccionamos, y le pasamos
como parámetro el nuevo nodo. Ejemplo:

Pág. 132
 • .cloneNode( )
Duplicaremos un nodo y será guardado en memoria al cual debemos insertar en
algún lugar donde queramos. Recibe un parámetro boolean al que si es true
incluirá también a todos sus elementos hijos. Ejemplo:

Pág. 133
 3.2.6. Etiqueta Template

La etiqueta <template> de HTML, nos permite crear plantillas que luego

puedan ser re utilizadas, como una clase en POO. Ejemplo:

Este elemento no se imprime en pantalla si vamos al navegador no lo podremos

encontrar, pero lo podremos ver en las herramientas de desarrollador, si lo
encontramos no saldrá “document-fragment” es un fragmento realmente.

Este elemento debemos seleccionar su “content”, duplicarlo y rellenarlo con

datos que deseamos. Ejemplo:

Pág. 134
 3.2.7. CSSSOM

▪ CSSOM son las siglas de “CSS Object Model”, en español “Modelo de

Objeto de CSS”.

▪ Es básicamente un "mapa" de los estilos CSS que se encuentran en una

página web.

▪ Es muy parecido al DOM, pero para CSS en lugar de HTML.

▪ Los navegadores utilizan CSSOM combinado con DOM para mostrar

páginas web.

▪ Podemos hacer interacciones mediante JavaScript para leer, escribir o

modificar estilos

Pág. 135
 • getComputedStyle( )
Nos devuelve un objeto con todos los estilos calculados del elemento que le
pasemos como parámetro. Ejemplo:

• .style
Permite modificar el valor de un estilo del elemento que seleccionamos. La
sintaxis seria seleccionar el elemento, utilizar la propiedad “style” y ahí agregar
el estilo CSS que queremos modificar. Ejemplo:

Después de que manipulamos todo el CSS con esta propiedad, y accedemos a

“style “nos dirá todos los estilos que modificamos previamente. Ejemplo:

Nota: Si le pedimos tamaño en siempre nos devolverá pixeles, al final de cuenta

todo se convierte a pixeles.

Pág. 136
 3.3. Eventos

Un evento es algo que ocurre en el DOM, puede ser producido tanto por el
usuario como por el mismo programa, el navegador, o el mismo DOM

Pero todas esas cosas que ocurren son los eventos, aunque los eventos que más
se usan son con la interacción del usuario.

3.3.1. Tipo Atributo

La manera más tradicional es darle como atributo a una etiqueta de botón por
lo general (aunque puede ser cualquiera):

• >y pasarle una fusión que se activa cuando se le de click. Ejemplo:

HTML:

JavaScript:

Esta es la manera tradicional y no es recomendado usarlo actualmente y nos

puede traer problemas.

Aunque tiene una sintaxis parecida a los frameworks como angular o react.

Pág. 137
 3.3.2. Eventos Modernos

Esta es la manera moderna que se utiliza actualmente para hacer eventos.

• .addEventListener( )
Recibe 2 parámetros, el primero es el tipo de evento en string, y el segundo es
una función callback que se va a ejecutar cuando ocurra el tipo de evento que le
pasemos. Ejemplo:

Cuando le de click al “button” saltara en la consola que diga un “hola”, este es

un ejemplo básico, ahora veremos todos los diferentes tipos.

También, en vez de poner todas las instrucciones ahí dentro, podemos llamar a
una función externa para que le código este más ordenado. Ejemplo:

• .on + event
Recordemos que en JS todo es un objeto, así que en realidad en los eventos
estamos accediendo a un método y dándole una función. Así que podemos
saltearnos el “addEventListener” y utilizar la sintaxis de “on + event”, debemos
seleccionar un evento, pasarle la sintaxis e igualarlo a una funcion callback.
Ejemplo:

Pág. 138
 3.3.3. Mouse

Estos eventos se ejecutarán cuando hagamos algo con el mouse y debemos

pasárselo como “eventName”:

• click
Se ejecuta cuando le demos click a algo.

• dblclick
Se activará cuando le demos doble click rápido a un evento.

• mouseenter
Se activa cuando el mouse entra al área de un elemento.

• mouseleave
Sería lo opuesto, se activa cuando el mouse sale de un área, primero debe
entrar y después cuando salga se ejecutará.

• mousedown
Se ejecuta cuando dejas presionado el click

• mouseup
Se activa cuando sueltas el click. Se utiliza por ejemplo cuando un usuario
arrastra algo.

• mousemove
Se ejecutará cuando el mouse se mueve dentro de un elemento.

Pág. 139
 [Link]. Menú contextual

• contextmenu
Captura cuando le demos click pero con el botón derecho, y salta el típico menú
contextual de todos los navegadores, con esto podemos crear uno
personalizado.

o .preventDefault( )

Para que no muestre el menú contextual del navegador usamos este metodo
para el parámetro que recibe la función de callback. Ejemplo:

Incluso podríamos hacer nuestro propio menú contextual con esto.

Podemos saber la posición “X” e “Y” de cuando se hizo click derecho,

accediendo a los siguientes valores del parámetro en el callback:

• layerX | pageX
• layerY | pageY

Ejemplo:

Pág. 140
Con esos valores podríamos crear nuestro propio menú contextual. Ejemplo:

Pág. 141
 3.3.4. Teclado

• keydown
Sí se teclea una tecla será activado, incluso cuando la dejas presionada.

• keyup
Se activa cuando se suelta la tecla.

• keypress
Igual que “keydown”, pero ignora unas teclas de control, como “shift”, “fn”, “tab”
o “alt”.

Pág. 142
Podemos saber que tecla le dio el usuario en un input pasándole un parámetro
al callback del evento, este nos devolverá un objeto con información del evento.

El objeto del evento contiene propiedades como:

➢ .key | Tecla presionada.

➢ .keyCode | Código ASCII de la tecla presionada.
➢ .ctrlKey | Sí presiono “ctrol”.
➢ .altKey | Sí presiono “alt”.
➢ .shiftKey | Sí presiono “shift”

Ejemplo:

Incluso podríamos decirle que sea en todo el documento, no solo en un

elemento en específico. Ejemplo:

Pág. 143
 3.3.5. Formulario

• submit
Se ejecuta cuando el formulario se envía, entonces quizás quisiéramos saber si
los campos input están correctamente llenados. Debemos seleccionar el
formulario. Ejemplo:

No es lo mismo que darle un evento botón, detecta el submit de todo el

formulario, debido a que también puede ser enviado cuando le damos enter a
un input no botón o de más.

Aunque hay un detallito, cuando le damos a enviar automáticamente se recarga

la página, para evitarlo le podemos pasarle un parámetro al callback del evento
y pasarle a este el método “.preventDefault( )”. Ejemplo:

• focus
Ocurre cuando le hacemos click en un input, o cuando le hacemos focus mejor
dicho. Incluyendo también cuando nos movemos mediante el tabulador.

• blur
Es lo opuesto a focus, cuando soltamos el foco de un input

Pág. 144
 • reset
Ocurre cuando reseteamos el formulario con el input tipo reset.

• change
Ocurre cuando un input cambia de valor. Por Ejemplo, en un input tipo
checkbox queremos saber si le dio o no al botón de marcado o cuando
selecciona una opción de una etiqueta “select”. Ejemplo:

HTML:

JavaScript:

Si vamos al contenido del elemento en la consola y vamos a tarjet > checked,

nos devolverá un bolean si este marcado o no. Ejemplo:

Pág. 145
 • .value
Esto es una propiedad más que un tipo de evento, nos permite sacar los valores
que introduce el usuario en los campos input, al cual le tenemos que agregar
esa propiedad en JavaScript. Ejemplo:

3.3.6. DOM

Es un evento que se ejecuta cuando termino de cargar todo el DOM, pero no al

punto de que terminar de cargar archivos muy pesados como imágenes.

Lo bueno es que podemos ponerlo donde queramos, no necesariamente al final

del body.

Debemos seleccionar el documento. Ejemplo:

Pág. 146
 3.3.7. Navegador

• load
Es parecido al DOMContentLoaded, con la diferencia de que ocurre cuando
cargue toda la página incluyendo archivos pesados como las imágenes o
peticiones. Se activa después del DOMContentLoaded.

• scroll
Se activa cuando haces scroll en un determinado elemento o el mismo
documento. Ejemplo:

Para saber la posición del scroll debemos pasarle al elemento que se le hace
scroll (this):

➢ scrollX | Horizontal
➢ scrollY | Vertical

• resize
Ocurre cuando redimensionamos la pantalla. Ejemplo:

Incluso podemos saber el tamaño de la pantalla:

Pág. 147
 3.3.8. Multimedia

Se utilizan para videos y no son eventos en sí, más bien le daremos vamos a ser
un evento de tipo “click” y se ejecutara un método de inicio o pausa del video.

Debemos seleccionar la etiqueta “video”, después pasarle los siguientes

métodos cuando queramos:

• .play( )
Reproduce el video

• .pause( )
Pausa el video.

Ejemplo:

HTML:

JavaScript:

Pág. 148
 3.3.9. Delegación de eventos

Hagamos de cuenta que tenemos una galería con muchas imágenes, y

queremos que al hacerle click no los muestre la imagen en tamaño grande (live
box), tal vez una solución sería darle un evento a cada uno, pero no es lo ideal y
más eficiente, Además que si se agrega más imagen sería una labor muy
pesada.

Con la “delegación de eventos” seleccionamos el evento padre y le damos un

evento cuando haga click en él o un elemento de su dependencia, detecta el
elemento al que se le hizo click en él, después nosotros le podríamos dar ciertas
funciones que quisiéramos.

Pág. 149
Ejemplo Práctico:

Obviamente hay unas fallas en el programa y debemos solucionarlo de acuerdo

a nuestro proyecto

Pág. 150
 3.3.10. this

Como recordamos, this es equivalente al objeto actual en que estamos

trabajando, y el de mayor scope.

El this funciona de distinta manera dependiendo el tipo de función que

utilizamos como callback del evento.

La función de tipo “arrow function” es equivalente al objeto más alto, que sería
en nuestro caso “window”. La función clásica “function”, hacemos referencia a la
etiqueta que le estamos pasando el evento. Ejemplo:

Pág. 151
3.4. BOM

▪ “Browser Object Model”, en español “Modelo de Objeto del Navegador”.

▪ El BOM es una representación más amplia de todo lo que proporciona el

navegador, incluido el documento actual, la ubicación, el historial, los
marcos y cualquier otra funcionalidad que el navegador pueda exponer a
JavaScript.

▪ Mediante BOM, es posible redimensionar y mover la ventana del

navegador, modificar el texto que se muestra en la barra de estado y
realizar muchas otras manipulaciones no relacionadas con el contenido
de la página HTML.

▪ El BOM es una jerarquía que comienza en “window” (el objeto de más

alto nivel) que tiene propiedades como “document”, “history”, “location”,
“navigator”, “screen”.

Pág. 152
 3.4.1. Objeto window

Es el objeto de más alto nivel en el navegador, superior al DOM.

Todos los objetos en JS vienen del objeto global “window”, así que cuando se ve
una función que en teoría es nativa de JavaScript, estamos accediendo a un
método o propiedad del objeto window.

No es necesario escribir al principio la clave “window” porque se sobre entiende

que accedemos ahí mismo, como es el de más alto nivel. Ejemplo:

Pág. 153
Propiedades:
• console

Como ya sabemos, es el objeto que entrega en consola información; tiene

varios métodos, como: “.log( )”, “.error( )”, “.time( )”, “.debug( )”, etc… Podemos
verlo accediendo al objeto.

• navigator

Nos da información sobre el navegador, sobre el software en sí.

• location

Nos dará información sobre la URL de la página en que nos encontramos

actualmente.

• history

Información sobre el historial del navegador, como la fecha de recarga, delante

y atrás.

A continuación, veremos cómo utilizar algunos de estos métodos.

Pág. 154
Métodos:
Son métodos ya visto en JS básico, pero se hará un repaso y además serán
agregados otros métodos no vistos.

• alert(mesagge)

Ya lo vimos anteriormente, pero, manda un mensaje que debemos indicar y es

dirige al usuario.

• confirm(mesagge)

Manda un modal de confirmación y devuelve un boolean dependiendo lo que el

usuario elija (Le saldrá 2 botones de aceptar o cancelar)

• promt(mesagge)

También ya se vio anteriormente, manda una alerta con una barra para que el
usuario guarde datos.

• open( )

Nos permite abrir una nueva instancia del navegador y se abrirá con algunos
parámetros

1. URL en string.
2. Un nombre cualquiera.
3. Propiedades CSS, tamaño y altura.

Ejemplo:

• close( )

Sirve para cerrar ventanas pero que únicamente abriste con open( ), es debido a
temas de seguridad.

Pág. 155
 [Link]. Timers

Permiten ejecutar acciones después de un tiempo determinado, o que se

repitan periódicamente, son métodos del objeto “window”. Tenemos 2 y ambos
reciben los mismos parámetros:

1. Funcion callback con todas las instrucciones

2. Tiempo en milisegundos

• setTimeout( )
Ejecuta lo que está en el callback después de cierta cantidad de tiempo una sola
vez. Ejemplo:

• setInterval( )
Ejecuta las instrucciones repetidas cada X tiempo dado. Ejemplo:

• clearInterval( )
Podemos parar el intervalo de tiempo, le debemos dar un parámetro que será el
intervalo, en cual debe estar dentro de una variable. Ejemplo:

Pág. 156
 3.4.2. Objeto location

Nos entrega la información de la URL de la página web.

Propiedades:

• href
URL actual, se puede cambiar para cambiar la página actual. Es de lectura y
escritura. Ejemplo:

Además, nos permite redirigirnos, debemos igualarlo a un string con la URL.

• host
Nos devuelve el dominio y puerto. Ejemplo:

Podemos saber si una URL es interna o externa. Ejemplo:

Todos los links internos se pusieron de color rojo. Si quisiéramos obtener los
externos le debemos dar a la condicional el operador unario negativo “!” .

Pág. 157
 • hostname
Nombre del host.

• port
Puerto

• protocol
Tipo de protocolo.

• origin
Protocolo + dominio.

• hash
Ya sabemos que para usar enlaces internos se usan los hashes #, y podemos
detectar si se encuentra uno con esta propiedad.

• pathname
Ruta interna luego del dominio, o mejor dicho el “path”.

Método:

• reload( )
Recarga la página.

Solo hay un método

Pág. 158
 3.4.3. Objeto history

Contiene el historial de navegación de la pestaña.

Propiedad:

• lenght
Única propiedad que nos dice la cantidad de veces que nos movimos en una
misma pestaña, el valor mínimo es 1.

Métodos:

• back( )
Te envía atrás.

• forward( )
Te envía adelante.

• go(position)
Te envía la posición que le indiquemos.

Siendo “1” adelante, y “-1” atras. Podemos ir para atrás o adelante con la
cantidad que queramos. Ejemplo:

Pág. 159
 3.4.4. Objeto screen

Nos devuelve datos de la pantalla del cliente, no de la ventana.

Propiedades:
• width

Ancho de la pantalla.

• height

Altura de la pantalla.

Pág. 160
 3.4.5. Almacenar Datos

[Link]. localStorage y sessionStorage

localStorage:
Es una manera de almacenar información dentro del navegador y que persista
mientras estas navegando en la página, también sigue existiendo estos datos en
archivos que se encuentra en el path.

es como una memoria que permanece mientras navegas en la página web, es

eliminada cuando vaciamos nosotros con métodos estos datos, no puede ser
cuando se reinicie.

Para ver todos los datos que guardamos podemos ir a la consola del navegador
e ir a “Application”, “local storage” o “almacenamiento local”.

sessionStorage:
Tiene las mismas propiedades, métodos y teoría que “localstorage”. Pero tiene
una diferencia:

La información será guardada hasta que se cierre el navegador o la pestaña,

pero sobrevive al recargue de página.

Pág. 161
Datos Extras:
“localStorage” es un objeto de “window”. Como es un objeto “localStorage”,
podemos asignar, eliminar, manipular toda la información de este en forma de
objeto.

Guardad un localStorage:
• [Link](" ”, “ ”)

Recibe 2 parámetros:

1. Nombre
2. Información en string

Ejemplo:

Recuperar Elemento:
• [Link](“ ”)

Le debemos pasar el nombre de la información guardada y nos devolverá sus

datos. Ejemplo:

• [Link]( )

Obtenemos un ítem por su índice, debemos pasarle como parámetro uno.

• [Link]

No es un método, es una propiedad. Nos devuelve un número que es la

cantidad de datos guardados.

Pág. 162
Guardar objetos:
No podemos guardar un objeto como tal porque nos dira “[object Object]”.
necesita que este como un string o número. Podemos hacer lo siguiente:

Tenemos un objeto llamado “JSON” (De la jerarquía “window”), que nos permite
múltiples herramientas.

• [Link]( )

Transforma un Objeto a un String.

• [Link]( )

Transforma un String a un Objeto. Ejemplo:

Eliminar localStorage:
• [Link](“ ”)

Elimina un dato especifico que le pasemos como nombre.

• [Link]( )

Elimina por completo toda la información guardada en localStorage.

Pág. 163
 [Link]. cookies

▪ Es muy parecido a localStorage. Nos permite guardar un archivo de texto

en el navegador del cliente.

▪ Estas son muy livianas y son las que se utilizan para intercambiar
información con un servidor.

▪ Una cookie debe pesar como máximo 4kb y podemos guardar 20 en

promedio de los navegadores.

▪ Podemos acceder desde un archivo que se encuentra en una ruta que

decidamos, al igual que localStorage.

▪ Las cookies siempre tienen una fecha de caducidad y son eliminadas por
esta, o el usuario puede ir a configuración del navegador y eliminarlas.

▪ Las cookies no son mutables, entonces para modificarlas debemos

sobrescribirlas y cambiar su valor y opciones.

Podemos ver las cookies guardadas yendo a las herramientas de desarrollador,

después a “almacenamiento/aplication” > cookies.

Pág. 164
Crear Cookie:
Tenemos que acceder a “document” y después a “cookie”, la igualamos a un
string, este recibe nombre y valor separado por un igual “=”. Ejemplo:

Después para agregar diferentes opciones a la cookie, debemos separarlos por

un “;”, y sería la misma sintaxis de “nombre=valor”. Ejemplo:

Ahora veremos cómo utilizar las diferentes opciones disponibles.

Acceso desde ruta:

Podemos especificar desde que ruta/path solo pueden tener acceso la cookie.
Utilizaríamos el nombre “path”. Ejemplo:

Fecha de expiración:
Sí no especificamos una fecha, la cookie será eliminada cuando sierre el
navegador o la pestaña.

Utilizamos la palabra clave “expires” y lo igualamos a una fecha utilizando el

formato del objeto “Date” (Será visto más adelante). Ejemplo:

Pág. 165
Edad máxima:
Le damos un tiempo en segundos de vida antes de que expire. Utilizamos la
clave “max-age”. Ejemplo:

Obtener cookies:
Debemos utilizar simplemente “[Link]” y nos devolverá todas las
cookies con su nombre y valor separados por “;”. Podemos separarlos por split.
Ejemplo:

Eliminar:
Debemos sobrescribir la cookie con el mismo nombre, y darle una fecha de
caducidad pasa a la fecha actual de ese momento, o darle un “max-age” muy
pequeño.

Pág. 166
 3.5. Objeto Date

Trae las fechas del sistema operativo que tengamos.

3.5.1. Instancia

No podemos trabajar con este objeto sin instanciarlo.

• new Date( )
Te dice todos los datos de la hora si lo llevamos a consola. Ejemplo:

• new Date(year,month,day)
Le podemos pasar parámetros para que nos diga la hora del tal día, mes y año.
Ejemplo:

Nota: El mes cuenta de 0 a 11 y el día es del mes.

• new Date(year,month,day,hours,minutes,seconds)
Podemos darle más parámetros.

Pág. 167
 • new Date(string)
También le podemos dar un string, el string que nos devuelve cundo lo
llamamos. Ejemplo:

3.5.2. Métodos

No tenemos propiedades, solo métodos.

➢ [Link]( ) | Año
➢ [Link]( ) | Mes
➢ [Link]( ) | Dia del mes en numero
➢ [Link]( ) | Dia de la semana en numero
➢ [Link]( ) | Hora
➢ [Link]( ) | Minutos
➢ [Link]( ) | Segundos
➢ [Link]( ) | Milisegundos

Pág. 168
4. AJAX y WebSockets

4.1. Introducción – Protocolo HTTP

Si tenemos conocimientos previos de redes puede saltearse este capítulo, pero

es recomendado leerlo.

4.1.1. Definición

▪ “HTTP” son las siglas “Hyper Text Transfer Protocol”, que en español seria
“Protocolo de transferencia de Hipertexto”.

▪ Diseñado en 1991 por www “World Wide Web”:

▪ Es un protocolo para poder hacer peticiones a un servidor. Pero, ¿Qué es un

protocolo? Es un conjunto de reglas que debemos seguir para conseguir un
resultado.

Por ejemplo, cuando vamos a una cena existe un protocolo como primero
los platos, después los cubiertos, después la comida que debe ingresar
primero, como solicitar más platos, etc…

▪ Define la manera de la que se debería comunicar un cliente y un servidor.

▪ La web no es el único que utiliza este protocolo, también se utiliza para

escaneos, impresiones, videojuegos, aplicaciones escritorio/móvil, etc…

Pág. 169
▪ Lo que realmente ocurre cuando vemos una página web, es que por dentro
el navegador está haciendo una petición http, mediante internet, a un
servidor web y es este el que devolviendo una respuesta http, nos envía el
HTML, CSS, JavaScript, imágenes, videos, etc (c/u por cada petición) que son
procesador por el navegador dando como resultado final la página web que
vemos:

Pág. 170
▪ Un ejemplo de la comunicación seria:

Petición:
Una petición debe tener como mínimo estos datos:

Iría primero el tipo de método “GET”, después la ruta “/” y por último la
versión del protocolo “HTTP/1.1”

Después irían los “headers” o “Encabezados” (Se explicará más adelante).

Pág. 171
 Respuesta:

Primero la versión del protocolo “HTTP/1.1”, después el código de estado junto

su mensaje de estado.

Van los headers junto al final su respuesta que puede ser un documento
“HTML”.

Pág. 172
▪ Existe “HTTPS”, la “S” lo que está diciendo es que la información está siendo
entregada por medio de un canal cifrado con un certificado “SSL” pero el
protocolo sigue siendo el mismo.

▪ También están los “proxy”, que son herramientas que nos permite hacer
varios procesos como cachear la información.
ejemplo: Veo que están haciendo muchas peticiones de un mismo archivo
a un servidor y cambia poco, lo que sea hace es cachearlo para que el
servidor tenga que estar leyendo el disco duro constantemente y volverlo
a entregar, entonces el proxy se guarda esos archivos
Filtra información en busca de virus o accesos no permitidos.

Pág. 173
 4.1.2. Métodos

Para poder hacer una petición en HTTP, debe venir incluido el tipo de método
para saber qué acción debe realizara el servidor.

Existen muchos métodos en teoría, pero en la práctica los que más usamos son
4 (GET, POST, PUT y DELETE):

• GET
En su traducción seria “obtener”. Cuando ingresamos a una página web estamos
utilizando el método get, como por ejemplo: “[Link] estoy haciendo
una petición al host “[Link]” a la ruta “/” (ósea el inicio)

Si vamos a las “herramientas de desarrollador” y vamos a “network” nos dirá

todos los datos.

➢ Se utiliza para obtener información.

➢ No puede enviar un cuerpo/body, nos envía toda la url.
➢ Nos dice la información en la URL
➢ No hay efectos secundarios

• POST
Lo usamos cuando enviamos información, como por ejemplo un formulario de
registro.

➢ Si podemos enviar un cuerpo/body con los campos rellenados.

➢ Lo utilizamos para enviar información.
➢ La información no es mostrada en la ulr

Pág. 174
 • PUT
Lo mejor es utilizarlo para actualizar un recurso o se utiliza para enviar un
formulario como “POST”, pero la diferencia es que “POST” tiene efectos
secundarios y este no.

• DELETE
Borra un recurso que le indiquemos.

• OPTIONS
Nos permite hacer peticiones entre dominios diferentes.

Por ejemplo: Hagamos de cuenta que “[Link]” hace una petición a

“[Link]”, como son diferentes, los navegadores restringen ese tipo
de peticiones por seguridad del usuario, así que en el servidor se habilita
servidores externos de confianza para intercambiar información

➢ A este intercambio, se lo conoce como “CORS”, desde un dominio

hago petición a otro dominio.
➢ Los navegadores restringen peticiones de un dominio a otro por
seguridad del usuario.
➢ En el server se debe agregar otros servidores externos de confianza
para poder comunicarse.

(Ya se verá más adelante, ahora no es relevante)

Pág. 175
 4.1.3. Código de Estado

Este código identifica como la información solicitada o enviada.

Como por ejemplo el más famoso “404” que es un error del cliente porque
intento ir a una página no existente, ahora se verán más a detalle.

Los códigos de estado se dividen en 5 grupos:

• 100 – 199 | Respuesta informativa

Es un código de respuesta informativa queriendo decir que la petición por el
navegador aún está en proceso, no necesariamente es algo negativo.

• 200 – 299 | Petición correcta

Cuando se realiza una petición correcta nos devuelve uno código de este grupo.

• 300 – 399 | Redireccionado

Cuando hacemos una petición a un sitio, y por algún motivo se movió ese
elemento, nos devuelve un código de este grupo y tal vez nos redirecciona.

• 400 – 499 | Error del cliente

Se debe a por un error del cliente, como ya se vio en el ejemplo de antes en que
un cliente hace una petición a una página que no existe.

• 500 – 599 | Error del servidor

Ocurre cuando hay algo mal programado en el backend o no fue capaz de
procesar alguna información o no se puede conectar con una base de datos.

Pág. 176
Los códigos de estados únicos más comunes son:

• 200 | OK
La petición se realizó correctamente.

• 201 | Created

La solicitud ha tenido éxito y se ha creado un nuevo recurso como resultado de

ello.

• 202 | Accepted
La petición ha sido aceptada para procesamiento, pero este no fue completado.

• 204 | No content
La petición fue cumplida pero la respuesta no tiene contenido (Excepto en la
cabecera).

• 304 | Not Modified

Ocurre cuando un usuario pide una petición, pero el navegador cachea muchas
cosas, y como no fue modificado utiliza la información cacheada.

• 400 | Bad Request

El servidor no puede entender la petición, o no debe, por un error del cliente
como una sintaxis mal dada.

• 401 | Unauthorized
Similar a 403, ocurre cuando el usuario no puede acceder a la información
porque necesita una autorización.

Pág. 177
 • 403 | Forbidden
No tiene los permisos suficientes para acceder a la información con sesión
iniciada.

• 404 | Not found

Ocurre cuando un cliente quiere acceder a una página que no existe, pero talvez
si en el futuro. Es el más famoso que hay.

• 500 | Internal Server Error

El servidor ha encontrado una situación que no sabe cómo manejarla.

Pág. 178
 4.1.4. Encabezados

Es información extra que se envía entre la petición o respuesta, se utiliza para

saber cómo controlar esta información enviada o recibida.

Es información acerca del navegador del cliente, del servidor, de la petición o

respuesta.

En las cabeceras podemos enviar mayor información al cual se lo conoce como

metadatos de la petición.

Los puntos más difíciles de la cabecera son:

• Cookies
➢ Almacena información en el navegador del usuario, puede ser
información que se guarde según navegue el usuario en la página
web, como por ejemplo si busca “computadoras” le saldrá en
recomendados “computadoras”, o que ítems agrego al carrito de
compras.

➢ Estas Cookies tienen fecha de caducidad.

➢ Solo se pueden almacenar como máximo 4kb en la mayoría de

navegadores.

➢ Es más fácil de agarrar para el back-end y front-end

• Accept
Le hacemos una petición a un servidor y le debemos indicar como debe de ser.
Por ejemplo:

➢ El cliente decide si acepta o no esa información que nos devuelve.

➢ Le podemos decir en que formato no los devuelve, como: JSON, texto

plano, XML.

Pág. 179
Las Cabeceras pueden ser agrupadas de acuerdo a sus contextos:

• Cabecera general:
Cabeceras que se aplican tanto a las peticiones como a las respuestas, pero sin
relación con los datos que finalmente se transmiten en el cuerpo.

• Cabecera de consulta:
Cabeceras que contienen más información sobre el contenido que va a
obtenerse o sobre el cliente.

• Cabecera de respuesta:
Cabeceras que contienen más información sobre el contenido, como su origen
o el servidor (nombre, versión, etc.).

• Cabecera de entidad:
Cabeceras que contienen más información sobre el cuerpo de la entidad, como
el tamaño del contenido o su tipo MIME.

Pág. 180
 4.2. AJAX

4.2.1. ¿Qué es?

▪ Fue creado por Microsoft en 1999, AJAX son las siglas de “Asynchronous
JavaScript And XML”, en español seria “JavaScript y XML asincrónicos”.

▪ No es un lenguaje de programación sino un conjunto de tecnologías de

desarrollo web incluyendo: “HTML”, “CSS”, “JavaScript” y “XML”. Ahora sí todo
el código será escrito en el formato JS con su lenguaje.

▪ Nos permite actualizar parte de una página con información que se

encuentra en un servidor sin tener que recargar toda la página, o enviar un
formulario sin ser redirigido.

▪ No debemos instalar nada, ya está de forma predeterminada en los

navegadores debido a que es un estándar.

▪ La información puede ser transportada en muchos formatos (HTML, CSS o

texto plano), el más común actualmente es “JSON”, pero antes era “XML”
(que incluso está en el nombre AJAX), esto debido a que JSON es más liviano,
rápido y eficiente que XML.

▪ Las acciones que realiza AJAX son pueden ser asíncronas o no, aunque en la
gran mayoría de casos será asíncrona, más adelante se explicara que es.

Pág. 181
 4.2.2. Mediante HTML

Hacemos uso de la etiqueta “form” y le agregamos 2 atributos:

➢ action
➢ method

“action” es la URL a la que enviaremos información, “method” es el método

HTTP que utilizaremos como “GET” o “POST”.

Los datos que enviamos son los campos completados del formulario,
respetando su sintaxis claro.

El punto negativo es que automáticamente somos redirigidos a la web que

hicimos la petición sin posibilidad de cancelarlo, esta página estaría modificada
según los datos que enviamos con un lenguaje como PHP, así que talvez
sirvirian para datos pesados.

Ejemplo Práctico:

Pág. 182
 4.2.3. XMLHttpRequest - XHR

[Link]. Definición

▪ Es un objeto nativo de JavaScript creado por Microsoft.

▪ Lo utilizamos para transferir información entre una página web y un servidor,

podemos actualizar una página web sin tener que recargarla.

▪ Lo utilizamos para hacer una petición a un trozo de un archivo e insertarlo en

nuestra página sin tener que recargarla.
Antes no se podía y teníamos que hacer una petición de todo el archivo y
recortarlo.

▪ XHR, aunque contenga “http” en su nombre, puede ser utilizado por

diferentes protocolos.

▪ A pesar que de XHR contenga el nombre del archivo XML, se puede transferir
muchos tipos de datos, siendo el más común e ideal hoy en día es JSON.

▪ Para hacer uso de este objeto, debemos tener un servidor y para simular uno
vamos a utilizar la extensión “Live Server” del editor de texto “Visual Studio
Code”.

Pág. 183
 [Link]. Hacer Solicitud

Patrón básico:

• new XMLttpRequest( )
Creamos un nuevo objeto XHR

• [Link]( )
Lo utilizamos para configurar la solicitud, pero no hace ninguna conexión.
Recibe 5 parámetros:

1. Método
2. URL
3. Asíncrona o síncrono | Opcional
4. Usuario | Opcional
5. Contraseña | Opcional

Métodos:

El método es como ya vimos los de HTTP que son por ejemplo “GET” o “POST”.

URL:

La URL puede ser de manera relativa o absoluta:

• Relativa
Si vamos a hacer una petición en nuestro propio dominio, no es
necesario escribirlo y solo poner la ruta que comienza con “/”.
Ejemplo: /[Link]

• Absoluta
Es la URL completa incluyendo su protocolo. Ejemplo:
[Link]

Pág. 184
asíncrona o síncrono:

Siempre va a ser true. Porque según las palabras del profesor: No tiene sentido
una petición que no sea síncrona.

Usuario y contraseña:

Lo utilizamos por si la petición está bloqueada y necesita autenticarse.

• xhr evento
Antes de comenzar con la comunicación, debemos dar las instrucciones de que
deberá hacer con la información que recibimos, el más común es “load”.

• [Link]( )
Ahora sí, nos estamos comunicando con el servidor abriendo la conexión. Puede
recibir un parámetro opcional si tenemos que enviar información por el método
“POST” por ejemplo, como parámetro debemos colocar información.

Pág. 185
 [Link].1. Eventos

• load
Se ejecuta cuando todo el archivo se descargó correctamente y podemos
imprimir los datos, es el más común de utilizar.

• error
Sera activado por si hubo un error en la petición, descarga, conexión, etc…

• abort
Sí la petición fue abortada porque lo pedimos será activado.

• loadend
Se dispara cuando termino la petición con o sin errores o si fue abortado.

• loadstart
Se ejecuta cuando apenas recibimos un dato.

• onreadystatechange
Se activa cuando cambia el valor del estado del XHR (Ahora lo veremos).

Pág. 186
 [Link].2. Propiedades

• status
Nos devuelve el código de estado del protocolo.

• statusText
Devuelve el mensaje de estado del protocolo HTTP.

• responseText
Devuelve el cuerpo de la respuesta.

• responseType
Nos devuelve el formato de la respuesta, o lo podemos usar para indicar en que
formato no los debe devolver la respuesta.

• responseURL
URL absoluta a la que se le hizo la petición.

• readyState
Nos devuelve el estado del objeto XHR.

Pág. 187
 [Link].3. Métodos

• [Link]( )
Ya lo vimos antes, pero vamos a dejar en claro que es un método

• [Link]( )
Al igual que el “open”, ya fue visto y explicado.

• [Link]( )
Cancela la solicitud por send.

• [Link]( )
Nos devuelve todos los encabezados de la respuesta.

• [Link]( )
Nos devuelve el valor de una cabecera según el parámetro que le demos

• [Link]( )
Añadimos cabeceras a la comunicación. Recibe 2 parameterros, primero el
nombre y después el valor.

Una de las utilizadas es “Content-Type” y valor “application/x-www-form-

urlencoded”. Sirve para enviar información por el método “POST” en forma de
formulario.

Pág. 188
 [Link].4. Ejemplo Practico

Tendremos que crear un servidor para poder utilizar el objeto. Utilizaremos la

extensión “Live server” del editor de código “Visual Studio Code”.

Tendremos estos archivos:

[Link]:

Archivo que vamos a pedir en la petición.

Pág. 189
[Link]:

Tendremos una estructura básica y en el body tendremos estas etiquetas:

[Link]:

Pág. 190
 [Link]. Estado del XHR

Es el estado de vida de nuestra solicitud, tiene 5 estados diferentes:

• Estado 0 | No establecido
La conexión no se inició. Fue creado el objeto, pero no se llamó a “open”.

• Estado 1 | Abierto
Ya se configuro la solicitud y se llamó a “open” pero no a “send”.

• Estado 2 | Data recibida

El servidor recibió el mensaje de solicitud HTTP.

• Estado 3 | Descargando
Es cuando se está descargando la respuesta.

• Estado 4 | Completado
La petición se completó.

Ya estuvimos hablando en “propiedades” y “eventos” sobre como manipularlos

con el evento tipo “onreadystatechange” y la propiedad “readyState”.

Pág. 191
 [Link]. Crear un “loader”

Esto simplemente es lógico de programador, no son terminos nuevos que

tenemos que aprender.

Vamos a darle un retroceso a la petición de 1 segundo para que se pueda ver el

efecto “loader”.

Ejemplo:

Pág. 192
 [Link]. Procesando Respuestas con JSON

Cuando nació “AJAX” significaba “Asynchronous JavaScript and XML”, sin

embargo, el formato XML dejo de usarse con el paso del tiempo porque es muy
pesado y menos eficiente, se podría decir que lo fue sustituyendo poco a poco
el formato JSON.

Nosotros ya deberíamos saber utilizar JSON por el paradigma orientado a

objetos.

Cuando queramos el cuerpo de la respuesta, por buena práctica deberíamos

elegir el parámetro “responseText” en vez de “response” aunque contengan los
mismos datos, debido a que “responseText” es una cadena de texto siempre y
debemos esa información pasarla a un objeto.

JavaScript puro ya tiene integrado JSON. Podemos pasar una cadena de texto
(responseText) a JSON para que pueda el lenguaje entenderlo y utilizarlo.
Tenemos que usar el método “.parse( )” del objeto “JSON” (Quedarían
“[Link]( )”), y le pasamos como parámetro JSON en forma de string.

Pág. 193
Ejemplo Práctico:
Tendremos estos 3 archivos:

JSON:

Le vamos a hacer una petición al servidor y nos devolverá este archivo

[Link]:

Tendremos una estructura básica de HTML y en el body vamos a tener esto:

Pág. 194
[Link]:

Pág. 195
 4.2.4. Promesas

[Link]. Definición

En JS el código se ejecuta de forma asíncrona, quiere decir que no espera a que

termine de ejecutar una línea y ya está ejecutando a la siguiente línea. Ejemplo
asíncrono:

Sí quisiéramos evitar que ocurra esto y sea síncrono, se utilizan callbacks siendo
en este caso funciones que se ejecutan en otras, el problema es que hace un
código inelegible y además inestable, asiéndose llamar “callback hell” y daría un
resultado similar a este:

Por esta razón no veremos la utilización de callbacks para código síncrono.

Así que para eso se inventaron las promesas. Podemos hacer instrucciones de
maneras síncrona, código más estable y mucho más limpio, y nos evitaremos
resultados inesperados a la hora de usar AJAX.

Pág. 196
▪ Las promesas llegaron en 2016 tras la actualización de JavaScript “ESMC6”
para solucionar el problema de callback hell.

▪ Las promesas hacen peticiones de manera asíncrona, pero los manipula de

manera síncrona.

▪ Las promesas fueron creadas para manipular los lenguajes de programación

asíncronos.

▪ Es un objeto nativo de JavaScript y un estándar.

▪ Una promesa representa un valor que puede estar disponible ahora, en el

futuro, o nunca.

▪ Las promesas se encuentran en diferentes estados durante el proceso:

➢ pending | Pendiente
➢ fulfilled | Cumplido
➢ rejected | Rechazado

El patrón que se debe de seguir para las promesas es, en resumen:

Pág. 197
 [Link]. Practica

Estos son los 3 ítems que se usaran marialmente:

• new Promise( )
Estamos creando la promesa, recibe un parámetro callback y este recibe 2
parámetros:

1. resolve | Resuelto
2. reject | Rechazado

Dentro del callback podemos hacer por ejemplo una condicional, si todo está
bien llamaremos a “resolve”, en caso contrario a “reject”. Ejemplo:

La condición es “true” entonces llamamos a “resolve” con su resultado.

Pág. 198
 • .then( )
Hacemos uso de la promesa y podemos poner cuantos “then” queramos, recibe
2 parámetros callbacks y el 2° opcional:

1. Exitoso
2. Fallado

El parámetro de error, solo funcionara en el primer “then”.

• .catch( )
Se utiliza cuando la promesa es rechazada. Le pasamos un parámetro en forma
de callback. El “then” no podrá tener un segundo callback de error si queremos
que este funcione.

• .finally( )
Aunque la promesa sea rechazada o recibida, el callback que le pasemos como
parámetro sera ejecutado igualmente.

Ejemplo práctico:

Pág. 199
 • [Link]( )
Lo usamos cuando queremos responder a las promesas cuando todas se hayan
cargado.

Nos devuelve un array como respuesta si hacemos un [Link]( )

Le pasamos un único parámetro en forma de array, en el array estarán las

promesas. Ejemplo:

Estamos usando la misma función “get”.

Pág. 200
 [Link]. async y await

Apareció por primera vez en 2017. Nos permite trabajar con más facilidad las
promesas.

• async
Lo debemos poner detrás de una función y estamos transformando está en una
promesa, y podremos utilizar “then”. Ejemplo:

• await
Espera a que una promesa se establezca para poder continuar con su proceso.
“async” y “await” van tomados de la mano, esto quiere decir que para utilizar
await debe de estar si o si en una función con “async”.

Ejemplo Práctico:

Pág. 201
 4.2.5. Crear Librería

Las librerías se utilizarán constantemente debido a que no podemos estar

creando nuevas promesas y nuevos objetos XHR todo el rato para una nueva
petición, entonces lo solucionamos en unas pocas funciones.

Es más lógica de programador que utilizar nuevos ítems de JS, así que de paso
vamos a estar haciendo uso de todo lo que vimos.

Estaremos haciendo la petición a este server:

[Link]

Es la forma más común de hacer una librería, utilizando todo lo que estuvimos
viendo.

HTML body:

Pág. 202
JavaScript:

Utilizando todo lo que vimos.

Pág. 203
Este tema ya fue visto en “JavaScript en el navegador” pero igual seria explicado
para que este tema quede claro.

Las funciones “drawCorrect” imprime los datos si la promesa se hizo

correctamente, y la función “drawError” es por si hubo un error y notifica al
cliente. La script seria:

Pág. 204
 4.2.6. Fetch

Apareció por primera vez en 2017.

Nos hace toda la función y promesa con el objeto “XMLHttpRequest” y nos

ahorramos mucho código, prácticamente resume todo el código de la función
que creamos llamada “get”. Se podría decir que es una manera moderna de
hacer peticiones a un servidor.

Recibe 2 parámetros:

1. URL
2. Respuesta a enviar | Opcional

El segundo parámetro es opcional y lo usamos para enviar información por

ejemplo en el método “POST”, lo veremos más adelante.

Nos devuelve una promesa por lo cual podemos usar el “then”.

Le debemos pasar un primer “then” fundamental en que le debemos indicar

como debe procesar la información, tenemos diferentes métodos:

• .text( )
Procesar la información como string.

• .json( )
Analiza la respuesta como JSON.

Ejemplo:

Pág. 205
La diferencia de código es gigante:

Igualmente deberíamos utilizar XHR, debido a que tiene mayor personalización.

Pág. 206
 [Link]. Enviar información

Podemos enviar información como por ejemplo con el método “POST”.

Le debemos pasar a fetch un segundo parámetro que será un objeto, este

contendrá al menos:

➢ method | Método HTTP

➢ body | Datos a enviar
➢ headers | Objeto

method:

El método puede ser por ejemplo “POST” o “DELETE” como ya conocemos.

body:

El “body” la respuesta a enviar, debe estar en forma de string al igual cuando lo

recibimos. Lo transformamos a string usando el método del objeto JSON que es
“[Link]( )”.

headers:

Le debemos pasar un objeto, le debemos decir fundamental el tipo de

contenido que el parámetro es “Content-type” y dependiendo del contenido
que enviemos (en este caso json) le decimos “application/json”.

Puede recibir mucho más parámetro dependiendo la API.

Pág. 207
Un ejemplo es enviándole a la página:

[Link]

Y acá nos explica cómo utilizarla:

[Link]

Esta página está simulando una API para que practiquemos.

Pág. 208
4.3. WebSockets

4.3.1. Definición

▪ Es un protocolo de comunicación que nos permitirá tener una

comunicación bidireccional y full-dúplex en tiempo real.

Pero ¿qué significa?, con Ajax podemos por un solo y único canal
enviar información y recibirla, pero no podemos hacer ambas tareas
al mismo tiempo. Otro ejemplo serían los “walkie talkie”.

▪ En Ajax para obtener una respuesta, debemos abrir un canal, esperar a

que le llegue nuestra petición y que el canal este libre, procesarlo y
después enviarlo nos y cerrar el canal. Mientras que en esto no es así, el
canal esta siempre abierto.

▪ Uno de los usos seria como una conversación de mensajes como

“WhatsApp”, o llamada incluso.

▪ AJAX y WebSockets son tecnologías diferentes, ninguna es mejor que la

otra solo tiene diferentes usos, un error seria comenzar a usar
WebSockets para todo.

▪ Fue creado en 2008 y se estandarizo en 2011.

▪ Al igual que AJAX, podemos transferir datos como texto plano o JSON de
la misma manera.

Pág. 209
Durante la primera conexión, pregunta mediante encabezados (del protocolo
HTTP) al servidor si es compatible WebSockets, si response que sí la
comunicación continuare durante ese protocolo WS.

Una petición a un servidor seria:

Como respuesta:

Pág. 210
 4.3.2. Practica

• new WebSocket( )
Es un objeto al que le debemos pasar como único parámetro la URL con el
servidor que vamos a tener comunicación, y debe tener el protocolo “ws”.

También existe el protocolo “wss” que este encriptado y es más

confiable, es como el “HTTPS”

Cuando se crea, comienza a conectarse inmediatamente.

Métodos:
• .close( )
Cierra la conexión con el servidor.

• .send( )
Le debemos pasar un parámetro la información que vamos a enviar.

Pág. 211
Puede recibir 3 parámetros opcionales:

• open
Indica cuando se estableció la conexión y nos permite mandar un mensaje de
alerta que se estableció la conexión.

• close
Ocurre cuando se cerró la conexión, y al igual que el evento “open” podemos
avisar cuando se desconectó.

• error
Podemos avisar se hubo un error que no nos permite continuar. Puede recibir
un parámetro opcional que nos devolverá la información del error.

• message
Este es el único fundamental porque si no, no tendría lógica tener una
comunicación.

Recibe un parámetro que es la información que recibimos, esta información es

un objeto así que para obtener la respuesta en concreto debemos ir a “data”.

Pág. 212
 4.3.3. Estado del WS

Son como los códigos de conexión del objeto XHR aplicado a WS, el estado de
conexión que tenemos con un servidor mediante el protocolo WS.

• Estado 0 | No establecido
La conexión no está aún abierta.

• Estado 1 | Abierto
La conexión ya está abierta y nos estamos comunicando.

• Estado 2 | Cerrándose
Se está cerrando la comunicación.

• Estado 3 | Cerrado
Nos hemos desconectado.

Con el atributo “readyState” del objeto WebSocket, podemos saber el estado de

él, lamentablemente aún no se encuentra un evento de tipo “readystatechange”
para WS, pero podemos usar los 4 eventos del objeto. Ejemplo:

Pág. 213
 4.3.4. Ejemplo Practico

Vamos a tener una comunicación con este servidor que nos estará devolviendo
datos que les demos:

[Link]

HTML body:

JavaScript:

Pág. 214
 5. Enlaces Externos

Cursos:

[Link]

[Link]

[Link]

[Link]

Documentación general:

[Link]

[Link]

[Link]

[Link]

[Link]

[Link]

[Link]

[Link]

AJAX y WS:

[Link]
6dfaf19608414a43af5fc6d0bb159546

[Link]
javascript

APIs de Prueba:

[Link]

[Link]

Pág. 215
De más:

[Link]

Pág. 216