JavaScript: Fundamentos Esenciales

Publicado el 1 de Enero, 2025 | Por TechGuías

JavaScript es el lenguaje de programación más utilizado en el desarrollo web. Permite crear sitios web interactivos y dinámicos. Esta guía te llevará por los fundamentos esenciales que necesitas para comenzar tu viaje en JavaScript.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación de alto nivel, interpretado y orientado a objetos. Se ejecuta principalmente en navegadores web, pero también puede ejecutarse en servidores con Node.js.

Variables y Tipos de Datos

JavaScript tiene tres formas de declarar variables:

  • var: Declaración tradicional (evitar en código moderno)
  • let: Variable con alcance de bloque
  • const: Constante que no puede ser reasignada

Tipos de datos principales:

  • Números (Number)
  • Cadenas de texto (String)
  • Booleanos (true/false)
  • Null y Undefined
  • Objetos y Arrays

Operadores

JavaScript incluye varios tipos de operadores:

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

Estructuras de Control

Las estructuras de control permiten controlar el flujo del programa:

  • if/else: Ejecuta código condicionalmente
  • switch: Selección múltiple
  • for: Bucle con contador
  • while: Bucle condicional
  • do/while: Bucle que se ejecuta al menos una vez

Funciones

Las funciones son bloques de código reutilizables:

// Declaración de función
function saludar(nombre) {
    return "Hola, " + nombre;
}

// Función flecha (ES6)
const saludar = (nombre) => {
    return "Hola, " + nombre;
};

Arrays y Objetos

Arrays almacenan múltiples valores:

const colores = ['rojo', 'verde', 'azul'];
colores.push('amarillo'); // Añadir elemento
colores.length; // Longitud del array

Objetos almacenan pares clave-valor:

const persona = {
    nombre: 'Juan',
    edad: 30,
    ciudad: 'Madrid'
};

DOM (Document Object Model)

JavaScript puede manipular el DOM para hacer páginas interactivas:

  • document.getElementById(): Selecciona elemento por ID
  • document.querySelector(): Selecciona elemento con CSS
  • addEventListener(): Añade eventos
  • innerHTML: Modifica contenido HTML

Eventos

Los eventos permiten interactividad:

document.getElementById('boton').addEventListener('click', function() {
    alert('Botón clickeado');
});

Mejores Prácticas

  1. Usa let y const en lugar de var
  2. Usa nombres descriptivos para variables
  3. Comenta tu código cuando sea necesario
  4. Mantén funciones pequeñas y enfocadas
  5. Prueba tu código regularmente

Conclusión

JavaScript es un lenguaje poderoso y versátil. Estos fundamentos te dan una base sólida para comenzar. Practica regularmente, construye proyectos pequeños y gradualmente expande tus conocimientos.