Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
Lo que aprenderás con este curso
- 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
Este curso está dedicado a
Personas interesadas en aprender a programar con Javascript
Personas que quieren aprender Javascript de forma práctica
Requisitos
Sólo necesitas muchas ganas de aprender :)
Contenido del curso
1 Presentación del curso y recomendaciones 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.
+1 recurso asociado a esta clase
2 ¿Qué herramientas vamos a necesitar? 03:47
¿Nunca has programado? No te preocupes, veamos qué necesitas para empezar. No es nada del otro mundo.
3 Emmet en Sublime Text 3 04:11
Ya que tenemos Sublime Text instalado, instalemos rápidamente este plugin antes de continuar.
4 ¿Cuál es la diferencia exacta entre HTML, CSS y JS? 09:06
Un primer ejemplo para explicar las diferencias.
5 Consola de desarrollo de Chrome 03:53
En esta clase vamos a ver qué es la Chrome Developer Tools y de forma específica, como usar la consola.
6 Variables, valores y operadores 05:01
Un primer acercamiento al código. Veamos cómo se estructura el código fuente.
7 Tipos de datos y comentarios 09:36
¿Qué tipos de datos existen en Javascript?
8 Javascript es un lenguaje débilmente tipado 01:49
¿Qué diferencia existe entre un lenguaje débilmente tipado y un lenguaje fuertemente tipado?
9 Conversión entre tipos de datos 09:39
¿Cómo se convierte una variable de un tipo de dato a otro tipo de dato?
10 Constantes 05:17
Una variable cuyo valor no cambia no es una variable, es una constante.
11 Condicionales 08:36
Si se cumple esto, entonces hacer esto, sino, hacer esto otro.
12 Bucles 14:21
Quiero ejecutar estas sentencias muchas veces.
13 Funciones 13:26
Hay una funcionalidad que espero usar muchas veces en mi programa. Crearé una función para ello.
14 Ámbitos (Scopes) 09:05
Una variable está disponible aquí, pero no en esta otra sección de mi programa.
15 Primeros pasos 09:59
Primeras consideraciones a tener en cuenta. Diseño base y recursos necesarios.
+2 recursos asociados a esta clase
16 Una tecla 13:56
Vamos a dotar de funcionalidad a una primera tecla. ¿Cómo suena la nota DO?
17 Varias teclas 12:56
Veamos cómo seleccionar todos los botones de una sola pasada, y a registrar un listener para el evento "click" de todos ellos.
18 Repaso y refactorización 14:05
Hacemos un repaso del código que ya tenemos, y modificamos el código para usar características nuevas de ES6 (última versión de JS hasta la fecha).
19 Pulsaciones del teclado 11:07
Veamos cómo detectar cuando una tecla es presionada, y cómo disparar un evento de click.
20 7 tipos de datos disponibles 08:53
Según el último estándar de ECMAScript, Javascript presenta 7 tipos de datos. ¿Cuáles son?
21 Objetos 08:48
¿Qué es un objeto? ¿De qué se compone? ¿Qué diferencias tiene un objeto en JS con relación a otros lenguajes?
22 Arreglos 08:57
Los arreglos son objetos. ¿Qué significa esto? ¿En qué se diferencian?
23 Funciones 11:08
Una función se puede declarar de múltiples formas. ¿Cuándo una función es considerada método?
24 Métodos y propiedades predefinidos 17:35
En esta lección analizamos métodos y propiedades que están disponibles sobre los objetos nativos de Javascript.
25 Esquema general 14:38
¿En qué consiste el juego que vamos a implementar? En esta lección planificamos y definimos la estructura base.
+1 recurso asociado a esta clase
26 Añadiendo estilos CSS básicos 06:20
En esta lección añadimos algunos estilos sobre la estructura HTML que hemos definido previamente.
27 Diseño base y referencias 08:05
Terminamos de definir el diseño base y empezamos a obtener referencias de los elementos de nuestra app.
+1 recurso asociado a esta clase
28 Elección del jugador y de la computadora 16:46
Vamos a determinar la elección del jugador, y a generar una elección aleatoria para la computadora.
29 ¡Y el ganador es! 10:57
En esta lección nuestra aplicación determinará quién es el ganador, según las opciones escogidas por el jugador y la computadora.
30 Mostrando resultados finales 19:36
En esta lección actualizamos los elementos visuales de nuestro HTML vía Javascript.
31 Diferencias entre var, let y const 23:40
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.
32 Template literals 07:41
Veamos qué ventajas nos aporta el uso de los Template literals, o Literales de plantilla.
33 Tagged template literals 09:02
¿Cuál es la diferencia entre un tagged template literal y un template literal?
34 Operador rest 18:03
Veamos cómo el operador rest nos permite trabajar con una cantidad indefinida de parámetros.
35 Operador spread 09:11
Los 3 puntos no se usan únicamente para agrupar parámetros en 1 arreglo, también para separar 1 arreglo en varios argumentos.
36 Desestructuración (destructuring) 17:45
¿En qué consiste la asignación por destructuring o desestructuración? Veamos varios ejemplos para entender el beneficio de esta nueva sintaxis disponible.
37 El elemento Canvas de HTML5 09:17
¿Qué es el elemento Canvas de HTML5? ¿Y qué nos permite hacer?
38 Detectar pulsaciones del teclado (Flechas) 05:01
¿Qué ventaja presenta el evento keydown sobre keypress para nuestro juego?
39 Cómo generar movimiento 08:43
Veamos cómo desplazar un objeto.
40 ¿Qué es el Main loop o Game loop? 10:24
Definamos ahora, la función principal de nuestro juego.
41 Generar alimento para la snake 14:43
Veamos cómo generar una posición aleatoria válida, en base a los valores admitidos como coordenadas X e Y.
42 Colores y cómo consumir el alimento 11:00
Llegó el momento de pintar los objetos con colores específicos, y de permitir a la snake consumir el alimento.
43 Aumentar el tamaño de la snake 30:56
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.
44 Detección de colisiones 09:57
Ahora vamos a detectar cuándo la serpiente colisiona consigo misma, para hacer que el jugador pierda.
45 Evitar dirección contraria 09:03
Veamos cómo evitar que el movimiento siguiente de la serpiente sea sobre el mismo eje, a fin de no confundir al jugador.
46 Límites del contexto 13:31
¿Cuáles son los límites permitidos para la snake? Hagamos que se respeten.
47 Game over 13:36
¿Qué debe suceder cuando el jugador pierda? ¿Una serpiente real se alimentará de él?
48 Validar posición aleatoria del alimento 10:08
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.
49 Última dirección aplicada 11:04
Hay una diferencia importante entre la última dirección aplicada sobre la snake y la última dirección solicitada por el jugador.
50 Parámetros por defecto 08:35
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.
51 Generadores e Iteradores 18:02
¿Qué son y qué relación existe entre estos conceptos?
52 Programación Orientada a Objetos (POO) 04:06
En esta lección aclaramos los conceptos básicos de la POO. Indispensable para quienes no conocen estos conceptos.
53 Clases 07:31
Veamos cómo se definen las clases en Javascript. Y cómo podemos crear objetos a partir de ellas.
54 Herencia entre clases 12:56
Los humanos pueden dejar herencia anticipando su muerte. ¿Qué hay de las clases?
55 Getters y setters 14:23
¿Has escuchado hablar de los campos calculados?
56 ¿Qué son los módulos? ¿Por qué usarlos? 04:55
Veamos una breve introducción a lo que son los módulos y su importancia en el desarrollo de software.
57 Módulos en Javascript 07:59
¿Cómo funcionan los módulos en Javascript? ¿Y cómo han funcionado todo este tiempo? ¿Qué son CommonJS y AMD?
+1 recurso asociado a esta clase
58 Módulos en ES6 19:05
¿Cómo podemos empezar a usar módulos basados en el nuevo estándar?
+2 recursos asociados a esta clase
59 Import y Export 19:35
Veamos qué alternativas tenemos al momento de realizar exportaciones e importaciones.
60 De ES6 a ES5 por compatibilidad 06:41
¿Cómo podemos usar módulos sin preocuparnos porque no funcionen?
61 Webpack y Babel 26:59
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.
62 Repaso acerca de node_modules y npm 08:22
¿Por qué la carpeta node_modules de pronto contiene tantas carpetas? ¿Qué archivos y carpetas son indispensables al compartir un proyecto?
63 Eliminando dependencias con npm uninstall 04:10
Veamos cómo podemos remover un paquete de nuestro proyecto, a fin de reemplazarlo por otro.
64 Webpack Dev Server y Live Reloading 11:15
¿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.
65 Aplicando: Webpack, Babel, Preset, Serve 10:20
Empecemos configurando nuestro proyecto, mientras repasamos conceptos que acabamos de aprender.
66 Square: Primer módulo y clase 20:29
En esta lección vamos a empezar a organizar el código base que tenemos, en módulos y clases.
67 Snake: Reemplazar funciones por métodos 22:38
En esta lección definimos una clase Snake, y empezamos a añadir más abstracción a nuestro algoritmo del juego.
68 Clase Game y fin de la refactorización 32:58
En esta lección terminamos de escribir nuestro juego de la snake en su versión orientada a objetos, haciendo uso de módulos.
69 JS no es JQuery. ¿Es malo aprender JQuery? 04:49
Veamos qué es JQuery y por qué muchas veces se confunde JQuery con Javascript.
70 Biblioteca VS Módulo VS Paquete 05:29
Veamos cuál es la diferencia entre estos 3 conceptos que generalmente están relacionados. Y recordamos también qué es NPM.
71 Ajax: ¿Qué es? ¿Requiere JQuery? Ejemplo. 20:30
Veamos que la tecnología Ajax no es dependiente del uso de JQuery. Existen más alternativas. Veamos un ejemplo usando Axios.
+1 recurso asociado a esta clase
72 Qué sigue, y palabras finales 13:42
Veamos qué otras tecnologías podemos aprender, y qué otras áreas de desarrollo existen, además de lo aprendido en el curso.
+9 recursos asociados a esta clase
73 Proyecto disponible en Github 03:55
El proyecto está disponible en Github. Consideraciones que debes tener en cuenta.
+1 recurso asociado a esta clase
74 Introducción a las Promesas en JS 20:07
¿Qué son las promesas y por qué son importantes? ¿Cómo se trabajaba antes de su existencia?
+1 recurso asociado a esta clase
75 Cómo crear una Promesa 19:46
Veamos cómo crear nuestra propia Promesa (envolviendo una acción asíncrona), y usémosla.
+1 recurso asociado a esta clase
76 Async y Await 04:18
Veamos qué son y cómo usar estas 2 palabras reservadas, que están muy relacionadas al uso de promesas.
77 Fetch API 18:47
Veamos cómo hacer uso de Fetch para hacer consultas HTTP. También convertimos un ejemplo previo que hicimos usando Axios, y usamos Fetch como reemplazo (sin requerir bibliotecas).
Preguntas frecuentes
Con una membresía premium obtienes acceso a todos los cursos de la plataforma, incluyendo este.
Como usuario premium tendrás acceso a la sección de preguntas y respuestas de la plataforma.
En nuestro foro privado, el 100% de las preguntas reciben respuesta 🙂.
Los pagos se pueden realizar vía PayPal o con tarjeta (crédito o débito).
Escríbenos a [email protected] si deseas coordinar otro medio de pago.
Esta serie consta de 77 capítulos.
Nivel de dificultad: Aprendiz.
Inicia sesión para empezar el curso y llevar un control de tu progreso.