Bloque de JavaScript y jQuery

David Bernal González

 Para evitar estos
memes, vamos a meter
JS a nuestras webs

2
¿QUÉ ES JAVASCRIPT?

3
¿Qué es JavaScript?
▪ JavaScript es un lenguaje de programación interpretado. Por
lo que debe ser ejecutado desde un interprete usualmente un
navegador web.
▪ Inventado por Brendan Eichen 1995 para un famoso antiguo
navegador (Netscape) en los comienzos de internet.
▪ Creado 10 días, en sus inicios se llamaba Mocha.
Posteriormente LiveScript, hasta que finalmente recibió su
nombre actual JavaScript.

4
 ¿Porque nace JavaScript?
▪ JavaScript, aparece a mediados de los años 90 con la finalidad de cubrir una necesidad
que surge debido a que las conexiones a internet son lentas (por no decir primitivas)
▪ Lo que provoca que se requiera ejecutar un lenguaje en el lado cliente principalmente
para realizar validaciones de formularios evitando así que se tenga que estar rebotando
hacía el servidor varias veces hasta finalmente validar un formulario.
▪ En sus inicios solamente se podía ejecutar en el lado cliente desde un navegador
▪ JavaScript nos permite dar interactividad a la web.
▪ Actualmente el código des JSpuede ser ejecutado desde:
□ Cliente: mediante a un navegador web (lado cliente, Frontend)
□ Servidor: mediante a node.js (Backend)
5
Donde está JavaScript
▪ Alrededor del 75% de todos los sitios web
utilizan al menos 1 biblioteca o framework
javascript.
▪ La creación de frameworksbasados en
JavaScript como React, Angular, Vue… No ha
hecho más que incrementar más aún el uso
de JavaScript.
▪ Y constantemente continúan aparecido más y
más frameworks

6
 ¿Qué es EcmaScript? ¿Por qué nace?
▪ En el boomde internet a partir del 1996, había
muchísimasincompatibilidades entre los navegadores
cuando las páginas tenían código JavaScript. Ya que
cada navegador interpretaba el código de una manera
totalmente diferente, ya que no se implementaban todos
los cambios de JScreando un obstáculo para los
desarrolladores la compatibilidad.
▪ Estos problemas de compatibilidad, provocaron que en
1996 se iniciará el proceso de crear un estándar para
resolver la incompatibilidad. Y finalmente, en el año
1997 se creó el estándar EcmaScript.
▪ EcmaScript es JavaScript dividido en distintas versiones 7
 ¿Qué es EcmaScript? ¿Por qué nace?
▪ EcmaScript es un estándar que nos permite definir al
sintaxis y las características de JavaScript.
▪ La versión que marcó un antes y un después fue la versión
ES6. Ya que fue la versión en la que se empezaron a
introducir actualizaciones anuales en el lenguaje
▪ Hasta la versión 5 las versiones solían ir acompañadas de ES
junto a la versión. Pero a partir de la versión 6, las versiones
suelen ir acompañadas del año en vez de la versión.
▪ Aunque esto ha cambiado, podemos saber la versión de ES
fácilmente ya que dicha versión siempre va por delante del
año por lo que por ejemplo ES2015 es la versión 6 de
EcmaScript. 8
9
10
 ¿Qué es EcmaScript? ¿Por qué nace?
▪ Actualmente por razones de compatibilidad con los navegadores se trabaja con la versión ES5.
Y ya se está trabajando para dar paso a la versión ES6.
▪ Podemos ver la compatibilidad de ambas versiones visitando la web CanIUse:

▪ Podéis obtener más información de la compatibilidad de las distintas características de JS

desde la siguiente web https://kangax.github.io/compat-table/es5/
11
 ¿Qué es EcmaScript? ¿Por qué nace?
▪ Aunque existe una web mucho más avanzada que nos desengrana la compatibilidad de cada
característicasen concreto para las versiones ES5 y ES6:
□ https://kangax.github.io/compat-table/es6/

12
CREANDO UN FICHERO JS

13
Creando un fichero de JS
▪ Para crear un fichero de JShacemos lo siguiente:

14
Ejecutando JavaScript desde nodeJS
▪ Para ejecutar el código JSpor el momento vamos a utilizar la terminal. Para ello, es necesario
utilizar node.js concretamente la versión LTS(Long Time Support).

▪ Y tal y como vemos, podemos ejecutar código JS:

15
Instalando un plugin para ejecutar JS
desde VSC
▪ Finalmente, instalamosel siguiente plugin:

▪ Y utilizamosla siguiente instrucción para escribir un mensaje por consola, la seleccionamos y

finalmente pulsamos sobre Run Code:

16
Ejecutando JS desde HTML
▪ Para vincular un fichero de JSdentro de un HTMLy poder ejecutar con ello su contenido,
realizamos lo siguiente:

17
Ejecutando JS desde HTML

18
VARIABLES EN JS

19
Maneras de almacenar un dato dentro de un algoritmo
▪ Las palabras reservadas mediante a las
cuales podemos almacenar datos en JS
son la siguientes:
▪ Podemos saber el tipo de dato que
estamos utilizando mediante el método
typeof y por ejemplo englobarlo con un
console.log para que muestre un
mensaje por pantalla
▪ O bien si lo queremos saber el valor
actual que está almacenando una
variable en un determinado punto desde
VSC situándonos encima de ella:
20
▪ Any significa cualquier tipo de dato:
Declarando varias variables en una misma
línea
▪ Existe de posibilidad de declarar varias variables en una misma
línea. Vamos a ver un ejemplo:

21
Vocabulario basico de una variable

22
Tipos de almacenar datos en JS
▪ Los tipos de datos que tenemos
en JS son 7:
▪ Pese a ello, a diferencia de otros
lenguajes no definimos el dato,
sino que JS coge el tipo de dato
en función del tipo de dato con
el que inicializamos la variable.
▪ Y el tipo de dato puede cambiar
durante la ejecución del
algoritmo. Vamos a ver un
ejemplo: 23
Tipos de datos en JS
▪ String: almacena un dato de texto

▪ Number: almacena un dato numérico.

▪ Boolean: almacena un valor booleano (true or false).

24
Tipos de datos en JS
▪ Null: cuando la variable está vacía, se tiene que especificar por el usuario sino
ninguna variable será nula por defecto. Cuando una variable no está definida.
Aunque se a un tipo de dato primitivo, apunta a un objeto null por ello

▪ Undefined: no definido, habitualmente se produce cuando se declara sin

inicializar.

25
Tipos de datos en JS

26
Tipos de datos en JS
▪ Symbol: permite una variable con valores son únicos e inmutables (que no
pueden cambiar).

▪ Si comparamos los dos valores symbols vemos que no son iguales, pero si
comparamos sus descriptions si que son iguales.
27
Tipos de datos en JS
▪ Object: engloba a todo el resto de datos, es decir, a
todos los tipos de datos que no son primitivos.
 Objeto tradicional: también conocido como diccionarios
porque se estructuran en clave valor.

28
Tipos de datos en JS
▪ Existe la posibilidad de mostrar un objeto en forma de tabla
mediante a console.table. Vamos a ver un ejemplo:

29
Tipos de datos en JS
▪ Object: engloba a todo el resto de datos, es decir, a
todos los tipos de datos que no son primitivos.
 Objeto Array: permite almacenar un conjunto de datos,
en JS no tienen porque ser del mismo tipo como si que
pasa en otros lenguajes

30
Tipos de datos en JS
▪ Object: engloba a todo el resto de datos, es decir, a
todos los tipos de datos que no son primitivos.
 Objeto Function: nos permite crear funciones en las que
dividir nuestro código. Vamos a ver un ejemplo:

31
1

Tipos de datos en JS
▪ Haz una alerta mediante a alert de tu nombre
que esté guardado en una variable
 Te puedes apoyar para ello de la siguiente
documentación: Mozilla

https://developer.mozilla.org/es/docs/Web/API/Window/alert
32
1

Tipos de datos en JS
▪ Haz una prompt, recibe el nombre y,
finalmente, muéstralo por pantalla
 Te puedes apoyar para ello de la siguiente
documentación: Mozilla

33
LET VS VAR VS CONST
DIFERENCIAS

34
Maneras de almacenar un dato
dentro de un algoritmo
▪ Las palabras reservadas mediante a las cuales podemos almacenar
datos en JS son la siguientes:

35
 Const
▪ Const es ideal para almacenar un dato que
definimos en el momento y que es
inmutable, es decir, que no va a cambiar a lo
largo de la ejecución de nuestro programa.
▪ De hecho, si intentamos modificar el valor de
una constante veremos que no nos dejará y
que nos aparecerá un error
▪ Un uso habitual, por ejemplo es definir un
valor que no vamos a modificar como por
ejemplo PI:
▪ Es necesario inicializar la variable cuando la
definimos ya que no se puede definir 36
posteriormente su valor.
 Let vs Var
▪ Var es la forma “vieja”, por tanto, la “old school”.
▪ En cambio “let” es la forma nueva ya que se introdujo
a posteriori.
▪ Ambas (let y var) pueden convivir en un mismo código
sin problema.
▪ Vamos a ver un par de ejemplos en las que ambas
conviven:

37
 ¿Qué es el scoope?
▪ Cuando hablamos de scoope nos referimos al contexto actual de
ejecución. Es decir, al contexto en el que los valores y las expresiones
son "visibles" o pueden ser referenciados.
▪ Si una variable u otra expresión no
está "en el Scope- alcance actual",
entonces no está disponible para su
uso.
▪ Los Scope también se pueden
superponer en una jerarquía, de
modo que los Scope secundarios
tengan acceso a los ámbitos
primarios, pero no al revés. 38
 Scope
▪ En función de donde declaramos nuestras variables estas tendran distintos tipos de
scopes:
 Global
 Local
 Function
 Block

39
 Explicando Var
▪ El alcance de var es global siempre y que declaré fuera de una función.
▪ Y local si se declara dentro de una función. Vamos a ver un ejemplo:

40
 Explicando Var
▪ Si intentamos acceder a una variable local (declarada a nivel de función) fuera de
dicha función, podemos ver que no nos deja acceder:

▪ Esto se produce debido a que al no estar fuera de la función el alcance es local

(solamente a nivel de la función) y por tanto la variable no existe a nivel global.
41
 Explicando Var
▪ Una variable con var puede volver a declarar y actualizar sin problema.
Vamos a verlo:

▪ También se puede reasignar otro valor sin utilizar var:

42
▪ Con var si inicializamos una misma variable en un mismo bloque se
destruye el valor anterior.
 Explicando Var
▪ El principal problema que tiene var es que si no la utilizamos a nivel global (fuera
de las funciones) y la usamos a nivel local (dentro de las funciones) al poder
reasignarse varias veces. Podemos ver que debemos de estar bastante atentos ya
que podríamos renombrar un valor dentro de un mismo scope (alcance) o
confundir los scopes. Vamos a ver algunos ejemplos:

43
 Explicando Let
▪ En cambio en let, si intentamos declarar una
variable dos veces dentro del mismo bloque
podemos ver que esto produce un error.
Vamos a ver un ejemplo:

▪ Pese a que no podemos declarar una

variable dos veces dentro de un mismo
bloque si que podemos reasignar su valor.
Vamos a ver un ejemplo:

▪ O inclusive declarar dos varias pero no

dentro del mismo scope (alcance) recordad
que let tiene alcance a nivel de bloque. 44

Vamos a ver un ejemplo:

 Explicando Let
▪ El hecho de que no puedan definirse dos variables dentro de un mismo scoope
con un mismo nombre hace que sea más recomendable utilizar let que var.
▪ Al usar let, no tiene que preocuparte en mirar si ya hemos declarado
anteriormente una variable en dicho bloque o incluso si ya hemos usado un
nombre de variable. Ya que, solamente puede existir una sola variable solo
existe dentro de su alcance.

▪ En cambio, con let no podemos declarar dos veces una misma variable En 45

cambio, con let no podemos declarar dos veces una misma variable
 ¿Qué es la Temporal Dead Zone (TDZ)?
▪ La semántica de TDZ prohíbe acceder a una variable antes de
su declaración. Por tanto, hace cumplir la disciplina de no
usar nada antes de declararlo. Vamos a verlo:

▪ En cambio, var no tiene TDZ pese a que imprima undefined

(ya que actualmente no está definida):

46
 Hoisting de var
▪ Hoisting es un mecanismo de JavaScript donde las variables y las declaraciones de
funciones se mueven a la parte superior de su alcance antes de la ejecución del
código. Solamente se aplica sobre variables var ya que son las únicas que no tienen
TDZ
▪ Por ejemplo si escribimos lo siguiente:

▪ Lo que hace JS internamente es subir la declaración de la variable de la siguiente

forma:

▪ Por ello, podemos utilizar antes de declararla sin que se produzca un error aunque
nos imprima undefined 47
En resumen

48
49
 Recomendación
▪ Aunque no es obligatorio, existe una convención que aconseja escribir las variables
que son definidas como constantes en mayúsculas de la siguiente manera:

▪ La finalidad de esto es identificar que estamos trabajando con una constante de

forma visual y así saber que el valor de esa variable no puede ser modificado
(reasignado).

50
2

EJERCICIO 01
Define un tipo de dato de cada uno de los tipos de datos que
hemos visto.
1. Declara la variable, y posteriormente inicialízala.
2. Imprime por consola el valor que tiene la variable por consola
3. Posteriormente imprime además el tipo de dato que almacena
por consola.
4. Declara una variable con scope local y global.

51
FUNCIONES EN JS

52
Funciones en JS
▪ Las funciones nos permiten subdividir y encapsular un código en
distintos bloques con la finalidad de que este tenga un cierto orden,
pueden ser reutilizadas de forma sencilla, etc.
▪ Si por ejemplo tenemos un algoritmo de 500 líneas, podemos
subdividir el código por ejemplo en 10 funciones de 50 líneas.
▪ Una función puede o no recibir parámetros, ya que no son
obligatorios.

53
Ejemplo de función con nombre
▪ Un ejemplo de una función es el siguiente:

54
Ejemplo de función con nombre con
parametros
▪ Un ejemplo de una función es el siguiente:

55
Ejemplo de función anónima
▪ Un ejemplo de una función anónima es el siguiente:

▪ Si os fijáis, si al queremos utilizar, necesitamos almacenarla en una

variable. Ya que sino no la podremos invocar (llamar).
56
Ejemplo de función anónima con
parametros
▪ Un ejemplo de una función anónima es el siguiente:

57
Ejemplo de función anónima arrow
function
▪ Un ejemplo de una función de flecha es el siguiente:

▪ Si os fijáis, si al queremos utilizar, necesitamos almacenarla en una

variable. Ya que sino no la podremos invocar (llamar). 58
Ejemplo de función anónima con
parametros
▪ Un ejemplo de arrow function es el siguiente:

59
Parametros ilimitados en una función
▪ Un ejemplo de arrow function es el siguiente:

60
Funciones con return
▪ Return es la palabra clase que nos permite indicarle a JS que vamos
a devolver algo cuando llamamos a la función.
▪ Pero si ejecutamos el siguiente código podemos observar que no
devolvemos nada:

61
Funciones con return
▪ Existe la posibilidad de mostrar el
valor por pantalla mediante a un
console.log(). Vamos a ver un
ejemplo:
▪ O bien, la de almacenar el valor en
una constante, pasarlo a otra
función... Vamos a ver un ejemplo:

62
63
3

EJERCICIO
1. Crea una función arrow function que retorne tu nombre y tus
apellidos e imprímelos por pantalla desde fuera de la función
2. Crea una función con nombre y sin return. Pásale un tipo de dato
boolean y dentro de la función imprime el valor el valor que hemos
pasado por los parámetros.
3. Crea una función que reciba parámetros infinitos, haz la llamada
con los valores 1,2,3,4,5 y muestra dichos mediante un forEach.

64
 CONDICIONES
Y OPERADORES

65
OPERADORES
▪ Los operadores nos permiten realizar varias acciones entre las que
destacan la de asignar, comparar una o varias condiciones.
▪ Vamos a ver un ejemplo de como trabajar con operadores de igualdad:

66
CONDICIONES
▪ Para mostrar el resultado de una o varias condiciones por pantalla
podemos realizar lo siguiente:

67
Multiples condiciones con AND (&&)
▪ Existe la posibilidad de analizar múltiples condiciones para determinar si
entramos en un bloque o no. Vamos a ver un ejemplo con AND
mediante a &&:

68
Multiples condiciones con OR (||)
▪ Existe la posibilidad de analizar múltiples condiciones para determinar si
entramos en un bloque o no. Vamos a ver un ejemplo con OR mediante
a ||:

69
IFS

70
IF
▪ If analiza una condición que
puede retornar true or false y
solamente si es true se ejecutará
dicho bloque.
▪ Por ejemplo, si eres mayor de
edad se ejecutuará el bloque y
podrás pasar a la discoteca:

▪ Si no eres mayor de edad,

podemos ver que no se ejecuta
dicho bloque:
71
IF-ELSE
▪ If analiza una condición que puede retornar true or false y solamente si es
true se ejecutará dicho bloque. En caso de retornar false, se ejecutará el
bloque else. Vamos a ver un ejemplo:

72
IF-ELSEIF-ELSE
▪ If analiza una condición que puede retornar true or false y solamente si es
true se ejecutará dicho bloque. En caso de retornar false, se ejecutará el
bloque else. Vamos a ver un ejemplo:

73
4

EJERCICIO
1. A partir de la siguiente instrucción que genera un número
aleatorio console.log(Math.round(Math.random())); que genera un
número aleatorio 0 o 1. Haz una función con return, invocala y
muestra por consola cara si el valor es 1 y cruz si el valor es 0.

74
5

EJERCICIO
1. Crea una función pasa 3 números por parámetros súmalos y
devuelve el resultado mediante a return. Finalmente muéstralos
por pantalla
2. Crea una función y escribe tu nombre completo en 3 parámetros:
nombre, apellido1, apellido2 y concaténalos y finalmente
muéstralos por pantalla
3. Crea una función que acepte dos números y devuelva el número
mayor

75
6

EJERCICIO
Realiza el primer bloque de los siguientes ejercicios y adjunta el
comprobante de finalización de los ejercicios.

76
SWITCH

77
Switch
▪ En switch, podemos usar solo un valor específico y no se puede usar para un rango de
valores o para condiciones que involucran múltiples variables. Vamos a ver un ejemplo:

78
Switch
▪ El break hace que el resto de cases no se ejecuten, si lo quitamos vemos que se ejecutan
todos hasta llegar al último:

79
Switch
▪ Existe la posibilidad de declarar varias condiciones en un grupo de la siguiente manera:

80
7

EJERCICIO
1. Realiza un switch case que muestre el mes del año cuando lo
introduzcamos en formato numérico (1 al 12)
2. Realiza un switch case en el que puedas introducir un número
del uno al cinco en un string y lo transforme a un número

81
MATH

82
Math
▪ Es una clase que nos proporciona métodos y funciones matemáticas

83
8

EJERCICIO
1. Investiga como crear un número aleatorio (0 o 1) con el método
random de Math.
2. Investiga como redondear el valor de Math.PI 3,1415… a la parte
decimal 3.

84
PRINCIPALES MÉTODOS
DE STRING

85
Métodos de string
▪ Trabajar con cadenas de texto (strings) es muy habitual en JS, por lo que vamos a
aprender algunos métodos que son muy utilizados:

86
9

EJERCICIO
1. Crea una función en la que pasándole un string como parámetro
se substituyan las letras A por las O.
2. Crea una función que compruebe si un string pasado como
parámetro empieza por ‘aca’ y llama dos veces a la función una con
academia y otra con escuela.
3. Crea una función que pasándole un Hola nos salude 3 veces
utilizando métodos de Strings.

87
BUCLES

88
¿Que son los bucles?
▪ Los bucles, también conocidos como loops, son la manera mediante a la cual podemos
iterrar, es decir, realizar la ejecución de una serie de instrucciones, bloques de códigos,
funciones, etc. Varias veces.

89
FOR
▪ Se ejecutará solamente cuando se cumpla la condición del for.

90
WHILE
▪ Se ejecutará solamente cuando se cumpla la condición del while.

91
DO WHILE
▪ Se ejecutará al menos 1 vez, incluso cuando no se cumpla la condición del while.

92
FOR EACH
▪ Existe la posibilidad de declarar varias condiciones en un grupo de la siguiente manera:

93
10

EJERCICIO
Realiza un bucle tanto con FOR como con WHILE que impriman 10
veces I❤code

94
11

EJERCICIO
1. Define un array con las letras ‘a’, ‘b’, ‘c’, ‘d’ y ‘e’. Y,
posteriormente, recorre cada uno de los elementos mediante a
forEach
2. Define una variable let numero = 5; que itere hasta que el valor
sea 0.

95
12

EJERCICIO
1. Analiza que hace el siguiente programa, explica lo que hace
¿Cuántas iteraciones da? ¿Cuándo entrará en el if? ¿Y en el else?:

96
ARRAYS METHODS

97
Arrays methods

98
Arrays methods

99
Arrays methods

100
Arrays methods

101
Arrays methods

102
Arrays methods

103
Arrays methods

104
Arrays methods

105
Arrays methods

106
Arrays methods

107
EJERCICIO
1. A partir de la pizza sustituías todos los elemento del array por
cervezas:
2. Encontrar si existe un elemento en el array que sea una piña.

3. Quita la piña del siguiente array. 
4. A partir del siguiente array  convierte todas las fresas
en 
5. Añade el siguiente icono  inmediatamente después del cada 
en el siguiente array: 
6. Añade una  cartas comodín entre medio de dos cartas . Por
ejemplo: En el siguiente array: 
108
¿QUÉ ES JQUERY?

109
¿Qué es jQuery?
▪ Librería de JavaScript que tal y como nos dice en su web nos permite “WriteLessDo
More” (“Escribo menos y haz más”).
▪ El propósito de jQuery es hacer más fácil el uso de JavaScript para ello, para ello utiliza
unas funciones propias de jQuery que nos permiten reducir códigos de varias líneas a una
sola.
▪ Aunque es una librería bastante legacyes ideal para ante de introducirse en JS.
▪ jQuery es utilizadopara:
□ Manipular el HTML/DOM
□ Manipular CSS
□ Eventos de HTML
□ Efectos y animaciones
□ Llamar a una API (Ajax) 110
INSTALANDO PLUGINS

111
jQuery Code Snippets
▪ Nos permite añadir snippetscon pequeños fragmentos de jQuery de forma sencilla con
tan solo escribir jq:

112
MANERAS DE
UTILIZAR
JQUERY

113
 Maneras de utilizar jQuery
▪ Existen distintas versiones de jQuery:
□ La versión normal: contiene todas las funcionalidades. Existe la versión minificaday la no minificada.
□ La versión mínima: contiene solamente las principales funcionalidades excluyendo la llamada Ajax y
efectos. Existe la versión minificaday la no minificada.

▪ Para asociar jQuery a nuestro documento podemos de las siguientes maneras:

□ File internoen nuestroproyecto: depende de nuestro servidor por lo que le damos más faena a
nuestro servidor ya que tiene que realizar la transferencia de dicho archivo (que pesa 282KBo 88KB
en el mejor de los casos) .
□ CDN: no sobrecargamos nuestro servidor y usualmente el CDNtiene varios servidor ante el caso de
caída utilizará otro servidor. Pero si se cayeran los servidores del CDNno tendríamos jQuery en
nuestra web.
114
jQuery desde fichero interno
▪ Para cargar el fichero hacemos lo siguiente:

115
 jQuery desde fichero interno
▪ Una vez descargado en la parte final del BODY asociamos primeramente cagamos el fichero JS
de jQuery. Y, posteriormente, el fichero de JSmediante el cual trabaremos con jQuery. Y el cual
en este caso nos ejecutará un alerta en el navegador una vez el documento se haya cargado
correctamente:

116
jQuery desde CDN
▪ Una vez descargado en la parte inferior del body asociamos primeramente cagamos el
fichero JSde jQuery y posteriormente el fichero de JSmediante el cual trabaremos con
jQuery. Y finalmente, ejecutamos un alert de JSpara ver que tengamos el fichero
correctamente asociado:

117
jQuery desde CDN
▪ Y si nos fijamos, podemos ver que ya no es necesario tener el fichero de jQuery en local
ya que lo cargamos desde la CDN:

118
 Maneras de trabajar
▪ Existe la posibilidad de reemplazar la función por una función anónima de la siguiente forma:

▪ Aunque existe otra forma más reducida aún:

▪ Con esto, le estamos diciendo que cuando el documento este cargado muestre un mensaje
(alerta) con el texto Hola. Vamos a verlo:

119
▪ Si os fijáis, podemos combinar jQuery con JavaScript Vanilla(el JSnativo) sin problema.
DOM

120
¿Qué es el DOM?
▪ Una web está construida
mediante a elementos HTML. De
hecho, si vamos a la consola y
escribimos document, podemos
ver que nos aparecen todos los
elementos que tenemos
actualmente en nuestra web.
▪ El DOMdefine la manera en que
objetos y elementos se relacionan
entre sí en el navegador y en el
documento.
121
 ¿Qué es el DOM?
▪ DOM=Document Object Model o Modelo de Documento
Objetos.
▪ Nos permite el acceso dinámicoa través de lenguajes
de programación comoJavaScript,ECMAScript… Con la
finalidad de acceder, añadir y cambiar dinámicamente
contenido estructurado en documentos.
▪ DOM→ Es la estructura jerárquica(similar a un árbol
genealógico) querepresenta nuestro documento web en
forma de esquema. Este esquema contiene todos los
nodos (TAGs) que compone una página HTML.
122
Documento inicial
▪ Código

123
TIP: documento.designMode = ‘on’

124
BOM

125
 ¿Qué es el BOM?
▪ Browser Object Model
▪ Nos permite comunicarnos con el navegador.
▪ Con la finalidad de por ejemplo recibir información del
tipo de navegador, sistema operativo, etc. Que utiliza el
usuario.

126
 SELECCIONANDO
ELEMENTOS DESDE JQUERY

127
Seleccionando elementos desde jQuery
▪ Si hacemos lo siguiente,
estamos guardando en una
constante todos los elementos
article del documento.
Independientemente que
sean 1, 2, 3…

128
Seleccionando elementos desde jQuery
▪ Si hacemos lo siguiente,
estamos guardando en una
constante todos los
elementos article del
documento.
Independientemente que
sean 1, 2, 3…

129
Iterando sobre elementos desde jQuery
▪ Existe la posibilidad de
mostrar los elementos que
hemos encontrado. Para ello,
es necesario iterar sobre dicha
lista de la siguiente manera:

130
Método .html() de jQuery
▪ Si queremos
modificar el texto del
elementos que
hemos capturado con
el selector de jQuery,
realizamos lo
siguiente:
▪ Si nos fijamos,
estamos cambiando
el texto del
documento.
131
 Debugenado el fichero para ver como
se modifica el DOM
▪ Si queremos analizar lo que
realmente hace el navegador
tenemos que debugear el código un
par de break points lo que hará que
paremos el código original antes de
que modifiquemos el DOM:
▪ Si avanzamos vemos que una vez
pasamos por la instrucción 3 se
cambia el texto. Esto es lo que hace el
navegador inmediatamente después 132
de cargar el documento HTML
 SELECCIONANDO
ELEMENTOS DESDE
JAVASCRIPT
133
Seleccionar elementos desde JS (sin jQuery)

▪ La alternativa a html() de jQuery en

JavaScript nativo es innerHTML: 134
 SELECCIONANDO
ELEMENTOS POR ID
DESDE JQUERY

135
Seleccionando elementos por ID desde
jQuery
▪ Para seleccionar un elemento por el ID
utilizamos lo mismo que en CSS el # por
ejemplo en este caso. Vamos a cambiar el
texto:

136
 SELECCIONANDO
ELEMENTOS POR ID
DESDE JAVASCRIPT

137
Seleccionando elementos por ID desde JS
▪ Para seleccionar un elemento por el ID desde JS utilizamos
document.getElementByID. Existe la posibilidad de trabajar
directamente con el o guardarlo en una variable y posteriormente
manipularlo:

138
 SELECCIONANDO
ELEMENTOS POR CLASE
DESDE JQUERY

139
Seleccionando elementos por Clase
desde jQuery
▪ Para seleccionar los
elementos que
pertenezca a una
misma clase desde
jQuery. Y, por
ejemplo, modificar
el texto realizamos
lo siguiente:

140
 SELECCIONANDO
ELEMENTOS POR CLASE
DESDE JAVASCRIPT

141
 Seleccionando elementos por Clase
desde JS
▪ Para seleccionar un
elemento por nombre de la
clase desde JS utilizamos
document.getElementByClas
sName. Existe la posibilidad
de trabajar directamente con
el o guardarlo en una
variable y posteriormente
manipularlo:
142
 SELECCIONANDO
ELEMENTOS HIJOS DE UN
ELEMENTO PADRE CON
JQUERY

143
Seleccionando elementos hijos a otro
elemento desde jQuery

144
 SELECCIONANDO
ELEMENTOS HIJOS DE UN
ELEMENTO PADRE CON
JAVASCRIPT

145
 Seleccionando elementos hijos a otro
elemento desde JavaScript
▪ Query selector
nos permite
seleccionar
elementos es
perfecto para
situaciones en las
que solamente
queremos
seleccionar el
primer elemento: 146
 Problema de querySelector en JS
▪ El principal
problema de
trabajar con
query selector
es que si
queremos
seleccionar
más de un
elemento no
nos sirve.
Vamos a ver un
ejemplo: 147
 Problema de querySelector en JS
▪ Para seleccionar
varios elementos
utilizamos
querySelectorAll por
ejemplo:

148
 SELECCIONANDO
EL PRIMER Y EL ÚLTIMO
ELEMENTO DESDE JQUERY

149
Problema de querySelector en jQuery

150
 SELECCIONANDO
EL PRIMER Y EL ÚLTIMO
ELEMENTO DESDE
JAVASCRIPT
151
Problema de querySelector en JavaScript

152
PRESENTANDO MÁS
MÉTODOS

153
 TEXT JQUERY
TEXTCONTENT JAVASCRIPT

154
 text() de jQuery
▪ Si solamente queremos tocar el texto sin tocar el HTML podemos usar:

textContent de JS

155
 HTML JQUERY
INNERHTML JAVASCRIPT

156
 html() de jQuery
▪ Si además queremos añadir o modificar el HTML, podemos realizar o
siguiente:

innerHTML() de JS

157
APPEND y PREPEND DE
JQUERY

158
 append() y prepend de jQuery
▪ Si además queremos añadir elementos dentro de
un elemento podemos utilizar append y prepend.
▪ Prepend: nos permite añadir un elemento al principio.
▪ Append: nos permite añadir un elemento al final de
elemento.

159
insertAdjacentHTML
JAVASCRIPT

160
 insertAdjacentHTML de JavaScript
▪ Añadir un elemento decidiendo donde lo queremos hacer en JS nativo,
habitualmente se realiza a partir del método insertAdjacentHTML.
▪ El método insertAdjacentHTML consta de dos atributos.
▪ El primer atributo nos permite indicar donde vamos a añadir el elemento:
 'beforebegin': Antes que el propio elemento.
 'afterbegin': Justo dentro del elemento, antes de su primer elemento hijo.
 'beforeend': Justo dentro del elemento, después de su último elemento hijo.
 'afterend': Después del propio elemento.
▪ El segundo atributo nos permite indicar el contenido que vamos a añadir

161
 insertAdjacentHTML con beforebegin
▪ Vamos a ver un ejemplo con beforebegin:

162
 CSS JQUERY
O STYLE.PROPERTY &
STYLE.CSSTEXT DE
JAVASCRIPT
163
 append() y prepend de jQuery
▪ Si queremos trabajar con CSS desde jQuery
tenemos dos formas dependiendo de lo que
queremos realizar:
 Si solamente queremos modificar una propiedad realizamos lo
siguiente:

 Si queremos modificar varias propiedades realizamos esto otro:

164
 append() y prepend de JavaScript
▪ Si queremos trabajar con CSS desde JavaScript
tenemos dos formas dependiendo de lo que
queremos realizar:
 Si solamente queremos modificar una propiedad realizamos lo
siguiente:

 Si queremos modificar varias propiedades realizamos esto otro:

165
 REMOVE DE JQUERY
REMOVE DE JAVASCRIPT

166
 Remove en jQuery y JavaScript
▪ El método para remover un elemento del DOM es el mismo tanto en
jQuery como en JavaScript:

▪ Si nos fijamos, el elemento no aparece ni en el inspector del navegador. Por lo que lo

utilizamos para cuando queramos eliminar información delicada. 167
CREANDO ELEMENTOS
DESDE JQUERY Y
JAVASCRIPT

168
 Remove en jQuery y JavaScript
▪ Un ejemplo mediante el cual crear elementos desde JavaScript y añadirlos
al DOM puede ser las siguientes:

▪ Aunque también se puede realizar de otras formas como con innerHTML, etc.
169
 HIDE DE JQUERY
HIDE DE JAVASCRIPT

170
 Hide en jQuery y JavaScript
▪ El método para remover un elemento del DOM es el mismo tanto en jQuery
como en JavaScript. Vamos a ver un ejemplo:

▪ Si nos fijamos, el elemento no aparece en el documento pero si que aparece en en el

inspector del navegador. Por lo que no es recomendable utilizarlo en casos en lo que la
información no sea delicada.
171
ATRIB DE JQUERY
Y SETATRIBUTE DE
JAVASCRIPT

172
 Attrib en jQuery y JavaScript
▪ Para cambiar el atributo por ejemplo de una imagen tenemos

173
EVENTOS

174
 ¿Qué son los eventos?
▪ Los eventos son una serie de acción que el navegador captura cuando un
usuario interactúa con el documento.
▪ Nos permiten dar interacción a nuestro HTML.
▪ Aunque en la siguiente diapositiva veremos los distintos tipos de eventos, el
más popular de todos en el mundo de la web, es cuando un usuario hace clic
sobre un botón.

175
 Tipos de eventos
▪ Algunos eventos son los
siguientes:

▪ Aunque, podéis acceder a la

la lista completa con todos
los eventos en la siguiente
URL:W3Schools

176
 Trabajando con eventos desde HTML
▪ La opción más sencilla de programar un evento es la siguiente:

177
EVENTOS DESDE JQUERY

178
 ¿Qué son los eventos?
▪ Los eventos son la manera mediante a la que controlamos las acciones de los visitantes.
▪ Nos permiten definir comportamiento de la página cuando el usuario realice
determinadas acciones
▪ El ejemplo más habitual es de cuando un usuario hace clic en un botón.

179
 Funcionamiento de un evento
▪ Para entender los eventos necesitamos conocer algunos conceptos básicos:
 El evento es la acción. En este caso, el click que hace el usuario sobre el botón
 El tipo de evento el tipo de suceso mediante el cual podemos asignar una respuesta a dicho evento.
En este caso onclick
 Manejador de evento: es el mecanismo mediante el cual damos respuesta nosotros a dicho evento
▪ Un evento se subdivide en 3 fases:
 Capturing (o captura del evento) sería el proceso mediante el cual capturamos el evento. Por ejemplo
un click en un botón
 Target, sería la manera mediante a la que nos referimos al elemento clicado.
 Bubbling (Burbujeo de eventos) sería el proceso mediante el cual el click que por ejemplo , partimos
de windows, pasando por document y hasta llegar al elemento.

180
Funcionamiento de un evento

181
Funcionamiento de un evento

182
 Manera 1 con JS
▪ Aunque también podemos crear una función dentro de nuestros archivos de
JS a la que llamamos cuando se realiza el evento. Vamos a ver un ejemplo:

183
 Manera 2 con JS
▪ Aunque también podemos crear una función dentro de nuestros archivos de
JS a la que llamamos cuando se realiza el evento. Vamos a ver un ejemplo:

184
 Manera 3 con JS
▪ Otra manera de crear eventos es mediante a addEventListener. Vamos a ver
un ejemplo:

185
 Eventos desde el DOM con jQuery
▪ Existe otra manera de realizar esto directamente desde el DOM. Vamos a ver
un ejemplo de como trabajar con focus.

▪ En este ejemplo, cuando situamos el ratón sobre el elemento cambiará el

color de fondo a rojo 186
 Eventos desde el DOM con jQuery
▪ ALos eventos son la manera mediante a la que controlamos las acciones de los visitantes.
Y nos permiten definir comportamiento de la página
▪ https://www.freecodecamp.org/espanol/news/propagacion-de-eventos-y-captura-de-
eventos-en-javascript-y-react/

187
TOGGLECLASS DE JQUERY
CLASSLIST.TOGGLE DE
JAVASCRIPT

188
ToggleClass jQuery
 Nos permite definir una clase que si ya está añadida se quitará del elemento o viceversa. El
funcionamiento es similar a un interruptor (on, off). Vamos a ver un ejemplo:

189
classList.toggle JS
 Nos permite definir una clase que si ya está añadida se quitará del elemento o viceversa. El
funcionamiento es similar a un interruptor (on, off). Vamos a ver un ejemplo:

190
HIDE, SHOW y TOGLE EN
JQUERY Y JAVASCRIPT

191
Hide jQuery
 Nos permite definir una clase que si ya está añadida se quitará del elemento o viceversa. El
funcionamiento es similar a un interruptor (on, off). Vamos a ver un ejemplo:

192
Hide, Show y Toggle en jQuery
 Hide oculta un elemento, show lo muestra y toggle realiza ambas cosas a la vez.

193
Editando los efectos
 También podemos editar los ms con la finalidad de modificar los MS queu tardará en producirse el
efecto. Por defecto se trabaja con 400 ms.

 También podemos utilizar en vez de milisegundos los siguientes valores:

 slow equivale a 600 milisegundos
 fast equivale a 200 milisegundos

 También podemos utilizar easing con la finalidad de definir

 swing la animación avanza de forma irregular.
 linear la animación avanza a un ritmo constante.

194
FADE EN JQUERY

195
Editando los efectos
 Face nos permite que un elemento aparezca y desaparezca.

 faceIn oculta un elemento

 faceOut hacer visible un
elemento
 faceToggle hacer visible o
invisible un elemento
 faceTo() permite definir una
opacidad para un elemento (que
irá desde 0 a 1) 196
SLIDE EN JQUERY

197
Editando los efectos
 Dentro de los efectos con slide, tenemos los siguientes:
 slideDown(): desliza un elemento hacía abajo
 slideUp(): desliza un elemento hacía arriba
 slideToggle(): desliza un elemento hacía arriba/abajo
 Vamos a ver un ejemplo con slideToggle:

198
ANIMATE EN JQUERY

199
Animate de jQuery
 El método animate() realiza una animación personalizada de un conjunto de propiedades CSS.
 Vamos a ver un ejemplo en el que desplazamos a la izquierda el div y además lo rotamos.

 IMPORTANTE, el DIV tiene que estar posicionado como absolute 200

 PROGRAMACIÓN
ORIENTADA A OBJETOS

201
Programación Orienta a Objetos (POO)
 En JavaScript, podemos construir objetos de la siguiente manera:
 Si nos fijamos, es necesario modularizar el archivo fichero sobre el que hacemos la llamada en el HTML con
type=“module”. Y, además, poner export en la clase que queremos importar para posteriormente poder hacer
un import y traernos dicha clase

202
POO: atributos privados
 Existe la posibilidad de hacer que algún atributo sea
privado de la siguiente manera:

203
EJERCICIO
Realiza el siguiente ejercicio de arrays

204
EJERCICIO
1. Mediante a jQuery haz un botón que mediante a un
toggle que cambie el texto de un párrafo al color rojo.
2. Mediante a JS haz otro botón que mediante a un
toggle el color de un párrafo a azul.

205
EJERCICIO
1. Crea el juego piedra papel tijera por la consola o por
pantalla (utilizando document.write) del navegador
mediante a iconos.

206
EJERCICIO
1. A partir de las cartas que se encuentran en el
siguiente repositorio a partir de una imagen boca
abajo, haz que solamente cuando el cursor se muestre
sobre la imagen se muestra la parte delante de la
imagen.

207
https://github.com/DavidBernalGonzalez/EjerciciosJQuery
EJERCICIO
1. Clona el siguiente repositorio y haz que cuando el botón que
cuando hagas clic sobre el encienda la bombilla y cambié el
interruptor por ON. Y posteriormente, cuando se haga lo mismo a la
inversa se apague la bombilla y el interruptor se ponga a off.
Puedes ver un ejemplo de que realizar en el siguiente video en el
siguiente enlace

208
EJERCICIO
1. Crea un tamagochi con HTML, CSS y JS que sea visible desde la
web.

209
EJERCICIO
A partir del siguiente challenge, realiza una
calculadora similar a la siguiente

210
EJERCICIO
A partir de los siguientes artículos:
https://profile.es/blog/apis-front-end/
https://profile.es/blog/consumir-api-javascript/, consume la
api de Chuck Norris mediante al framework de CSS NES. Un
ejemplo de lo que podría ser un resultado del ejercicio sería
el siguiente:

211
EJERCICIO
Realiza una web que en la que aparezcan unos determinados
botones y cuando pulsemos una serie de teclas, estos hagan sonar
un instrumento. Por ejemplo:

212
Parte del siguiente repositorio: https://github.com/DavidBernalGonzalez/darbuka
Programación Orienta a Objetos (POO)
 Realiza una web que nos haga un Quiz con las preguntas como el siguiente:

213
VALIDACIÓN DE
FORMULARIOS

214
Ejemplo de validación de formularios JS

215
EJERCICIO
Basándote en la siguiente documentación para realizar validaciones
con Bootstrap, haz un formulario similar al siguiente. Que valide si lo
que el usuario ha introducido es correcto.

216
217
https://roadmap.sh/javascript

218