aimenu

Base

1. Introducción a JavaScript ES6

Ejemplo Básico:

// Uso de let y template literals (cadenas interpoladas)
let saludo = "Hola";
let nombre = "Mundo";
console.log(`${saludo}, ${nombre}!`); // Imprime: Hola, Mundo!

2. Sintaxis Básica y Estructura del Código

3. Variables, Constantes y Tipos de Datos

Variables

Constantes

Tipos de Datos

Conversión y Coerción de Tipos

4. Modo Estricto ("use strict")

El modo estricto impone reglas más estrictas para escribir un código más fiable y seguro.

Características principales: - Obliga a declarar todas las variables. - Prohíbe el uso de delete para remover variables, objetos o funciones. - Impide nombres duplicados en parámetros de funciones. - Evita escribir en propiedades de solo lectura o usar palabras reservadas.

5. Entrada y Salida en Navegadores

JavaScript ofrece diversos métodos para interactuar con el usuario y depurar el código:

6. Operadores

Los operadores se utilizan para realizar asignaciones, cálculos y comparaciones. Se dividen en varias categorías:

Operadores de Asignación

let a = 10;
a += 5;  // Equivalente a: a = a + 5
console.log(a); // 15

Operadores Aritméticos

console.log(2 + 3);  // Suma: 5
console.log(10 - 4); // Resta: 6
console.log(3 * 4);  // Multiplicación: 12
console.log(12 / 4); // División: 3
console.log(10 % 3); // Módulo (resto): 1

Operadores Unitarios (Incremento y Decremento)

let i = 5;
console.log(++i); // Pre-incremento: incrementa y luego imprime (6)
console.log(i++); // Post-incremento: imprime 6 y luego incrementa
console.log(i);   // Ahora i es 7

Operadores de Comparación

let num = 5;
let str = "5";
console.log(num == str);   // true, con conversión implícita
console.log(num === str);  // false, comparación estricta
console.log(10 > 5);       // true
console.log(3 <= 2);       // false

Operadores Lógicos

console.log(true && false); // false
console.log(true || false); // true
console.log(!true);         // false

Operadores de Objeto

Acceden a las propiedades o métodos de un objeto.

let estudiante = {
    nombre: "Lucía",
    curso: "JavaScript"
};

console.log(estudiante.nombre);    // Acceso por notación de punto
console.log(estudiante["curso"]);  // Acceso por notación de corchetes

delete estudiante.curso;
console.log(estudiante); // { nombre: "Lucía" }

Operadores Misceláneos

7. Estructuras de Control

Las estructuras de control permiten alterar el flujo secuencial del código, ya sea mediante condiciones o bucles.

Instrucciones Condicionales (if / else)

let numero = 10;

if (numero > 0) {
    console.log("El número es positivo");
} else if (numero < 0) {
    console.log("El número es negativo");
} else {
    console.log("El número es cero");
}

Condicionales anidados:

let edad = 20;
let tienePermiso = true;

if (edad >= 18) {
    if (tienePermiso) {
        console.log("Puedes entrar a la fiesta");
    } else {
        console.log("Necesitas un permiso de tus padres");
    }
} else {
    console.log("No eres mayor de edad");
}

Bucles o Estructuras Repetitivas

Instrucciones break y continue

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // Sale del bucle cuando i es 5
    }
    if (i % 2 === 0) {
        continue; // Salta la iteración actual si i es par
    }
    console.log("Valor impar:", i);
}

8. Arrays

Los arrays son colecciones ordenadas de valores y proporcionan numerosos métodos para su manipulación.

Creación y Acceso a Elementos

let numeros = [1, 2, 3, 4, 5];
let letras = new Array("a", "b", "c");

console.log(numeros.length); // 5
console.log(numeros[0]);     // 1

Arrays bidimensionales:

let matriz = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
console.log(matriz[1][2]); // 6

Clonación de Arrays

Métodos para Agregar y Eliminar Elementos

let frutas = ["manzana", "banana"];

frutas.push("naranja");    // Agrega al final
let ultima = frutas.pop(); // Extrae del final

frutas.unshift("fresa");   // Agrega al inicio
let primera = frutas.shift(); // Extrae del inicio

Métodos Complejos

let elementos = ["a", "b", "c", "d"];

// splice: elimina y reemplaza elementos
elementos.splice(2, 2, "z"); // Resultado: ["a", "b", "z"]

// slice: extrae una porción del array sin modificar el original
let subArray = elementos.slice(0, 2); // ["a", "b"]

// concat: une arrays
let combinado = elementos.concat(["x", "y"]); // ["a", "b", "z", "x", "y"]

Recorrido del Array

Métodos de Búsqueda y Filtrado

Métodos de Transformación

9. Funciones

Las funciones permiten agrupar un conjunto de instrucciones bajo un nombre para reutilizarlas y organizar mejor el código.

Declaración y Expresión de Funciones

Parámetros y Valores Predeterminados

function multiplicar(a, b = 2) {
    return a * b;
}
console.log(multiplicar(5)); // 10

Parámetro REST y Spread Operator

Funciones Flecha (Arrow Functions)

// Sintaxis compacta con retorno implícito
const doble = numero => numero * 2;
console.log(doble(4)); // 8

// Con múltiples parámetros y cuerpo de función
const sumar = (a, b) => {
    let resultado = a + b;
    return resultado;
};
console.log(sumar(5, 6)); // 11

10. Clases en JavaScript (ES6)

Las clases introducen la forma de definir plantillas para crear objetos, integrando propiedades, métodos y herencia de forma ordenada.

class Persona {
    // Constructor que inicializa la instancia
    constructor(nombre, edad) {
        this.nombre = nombre;
        this.edad = edad;
    }
    
    // Método de instancia
    presentarse() {
        return `Hola, soy ${this.nombre} y tengo ${this.edad} años.`;
    }
    
    // Método estático: se usa directamente desde la clase
    static crearAnonimo() {
        return new Persona("Anónimo", 0);
    }
    
    // Getter para verificación de mayor edad
    get esMayor() {
        return this.edad >= 18;
    }
}

const persona1 = new Persona("Laura", 25);
console.log(persona1.presentarse());
console.log(`¿Es mayor? ${persona1.esMayor}`);

const anonimo = Persona.crearAnonimo();
console.log(anonimo.presentarse());

11. Otras Características Interesantes de JavaScript ES6

12. Introducción a la Manipulación Básica del DOM

El DOM (Document Object Model) representa la estructura HTML de una página y permite modificarla dinámicamente.

13. Material Adicional y Bibliografía

Para profundizar en JavaScript, te recomiendo las siguientes fuentes y recursos: