A Smarter Way to Learn JavaScript. The new tech-assisted approach that requires half the effort

1. Fundamentos de JavaScript: Variables, tipos de datos y operadores

JavaScript es literal.

Variables y tipos de datos. JavaScript utiliza variables para almacenar y manipular datos. Declara variables con var, let o const. Los tipos de datos básicos incluyen números, cadenas, booleanos, null y undefined. JavaScript es de tipado dinámico, permitiendo que las variables cambien de tipo.

Operadores y expresiones. Usa operadores aritméticos (+, -, *, /, %) para operaciones matemáticas. Los operadores de comparación (==, ===, !=, !==, <, >, <=, >=) comparan valores. Los operadores lógicos (&&, ||, !) combinan o niegan expresiones booleanas. El operador de asignación (=) asigna valores a variables.

• Concatenación de cadenas: Usa + para unir cadenas
• Coerción de tipos: JavaScript convierte automáticamente tipos en algunas operaciones
• Precedencia de operadores: Usa paréntesis para controlar el orden de las operaciones

2. Estructuras de control: Sentencias condicionales y bucles

JavaScript tiene una peculiaridad incómoda: Después de encontrar un caso verdadero, JavaScript no solo ejecuta la(s) sentencia(s) inmediatamente debajo de ese caso. Ejecuta todas las sentencias para todos los casos debajo de él.

Sentencias condicionales. Usa if, else if y else para ejecutar código basado en condiciones. La sentencia switch ofrece una alternativa para múltiples condiciones, pero recuerda usar break para evitar el comportamiento de caída.

Bucles para tareas repetitivas. Los bucles for son ideales para conteos de iteración conocidos. Los bucles while continúan hasta que una condición es falsa. Los bucles do...while aseguran al menos una ejecución. Usa break para salir de los bucles temprano y continue para omitir iteraciones.

• Estructura de la sentencia if: if (condición) { // código }
• Estructura de la sentencia switch: switch(expresión) { case valor: // código; break; }
• Estructura del bucle for: for (inicialización; condición; actualización) { // código }
• Estructura del bucle while: while (condición) { // código }

3. Funciones: Definición, llamada y comprensión del alcance

Una función es un bloque de JavaScript que hace lo mismo repetidamente, cada vez que invocas su nombre.

Conceptos básicos de funciones. Define funciones usando la palabra clave function, seguida de un nombre, parámetros entre paréntesis y un bloque de código entre llaves. Llama a las funciones por nombre con argumentos. Usa return para enviar valores de vuelta al llamador.

Alcance y cierre. Las variables declaradas dentro de funciones son locales a esa función. Las variables globales son accesibles en todas partes. El cierre permite que las funciones internas accedan a las variables de la función externa, creando patrones poderosos para la privacidad de datos y el diseño de módulos.

• Declaración de funciones: function nombre(parámetros) { // código }
• Expresión de funciones: var nombre = function(parámetros) { // código }
• Funciones flecha (ES6+): (parámetros) => { // código }
• Parámetros vs. argumentos: Los parámetros están en la definición de la función, los argumentos son valores pasados al llamar

4. Arreglos y objetos: Trabajando con estructuras de datos complejas

Una variable puede tener cualquier número de valores, pero solo uno a la vez.

Arreglos para colecciones ordenadas. Crea arreglos con corchetes. Accede a elementos por índice (basado en cero). Usa métodos como push(), pop(), shift(), unshift() y splice() para modificar arreglos. Itera con bucles for o forEach().

Objetos para pares clave-valor. Define objetos con llaves. Accede a propiedades con notación de punto o corchetes. Usa métodos de objeto para manipular datos. Crea constructores de objetos para plantillas reutilizables. Entiende los prototipos para la herencia.

• Métodos de arreglos: length, indexOf(), slice(), map(), filter(), reduce()
• Creación de objetos: Notación literal, funciones constructoras, clases ES6
• Prototipo de objeto: Propiedades y métodos compartidos para eficiencia
• JSON: Notación de Objetos de JavaScript para intercambio de datos

5. Manipulación del DOM: Interactuando con elementos HTML

El DOM es un organigrama, creado automáticamente por el navegador cuando tu página web se carga, para toda la página web.

Accediendo a elementos. Usa métodos como getElementById(), getElementsByClassName(), getElementsByTagName(), y querySelector() para seleccionar elementos. Recorre el árbol DOM con propiedades como parentNode, childNodes, y siblings.

Modificando elementos. Cambia contenido con innerHTML o textContent. Modifica atributos con setAttribute(). Ajusta estilos con la propiedad style. Crea nuevos elementos con createElement() y agrégalos al documento con appendChild() o insertBefore().

• Tipos de nodos DOM: Nodos de elemento, nodos de texto, nodos de atributo
• Modificando clases: classList.add(), classList.remove(), classList.toggle()
• Escuchadores de eventos: addEventListener() para interacciones dinámicas
• Rendimiento: Usa fragmentos de documento para actualizaciones masivas del DOM

6. Manejo de eventos: Respondiendo a acciones del usuario

Un buen sitio web es un sitio web interactivo.

Tipos de eventos. Los eventos comunes incluyen click, mouseover, keydown, submit, load, y resize. Entiende las fases de burbujeo y captura de eventos para un manejo adecuado.

Agregando escuchadores de eventos. Usa addEventListener() para adjuntar manejadores de eventos a elementos. Elimina escuchadores con removeEventListener() cuando ya no sean necesarios. Maneja comportamientos predeterminados con preventDefault() y detén la propagación de eventos con stopPropagation().

• Objeto de evento: Contiene información sobre el evento (por ejemplo, elemento objetivo, posición del ratón)
• Delegación de eventos: Adjunta escuchadores a elementos padre para eficiencia
• Eventos personalizados: Crea y despacha tus propios eventos para interacciones complejas
• Debounce y throttle: Optimiza el rendimiento para eventos frecuentes (por ejemplo, scroll, resize)

7. Control del navegador: Gestión de ventanas y navegación

El código JavaScript no se preocupa por dónde vive.

Manipulación de ventanas. Abre nuevas ventanas o pestañas con window.open(). Controla el tamaño y la posición de la ventana con opciones. Cierra ventanas programáticamente con window.close(). Entiende las limitaciones de la política de mismo origen.

Navegación e historial. Redirige a los usuarios con window.location.href. Manipula el historial del navegador usando history.pushState() y history.replaceState(). Maneja eventos de navegación con el escuchador de eventos popstate.

• Almacenamiento del navegador: localStorage y sessionStorage para persistencia de datos del lado del cliente
• Cookies: Establece y lee cookies para almacenamiento de datos pequeños y seguimiento
• AJAX y Fetch API: Realiza solicitudes asincrónicas a servidores sin recargar la página
• Compartición de recursos de origen cruzado (CORS): Entiende las implicaciones de seguridad y la implementación adecuada

8. Mejores prácticas: Organización del código y eficiencia

Comentar, como sabes por tu trabajo con HTML y CSS, es una forma de decirle al navegador que ignore ciertas porciones de texto que incluyes dentro del cuerpo del código.

Estructura del código. Organiza el código en módulos o componentes lógicos. Usa convenciones de nomenclatura consistentes (por ejemplo, camelCase para variables y funciones). Mantén las funciones pequeñas y enfocadas en tareas únicas.

Optimización del rendimiento. Minimiza la manipulación del DOM. Usa delegación de eventos para múltiples elementos similares. Evita variables globales. Aprovecha el almacenamiento en caché del navegador y la minificación para una carga más rápida. Implementa carga diferida para imágenes y contenido pesado.

• ESLint y Prettier: Usa herramientas para un estilo de código consistente y detección de errores
• Control de versiones: Usa Git para rastrear cambios y colaborar
• Pruebas: Implementa pruebas unitarias y de integración para confiabilidad
• Documentación: Escribe comentarios claros y mantén la documentación de tu código actualizada

Última actualización: August 21, 2024