JavaScript y ES6: Lo último en JS con Proyectos Reales

Introducción5 clases

Introducción

JavaScript Vanilla o JavaScrip Puro

¿Que es el DOM y como navegar por el?

Por que usar JavaScript sin jQuery

La importancia de la documentación

Preparación del entorno y primer contacto6 clases

Instalación del Code Editing

Instalando Extensiones en Visual Studio Code

Selección del navegador web

Primer Código en JavaScript

Entendiendo la Consola de JavaScript del Navegador

La importancia del orden del código ya no importa tanto

Variables en JavaScript y ES64 clases

El tipo de las Variables

Declaración de Variables VAR vs LET

Declaración de CONST (Constantes)

Asignación por Destructuring

Objetos en JavaScript4 clases

Declaración de Objectos

Anotación por Puntos y Corchetes

Objetos dentro de objetos

Modificación de objetos y creación de nuevas propiedades

Arrays, If Else, Switch y Bucles7 clases

Arrays simples

Array de Objetos

If Else y If Ternario

Switch y el control de los datos

Bucles For

Bucle Foreach

Bucle While y do While

Funciones en JavaScript9 clases

1/3 - Funciones estándar

2/3 - Funciones estándar

3/3 - Funciones estándar

Funciones de tipo flecha (Arrow Functions)

Funciones de espera de tiempo

Función .map()

Función .filter()

Convertir variables de Number a String y de String a Number

Función .replace()

Profundizando en JavaScript4 clases

¿Que es un JSON?

JSON.stringify() y JSON.parse()

NEW palabra reservada para crear Objetos con tipo.

Async y Await

Cookies y LocalStorage6 clases

Cookies - Instalando servidor web con Node JS y http-server

1/3 - Creando, Eliminando, Mostrando Cookies y usando Escape y Unescape

2/3 - Creando, Eliminando, Mostrando Cookies y usando Escape y Unescape

3/3 - Creando, Eliminando, Mostrando Cookies y usando Escape y Unescape

LocalStorage, Crear, Modificar, Mostrar y Eliminar datos

LocalStorage con Objetos

Eventos1 clases

onSubmit de un formulario

Peticiones HTTP con Fetch1 clases

Petición GET con Fetch

PROYECTO: Calculadora13 clases

Resultado final de la aplicación

Repositorio de la app

Creando el HTML de la calculadora

Creando el CSS de la calculadora

Capturando el valor del click de los botones y creando la función del filtro

Cambiando el valor de la screen al presionar algún numero

Creando la función para guardar la operación selecciona y calculando la suma

Transformar String en Number para poder calcular el total de la operación

Limpiando resultado con el botón AC

Calculando Restas

Calculando Multiplicaciones y Divisiones

Calculando Porcentaje y Pasando de Positivo a Negativo un valor

Fin del Proyecto

PROYECTO: Carrito de una tienda online17 clases

¿Qué vamos hacer en este proyecto?

Repositorio de la app

Creando la estructura del proyecto y añadiendo Bootstrap 4

Instalando Node JS y http-server para ejecutar el proyecto

Creando el HTML de la página

Añadiendo el CSS para darle un estilo mas agradable

Creando un JSON DB para guardar los productos de la tienda

Recuperando todos los productos del JSON con un FETCH

Renderizando todos los productos en nuestra web

Añadiendo la funcionalidad de abrir el carrito al hacer click en el icono

Guardando los IDs de los productos seleccionados en el localStorage

1/2 - Renderizando los producto seleccionado del localStorage en el carrito

2/2 - Renderizando los producto seleccionado del localStorage en el carrito

Cargando los productos que se habían añadido al carrito al recargar la página

Eliminando los productos del carrito seleccionados

Incrementando la cantidad de un producto del carrito

Decrementando la cantidad de un producto del carrito

PROYECTO: Página de películas con peticiones a TheMovieDB31 clases

Resultado final de la aplicación

Repositorio de la app

Creando una cuenta en The Movie Database (TMBd)

Creando el proyecto base de Películas

Añadiendo Bootstrap 4 al Proyecto

Añadiendo FontAwesome 5 al Proyecto

Creando las Páginas y el Menu de Navegación

Petición HTTP para recoger las nuevas películas

Creando el carrousel de las nuevas películas

Lista de las 5 películas más populares para la home

Lista de las 5 películas mejor puntuadas para la home

Optimizando código de la home

Recogiendo el ID que pasamos por parámetros de la URL por JavaScript

Obteniendo los datos de una película por su ID

Pintando el background de la pagina con la imagen de poster de la película

Pintando la carátula de la película

Pintando toda la información de la película

Obteniendo el trailer de la película

Creando un Modal para el Trailer del Video

Pintando el Trailer de la película para poder reproducirlo dentro del Modal

Estructura de la página de Ultimos Lanzamientos

Capturando en la página que estamos

Cargando los últimos lanzamientos de la página correspondientes

Pintando la lista de películas obtenidas

Creando la paginación de películas

Creando la pagina de Películas populares

Creando la estructura del buscado de películas

Capturando lo que escribe el usuario en el input por cada dato introducido

Petición HTTP para buscar películas

Pintando películas encontradas por el buscado en el html

Fin del Proyecto

JavaScript y ES6: Lo último en JS con Proyectos Reales

Contenido del curso

Comentarios de los estudiantes

Valoraciones

Este curso incluye:

Instructor del curso