Javascript 2020: El curso práctico y completo
4.0 (191 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
597 students enrolled

Javascript 2020: El curso práctico y completo

Domina Javascript desarrollando 3 juegos! Aprende ES6+, POO, Módulos, Ajax, Webpack, Babel, NPM y muchos más conceptos.
4.0 (191 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
597 students enrolled
Created by Juan Ramos
Last updated 5/2020
Spanish
Spanish [Auto]
Current price: $51.99 Original price: $74.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 15.5 hours on-demand video
  • 7 downloadable resources
  • 1 Practice Test
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Crearás tus primeros juegos mientras aprendes Javascript
  • Aprenderás a desarrollar aplicaciones haciendo uso de Javascript
  • Estarás listo para crear páginas que interactúen con los usuarios que la visitan
  • No volverás a confundir Javascript con algún otro lenguaje de programación
  • Tendrás una sólida base para profundizar en temas más complejos
Course content
Expand all 77 lectures 15:17:25
+ Introducción
1 lecture 10:31

Permíteme explicarte de forma general los temas que vamos a ver en el curso, y así mismo, darte sugerencias sobre cómo debes seguir el curso, para sacarle un máximo provecho.

Preview 10:31
+ Sentando las bases
4 lectures 20:57

¿Nunca has programado? No te preocupes, veamos qué necesitas para empezar. No es nada del otro mundo.

Preview 03:47

Ya que tenemos Sublime Text instalado, instalemos rápidamente este plugin antes de continuar.

Emmet en Sublime Text 3
04:11

Un primer ejemplo para explicar las diferencias.

¿Cuál es la diferencia exacta entre HTML, CSS y JS?
09:06

En esta clase vamos a ver qué es la Chrome Developer Tools y de forma específica, como usar la consola.

Consola de desarrollo de Chrome
03:53
+ Javascript: Fundamentos de programación
9 lectures 01:16:50

Un primer acercamiento al código. Veamos cómo se estructura el código fuente.

Preview 05:01

¿Qué tipos de datos existen en Javascript?

Tipos de datos y comentarios
09:36

¿Qué diferencia existe entre un lenguaje débilmente tipado y un lenguaje fuertemente tipado?

Javascript es un lenguaje débilmente tipado
01:49

¿Cómo se convierte una variable de un tipo de dato a otro tipo de dato?

Conversión entre tipos de datos
09:39

Una variable cuyo valor no cambia no es una variable, es una constante.

Constantes
05:17

Si se cumple esto, entonces hacer esto, sino, hacer esto otro.

Condicionales
08:36

Quiero ejecutar estas sentencias muchas veces.

Bucles
14:21

Hay una funcionalidad que espero usar muchas veces en mi programa. Crearé una función para ello.

Funciones
13:26

Una variable está disponible aquí, pero no en esta otra sección de mi programa.

Ámbitos (Scopes)
09:05
+ Un piano en Javascript
5 lectures 01:02:17

Primeras consideraciones a tener en cuenta. Diseño base y recursos necesarios.

Primeros pasos
10:13

Vamos a dotar de funcionalidad a una primera tecla. ¿Cómo suena la nota DO?

Una tecla
13:56

Veamos cómo seleccionar todos los botones de una sola pasada, y a registrar un listener para el evento "click" de todos ellos.

Varias teclas
12:56

Hacemos un repaso del código que ya tenemos, y modificados el código para usar características nuevas de ES6 (última versión de JS hasta la fecha).

Repaso y refactorización
14:05

Veamos cómo detectar cuando una tecla es presionada, y cómo disparar un evento de click.

Pulsaciones del teclado
11:07
+ Javascript: Entrando en materia
5 lectures 55:21

Según el último estándar de ECMAScript, Javascript presenta 7 tipos de datos. ¿Cuáles son?

7 tipos de datos disponibles
08:53

¿Qué es un objeto? ¿De qué se compone? ¿Qué diferencias tiene un objeto en JS con relación a otros lenguajes?

Objetos
08:48

Los arreglos son objetos. ¿Qué significa esto? ¿En qué se diferencian?

Arreglos
08:57

Una función se puede declarar de múltiples formas. ¿Cuándo una función es considerada método?

Funciones
11:08

En esta lección analizamos métodos y propiedades que están disponibles sobre los objetos nativos de Javascript.

Métodos y propiedades predefinidos
17:35
+ Piedra, papel o tijeras en Javascript
6 lectures 01:16:22

¿En qué consiste el juego que vamos a implementar? En esta lección planificamos y definimos la estructura base-

Esquema general
14:38

En esta lección añadimos algunos estilos sobre la estructura HTML que hemos definido previamente.

Añadiendo estilos CSS básicos
06:20

Terminamos de definir el diseño base y empezamos a obtener referencias de los elementos de nuestra app.

Diseño base y referencias
08:05

Vamos a determinar la elección del jugador, y a generar una elección aleatoria para la computadora.

Elección del jugador y de la computadora
16:46

En esta lección nuestra aplicación determinará quién es el ganador, según las opciones escogidas por el jugador y la computadora.

¡Y el ganador es!
10:57

En esta lección actualizamos los elementos visuales de nuestro HTML vía Javascript.

Mostrando resultados finales
19:36
+ Características nuevas en ES6
6 lectures 01:25:22

En esta lección analizamos cuál es la diferencia entre estas 3 palabras reservadas, y así mismo discutimos algunas buenas prácticas sobre la declaración de variables.

Diferencias entre var, let y const
23:40

Veamos qué ventajas nos aporta el uso de los Template literals, o Literales de plantilla.

Template literals
07:41

¿Cuál es la diferencia entre un tagged template literal y un template literal?

Tagged template literals
09:02

Veamos cómo el operador rest nos permite trabajar con una cantidad indefinida de parámetros.

Operador rest
18:03

Los 3 puntos no se usan únicamente para agrupar parámetros en 1 arreglo, también para separar 1 arreglo en varios argumentos.

Operador spread
09:11

¿En qué consiste la asignación por destructuring o desestructuración? Veamos varios ejemplos para entender el beneficio de esta nueva sintaxis disponible.

Desestructuración (destructuring)
17:45
+ El juego de la snake
13 lectures 02:37:23

¿Qué es el elemento Canvas de HTML5? ¿Y qué nos permite hacer?

El elemento Canvas de HTML5
09:17

¿Qué ventaja presenta el evento keydown sobre keypress para nuestro juego?

Detectar pulsaciones del teclado (Flechas)
05:01

Veamos cómo desplazar un objeto.

Cómo generar movimiento
08:43

Definamos ahora, la función principal de nuestro juego.

¿Qué es el Main loop o Game loop?
10:24

Veamos cómo generar una posición aleatoria válida, en base a los valores admitidos como coordenadas X e Y.

Generar alimento para la snake
14:43

Llegó el momento de pintar los objetos con colores específicos, y de permitir a la snake consumir el alimento.

Colores y cómo consumir el alimento
11:00

Veamos cómo aumentar el tamaño de la snake cada vez que se alimente. Así mismo, revisemos qué es una asignación por valor y una asignación por referencia.

Aumentar el tamaño de la snake
30:56

Ahora vamos a detectar cuándo la serpiente colisiona consigo misma, para hacer que el jugador pierda.

Detección de colisiones
09:57

Veamos cómo evitar que el movimiento siguiente de la serpiente sea sobre el mismo eje, a fin de no confundir al jugador.

Evitar dirección contraria
09:03

¿Cuáles son los límites permitidos para la snake? Hagamos que se respeten.

Límites del contexto
13:31

¿Qué debe suceder cuando el jugador pierda? ¿Una serpiente real se alimentará de él?

Game over
13:36

Cuando se genera el alimento, éste debe ubicarse en una posición disponible. Es decir, no debe generarse sobre una posición ya ocupada por la snake.

Validar posición aleatoria del alimento
10:08

Hay una diferencia importante entre la última dirección aplicada sobre la snake y la última dirección solicitada por el jugador.

Última dirección aplicada
11:04
+ POO y más características en ES6
6 lectures 01:05:33

Veamos cómo asignar valores por defecto a los parámetros de una función. Revisemos cómo se hacía antes, y cómo es posible ahora con ES6.

Parámetros por defecto
08:35

¿Qué son y qué relación existe entre estos conceptos?

Generadores e Iteradores
18:02

En esta lección aclaramos los conceptos básicos de la POO. Indispensable para quienes no conocen estos conceptos.

Programación Orientada a Objetos (POO)
04:06

Veamos cómo se definen las clases en Javascript. Y cómo podemos crear objetos a partir de ellas.

Clases
07:31

Los humanos pueden dejar herencia anticipando su muerte. ¿Qué hay de las clases?

Herencia entre clases
12:56

¿Has escuchado hablar de los campos calculados?

Getters y setters
14:23
+ Módulos en JS y su implementación en ES6
9 lectures 01:49:01

Veamos una breve introducción a lo que son los módulos y su importancia en el desarrollo de software.

¿Qué son los módulos? ¿Por qué usarlos?
04:55

¿Cómo funcionan los módulos en Javascript? ¿Y cómo han funcionado todo este tiempo? ¿Qué son CommonJS y AMD?

Módulos en Javascript
07:59

¿Cómo podemos empezar a usar módulos basados en el nuevo estándar?

Módulos en ES6
19:05

Veamos qué alternativas tenemos al momento de realizar exportaciones e importaciones.

Import y Export
19:35

¿Cómo podemos usar módulos sin preocuparnos porque no funcionen?

De ES6 a ES5 por compatibilidad
06:41

Veamos cómo hacer uso de Webpack y Babel para que nuestro código JS moderno sea compatible incluso con los navegadores más antiguos.

Webpack y Babel
26:59

¿Por qué la carpeta node_modules de pronto contiene tantas carpetas? ¿Qué archivos y carpetas son indisponibles al compartir un proyecto?

Repaso acerca de node_modules y npm
08:22

Veamos cómo podemos remover un paquete de nuestro proyecto, a fin de reemplazarlo por otro.

Eliminando dependencias con npm uninstall
04:10

¿Tenemos que estar continuamente ejecutando "npm run build" para que webpack compile nuestros assets? Ello no es necesario cuando usamos Live Reloading. Así mismo, vemos qué son los Source Maps.

Webpack Dev Server y Live Reloading
11:15

Evalúa tu conocimiento acerca de los módulos, en JS y en general.

Evaluación acerca de módulos
15 questions
Requirements
  • Sólo necesitas muchas ganas de aprender :)
Description

El ecosistema de Javascript es inmenso. Tiene tanto que es hermoso pero terrorífico para quienes empiezan.

Muchas veces, amigos que van a iniciar su camino en el desarrollo web me preguntan: 

¿Qué debería aprender primero? ¿JQuery, Ajax, Vue, React, Angular, Webpack o Node.js?

Entonces mi respuesta es, primero deberías aprender Javascript.

Aprender a usar un framework está muy bien, aprender el uso de herramientas para automatizar tu trabajo también está genial.

Pero antes de ello, debes aprender a usar Javascript. ¡No tienes que memorizar todo, simplemente entender la idea general!

Empieza a usar Javascript. Usa Javascript sin ayuda de bibliotecas. Siéntete cómodo con el lenguaje y explora lo que ofrece.

Este curso trata sobre ello. Es un curso principalmente práctico.

El curso incluye explicaciones teóricas, pero sólo las necesarias para pasar a la práctica. ¿Por qué?

Mi intención es incentivar que practiques Javascript, llamar tu atención mediante ejemplos, y empezar a practicar sin tantos rodeos.

Si estás aprendiendo a programar, o quieres iniciar en el desarrollo web, es obligatorio que aprendas Javascript, ya que sin importar en qué te especialices, usarás Javascript sí o sí.

Inscríbete en el curso y empieza ya tu relación de amor y afecto con Javascript :)

Who this course is for:
  • Personas interesadas en aprender a programar con Javascript
  • Personas que quieren aprender Javascript de forma práctica