¡Bienvenidos/as a

Desarrollo Web Full Stack!

¡Gracias Facu La Rocca por la creación de los contenidos de este encuentro!

2
Agenda

Repaso: Modificación del DOM

Teoría: Librerías

Actividad: Creamos nuestra propia librería

Actividad: Utilizando moment.js

Break

Actividad: Utilizando jQuery.js

Conclusiones

Cierre

3
¿Dónde estamos?
Proyecto 2:
gifOS

5
¿Tienen dudas?

6
Guías ¿Ya vieron las guías?

7
Repaso:
Modificación del DOM

10
Crear nodos
createElement
Crea un nuevo elemento HTML

11
Agregar nodos
appendChild
Agrega un nodo al final de la lista de nodos hijos

12
Agregar antes de otro nodo
insertBefore
Agrega el nuevo nodo justo antes del nodo de referencia.

13
Reemplazar un nodo
replaceChild
Reemplaza un nodo hijo por otro

14
Obtener un atributo de un nodo
getAttribute
Obtiene el valor del atributo especificado

15
Establecer un atributo de un nodo
setAttribute
Establece el valor del atributo especificado

16
Eliminar un atributo de un nodo
removeAttribute
Elimina el atributo especificado

17
Modificar el estilo de un nodo
style
Nos permite acceder al estilo de un nodo

18
Teoría:
Librerías

19
Librerías ¿Copiar y pegar? Mmm….
Supongamos que hemos construido un programa contable que
hace cálculos matemáticos y escribimos algunas funciones
matemáticas para calcular algunos impuestos:
- IVA
- IIBB
- Ganancias

Ya las probamos y sabemos que funcionan a la perfección!

20
Librerías
Ahora supongamos que estamos escribiendo
otra aplicación que también donde también
necesitamos calcular IVA.
¿Qué hacemos?
¿Copiamos y pegamos?
¿Las volvemos a escribir?

¿Y si mejor creamos una librería?...

21
Librerías
¿Qué es un librería?

Las librerías son conjuntos de funcionalidades a las que

podemos acceder para resolver problemas sin tener que escribir
código desde cero.

22
Librerías
¿Cómo agregamos una librería?

Opción 1: Descargando la librería

<script src="./scripts/moment.js" type="text/javascript"></script>

Opción 2: Utilizar un CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

23
Librerías
El orden es importante!!!
Es importante tener en cuenta que el orden en el que se agregan las
librerías es importante. Por ejemplo, si intentamos utilizar una
función de una librería incluida posteriormente, obtendremos un
error.
Por ejemplo:

24
Actividad:
Creamos nuestra propia
librería

25
Actividad
1 - Crear el proyecto
Librerías
Creamos una carpeta llamada librerías, dentro de ella creamos un
archivo llamado index.html y creamos una carpeta donde
guardaremos nuestro librería llamada scripts

26
Actividad
2 - Crear la librería
Librerías
Dentro de la carpeta scripts que creamos en el paso 1, creamos una
archivo llamado impuestos.js.

Luego editaremos el archivo para agregar nuestras funciones, por

ejemplo calcular el IVA.

27
Actividad
3 - Incluir nuestra librería
Librerías
Es hora de incluir nuestra nueva librería impuestos.js en nuestro
html para poder hacer uso de sus funciones.

28
Actividad
4 - Utilizar la función iva()
Librerías
Listo!!! Lo único que nos queda es utilizar nuestra función iva que
creamos en nuestra librería.

29
Actividad:
Utilizamos moment.js

30
Actividad
1 - Creamos el proyecto
Moment JS
Creamos el proyecto repitiendo el paso 1 de la
actividad anterior.

Creamos una carpeta llamada librerías, dentro de ella creamos

un archivo llamado index.html y creamos una carpeta donde
guardaremos nuestro librería llamada scripts

31
Actividad
2 - Descargamos la librería
Moment JS
Nos dirigimos al sitio oficial
https://momentjs.com/ y bajo la sección
Descargas descargamos la librería.
Una vez tenemos la librería descargada localmente,
movemos el archivo a la carpeta scripts del
proyecto.

32
Actividad
3 - Incluir la librería
Moment JS
Repetimos el paso 3 de la actividad anterior para incluir
moment.js en nuestro archivo HTML

Es hora de incluir nuestra nueva librería impuestos.js en nuestro

html para poder hacer uso de sus funciones.

33
Actividad
4 - Utilizar moment.js
Moment JS
Vamos a utilizar el método format de moment.js para
obtener la hora actual.
Solo debemos indicar el formato qué deseamos.

34
 ¡BREAK!

Ph. Credit: Drew Coffmann

Actividad:
Utilizamos jQuery.js

36
Actividad
1 - Crear el proyecto
jQuery JS
Creamos el proyecto repitiendo el paso 1 de la
actividad anterior.

Creamos una carpeta llamada librerías, dentro de ella creamos

un archivo llamado index.html y creamos una carpeta donde
guardaremos nuestro librería llamada scripts

37
Actividad
2 - Descargar jQuery
jQuery JS
Descargar jQuery desde el sitio oficial jquery.com.
Asegurarse que sea la versión reducida (min.js).

3 - Incluirla en el index.html
Incluir jQuery en index.html

38
Actividad
4 - Utilizar jQuery
jQuery JS
- Mostrar un alerta cuando el documento se
haya terminado de cargar ($
(document).ready) que muestre cuántos días
quedan para finalizar el año.
Por ejemplo: Si la fecha actual fuese el 1º de
Diciembre, el texto debería mostrar “Quedan
31 días para el año nuevo”.

39
Recursos adicionales:
¿Hay más librerías?

40
Librerías
Si… Un montón más....

Solo por nombrar algunas de las más conocidas:

- Lodash.js - Manejo de arrays, strings y más

- Chart.js - Gráficos matemáticos
- Anime.js - Animaciones y efectos
- Parsley.js - Validación de formularios
- Bootstrap - CSS clases
- Plyr.js - Reproductor de video

Y muchísimas más...
41
Para la próxima

● Ver los siguientes videos del capítulo “Comunicación en la web y

APIs”:
○ 1.1 Introducción: La Web y el protocolo HTTP
○ 1.2 Cómo funciona acceder a un sitio
○ 1.3 Comunicación Cliente/Servidor
○ 1.4 Tipos de Requests HTTP
○ 1.5 Fetch

● Deberán traer preparadas preguntas sobre contenido de la carrera visto

hasta ahora para hacerle a sus compañeros/as en clase (ustedes deben
saber la respuesta). ¡Recomendamos tener preparadas 2 o 3 preguntas
por si se repiten!
42
Para la próxima

Las preguntas pueden ser de cualquier tema visto hasta el momento:

HTML/CSS JAVASCRIPT

Etiquetas Lógica programación

Posiciones Sentencias
MediaQuery Ciclos
SASS DOM
Buenas prácticas Funciones
FlexBox Callbacks
CSS Grid Promesas
Fetch

43