JavaScript — rendre une page vivante

<script>
    console.log("Script interne exécuté !");
</script>

<script src="script.js"></script>

<head>
    <script src="script.js" defer></script>
</head>

console.log("message");                        // message normal
console.error("erreur");                       // en rouge
console.table(["HTML", "CSS", "JavaScript"]);  // tableau lisible

// commentaire sur une seule ligne

/* commentaire
   sur plusieurs lignes */

x += 1; y -= 1; z = 0;

let age = 20;          // déclaration
age = 21;              // modification : autorisée
console.log(age);      // 21

const pi = 3.14;
pi = 3.1415;           // ✘ Erreur : impossible de réaffecter une constante

let texte1 = "Bonjour";          // guillemets doubles
let texte2 = 'Bienvenue !';      // guillemets simples
let texte3 = `Ceci est une chaîne.`;   // backticks : template literal

let texte1 = "Bonjour ", texte2 = "le monde";
console.log(texte1 + texte2);        // "Bonjour le monde"

let age = 20;
console.log("J'ai " + age + " ans.");  // "J'ai 20 ans."

Number("42")     // 42        → transforme en nombre
String(100)      // "100"     → transforme en texte
typeof "Alice"   // "string"  → donne le type

let age = 18;

if (age < 18) {
    console.log("Vous êtes mineur");
} else if (age === 18) {
    console.log("Vous venez d'atteindre la majorité");
} else {
    console.log("Vous êtes majeur");
}

let jour = "lundi";

switch (jour) {
    case "lundi":
        console.log("C'est le début de la semaine");
        break;
    case "vendredi":
        console.log("Dernier jour avant le weekend");
        break;
    case "dimanche":
        console.log("C'est le weekend !");
        break;
    default:
        console.log("Jour quelconque");
}

for (initialisation; condition; incrémentation) {
    // instructions à répéter
}

for (let i = 1; i <= 5; i++) {
    console.log("Tour numéro :", i);
}

let compteur = 1;

while (compteur <= 5) {
    console.log("Compteur :", compteur);
    compteur++;          // ← sans cette ligne : boucle infinie
}

let nombre = 10;

do {
    console.log("Le nombre est :", nombre);
} while (nombre < 5);

// Affiche une fois « Le nombre est : 10 »,
// alors même que 10 < 5 est faux : le test vient APRÈS.

function addition(a, b) {
    return a + b;
}
console.log(addition(5, 3));      // 8

// Particularité : elle est « hoistée », donc appelable AVANT sa déclaration
console.log(addition(3, 4));      // fonctionne

const multiplication = function (a, b) {
    return a * b;
};
console.log(multiplication(4, 6));    // 24
// Utilisable seulement APRÈS sa déclaration.

const soustraction = (a, b) => a - b;          // une seule expression : return implicite
console.log(soustraction(10, 7));   // 3

const calcul = (x, y) => {                     // plusieurs instructions : accolades + return
    let resultat = x * y + 10;
    return resultat;
};
console.log(calcul(2, 5));          // 20

function carre(nombre) {
    return nombre * nombre;
}
let resultat = carre(5);          // 25

function afficherMessage() {
    console.log("Bonjour !");
}
let valeur = afficherMessage();   // undefined : pas de return

function saluer(nom = "Invité") { // valeur par défaut
    console.log("Bonjour " + nom + " !");
}
saluer();          // Bonjour Invité !
saluer("Alice");   // Bonjour Alice !

let global = "Je suis global";

function testScope() {
    let local = "Je suis local";
    console.log(global);   // ✔ accessible
    console.log(local);    // ✔ accessible
}

testScope();
console.log(global);       // ✔
console.log(local);        // ✘ Erreur : local n'existe pas ici

let titre       = document.getElementById("titre");
let paragraphe  = document.querySelector("p");          // le premier <p>
let important   = document.querySelector(".important");  // la 1re classe "important"
let conteneur   = document.querySelector("#conteneur");  // par id, façon CSS
let paragraphes = document.querySelectorAll("p");        // tous les <p>

titre.textContent = "Nouveau titre";                    // texte brut
titre.innerHTML   = "<span style='color:red'>Rouge</span>";  // interprète le HTML

titre.style.color           = "blue";                   // style en ligne
titre.style.backgroundColor = "yellow";                 // camelCase !

texte.classList.add("rouge");        // ajouter une classe
texte.classList.remove("rouge");     // l'enlever
texte.classList.toggle("rouge");     // l'un ou l'autre selon l'état

let p = document.createElement("p");
p.textContent = "Paragraphe ajouté par JavaScript";
document.body.appendChild(p);

element.addEventListener("typeEvenement", fonctionCallback);

let nom   = document.getElementById("nom").value;
let email = document.getElementById("email").value;

if (nom === "") {
    alert("Le nom est obligatoire");
}

if (password.length < 8) {
    alert("Mot de passe trop court");
}

if (!email.includes("@")) {
    alert("Email invalide");
}

let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
    alert("Email invalide");
}

let telRegex = /^[0-9]{10}$/;
if (!telRegex.test(telephone)) {
    alert("Numéro invalide");
}