Módulo 4: JavaScript en el navegador
| Horas | 9 |
| Clases (laboratorios) | 3 |
| Unidades | 4 |
Aprendizaje esperado
Conocer y manejar la API de Javascript utilizada por el navegador web.
Unidades
| Aprendizajes Esperados | Criterios de Evaluación | Títulos | Horas | Clase |
|---|---|---|---|---|
| Fundamentos del navegador web | Comprender el navegador web y su uso como entorno de ejecución de aplicaciones | Que es un navegador web. Motores y diferentes navegadores. Navegadores web en móbiles. Cookies y Navegación. Las múltiples API del navegador implementadas en Javascript. | 2 | 1 |
| HTML, CSS y el Árbol DOM | Entender y manipular con Javascript documentos html | Etiquetas WEB y su significado. CSS modelo. Accesibilidad. BOM y DOM. Windows Object. Location, History, SetTimeOut, SetInterval. Recorrer el árbol dom. Acceder a nodos, Nodos hijos, atributos, modificar, crear y nodos. | 1 | 1 |
| Eventos y XMLHttpRequest | Comprender y utilizar eventos en el navegador y html | Listeners, captura, burbujeo, propagación, prevent default, tipos de eventos. Enviar solicitudes, procesar la respuesta. | 3 | 2 |
| Scripts y Carga de recursos | Ser capáz de lanzar a producción sitios web estáticos potenciados con Javascript | Taller de deploy de un sitio html estático aumentado con javascript. Carga de recursos en sitios web. Herramientas y rendimiento de sitios web. Técnicas de puesta en producción para sitios web. Lighthouse | 1 | 3 |
Hola! Bienvenidos al cuarto módulo del curso de Javascript. En estos laboratorios experimentaremos con el navegador y lo usaremos como un entorno de ejecución de Javascript para hacer aplicaciones altamente interactivas y dinámicas. Conoceremos al DOM, una estructura de datos fundamental para representar el documento HTML. Conoceremos los principales métodos de Javascript para interactuar con el DOM y “escuchar” a los eventos que burbujean desde sus nódos.
Trabajaremos con XMLHttpRequest y veremos cómo el uso intensivo de esta tecnología está generando nuevos marcos de trabajo para crear aplicaciones web similares en una sola página, es decir, sin necesidad de recargar la página completamente para modificar su contenido.
Para completar los laboratorio debes contar con los siguientes prerequisitos:
- Una cuenta personal en Github
- Una terminal de comandos: Bash, ZSH o GitBash
- Un editor de código.
- Aceptar las invitaciones que enviará el instructor, en cada sesión, con el respositorio de experimentos que componen cada laboratorio.
A través de 3 experiencias prácticas vamos a conocer los fundamentos del navegador web, repasar html, css y el árbol DOM. Trabajar con eventos, llamadas AJAX para finalizar desplegando un sitio estático potenciado con Javascript moderno de cero a producción.
En estos experimentos debemos:
1) Leer atentamente la salida de la consola o terminal.
2) Conversar con tu EQUIPO acerca del origen o causa raíz del problema.
3) Identificar el archivo y la línea del archivo que podría estar generando el problema.
4) Experimentar haciendo UN cambio a la vez, probar y repetir esta receta hasta llegar a una conclusión razonable que nos permita construir conocimiento que nos sirva para el futuro.
Es muy importante, como en todo experimento, hacer UN SOLO cambio a la vez. Esto nos permitirá hacer conclusiones sin que otros factores puedan estar afectando nuestro raciocinio.
Para el primer ejemplo ejecuta en la terminal el siguiente comando:
node test browser/01_web_browser.test.js
Para dejar de ejecutar las pruebas presiona la tecla ‘Q’