Culture Digitale

Chapitre 3 : JavaScript

Pr. Fakir BENHLIMA

Introduction
JavaScript : Langage Clé du Développement Web Front-End

Rôle de JavaScript
JavaScript est le langage principal pour créer des interactions côté client (front-end) dans les navigateurs. Il permet
des mises à jour dynamiques en temps réel (ex : cartes interactives, validation de formulaires). Bien que des
alternatives existent (VBScript, TypeScript), elles sont finalement compilées en JavaScript pour être comprises par
les navigateurs.

Popularité et Nécessité

•Omniprésence : Intégré nativement dans tous les navigateurs, il est indispensable au fonctionnement de millions
de sites.
•Compatibilité ascendante : Les anciens sites doivent rester fonctionnels, rendant JavaScript irremplaçable.
•Écosystème étendu : Utilisé dans des frameworks (React, Vue), ou côté serveur (Node.js).

2
Introduction

3
Introduction

4
Introduction
Accessibilité

•Aucune configuration complexe : Début possible directement via la console des outils développeurs.

Atouts Professionnels

•Communauté active : Support et ressources (tutoriels, forums).

•Demande sur le marché : Compétence recherchée, avec de nombreuses offres d'emploi.

5
Introduction
Domaines d'Application

JavaScript est un langage multiplateforme utilisé dans divers contextes :

Côté navigateur :

• Gestion d'interactions utilisateur (ex: ajout d'articles dans un panier).

• Animations, validation de formulaires, mises à jour dynamiques.

Côté serveur :

• Communication avec des bases de données.

• Création d'API et logique métier pour applications web.

6
Introduction
Évolution Historique et Défis

•Problèmes de compatibilité navigateurs (années 2000) :

• Différences entre moteurs JavaScript (ex: IE vs Chrome) → code spécifique par navigateur.
• jQuery (2006) : Bibliothèque unifiant les comportements, simplifiant le développement cross-browser.
•Ère des frameworks modernes (post-2010) :
• React (2011) : Réinvente la gestion des interfaces complexes (composants, état dynamique).
• Autres solutions : Angular, Vue, Svelte, etc., répondant à des besoins variés (performances, simplicité).

7
Introduction
Legacy Code et Bonnes Pratiques

•Code historique :
• Présence massive d'anciennes librairies (jQuery) dans des projets maintenus.
• Nécessité de comprendre ces technologies pour intervenir sur du code existant.
•Recommandations
• Maîtrisez les bases du JavaScript avant les frameworks.
• Une solide fondation permet d'apprendre React, Vue, etc. plus facilement.
• Inutile de tout connaître : priorisez les compétences alignées avec vos projets.

8
Introduction
JavaScript : Un langage de scripts interprété

• JavaScript est un langage de programmation interprété, c’est-à-dire qu’il est exécuté directement par le
navigateur web, sans compilation préalable.

• Intégration directe dans le HTML : Les scripts JavaScript peuvent être insérés dans des fichiers HTML via la balise
<script>. Cela permet d’ajouter des comportements dynamiques directement dans la page web.

• Interprétation côté client : Tous les navigateurs modernes intègrent un moteur JavaScript (comme V8 pour
Chrome, SpiderMonkey pour Firefox), ce qui leur permet d'exécuter le code côté client, c’est-à-dire sur
l’ordinateur de l’utilisateur.

9
Introduction
Ce que permet JavaScript

JavaScript joue un rôle clé dans l’interactivité des sites web :

•Agir sur les propriétés des éléments HTML : Il peut modifier le contenu, la taille, la couleur, ou d'autres attributs
des éléments d’une page.

•Manipuler l’arbre DOM (Document Object Model) : JavaScript peut naviguer dans la structure hiérarchique de la
page, ajouter, supprimer ou modifier des éléments dynamiquement.

•Créer de la dynamique : Grâce à ces manipulations, une page HTML devient interactive et réactive. Par exemple,
un menu déroulant, une animation, ou encore une mise à jour automatique de contenu sont rendus possibles via
JavaScript.

10
Introduction
intégration de javascript dans la page html
On utilise l’élément script, dans le corps ou l’en-tête du document.

2 cas de figure possibles :

• code javascript directement placé dans le corps du fichier html :
<script type="text/javascript">
... code javascript ici
</script>
• code javascript dans un fichier séparé précisé par l’attribut src de l’élément
<script src="unFichier.js" type="text/javascript">
</script>

11
Introduction
Premier code JavaScript:
1. Les commentaires en JavaScript
Commentaire monoligne : // Texte ignoré par le navigateur
Commentaire multiligne :
/*
Texte ignoré
sur plusieurs lignes
*/

Utilité :
Documenter le code pour soi ou son équipe.
Désactiver temporairement du code (débogage, tests).
Annoter des questions ou des TODOs.

12
Introduction
Premier code JavaScript:
2. Le point-virgule (;)
• Rôle : Séparer des instructions.
• Insertion Automatique (ASI) : Le navigateur ajoute souvent les ; manquants, mais il est
recommandé de les utiliser pour la clarté.
• Style : L'usage est une préférence d'équipe (facultatif dans certains cas).

3. Utiliser la console du navigateur

Accès :
Clic droit → Inspecter → Onglet Console.
Raccourci : ESC pour ouvrir/fermer la console.
Fonctionnalités :
Exécuter du code directement.
Multi-lignes : Shift + Entrée pour passer à la ligne suivante.
Exécution : Entrée pour lancer le code.

13
Introduction
Étapes principales :
Installation de l’extension Code Runner :
• Ouvrez VS Code.
• Dans la barre latérale gauche, cliquez sur l’icône des extensions.
• Recherchez Code Runner et installez-la.
Installation de Node.js :
• Allez sur nodejs.org et téléchargez la version pour Windows.
• Installez-le en suivant l’assistant d’installation.
Premier fichier JavaScript :
• Créez un nouveau fichier dans VS Code.
• Sélectionnez le langage "JavaScript".
• Tapez du code comme : console.log('Hello World');
• Cliquez sur le bouton "Play" ou utilisez le raccourci Ctrl + Alt + N pour exécuter le code.
• Vous verrez "Hello World" s’afficher dans la console.
À noter :
La commande console.log sert à afficher des messages dans la console, utile pour vérifier le fonctionnement du code.

14
Introduction
Premier code JavaScript:
4. Premier code : console.log()
Afficher un message :
console.log("Hello, World"); // Affiche "Hello, World"
Styliser la sortie :
Utiliser %c et du CSS :
console.log("%cHello, World", "color:red; font-size:18px");

Afficher plusieurs valeurs :

Concaténation (+) : Combine des chaînes.
console.log("Hello " + "World"); // "Hello World"
Virgules (,) : Affiche des valeurs séparées avec espace.
console.log("Hello", "World"); // "Hello World"

15
Types
types primitifs
boolean
• 2 constantes true, false
• opérateurs : négation !, et logique &&, ou logique ||
number
• Le type number représente les nombres entiers ou à virgule flottante (décimaux).
• opérateurs : +, -, *, / (division flottante), % (reste de la division)
• Attention aux précisions en virgule flottante (ex : 0.1 + 0.2 !== 0.3).
• -Infinity, Infinity, NaN
String
• Un string est une chaîne de caractères. Il est utilisé pour stocker des mots, des phrases, ou
toute autre donnée textuelle.
• les chaînes se notent entre " ou ‘ : let s = "exemple"
• opérateur de concaténation : +
• + objet String ⟹ nombreuses méthodes

16
Types
types primitifs
Null – Absence volontaire de valeur
null signifie que la variable a été volontairement vidée ou qu’elle n’a pas de valeur définie par
choix du développeur.
C’est un type en soi, dont la seule valeur possible est null.
Il est utilisé pour réinitialiser ou marquer qu’une valeur est inconnue, mais prévue.
Syntaxe : let note = null;

Undefined – Pas encore défini

undefined signifie qu’une variable a été déclarée, mais qu’elle n’a pas encore reçu de valeur.
JavaScript donne automatiquement la valeur undefined à toute variable déclarée sans
affectation.
Syntaxe :
let x;
console.log(x); // undefined

17
Types
BigInt
BigInt permet de représenter des entiers plus grands que ce que number peut gérer (au-delà
de 2^53 - 1).
Syntaxe : let grandNombre = 1234567890123456789012345678901234567890n;
Détails :
On ajoute un n à la fin du nombre.
Ne peut pas être mélangé avec des number normaux sans conversion.

Symbol – Identifiant unique

Un symbol est un identifiant unique. Même si deux symbols ont la même description, ils sont
toujours différents.
Syntaxe :
let id = Symbol("utilisateur");
Détails :
Utilisé pour créer des clés uniques dans des objets (ex : pour éviter les collisions).
Particulièrement utile dans les bibliothèques ou frameworks.

18
Types
variables
déclaration
Il faut déclarer les variables à l’aide du mot-clef var.
Une variable doit être déclarée avant d’être utilisée.

affectation
L’opérateur d’affectation se note =.
Une variable non initialisée a pour valeur null ou undefined.

19
Fonctions
Fonctions
valeur de type fonction
• le mot-clef function permet de définir une donnée de type fonction,
• on précise entre parenthèses les paramètres formels, séparés par des virgules,
• le corps de la fonction est noté entre accolades,
• la valeur de retour d’une fonction est précisée par return, return n’est pas obligatoire (⇒
valeur retour = undefined)

function(param1, param2, ...) {

... corps de la fonction
return expression;
}

20
Fonctions
fonctions
appel et nommage
• on appelle une fonction en précisant les paramètres effectifs entre parenthèses
• on peut nommer une fonction en définissant une variable dont la valeur est de type
fonction

règle de portée
locale et globale
• toute définition de variable dans une fonction est locale à la fonction
• une variable locale masque une variable globale de même nom

21
Structures
séquence et bloc
séquence
On construit une séquence d’instructions en les séparant par un ;.

bloc d’instructions
Un bloc d’instructions en séquence se note entre accolades.
Un bloc d’instructions est une instruction.

22
Structures
structure conditionnelle
if (condition) {
séquence d’instructions si true
} else {
séquence d’instructions si false
}
var collatz = function(i) {
if (i % 2 == 0) {
return i / 2;
} else {
return 3 * i + 1;
}
}
• la partie else n’est pas obligatoire
• false, 0, "", NaN, null, undefined valent false,
tout le reste vaut true

23
Structures
structures itératives : pour
for (var i = inf; i < max; i = i + 1) { // i = i + 1 s’écrit aussi i++
séquence d’instructions
}

var sommeEntiers = function(borneMax) {

var somme = 0;
for (var i = 0; i < borneMax; i = i + 1) {
somme = somme + i;
}
return somme;
}

sommeEntiers(100); // somme vaut 4950

24
Structures
structures itératives : tant que
while (condition) {
séquence d’instructions
}
var sommeChiffres = function(n) {
var result = 0;
while (n > 0) {
result = result + (n % 10);
n = Math.floor(n / 10);
}
return result;
}
sommeChiffres(12345); // vaut 15
do {
séquence d’instructions
} while (condition)

25
Conversions
conversions de types
• JavaScript est (très) souple sur la notion de typage.
• JavaScript applique « automatiquement » certaines conversions de type sur les valeurs
lorsque le contexte le nécessite :
vers le type boolean
vers le type string
vers le type number
• a une incidence sur la notion d’égalité

26
Conversions

27
Conversions
conversion en booléen

28
Conversions
conversion en nombre
Une chaîne dont les caractères représentent un nombre est convertie en ce nombre
NB : dans une expression avec l’opérateur +, c’est la conversion vers chaîne qui l’emporte
NaN : Not a Number
Valeur de conversion pour toute expression qui ne peut être convertie en un nombre
Peut se tester avec la fonction isNaN
"12.5" * 3; // -> 37.5
"99" - 5; // -> 94
"99" + 5; // -> "995" /!\ (concaténation)

"deux" * 3; // -> NaN

isNaN("deux" * 3); // -> true

29
Conversions
parseInt et parseFloat
• convertissent une chaîne en nombre (entier ou flottant)
• seul le premier nombre dans la chaîne est retourné, les autres caractères (y compris
correspondant à des nombres) sont ignorés
• si le premier caractère ne peut être converti en un nombre, le résultat sera NaN
• les espaces en tête sont ignorés

parseFloat("1.24"); // -> 1.24

parseInt("42"); // -> 42
parseInt("42 est la reponse"); // -> 42
parseInt(" 42 est la reponse"); // -> 42
parseInt("42estlareponse"); // -> 42
parseInt("42 43 44"); // -> 42
parseInt("reponse = 42"); // -> NaN

30
Conversions
égalités étranges
Du fait de la conversion, dans certains cas des valeurs de types différents peuvent être
considérées égales.
1 == "1" // -> true
10 != "10" // -> false
1 == "un" // -> false
0 == false // -> true
"0" == false // -> true /!\ alors que "0" se convertit en true

L’opérateur === teste à la fois le type et la valeur (négation !==).

1 === "1" // -> false
0 === false // -> false
10 === 9 + 1; // -> true
1 !== "1"; // -> true

31
Objets
window et document
Pour un document chargé dans un navigateur, deux variables objet sont définies par défaut :

• window représente la fenêtre du navigateur dans laquelle le document est chargé.

L’objet window est l’objet de base.
Un objet window par onglet.

• document représente le document DOM chargé dans la fenêtre.

32
Objets
premières interactions avec document html
window.alert affiche une « popup » d’information
• window.prompt
Affiche une boîte de dialogue avec une zone de saisie de texte
A pour résultat le texte saisi
Attention : le résultat est de type string, prévoir des conversions avec parseInt ou
parseFloat si nécessaire.

• document.write et document.writeln
écrit du texte dans le flux HTML
le texte écrit est interprété par le navigateur
attention : efface le contenu du document si le flux doit être réouvert
ne pas utiliser pour modifier un document, uniquement lors de sa création !
(en fait ne pas utiliser du tout…)

33
Sélection
sélection d’éléments
Pour manipuler les éléments de la page il faut au préalable les sélectionner.
La sélection d’éléments peut se faire

par son attribut id

par son attribut class
par sa balise
par un sélecteur CSS

34
Sélection
sélection par l’identité
getElementById
La méthode getElementById de l’objet document sélectionne l’unique élément du document
dont l’id est fourni en paramètre, ou null si aucun.

Le résultat est un objet élément (de type HTMLElement)

var element = document.getElementById("menu-perso");

35
Sélection

36
Sélection
sélection par l’attribut classe
getElementsByClassName
La méthode getElementsByClassName sélectionne les éléments dont la classe est fournie en paramètre.
Peut s’invoquer sur l’objet document ou sur un objet élément.
→ Dans le second cas, seuls les éléments descendants sont sélectionnés.
A pour résultat la liste des éléments sélectionnés
→ se manipule comme un tableau non mutable
Cette liste est dynamique (La collection se met automatiquement à jour quand le DOM change)

37
Sélection

38
Sélection

39
Sélection
sélection par balise
getElementsByTagName
La méthode getElementsByTagName sélectionne les éléments dont la balise est fournie en
paramètre.

Elle se comporte comme getElementsByClassName.

40
Sélection

41
Sélection

42
Sélection
Sélection par sélecteurs CSS
querySelectorAll
La méthode querySelectorAll sélectionne les éléments retenus par le sélecteur CSS fourni en
paramètre.

Peut s’invoquer sur l’objet document ou sur un objet élément

→ dans le second cas, seuls les éléments descendants sont sélectionnés

A pour résultat la liste des éléments sélectionnés,

→ cette liste n’est pas dynamique

querySelector
querySelector ne fournit que le premier élément de la liste.

43
Sélection

NB :
Les sélecteurs avec les pseudo-classes :link, :visited et des pseudo-éléments ne sont pas
acceptés
→ La liste résultat est toujours vide

44
Sélection
équivalences des sélecteurs

document.getElementById("unId")
≡
document.querySelector("#unId")

document.getElementsByClassName("uneClasse")
≡
document.querySelectorAll(".uneClasse")

document.getElementsByTagName("uneBalise")
≡
document.querySelectorAll("uneBalise")

45
Sélection
équivalences des sélecteurs

document.getElementById("unId")
≡
document.querySelector("#unId")

document.getElementsByClassName("uneClasse")
≡
document.querySelectorAll(".uneClasse")

document.getElementsByTagName("uneBalise")
≡
document.querySelectorAll("uneBalise")

Remarque :
les listes ne sont pas dynamiques avec querySelectorAll

46
Sélection
Comparaison
querySelectorAll permet de sélectionner plus simplement des éléments :

“la première image contenue dans l’élément d’id section1”

47
Sélection
Comparaison
querySelectorAll permet de réaliser des sélections difficiles autrement :

“tous les éléments de titre h1 et h2”

var lesTitres = document.querySelectorAll("h1,h2");

plutôt que :

var lesH1 = document.getElementsByTagName("h1");

var lesH2 = document.getElementsByTagName("h2");
var lesTitres = lesH1.concat(lesH2);
Ce dernier ne conserve pas l’ordre d’apparition dans le document.

48
Manipulations
propriétés des éléments
Les objets éléments obtenus par sélection possèdent des propriétés manipulables :

attributs
contenu
style CSS

Il est possible d’agir sur ces propriétés après sélection de l’élément.

49
Manipulations
manipuler les attributs

Les attributs HTML sont des propriétés

même nom, en minuscules, avec « conversion camelCase »
l’attribut class devient className
la valeur peut être string, number ou boolean selon l’attribut

On peut également utiliser getAttribute et setAttribute

dans ce cas, la valeur est toujours une chaîne de caractères

50
Manipulations

51
Manipulations
Manipuler le contenu
innerHTML
La propriété innerHTML représente le contenu HTML d’un élément :

en lecture, sa valeur contient les balises HTML

en modification, son contenu est interprété par le navigateur

textContent
La propriété textContent représente le contenu textuel d’un élément :

en lecture, sa valeur ne contient pas les balises HTML

en modification, son contenu n’est pas interprété par le navigateur

52
Manipulations
Exemple
Lecture :

53
Manipulations
Exemple
Modification :

54
Manipulations
Agir sur les propriétés CSS
La propriété style d’un élément permet de modifier les propriétés CSS de cet élément.
On utilise directement le nom de la propriété CSS, après conversion camelCase si nécessaire :

font-size ⟶ fontSize
border-right-style ⟶ borderRightStyle, etc.

Les valeurs sont toujours des chaînes de caractères.

Les unités doivent être précisées (par ex. "12px", "1.5em"...).

55
Manipulations

56
Manipulations
Accès aux valeurs du style
Attention
La propriété style ne permet pas d’accéder aux valeurs des propriétés définies dans une feuille
de style.
Elle donne accès uniquement aux propriétés définies directement dans le document HTML ou
modifiées via style.

Il faut utiliser getComputedStyle pour accéder à toutes les valeurs calculées (qu'elles soient
définies dans une feuille CSS ou héritées).

57
Manipulations
Style « calculé »
getComputedStyle
La méthode getComputedStyle de l’objet window permet d’obtenir un objet regroupant
l’ensemble des valeurs des propriétés CSS appliquées par le navigateur pour un élément.

Remarques :
Les propriétés CSS :
• ont le même nom que précédemment
(pas de raccourcis autorisés — ex. margin interdit, utiliser marginLeft, etc.)

• sont en lecture seule

• s’expriment en unités absolues (px, ...)

58
Manipulations

59
Manipulations
Manipuler les propriétés CSS
Pour manipuler les valeurs des propriétés CSS d’un élément, on utilise :

getComputedStyle pour accéder aux valeurs

style pour modifier les valeurs

60
Evénement
L'événement de clic
Interaction utilisateur la plus courante
Déclenché par un clic de souris ou un appui tactile

Gestionnaire d'événement onclick

Attribut HTML qui exécute du code JavaScript lors du clic
Syntaxe : onclick="code_JavaScript"

Exemple
<input type="button" value="Cliquez-moi" onclick="alert('Vous avez cliqué sur le bouton');">

Éléments HTML supportant onclick

<input type="button">, <button>...</button>
<input type="checkbox">, <input type="radio">
<input type="submit">, <input type="reset">
<a href="#" onclick="...">Lien</a>
Tous les éléments HTML (avec addEventListener en JavaScript)

61
Evénement
Meilleures pratiques

Préférer l'utilisation de addEventListener en JavaScript plutôt que les attributs HTML

Séparer le HTML du JavaScript pour une meilleure maintenance

Exemple:
<button id="monBouton">Cliquez-moi</button>
<script>
document.getElementById('monBouton').addEventListener('click', function() {
alert('Vous avez cliqué sur le bouton');
});
</script>

62
Exercices
Exercice 1
Créer un compteur interactif avec des boutons pour augmenter, diminuer et réinitialiser la valeur.

63
Exercices
Exercice 2
Objectif : Créer une calculatrice simple qui peut effectuer les quatre opérations arithmétiques de base.
• Créer une interface avec deux champs pour les nombres et des boutons pour les 4 opérations
• Afficher le résultat lorsqu'une opération est sélectionnée

64
Exercices
Exercice 3
Créez un formulaire avec des champs pour le nom, l'email et un
mot de passe. Validez que :
• Le nom a plus de 3 caractères
• L'email contient @ et un domaine
• Le mot de passe a au moins 8 caractères
Affichez des messages d'erreur appropriés

65
Exercices
Correction Exercice 1

66
Exercices
Correction Exercice 1

67
Exercices
Correction Exercice 1

68
Exercices
Correction Exercice 1

69
Exercices
Correction Exercice 1

70
Exercices
Correction Exercice 1

71
Exercices
Correction Exercice 2

72
Exercices
Correction Exercice 2

73
Exercices
Correction Exercice 2

74
Exercices
Correction Exercice 2

75
Exercices
Correction Exercice 2

76
Exercices
Correction Exercice 2

77
Exercices
Correction Exercice 2

78
Exercices
Correction Exercice 2

79
Les structures de données avancées
Tableaux (Arrays)
Les tableaux sont fondamentaux en développement front-end pour stocker et manipuler des collections de
données comme des éléments DOM ou des données utilisateur.

80
Les structures de données avancées
Tableaux (Arrays)
Les tableaux sont fondamentaux en développement front-end pour stocker et manipuler des collections de
données comme des éléments DOM ou des données utilisateur.

81
Les structures de données avancées
Tableaux (Arrays)
Les tableaux sont fondamentaux en développement front-end pour stocker et manipuler des collections de
données comme des éléments DOM ou des données utilisateur.

82
Les structures de données avancées
Tableaux (Arrays)
Les tableaux sont fondamentaux en développement front-end pour stocker et manipuler des collections de
données comme des éléments DOM ou des données utilisateur.

83
Les structures de données avancées
Objets (Objects)
Les objets sont des collections de paires clé-valeur largement utilisées en développement front-end.

84
Les structures de données avancées
Objets (Objects)
Les objets sont des collections de paires clé-valeur largement utilisées en développement front-end.

85
Les structures de données avancées
Objets (Objects)
Les objets sont des collections de paires clé-valeur largement utilisées en développement front-end.

86
Les structures de données avancées
Exercice 1 :

87
Les structures de données avancées
Exercice 1 :

88
Les structures de données avancées
Exercice 1 :

89
Les structures de données avancées
Exercice 1 :

90
Les structures de données avancées
Exercice 1 :

91
Les structures de données avancées
Exercice 1 :

92
Les structures de données avancées
Exercice 1 :

93
Les structures de données avancées
Exercice 1 :

94
Les structures de données avancées
Exercice 1 :

95
Les structures de données avancées
Exercice 1 :

96
Culture Digitale

Chapitre 3 : JavaScript

Pr. Fakir BENHLIMA