Les fondamentaux de JavaScript

JavaScript est le langage de programmation du web par excellence. Présent dans tous les navigateurs modernes, il permet de créer des sites web interactifs et des applications dynamiques.

Pourquoi apprendre JavaScript ?

• Omniprésent : Utilisé par plus de 97% des sites web
• Polyvalent : Front-end, back-end (Node.js), applications mobiles, desktop…
• Écosystème riche : Des milliers de bibliothèques et frameworks (React, Vue, Angular…)
• Communauté active : Une des plus grandes communautés de développeurs au monde

Les bases de JavaScript

Variables et types de données

JavaScript propose plusieurs façons de déclarer des variables :

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

// Constantes (non modifiables)
const PI = 3.14159;

// À éviter (ancienne méthode)
var ancienneVariable = "Déprécié";

Les types de données principaux sont :

// Chaînes de caractères
let message = "Bonjour le monde !";

// Nombres
let entier = 42;
let decimal = 3.14;

// Booléens
let estVrai = true;
let estFaux = false;

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

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

// Valeurs spéciales
let valeurVide = null;
let valeurNonDefinie = undefined;

Opérateurs

JavaScript propose de nombreux opérateurs pour manipuler les données :

// Opérateurs arithmétiques
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 (reste de la division)

// Opérateurs de comparaison
let estEgal = 5 == "5";           // true (égalité simple)
let estStrictementEgal = 5 === 5; // true (égalité stricte, type inclus)
let estDifferent = 5 != "6";      // true
let estSuperieur = 10 > 5;        // true

// Opérateurs logiques
let et = true && false;  // false
let ou = true || false;  // true
let non = !true;         // false

Structures conditionnelles

Les conditions permettent d’exécuter du code selon certaines circonstances :

// 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");
}

// Opérateur ternaire (condition ? si vrai : si faux)
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");
}

Boucles

Les boucles permettent de répéter des actions :

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

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

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

// Parcourir un tableau
let couleurs = ["rouge", "vert", "bleu"];

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

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

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

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

Fonctions

Les fonctions permettent de regrouper du code réutilisable :

// Déclaration classique
function saluer(nom) {
  return `Bonjour, ${nom} !`;
}

// Expression de fonction
const direAuRevoir = function(nom) {
  return `Au revoir, ${nom} !`;
};

// Fonction fléchée (ES6+)
const multiplier = (a, b) => a * b;

// Fonction avec paramètres par défaut
function creerProfil(nom, age = 30, ville = "Paris") {
  return {
    nom,
    age,
    ville
  };
}

// Appel de fonction
console.log(saluer("Marie"));  // "Bonjour, Marie !"
console.log(multiplier(4, 5)); // 20

Manipulation du DOM

JavaScript permet d’interagir avec le HTML et le CSS via le DOM (Document Object Model) :

// Sélectionner des éléments
const titre = document.getElementById("monTitre");
const paragraphes = document.querySelectorAll("p");
const bouton = document.querySelector(".btn-primary");

// Modifier le contenu
titre.textContent = "Nouveau titre";
titre.innerHTML = "Titre avec <em>emphase</em>";

// Modifier les styles
titre.style.color = "blue";
titre.style.fontSize = "24px";

// Ajouter/supprimer des classes
titre.classList.add("important");
titre.classList.remove("cache");
titre.classList.toggle("actif");

// Créer des éléments
const nouveauParagraphe = document.createElement("p");
nouveauParagraphe.textContent = "Je suis un nouveau paragraphe.";
document.body.appendChild(nouveauParagraphe);

// Gérer les événements
bouton.addEventListener("click", function(event) {
  alert("Bouton cliqué !");
});

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

Asynchrone en JavaScript

JavaScript gère l’asynchrone via plusieurs mécanismes :

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

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

// Promesses
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);
  }
}

Conclusion

JavaScript est un langage essentiel pour tout développeur web. Ses fondamentaux sont relativement simples à apprendre, mais sa profondeur et sa polyvalence en font un langage qui peut prendre du temps à maîtriser complètement.

Pour aller plus loin, explorez :

• Les frameworks modernes (React, Vue, Angular)
• JavaScript côté serveur avec Node.js
• Les nouvelles fonctionnalités d’ECMAScript (ES6+)
• La programmation orientée objet en JavaScript
• Les API web modernes (Fetch, WebSockets, etc.)