Computing">
[Go to site: main page, start]
Scribd
Importer
2 vues29 pages

Jour04 Introduction JavaScript

Ce document présente une formation sur l'introduction au JavaScript, visant à rendre les pages web interactives et dynamiques. Les participants apprendront à déclarer des variables, utiliser des fonctions, manipuler le DOM et gérer les événements utilisateur. La formation est destinée aux débutants et nécessite des connaissances préalables en HTML et CSS.

Transféré par

sendazacharie9
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
2 vues29 pages

Jour04 Introduction JavaScript

Ce document présente une formation sur l'introduction au JavaScript, visant à rendre les pages web interactives et dynamiques. Les participants apprendront à déclarer des variables, utiliser des fonctions, manipuler le DOM et gérer les événements utilisateur. La formation est destinée aux débutants et nécessite des connaissances préalables en HTML et CSS.

Transféré par

sendazacharie9
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

JOUR J4

4
Introduction au JavaScript
Rendre vos pages interactives et dynamiques

VARIABLES FONCTIONS DOM & EVENTS

Niveau Débutant — Suite du Jour 3

Durée estimée 5 – 6 heures

Prérequis Jours 1, 2 & 3 : HTML + CSS

Outils nécessaires VS Code + navigateur web

Objectifs de la leçon

✓ Comprendre ce qu'est JavaScript et son rôle dans le web

✓ Déclarer et utiliser des variables (var, let, const)

✓ Maîtriser les types de données et les opérateurs

✓ Écrire des fonctions et comprendre la portée

✓ Utiliser les structures conditionnelles et les boucles

✓ Manipuler le DOM — modifier une page en temps réel

✓ Réagir aux événements utilisateur (clic, formulaire…)

© Formation Frontend Professionnelle • Tous droits réservés Page 1


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

TABLE DES MATIÈRES

PARTIE 1 — LES BASES DU JAVASCRIPT

1. Qu'est-ce que JavaScript ? 3


2. Intégrer JavaScript dans une page HTML 3
3. Variables — let, const, var 4
4. Types de données 5
5. Opérateurs 6
6. Structures conditionnelles — if / else / switch 7
7. Les boucles — for, while, forEach 8

PARTIE 2 — FONCTIONS & PORTÉE

8. Déclarer et appeler une fonction 9


9. Les fonctions fléchées (arrow functions) 10
10. La portée des variables (scope) 11

PARTIE 3 — LE DOM & LES ÉVÉNEMENTS

11. Qu'est-ce que le DOM ? 12


12. Sélectionner des éléments 12
13. Modifier le contenu et le style 13
14. Les événements (addEventListener) 14
15. Projet : page interactive complète 15
16. Exercices progressifs 17
17. Récapitulatif & cheat sheet 18

© Formation Frontend Professionnelle • Tous droits réservés Page 2


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

PARTIE 1

LES BASES DU JAVASCRIPT


Variables, types, opérateurs, conditions, boucles

1 Qu'est-ce que JavaScript ?

JavaScript est le seul langage de programmation nativement compris par les navigateurs web. Si HTML structure le
contenu et CSS le stylise, JavaScript rend les pages vivantes et interactives : un bouton qui ouvre un menu, un
formulaire qui vérifie les saisies en temps réel, une galerie d'images qui défile, des données qui s'actualisent sans
recharger la page.

JavaScript est aujourd'hui l'un des langages les plus utilisés au monde. Il fonctionne côté client (dans le navigateur) mais
aussi côté serveur grâce à [Link]. Maîtriser JavaScript, c'est ouvrir la porte à l'intégralité du développement web
moderne.

■ Analogie pour bien comprendre

Dans la maison HTML/CSS/JS : HTML c'est la structure (les murs), CSS c'est la décoration (la peinture), et JavaScript
c'est l'électricité et la plomberie — tout ce qui bouge, réagit, et fait fonctionner la maison.

HTML CSS JavaScript

Structure & contenu Présentation & style Interactivité & logique

Les murs de la maison La peinture & décoration L'électricité & plomberie

.html .css .js


Le trio fondamental du développement web

2 Intégrer JavaScript dans une page HTML

Comme pour le CSS, il existe plusieurs façons d'inclure du JavaScript dans une page HTML. La méthode recommandée
est le fichier externe, mais il est important de connaître toutes les approches.

Méthode 1 — JavaScript inline (dans la balise)


On écrit le JS directement dans un attribut d'événement HTML comme onclick. C'est pratique pour tester, mais à éviter
en production — très difficile à maintenir.

[Link] — JavaScript inline (déconseillé)

1 <!-- JS inline dans un attribut HTML -->

2 <button !')">Cliquez-moi</button>

4 <!-- À éviter : mélange HTML et logique JS -->

5 <p = 'red'">Clic pour changer couleur</p>

Méthode 2 — Balise <script> dans le <body>

© Formation Frontend Professionnelle • Tous droits réservés Page 3


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

On place le code JS dans une balise <script> directement dans la page HTML. Acceptable pour de petits scripts ou des
tests rapides.

[Link] — Balise <script>

1 <!DOCTYPE html>

2 <html lang="fr">

3 <body>

4 <h1 id="titre">Bonjour !</h1>


5 <script>
6 // Le script s'exécute quand le navigateur le lit
7 [Link]('La page est chargée');
8 [Link]('titre').textContent = 'Bonjour JS !';
9 </script>
10 </body>

11 </html>

Méthode 3 — Fichier .js externe (LA bonne pratique)


On crée un fichier séparé [Link] et on le relie au HTML avec la balise <script src="..."> placée juste avant la
balise fermante </body>. Pourquoi avant </body> ? Pour que le HTML se charge d'abord, sinon JS essaierait de
manipuler des éléments qui n'existent pas encore.

[Link] — Lien vers le fichier JS externe

1 <!-- Dans [Link] — AVANT </body> -->

2 <body>

3 <h1>Ma page</h1>
4 ...
5 <script src="[Link]"></script>
6 </body>

✓ CONSEIL — L'attribut defer


Depuis HTML5, vous pouvez aussi utiliser l'attribut defer : <script src="[Link]"
defer></script> dans le <head>. defer garantit que le script s'exécute après le chargement
complet du HTML, même s'il est placé en haut de la page. C'est la méthode moderne recommandée.

Méthode Portée Réutilisable ? Recommandé ?

Inline ( 1 élément Non ✗ Éviter

<script> dans body 1 page HTML Non ■■ Petits tests

Fichier .js externe Tout le site Oui ✓ Toujours

© Formation Frontend Professionnelle • Tous droits réservés Page 4


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

3 Variables — let, const, var

Une variable est une boîte dans laquelle on stocke une valeur pour pouvoir la réutiliser plus tard. En JavaScript moderne,
on utilise deux mots-clés pour déclarer des variables : let et const. Le troisième mot-clé, var, est l'ancienne façon de
faire et n'est plus recommandé depuis 2015.

[Link] — Déclarer des variables

1 // const : valeur constante (ne change pas)

2 const prenom = 'Alice';

3 const age = 25;

4 const PI = 3.14159;

6 // let : valeur variable (peut changer)

7 let score = 0;

8 let message = 'Bienvenue !';

10 // On peut changer la valeur d'un let

11 score = 10;

12 score = score + 5; // score vaut maintenant 15


13

14 // ERREUR : on ne peut pas réassigner un const

15 // prenom = 'Bob'; ← Cela provoque une erreur !

La règle d'or : const par défaut, let si nécessaire


En pratique, commencez toujours par const. Si vous réalisez plus tard que la valeur doit changer, passez à let.
N'utilisez jamais var dans du code moderne.

Mot-clé Réassignable ? Portée (scope) Quand l'utiliser ?

const Non Bloc { } Par défaut — toujours

let Oui Bloc { } Compteurs, valeurs qui changent

var Oui Fonction (ancien) À éviter (legacy)

✓ CONVENTION — Nommage des variables


Les noms de variables en JavaScript suivent la convention camelCase : premierMot en minuscule,
MotsSuivants avec majuscule. Exemples : prenom, scoreJoueur, nombreDeTentatives. Les noms ne
peuvent pas commencer par un chiffre et ne doivent pas contenir d'espaces.

© Formation Frontend Professionnelle • Tous droits réservés Page 5


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

4 Types de données

JavaScript est un langage à typage dynamique : vous n'avez pas besoin de déclarer le type d'une variable — le moteur
JS le détecte automatiquement selon la valeur assignée. Il existe 7 types primitifs et 1 type de référence à connaître.

[Link] — Les types de données

1 // STRING (chaîne de caractères) — entre guillemets simples, doubles ou backticks

2 const nom = 'Alice';

3 const phrase = "Bonjour le monde";

4 const template = `Bonjour ${nom} !`; // Template literal (backtick)


5

6 // NUMBER (nombre) — entier ou décimal

7 const age = 30;

8 const prix = 19.99;

9 const negatif = -5;

10

11 // BOOLEAN (booléen) — vrai ou faux

12 const estConnecte = true;

13 const estAdmin = false;

14

15 // NULL — absence intentionnelle de valeur

16 const resultat = null;

17

18 // UNDEFINED — variable déclarée mais sans valeur

19 let futureMesure; // vaut undefined


20

21 // ARRAY (tableau) — liste ordonnée de valeurs

22 const fruits = ['pomme', 'banane', 'cerise'];

23 [Link](fruits[0]); // 'pomme' (index commence à 0)


24

25 // OBJECT (objet) — collection de propriétés clé:valeur

26 const utilisateur = { prenom: 'Alice', age: 30, estAdmin: false };

27 [Link]([Link]); // 'Alice'

Vérifier le type d'une variable avec typeof

[Link] — typeof

1 [Link](typeof 'Bonjour'); // 'string'


2 [Link](typeof 42); // 'number'
3 [Link](typeof true); // 'boolean'
4 [Link](typeof undefined); // 'undefined'
5 [Link](typeof null); // 'object' ← bizarrerie historique de JS !
6 [Link](typeof [1,2,3]); // 'object'
7 [Link](typeof {a: 1}); // 'object'

© Formation Frontend Professionnelle • Tous droits réservés Page 6


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

✓ ASTUCE — Template Literals


Les template literals (backticks `) sont très pratiques pour créer des chaînes dynamiques. Au
lieu d'écrire 'Bonjour ' + prenom + ' !' avec des concaténations, on écrit simplement `Bonjour
${prenom} !`. On peut même y mettre des expressions JavaScript : `2 + 2 = ${2 + 2}`.

© Formation Frontend Professionnelle • Tous droits réservés Page 7


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

5 Opérateurs

Les opérateurs permettent d'effectuer des calculs, de comparer des valeurs et de combiner des conditions. Ils sont la
base de toute logique en JavaScript.

5.1 — Opérateurs arithmétiques

[Link] — Opérateurs arithmétiques

1 const a = 10;

2 const b = 3;

4 [Link](a + b); // 13 — addition


5 [Link](a - b); // 7 — soustraction
6 [Link](a * b); // 30 — multiplication
7 [Link](a / b); // 3.33... — division
8 [Link](a % b); // 1 — modulo (reste de la division)
9 [Link](a ** b); // 1000 — puissance (10 au cube)
10

11 // Opérateurs d'incrémentation / décrémentation

12 let score = 5;

13 score++; // équivaut à score = score + 1 → 6


14 score--; // équivaut à score = score - 1 → 5
15 score += 10; // score = score + 10 → 15

16 score *= 2; // score = score * 2 → 30

5.2 — Opérateurs de comparaison


Attention à la différence entre == (égalité lâche) et === (égalité stricte). En JavaScript moderne, on utilise toujours ===.

[Link] — Opérateurs de comparaison

1 // === vérifie valeur ET type — toujours utiliser celui-là

2 [Link](5 === 5); // true


3 [Link](5 === '5'); // false (number vs string)
4 [Link](5 !== 3); // true (différent strict)
5

6 // Comparaisons numériques

7 [Link](10 > 5); // true


8 [Link](10 < 5); // false
9 [Link](5 >= 5); // true (supérieur ou égal)
10 [Link](3 <= 4); // true (inférieur ou égal)
11

12 // == est dangereux car il convertit les types

13 [Link](5 == '5'); // true ← PIÈGE !


14 // C'est pour ça qu'on utilise toujours ===

5.3 — Opérateurs logiques

© Formation Frontend Professionnelle • Tous droits réservés Page 8


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

[Link] — Opérateurs logiques

1 // && (ET logique) — true si les DEUX conditions sont vraies

2 const age = 20;

3 const aCarteEtudiant = true;

4 [Link](age >= 18 && aCarteEtudiant); // true


5

6 // || (OU logique) — true si AU MOINS UNE condition est vraie

7 const estVIP = false;

8 const aInvitation = true;

9 [Link](estVIP || aInvitation); // true


10

11 // ! (NON logique) — inverse le booléen

12 [Link](!true); // false
13 [Link](!false); // true

© Formation Frontend Professionnelle • Tous droits réservés Page 9


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

6 Structures conditionnelles — if / else / switch

Les conditions permettent à votre programme de prendre des décisions selon la valeur d'une variable ou le résultat d'une
expression.

[Link] — if / else if / else

1 const note = 14;

3 if (note >= 16) {

4 [Link]('Très bien — félicitations !');


5 } else if (note >= 12) {

6 [Link]('Bien — bon travail.');


7 } else if (note >= 10) {

8 [Link]('Passable — vous pouvez mieux faire.');


9 } else {

10 [Link]('Insuffisant — travaillez davantage !');


11 }

12 // Résultat : 'Bien — bon travail.'

L'opérateur ternaire — for les conditions simples


Quand une condition est simple et courte, l'opérateur ternaire est une écriture plus compacte. Sa syntaxe est :
condition ? valeur_si_vrai : valeur_si_faux

[Link] — Opérateur ternaire

1 const age = 20;

3 // Version longue avec if/else

4 let statut;

5 if (age >= 18) {

6 statut = 'Majeur';
7 } else {

8 statut = 'Mineur';
9 }

10

11 // Version courte avec ternaire — même résultat

12 const statut2 = age >= 18 ? 'Majeur' : 'Mineur';

13 [Link](statut2); // 'Majeur'

Le switch — pour de multiples cas précis

© Formation Frontend Professionnelle • Tous droits réservés Page 10


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

[Link] — switch / case

1 const jour = 'Lundi';

3 switch (jour) {

4 case 'Lundi':
5 case 'Mardi':
6 [Link]('Début de semaine');
7 break;
8 case 'Mercredi':
9 [Link]('Milieu de semaine');
10 break;
11 case 'Samedi':
12 case 'Dimanche':
13 [Link]('Week-end !');
14 break;
15 default:
16 [Link]('Jour ordinaire');
17 }

18 // Résultat : 'Début de semaine'

■ ATTENTION — break dans switch


N'oubliez jamais le mot-clé break à la fin de chaque case dans un switch. Sans break,
JavaScript continue d'exécuter les cases suivants — c'est ce qu'on appelle le "fall-through",
et c'est rarement ce que l'on veut.

© Formation Frontend Professionnelle • Tous droits réservés Page 11


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

7 Les boucles — for, while, forEach

Une boucle permet de répéter un bloc de code plusieurs fois sans avoir à le réécrire. C'est l'un des mécanismes les plus
puissants de la programmation.

La boucle for — quand on sait combien de fois répéter

[Link] — Boucle for

1 // Structure : for (initialisation; condition; incrément)

2 for (let i = 0; i < 5; i++) {

3 [Link]('Tour numéro ' + i);


4 }

5 // Affiche : Tour numéro 0, 1, 2, 3, 4

7 // Parcourir un tableau avec for

8 const fruits = ['pomme', 'banane', 'cerise'];

9 for (let i = 0; i < [Link]; i++) {

10 [Link](fruits[i]);
11 }

La boucle for...of — la façon moderne de parcourir un tableau

[Link] — Boucle for...of

1 const fruits = ['pomme', 'banane', 'cerise'];

3 // for...of : plus lisible que le for classique

4 for (const fruit of fruits) {

5 [Link](fruit);
6 }

7 // Affiche : pomme, banane, cerise

La méthode forEach — style fonctionnel

[Link] — forEach

1 const nombres = [1, 2, 3, 4, 5];

3 // forEach reçoit une fonction callback

4 [Link](function(nombre) {

5 [Link](nombre * 2);
6 });

7 // Affiche : 2, 4, 6, 8, 10

9 // Version avec arrow function (plus concise)

10 [Link](n => [Link](n * 2));

© Formation Frontend Professionnelle • Tous droits réservés Page 12


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

La boucle while — quand on ne sait pas à l'avance combien de fois

[Link] — Boucle while

1 let tentatives = 0;

2 let motDePasse = '';

4 // Continue tant que le mot de passe est incorrect

5 while (motDePasse !== 'secret123') {

6 motDePasse = prompt('Entrez le mot de passe :');


7 tentatives++;
8 }

9 [Link](`Correct en ${tentatives} tentative(s) !`);

© Formation Frontend Professionnelle • Tous droits réservés Page 13


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

PARTIE 2

FONCTIONS & PORTÉE


Organiser et réutiliser son code

8 Déclarer et appeler une fonction

Une fonction est un bloc de code réutilisable à qui on donne un nom. Au lieu de réécrire la même logique 10 fois, on
l'écrit une seule fois dans une fonction, puis on l'appelle (l'invoque) autant de fois que nécessaire.

[Link] — Anatomie d'une fonction

1 // Déclaration de la fonction

2 function afficherBonjour(prenom) {

3 const message = `Bonjour, ${prenom} !`;


4 [Link](message);
5 }

7 // Appel de la fonction

8 afficherBonjour('Alice'); // Bonjour, Alice !


9 afficherBonjour('Bob'); // Bonjour, Bob !
10 afficherBonjour('Marie'); // Bonjour, Marie !

Paramètres, arguments et valeur de retour


Un paramètre est le nom de la variable dans la déclaration de la fonction. Un argument est la valeur réelle qu'on passe
lors de l'appel. Le mot-clé return permet à la fonction de renvoyer une valeur.

© Formation Frontend Professionnelle • Tous droits réservés Page 14


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

[Link] — Paramètres et return

1 // Fonction avec 2 paramètres et une valeur de retour

2 function additionner(a, b) {

3 return a + b; // retourne le résultat


4 }

6 const somme = additionner(5, 3);

7 [Link](somme); // 8
8

9 // Paramètres par défaut (si non fournis)

10 function saluer(prenom, langue = 'fr') {

11 if (langue === 'fr') return `Bonjour, ${prenom} !`;


12 if (langue === 'en') return `Hello, ${prenom}!`;
13 return `Hi, ${prenom}!`;
14 }

15

16 [Link](saluer('Alice')); // Bonjour, Alice ! (défaut: fr)


17 [Link](saluer('Bob', 'en')); // Hello, Bob!

© Formation Frontend Professionnelle • Tous droits réservés Page 15


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

9 Les fonctions fléchées (arrow functions)

Introduites avec ES6 (2015), les fonctions fléchées sont une syntaxe plus courte pour écrire des fonctions. Elles sont
aujourd'hui très répandues dans le code JavaScript moderne et dans les frameworks comme React.

[Link] — Fonctions fléchées

1 // Fonction classique

2 function carre(n) {

3 return n * n;
4 }

6 // Arrow function — équivalente, plus courte

7 const carre2 = (n) => {

8 return n * n;
9 };

10

11 // Version ultra-courte (return implicite)

12 const carre3 = n => n * n;

13

14 [Link](carre(5)); // 25
15 [Link](carre2(5)); // 25
16 [Link](carre3(5)); // 25
17

18 // Arrow functions dans les méthodes de tableau

19 const nombres = [1, 2, 3, 4, 5];

20 const doubles = [Link](n => n * 2);

21 [Link](doubles); // [2, 4, 6, 8, 10]


22

23 const pairs = [Link](n => n % 2 === 0);

24 [Link](pairs); // [2, 4]

Situation Syntaxe arrow function Remarque

Plusieurs paramètres (a, b) => a + b Parenthèses obligatoires si 2+ params

Un seul paramètre n => n * 2 Parenthèses optionnelles

Aucun paramètre () => [Link]('ok') Parenthèses vides obligatoires

Corps multi-lignes (a,b) => { ... return x; } Accolades + return explicite

© Formation Frontend Professionnelle • Tous droits réservés Page 16


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

10 La portée des variables (scope)

La portée (scope) définit depuis quel endroit du code une variable est accessible. C'est l'un des concepts qui déroute le
plus les débutants, mais une fois compris, il vous évite de nombreux bugs.

[Link] — Portée globale vs. locale

1 // Variable GLOBALE — accessible partout

2 const nomSite = '[Link]';

4 function afficherNom() {

5 // Variable LOCALE — accessible uniquement dans cette fonction


6 const message = 'Bienvenue sur';
7 [Link](message + ' ' + nomSite); // OK — nomSite est global
8 }

10 afficherNom(); // 'Bienvenue sur [Link]'


11 // [Link](message); ← ERREUR : message n'existe pas ici
12

13 // Portée de bloc avec let et const

14 if (true) {

15 let x = 10;
16 const y = 20;
17 }

18 // [Link](x); ← ERREUR : x n'existe que dans le bloc { }

✓ RÈGLE D'OR — Portée des variables


La règle la plus simple : une variable déclarée avec let ou const n'est visible qu'à
l'intérieur des accolades { } où elle a été créée. C'est pourquoi on dit que let et const ont
une portée de bloc (block scope). Évitez les variables globales autant que possible — elles
peuvent être modifiées de n'importe où dans le code et rendent le débogage très difficile.

© Formation Frontend Professionnelle • Tous droits réservés Page 17


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

PARTIE 3

LE DOM & LES ÉVÉNEMENTS


Manipuler la page HTML en temps réel

11 Qu'est-ce que le DOM ?

Le DOM (Document Object Model) est la représentation en mémoire de votre page HTML, sous forme d'arbre d'objets.
Quand le navigateur lit votre fichier HTML, il construit cet arbre. JavaScript peut ensuite accéder à cet arbre, le lire, le
modifier, ajouter ou supprimer des éléments — c'est cela qui rend les pages interactives.

document

■■

■■ ■■

■ ■■ ■■ ■■ ■■

Représentation simplifiée de l'arbre DOM

12 Sélectionner des éléments

Pour manipuler un élément HTML, il faut d'abord le sélectionner depuis JavaScript. Il existe plusieurs méthodes — voici
les plus importantes à connaître.

[Link] — Sélectionner des éléments du DOM

1 // querySelector — retourne LE PREMIER élément correspondant (CSS selector)

2 const titre = [Link]('h1');

3 const monBouton = [Link]('#btnValider');

4 const premiereLi = [Link]('ul li');

6 // querySelectorAll — retourne TOUS les éléments (NodeList)

7 const tousParagraphes = [Link]('p');

8 const tousLesBoutons = [Link]('.btn');

10 // getElementById — par id (plus rapide mais moins flexible)

11 const header = [Link]('header');

12

13 // Vérifier qu'un élément a bien été trouvé

14 if (titre) {

15 [Link]('Élément trouvé :', titre);


16 } else {

17 [Link]('Élément non trouvé !');


18 }

© Formation Frontend Professionnelle • Tous droits réservés Page 18


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

Méthode Sélecteur Retourne Remarque

querySelector() Sélecteur CSS 1 élément (ou null) Le plus utilisé aujourd'hui

querySelectorAll() Sélecteur CSS NodeList (tous) Itérable avec forEach

getElementById() id (sans #) 1 élément (ou null) Très rapide, id unique

getElementsByClassName() class (sans .) HTMLCollection Ancien, préférez qSA

© Formation Frontend Professionnelle • Tous droits réservés Page 19


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

13 Modifier le contenu et le style

Une fois un élément sélectionné, on peut modifier son contenu, ses attributs et son style CSS directement depuis
JavaScript.

13.1 — Modifier le contenu

[Link] — Modifier contenu et attributs

1 const titre = [Link]('h1');

3 // textContent — modifie le texte brut (sécurisé)

4 [Link] = 'Nouveau titre de la page';

6 // innerHTML — peut insérer du HTML (attention aux injections !)

7 const div = [Link]('.container');

8 [Link] = '<p>Nouveau <strong>paragraphe</strong></p>';

10 // Modifier des attributs

11 const lien = [Link]('a');

12 [Link]('href', '[Link]

13 [Link]('target', '_blank');

14

15 // Modifier la source d'une image

16 const img = [Link]('img');

17 [Link] = '[Link]';

18 [Link] = 'Nouvelle description';

13.2 — Modifier le style CSS

[Link] — Modifier le style CSS via JS

1 const boite = [Link]('.carte');

3 // Modifier une propriété CSS directement

4 [Link] = '#7B1FA2';

5 [Link] = 'white';

6 [Link] = '20px';

7 [Link] = '8px';

9 // Meilleure pratique : ajouter/retirer des classes CSS

10 [Link]('actif'); // ajoute la classe 'actif'


11 [Link]('inactif'); // retire la classe 'inactif'
12 [Link]('ouvert'); // ajoute si absent, retire si présent
13 [Link]('actif'); // retourne true ou false

© Formation Frontend Professionnelle • Tous droits réservés Page 20


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

✓ BONNE PRATIQUE — CSS + JS ensemble


La bonne pratique est de définir les styles dans votre CSS en classes, et de les
ajouter/retirer avec classList depuis JavaScript. Évitez de modifier [Link] directement
— c'est difficile à maintenir. Exemple : en CSS .visible { opacity: 1; } et .cache { opacity:
0; }, puis en JS : [Link]('visible');

© Formation Frontend Professionnelle • Tous droits réservés Page 21


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

14 Les événements (addEventListener)

Un événement est une action de l'utilisateur (clic, frappe clavier, survol…) ou du navigateur (page chargée, image
prête…). JavaScript peut écouter ces événements et y réagir grâce à addEventListener.

[Link] — addEventListener — syntaxe de base

1 // Syntaxe : [Link]('evenement', fonction)

3 const bouton = [Link]('#mon-bouton');

5 [Link]('click', function() {

6 alert('Vous avez cliqué !');


7 });

9 // Avec une arrow function (plus courant en moderne)

10 [Link]('click', () => {

11 [Link]('Clic détecté !');


12 });

13

14 // La fonction reçoit un objet 'event' avec des infos sur l'événement

15 [Link]('click', (event) => {

16 [Link]('Élément cliqué :', [Link]);


17 [Link]('Type d\'événement :', [Link]);
18 });

Les événements les plus utiles


Événement Déclenché quand… Éléments cibles

click L'utilisateur clique Boutons, liens, divs…

input Le contenu d'un champ change input, textarea

submit Un formulaire est soumis form

mouseover / mouseout La souris entre / sort d'un élément Tout élément

keydown / keyup Une touche du clavier est pressée / relâchée document, input

DOMContentLoaded Le HTML est entièrement chargé document

scroll L'utilisateur fait défiler la page window, div scrollable

Exemple complet — événement sur un formulaire

© Formation Frontend Professionnelle • Tous droits réservés Page 22


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

[Link] — Événement submit sur formulaire

1 const formulaire = [Link]('#mon-formulaire');

2 const champNom = [Link]('#nom');

4 [Link]('submit', (event) => {

5 // Empêche le rechargement de la page (comportement par défaut)


6 [Link]();
7

8 const nom = [Link]();


9

10 if (nom === '') {


11 alert('Veuillez entrer votre nom !');
12 return;
13 }
14

15 [Link](`Formulaire envoyé par : ${nom}`);


16 [Link](); // Vide le formulaire
17 });

© Formation Frontend Professionnelle • Tous droits réservés Page 23


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

15 Projet : Page interactive complète

Ce projet reprend la page de présentation créée aux Jours 1 et 2 et lui ajoute une couche d'interactivité JavaScript : un
compteur de clics, un changement de thème et une validation de formulaire.

HTML — Structure de base

[Link] — Structure (extrait)

1 <!DOCTYPE html>

2 <html lang="fr">

3 <head>

4 <meta charset="UTF-8">
5 <title>Ma page interactive</title>
6 <link rel="stylesheet" href="[Link]">
7 </head>

8 <body>

9 <button id="btn-theme">Changer le thème</button>


10 <h1 id="titre">Bonjour !</h1>
11 <button id="btn-compteur">Clics : 0</button>
12

13 <form id="formulaire">
14 <input type="text" id="champ-nom" placeholder="Votre nom">
15 <button type="submit">Envoyer</button>
16 </form>
17 <p id="message-retour"></p>
18

19 <script src="[Link]" defer></script>


20 </body>

21 </html>

CSS — Classes pour les deux thèmes

© Formation Frontend Professionnelle • Tous droits réservés Page 24


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

[Link] — Thème clair et sombre

1 body {

2 font-family: 'Segoe UI', sans-serif;


3 background: #FAFAFA;
4 color: #212121;
5 transition: background 0.3s, color 0.3s;
6 }

8 /* Thème sombre — ajouté / retiré par JS */

9 [Link]-sombre {

10 background: #121212;
11 color: #E0E0E0;
12 }

13

14 #btn-compteur {

15 background: #7B1FA2;
16 color: white;
17 padding: 12px 24px;
18 border: none;
19 border-radius: 8px;
20 cursor: pointer;
21 font-size: 1rem;
22 }

JavaScript — Le fichier [Link] (Partie 1/2 : Compteur et thème)

© Formation Frontend Professionnelle • Tous droits réservés Page 25


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

[Link] — Partie 1/2

1 // 1. COMPTEUR DE CLICS

2 const btnCompteur = [Link]('#btn-compteur');

3 let nombreClics = 0;

5 [Link]('click', () => {

6 nombreClics++;
7 [Link] = `Clics : ${nombreClics}`;
8 if (nombreClics >= 10) {
9 [Link] = '#2E7D32';
10 [Link] = `Champion : ${nombreClics} clics !`;
11 }
12 });

13

14 // 2. BASCULER LE THÈME SOMBRE

15 const btnTheme = [Link]('#btn-theme');

16

17 [Link]('click', () => {

18 [Link]('theme-sombre');
19 const estSombre = [Link]('theme-sombre');
20 [Link] = estSombre ? 'Thème clair' : 'Thème sombre';
21 });

JavaScript — Le fichier [Link] (Partie 2/2 : Validation formulaire)

[Link] — Partie 2/2

1 // 3. VALIDATION DE FORMULAIRE

2 const formulaire = [Link]('#formulaire');

3 const champNom = [Link]('#champ-nom');

4 const messageRetour = [Link]('#message-retour');

6 [Link]('submit', (e) => {

7 [Link]();
8 const nom = [Link]();
9

10 if ([Link] < 2) {
11 [Link] = 'Nom trop court (2 caractères min.)';
12 [Link] = '#C62828';
13 return;
14 }
15

16 [Link] = `Bienvenue, ${nom} !`;


17 [Link] = '#2E7D32';
18 [Link]();
19 });

© Formation Frontend Professionnelle • Tous droits réservés Page 26


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

16 Exercices progressifs

Ces exercices sont classés par difficulté croissante. Pour chacun, ouvrez la console du navigateur (F12) pour vérifier vos
résultats.

Exercice Difficulté Consigne

Déclarez 3 variables (votre prénom, âge, ville) avec const et let. Affichez-les dans la console avec
1 ■
[Link]() et créez une phrase les combinant avec un template literal.

Créez une fonction calculerIMC(poids, taille) qui retourne l'IMC (poids / taille²). Testez-la avec 3 jeux
2 ■
de données différents. Affichez si la personne est en sous-poids, poids normal ou surpoids.

Créez un tableau de 5 prénoms. Parcourez-le avec forEach pour afficher chaque prénom en
3 ■■
majuscules. Utilisez ensuite filter() pour ne garder que les prénoms de plus de 4 lettres.

Créez un bouton HTML. Chaque fois qu'on clique dessus, son texte doit alterner entre 'ON' et 'OFF',
4 ■■
et sa couleur de fond entre vert et rouge. Utilisez [Link]().

Créez une liste de tâches (todo list) : un champ texte + bouton Ajouter. Chaque clic ajoute un dans
5 ■■■
une avec le texte saisi. Ajoutez un bouton Supprimer sur chaque tâche.

Créez un quiz à 3 questions. Chaque question propose 4 boutons réponses. Affichez le score final
Défi final ■■■■
sur 3 à la fin. Bonus : ajoutez un chronomètre de 30 secondes avec setInterval().

© Formation Frontend Professionnelle • Tous droits réservés Page 27


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

17 Récapitulatif & Cheat Sheet

Voici la cheat sheet complète de la leçon. Gardez-la à portée de main pendant vos projets — elle rassemble l'essentiel
de ce que vous avez appris aujourd'hui.

■ Variables & Types


Syntaxe Description Exemple

const x = val Constante — ne change pas const PI = 3.14

let x = val Variable — peut changer let score = 0

typeof x Type d'une valeur typeof 'bonjour' → 'string'

`texte ${var}` Template literal (interpolation) `Bonjour ${prenom} !`

■ Fonctions
Syntaxe Type Exemple

function nom(params) { } Déclaration classique function carre(n) { return n*n; }

const f = (p) => { } Arrow function const double = n => n * 2

f(arg1, arg2) Appel de fonction carre(5) → 25

■ DOM & Événements


Méthode / Propriété Description Exemple

querySelector(sel) Sélectionner 1 élément [Link]('h1')

querySelectorAll(sel) Sélectionner tous les éléments [Link]('li')

.textContent = '...' Modifier le texte [Link] = 'Nouveau'

.innerHTML = '...' Modifier le HTML interne [Link] = 'Gras'

.[Link]/remove/toggle
Gérer les classes CSS [Link]('actif')
()

.[Link] = val Modifier un style CSS directement [Link] = 'red'

.addEventListener(evt, fn) Écouter un événement [Link]('click', fn)

[Link]() Bloquer le comportement par défaut Dans submit pour éviter rechargement

✓ Ce que vous avez appris aujourd'hui


Ce que vous avez appris aujourd'hui : JavaScript est le langage de l'interactivité web. Vous
savez maintenant déclarer des variables avec const et let, utiliser les types string, number et
boolean, écrire des fonctions classiques et fléchées, créer des conditions et des boucles, et —
le plus important — sélectionner des éléments du DOM et réagir aux événements utilisateur. Ces
fondamentaux sont la base de tout ce que vous ferez en JavaScript.

© Formation Frontend Professionnelle • Tous droits réservés Page 28


FORMATION FRONTEND — HTML, CSS & JavaScript Jour 4 · Introduction au JavaScript

JavaScript avancé — Fetch API & JSON · Requêtes asynchrones · async/await ·


Prochain cours — Jour 5 Consommer une API REST et afficher des données dynamiques dans votre page.

© Formation Frontend Professionnelle • Tous droits réservés Page 29

Vous aimerez peut-être aussi