PARTIE 2 : JavaScript
1. Introduction à JavaScript
C’est quoi JavaScript ?
JavaScript est un langage de programmation utilisé dans les pages web.
Il sert à rendre le site vivant et interactif.
Sans JavaScript :
page statique
on lit seulement
Avec JavaScript :
on clique
on écrit
il se passe quelque chose
À quoi sert JavaScript ?
JavaScript permet de :
Réagir aux actions de l’utilisateur
Exemples :
cliquer sur un bouton
remplir un formulaire
passer la souris
Manipuler le HTML / CSS
JavaScript peut :
changer un texte
changer une couleur
cacher / afficher un élément
Gérer les données
JavaScript peut :
stocker des informations
faire des calculs
vérifier des conditions
Lier JavaScript à HTML
<script src="[Link]"></script>
Explication :
[Link] est le fichier JavaScript
toujours avant la fin de </body>
HTML = structure
CSS = design
JS = actions
2. Variables & types
C’est quoi une variable ?
Une variable est une boîte qui contient une valeur.
Exemple :
boîte = âge
valeur = 20
Déclarer une variable
let age = 20;
Explication :
let → crée une variable
age → nom de la variable
20 → valeur
Constante
const nom = "Ali";
Explication :
const → valeur qui ne change pas
utilisé pour les noms, emails, etc.
Types de données (IMPORTANT)
string (texte)
let prenom = "Ali";
number (nombre)
let note = 15;
boolean (vrai / faux)
let majeur = true;
array (tableau)
let notes = [10, 12, 15];
object (objet)
let etudiant = {
nom: "Ali",
age: 22
};
Texte = entre guillemets
Nombre = sans guillemets
3. Conditions (if / else)
À quoi sert une condition ?
Une condition permet de dire :
“SI quelque chose est vrai, ALORS fais ceci, SINON fais cela.”
Exemple :
if (age >= 18) {
[Link]("Majeur");
} else {
[Link]("Mineur");
}
Explication ligne par ligne :
if → si
age >= 18 → condition
{ } → bloc d’instructions
else → sinon
Exemple :
Si âge ≥ 18 → autorisé
Sinon → interdit
4. Boucles
À quoi sert une boucle ?
Une boucle sert à répéter une action plusieurs fois.
Boucle for
for (let i = 0; i < 5; i++) {
[Link](i);
}
Explication :
i = 0 → début
i < 5 → condition
i++ → ajouter 1
Résultat :
0
1
2
3
4
Boucle while
let x = 0;
while (x < 10) {
x++;
}
Explication :
tant que la condition est vraie → on répète
Astuce :
for → quand on connaît le nombre
while → quand on ne connaît pas
5. Fonctions
C’est quoi une fonction ?
Une fonction est un morceau de code qu’on peut réutiliser.
Comme une machine :
entrée → traitement → sortie
Exemple
function addition(a, b) {
return a + b;
}
Explication :
function → mot clé
addition → nom
a, b → paramètres
return → résultat
Utilisation :
addition(3, 5); // résultat = 8
6. DOM (TRÈS IMPORTANT)
C’est quoi le DOM ?
DOM = Document Object Model
C’est la représentation du HTML pour JavaScript.
JavaScript peut :
lire le HTML
modifier le HTML
Modifier un texte
[Link]("titre").innerText = "Bonjour";
Explication :
getElementById → chercher par id
innerText → changer le texte
Modifier le style
[Link](".box").[Link] = "red";
Explication :
querySelector → chercher par classe
.[Link] → changer la couleur
Astuce :
JavaScript peut remplacer CSS en direct
7. Événements
C’est quoi un événement ?
Un événement est une action de l’utilisateur :
clic
clavier
souris
Exemple clic sur un bouton
[Link]("button").addEventListener("click", function() {
alert("Clique !");
});
Explication :
addEventListener → écouter
"click" → type d’événement
alert → message
Phrase simple :
“Quand je clique, il se passe quelque chose.”
8. Formulaires & validation
Pourquoi valider ?
Pour éviter :
champs vides
erreurs utilisateur
Exemple
if (email === "") {
alert("Champ obligatoire");
}
Explication :
=== → comparaison
"" → champ vide
Exemple :
Si champ vide → message d’erreur
9. Tableaux & objets
Tableau
let notes = [10, 12, 15];
Explication :
plusieurs valeurs
index commence à 0
Objet
let etudiant = {
nom: "Ali",
age: 22
};
Explication :
clé : valeur
structure réelle (personne)