Curso práctico de Javascript para el desarrollo web
Aprende Javascript a través de ejemplos prácticos orientados a la resolución de problemas típicos en la web
Material disponible
Básico
16 Clases 27 h
El Curso práctico de Javascript para el desarrollo web está pensado para aprender el lenguaje de programación más importante de la web, por medio de ejemplos útiles en el trabajo del día a día. Comenzaremos con una serie de clases básicas, orientadas a la obtención de una base de conocimientos esenciales, que nos sirvan de punto de partida para todos. Luego abordaremos una colección de prácticas extremadamente recurrentes en la mayoría de los sitios web modernos.
Las prácticas irán incrementando en dificultad y se resolverán con diversos enfoques más o menos básicos. Los problemas se resolverán preferentemente usando Javascript "Vanilla" (sin usar librerías o frameworks),  partiendo desde cero. Cuando la ocasión lo requiera mostraremos también soluciones o apoyándonos en librerías útiles, que nos simplifiquen la vida y nos permitan desarrollar mejor y más rápido.

En este curso no vamos a dedicar mucho tiempo a temas básicos del lenguaje en sí, como variables, arrays, estructuras de control... (ya existen en EscuelaIT cursos más enfocados a ello, como el Curso de Introducción a la Programación con Javascript). En lugar de ello nos centraremos en resolver necesidades concretas de sitios web, despejando sobre la marcha las dudas que surjan en el uso de los conceptos básicos de Javascript.

Usaremos Javascript con ES5, la versión del lenguaje que es compatible con todos los navegadores. Aunque en los casos que sea necesario podremos abordar características de ES6, como las promesas, que son necesarias para trabajar con Ajax y la interfaz de uso más moderna: fetch, o las propias promesas. En todos los casos en los que usemos características avanzadas de Javascript que no estén disponibles en todos los navegadores, explicaremos qué polyfills implementar, su uso y lo pondremos en práctica, para asegurarnos que los ejemplos sean compatibles con la mayoría de los clientes web, incluso los más antiguos.

Nos limitaremos a Javascript del lado del navegador, Javascript para la web, aunque es un curso que podría servir de introducción para las personas que deseen tener un conocimiento de base sólido de Javascript, con el que enfrentarse más adelante a otros objetivos, como aprender un framework, NodeJS, las aplicaciones híbirdas, etc. (Consulta otros cursos de EscuelaIT para seguir aprendiendo Javascript en todas esas áreas del desarrollo).

Nos preocuparemos durante el curso en ofrecer los consejos que nos ayuden a organizar el código de la mejor manera, evitando en la medida de lo posible malas prácticas que dificulten el mantenimiento de los proyectos a futuro. En la última clase realizaremos un sitio web agrupando los ejemplos del curso, en el que pondremos en práctica las técnicas necesarias para correcta puesta en producción de un sitio web con Javascript, dedicando esfuerzos a la optimización del código, que nos asegure la necesaria velocidad de descarga del sitio y de ejecución de las páginas en general.

Qué aprenderé en el Curso práctico de Javascript para el desarrollo web

  • Base de conocimiento de Javascript para la web:
    • Javascript en el ámbito de la web
    • Bases del lenguaje Javascript
    • Manipulación del DOM
  • Prácticas de Javascript:
    • Gestores de dependencias (Bower) y librerías (jQuery / Polymer)
    • Validación de formularios
    • Trabajo con fechas
    • Ajax
    • JSON y sistemas de templates Javascript
    • Upload de archivos
    • Gestión de scroll
    • Llevar a producción: Minimización y concatenado

Clases y contenidos

Introducción a Javascript en el ámbito de la web Gratis
  • 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.
El lenguaje Javascript Gratis

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.

Manipular la página: acceso al DOM Gratis

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.

Gestores de dependencias. Bower & npm

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.
Guía rápida para restaurar ejemplos del curso y realizar envíos por POST

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.

Validación de formularios

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.

Sesión Práctica 1 Ejercicios 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.

Trabajo con fechas en Javascript

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.

Ajax, jQuery y Fetch

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,...

Introducción conceptual a JSON

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.

JSON y sistemas de templates Javascript

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.

Upload de archivos

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.

Desarrollo Javascript con Web Components y Polymer

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.

Scroll y animación

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.

Ir a producción

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

Optimizar un proyecto frontend con Prepros

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.

Valoraciones

Vic

Danilo Vargas

Belen Garcia

Jhon Doe Joe

Javi Felices

Felix Garcia Tolleson

Judith Neumann

max

Jorge González Morales

RICARDO GARCIA LOBO

Cristian David Romero Jimenez

WILLINGTON RINCÓN HOYOS

Justo Izquierdo Rubio

Héctor Garnacho

Lilia London

Ingrid Carolina Peláez

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete