Curso gratuito de JavaScript

El objetivo de este curso es poder aprender JavaScript de forma sencilla viendo un concepto teórico, luego algunos ejemplos resueltos y por último y lo más importante, efectuar una serie de ejemplos tu solo. Este curso es complementario al curso gratuito de HTML5 y el curso de CSS3

¿Qué es JavaScript?

JavaScript es un lenguaje interpretado, multiplataforma y orientado a objetos el cual se basa en el estándar ECMAScript.

Un lenguaje interpretado significa que las instrucciones las analiza y procesa el navegador en el momento que deben ser ejecutadas.

Dentro de este curso de JavaScript vamos a hacer ejemplos básicos del lenguaje, ejemplos que trabajan con el DOM de las páginas web o ejemplos que hagan uso de alguna librería como Modernizr, Raphael, jQuery, entre otras

Para empezar a probar el lenguaje JavaScript puedes abrir la Consola JavaScript de tu navegador y empezar a escribir código.

console.log("Mi Primer Código JavaScript del Curso de Programación Gratis");

Ejemplo

Vamos a crear un programa que muestre en una página web el mensaje “Hola Mundo estoy aprendiendo a programar en Estrada Web Group”.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>
<script>
  document.write(' Hola Mundo estoy aprendiendo a programar en Estrada Web Group ');
</script>
</body>
</html>

En el ejemplo anterior podemos ver que con document.write se escribe en el documento HTML y el código JavaScript debe ir encerrado en las etiquetas <script></script>.

JavaScript es sensible a mayúsculas y minúsculas, por lo que hay que tener cuidado como escribimos nuestro código, pero no te preocupes esto es solo el inicio y poco a poco te iras familiarizando con el tema.

Sección 1. Primeros pasos

¿Qué es JavaScript? – presentarle JavaScript y su historia.
Instalar un editor de código fuente JavaScript: aprende a instalar Visual Studio Code para editar código JavaScript.
Conoce la pestaña Consola de Herramientas de desarrollo web: te brinda una introducción básica a la ventana Consola en los navegadores web.
JavaScript Hello World: aprende a ejecutar el primer código JavaScript que muestra el famoso "¡Hello World!".

Sección 2. Fundamentos

Sintaxis: detalles de la sintaxis de JavaScript, incluidos espacios en blanco, declaraciones, identificadores, palabras clave, expresiones y comentarios.
Variables: muestra cómo declarar variables.
Tipos de datos: te presentamos los tipos de datos de JavaScript, incluidos los tipos primitivos y de referencia.
Número: aprenderás cómo JavaScript usa el tipo Número para representar los números enteros y de coma flotante.
Separador numérico: te muestra cómo hacer que los números sean más legibles usando guiones bajos como separadores numéricos.
Literales octales y binarios: brinda soporte para literales binarios y cambia la forma de representar los literales octales.
Booleano: te presentamos el tipo boolean.
String: aprenderás sobre el tipo primitivo de cadenas de texto (string) y algunas operaciones básicas de un string.
Objeto: te presenta el tipo de objeto.
Valores primitivos frente a valores de referencia: aprenderás dos tipos de valores en JavaScript, incluidos los valores primitivos y de referencia, y las diferencias entre ellos.
Array: te presenta el tipo Array y cómo manipular los elementos de la matriz.
Uso del Strict Mode: Explicar cómo el modo estricto ("use strict") cambia la manera en que JavaScript maneja algunos errores y restricciones, y por qué es una buena práctica usarlo.
Null y Undefined: Diferenciar entre estos dos valores, cuándo se usan y cómo JavaScript los maneja.
Símbolos: Introducir el tipo de dato Symbol y su utilidad para crear propiedades únicas de objetos.
BigInt: Explicar el tipo de dato BigInt para números más grandes que los que puede representar el tipo Number.
Template Literals: Mostrar cómo usar los literales de plantilla para la creación de strings, incluyendo la interpolación de variables y expresiones.
Conversión de Tipos (Type Coercion): Explicar cómo JavaScript convierte automáticamente tipos de datos en ciertos contextos y cómo puede afectar a las operaciones.
Scope (Ámbito): Describir el ámbito de las variables, incluyendo ámbito global, local, y de bloque.
Hoisting: Detallar cómo las declaraciones de variables y funciones son movidas al inicio de su contexto de ejecución.
Clausuras (Closures): Explicar qué son las clausuras y cómo permiten acceder al ámbito de una función exterior desde una función interior.
Funciones Inmediatamente Invocadas (IIFE): Describir cómo y por qué usar IIFEs para preservar el ámbito privado.
Manejo de errores con Try-Catch: Explicar cómo usar try-catch para manejar errores de ejecución.
El Event Loop y la Concurrency Model: Describir cómo JavaScript maneja operaciones asíncronas con su modelo de concurrencia y el event loop.
Operadores de Spread y Rest: Explicar cómo usar los operadores ... para propagar o agrupar elementos.
Destructuración: Mostrar cómo la destructuración facilita extraer elementos de arrays y propiedades de objetos
Comparaciones: Explicar en detalle la diferencia entre la comparación con doble igual (==) y triple igual (===).
Tipado Dinámico: Hablar sobre cómo el tipado dinámico en JavaScript afecta la asignación y manipulación de variables.
ECMAScript 6+ Features: Presentar características introducidas en ES6 y versiones posteriores, como las palabras clave let y const, y cómo han impactado en la escritura de código JavaScript.
Estructuras de Datos Avanzadas: Introducir estructuras como Map, Set, WeakMap, y WeakSet.
Funciones como Objetos de Primera Clase: Discutir cómo en JavaScript, las funciones son tratadas como objetos y qué implica esto en la práctica.
Patrones de Diseño Comunes: Introducir patrones de diseño simples como módulo, revelador, y singleton

Sección 3. Operadores

Operadores aritméticos: te presentamos los operadores aritméticos que incluyen suma (+), resta (-), multiplicación (*) y división (/).
Operador de resto o residuo: te muestra cómo usar el operador de resto (%) para obtener el resto cuando un valor se divide por otro valor.
Operadores de asignación: en este artículo te guían sobre cómo usar los operadores de asignación (=) para asignar un valor o una expresión a una variable.
Operadores unarios: aprende a usar operadores unarios.
Operadores de comparación: te muestra cómo usar operadores de comparación para comparar dos valores.
Operadores lógicos: aprende a usar los operadores lógicos: NOT (!), AND (&&) y OR (||).
Operadores de asignación lógica: te presentamos los operadores de asignación lógica, incluidos ||=, &&= y ??=
Operador coalescente nulo (??): acepta dos valores y devuelve el segundo valor si el primero es null o undefined.
Operador de exponenciación: te presentamos el operador de exponenciación (**) que calcula una base a la potencia del exponente, que es similar al método Math.pow().

Sección 4. Declaraciones de flujo de control

if: te muestra cómo usar la declaración if para ejecutar un bloque si una condición es verdadera.
if…else: aprende a ejecutar un bloque de código en función de una condición específica.
if…else…if – verifica múltiples condiciones y ejecuta un bloque.
Operadores ternarios: te muestran cómo hacer un atajo para la instrucción if (? :).
switch: te muestra cómo reemplazar múltiples sentencias if al comparar un valor con múltiples variantes usando la sentencia switch.
while: aprende cómo realizar un bucle de prueba previa que ejecuta repetidamente un bloque de código siempre que una condición específica sea verdadera.
do...while: muestra cómo realizar un ciclo posterior a la prueba que ejecuta un bloque de código repetidamente hasta que una condición específica es falsa.
bucle for: aprende a ejecutar repetidamente un bloque de código en función de varias opciones.
bucle for...in: aprende a iterar sobre las propiedades de un objeto utilizando el bucle for...in.
break: aprende a terminar prematuramente un bucle.
continue: te muestra cómo omitir la iteración actual de un ciclo y saltar a la siguiente.
Operador de coma: te guía sobre cómo usar el operador de coma en un bucle for para actualizar varias variables a la vez.

Sección 5. Funciones en JavaScript

Funciones: en este artículo te presentamos las funciones en JavaScript.
Funciones ciudadanos de primera clase: aprende cómo almacenar funciones en las variables, pasar funciones a otras funciones como argumentos y devolver funciones como valores.
Funciones anónimas: aprende sobre las funciones anónimas, que son las funciones sin nombre.
Pasar valores a una función: comprenderás cómo funciona pasar valores a una función en JavaScript.
Función recursiva: aprenderás a definir funciones recursivas.
Parámetros predeterminados: aquí te muestro cómo definir parámetros predeterminados para las funciones.

Sección 6. Objetos y Prototipos (Objects & Prototypes)

Introducción a los bjetos: en etse artículo aprenderás sobre los ojetos y conocerás los métodos de un objeto.
Funciones de constructor: aquí aprenderás cómo usar funciones de constructor para definir tipos personalizados en JavaScript.
Prototipo (protorype): aprenderás cómo funciona el protorype en JavaScript.
Patrón de constructor/prototipo: muestra cómo combinar la función de constructor y el patrón de prototipo para definir tipos personalizados.
Herencia prototípica: aprenderás la herencia prototípica en JavaScript.
¿Qué es this en JavaScript? Comprenda este valor y cómo funciona en JavaScript.
globalThis: proporciona una forma estándar de acceder al objeto global en todos los entornos.
Propiedades del objeto: sumérgete en las propiedades del objeto y sus atributos.
Propiedades enumerables: obtene más información sobre las propiedades enumerables.
Propiedades Propias – comprende las propiedades propias y heredadas.
Object.values(): devuelve los valores propios de la propiedad enumerable de un objeto como una matriz.
Object.entries(): devuelve los propios pares enumerables [clave, valor] de propiedad con clave de cadena de un objeto.
Object.assign(): copia un objeto o fusiona objetos.
Object.is(): comprueba si dos valores tienen el mismo valor.
Funciones factory: aprende sobre las funciones factory o de fábrica, que son funciones que devuelven objetos.
Destrucción de objetos: aprenda a asignar propiedades de un objeto a las variables.
Operador de encadenamiento opcional (?.): simplifica la forma de acceder a una propiedad ubicada en lo profundo de una cadena de objetos conectados sin tener que verificar si cada referencia en la cadena es nula o indefinida.
Extensiones de sintaxis de objetos literales: proporcionan una nueva forma de definir objetos literales.

Sección 7. Clases

Clases en JavaScript: Introducción a la programación orientada a objetos en JavaScript
Sintaxis de clases: Cómo declarar y utilizar una clase en JavaScript
Constructores de clase: Cómo crear y utilizar constructores en JavaScript
Getters y setters: Cómo definir y utilizar getters y setters en una clase en JavaScript
Métodos en una clase: Cómo definir y utilizar métodos en una clase en JavaScript
Propiedades de instancia y de clase: Cómo definir y utilizar propiedades en una clase en JavaScript
Herencia: Cómo crear y utilizar la herencia en una clase en JavaScript
Clases abstractas: Cómo crear y utilizar clases abstractas en JavaScript
Polimorfismo: Cómo utilizar el polimorfismo en una clase en JavaScript
Encapsulación: Cómo utilizar la encapsulación en una clase en JavaScript
Composición: Cómo utilizar la composición en una clase en JavaScript
Interfaces: Cómo definir e implementar interfaces en JavaScript
Métodos estáticos: Cómo definir y utilizar métodos estáticos en una clase en JavaScript
Propiedades estáticas: Cómo definir y utilizar propiedades estáticas en una clase en JavaScript
Métodos privados: Cómo definir y utilizar métodos privados en una clase en JavaScript
Campos privados: Cómo definir y utilizar campos privados en una clase en JavaScript
Mixins: Cómo utilizar mixins para compartir funcionalidad entre clases en JavaScript
Expresiones de clase: Cómo utilizar expresiones de clase para definir clases en JavaScript
Propiedades calculadas: Cómo utilizar propiedades calculadas en una clase en JavaScript
new.target: Cómo utilizar la metapropiedad new.target en una clase en JavaScript

Sección 8. Funciones avanzadas

Funciones generadoras y la asincronía perfecta: Adéntrate en el mundo de las funciones generadoras y cómo simplifican el manejo de operaciones asíncronas, creando un código más limpio y mantenible.
Dominando Async/Await en JavaScript: Profundiza en las funciones asíncronas y el uso de await para manejar promesas, haciendo que el código asíncrono sea más legible y eficiente.
Funciones de Orden Superior en Acción: Explora el poder de las funciones que usan o generan otras funciones, mejorando la modularidad y siguiendo los principios de la programación funcional.
Currying en JavaScript: Escribe Código Más Preciso: Descubre cómo las técnicas de currying pueden ayudarte a escribir funciones más flexibles y precisas, permitiendo un código más reutilizable.
Fábricas de Funciones: Modularidad y Reutilización: Aprende a crear funciones dinámicas en tiempo de ejecución, lo que te permite escribir código más modular y reutilizable.
Memorización en funciones: Rendimiento Superior: Optimiza tus funciones mediante la memorización, almacenando resultados de operaciones pesadas para aumentar significativamente el rendimiento de tu aplicación.
Throttling y debouncing: Eficiencia en Eventos: Controla mejor los eventos y las llamadas a funciones en tu aplicación web mediante técnicas de throttling y debouncing, mejorando la respuesta y eficiencia de la aplicación.
Manejando excepciones con gracia en JavaScript: Crea aplicaciones robustas aprendiendo a capturar y manejar excepciones en tus funciones, proporcionando una mejor experiencia de usuario incluso en casos de error.
El Poder de la Recursividad en Funciones: Entiende cómo y cuándo usar funciones recursivas, esenciales para trabajar con estructuras de datos profundas y algoritmos complejos.
Patrones de Diseño Funcional en JavaScript: Mejora la estructura de tu código y facilita la mantenibilidad mediante la implementación de patrones de diseño funcional reconocidos.
Funciones puras en JavaScript: Predicción y Consistencia: Profundiza en el concepto de funciones puras para escribir código más predecible, testeable y consistente en tus proyectos.
El Uso Avanzado de Closures en JavaScript: Descubre patrones avanzados y técnicas para usar closures, encapsulando información y creando funciones privadas.
Programación Reactiva en JavaScript con RxJS: Introduce conceptos de programación reactiva utilizando funciones y observables, transformando la manera de manejar eventos y flujos de datos.
Aplicando Inyección de Dependencias en Funciones de JavaScript: Aprende a hacer que tu código sea más modular y testeable mediante la inyección de dependencias en tus funciones.
Patrón de Módulos en JavaScript: Estructura y Claridad: Utiliza el patrón de módulos para organizar y encapsular código en tus aplicaciones, aumentando la legibilidad y mantenibilidad.
Pruebas Unitarias en Funciones JavaScript: Garantizando Calidad: Establece prácticas sólidas de testing, escribiendo pruebas unitarias para tus funciones y asegurando que cada parte de tu código funcione como se espera.
Partial Application en JavaScript: Flexibilidad en la Invocación: Explora la aplicación parcial de funciones para escribir código más flexible y limpio, permitiendo una mayor reutilización y claridad.
Iteradores y Generadores: Controlando la Iteración Paso a Paso: Domina los iteradores y generadores en JavaScript para manejar secuencias de datos con precisión, controlando el flujo de datos en tus aplicaciones.
Manejo avanzado de promesas con funciones asíncronas: Adéntrate en patrones avanzados para manejar promesas, mejorando el manejo de tareas asíncronas y la legibilidad del código.
Proxy en JavaScript: Interceptar y Extender Funciones: Aprende a utilizar proxies para modificar o extender el comportamiento de tus funciones, añadiendo lógica adicional, validación, y mucho más.