Curso de programación con JavaScript

JavaScript es un lenguaje de programación interpretado, orientado a objetos y basado en prototipos. Es fundamental en el desarrollo web moderno, permitiendo crear páginas web interactivas y dinámicas. Ejecutado en el navegador del cliente, JavaScript permite manipular el Document Object Model (DOM), gestionar eventos y comunicar con servidores mediante técnicas como AJAX.

¿Qué es JavaScript?

Creado originalmente en 1995 por Brendan Eich bajo el nombre de LiveScript, JavaScript se ha convertido en uno de los lenguajes más populares en la web. A pesar de su nombre, no está relacionado con Java. Su sintaxis es similar a la de C, pero con características propias que lo hacen flexible y potente para el desarrollo frontend y, con Node.js, también en el backend.

Características principales

• Dinámico y débilmente tipado: Las variables pueden cambiar de tipo y no es necesario declarar su tipo explícitamente.
• Basado en prototipos: Utiliza prototipos en lugar de clases para la herencia y creación de objetos.
• Event-driven: Soporta programación basada en eventos, esencial para la interacción con el usuario.
• Asincronía: Gestiona operaciones asincrónicas mediante callbacks, promesas y async/await.
• Multiplataforma: Puede ejecutarse en cualquier navegador moderno y en servidores con Node.js.

Cómo incluir JavaScript en HTML

Existen varias formas de agregar JavaScript a un documento HTML:

Script en línea

<script>
    console.log('Hola, mundo');
</script>

Archivo externo

<script src="app.js"></script>

Atributo onclick y similares (no recomendado)

<button onclick="alert('Has hecho clic')">Haz clic</button>

Variables y tipos de datos

Declaración de variables

• var: Declaración global o local a una función, con alcance de función.
• let: Declaración de bloque, introducida en ES6.
• const: Constante de bloque, su valor no puede cambiar.

Ejemplo:

var nombre = 'Ana';
let edad = 30;
const PI = 3.1416;

Tipos de datos

• Primitivos: string, number, boolean, undefined, null, symbol (ES6).
• Objetos: Objetos, arrays, funciones.

Ejemplo:

let texto = 'Hola';
let numero = 42;
let booleano = true;
let sinDefinir;
let nulo = null;

Operadores

• Aritméticos: +, -, *, /, %, **.
• Asignación: =, +=, -=, *=, /=.
• Comparación: ==, ===, !=, !==, >, <, >=, <=.
• Lógicos: &&, ||, !.

Ejemplo:

let resultado = (5 + 3) * 2;
let esIgual = (10 === '10'); // false, comparación estricta

Estructuras de control

Condicionales

if (condicion) {
    // Código si la condición es verdadera
} else if (otraCondicion) {
    // Otro caso
} else {
    // Caso por defecto
}

Switch

switch (expresion) {
    case valor1:
        // Código
        break;
    case valor2:
        // Código
        break;
    default:
        // Código por defecto
}

Bucles

• For

  for (let i = 0; i < 10; i++) {
      console.log(i);
  }
  

• While

  let i = 0;
  while (i < 10) {
      console.log(i);
      i++;
  }
  

• Do...while

  let i = 0;
  do {
      console.log(i);
      i++;
  } while (i < 10);
  

Funciones

Declaración de funciones

function sumar(a, b) {
    return a + b;
}

Funciones anónimas y expresiones de función

const multiplicar = function(a, b) {
    return a * b;
};

Funciones flecha (ES6)

const dividir = (a, b) => a / b;

Parámetros por defecto (ES6)

function saludar(nombre = 'Amigo') {
    console.log(`Hola, ${nombre}`);
}

Objetos y prototipos

Creación de objetos

let persona = {
    nombre: 'Carlos',
    edad: 28,
    saludar: function() {
        console.log(`Hola, soy ${this.nombre}`);
    }
};

Acceso a propiedades

console.log(persona.nombre); // Carlos
persona.saludar(); // Hola, soy Carlos

Prototipos

JavaScript utiliza prototipos para la herencia.

function Persona(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
}

Persona.prototype.saludar = function() {
    console.log(`Hola, soy ${this.nombre}`);
};

let juan = new Persona('Juan', 35);
juan.saludar(); // Hola, soy Juan

Programación asincrónica

Callbacks

Funciones que se ejecutan después de una operación asincrónica.

setTimeout(function() {
    console.log('Ha pasado un segundo');
}, 1000);

Promesas

Introducidas en ES6 para manejar mejor la asincronía.

let promesa = new Promise((resolve, reject) => {
    // Operación asincrónica
    if (exito) {
        resolve(resultado);
    } else {
        reject(error);
    }
});

promesa.then(resultado => {
    console.log(resultado);
}).catch(error => {
    console.error(error);
});

Async/Await (ES8)

Sintaxis más clara para manejar promesas.

async function obtenerDatos() {
    try {
        let respuesta = await fetch('https://api.example.com/datos');
        let datos = await respuesta.json();
        console.log(datos);
    } catch (error) {
        console.error(error);
    }
}

Manipulación del DOM

El Document Object Model es una representación estructurada del documento HTML.

Selección de elementos

• document.getElementById('id')
• document.querySelector('.clase')
• document.querySelectorAll('div')

Modificación de contenido

let elemento = document.getElementById('titulo');
elemento.textContent = 'Nuevo título';
elemento.style.color = 'red';

Creación y eliminación de elementos

let nuevoParrafo = document.createElement('p');
nuevoParrafo.textContent = 'Este es un nuevo párrafo';
document.body.appendChild(nuevoParrafo);

document.body.removeChild(nuevoParrafo);

Eventos

Los eventos permiten responder a interacciones del usuario.

Añadir un evento

let boton = document.getElementById('miBoton');
boton.addEventListener('click', function() {
    alert('Has hecho clic');
});

Eventos comunes

• click
• mouseover
• mouseout
• keydown
• submit

Características modernas de JavaScript (ES6+)

Desestructuración

let [a, b] = [1, 2];
let { nombre, edad } = persona;

Operador spread

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];

Template literals

let mensaje = `Hola, ${nombre}. Tienes ${edad} años.`;

Clases

Sintaxis más clara para manejar prototipos.

class Persona {
    constructor(nombre, edad) {
        this.nombre = nombre;
        this.edad = edad;
    }
    saludar() {
        console.log(`Hola, soy ${this.nombre}`);
    }
}

Módulos

Permiten dividir el código en archivos reutilizables.

Exportar

// archivo.js
export function sumar(a, b) {
    return a + b;
}

Importar

// main.js
import { sumar } from './archivo.js';
console.log(sumar(2, 3));

Manejo de errores

Try...catch

try {
    // Código que puede generar un error
} catch (error) {
    console.error('Se produjo un error:', error);
} finally {
    // Código que se ejecuta siempre
}

Lanzar errores

function dividir(a, b) {
    if (b === 0) {
        throw new Error('No se puede dividir por cero');
    }
    return a / b;
}

Buenas prácticas

• Usar let y const: Evita problemas de alcance con var.
• Escribir código limpio y legible: Nombres descriptivos y comentarios cuando sean necesarios.
• Evitar el uso excesivo de variables globales: Reduce el riesgo de colisiones y errores.
• Utilizar funciones puras: Facilitan el testing y el mantenimiento.
• Manejar correctamente la asincronía: Utilizar async/await o promesas para un código más claro.
• Validar entradas del usuario: Previene errores y problemas de seguridad.
• Utilizar herramientas de linting: Como ESLint para mantener un estilo de código consistente.

Recursos adicionales

• Documentación oficial: MDN Web Docs
• ECMAScript: Especificaciones del lenguaje.