Séance 10 : JavaScript complément

BTS CIEL — Cybersécurité, Informatique et réseaux,

Électronique

Niveau : BTS 1ère année

Année scolaire 2025-2026

Thierry BATLLE
BTS CIEL

Objectifs pédagogiques

À l’issue de cette séance, vous serez capable de :

— Créer des interactions avancées entre JavaScript et HTML
— Valider des formulaires côté client
— Manipuler le DOM de manière avancée
— Gérer les événements de formulaire
— Créer une application web interactive complète

1 Rappels de la séance 9
1.1 Les bases essentielles
— Variables : const (préféré), let (si modification), éviter var
— Sélection d’éléments : getElementById(), querySelector()
— Événements : addEventListener("click", function)
— Modification du DOM : innerHTML, [Link]été

2 Les fonctions flèches (Arrow Functions)

Les fonctions flèches sont une syntaxe moderne et concise :

— Syntaxe courte
— Ne créent pas leur propre this (héritent du contexte)
— Recommandées pour les callbacks et événements

� Exemple

1 // Fonction classique
2 function addition (a, b) {
3 return a + b;
4 }
5

6 // Fonction flèche équivalente

7 const addition = (a, b) => a + b;
8

9 // Exemple avec plusieurs instructions

10 const multiplier = (x, y) => {
11 let resultat = x * y;
12 return resultat ;
13 };

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 1/14

 BTS CIEL

3 Interactivité avancée avec les formulaires

3.1 Structure d’un formulaire HTML
1 <form id=" monFormulaire ">
2 <label for="nom">Nom :</ label >
3 <input type="text" id="nom" name="nom" required >
4

5 <label for="email ">Email :</ label >

6 <input type=" email " id="email " name="email " required >
7

8 <label for="age">Âge :</ label >

9 <input type=" number " id="age" name="age" min="18" max="100">
10

11 <button type=" submit ">Envoyer </ button >

12 </form >
13

14 <div id=" resultat "></div >

3.2 Récupérer les valeurs d’un formulaire

� Exemple
Méthode 1 : Récupération individuelle
1 // Récupérer la valeur d'un champ
2 const nom = document . getElementById ("nom"). value ;
3 const email = document . getElementById ("email "). value ;
4 const age = document . getElementById ("age"). value ;
5

6 console .log("Nom :", nom);

7 console .log(" Email :", email );
8 console .log("Âge :", age);

� Exemple

Méthode 2 : Utilisation de FormData (moderne)

1 const formulaire = document . getElementById (" monFormulaire ");
2 const formData = new FormData ( formulaire );
3

4 // Récupérer toutes les valeurs

5 const nom = formData .get("nom");
6 const email = formData .get("email ");
7 const age = formData .get("age");

3.3 Validation de formulaire

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 2/14

BTS CIEL

3.3.1 Validation côté client avec JavaScript

� Attention
Important : La validation côté client améliore l’expérience utilisateur mais ne rem-
place PAS la validation côté serveur pour des raisons de sécurité.

� Exemple
Exemple complet de validation
1 const formulaire = document . getElementById (" monFormulaire ");
2

3 formulaire . addEventListener (" submit ", function (event ) {

4 // Empêcher l'envoi par défaut
5 event . preventDefault ();
6

7 // Récupérer les valeurs

8 const nom = document . getElementById ("nom"). value ;
9 const email = document . getElementById ("email "). value ;
10 const age = document . getElementById ("age"). value ;
11

12 // Variable pour stocker les erreurs

13 let erreurs = [];
14

15 // Validation du nom ( minimum 2 caractères )

16 if (nom. length < 2) {
17 erreurs .push("Le nom doit contenir au moins 2 caractères ");
18 }
19

20 // Validation de l'email ( format simple )

21 const regexEmail = /^[^\ s@ ]+@[^\ s@ ]+\.[^\ s@ ]+$/;
22 if (! regexEmail .test( email )) {
23 erreurs .push("L'email n'est pas valide ");
24 }
25

26 // Validation de l'âge
27 const ageNum = parseInt (age);
28 if (isNaN ( ageNum ) || ageNum < 18 || ageNum > 100) {
29 erreurs .push("L'âge doit être entre 18 et 100 ans");
30 }
31

32 // Afficher les erreurs ou valider

33 const resultat = document . getElementById (" resultat ");
34

35 if ( erreurs . length > 0) {

36 resultat . innerHTML = "<ul style =' color :red;'>";
37 erreurs . forEach ( function ( erreur ) {
38 resultat . innerHTML += "<li >" + erreur + " </li >";
39 });
40 resultat . innerHTML += " </ul >";

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 3/14

BTS CIEL

41 } else {
42 resultat . innerHTML = "<p style =' color :green ;'> Formulaire
valide ! Bienvenue " + nom + " </p>";
43 // Ici , on pourrait envoyer les données au serveur
44 }
45 });

3.4 Expressions régulières utiles

Expression Validation
/^[a-zA-Z ]+$/ Lettres et espaces uniquement
/^[^\s@]+@ Format email simple
[^\s@]+\.
[^\s@]+$/
/^0[1-9][0-9]{8}$/ Numéro de téléphone français (10 chiffres)
/^[0-9]{5}$/ Code postal (5 chiffres)
/^(?=.*[a-z])(?=.*[A-Z]) Mot de passe fort (8+ caractères, majuscule,
(?=.*[0-9]).8,$/ minuscule, chiffre)

4 Manipulation avancée du DOM

4.1 Créer une liste dynamique
� Exemple

Application : Liste de tâches (To-Do List)

1 <div >
2 <input type="text" id=" nouvelleTache " placeholder =" Nouvelle
tâche ...">
3 <button id=" ajouterTache ">Ajouter </ button >
4 </div >
5

6 <ul id=" listeTaches "></ul >

7

8 <script >
9 const btnAjouter = document . getElementById (" ajouterTache ");
10 const champTache = document . getElementById (" nouvelleTache ");
11 const liste = document . getElementById (" listeTaches ");
12

13 btnAjouter . addEventListener (" click ", function () {

14 const texte = champTache . value .trim ();
15

16 // Vérifier que le champ n'est pas vide

17 if ( texte === "") {

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 4/14

BTS CIEL

18 alert(" Veuillez saisir une tâche ");

19 return ;
20 }
21

22 // Créer un nouvel élément <li >

23 const nouvelleLi = document . createElement ("li");
24 nouvelleLi . textContent = texte ;
25

26 // Créer un bouton de suppression

27 const btnSupprimer = document . createElement (" button ");
28 btnSupprimer . textContent = " Supprimer ";
29 btnSupprimer .style . marginLeft = "10 px";
30

31 // Gérer la suppression
32 btnSupprimer . addEventListener ("click ", function () {
33 liste. removeChild ( nouvelleLi );
34 });
35

36 // Ajouter le bouton au <li >

37 nouvelleLi . appendChild ( btnSupprimer );
38

39 // Ajouter le <li > à la liste

40 liste . appendChild ( nouvelleLi );
41

42 // Vider le champ
43 champTache .value = "";
44 champTache .focus ();
45 });
46

47 // Permettre d' ajouter avec la touche Entrée

48 champTache . addEventListener (" keypress ", function ( event ) {
49 if ( [Link] === " Enter ") {
50 btnAjouter .click ();
51 }
52 });
53 </ script >

4.2 Basculer la visibilité d’éléments

� Exemple

Afficher/Masquer du contenu
1 <button id=" toggleBtn ">Afficher les détails </ button >
2 <div id=" details " style =" display :none;">
3 <p>Voici les informations détaillées ... </p>
4 </div >
5

6 <script >

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 5/14

BTS CIEL

7 const bouton = document . getElementById (" toggleBtn ");

8 const details = document . getElementById (" details ");
9

10 bouton . addEventListener (" click ", function () {

11 if ( details .style. display === "none") {
12 details .style. display = " block ";
13 bouton . textContent = " Masquer les détails ";
14 } else {
15 details .style. display = "none";
16 bouton . textContent = " Afficher les détails ";
17 }
18 });
19 </ script >

4.3 Modifier plusieurs éléments en même temps

� Exemple
Sélectionner et modifier tous les paragraphes
1 // Sélectionner tous les paragraphes
2 const paragraphes = document . querySelectorAll ("p");
3

4 // Appliquer un style à chacun

5 paragraphes . forEach ( function (p) {
6 [Link] .color = "blue";
7 [Link] . fontSize = "18 px";
8 });
9

10 // Ou avec une fonction flèche

11 paragraphes . forEach (p => {
12 p. classList .add(" highlight ");
13 });

5 Événements avancés

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 6/14

BTS CIEL

5.1 Événements de formulaire

Événement Description
submit Formulaire soumis (bouton submit cliqué)
change Valeur d’un champ modifiée ET champ quitté
input Valeur modifiée en temps réel
focus Champ reçoit le focus (clic dedans)
blur Champ perd le focus (clic ailleurs)
keypress Touche pressée (touche caractère)
keydown Touche pressée (toute touche)
keyup Touche relâchée

5.2 Validation en temps réel

� Exemple
Afficher la longueur d’un texte en direct
1 <textarea id=" monTexte " maxlength ="200"></ textarea >
2 <p>Caractères restants : <span id=" compteur ">200 </span ></p>
3

4 <script >
5 const textarea = document . getElementById (" monTexte ");
6 const compteur = document . getElementById (" compteur ");
7 const maxLength = 200;
8

9 textarea . addEventListener (" input ", function () {

10 const longueur = textarea . value . length ;
11 const restant = maxLength - longueur ;
12 compteur . textContent = restant ;
13

14 // Changer la couleur si proche de la limite

15 if ( restant < 20) {
16 compteur . style . color = "red";
17 } else {
18 compteur . style . color = "black ";
19 }
20 });
21 </ script >

6 Stockage local (Local Storage)

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 7/14

BTS CIEL

6.1 Sauvegarder des données dans le navigateur

� Note
Le localStorage permet de stocker des données persistantes dans le navigateur (les
données restent même après fermeture du navigateur).

� Exemple
Sauvegarder et récupérer des données
1 // Sauvegarder une valeur
2 localStorage . setItem ("nom", " Dupont ");
3 localStorage . setItem ("age", "25");
4

5 // Récupérer une valeur

6 const nom = localStorage . getItem ("nom");
7 console .log(nom); // Affiche : Dupont
8

9 // Supprimer une valeur

10 localStorage . removeItem ("age");
11

12 // Tout supprimer
13 localStorage . clear ();
14

15 // Sauvegarder un objet ( conversion en JSON)

16 const personne = {
17 nom: " Dupont ",
18 prenom : "Jean",
19 age: 30
20 };
21 localStorage . setItem (" personne ", JSON. stringify ( personne ));
22

23 // Récupérer l'objet
24 const personneRecup = JSON. parse ( localStorage . getItem (" personne ")
);
25 console .log( personneRecup .nom); // Affiche : Dupont

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 8/14

 BTS CIEL

7 Mini TP (1 heure) : Formulaire d’inscription inter-

actif
7.1 Objectif du TP
Créer un formulaire d’inscription complet avec validation en temps réel et sauvegarde
locale.

7.2 Cahier des charges

� Bonne pratique
Fonctionnalités à implémenter :
1. Formulaire avec les champs :
— Nom (minimum 2 caractères)
— Prénom (minimum 2 caractères)
— Email (format valide)
— Téléphone (10 chiffres, format 06xxxxxxxx ou 07xxxxxxxx)
— Mot de passe (minimum 8 caractères, au moins 1 majuscule, 1 minuscule,
1 chiffre)
— Confirmation du mot de passe
— Case à cocher ”J’accepte les conditions”
2. Validation en temps réel :
— Afficher des messages d’erreur sous chaque champ invalide
— Bordure rouge pour les champs invalides, verte pour les valides
3. Lors de la soumission :
— Vérifier que tous les champs sont valides
— Vérifier que les mots de passe correspondent
— Vérifier que la case conditions est cochée
— Sauvegarder les données dans le localStorage
— Afficher un message de confirmation
4. Bonus :
— Afficher les données sauvegardées au rechargement de la page
— Bouton pour effacer les données sauvegardées
— Indicateur de force du mot de passe

7.3 Structure HTML de départ

1 <! DOCTYPE html >
2 <html lang="fr">
3 <head >
4 <meta charset ="UTF -8">
5 <title >Formulaire d' inscription </ title >

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 9/14

 BTS CIEL

6 <style >
7 body {
8 font - family : Arial , sans - serif ;
9 max -width: 600 px;
10 margin : 50px auto;
11 padding : 20px;
12 }
13

14 .form -group {
15 margin - bottom : 15 px;
16 }
17

18 label {
19 display : block ;
20 margin - bottom : 5px;
21 font - weight : bold;
22 }
23

24 input[type="text"],
25 input[type="email "],
26 input[type="tel"],
27 input[type=" password "] {
28 width : 100%;
29 padding : 8px;
30 border : 2px solid #ccc;
31 border - radius : 4px;
32 box - sizing : border -box;
33 }
34

35 input. valide {
36 border -color: green ;
37 }
38

39 input. invalide {
40 border -color: red;
41 }
42

43 . erreur {
44 color : red;
45 font -size: 14px;
46 margin -top: 5px;
47 display : none;
48 }
49

50 button {
51 background - color : #92 D050;
52 color : white;
53 padding : 10px 20 px;
54 border : none;
55 border - radius : 4px;
56 cursor : pointer ;

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 10/14

 BTS CIEL

57 font -size: 16px;

58 }
59

60 button : hover {
61 background - color : #7 ab83f ;
62 }
63

64 # confirmation {
65 margin -top: 20px;
66 padding : 10px;
67 border - radius : 4px;
68 display : none;
69 }
70

71 # confirmation . succes {
72 background - color : # d4edda ;
73 color : #155724;
74 border : 1px solid # c3e6cb ;
75 }
76 </ style >
77 </head >
78 <body >
79 <h1 >Formulaire d' inscription </h1 >
80

81 <form id=" formInscription ">

82 <div class ="form - group ">
83 <label for="nom">Nom :</ label >
84 <input type="text" id="nom" name="nom" required >
85 <div class =" erreur " id="erreur -nom"></div >
86 </div >
87

88 <div class ="form - group ">

89 <label for=" prenom ">Prénom :</ label >
90 <input type="text" id=" prenom " name=" prenom " required >
91 <div class =" erreur " id="erreur - prenom "></div >
92 </div >
93

94 <div class ="form - group ">

95 <label for="email ">Email :</ label >
96 <input type=" email " id="email " name="email " required >
97 <div class =" erreur " id="erreur -email "></div >
98 </div >
99

100 <div class ="form - group ">

101 <label for=" telephone ">Téléphone :</ label >
102 <input type="tel" id=" telephone " name=" telephone " required >
103 <div class =" erreur " id="erreur - telephone "></div >
104 </div >
105

106 <div class ="form - group ">

107 <label for=" motdepasse ">Mot de passe :</ label >

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 11/14

 BTS CIEL

108 <input type=" password " id=" motdepasse " name=" motdepasse "
required >
109 <div class =" erreur " id="erreur - motdepasse "></div >
110 </div >
111

112 <div class ="form - group ">

113 <label for=" confirmation ">Confirmation mot de passe :</ label >
114 <input type=" password " id=" confirmation " name=" confirmation "
required >
115 <div class =" erreur " id="erreur - confirmation "></div >
116 </div >
117

118 <div class ="form - group ">

119 <label >
120 <input type=" checkbox " id=" conditions " required >
121 J' accepte les conditions d' utilisation
122 </ label >
123 <div class =" erreur " id="erreur - conditions "></div >
124 </div >
125

126 <button type=" submit ">S' inscrire </ button >

127 </form >
128

129 <div id=" confirmation "></div >

130

131 <script >

132 // VOTRE CODE JAVASCRIPT ICI
133 </ script >
134 </body >
135 </html >

7.4 Étapes de réalisation

1. Étape 1 (15 min) : Créer les fonctions de validation pour chaque champ
— validerNom(valeur) → retourne true/false
— validerEmail(valeur) → utiliser une regex
— validerTelephone(valeur) → 10 chiffres commençant par 06 ou 07
— validerMotDePasse(valeur) → critères de sécurité
2. Étape 2 (15 min) : Ajouter la validation en temps réel
— Écouter l’événement input sur chaque champ
— Appeler la fonction de validation correspondante
— Afficher/masquer le message d’erreur
— Ajouter la classe valide ou invalide
3. Étape 3 (20 min) : Gérer la soumission du formulaire
— Empêcher la soumission par défaut (preventDefault())
— Valider tous les champs
— Vérifier la correspondance des mots de passe

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 12/14

BTS CIEL

— Vérifier que la case conditions est cochée

— Si tout est valide : sauvegarder dans localStorage et afficher confirmation
— Sinon : afficher les erreurs
4. Étape 4 - Bonus (10 min) : Fonctionnalités supplémentaires
— Récupérer et afficher les données au chargement
— Ajouter un bouton pour effacer les données
— Créer un indicateur de force du mot de passe

7.5 Indices et astuces

� Attention
Fonctions utiles :
— [Link]("classe") / remove("classe")
— [Link] = "block" ou "none"
— [Link](objet) et [Link](chaine)
— [Link]() pour empêcher le comportement par défaut

� Bonne pratique
Regex utiles :
— Email : /^[^\s@]+@[^\s@]+\.[^\s@]+$/
— Téléphone : /^0[67][0-9]{8}$/
— Mot de passe fort : /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).8,$/

7.6 Critères d’évaluation

Critère Points
Validation de chaque champ fonctionne /4
Messages d’erreur pertinents /2
Bordures colorées (rouge/vert) /2
Validation complète à la soumission /4
Vérification correspondance mots de passe /2
Sauvegarde dans localStorage /3
Message de confirmation /2
Code propre et commenté /1
TOTAL /20

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 13/14

BTS CIEL

Points clés à retenir

� Bonne pratique
Formulaires :
— Utiliser [Link]() pour empêcher la soumission par défaut
— Récupérer les valeurs avec .value
— Valider TOUJOURS côté serveur également (sécurité)
Validation :
— Utiliser les expressions régulières pour les formats complexes
— Afficher des messages d’erreur clairs et utiles
— Valider en temps réel pour une meilleure expérience utilisateur
DOM :
— querySelectorAll() pour sélectionner plusieurs éléments
— forEach() pour parcourir une collection
— classList pour gérer les classes CSS
localStorage :
— [Link](clé, valeur)
— [Link](clé)
— Utiliser [Link]() et [Link]() pour les objets

« J’entends et j’oublie, je vois et je me souviens, je fais et je comprends. » — Confucius Page 14/14