Introduction au JavaScript
Qu’est-ce que JavaScript ?
JavaScript est un langage de programmation utilisé pour rendre les pages web interactives.
Caractéristiques principales :
Langage interprété (exécuté par le navigateur)
Interaction avec HTML et CSS
Gestion des événements (clics, formulaires, animations, etc.)
Où écrire le JavaScript ?
Il existe trois manières d’intégrer JavaScript à une page HTML :
Méthode
Description
Interne (<script>) Code inclus directement dans le fichier HTML
Externe (.js) Fichier séparé, inclus avec <script src="script.js">
En ligne (onclick="...") Directement dans une balise HTML (peu recommandé)
Exemple d’inclusion externe :
HTML
<script src="script.js"></script>
Variables et Types de données
Déclaration des variables
Mot-clé Description
var : Ancienne méthode, portée globale ou fonction let : Portée limitée au bloc où elle est définie const : Variable constante qui ne peut pas être modifiée
Exemple :
let nom = "Alice";
const age = 25;Types de données
Exemple Number : let x = 10; String : let txt = “Bonjour”; Boolean : let est Vrai = true; Array : let fruits = [“Pomme”, “Banane”]; Object : let personne = {nom: “Alice”, age: 25};
Opérateurs et Conditions
Opérateurs arithmétiques
Principaux opérateurs :
let a = 10, b = 5;
console.log(a + b); // Addition
console.log(a - b); // Soustraction
console.log(a * b); // Multiplication
console.log(a / b); // Division
console.log(a % b); // ModuloConditions (if / else / switch)
Exemple avec if :
let age = 18;
if (age >= 18) {
console.log("Majeur");
} else {
console.log("Mineur");
}
Exemple avec switch :
let fruit = "Banane";
switch (fruit) {
case "Pomme":
console.log("C'est une pomme");
break;
case "Banane":
console.log("C'est une banane");
break;
default:
console.log("Fruit inconnu");
} Boucles
for
Exemple :
for (let i = 0; i < 5; i++) {
console.log("Itération n°" + i);
}`
while et do while
Exemple while :
let x = 0; while (x < 3) {
console.log(x);
x++;
}`
Exemple do while :
let y = 0;
do {
console.log(y);
y++;
} while (y < 3);`Fonctions
Déclaration d’une fonction
Exemple de fonction classique :
function saluer(nom) {
return "Bonjour, " + nom;
}
console.log(saluer("Alice"));`
Fonctions fléchées (ES6)
Exemple :
const saluer = (nom) => "Bonjour, " + nom;
console.log(saluer("Bob"));`
Manipulation du DOM
Sélection d’éléments HTML
Méthode
Description
getElementById(“id”) : Sélectionne un élément par son ID getElementsByClassName(“classe”) : Sélectionne une collection d’éléments querySelector(“selector”) : Sélectionne le premier élément correspondant
Exemple :
document.getElementById("titre").textContent = "Nouveau titre";`
Modification du style
Exemple :
document.getElementById("monDiv").style.color = "red";`
Gestion des événements
Ajouter un événement
Exemple :
document.getElementById("monBouton").addEventListener("click", function() { alert("Bouton cliqué !");
});`