Javascript: El curso práctico y completo

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

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

Un primer ejemplo para explicar las diferencias.

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

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

¿Qué tipos de datos existen en Javascript?

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

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

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

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

Quiero ejecutar estas sentencias muchas veces.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

Veamos cómo desplazar un objeto.

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

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

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

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.

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

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

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

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

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.

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

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.

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

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

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

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

¿Has escuchado hablar de los campos calculados?

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

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

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

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

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

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.

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

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

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