JavaScript Moderno Guía Definitiva Construye +20 Proyectos
Aprende el Lenguaje de Programación Web más popular paso a paso con +20 Proyectos - Incluye Proyecto MERN Full Stack
4.77 (15840 reviews)
81,061
students
53.5 hours
content
Mar 2024
last update
$59.99
regular price
What you will learn
Aprenderás a consumir distintas REST APIS con JSON y Fetch API + Async / Await, uno de los temas más importantes como desarrollador JavaScript
JavaScript es el lenguaje más buscado por los empleadores hoy en día
Aprenderás Lo básico del lenguaje así como conceptos más avanzados
Aprenderás programación orientada a objetos con Classes (ES6) y Prototypes (ES5)
Aprenderás conceptos nuevos en ES6 como Template Literals, arrow functions, generadores, iteradores, promises, async / await, fetch api y mucho mas
Aprenderas programación Asincrona con Promises, Callbacks y Async Await
Construiremos una gran cantidad de proyectos, consumiendo REST API's y otros con código puro de JavaScript
Agregar interacción a tus aplicaciones y páginas web
Why take this course?
Aprende el lenguaje más popular! JavaScript!
El curso incluye la Sintaxis de ECMAScript ES6, ES7, ES8, ES9, ES10, ES11 y ES12 o también conocida como JavaScript Moderno.
También el curso incluye Node.js, Vue.js Express, Mongodb, React y mucho más!
En este curso aprenderás JavaScript desde los fundamentos hasta temas más avanzados como Prototypes, Delegation, Classes, Ajax, Promises, Generadores, Orientado a Objetos, Fetch API, Async Await, Async JS, Objetos, así como consumir REST APIs, API's de JavaScript nátivas como Notification API, Speech API y mucho más!
Si estos temas no son de tu conocimiento, estas en el curso adecuado para aprenderlos!
La mejor forma de aprender es desarrollando algo, en este curso crearemos bastantes proyectos que te llevaran desde el nivel básico hasta avanzado!
Los Proyectos desarrollados incluyen:
Formulario para guardar a Local Storage
Crear un Carrito de Compras
Cotizador de Seguros de Auto
Simulador de Envio de Emails
Cotizador de Criptomonedas desde una REST API ( Más de 100 Criptos incluidas)
Carrito de Compras con Local Storage
Gasto Semanal Y Administración de Presupuesto
Agenda de Pacientes de Veterinaria
Creación de un CRM con IndexedDB
Buscador de Letras de Canciones
API de buscar el CLIMA
Buscador de Imágenes con PIxabay
Buscador y Filtro de Automoviles con Higher Order Functions
Proyecto de Restaurante para Calcular Consumos y Propinas
Testing de Apps con Cypress, Jest y Creando tu propio framework
Cotizador de Prestamos con Intereses a pagar (Desarrollado en React)
Sitio web para una Agencia de Viajes (Desarrollado con NodeJS y Sequelize)
FullStack JavaScript con React, Express, MongoDB, Node
Todos los proyectos utilizan técnicas distintas, por lo cual te servirán para conocer distintas formas de realizar estos proyectos.
LOS PROYECTOS ESTÁN HABILITADOS PARA VERSE DE FORMA GRATUITA
JavaScript es el lenguaje más popular para web hoy en día, y puede utilizarse en el cliente o Servidor, en este curso aprenderás todo lo necesario y es una excelente introducción si quieres aprender librerías nuevas como VueJS, React, Angular o NodeJS
Content
Introducción al Curso
Todos los Proyectos Incluidos en este Curso
Estructura del Curso
Introducción al Curso
Instalando Visual Studio Code y otras herramientas necesarias
Fundamentos de JavaScript
Primeros Pasos con JavaScript
Tu primer programa en JavaScript
La Consola de Chrome (Pt 1 de 2)
La Consola de Chrome (Pt 2 de 2)
Creando Variables con var
creando variables con let y const
Más sobre crear variables
Strings o Cadenas de Texto y sus métodos en JavaScript
Strings o Cadenas de Texto y sus métodos en JavaScript Pt 2
Números en JavaScript y Operaciones Pt 1
Números en JavaScript y Operaciones Pt 2
Tipos de Dato en JavaScript
Operadores de Comparación en JavaScript
Convertir Strings a Numeros en JavaScript
Convertir Strings a Numeros en JavaScript Pt 2
Convertir de un Número a string
Template Literals o String Template
Arreglos en JavaScript y sus métodos parte 1
Arreglos en JavaScript y sus métodos parte 2
Arreglos en JavaScript y sus métodos parte 3
La variable const en objetos y arreglos
Objetos en JavaScript
Creando Arreglos de Objetos
Funciones en JavaScript Pt 1
Funciones en JavaScript Pt 2
Más tipos de funciones en JavaScript
Manejando los errores con Try Catch
Fechas en JavaScript
Estructuras de Control, IF ELSE ELSEIF
Estructuras de Control, IF ELSE ELSEIF Parte 2
Estructuras de Control, IF ELSE ELSEIF Parte 3
Switch en JavaScript
Iteraciones - For Loop
Iteraciones - While y Do While Loop
forEach, Map e Iteradores
Iteradores en JavaScript ya incluidos
Window Object
Scope en JavaScript
DOM, Window y Scripting
Que es el DOM
Primeros pasos con DOM y Scripting
Seleccionando elementos y aplicandole propiedades
Seleccionando un elemento en JavaScript
Seleccionando múltiples elementos en JavaScript
Seleccionando múltiples elementos en JavaScript Pt 2
Traversing en JavaScript
Traversing en JavaScript del Padre al hijo Parte 2
Creando Elementos con JavaScript
Reemplazando elementos con JavaScript
Agregando y quitando clases y otros atributos
Event Listeners en JavaScript
Event Listener Click
Otros Eventos con el mouse
Eventos para los Inputs
Que es el Event Bubbling?
Delegation en JavaScript
Local Storage en JavaScript
Agregando, leyendo, borrando y limpiando el LocalStorage
PROYECTO: Local Storage desde un Textarea
Previsualizando el Proyecto Final: Local Storage desde un Textarea
Iniciando el Proyecto
Aplicando Delegation a los tweets agregados
Almacenando Tweets en Local Storage
Cargando los tweets de Local Storage
Eliminando elementos del Local Storage
PROYECTO: Carrito de Compras
Previsualizando el Proyecto Final: Carrito de Compras
Comenzando el Proyecto
Agregando en el carrito los cursos seleccionados
Eliminando el curso seleccionado del carrito
Vaciando el carrito con un botón
Almacenando Cursos en Local Storage
Imprimiendo los cursos de Local Storage al cargar la página
Eliminando Cursos de Local Storage
PROYECTO: Simular Envío de Emails
Previsualizando el Proyecto Final: Simular Envio de Email
Comenzando el Proyecto
Validando que los campos no estén vacios
Imprimiendo el Spinner y el GIF de enviado
Objetos, Constructores y This
Creando Objetos
Otros Objetos y Constructores
Prototypes en JavaScript
Heredar Prototypes a otro Objeto
La función Object Create
Classes en ECMAScript 6
Creando una Clase
Herencia en Classes con JavaScript
PROYECTO: Cotiza el seguro de tu auto
Previsualizando el Proyecto Final: Cotizador de Seguro de Autos
Iniciando el Proyecto
Leyendo los datos del formulario
Revisando que el formulario no se envie vacio
Cotizando el seguro
Mostrando el Resultado de la Cotización
Finalizando nuestro ejemplo, limpiar el mensaje previo y mostrar el spinner
Convirtiendo el Proyecto de Prototypes a Clases
PROYECTO: Gasto Semanal
Previsualizando el Proyecto Final: Gasto Semanal
Comenzando el Proyecto y Creando las Clases
Insertando las cantidades de presupuesto y restante
Mostrando un error si algún campo esta vacio
Agregando los gastos al listado
Restando los gastos a la cantidad disponible
Cambiando el color del mensaje conforme se gasta el presupuesto
AJAX y XMLHTTPRequest
Primeros pasos con AJAX
AJAX y JSON
AJAX y JSON parte 2
API's, REST API's y Request
Consumiendo una REST API con Ajax
PROYECTO: Generador de Nombres con REST API y AJAX
Previsualizando el Proyecto Final: Generador de Nombres con Fetch API y REST API
Leyendo los datos del formulario y viendo los Endpoints de la REST API
Enviando la petición AJAX y leyendo / Imprimiendo los resultados
JavaScript Asincrono o Async JS
Que es el Código Asincrono en JavaScript
Callbacks
Promises en JavaScript
Fetch API - La nueva tecnología para realizar peticiones que desplazó a AJAX
Cargando un archivo .txt con Fetch API
Cargando un JSON con Fetch API
Consumiendo una REST API con Fetch API
Transformando el Proyecto de Nombres de Ajax a Fetch API
Arrow Functions
Sintaxis de las Arrow Functions
Arrow Functions al Proyecto de Fetch API
Agregando Arrow Functions al Proyecto de Nombres
Async Await
Que es Async Await
Consumiendo una REST API con Fetch y async await
PROYECTO: Cotizar Criptomonedas con Fetch API, async await y Classes
Previsualizando el Proyecto Final
Obteniendo los API Keys
Validando el Formulario
Mostrando un Mensaje de Error
Consultando la API para obtener las Monedas
Accediendo a los valores de las Monedas
Construyendo las Opciones del Select
Enviando una Petición y obteniendo un Resultado
Leyendo y Filtrando el Resultado
Mostrando el Resultado en la Aplicación
Finalizando el Resultado
Mostrando un Spin de Carga
PROYECTO: Mostrar Eventos con la API de Event Brite
Previsualizando el Proyecto Final: Mostrar Eventos con EventBrite API
Creando la aplicación y classes
Leyendo las Categorias de Eventos desde la REST API
Leyendo los datos del formulario
Mostrando un error si algún campo esta vacio
Realizando peticiones a la REST API de eventos
Imprimir el template de eventos
Otros temas de ECMAScript 6
Asignación por Destructuring
Destructuring a Arreglos y Objetos
Destructuring a Funciones
Symbols
Sets
Maps
Iteradores
Generadores
Expresiones Regulares parte 1
Expresiones Regulares parte 2
PROYECTO: Mostrar Establecimientos en un Mapa con Leaflet
Previsualizando el Proyecto Final
Instalando Leaftlet
Consultando la API
Agregando los Pines
Mostrando un Globo de Información (popup)
Creando un Buscador
Filtrando los Resultados
Módulos Nativos en JavaScript
¿Qué son los módulos?
Como crear módulos JavaScript
Exportar / Importar funciones en un módulo
Exportar / Importar classes en los módulos
Exportar / Importar de múltiples archivos
Importar / Exportar de una clase que hereda de otra
PROYECTO: Buscador de Canciones con Módulos
¿Qué vamos a construir?
Creando el módulo de la interfaz
Validando el formulario de búsqueda
Enviando la petición y retornando la respuesta de la REST API
Mostrando la consulta en el HTML
Design Patterns o Patrones de Diseño en JavaScript
¿Qué son los Design Patterns?
Module - Module Pattern ( 1 de 2 )
Module - Module Pattern ( 2 de 2 )
Factory ( 1 de 2 )
Factory ( 2 de 2 )
Singleton
Builder Pattern - Constructor Pattern ( 1 de 2 )
Builder Pattern - Constructor Pattern ( 2 de 2 )
Observer - Patrón de Publicador - Suscriptor (1 de 2)
Observer - Patrón de Publicador - Suscriptor (2 de 2)
Mediator - Patrón de Mediador (1 de 2)
Mediator - Patrón de Mediador (2 de 2)
NameSpace (1 de 2)
NameSpace (2 de 2)
Higher Order Functions y Array Methods en JavaScript
Porque Utilizar Array Methods
.forEach
.map
.filter
.find
.reduce
.some
Preguntas de Capitulo
PROYECTO: Higher Order Functions - Creando un Buscador en Tiempo Real
El Proyecto Finalizado
Comenzando el Proyecto
Seleccionando Elementos del Formulario
Filtrando Automoviles por Marca
Filtrando Automoviles por Año
Filtrando por Precio Minimo y Máximo
Implementando los últimos filtros
Finalizando el Proyecto
Client Side Storage - IndexedDB
Lo que vamos a Construir en este capitulo
Qué es IndexedDB
Creando las variables para la interfaz
Creando la base de datos
Creando un Schema para los campos de la base de datos
Finalizando el Schema
Creando el Objeto para Insertar nuevos datos
Insertando la información en la Base de Datos
Como mostrar los registros de la base de datos
Mostrando toda la información de la base de datos
Mostrando un mensaje en base a si hay o no registros
Creando un botón para borrar citas
Borrando Registros de IndexedDB
ES10 - Novedades
.flat
.flatMap
.fromEntries
.trimStart y .trimEnd
.toString()
try catch
JavaScript Avanzado - this, binding, javascript event loop y mucho más!
this con Implicit Binding
this con Explicit Binding
this con new Binding
window Binding
Event Loop
Prototypes
Herencia de Prototypes
Composición Video 1 de 2
Composición Video 2 de 2
Introducción a webpack
Introducción y que es webpack
Instalando NPM y NodeJS
Creando un archivo de dependencias package.json
Creando nuestro primer bundle
Creando el archivo de configuración de webpack
Creando un script para correr webpack
Transpilar el código con Babel
Escuchar por los cambios con webpack (watch)
Importar CSS en JavaScript con webpack
Importando SCSS en JavaScript
Crear múltiples bundles con múltiples entry points
Agregando common Chunks para crear un archivo con código común
Agregando webpack-dev-server al proyecto
Poniendo todo en práctica
Webpack para crear los HTML
REACT: Aprende React Creando un Proyecto
Qué es React
Lo que vamos a construir
Herramientas para trabajar con React
Comenzando nuestro primer proyecto
Pasar datos entre components
Segunda forma de escribir componentes funcionales
Creando un Formulario
Leer valores de un formulario
Leer los datos de un Select
Leer un submit y validar un formulario
Mostrar mensaje de error
Escribiendo el código de Cotizar la cantidad a pagar
Escribiendo el código para cotizar según el plazo
Agregando el Componente para la cantidad a pagar
Carga Condicional de Componentes
Mostrando el Resultado
Mostrando un Spinner de Carga
Deployment del Proyecto
Introducción a NodeJS - Creando Un Proyecto c/ Express Sequelize Pug y Bootstrap
Lo que vamos a Construir en este capitulo (Sitio Web con Node y MVC)
Comenzando el Proyecto
Instalando las Dependencias
Configurando el Servidor de Express
Creando las Rutas
Creando las Vistas
Creando un Master Page
Creando un directorio para los archivos estaticos
Agregando Fuentes de Google Fonts
Creando un Header
Creando el Footer
Pasando Variables hacia las vistas
Creando la Sección de Nosotros (Parte 1 de 2 )
Creando la Sección de Nosotros (Parte 2 de 2 )
Conectando a una Base de Datos con Sequelize
Creando la Tabla de Viajes y el Modelo
Creando la Vista para los Próximos Viajes
Consultando la Base de Datos y Pasando el Resultado a la vista
Mostrando los Resultados en la Vista
Creando la Vista para cada Viaje y Consultando la BD
Imprimiendo el Resto de Campos
Creando la Vista de Testimoniales
Creando la Tabla y el Modelo para los Testimoniales
Validando Formularios en Node
Llenando los Campos que el Usuario haya llenado correctamente
Mostrando Alertas de Error
Almacenando los Datos del Formulario en la BD
Mostrando los Testimoniales
Creando la Página Principal
Creando la Sección de Nosotros y Descuento
Creando un Parcial re-utilizable para los Viajes
Pasando 2 consultas a la Vista
Detectando la página Actual
Revisando el Proyecto de Posibles Errores
Agregando la C (Controladores) a nuestro MVC
Finalizando los Controladores
Habilitando Async / Await en NodeJS
Qué Aprendimos en este capítulo
Preparando el proyecto para deployment - variables de entorno (BD)
Preparando el proyecto para deployment - variables de entorno (Servidor)
Creando un repositorio de Git
Deployment a Heroku
Migrando la Base de datos
Últimos Ajustes
FullStack JavaScript: API en Express, Node y MongoDB
Lo que vamos a construir
Servidor en Express - Instalando Dependencias (DESCARGA CODIGO FINALIZADO AQUI)
Creando un servidor para la API
Conectando a MongoDB
Definiendo un Modelo
Creando un Controller
Habilitando Routing
Enviando una petición hacia el servidor
Leyendo los contenidos de una petición con body-parser
Insertando un registro en la BD
Obtener todos los registros
Obtener un registro por ID
Actualizando un registro
Eliminando un registro
FullStack JavaScript - Creando el Front End con React
Creando la App y Primeros Pasos
Agregando Routing y Componentes Principales
Agregando una base para las consultas a la API con Axios
Consultando la API con Axios
Habilitando CORS
Mostrando las Citas
Finalizando de Mostrar las Citas
Creando el Formulario para nuevas citas
Leyendo los datos del formulario
Agregando Pacientes
Refrescando las Citas una vez se agrega una
Filtrando Cita por ID
Finalizando la Cita
Eliminando una Cita
Sweet Alert para eliminar una Cita
FullStack JS - Electron para crear una App de Escritorio
Que es Electron
Creando el Proyecto e Instalando Electron
Pasos para crear una app de electron
Otros ajustes a la ventana principal
Consumiendo los Pacientes con Fetch
Mostrando el HTML con la cita
Compilando la App para distribución
Agregando Electron sobre la App existente
Finalizando el Ejemplo
Screenshots
Reviews
Dumitru
November 14, 2023
increible.... su voz y su calma y su ensenanza transmite.... y su paciencia tambie claro conciso y rapidito si que se estrese... mis dieces ❤️??
Marta
November 14, 2023
Juan para cuando un curso de php y MySQL específico??? Me encanta como explicas, queda todo superclaro. !Ojalá más profesores como tu! Gracias por facilitarnos el aprendizaje de manera tan estructurada.
Francisco
November 14, 2023
Excelente curso, habla claro, conciso y se entiende todo muy bien. El orden del temario y como va avanzando me parece un acierto, esta muy bien pensado, se nota que se ha tomado su tiempo antes de empezar a crear este curso.
Isaac
November 13, 2023
me gusto mucho el curso, el maestro explica muy bien y puedes aprender mucho de este curso si estas iniciandote en el mundo de la programacion.
Pepe
November 10, 2023
Nada que no haya escrito ya en valoraciones de otros cursos de este hombre. Juan de la Torre junto con Fernando Herrera, para mi instructores de referencia en programación web. Programador de mucho nivel y sabe transmitir muy bien los conocimientos. Recomiendo también mucho su curso de css, sobre todo en diseño es un crack. Y este curso de JavaScript es el que mejor me ha explicado y clarificado todo lo referente al vanilla-js
Carolina
November 8, 2023
Aprendí mucho, porque inicia desde lo básico a lo complejo. Explica con claridad cada detalle de cada tema. Tiene los recursos necesarios. Además de que da seguimiento a las dudas que surgen o incluso los resuelve en siguientes videos.
Nevil
November 7, 2023
No habia visto un curso mas completo que este, que contiene mas de 20 proyectos que son muy parecidos a lo requerido en la vida real
Daniel
November 2, 2023
Me encanta la forma práctica y dinámica en la que enseña los contenidos. No me da sueño en ninguna clase como me pasa con otras clases jajaja
Lo recomiendo a todos quienes me preguntan ;)
Kelly
October 30, 2023
El mejor curso de JS moderno. El profesor es bastante competente y organizado, Me alegra poder haberlo encontrado y sin duda le seguiré el rastro.
Facundo
October 27, 2023
Excelente Curso y muy buen profesor.
Si quieres aprender de forma practica JavaScript, este es el curso indicado.
Daniel
October 24, 2023
Sinceramente el curso es bastante complejo y enredado. Considero debe ir paso a paso en cada una de las partes de la construcción de los proyectos. Asume que con la explicación básica dada en los elementos de Javascript y DOM ya puedes dominar la creación de los proyectos. Hubiera sido bueno que comenzara los proyectos desde 0 con HTML y CSS para entender bien todo el proyecto desde 0
Jose
October 24, 2023
Me ha encantado el curso. Realmente es genial para aprender Javascript. Es muy completo y con muchos proyectos para poder aprender todos los conceptos que por cierto están explicados realmente bien. Felicito a Juan por ello.
Alexis
October 21, 2023
explica bien y va de paso a paso con lo que va diciendo :) , ya lo conocía y se que tiene buena forma de explicar
Osvaldo
September 12, 2023
el curso es muy completo hasta el momento y muy bien explicado, definitivamente ha sido una gran inversión
Gonzalo
July 26, 2023
El profe enseña muy bien, este es el segundo tutorial que adquiero, y el profe Juan de la Torre es altamente recomendable!!!
Coupons
| Submit by | Date | Coupon Code | Discount | Emitted/Used | Status |
|---|---|---|---|---|---|
| Angelcrc Seven | 3/17/2020 | APRENDEJAVASRIPT | 100% OFF | expired | |
| - | 8/26/2020 | AGO20201 | 95% OFF | expired | |
| - | 1/30/2021 | ENE2021 | 95% OFF | expired | |
| - | 3/15/2021 | M4RZO21 | 95% OFF | expired | |
| - | 4/1/2021 | MARZO2021_ | 94% OFF | expired | |
| - | 4/16/2021 | ABRIL21 | 94% OFF | expired | |
| - | 4/29/2021 | CODIGOABRIL | 94% OFF | expired | |
| - | 5/20/2021 | MAY2021 | 94% OFF | expired | |
| AntiTriki | 7/2/2021 | JUNIO21 | 94% OFF | expired | |
| - | 7/16/2021 | JULIO21 | 94% OFF | expired | |
| - | 8/26/2021 | AGOSTO2021 | 94% OFF | expired | |
| Ulises Pignatelli | 12/22/2021 | METAS2022 | 94% OFF | expired | |
| Ulises Pignatelli | 1/14/2022 | ENERO2022 | 94% OFF | expired | |
| Ulises Pignatelli | 1/31/2022 | ENEROFIN2022 | 94% OFF | expired | |
| Ulises Pignatelli | 5/4/2022 | MAYO2022 | 94% OFF | expired | |
| - | 9/14/2022 | SEP2022 | 88% OFF | expired | |
| - | 12/22/2022 | DIC2022 | 88% OFF | expired | |
| - | 6/1/2023 | JUNIO2023 | 88% OFF | expired | |
| - | 6/17/2023 | METASJUNIO2023 | 87% OFF | expired | |
| - | 7/2/2023 | METASJUN2023 | 88% OFF | expired | |
| - | 7/29/2023 | METASJULIO2023 | 87% OFF | expired | |
| - | 8/8/2023 | AGOSTO2023 | 87% OFF | expired | |
| - | 9/4/2023 | AGOSEP2023 | 87% OFF | expired | |
| - | 9/22/2023 | SEP2023 | 87% OFF | expired | |
| - | 12/20/2023 | METAS2024 | 85% OFF | expired | |
| - | 2/26/2024 | FEBRERO_2024 | 83% OFF | expired | |
| - | 2/29/2024 | FEB_2024 | 83% OFF | expired | |
| - | 3/8/2024 | MARZO2024 | 85% OFF | expired | |
| - | 3/21/2024 | MAR_2024 | 83% OFF | expired |
Charts
Price
Rating
Enrollment distribution
Related Topics
1509816
udemy ID
1/14/2018
course created date
11/1/2019
course indexed date
Bot
course submited by