Curso de Javascript práctico para el desarrollo web

• Repaso conceptual al estado de Javascript, sus aplicaciones y posibilidades.
• Primeros pasos con la programación en Javascript.
• Integrar scripts en la página y explicando sus diferencias.

En esta clase hacemos un rápido repaso a los aspectos fundamentales del lenguaje Javascript, viendo variables, tipos, estructuras de control, arrays, por medio de una buena cantidad de ejercicios prácticos. Obviamente, aprender un lenguaje con profundidad lleva mucho tiempo, y es imposible concentrar en una sesión todo lo que está disponible en el lenguaje Javascript, pero la idea de esta clase es ofrecer una base de conocimiento del lenguaje, suficiente para afrontar el resto del curso.

En esta clase nos centramos en lo que se conoce como DOM, el modelo de objetos del navegador que nos permite manipular el estado de la página. Mostramos cómo acceder al DOM mediante la jerarquía de objetos del navegador, cómo seleccionar elementos de la página por medio de identificadores, clases o etiquetas, iterar por los elementos seleccionados. Cómo crear elementos al vuelo, mediante código Javascript e inyectarlos en la página, así como eliminarlos del DOM para que desaparezcan.

En esta clase explicamos los gestores de dependencias. Conocemos los comandos principales y la operativa de trabajo con Bower y npm, muy similares en el modo de utilización, aunque diferentes en el alcance o ámbito de trabajo. Una vez conocemos la operativa y practicamos instalando y desinstalando librerías diversas, nos centramos en hacer un par de prácticas con librerías para mejorar nuestro sistema de aviso de cookies, ampliando el proyecto para que:

• Compruebe si el navegador del usuario admite cookies
• Use cookies creadas desde Javascript para marcar que el usuario las ha aceptado
• Evita que aparezca de nuevo el aviso cuando el usuario aceptó las cookies
  Además explicamos los primeros pasos con jQuery y mostramos cómo realizar con la librería algunas de las cosas que hemos realizado únicamente con Javascript. Luego implementamos jQuery para que el aviso de cookies desaparezca con un efecto de fundido al aceptar las cookies. Como último punto explicamos cómo se restauran las dependencias de un proyecto descargado desde Github por medio de los gestores de dependencias.

En este vídeo te indicamos cómo restaurar los ejemplos realizados en las clases del curso, desde un repositorio de Github.

• Clonamos el repositorio en local
• Lanzamos un servidor de desarrollo para ver el contenido de los archivos de ejemplos.

Luego se muestra cómo enviar datos por POST y recibirlos desde un servidor en NodeJS, que se entregó con los ejemplos del curso. Se explica cómo poner en marcha el servidor para lo que se tienen que instalar sus dependencias usando npm.

Además se explica cómo podría usarse un servidor PHP para hacer lo mismo que hace el servidor en NodeJS, por si acaso no queremos usar Node y preferimos usar PHP, porque estemos más familiarizados o porque nos guste más este lenguaje para aprender.

En esta clase vamos a comenzar con el aprendizaje de la validación de formularios, que es una excelente práctica para aprender Javascript, acceso, interactividad y manipulación del DOM. Aprendemos a detectar cuando se envía un formulario, creando una función que nos sirva para ejecutar código cuando se produce el envío del formulario. Luego veremos cómo interrumpir el proceso de envío del formulario, mediante el objeto evento. Por último veremos la validación del formulario y su envío programático mediante Javascript.

Repasamos ejercicios para consolidar nuestro aprendizaje en Javascript. En esta clase vamos a resolver los ejercicios propuestos en las clases 1 y 2 del curso. Además veremos cómo refactorizar el código de validación del formulario para que te muestre todos los mensajes con fallos de validación en una única vez, en lugar de mostrarte los mensajes error por error.

En esta clase veremos cómo trabajar con fechas en Javascript, para hacer una gama de operaciones comunes en la mayoría de las aplicaciones web, como son la visualización de fechas en un formato personalizado, la introducción de fechas y hora por parte del usuario en formularios y la transformación de las fechas en diversos casos.
Trabajar con fechas no es algo trivial, aunque Javascript tiene unas funciones muy rudimentarias que no nos ofrecen todas las utilidades que las aplicaciones requieren, por lo que generalmente tendrás que usar además algunas librerías útiles. En esta clase veremos cómo se trabaja con fechas en Javascript básico ("Vanilla Javascript" o "Javascript puro") y también cómo nos podemos apoyar en diversas librerías para hacer operativas frecuentes.
Veremos en concreto sistemas para hacer datepickers, sistemas para recibir la fecha y la hora por formulario, y veremos también la poderosa librería MomentJS, que nos aporta gran cantidad de nuevas funciones muy útiles en el día a día de las aplicaciones, a la hora de trabajar con fechas y horas en Javascript.

A lo largo de la sesión de hoy vemos qué es Ajax, además de temas relacionados como Ajax con jQuery o Ajax con Fetch. En el último bloque de contenidos trabajaremos con polyfill, loading condicional, promesas,...

Este es un vídeo que no forma parte de las clases del curso. Es una presentación para explicar JSON desde un punto de vista teórico, entender qué tipo de lenguaje es, para qué se utiliza y ponerlo en contraste con otros lenguajes como XML que se podrían usar para objetivos similares.
La intención de colocar este vídeo en este curso es que los estudiantes puedan conocer aspectos teóricos sobre JSON, en los que no vamos a entrar en detalle durante las clases. En cambio, nos dedicaremos a hacer ejemplos prácticos en el curso para aprender a usar JSON en páginas web y la aplicaci´ón de templates Javascript, objetivo final de la siguiente clase del curso.

En esta clase aprenderemos a trabajar con JSON y a recibir datos puros con los que compondremos un HTML del lado del cliente para injectar en la página y producir una manipulación avanzada con datos complejos. Aunque antes de comenzar veremos un código que nos quedó pendiente de la clase anterior, con el que explicaremos el modo de envío de formularios con Ajax usando la nueva API de Fetch y promesas. El objetivo de la clase además es aprender a trabajar con sistemas de templates. Veremos cómo recibir datos crudos, en formato JSON, por Ajax. Veremos ejemplos de Ajax y JSON usando jQuery y Fetch. Demostraremos que componer HTML del lado del cliente puede tener una dificultad importante y sobre todo genera código de difícil mantenimiento. Por último veremos cómo usando una librería de templating con Javascript, como Handlebars, seremos capaces de producir HTML como resultado de aplicar los datos JSON a una plantilla HTML. Esto nos produce un código mucho más comprensible, pues tenemos un HTML casi plano, muy fácil de editar, a la vez que nos permite separar el HTML del código Javascript, lo que siempre es una buena práctica.

En esta sesión nos centramos, desde el lado del cliente, en los elementos de la página que nos sirven para hacer upload. Después de conocer el detalle sobre cómo funciona el objeto "input file" y qué propiedades nos ofrece desde Javascript, nos centramos en los siguientes ejercicios prácticos:
1.- Validación de los archivos que se han seleccionado en un campo input file, para comprobar su tipo y su tamaño.
2.- Subida de archivos mediante Ajax, para lo que tenemos que utilizar un API de trabajo con los datos del formulario, accesible mediante un objeto llamado FormData.
3.- Lectura desde el navegador de un archivo que se ha seleccionado en un input file. En este caso accedemos a una imagen y mostramos su visualización (preview) en la página. Para ello usamos un API de lectura de ficheros que está disponible mediante el objeto "FileReader".
4.- Modificamos el script para validar una lista de archivos en un campo "input file multiple", permitiendo también la subida por Ajax de múltiples archivos al servidor usando FormData.

En esta clase ofrecemos una introducción práctica a Polymer y el desarrollo basado en Web Components, con el objetivo de servir de comparativa con respecto al desarrollo con Javascript "Vanilla" o el desarrollo con una librería de manipulación del DOM como jQuery.
En esta sesión comenzamos con un "hola mundo" en Polymer, en el que aprendemos varios conceptos como los templates nativos de Javascript, el binding, la compatibilidad por medio del polyfill de los web components, declaración de propiedades o creación de funciones manejadoras de eventos.
Luego partimos a un ejemplo práctico en el que vamos a realizar exactamente el mismo ejercicio con el que terminamos la clase de JSON. Nos conectaremos con una API por medio de Ajax y el componente iron-ajax, que nos permite un desarrollo declarativo, en vez de imperativo como hemos visto hasta este punto del curso. En la conexión con el API obtendremos datos JSON que mostraremos en un template de repetición. Crearemos una estructura de custom elements que, aunque sencilla, nos permita entender cómo es el desarrollo basado en componentes y su interoperabilidad.

En esta clase nos dedicamos principalmente a realizar varios ejemplos prácticos sobre tratamiento del scroll (desplazamiento) en webs. En la clase aprenderás a trabajar con los eventos de scroll y a realizar desplazamiento programáticamente.
Además aprenderemos a realizar animaciones con Javascript, que te resultarán útiles para infinidad de casos prácticos.
Veremos varios ejemplos interesantes, como detectar el scroll para ocultar el aviso de cookies (completando un ejercicio anterior visto en otras clases del curso) En este caso aprenderás además a configurar un manejador de evento que sólo se ejecutará una vez.
Luego veremos un ejemplo del típico control que te sirve para ir a la parte de arriba de la página, generando el scroll con una animación que cambie la velocidad a lo largo de su proceso, para obtener un sencillo pero atractivo efecto de "easing".
Acabamos con un ejemplo de desplazamiento horizontal, sobre un elemento que tiene una región propia de scroll, en el que incorporamos también los conocimientos de la clase de templates.

Herramientas GUI (graphical user interface) Herramientas con código

Usamos la aplicación Prepros, compatible con Windows, Mac y Linux para realizar la adecuación de un proyecto para llevar a producción: concatenación de archivos Javascript y minimización del código para una transferencia más rápida.

Mostramos cómo con Prepros también podemos preprocesar el código CSS, realizado con SaSS y damos un rápido repaso por otras utilidades de esta herramienta.

Acabamos la sesión resolviendo ejercicios que teníamos pendientes de clases anteriores, sobre Ajax.