Cours complet : JavaScript pour débutants

1. Introduction à JavaScript

JavaScript est un langage de programmation qui permet de rendre les pages web interactives. C'est l'un des trois langages fondamentaux du web avec HTML et CSS.

💡 À savoir : JavaScript s'exécute directement dans le navigateur de l'utilisateur, ce qui le rend très rapide et interactif.

2. Les variables

Les variables servent à stocker des données. En JavaScript moderne, on utilise let et const.

// Déclaration des variables
let nom = "Jean";        // variable modifiable
const age = 25;          // variable constante (non modifiable)
let estEtudiant = true;  // booléen
let note = 15.5;         // nombre décimal

// Afficher dans la console
console.log("Bonjour " + nom);
                

🎮 Essayez par vous-même :

3. Types de données

String (chaîne de caractères) : "Bonjour", 'Salut'
Number (nombre) : 42, 3.14
Boolean (booléen) : true, false
Array (tableau) : [1, 2, 3]
Object (objet) : {nom: "Jean", age: 25}

// Différents types de données
let prenom = "Sophie";           // String
let agePersonne = 28;            // Number
let estMajeur = true;            // Boolean
let couleurs = ["rouge", "bleu", "vert"];  // Array
let personne = {                 // Object
    nom: "Martin",
    ville: "Paris"
};
                

4. Les conditions (if/else)

Les conditions permettent d'exécuter du code selon certaines situations.

let heure = 14;

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

⚡ Testez les conditions :

5. Les boucles

Les boucles permettent de répéter des actions plusieurs fois.

// Boucle for
for (let i = 0; i < 5; i++) {
    console.log("Compteur : " + i);
}

// Boucle while
let compteur = 0;
while (compteur < 3) {
    console.log("Tour numéro " + compteur);
    compteur++;
}
                

🔄 Boucle en action :

6. Les fonctions

Les fonctions sont des blocs de code réutilisables qui peuvent être appelés plusieurs fois.

// Déclaration d'une fonction
function direBonjour(nom) {
    return "Bonjour " + nom + " !";
}

// Appel de la fonction
console.log(direBonjour("Pierre"));

// Fonction fléchée (moderne)
const addition = (a, b) => a + b;
                

📞 Créez votre propre fonction :

7. Manipulation du DOM

Le DOM (Document Object Model) permet de modifier dynamiquement le contenu HTML.

// Sélectionner un élément
let element = document.getElementById("monElement");

// Modifier le texte
element.textContent = "Nouveau texte";

// Modifier le style
element.style.color = "red";

// Créer un nouvel élément
let nouveauParagraphe = document.createElement("p");
nouveauParagraphe.textContent = "Je suis nouveau !";
document.body.appendChild(nouveauParagraphe);
                

Cliquez sur le bouton pour me changer !

8. Les événements

Les événements permettent de réagir aux actions de l'utilisateur (clic, survol, frappe clavier, etc.).

// Écouter un clic
button.addEventListener("click", function() {
    console.log("Bouton cliqué !");
});

// Écouter la souris
element.onmouseover = function() {
    console.log("Souris au-dessus !");
};

// Écouter le clavier
input.addEventListener("keyup", function(event) {
    console.log("Touche pressée : " + event.key);
});
                

🖱️ Testez les événements :

Survolez-moi !

9. Exercices pratiques

Exercice 1 : Calculateur simple

Créez une calculatrice qui additionne, soustrait, multiplie ou divise deux nombres.

Exercice 2 : Liste de tâches

Ajoutez des tâches à une liste et supprimez-les.

Exercice 3 : Changeur de couleur aléatoire

Je change de couleur !

10. Bonnes pratiques

✅ Utilisez des noms de variables explicites (en anglais de préférence)
✅ Commentez votre code pour expliquer les parties complexes
✅ Indentez correctement votre code pour le rendre lisible
✅ Utilisez const par défaut, et let seulement si vous devez réassigner
✅ Évitez les variables globales
✅ Testez votre code dans différents navigateurs