JavaScript Débutant

Module 1 : Introduction & Syntaxe

JavaScript, le langage du Web

JavaScript est un langage de programmation versatile qui s'exécute principalement dans les navigateurs pour créer de l'interactivité.

Côté Client : Géré par le navigateur (Chrome, Firefox, etc.).
Côté Serveur : Via Node.js.
Multi-paradigme : Impératif, fonctionnel ou orienté objet.

Module 2 : Variables et Constantes

Let vs Const (Oubliez l'ancien typage)

// À privilégier (portée de bloc)
let score = 10;
const pseudo = "WinnyKing";

// Ne changez pas une constante
// pseudo = "Autre"; // Erreur !

// Types de données primitifs
let chaine = "Hello";
let nombre = 42.5;
let estVrai = true;
let rien = null;
let indefini = undefined;

Note du WinnyKing : Utilisez `const` par défaut. N'utilisez `let` que si vous savez que la variable doit être réaffectée. Cela rend votre code plus prévisible et évite les bugs accidentels.

Module 3 : Tableaux et Objets

Structurer vos données

// Tableaux (Arrays)
const fruits = ["Pomme", "Banane"];
fruits.push("Orange");
console.log(fruits[0]); // "Pomme"

// Objets (Littéraux)
const utilisateur = {
    nom: "WinnyKing",
    age: 25,
    "est-admin": true,
    saluer: function() {
        console.log(`Bonjour, je m'appelle ${this.nom}`);
    }
};
console.log(utilisateur.nom);
utilisateur.saluer();

Module 4 : Manipulation du DOM

💡 Défi Rapide : Comment sélectionner tous les éléments ayant la classe `.card` ?

Réponse : const cards = document.querySelectorAll('.card'); (n'oubliez pas le point pour la classe !)

Interagir avec la page

// Sélection moderne
const titre = document.querySelector('.course-title');
const paragraphes = document.querySelectorAll('p');

// Modification sécurisée
titre.textContent = "Bienvenue dans le cours JS";

// Style & Classes
titre.classList.add('active');
titre.style.color = "#ff6b81";

Module 5 : Événements

Réagir aux actions de l'utilisateur

const btn = document.querySelector('.btn-cours');

// Écouteur d'événement
btn.addEventListener('click', (event) => {
    // console.log est préférable pour le débogage
    console.log("Le bouton a été cliqué !");
    console.log(event.target); // L'élément cliqué
});

Module 6 : ES6+ Les indispensables

Syntaxe moderne et efficace

// Template Literals (Antislashes)
console.log(`Utilisateur : ${pseudo}, Score : ${score}`);

// Arrow Functions (Fonctions fléchées)
const addition = (a, b) => a + b;

// Destructuring (Déstructuration)
const { nom, age } = utilisateur;

// Optional Chaining (?.) - TRÈS UTILE
const codePostal = utilisateur?.adresse?.cp; // Retourne undefined au lieu de planter

// Nullish Coalescing (??)
const monScore = score ?? 0; // Utilise 0 si score est null ou undefined

Module 7 : Débogage & Console

Trouver et corriger les erreurs

// Afficher des données
console.log("Info classique");
console.warn("Attention !");
console.error("Grosse erreur !");

// Afficher des tableaux/objets sous forme de table
const users = [{id: 1, name: "Winny"}, {id: 2, name: "King"}];
console.table(users);

// Mesurer le temps d'exécution
console.time("boucle");
for(let i=0; i<1000; i++) {}
console.timeEnd("boucle");