Los fundamentos de JavaScript

JavaScript es el lenguaje de programación de la web por excelencia. Presente en todos los navegadores modernos, permite crear sitios web interactivos y aplicaciones dinámicas.

¿Por qué aprender JavaScript?

• Omnipresente: lo utilizan más del 97 % de los sitios web
• Polivalente: front-end, back-end (Node.js), aplicaciones móviles, de escritorio…
• Ecosistema rico: miles de bibliotecas y frameworks (React, Vue, Angular…)
• Comunidad activa: una de las mayores comunidades de desarrolladores del mundo

Los conceptos básicos de JavaScript

Variables y tipos de datos

JavaScript ofrece varias formas de declarar variables:

// Variables modificables
let age = 25;
let nom = "Alice";

// Constantes (no modificables)
const PI = 3.14159;

// A evitar (método antiguo)
var ancienneVariable = "Déprécié";

Los tipos de datos principales son:

// Cadenas de caracteres
let message = "Bonjour le monde !";

// Números
let entier = 42;
let decimal = 3.14;

// Booleanos
let estVrai = true;
let estFaux = false;

// Arrays
let fruits = ["pomme", "banane", "orange"];

// Objetos
let personne = {
  nom: "Dupont",
  prenom: "Jean",
  age: 30,
  adresse: {
    ville: "Paris",
    codePostal: "75001"
  }
};

// Valores especiales
let valeurVide = null;
let valeurNonDefinie = undefined;

Operadores

JavaScript ofrece numerosos operadores para manipular datos:

// Operadores aritméticos
let somme = 5 + 3;        // 8
let difference = 10 - 4;  // 6
let produit = 3 * 4;      // 12
let quotient = 20 / 5;    // 4
let modulo = 10 % 3;      // 1 (resto de la división)

// Operadores de comparación
let estEgal = 5 == "5";           // true (igualdad simple)
let estStrictementEgal = 5 === 5; // true (igualdad estricta, incluido el tipo)
let estDifferent = 5 != "6";      // true
let estSuperieur = 10 > 5;        // true

// Operadores lógicos
let et = true && false;  // false
let ou = true || false;  // true
let non = !true;         // false

Estructuras condicionales

Las condiciones permiten ejecutar código según determinadas circunstancias:

// If, else if, else
let heure = 14;

if (heure < 12) {
  console.log("Bonjour");
} else if (heure < 18) {
  console.log("Bon après-midi");
} else {
  console.log("Bonsoir");
}

// Operador ternario (condición ? si verdadero : si falso)
let statut = age >= 18 ? "Majeur" : "Mineur";

// Switch
let jour = "Mardi";

switch (jour) {
  case "Lundi":
    console.log("Début de semaine");
    break;
  case "Mardi":
  case "Mercredi":
  case "Jeudi":
    console.log("Milieu de semaine");
    break;
  case "Vendredi":
    console.log("Fin de semaine");
    break;
  default:
    console.log("Week-end");
}

Bucles

Los bucles permiten repetir acciones:

// Bucle for
for (let i = 0; i < 5; i++) {
  console.log(`Itération ${i}`);
}

// Bucle while
let compteur = 0;
while (compteur < 5) {
  console.log(`Compteur: ${compteur}`);
  compteur++;
}

// Bucle do...while
let j = 0;
do {
  console.log(`J vaut ${j}`);
  j++;
} while (j < 3);

// Recorrer un array
let couleurs = ["rouge", "vert", "bleu"];

// Método moderno
couleurs.forEach(couleur => {
  console.log(couleur);
});

// Con for...of
for (let couleur of couleurs) {
  console.log(couleur);
}

// Recorrer un objeto
let utilisateur = { nom: "Dupont", age: 30, ville: "Paris" };

// Con for...in
for (let propriete in utilisateur) {
  console.log(`${propriete}: ${utilisateur[propriete]}`);
}

Funciones

Las funciones permiten agrupar código reutilizable:

// Declaración clásica
function saluer(nom) {
  return `Bonjour, ${nom} !`;
}

// Expresión de función
const direAuRevoir = function(nom) {
  return `Au revoir, ${nom} !`;
};

// Función flecha (ES6+)
const multiplier = (a, b) => a * b;

// Función con parámetros por defecto
function creerProfil(nom, age = 30, ville = "Paris") {
  return {
    nom,
    age,
    ville
  };
}

// Llamada a una función
console.log(saluer("Marie"));  // "Bonjour, Marie !"
console.log(multiplier(4, 5)); // 20

Manipulación del DOM

JavaScript permite interactuar con el HTML y el CSS a través del DOM (Document Object Model):

// Seleccionar elementos
const titre = document.getElementById("monTitre");
const paragraphes = document.querySelectorAll("p");
const bouton = document.querySelector(".btn-primary");

// Modificar el contenido
titre.textContent = "Nouveau titre";
titre.innerHTML = "Titre avec <em>emphase</em>";

// Modificar los estilos
titre.style.color = "blue";
titre.style.fontSize = "24px";

// Añadir/eliminar clases
titre.classList.add("important");
titre.classList.remove("cache");
titre.classList.toggle("actif");

// Crear elementos
const nouveauParagraphe = document.createElement("p");
nouveauParagraphe.textContent = "Je suis un nouveau paragraphe.";
document.body.appendChild(nouveauParagraphe);

// Gestionar los eventos
bouton.addEventListener("click", function(event) {
  alert("Bouton cliqué !");
});

document.addEventListener("DOMContentLoaded", function() {
  console.log("Page entièrement chargée");
});

Asincronía en JavaScript

JavaScript gestiona la asincronía mediante varios mecanismos:

// Callbacks
function chargerDonnees(callback) {
  setTimeout(() => {
    const donnees = { id: 1, nom: "Produit" };
    callback(donnees);
  }, 1000);
}

chargerDonnees(function(resultat) {
  console.log(resultat);
});

// Promesas
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve({ id: 1, nom: "Produit" });
      } else {
        reject("Erreur lors du chargement");
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Async/await (ES8+)
async function chargerUtilisateur() {
  try {
    const response = await fetch('https://api.exemple.com/utilisateurs/1');
    const utilisateur = await response.json();
    console.log(utilisateur);
  } catch (error) {
    console.error("Erreur:", error);
  }
}

Conclusión

JavaScript es un lenguaje esencial para cualquier desarrollador web. Sus fundamentos son relativamente sencillos de aprender, pero su profundidad y su polivalencia hacen de él un lenguaje que puede requerir tiempo para dominarlo por completo.

Para ir más allá, explora:

• Los frameworks modernos (React, Vue, Angular)
• JavaScript del lado del servidor con Node.js
• Las nuevas funcionalidades de ECMAScript (ES6+)
• La programación orientada a objetos en JavaScript
• Las API web modernas (Fetch, WebSockets, etc.)