Mi curso gigante de JavaScript Basics ahora está en vivo en YouTube. Y es 100% gratis.

Mi curso básico de JavaScript ahora está disponible en el canal de YouTube freeCodeCamp.

Lo mejor de este curso es que también se alinea con los desafíos básicos de JavaScript en el plan de estudios freeCodeCamp. Puedes practicar lo que estás aprendiendo a través de los videos usando los desafíos freeCodeCamp. (El curso incluso enseña algunos conceptos que aún no están cubiertos en el plan de estudios freeCodeCamp).

Estos videos están diseñados para brindarle rápidamente información clave sobre cada tema. Además, los diseñé para que fueran lo más modulares posible. Funcionan bien como videos independientes, si solo quieres aprender sobre un solo tema.

Además del curso de conceptos básicos de JavaScript, también he desarrollado listas de reproducción para ES6, código limpio, estructuras de datos, patrones de diseño y jQuery. A continuación encontrará enlaces y descripciones de los videos para ayudarlo a encontrar rápidamente exactamente lo que desea aprender.

** Actualización ** ¡Mi nuevo video curso sobre Algoritmos ya está en vivo! Echa un vistazo a Algorithms in Motion de Manning Publications. ¡Obtén un 39% de descuento en mi curso usando el código "39carnes"!

Conceptos básicos de JavaScript (curso completo)

Ver lista de reproducción completa aquí.

  1. Variables: las variables son contenedores para almacenar valores de datos. Este video también cubre convenciones de nomenclatura.
  2. Tipos de datos: los siete tipos de datos en JavaScript son booleanos, nulos, indefinidos, número, cadena, símbolo y objeto.
  3. Números: trabajar con números que incluyen sumar, restar, multiplicar, dividir, módulo, incremento, decremento y asignación compuesta.
  4. Conceptos básicos de las cadenas: las cadenas son un grupo de caracteres.
  5. Cadenas: [notación de corchetes]: la notación de corchetes le permite acceder a un carácter específico en una cadena.
  6. 20 métodos de cadena en 7 minutos: los métodos de cadena que aparecen en este video: charAt, charCodeAt, concat, endsWith, fromCharCode, incluye, indexOf, lastIndexOf, match, repeat, replace, search, slice, split, beginWith, substr, substring, toLowerCase, toUpperCase, recortar.
  7. Funciones: las funciones son uno de los componentes fundamentales de JavaScript. Este video cubre definiciones de funciones, nombres, argumentos, parámetros, alcance y funciones de anidación.
  8. Levantamiento: el levantamiento es cuando las declaraciones de variables y funciones se procesan antes de ejecutar cualquier código.
  9. Operadores de comparación y If Else: operadores de comparación como>, <, => y = <. Además, use las instrucciones if / else para ejecutar un bloque de código si una condición específica es verdadera.
  10. == vs === - Diferencias entre igualdad abstracta y estricta.
  11. Nulo vs Indefinido: diferencias entre nulo e indefinido.
  12. Operadores lógicos && TRUCOS con evaluación de cortocircuito. Los operadores lógicos son "y" (&&) y "o" (||). Estos también le permiten hacer algunos trucos utilizando la evaluación de cortocircuito.
  13. Operador ternario: el operador ternario, u operador condicional, toma tres argumentos y es básicamente una forma abreviada de escribir una declaración if-else.
  14. Declaraciones de cambio: controle el flujo de su programa con declaraciones de cambio.
  15. Matrices: las matrices son formas de almacenar más de un valor en una sola variable. Este video también cubre matrices anidadas y el método forEach.
  16. Métodos de matriz comunes: aprenda a utilizar 10 métodos de matriz diferentes: push, pop, concat, join, reverse, shift, unshift, sort, slice y splice.
  17. Copias de matrices (profundas y poco profundas): matrices de copia poco profundas que utilizan el sector de división y el operador de propagación. Copias profundas de matrices usando JSON.stringify.
  18. Números aleatorios y parseInt - ¡Crea números aleatorios! Además, use parseInt para convertir cadenas a enteros.
  19. For Loops: los bucles For son una de las formas más comunes de repetir cosas en JavaScript.
  20. While / Do While - While y do ... while son formas de recorrer el código en JavaScript.
  21. For in / For of: los bucles For ... in y for ... of le permiten recorrer los nombres y valores de propiedades en JavaScript.
  22. Iteración de matriz: 8 métodos: ¡aprenda ocho métodos para iterar a través de una matriz en JavaScript! Los métodos incluyen: forEach, map, filter, reduce, sum, every, find, findIndex.
  23. Objetos: los objetos son entidades independientes con propiedades y tipos.
  24. Objetos, parte 2: aprenda más sobre los objetos. Este video cubre el uso de objetos para búsquedas, la eliminación de propiedades mediante la eliminación, la prueba de propiedades, el acceso y la modificación de objetos anidados y la creación de una matriz de todas las claves de objeto.
  25. AJAX: AJAX in le permite actualizar partes de una página web sin volver a cargar toda la página.
  26. JSON: JSON significa JavaScript Object Notation. Es una sintaxis para almacenar e intercambiar datos.
  27. this: la palabra clave "this" se refiere al objeto que "posee" el código JavaScript.
  28. Cierres: un cierre es la combinación de una función y el entorno donde se declara la función.
  29. Promesas: una promesa representa el resultado final de una operación asincrónica.
  30. Notificaciones de escritorio: la API de notificaciones permite que una página web o aplicación envíe notificaciones que se muestran fuera de la página a nivel del sistema. Esto permite que las aplicaciones web envíen información a un usuario incluso si la aplicación está inactiva o en segundo plano.
  31. Expresión de función invocada inmediatamente: una expresión de función invocada inmediatamente (IIFE) es una función de JavaScript que se ejecuta tan pronto como se define.
  32. Modo estricto: "uso estricto": el modo estricto en JavaScript endurece las reglas para ciertos comportamientos. Puede ejecutar código JavaScript en modo estricto utilizando la directiva "use estricto".
  33. Verificar si una propiedad está en un objeto - ¿Cómo verificar si una propiedad está en un objeto en JavaScript? Aprende tres formas en este video. Dos de las formas son "in" y "hasOwnProperty".
  34. setInterval y setTimeout: eventos de tiempo: setTimeout y setInterval son eventos de tiempo en JavaScript que permiten la ejecución de código a intervalos de tiempo específicos. Este tutorial rápido muestra cómo usarlos.
  35. intentar, atrapar, finalmente, lanzar - manejo de errores en JavaScript - El manejo de errores en JavaScript utiliza las palabras clave: probar, atrapar, finalmente y lanzar.
  36. Fechas: trabaje con fechas en JavaScript.

ES6

Ver lista de reproducción completa aquí.

  1. Var vs Const vs Let —Tres formas diferentes de declarar variables.
  2. Clases: aprenda sobre expresiones de clase, declaraciones de clase y herencia / extensión.
  3. Símbolos: los símbolos son un tipo de datos inmutable único.
  4. Literales de plantilla: los literales de plantilla son literales de cadena que permiten expresiones incrustadas. Estos están rodeados de backticks ''.
  5. Proxies: los proxies se utilizan para dar a los objetos un comportamiento personalizado. Un uso es para la validación de datos.
  6. ... operador de propagación y operador de reposo: el operador de propagación (...) extiende los elementos de una matriz (u objeto iterable). El operador de descanso condensa elementos.
  7. Funciones de flecha: una función de flecha en ES6 tiene una sintaxis más corta que una función normal y no se vincula a esta.
  8. Desestructuración: la asignación de desestructuración es una sintaxis especial para asignar de manera ordenada valores tomados directamente de objetos y matrices a variables.
  9. Mapa: los mapas son estructuras de datos que almacenan pares clave-valor. Vea cómo funcionan y aprenda sobre el objeto de mapa ES6.
  10. importación / exportación (módulos): las declaraciones de importación y exportación le permiten dividir su código en diferentes archivos o módulos.

DOM (Modelo de objeto de documento)

Ver lista de reproducción completa aquí.

  1. Selección y cambio de elementos del sitio web: JavaScript le permite seleccionar elementos del DOM de un sitio web y luego realizar cambios en esos elementos.
  2. Estilos CSS en JavaScript (configuración y obtención): cómo configurar las propiedades y estilos CSS en JavaScript. También cómo obtener CSS.
  3. Eventos DOM: los eventos DOM de HTML permiten que JavaScript registre diferentes controladores de eventos en elementos de un documento HTML.
  4. addEventListener (): el método addEventListener () adjunta un controlador de eventos al elemento especificado sin sobrescribir los controladores de eventos existentes para que pueda agregar muchos controladores de eventos a un elemento. Puede usar removeEventListener () para eliminar un evento.
  5. Nodos DOM: este video cubre createElement, appendChild, insertBefore, replaceChild y removeChild.
  6. Animación en el DOM - Anime elementos DOM usando JavaScript sin ningún marco. Primero aprenderá cómo crear una animación mediante la programación de cambios graduales en el estilo de un elemento. Luego, aprenda sobre el método Element.animate () que forma parte de la nueva API de animaciones web.
  7. requestAnimationFrame (): el método window.requestAnimationFrame () le dice al navegador que desea realizar una animación y le solicita que llame a una función específica para actualizar una animación antes de la próxima pintura.
  8. Objeto de ventana: mover, abrir, cerrar y tamaño: el objeto de ventana representa la ventana del navegador. Tiene muchas propiedades y métodos. Este video muestra cómo usar JavaScript para obtener el tamaño de una ventana, abrir una nueva ventana, cerrar una ventana y mover una ventana.
  9. Tutorial de ventanas emergentes: JavaScript tiene tres tipos de cuadros emergentes: cuadro de alerta, cuadro de confirmación y cuadro de aviso.
  10. cookies vs localStorage vs sessionStorage - ¿Cuál es la diferencia entre cookies, almacenamiento local y almacenamiento de sesión? Todas son formas de almacenar datos en el navegador de un usuario, pero cada una tiene diferentes usos.
  11. Tutorial de historial del navegador: manipule y navegue por el historial del navegador utilizando JavaScript y el objeto window.history. Este video cubre history.length, history.back (), history.forward (), history.go (), history.replaceState () e history.pushState ().

jQuery

Ver lista de reproducción completa aquí.

  1. Introducción a jQuery: jQuery es una biblioteca JavaScript muy popular y ligera. jQuery simplifica muchas de las cosas complicadas de JavaScript, como las llamadas AJAX y la manipulación DOM. Aprenda la sintaxis básica en este video.
  2. Eventos jQuery: en jQuery, la mayoría de los eventos DOM tienen un método jQuery equivalente. Aprenda sobre los eventos de jQuery en este video.
  3. Efectos jQuery: jQuery facilita la adición de efectos simples a su página web. Este video cubre show, hide, slideUp, slideDown, fadeOut, fadeIn, toggle, stop y delay.

Código limpio

Estos videos tratan sobre cómo escribir código limpio en JavaScript y están basados ​​en un artículo de Ryan McDermott que está basado en un libro de Robert C. Martin. El código limpio es un código que es legible, reutilizable y refactorizable.

Ver lista de reproducción completa aquí.

  1. Variables
  2. Funciones (Parte 1)
  3. Funciones (Parte 2)
  4. Objetos
  5. Clases
  6. SÓLIDO
  7. Pruebas, concurrencia y manejo de errores
  8. Formato y comentarios

Estructuras de datos y algoritmos

Ver lista de reproducción completa aquí.

  1. Pilas: las pilas son una estructura de datos de último en entrar, primero en salir.
  2. Conjuntos: los conjuntos son como matrices pero sin elementos duplicados.
  3. Colas y colas prioritarias: las colas son una estructura de datos de primero en entrar, primero en salir.
  4. Árbol de búsqueda binaria: un árbol de búsqueda binaria es una estructura de datos de árbol con solo dos ramas para cada nodo.
  5. Árbol de búsqueda binaria: transversal y altura: encuentre la altura de un árbol de búsqueda binaria. Además, utilice la búsqueda de profundidad primero y de amplitud a través del orden, el orden previo, el orden posterior y el recorrido de nivel.
  6. Mapa: los mapas son estructuras de datos que almacenan pares clave-valor. Vea cómo funcionan y aprenda sobre el objeto de mapa ES6.
  7. Tablas hash: las tablas hash son una forma rápida de implementar matrices asociativas o asignaciones de pares clave-valor. Encuentra más y aprende a crear uno en JavaScript.
  8. Lista vinculada: una lista vinculada es una estructura de datos común donde los elementos se almacenan en un nodo. Obtenga información sobre las listas vinculadas y cómo implementarlas en JavaScript.
  9. Estructura de datos trie: la estructura de datos trie (a veces denominada árbol de prefijos) es un tipo especial de árbol que se utiliza para almacenar estructuras de datos asociativas. Obtenga más información sobre los intentos y cómo implementarlos en JavaScript.
  10. Estructura de datos de almacenamiento dinámico (máximo y mínimo): un almacenamiento dinámico binario es un árbol binario parcialmente ordenado que satisface la propiedad del almacenamiento dinámico. ¿Cuál es la propiedad del montón? ¡Mira el video para descubrirlo! También vea cómo implementar un montón mínimo en JavaScript.
  11. Introducción a la estructura de datos de gráficos: los gráficos son colecciones de cosas y las relaciones o conexiones entre ellas. Los datos en un gráfico se llaman nodos o vértices. Las conexiones entre los nodos se llaman bordes.
  12. Gráficos: búsqueda de amplitud: los algoritmos de recorrido son algoritmos para atravesar o visitar nodos en un gráfico. En este video, mostraré cómo implementar un algoritmo transversal de búsqueda de primer orden en JavaScript. El algoritmo comienza en un nodo, primero visita a todos sus vecinos que están a un borde de distancia, luego continúa visitando a cada uno de sus vecinos. El punto es determinar qué tan cerca están los nodos de un nodo raíz.

Patrones de diseño

Ver lista de reproducción completa aquí.

  1. Singleton: el patrón de diseño de singleton limita el número de instancias de un objeto en particular a solo uno.
  2. Observador: con el patrón de diseño del observador, si un objeto se modifica, transmite a los objetos dependientes que se ha producido un cambio.
  3. Módulo: el patrón de diseño del módulo en JavaScript es uno de los patrones diseñados más utilizados para mantener piezas de código particulares independientes de otras partes.
  4. Patrón de diseño de mediador: el patrón de diseño de mediador es un patrón que proporciona una autoridad central a través de la cual los diferentes componentes de una aplicación pueden comunicarse. Vea un ejemplo de este patrón en JavaScript.

Reaccionar

  1. Conceptos básicos de React: React.js está diseñado para hacer que el proceso de creación de componentes de interfaz de usuario modulares y reutilizables sea simple e intuitivo. Este video presenta los componentes React, VirtualDOM, JSX, estado y accesorios. Vea cómo todas estas cosas se unen en una simple aplicación web de lista de compras.