Programmation Web 2 - LANGAGE JAVASCRIPT

Support de cours

2025
Programmation Web 2
LANGAGE JAVASCRIPT – FILIÈRE TC-MIP, SEMESTRE 4

YOUSSOUF EL ALLIOUI
FPK – USMS
[email protected]

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 1 / 83

Avant-propos
Le présent support de cours est destiné aux étudiants de la Filière Techniques de
Communication – Mathématiques et Informatique pour l’Ingénieur (TC-MIP), en quatrième
semestre (S4), à la Faculté Polydisciplinaire de Khouribga (FPK), relevant de l’Université
Sultan Moulay Slimane (USMS). Il accompagne le module « Programmation Web 2 : Langage
JavaScript », qui constitue une étape fondamentale dans l’apprentissage des technologies du
web.
L’objectif principal de ce support est de fournir aux étudiants une compréhension solide
du langage JavaScript et de son interaction avec le Document Object Model (DOM). Le cours
est organisé en deux grandes parties :
1. JavaScript Fondamentaux : acquisition des bases du langage (syntaxe, variables, types
de données, structures de contrôle, fonctions, objets et tableaux) nécessaires pour écrire
des scripts clairs et efficaces.
2. DOM et Interactions dynamiques : manipulation structurée du DOM pour modifier le
contenu et le style des pages, gérer les événements utilisateurs et créer des interfaces
interactives.
Conçu avec une approche progressive et pratique, ce support alterne des explications
théoriques, des exemples illustratifs et des exercices pour favoriser l’assimilation et encourager
l’expérimentation. Il constitue également une base de référence pour aller plus loin vers des
thématiques avancées telles que l’utilisation des API modernes, des frameworks
JavaScript ou encore l’optimisation des performances web.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 2 / 83

Table des matières
Avant-propos ____________________________________________________________________ 1
Table des matières _______________________________________________________________ 2
Introduction générale ____________________________________________________________ 4
Partie I : JavaScript Fondamentaux __________________________________ 5
Javascript : Introduction ________________________________________________________ 6
Environnement de développement JavaScript ___________________________________ 7
Où placer le code JavaScript ? (<script>) ______________________________________ 9
Sortie JavaScript (Output) ______________________________________________________ 13
Instructions JavaScript (Statements) _________________________________________ 16
Syntaxe JavaScript ____________________________________________________________ 17
Types de données en JavaScript _______________________________________________ 20
Variables en JavaScript ________________________________________________________ 22
Les opérateurs en JavaScript __________________________________________________ 28
Les chaînes de caractères (strings) en JavaScript ____________________________ 31
Les nombres en javascript _____________________________________________________ 37
Les Instructions de Test et les Boucles en JavaScript ___________________________ 44
Les functions en Javascript ____________________________________________________ 46
Les Objets en JavaScript _______________________________________________________ 48
Les tableaux en Javascript _____________________________________________________ 52
Partie II : DOM (Document Object Model) ____________________________ 58
Qu’est-ce que le DOM ? _______________________________________________________ 59
Méthodes du DOM ____________________________________________________________ 60
Objet Document (Document) __________________________________________________ 61
DOM Elements ________________________________________________________________ 63
DOM – Modification du contenu HTML __________________________________________ 65

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 3 / 83
Formulaires (DOM Forms) _____________________________________________________ 67
DOM – Modification des styles CSS ____________________________________________ 69
DOM – Animations _____________________________________________________________ 70
DOM – Événements ____________________________________________________________ 72
DOM – Gestionnaires d’événements avancés (addEventListener) _______________ 74
DOM – Navigation dans l’arbre des nœuds ______________________________________ 76
Ajouter et supprimer des nœuds (éléments HTML) ______________________________ 78
Collections DOM ______________________________________________________________ 80
NodeList ______________________________________________________________________ 81
Conclusion générale et perspectives _______________________________________________ 83

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 4 / 83

Introduction générale
Le langage JavaScript occupe aujourd’hui une place centrale dans le développement web
moderne. Conçu à l’origine pour apporter de l’interactivité aux pages HTML, il est devenu, au
fil des années, un langage complet, puissant et incontournable pour la création d’applications
dynamiques. Sa polyvalence lui permet non seulement d’animer les interfaces utilisateur dans
le navigateur, mais également, grâce à l’évolution de ses standards (ECMAScript), de
s’exécuter côté serveur et de dialoguer avec des services distants.
Ce support de cours s’adresse principalement aux étudiants souhaitant acquérir des bases
solides en programmation JavaScript et comprendre son rôle clé dans la manipulation du
Document Object Model (DOM). La première partie est consacrée aux fondamentaux du
langage : syntaxe, variables, structures de contrôle, fonctions, objets et tableaux. La seconde
partie est dédiée au DOM, l’interface qui permet à JavaScript d’interagir directement avec les
éléments HTML, de modifier dynamiquement le contenu et le style, de gérer les événements et
de créer des animations interactives.
Grâce à une approche progressive et à des exemples pratiques, ce cours vise à fournir aux
apprenants les compétences nécessaires pour concevoir des pages web interactives et
évolutives, en s’appuyant sur les bonnes pratiques de développement modernes.

Partie I
JavaScript Fondamentaux
JavaScript est le langage de programmation incontournable du
web moderne, permettant d’animer et de rendre interactives les
pages HTML. Dans cette première partie, nous poserons les
bases indispensables : nous découvrirons la syntaxe du langage,
les types de données et les structures de contrôle, ainsi que les
mécanismes de portée et d’héritage qui régissent les variables et
les fonctions. Vous apprendrez également à manipuler les objets
natifs et les tableaux, et à gérer l’asynchronisme par le biais des
temporisateurs et des Promesses. L’objectif est de vous fournir
une solide maîtrise de JavaScript « vanilla », avant d’aborder
son application directe au sein du navigateur.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 6 / 83
Javascript : Introduction
Présentation Générale
• JavaScript est le langage de programmation le plus populaire au monde.
• Il constitue le langage de programmation du Web et se distingue par sa facilité
d’apprentissage.
• Le présent tutoriel vous guide de l’initiation aux notions de base jusqu’aux concepts
avancés.
Pourquoi Étudier JavaScript ?
JavaScript est l'une des trois technologies fondamentales que tout développeur web doit
maîtriser :
• HTML : définit le contenu des pages web.
• CSS : structure et met en forme la présentation des pages.
• JavaScript : programme le comportement et la dynamique des pages.
Évolution et Versions de JavaScript
• JavaScript Originel : ES1, ES2, ES3 (1997-1999) - Les premières versions du standard.
• Première Révision Majeure : ES5 (2009) - Introduction d'améliorations significatives et
de nouvelles fonctionnalités.
• Seconde Révision : ES6 / ECMAScript 2015 - Version majeure ayant introduit des
fonctionnalités modernes comme les classes et les modules.
• Ajouts Annuels : ECMAScript 2016, 2017... 2022 - Évolutions continues du langage
avec des ajouts réguliers de nouvelles fonctionnalités.
Capacités principales de JavaScript
Le JavaScript permet de :
• Mettre à jour et modifier dynamiquement le HTML et le CSS
• Effectuer des calculs
• Manipuler et valider des données
Questions Fréquentes
• Comment obtenir JavaScript ?
• Où télécharger JavaScript ?
• JavaScript est-il gratuit ?

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 7 / 83
Réponses :
• Pas de téléchargement nécessaire: Vous n'avez pas besoin de télécharger ou d'installer
JavaScript. JavaScript est déjà intégré et fonctionne nativement dans votre navigateur
web, que ce soit sur votre ordinateur, tablette ou smartphone.
• Gratuit et accessible: JavaScript est un langage gratuit et accessible à tous. Vous pouvez
l'utiliser librement pour vos projets web.
Environnement de développement JavaScript
Qu'est-ce qu'un environnement de développement ?
• Définition :
• Ensemble d’outils (éditeur de code, navigateur, console) utilisés pour écrire, tester et
déboguer du code.
• Importance :
• Améliore la productivité et la qualité du code.
• Spécificité pour JavaScript :
• Configuration minimale requise :
o Un éditeur de code
o Un navigateur web moderne
Composants clés de l'environnement JavaScript
L'éditeur de code : Votre outil principal
Fonctionnalités essentielles :
• Coloration syntaxique : Met en évidence les éléments du code pour faciliter la lecture
et la détection des erreurs.
• Indentation automatique : Structure le code de manière lisible.
• Autocomplétion : Propose des suggestions pour accélérer la saisie et réduire les fautes.
• Numérotation des lignes : Simplifie la navigation et le repérage des erreurs.
• Recherche et remplacement : Permet de modifier rapidement des segments de code.
• Gestion de projets : Organise et structure plusieurs fichiers.
Choisir un éditeur de code
• Critères de choix :
o Facilité d’utilisation, personnalisation, support des extensions pour JavaScript.
• Éditeurs recommandés :
Nom Plateforme Remarques

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 8 / 83
Visual Studio Code Windows, macOS, Linux Gratuit, riche en extensions
Sublime Text Windows, macOS, Linux Rapide, version d'évaluation gratuite
Atom Windows, macOS, Linux Open source, hautement personnalisable
Notepad++ Windows Léger, idéal pour un usage simple
TextEdit (Mac) / Gedit (Linux) macOS / Linux Basique, recommandé pour du code simple
Le navigateur web : Exécution et test du code
• Rôle :
o Interpréter et exécuter le code JavaScript pour afficher le résultat dans une
page web.
• Méthodes de test :
o Fichier HTML : Intégrer le code dans une page HTML via la
balise <script> et l’ouvrir avec le navigateur.
o Console JavaScript : Tester et déboguer le code en temps réel.
Accéder à la console JavaScript du navigateur
• Méthodes d'ouverture :
o Navigateurs (Chrome, Firefox, Edge, Opera) :
§ Raccourci : Ctrl + Maj + J (Windows/Linux) ou Cmd + Option +
J (Mac)
§ Ou via clic droit > « Inspecter » > onglet « Console »
o Safari (macOS) :
§ Activer le menu « Développement » dans les préférences, puis
utiliser Cmd + Option + C
• Interface :
o Zone d'affichage : Affiche les erreurs, messages et résultats
(avec console.log(), etc.)
o Ligne de commande : Permet d'exécuter du code JavaScript directement
Configuration minimale pour démarrer
• Configuration requise :
o Un éditeur de code (exemple : VS Code)
o Un navigateur web moderne
• Avantage :
o Aucune configuration complexe n'est nécessaire pour commencer à développer
en JavaScript.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 9 / 83
Où placer le code JavaScript ? (<script>)
La balise <script>
En HTML, le code JavaScript est inséré entre les balises <script> et </script>.
Exemple :
<script>
document.getElementById("demo").innerHTML = "Mon premier JavaScript" ;
</script>
• Attribut type="text/javascript" (obsolète): Dans les anciens exemples JavaScript,
vous pourriez rencontrer l'attribut type="text/javascript" dans la balise <script>.
Cependant, cet attribut est désormais optionnel car JavaScript est le langage de script
par défaut en HTML5.
Fonctions et événements JavaScript
• Fonction JavaScript: Une fonction JavaScript est un bloc de code JavaScript qui peut
être exécuté "lorsqu'il est appelé". Les fonctions sont essentielles pour organiser et
réutiliser le code.
• Événements: Une fonction peut être déclenchée (appelée) lorsqu'un événement se
produit, comme un clic de l'utilisateur sur un bouton. Les événements rendent les pages
web interactives.
NB : Vous en apprendrez davantage sur les fonctions et les événements dans les chapitres
ultérieurs.
Emplacements possibles de scripts
Les scripts peuvent être placés :
• Dans la section <head>
• Dans la section <body>
• Dans les deux sections
• Dans des fichiers externes (extension .js)
JavaScript dans <head> ou <body>
Vous pouvez placer un nombre quelconque de balises <script> dans un document HTML.
• Flexibilité de placement: Les scripts JavaScript peuvent être placés dans la
section <body>, dans la section <head> ou dans les deux sections d'une page HTML.
JavaScript dans <head>
Placer des scripts dans la section <head> est une pratique courante, notamment pour les
fonctions qui doivent être définies avant d'être utilisées dans le corps de la page.
Exemple :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 10 / 83
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraphe modifié." ;
}
</script>
</head>
<body>

<h2>Démo JavaScript dans le Head </h2>

<p id="demo">Un paragraphe</p>
<button type="button" onclick="myFunction()">Essayez</button>

</body>
</html>
Explication : Dans cet exemple, la fonction JavaScript myFunction() est définie dans la
section <head>. Elle est invoquée lorsqu'un bouton est cliqué dans le <body>.
JavaScript dans <body>
Les scripts peuvent également être placés directement dans la section <body>.
Exemple :
<!DOCTYPE html>
<html>
<body>

<h2>Démo JavaScript dans le Body </h2>

<p id="demo">Un paragraphe</p>

<button type="button" onclick="myFunction()">Essayez</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraphe modifié." ;
}
</script>

</body>
</html>
Explication : Ici, la fonction myFunction() est définie à la fin du <body>. Le résultat est
identique à l'exemple précédent.
NB : Placer les scripts à la fin de l'élément <body> peut améliorer la vitesse d'affichage de la
page. En effet, l'interprétation des scripts peut parfois ralentir le rendu initial de la page. En
plaçant les scripts en bas, le contenu principal de la page (HTML et CSS) se charge plus
rapidement, améliorant l'expérience utilisateur.
JavaScript externe
Les scripts JavaScript peuvent également être stockés dans des fichiers externes séparés.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 11 / 83
• Fichier externe (.js): Les fichiers JavaScript externes ont l'extension .js.
Exemple de fichier externe : myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraphe modifié." ;
}
• Réutilisation du code: Les scripts externes sont particulièrement utiles lorsque le même
code JavaScript est utilisé sur plusieurs pages web. Ils favorisent la réutilisation et la
maintenance du code.
Pour utiliser un script externe, utilisez l'attribut src de la balise <script> et spécifiez le
chemin vers le fichier .js.
Exemple :
<script src="myScript.js"></script>
• Placement flexible: Vous pouvez placer la référence à un script externe dans la
section <head> ou <body>, selon vos besoins. Le script se comportera comme s'il était
directement inclus à l'endroit où la balise <script> est placée.
• Contenu de la balise <script>: Les balises <script> qui référencent un fichier externe
ne doivent pas contenir de code JavaScript directement entre les
balises <script> et </script>.
Avantages du JavaScript externe
L'utilisation de fichiers JavaScript externes présente plusieurs avantages significatifs :
• Séparation du HTML et du code JavaScript: Améliore l'organisation et la lisibilité du
code.
• Facilité de lecture et de maintenance: Rend le code HTML et JavaScript plus faciles à
comprendre et à maintenir séparément.
• Mise en cache des fichiers JavaScript: Les fichiers JavaScript externes peuvent être mis
en cache par le navigateur. Cela signifie que si le même fichier .js est utilisé sur
plusieurs pages du même site web, il ne sera téléchargé qu'une seule fois, accélérant
ainsi le chargement des pages suivantes.
Pour ajouter plusieurs fichiers de script à une page, utilisez simplement plusieurs
balises <script> :
Exemple :
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Références externes
Un script externe peut être référencé de trois manières différentes :
• URL complète (adresse web complète)
• Chemin de fichier (chemin relatif)
• Sans chemin (dans le même répertoire)

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 12 / 83
• URL complète :
<script src="https://www.monsite.com/js/myScript.js" ></script>
• Chemin de fichier :
<script src="/js/myScript.js"></script>
• Sans chemin :
<script src="myScript.js"></script>
NB : Vous trouverez plus d'informations sur les chemins de fichiers dans le chapitre sur les
chemins de fichiers HTML.
Trois zones d'interaction avec JavaScript
JavaScript permet d'interagir avec trois zones principales de votre environnement web :
1. La page HTML (document) :
L'objet document offre un accès direct à la structure de la page HTML. Grâce à lui,
vous pouvez modifier la page en ajoutant, par exemple, du texte avec la
méthode write.
Exemple :
document.write("hello world");
2. La console (console) :
La console est un outil intégré à la plupart des navigateurs qui permet de visualiser et
de tester des commandes JavaScript. Vous pouvez écrire des commandes dans votre
éditeur de code et également les exécuter directement dans la console grâce à
l'objet console.
Exemple :
console.log("hello world");
3. Le navigateur ( window) :
L'objet window représente la fenêtre du navigateur et permet d'interagir avec elle. Par
exemple, pour afficher une boîte de dialogue contenant un message, vous pouvez utiliser
la méthode alert de l'objet window.
Exemple :
window.alert("hello world");
Différences entre document, console et window
• document :
Il s'agit de l'interface permettant d'accéder et de manipuler la page HTML. Lorsqu'une
page HTML est chargée, le navigateur crée un document qui contient l'élément <html>,
lui-même subdivisé en <head> et <body> (avec leur contenu, par exemple
: <meta>, <title>, <h1>, <script>, etc.).

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 13 / 83
• console :
La console est l'outil où vous pouvez afficher des messages, des erreurs ou des
informations utiles pendant le développement. Vous pouvez y envoyer des messages
via des commandes comme console.log(). Cela permet également de tester
rapidement des extraits de code sans modifier directement la page HTML.
• window :
L'objet window représente la fenêtre du navigateur et regroupe toutes les propriétés et
méthodes globales. Il permet d'interagir avec le navigateur lui-même, par exemple pour
afficher des alertes ou rediriger vers une autre page.
Sortie JavaScript (Output)
JavaScript offre différentes manières "d'afficher" des données (sortie) :
• innerHTML:
o Écrire dans un élément HTML existant.
• document.write() :
o Écrit directement dans le document HTML (à privilégier uniquement pour des
tests).
• window.alert() ou alert() :
o Affiche une boîte de dialogue contenant des informations.
• console.log() :
o Permet d’afficher des messages dans la console du navigateur (utile pour le
débogage).
• Impression d’une Page via JavaScript
o La méthode window.print() lance l’impression du contenu de la fenêtre
courante.
Utilisation de innerHTML
Pour accéder à un élément HTML, JavaScript peut utiliser la
méthode document.getElementById(id) .
• document.getElementById(id) : Permet de sélectionner un élément HTML en
utilisant son attribut id.
• innerHTML: La propriété innerHTML définit le contenu HTML de l'élément sélectionné.
Exemple :
<!DOCTYPE html>
<html>
<body>

<h1>Ma première page web</h1>
<p>Mon premier paragraphe.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 14 / 83

</body>
</html>
• Affichage dynamique de données: Modifier la propriété innerHTML d'un élément
HTML est une méthode courante pour afficher des données de manière dynamique sur
une page web.
Utilisation de document.write()
La méthode document.write() est pratique à des fins de test et de débogage, mais son
utilisation en production est généralement déconseillée.
Exemple :
<!DOCTYPE html>
<html>
<body>

<h1>Ma première page web</h1>
<p>Mon premier paragraphe.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>
• Attention : Effacement du HTML existant : L'utilisation
de document.write() après le chargement complet du document HTML supprimera
tout le HTML existant sur la page.
Exemple de suppression accidentelle :
<!DOCTYPE html>
<html>
<body>

<h1>Ma première page web</h1>
<p>Mon premier paragraphe.</p>

<button type="button" onclick="document.write(5 + 6)">Essayez</button>

</body>
</html>
Dans cet exemple, cliquer sur le bouton effacera toute la page HTML et affichera uniquement
le résultat de 5 + 6.
• Utilisation principale : Tests: En raison de ce comportement potentiellement
destructeur, document.write()doit être principalement utilisé pour des tests rapides
et du débogage pendant le développement.
Utilisation de window.alert()
Vous pouvez utiliser une boîte de dialogue d'alerte pour afficher des données à l'utilisateur.
Exemple :
<!DOCTYPE html>
<html>
<body>

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 15 / 83
<h1>Ma première page web</h1>
<p>Mon premier paragraphe.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
• window optionnel: Vous pouvez omettre le mot-clé window devant alert(). En
JavaScript, l'objet window est l'objet global par défaut. Les variables, propriétés et
méthodes appartiennent par défaut à l'objet window. Ainsi, spécifier window est
optionnel.
Exemple (sans window) :
<!DOCTYPE html>
<html>
<body>

<h1>Ma première page web</h1>
<p>Mon premier paragraphe.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>
Utilisation de console.log()
La méthode console.log() est un outil essentiel pour le débogage en JavaScript. Elle permet
d'afficher des informations dans la console du navigateur, invisible pour l'utilisateur final mais
très utile pour le développeur.
Exemple :
<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>
• Débogage: console.log() est principalement utilisé pour le débogage du code
JavaScript. Elle vous permet d'afficher des valeurs de variables, des messages d'état, et
de suivre le déroulement de votre programme.
(Vous en apprendrez plus sur le débogage dans un chapitre ultérieur.)
Impression JavaScript
JavaScript lui-même ne possède pas d'objet ou de méthode d'impression intégrés pour interagir
directement avec les périphériques de sortie (imprimantes).

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 16 / 83
NB : JavaScript s'exécute dans le navigateur et n'a pas d'accès direct au système de fichiers ou
aux périphériques de sortie de l'ordinateur pour des raisons de sécurité.
La seule exception est la méthode window.print(). Elle permet de déclencher la boîte de
dialogue d'impression du navigateur, offrant à l'utilisateur la possibilité d'imprimer le contenu
de la page web actuelle.
Exemple :
<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Imprimer cette page</button>

</body>
</html>
Instructions JavaScript (Statements)
Instructions
• Un programme JavaScript se compose d’instructions exécutées dans l’ordre
d’apparition.
Exemple de déclarations et d’affectations :
let a, b, c; // Déclaration de variables
a = 5; // Affectation de la valeur 5 à a
b = 6; // Affectation de la valeur 6 à b
c = a + b; // Calcul de la somme
Ponctuation et Espacement
• Le point-virgule (;) est utilisé pour séparer les instructions.
• Il est recommandé d’ajouter des espaces autour des opérateurs (comme =, +, -, *, /) pour
améliorer la lisibilité.
Blocs de Code
• Les blocs de code, délimités par des accolades { ... }, permettent de regrouper
plusieurs instructions (par exemple, au sein d’une fonction).
Les Mots-clés Réservés
• Certains mots sont réservés et ne peuvent être employés comme noms de variables.
Tableau récapitulatif de quelques mots-clés :
Mot-clé Description
var Déclaration d'une variable (ancienne pratique)
let Déclaration d'une variable à portée de bloc

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 17 / 83
const Déclaration d'une constante
if Structure conditionnelle
switch Permet de traiter plusieurs cas
for Structure de boucle itérative
function Déclaration d'une fonction
return Renvoie une valeur et termine l'exécution d'une fonction
try Mise en œuvre de la gestion des erreurs

NB : Les mots-clés JavaScript sont des mots réservés et ne peuvent pas être utilisés comme noms
de variables.
Conclusion
• JavaScript est un outil indispensable pour le développement Web moderne, offrant à la
fois flexibilité et interactivité.
• Sa capacité à manipuler le contenu, les attributs et les styles des pages web en fait un
langage idéal pour créer des interfaces dynamiques.
• La maîtrise de JavaScript s’obtient grâce à une pratique régulière et à l’expérimentation
avec de nombreux exemples concrets.
• Un environnement de développement moderne (éditeur, console, intégration
via <script>) est indispensable pour coder efficacement en JavaScript.
Syntaxe JavaScript
La syntaxe JavaScript est l’ensemble des règles qui régissent la construction des programmes
dans ce langage. Elle définit la manière dont on déclare les variables, affecte des valeurs, utilise
les opérateurs et structure le code.
Règles de Base
Déclaration et Affectation de Variables :
Pour créer et utiliser des variables, on utilise principalement les mots-clés var, let ou const :
Déclaration :
var x;
let y;
Affectation et utilisation :
x = 5;
y = 6;
let z = x + y;

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 18 / 83
Expressions
Une expression est une combinaison de valeurs, de variables et d’opérateurs qui s’évalue en
une valeur.
Exemple numérique :
5 * 10 // S'évalue à 50
Exemple avec des chaînes de caractères :
"Youssouf" + " " + "EL ALLIOUI" // S'évalue à "Youssouf EL ALLIOUI"
Valeurs et Littéraux
JavaScript distingue deux types de valeurs :
• Valeurs Fixes (Littéraux)
o Nombres :
Les nombres peuvent être écrits avec ou sans décimales.
§ 10.50
§ 1001
o Chaînes de Caractères :
Les textes doivent être encadrés par des guillemets doubles ou simples.
§ "Youssouf"
§ 'Leila'
• Valeurs Variables
o Les variables stockent des données pouvant varier au cours de l’exécution du
programme.
o Elles sont créées à l’aide des mots-clés var, let ou const et reçoivent une
valeur via l’opérateur d’affectation (=).
Opérateurs
Opérateurs Arithmétiques :
Utilisés pour effectuer des calculs, par exemple :
(5 + 6) * 10
Opérateur d’Affectation :
Sert à assigner une valeur à une variable.
let x, y;
x = 5;
y = 6;
Mots-clés
Les mots-clés définissent les actions à exécuter et la création d’éléments dans le code. Par
exemple :
• Déclaration de Variables :
o Avec let :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 19 / 83
let x, y;
x = 5 + 6;
y = x * 10;
o Avec var :
var x, y;
x = 5 + 6;
y = x * 10;
NB : Les comportements de var et let diffèrent dans leur portée, mais ces exemples
produisent un résultat similaire.
Commentaires
Les commentaires permettent d’expliquer le code ou d’empêcher temporairement son
exécution. Ils ne sont pas interprétés par le moteur JavaScript.
• Commentaires sur une ligne : Débutent par //
let x = 5; // Cette ligne est exécutée
// x = 6; // Cette ligne ne sera pas exécutée
• Commentaires multi-lignes : Encadrés par /* et */
/*
Le code ci-dessous modifie le contenu d'un élément HTML.
*/
document.getElementById("myH").innerHTML = "My First Page";
• Utilisation pour Désactiver l'Exécution : On peut ajouter // devant une ligne de code
ou encadrer plusieurs lignes avec /* ... */ pour les commenter lors des tests.
Identificateurs (Noms)
Les identificateurs servent à nommer les variables, fonctions et autres entités dans le code. Ils
doivent respecter certaines règles :
• Règles de Déclaration :
o Doivent débuter par une lettre (A-Z, a-z), un dollar ($) ou un underscore (_).
o Les caractères suivants peuvent être des lettres, des chiffres, des underscores ou
des dollars.
o Interdiction : Un identificateur ne peut pas commencer par un chiffre.
• Sensibilité à la Casse : JavaScript distingue les majuscules et les minuscules.
let lastName, lastname;
lastName = "Doe";
lastname = "Peterson";
// "lastName" et "lastname" sont deux variables distinctes.
Conventions de Nomination
Différentes conventions sont utilisées pour nommer les identificateurs :
Méthode Exemple Remarques
Underscore first_name,
last_name
Utilise le caractère _ pour séparer les mots.
Upper Camel Case
(PascalCase)
FirstName,
LastName
Chaque mot commence par une majuscule.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 20 / 83
Lower Camel Case firstName,
lastName
Le premier mot commence par une minuscule, les suivants
par une majuscule. (Pratique courante en JavaScript.)
NB : Les tirets ne sont pas autorisés car ils sont interprétés comme l’opérateur de soustraction.
Jeu de Caractères
JavaScript utilise le jeu de caractères Unicode, qui permet de représenter la quasi-totalité des
caractères, symboles et ponctuations utilisés dans le monde.
Types de données en JavaScript
Les types fondamentaux
JavaScript définit huit types de données principaux :
• String (chaîne de caractères)
• Number (nombre)
• BigInt (entier de grande taille, introduit en ES2020)
• Boolean (valeur booléenne)
• Undefined (non défini)
• Symbol (symbole, identifiant unique)
• Object (objet)
NB : JavaScript est un langage à typage dynamique, ce qui signifie qu'une même variable peut
contenir successivement des valeurs de types différents.
Exemple :
let x; // x est undefined
x = 5; // x est un Number
x = "John"; // x est une String
Les chaînes de caractères (Strings)
• Définies entre guillemets simples ou doubles.
• Permettent l’inclusion de guillemets en utilisant des délimiteurs différents.
Exemples :
let carName1 = "Volvo XC60";
let carName2 = 'Volvo XC60';
let phrase = "It's a nice day"; // Utilisation d'une apostrophe dans
des guillemets doubles
Les nombres (Numbers)
• Tous les nombres sont représentés en virgule flottante (64 bits).
• Ils peuvent être écrits avec ou sans décimales.
• La notation exponentielle est disponible pour représenter les très grands ou très petits
nombres.
Exemples :
let x1 = 34.00; // Avec décimales
let x2 = 34; // Sans décimales

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 21 / 83
let y = 123e5; // 123 * 10⁵ = 12300000
let z = 123e-5; // 123 * 10⁻⁵ = 0.00123
BigInt
• Permet de représenter des entiers dont la taille dépasse celle du type Number.
• Introduit avec ES2020.
Exemple :
let big = BigInt("123456789012345678901234567890" );
Les booléens (Booleans)
• Ne peuvent prendre que deux valeurs : true ou false.
• Utilisés notamment dans les tests conditionnels.
Exemple :
let a = 5, b = 5, c = 6;
console.log(a == b); // true
console.log(a == c); // false
Les tableaux (Arrays)
• Structures ordonnées, écrites entre crochets [] et séparant les éléments par des virgules.
• Les index commencent à 0.
Exemple :
const cars = ["Saab", "Volvo", "BMW"];
Les objets (Objects)
Le type object est une structures associant des paires clé:valeur, définies entre accolades {}.
Exemple :
const person = { firstName: "John", lastName: "Doe", age: 50};
Le type object permet de manipuler des :
• Objets intégrés : objets généraux, tableaux, dates, maps, sets, tableaux typés, promises,
etc.
• Objets définis par l'utilisateur
Exemples :
// Objet simple
const person = { firstName: "Youssouf", lastName: "EL ALLIOUI" };

// Tableau
const cars = ["Toyota", "Volvo", "BMW"];

// Date
const date = new Date("2024-01-25");
Valeurs non définies et vides (Undefined)
• Une variable déclarée sans valeur possède la valeur undefined.
Exemple :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 22 / 83
let car; // car est undefined
car = undefined;
NB : Une chaîne vide "" est une valeur valide de type string et diffère de undefined.
Exemple :
let text = "";
L'opérateur typeof
• Permet d’obtenir le type d’une variable ou d’une expression.
Exemples :
typeof ""; // Retourne "string"
typeof 0; // Retourne "number"
typeof person; // Retourne "object"
Conclusion
En résumé, JavaScript offre une variété de types de données permettant la manipulation flexible
de valeurs numériques, textuelles, booléennes ainsi que des structures complexes comme les
tableaux et objets. Le typage dynamique facilite la programmation, mais nécessite une attention
particulière lors des opérations entre différents types (par exemple, la concaténation d'un
nombre avec une chaîne).
Tableau récapitulatif des types de données en JavaScript
Type Description Exemple
String Chaîne de caractères "Hello", 'Volvo XC60'
Number Nombre à virgule flottante
(64 bits)
34, 3.14, 123e5
BigInt Entier de très grande taille
(ES2020)
BigInt("123456789012345678901234567890")
Boolean Valeur booléenne
(true ou false)
true, false
Undefined Variable non initialisée let x;
Null Représente l'absence
intentionnelle de valeur
let y = null;
Symbol Identifiant unique (ES6) Symbol("id")
Object Structures complexes
(objets, tableaux, dates,
etc.)
{ firstName: "John", lastName: "Doe"
}, ["Saab", "Volvo"]
Variables en JavaScript
Introduction
Les variables en JavaScript servent de conteneurs permettant de stocker des données. Elles
peuvent contenir divers types de valeurs (nombres, chaînes de caractères, objets, etc.) et jouent
un rôle fondamental dans l’écriture d’algorithmes et la manipulation des données.
Méthodes de Déclaration des Variables
Il existe plusieurs manières de déclarer une variable en JavaScript :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 23 / 83
• Déclaration automatique : Les variables non déclarées sont automatiquement créées lors
de leur première utilisation.
Exemple :
x = 5;
y = 6;
z = x + y;
NB : Il est fortement recommandé de déclarer explicitement chaque variable avant utilisation.
• Utilisation du mot-clé var : Syntaxe utilisée historiquement (de 1995 à 2015) et
encore nécessaire pour assurer la compatibilité avec les anciens navigateurs.
Exemple :
var x = 5;
var y = 6;
var z = x + y;
• Utilisation du mot-clé let : Introduit en ES6 (2015), il permet de déclarer des
variables avec une portée limitée au bloc dans lequel elles sont définies.
Exemple :
let x = 5;
let y = 6;
let z = x + y;
• Utilisation du mot-clé const : Également introduit en ES6, il est utilisé pour déclarer
des variables dont la valeur ne doit pas être modifiée (réaffectation interdite), tout en
ayant une portée de bloc.
Exemple :
const x = 5;
const y = 6;
const z = x + y;
Exemple Mixte
Il est fréquent de combiner const et let pour distinguer entre les valeurs constantes et celles
susceptibles d’évoluer.
Exemple :
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
Bonnes Pratiques
Pour une programmation claire et fiable, il est recommandé de :
• Toujours déclarer les variables avant leur utilisation.
• Utiliser const dès que la valeur ne doit pas changer (y compris pour les types
complexes comme les tableaux et objets).
• Recourir à let uniquement lorsque la réassignation est nécessaire.
• Utiliser var uniquement si le support d’anciens navigateurs est impératif.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 24 / 83
Identificateurs en JavaScript
Définition et Règles de Nommage des variables
Chaque variable doit être identifiée par un nom unique, appelé identificateur. Ces noms peuvent
être courts (ex. : x, y) ou plus explicites (ex. : age, totalVolume). Les règles de construction
d’un identificateur sont les suivantes :
• Ils peuvent contenir des lettres, des chiffres, des tirets bas (_) et des signes dollar ($).
• Ils doivent commencer par une lettre. (Ils peuvent également commencer par $ ou _,
bien que ces conventions soient moins utilisées dans ce tutoriel.)
• La casse est sensible : y et Y représentent des variables distinctes.
• Les mots réservés (mots-clés JavaScript) ne peuvent pas être utilisés.
NB : La sensibilité à la casse implique que identifier et Identifier sont considérés comme
différents.
L’Opérateur d’Assignation (affectation)
Usage et Différence par rapport à l’Algèbre
En JavaScript, le signe égal (=) est un opérateur d’assignation, et non un opérateur d’égalité.
x = x + 5; // Calcule x+5 puis réaffecte le résultat à x
Pour comparer deux valeurs, l’opérateur d’égalité est == ou ===.
Déclaration et Initialisation des Variables
Déclaration
La création d’une variable s’appelle « déclaration ».
var carName;
let carName;
Affectation d’une Valeur
Après déclaration, une variable peut se voir affecter une valeur à l’aide de l’opérateur =.
carName = "Volvo";
Il est également possible d’affecter une valeur lors de la déclaration :
let carName = "Volvo";
Déclaration Multiple
Plusieurs variables peuvent être déclarées sur une même ligne, séparées par une virgule :
let person = "John Doe", carName = "Volvo", price = 200;
Ou sur plusieurs lignes pour plus de lisibilité :
let person = "John Doe",
carName = "Volvo",
price = 200;

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 25 / 83
Valeur par Défaut : undefined
Si une variable est déclarée sans valeur, elle prend par défaut la valeur undefined.
let carName;
Redéclaration des Variables
Avec var
La redéclaration d’une variable déclarée avec var ne supprime pas sa valeur initiale.
var carName = "Volvo";
var carName; // carName conserve la valeur "Volvo"
Avec let et const
La redéclaration d’une variable avec let ou const dans le même bloc est interdite.
let carName = "Volvo";
let carName; // Erreur
Opérations Arithmétiques et Concaténation
Utilisation des Opérateurs
Comme en algèbre, il est possible d’effectuer des opérations arithmétiques :
let x = 5 + 2 + 3; // Résultat : 10
Pour les chaînes de caractères, l’opérateur + sert à la concaténation :
let fullName = "Youssouf" + " " + "EL ALLIOUI";
let x = "5" + 2 + 3; // Concatène en "523"
let y = 2 + 3 + "5"; // Concatène en "55" après addition des deux premiers
nombres
Utilisation des Caractères Spéciaux dans les Identificateurs
Le Signe Dollar ($)
Le caractère $ est considéré comme une lettre et peut donc faire partie d’un identificateur.
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
Le Tiret Bas (_)
De même, le tiret bas est valide dans un identificateur et est souvent utilisé pour désigner des
variables « privées ».
let _lastName = "Youssouf";
let _x = 2;
let _100 = 5;

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 26 / 83
Le Mot-clé let
Caractéristiques de let
• Portée de bloc : Les variables déclarées avec let ne sont accessibles qu’au sein du
bloc { } dans lequel elles sont déclarées.
{
let x = 2;
}
// x n'est pas accessible ici
• Obligation de déclaration préalable : Une variable let doit être déclarée avant d’être
utilisée.
• Redéclaration interdite dans le même bloc :
let x = "Youssouf EL ALLIOUI";
let x = 0; // Erreur
Hoisting
Les variables déclarées avec let sont hoistées (remontées en haut du bloc) mais ne sont pas
initialisées avant leur déclaration effective, ce qui provoque une erreur en cas d’utilisation
prématurée.
Exemple provoquant une ReferenceError :
carName = "Toyota";
let carName = "Volvo";
Le Mot-clé const
Caractéristiques de const
• Non réaffectable : Une fois assignée, la valeur ne peut être modifiée.
Exemple non autorisé :
const PI = 3.141592653589793;
PI = 3.14; // Erreur
• Obligation d'assignation immédiate :
Exemple correct :
const PI = 3.14159265359;
Exemple incorrect :
const PI;
PI = 3.14159265359; // Erreur
• Portée de bloc : Comme avec let, la portée d’un const est limitée au bloc dans lequel
il est défini.
Objets et Tableaux Const
Le mot-clé const crée une référence constante, ce qui signifie que :
• On ne peut pas réaffecter l’objet ou le tableau lui-même.
• Toutefois, il est possible de modifier les propriétés d’un objet ou les éléments d’un
tableau.
Exemple : Tableaux

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 27 / 83
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Toyota"; // Modification autorisée
cars.push("Audi"); // Ajout autorisé
// cars = ["Toyota", "Volvo", "Audi"]; // Réaffectation interdite
Exemple : Objets
const car = { type: "Fiat", model: "500", color: "white" };
car.color = "red"; // Modification autorisée
car.owner = "Johnson"; // Ajout autorisé
// car = { type: "Volvo", model: "EX60", color: "red" }; //
Réaffectation interdite
Comparaison entre var, let et const
Tableau Comparatif
Caractéristique var let const
Portée Globale ou fonctionnelle Bloc Bloc
Redéclaration Autorisée Interdite dans le même
bloc
Interdite dans le même
bloc
Réaffectation Autorisée Autorisée Interdite
Hoisting Oui (initialisé
à undefined)
Oui (mais non initialisé) Oui (mais non initialisé)
Binding de this Oui Non Non
Synthèse
• À privilégier : let et const pour bénéficier de la portée de bloc et éviter les problèmes
liés au hoisting.
• Utilisation de const : Lorsqu’il est certain que la valeur ne doit pas changer.
• Utilisation de var : Réservée aux situations où le support des anciens navigateurs est
indispensable.
Conclusion
En résumé, la gestion des variables en JavaScript repose sur la bonne compréhension des
différents mots-clés de déclaration (var, let, const) et des implications associées à la portée,
au hoisting et à la réassignation. L’utilisation judicieuse de ces mécanismes permet d’écrire un
code plus prévisible, maintenable et conforme aux meilleures pratiques modernes.
Tableau Récapitulatif
Concept Description Exemple
Déclaration
automatique
Création implicite d’une variable lors de la première
utilisation.
x = 5;
var Déclaration avec portée globale ou fonctionnelle; autorise la
redéclaration et le hoisting.
var x = 5;
let Déclaration avec portée de bloc; interdit la redéclaration dans
le même bloc; hoisting sans initialisation.
let x = 5;
const Déclaration avec portée de bloc; la valeur ne peut être
réaffectée; assignation obligatoire au moment de la
déclaration.
const x = 5;
Identificateurs Noms uniques respectant des règles de syntaxe (lettres,
chiffres, _, $), sensibles à la casse.
let _lastName =
"Johnson";
Opérateur
d’assignation
Utilisé pour affecter une valeur à une variable (différent de
l’opérateur d’égalité == ou ===).
x = x + 5;

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 28 / 83
Objets et Tableaux
Const
Bien que leurs références soient constantes, leurs contenus
(propriétés/éléments) peuvent être modifiés.
Voir les exemples dans
la section 10.2
Les opérateurs en JavaScript
Définition et Rôle
Les opérateurs permettent d'effectuer diverses opérations (calculs mathématiques,
manipulations logiques et de chaînes, opérations binaires, etc.) sur des données et des variables.
Ils sont indispensables pour la réalisation d'algorithmes.
Catégories d'opérateurs
• Opérateurs arithmétiques
• Opérateurs d’affectation
• Opérateurs de comparaison
• Opérateurs sur les chaînes de caractères
• Opérateurs logiques
• Opérateurs bit à bit
• Opérateurs ternaires
• Opérateurs de type
Opérateurs arithmétiques
Fonctions principales
Ces opérateurs servent à effectuer des opérations mathématiques sur des nombres ou à
concaténer des chaînes dans certains cas.
Opérateurs courants
• Addition (+) : Addition ou concaténation
• Soustraction (-) : Différence entre deux valeurs
• Multiplication (*) : Produit de deux valeurs
• Division (/) : Quotient de la division
• Modulo (%) : Reste de la division
• Exponentiation (**) : Puissance (depuis ES2016)
• Incrément (++) et Décrément (--) : Augmentation ou diminution de 1
Exemple :
let x = 5;
let y = 2;
let somme = x + y; // 7
let produit = x * y; // 10

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 29 / 83
Opérateurs d’affectation
Affectation simple
L'opérateur = attribue une valeur à une variable.
let x = 10;
Affectations composées
Ces opérateurs combinent une opération et une affectation :
• Addition affectée (+=) : x += y équivaut à x = x + y
• Soustraction affectée (-=) : x -= y équivaut à x = x - y
• Multiplication affectée (*=) : x *= y équivaut à x = x * y
• Division affectée (/=) : x /= y équivaut à x = x / y
• Modulo affecté (%=) : x %= y équivaut à x = x % y
• Exponentiation affectée (**=) : x **= y équivaut à x = x ** y
Opérateurs de comparaison
Fonction et symboles
Ils permettent de comparer des valeurs et renvoient un booléen :
• Égalité abstraite (==) et stricte (===)
• Différence (!=) et différence stricte (!==)
• Comparaisons numériques : >, <, >=, <=
• Opérateur ternaire (? :) pour les expressions conditionnelles
Exemple :
let a = 5, b = "5";
console.log(a == b); // true (égalité abstraite)
console.log(a === b); // false (égalité stricte)
Opérateurs sur les chaînes de caractères
Concaténation
• L'opérateur + concatène des chaînes ou combine nombres et chaînes (produisant une
chaîne).
let prenom = "John";
let nom = "Doe";
let nomComplet = prenom + " " + nom; // "John Doe"
Affectation par concaténation
• L'opérateur += peut ajouter du texte à une variable existante.
let message = "Bonjour";
message += " à tous"; // "Bonjour à tous"

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 30 / 83
Opérateurs logiques
Utilisation
Ils permettent d'effectuer des opérations booléennes :
• ET logique (&&)
• OU logique (||)
• NON logique (!)
Exemple :
let x = true, y = false;
console.log(x && y); // false
console.log(x || y); // true
Opérateurs de type
Vérification du type d'une variable
• typeof : Retourne le type de la variable
• instanceof : Vérifie si un objet est une instance d’un type donné
Exemple :
console.log(typeof 42); // "number"
console.log("hello" instanceof String); // false (car "hello" est un
littéral)
Priorité des opérateurs
Ordre d’évaluation
L'ordre de priorité détermine l'exécution des opérations dans une expression. Par défaut :
• Multiplication, division et modulo sont évalués avant l'addition et la soustraction.
• Les parenthèses permettent de modifier cet ordre.
Exemple :
let resultat1 = 100 + 50 * 3; // 100 + (50 * 3) = 250
let resultat2 = (100 + 50) * 3; // (100 + 50) * 3 = 450
Conclusion
En résumé, les opérateurs en JavaScript jouent un rôle crucial en permettant la manipulation et
le traitement des données, qu'il s'agisse d'opérations arithmétiques, logiques, de comparaison
ou de manipulation de types. Une bonne compréhension de leur classification et de leur priorité
est indispensable pour écrire un code clair, robuste et maintenable.
Tableau récapitulatif
Catégorie Opérateurs clés Description
Arithmétiques +, -, *, /, %, **, ++, -- Réalisent des opérations mathématiques et la
concaténation.
Affectation =, +=, -=, *=, /=, %= , **= Attribuent et modifient des valeurs aux
variables.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 31 / 83
Comparaison ==, ===, !=, !==, >, <, >=, <=, ? : Comparent des valeurs et retournent un
booléen.
Chaînes de
caractères
+, += Concatènent des chaînes de caractères.
Logiques &&, `

Type typeof, instanceof Vérifient le type des variables.
Bit à bit
(Niveau
avancé)
&, ` , ~, ^, <<, >>, >>>`
Les chaînes de caractères (strings) en JavaScript
Les chaînes de caractères (strings) en JavaScript permettent de stocker et de manipuler du texte.
Elles jouent un rôle fondamental dans le développement web en facilitant le traitement des
données textuelles. Ce chapitre présente les principales méthodes et propriétés associées aux
chaînes, ainsi que des particularités introduites par les versions récentes d’ECMAScript.
Déclaration et Création de Chaînes
Déclaration des chaînes
Les chaînes peuvent être créées de plusieurs manières en JavaScript :
• Utilisation des guillemets simples et doubles : Une chaîne est définie en plaçant le texte
entre des guillemets simples (') ou doubles (").
let nom = "John Doe";
let voiture = 'Volvo XC60';
NB : Les chaînes créées avec des guillemets simples ou doubles fonctionnent de manière
identique.
• Utilisation des guillemets inversés (Template Strings) : Introduites avec ES6
(JavaScript 2016), les chaînes délimitées par des backticks (`) offrent plusieurs
avantages :
o Possibilité d’inclure des guillemets simples et doubles sans échappement.
o Écriture sur plusieurs lignes.
o Interpolation de variables et d’expressions grâce à la syntaxe ${...}.
let texte = `Il est souvent appelé "Johnny"` ;
let prenom = "John";
let nom = "Doe";
let accueil = `Bienvenue ${prenom} ${nom}!`;
NB : Les Template Strings ne sont pas supportés par Internet Explorer.
Propriété length
La propriété intégrée length permet d’obtenir la longueur d’une chaîne.
let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" ;
let taille = alphabet.length; // retourne 26

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 32 / 83
Gestion des Caractères Spéciaux
Échappement de caractères
Pour inclure dans une chaîne des caractères réservés (par exemple, les guillemets ou le
backslash), il est nécessaire d’utiliser le caractère d’échappement \.
Tableau récapitulatif :
Séquence Caractère résultant Description
\' ' Apostrophe
\" " Guillemets
\\ \ Antislash
\b (backspace) Retour arrière
\f (form feed) Saut de page
\n (nouvelle ligne) Passage à la ligne
\r (retour chariot) Retour chariot
\t (tabulation horizontale) Tabulation horizontale
\v (tabulation verticale) Tabulation verticale

Exemple :
let citation = "Nous sommes les soi-disant \"Vikings\" du nord.";
Fractionnement de longues lignes
Pour améliorer la lisibilité du code, il est possible de :
• Casser une instruction après un opérateur.
• Fractionner une chaîne en la concaténant par l’opérateur +.
Exemples :
document.getElementById("demo").innerHTML =
"Bonjour " +
"Dolly!";
Extraction et Accès aux Caractères
Extraction d’un caractère individuel
• Méthode charAt() : Retourne le caractère situé à l’indice spécifié.
let message = "HELLO WORLD";
let caractere = message.charAt(0); // 'H'
• Méthode charCodeAt() : Retourne le code UTF-16 (un entier compris entre 0 et
65535) du caractère à l’indice indiqué.
let code = message.charCodeAt(0); // Code correspondant à 'H'

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 33 / 83
• Méthode at() et accès par indice : La méthode at(), introduite en ES2022, renvoie le
caractère à l’indice spécifié et supporte les indices négatifs (ce qui n’est pas le cas
de charAt()).
L’accès par indice via [] est également possible, bien que moins souple.
let derniereLettre = message. at(-1); // 'D'
let premiereLettre = message[ 0]; // 'H'
Extraction de sous-chaînes
• Méthode slice() : Extrait une portion de la chaîne entre l’indice de début (inclus) et
l’indice de fin (exclu).
let fruits = "Apple, Banana, Kiwi" ;
let extrait = fruits.slice(7, 13); // 'Banana'
NB : Les indices négatifs indiquent un décompte depuis la fin de la chaîne.
• Méthode substring() : Fonctionne de manière similaire à slice(), mais traite les
valeurs négatives comme zéro.
let extrait2 = fruits.substring(7, 13);
• Méthode substr() : Extrait une portion de la chaîne en spécifiant la position de départ
et la longueur de l’extrait.
let extrait3 = fruits.substr(7, 6); // 'Banana'
Manipulation et Transformation des Chaînes
Conversion de la casse
• toUpperCase() et toLowerCase() : Ces méthodes convertissent une chaîne en
majuscules ou en minuscules.
let texte = "Hello World!";
let majuscules = texte.toUpperCase(); // 'HELLO WORLD!'
let minuscules = texte.toLowerCase(); // 'hello world!'
Concaténation
• Méthode concat() : Permet d’assembler deux ou plusieurs chaînes.
let salut = "Hello";
let monde = "World";
let resultat = salut.concat(" ", monde); // 'Hello World'
NB : L’opérateur + offre une alternative simple pour la concaténation.
Suppression des espaces superflus
• Méthode trim() : Élimine les espaces situés au début et à la fin de la chaîne.
let salutation = " Hello World! " ;
let nettoye = salutation. trim(); // 'Hello World!'
• Méthodes trimStart() et trimEnd() : Respectivement, elles suppriment les espaces
du début ou de la fin de la chaîne.
let debutNettoye = salutation. trimStart();
let finNettoye = salutation. trimEnd();

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 34 / 83
Ajout de remplissage (Padding)
• Méthodes padStart() et padEnd() : Ces méthodes complètent une chaîne avec un
autre texte jusqu’à atteindre une longueur donnée.
let numero = "5";
let paddedStart = numero. padStart(4, "0"); // '0005'
let paddedEnd = numero.padEnd(4, "0"); // '5000'
NB : Pour appliquer ces méthodes à des nombres, il faut d’abord convertir le nombre en
chaîne.
Répétition d’une chaîne
• Méthode repeat() : Retourne une nouvelle chaîne contenant un nombre défini de
copies de la chaîne d’origine.
let slogan = "Hello world! ";
let repetition = slogan.repeat(2); // 'Hello world! Hello world! '
Remplacement de contenu
• Méthode replace() : Remplace la première occurrence d’une sous-chaîne par une
nouvelle valeur.
let annonce = "Veuillez visiter Microsoft!" ;
let nouvelleAnnonce = annonce. replace("Microsoft", "W3Schools");
NB : Par défaut, seule la première occurrence est remplacée. La recherche est sensible à la
casse.
• Méthode replaceAll() : Introduite en ES2021, elle remplace toutes les occurrences
d’une sous-chaîne ou d’une expression régulière.
let texte2 = "Cats are great. I love cats.";
let nouveauTexte2 = texte2. replaceAll("cats", "dogs");
NB : Pour une recherche insensible à la casse avec une expression régulière, n’oubliez pas
d’ajouter le flag i.
Conversion d’une chaîne en tableau
• Méthode split() : Permet de diviser une chaîne en un tableau de sous-chaînes en
fonction d’un séparateur donné.
let listeFruits = "Apple, Banana, Kiwi" ;
let tableau = listeFruits. split(","); // ['Apple', ' Banana', ' Kiwi']
NB : Si aucun séparateur n’est spécifié, le tableau contiendra la chaîne entière en indice 0.
6. Recherche et Correspondance dans une Chaîne
Recherche de positions de sous-chaînes
• Méthode indexOf() : Retourne l’indice de la première occurrence d’une sous-chaîne
(ou -1 si elle n’est pas trouvée).
let phrase = "Veuillez localiser où 'localize' apparaît!" ;
let position = phrase.indexOf("localize");
NB : Un second paramètre optionnel permet de définir la position de départ.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 35 / 83
• Méthode lastIndexOf() : Renvoie l’indice de la dernière occurrence de la sous-
chaîne recherchée.
let positionDerniere = phrase. lastIndexOf("localize");
6.2. Autres méthodes de recherche
• Méthode search() : Recherche une sous-chaîne ou une expression régulière et
renvoie la position de la première correspondance.
let pos = phrase.search("localize");
• Méthodes match() et matchAll()
o match() retourne un tableau contenant la ou les correspondances d’une
expression régulière.
o matchAll() (ES2020) renvoie un itérateur sur toutes les correspondances
(requiert le flag global g en cas d’expression régulière).
let correspondances = phrase. match(/ain/gi);
• Méthode includes() : Retourne true si la chaîne contient la sous-chaîne spécifiée,
sinon false.
let contient = phrase.includes("localize"); // true ou false
• Méthodes startsWith() et endsWith() : Vérifient respectivement si la chaîne
commence ou se termine par une sous-chaîne donnée.
let commencePar = phrase. startsWith("Veuillez"); // true
let seTerminePar = phrase. endsWith("!"); // true
Les Template Strings (Chaînes Template)
Les Template Strings, ou Template Literals, offrent une syntaxe moderne et flexible pour
manipuler des chaînes.
• Syntaxe et Avantages
o Utilisation des backticks (`) au lieu des guillemets.
o Possibilité d’insérer des retours à la ligne directement.
o Intégration facilitée de variables et d’expressions via l’interpolation ${...}.
Exemple – Interpolation et génération de contenu HTML :
let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const tag of tags) {
html += `<li>${tag}</li>`;
}
html += `</ul>`;
NB : Cette fonctionnalité n’est pas supportée par Internet Explorer.
Chaînes : Primitives vs. Objets
Par défaut, les chaînes en JavaScript sont des valeurs primitives créées à partir de littéraux, par
let x = "John";

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 36 / 83
Il est toutefois possible de créer un objet String avec le mot-clé new :
let y = new String("John");
NB :
• La création d’objets String complique le code et peut ralentir l’exécution.
• Les comparaisons entre une primitive et un objet String peuvent produire des résultats
inattendus :
console.log(x == y); // true (comparaison non stricte)
console.log(x === y); // false (comparaison stricte)
Il est donc recommandé d’utiliser des chaînes primitives.
Conclusion
En somme, JavaScript propose un ensemble complet de méthodes et de propriétés permettant
la manipulation efficace des chaînes de caractères. De la déclaration aux diverses
transformations (conversion de casse, concaténation, extraction, recherche, remplacement,
etc.), chaque fonctionnalité offre une flexibilité essentielle au développement d’applications
modernes. La maîtrise de ces outils, tout en tenant compte des particularités d’implémentation
et des évolutions d’ECMAScript, constitue un atout majeur pour tout développeur.
Tableau Récapitulatif des Fonctions et Propriétés
Fonction/Propriété Description Exemple
length Renvoie la longueur d’une chaîne let len = "Hello".length;
// 5
charAt(index) Renvoie le caractère à l’indice
spécifié
let c = "Hello".charAt(1);
// 'e'
charCodeAt(index) Renvoie le code UTF-16 du caractère
à l’indice spécifié
let code =
"Hello".charCodeAt(0);
at(index) Renvoie le caractère à l’indice
(supporte les indices négatifs,
ES2022)
let c = "Hello".at( -1); //
'o'
slice(start, end) Extrait une portion de la chaîne de
l’indice start jusqu’à end (non
inclus)
let part = "Apple, Banana,
Kiwi".slice(7, 13); //
'Banana'
substring(start,
end)
Extrait une sous -chaîne
entre start et end, en traitant les
valeurs négatives comme 0
let part = "Apple, Banana,
Kiwi".substring(7, 13);
substr(start,
length)
Extrait une sous-chaîne à partir
de start sur une longueur donnée
let part = "Apple, Banana,
Kiwi".substr(7, 6); //
'Banana'
toUpperCase() Convertit une chaîne en majuscules let upper =
"Hello".toUpperCase(); //
'HELLO'
toLowerCase() Convertit une chaîne en minuscules let lower =
"Hello".toLowerCase(); //
'hello'
concat() Concatène deux ou plusieurs chaînes let full = "Hello".concat("
", "World");
trim() Supprime les espaces en début et fin
de la chaîne
let clean = " Hello World
".trim(); // 'Hello World'
trimStart() Supprime les espaces au début de la
chaîne
let startClean = "
Hello".trimStart();
trimEnd() Supprime les espaces à la fin de la
chaîne
let endClean = "Hello
".trimEnd();

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 37 / 83
padStart(targetLen
gth, padString)
Ajoute un remplissage au début de la
chaîne jusqu’à
atteindre targetLength
let padded =
"5".padStart(4, "0"); //
'0005'
padEnd(targetLengt
h, padString)
Ajoute un remplissage à la fin de la
chaîne jusqu’à
atteindre targetLength
let padded = "5".padEnd(4,
"0"); // '5000'
repeat(count) Répète la chaîne un nombre défini de
fois
let repeated =
"Hi".repeat(3); // 'HiHiHi'
replace(search,
replacement)
Remplace la première occurrence
de searchpar replacement
let newText = "Please visit
Microsoft".replace("Micros
oft", "W3Schools");
replaceAll(search,
replacement)
Remplace toutes les occurrences
de search par replacement (E
S2021)
let newText = "Cats are
great. Cats
rule.".replaceAll("Cats",
"Dogs");
split(separator) Divise la chaîne en un tableau de
sous-chaînes en fonction du
séparateur
let arr = "Apple, Banana,
Kiwi".split(",");
indexOf(search) Retourne l’indice de la première
occurrence de search
let idx = "Hello
world".indexOf("world");
lastIndexOf(search
)
Retourne l’indice de la dernière
occurrence de search
let idx = "Hello world
world".lastIndexOf("world"
);
search(pattern) Recherche une sous-chaîne ou une
expression régulière et retourne
l’indice de la correspondance
let pos = "Hello
world".search("world");
match(regexp) Retourne un tableau contenant les
correspondances d’une expression
régulière
let matches = "Hello
world".match(/o/gi);
matchAll(regexp) Retourne un itérateur sur toutes les
correspondances (nécessite le flag
global, ES2020)
let it = "Hello
world".matchAll(/l/g);
includes(search) Vérifie si la chaîne
contient search (retourne true ou
false)
let has = "Hello
world".includes("world");
// true
startsWith(search) Vérifie si la chaîne commence
par search
let starts = "Hello
world".startsWith("Hello")
; // true
endsWith(search) Vérifie si la chaîne se termine
par search
let ends = "Hello
world".endsWith("world");
// true
Les nombres en javascript
JavaScript ne dispose que d’un seul type de nombre. Qu’ils soient entiers ou à virgule flottante,
tous les nombres sont représentés en double précision (64 bits) selon la norme IEEE 754. Cette
uniformité peut entraîner certaines particularités en termes de précision et de comportement
lors d’opérations arithmétiques ou de concaténation avec des chaînes.
Représentation et Notations des Nombres
Nombres Littéraux
• Avec décimales
let x = 3.14; // Un nombre avec décimales
• Sans décimales

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 38 / 83
let y = 3; // Un nombre entier
Notation Exponentielle
Pour représenter des nombres très grands ou très petits, on peut utiliser la notation scientifique
(exposant) :
let a = 123e5; // équivaut à 12300000
let b = 123e-5; // équivaut à 0.00123
Précision des Nombres
Précision des Entiers
• Les entiers (sans décimale ni notation exponentielle) sont précis jusqu’à 15 chiffres.
let x = 999999999999999; // Correct : 15 chiffres
let y = 9999999999999999; // Devient 10000000000000000
Précision en Virgule Flottante
• Les opérations sur nombres à virgule flottante peuvent parfois produire des résultats
imprécis.
let somme = 0.2 + 0.1; // Résultat inattendu en raison des imprécisions
binaires
• Astuce pour pallier ce problème :
Multiplier puis diviser :
let sommeCorrigee = (0.2 * 10 + 0.1 * 10) / 10;
Opérations Arithmétiques et Concaténation
L’Opérateur « + »
• Addition : Lorsque les deux opérandes sont des nombres, le résultat est numérique.
let x = 10;
let y = 20;
let z = x + y; // 30
• Concaténation : Si l’un des opérandes est une chaîne de caractères, l’opérateur « + »
effectue une concaténation.
let a = "10";
let b = "20";
let c = a + b; // "1020"
• Attention aux erreurs fréquentes : L’ordre des opérations est évalué de gauche à droite.
let x = 10;
let y = 20;
let z = "Le résultat est : " + x + y; // "Le résultat est : 1020"
// Pour obtenir 30, il faut regrouper :
let zCorrect = "Le résultat est : " + (x + y);
Conversion Implicite des Chaînes Numériques
JavaScript convertit automatiquement les chaînes contenant des chiffres en nombres lors
d’opérations arithmétiques (sauf pour l’addition qui provoque une concaténation) :
Exemples :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 39 / 83
let x = "100";
let y = "10";
let division = x / y; // 10
let multiplication = x * y; // 1000
let soustraction = x - y; // 90
// Tandis que :
let addition = x + y; // "10010"
La Valeur NaN (Not a Number)
Définition et Exemples
• NaN indique qu’un résultat numérique est invalide (par exemple, lorsqu’on essaie
d’effectuer une opération arithmétique sur une chaîne non numérique).
let resultat = 100 / "Apple"; // NaN
Utilisation de la Fonction isNaN()
• Permet de vérifier si une valeur est « NaN » :
isNaN(resultat); // Renvoie true
Conséquences
• Toute opération arithmétique impliquant NaN renvoie NaN.
let x = NaN;
let somme = x + 5; // NaN
Infinity et Ses Variantes
Positive et Negative Infinity
• Infinity : Résulte d’un dépassement de la valeur maximale.
let posInf = 2 / 0; // Infinity
let negInf = -2 / 0; // -Infinity
• Type :
typeof Infinity; // "number"
Utilisation en Boucle
• Exemple d’itération jusqu’à atteindre Infinity (attention à l’overflow) :
let myNumber = 2;
while (myNumber !== Infinity) {
myNumber *= myNumber;
}
Notations Alternatives : Hexadécimal, Octal et Binaire
Hexadécimal
• Un nombre précédé de 0x est interprété en base 16.
let hex = 0xFF; // 255 en décimal

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 40 / 83
NB : Évitez d’écrire des nombres avec un zéro initial (ex. : 07) afin d’éviter une interprétation
octale dans certains environnements.
Conversion de Base
• La méthode toString(radix) permet d’afficher un nombre dans une base différente
(2 à 36).
let myNumber = 32;
myNumber.toString(16); // Affiche le nombre en hexadécimal
Nombres : Primitives vs. Objets
Valeurs Primitives
• Par défaut, les nombres sont des valeurs primitives créées à partir de littéraux.
let x = 123;
Objets Number
• Il est possible de créer un objet Number avec le mot-clé new, mais cela est déconseillé
en raison de la complexité et des problèmes de performance.
let y = new Number(123);
• Comparaison :
let a = 500;
let b = new Number(500);
console.log(a == b); // true (comparaison non stricte)
console.log(a === b); // false (comparaison stricte)
JavaScript BigInt
Présentation
• BigInt permet de représenter des entiers dont la taille dépasse la limite des nombres
classiques (MAX_SAFE_INTEGER).
Création d’un BigInt
• Syntaxe 1 : Ajouter la lettre n à la fin d’un entier.
let big1 = 1234567890123456789012345n ;
• Syntaxe 2 : Utiliser la fonction BigInt().
let big2 = BigInt("1234567890123456789012345" );
Particularités et Limitations
• Les opérations arithmétiques entre un BigInt et un Number ne sont pas autorisées sans
conversion explicite.
• BigInt ne supporte pas les décimales ni certains opérateurs (ex. : décalage non
signé >>>).

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 41 / 83
Exemples d’Opérations
let x = 9007199254740995n;
let y = 9007199254740995n;
let produit = x * y;
// Division – conversion nécessaire
let div = Number(5n) / 2;
Méthodes et Fonctions Associées aux Nombres
Méthodes de Conversion et d’Affichage
• toString() : Convertit un nombre en chaîne de caractères.
(123).toString(); // "123"
• toExponential() : Renvoie une chaîne représentant le nombre en notation
exponentielle, avec un nombre optionnel de chiffres après la virgule.
let x = 9.656;
x.toExponential(2); // Par exemple "9.66e+0"
• toFixed() : Renvoie une chaîne avec le nombre arrondi à un nombre fixe de
décimales.
x.toFixed(2); // "9.66"
• toPrecision() : Renvoie une chaîne représentant le nombre avec une longueur
totale spécifiée (nombre de chiffres significatifs).
x.toPrecision(4); // "9.656"
• valueOf() : Renvoie la valeur primitive du nombre.
NB : Cette méthode est utilisée en interne et n’est généralement pas nécessaire dans le code.
10.2. Conversion de Variables en Nombre
• Number() : Convertit son argument en nombre.
Number("10"); // 10
Number(" 10 "); // 10
Number("10.33"); // 10.33
Number("John"); // NaN
• parseFloat() : Analyse une chaîne et renvoie un nombre à virgule flottante.
parseFloat("10.33"); // 10.33
parseFloat("10 20 30"); // 10
parseFloat("10 years"); // 10
• parseInt() : Analyse une chaîne et renvoie un entier.
parseInt("10.33"); // 10
parseInt("-10"); // -10
parseInt("10 years"); // 10
10.3. Méthodes de l’Objet Number
Ces méthodes se trouvent sur l’objet Number et s’appellent directement sur celui-ci :
• Number.isInteger() : Vérifie si l’argument est un entier.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 42 / 83
Number.isInteger(10); // true
Number.isInteger(10.5); // false
• Number.isSafeInteger() : Vérifie si l’entier est « sûr », c’est-à-dire s’il peut
être représenté exactement en double précision.
Number.isSafeInteger(9007199254740991); // true
Number.isSafeInteger(9007199254740992); // false
• Number.parseFloat() et Number.parseInt() : Sont identiques aux
fonctions globales parseFloat() et parseInt() et permettent de convertir des chaînes
en nombre.
Propriétés de l’Objet Number
Number.EPSILON
• Différence minimale entre 1 et le plus petit nombre supérieur à 1.
let epsilon = Number.EPSILON;
Number.MAX_VALUE et Number.MIN_VALUE
• MAX_VALUE : Le plus grand nombre possible en JavaScript.
let max = Number.MAX_VALUE;
• MIN_VALUE : Le plus petit nombre positif possible (différent de 0).
let min = Number.MIN_VALUE;
Number.MAX_SAFE_INTEGER et Number.MIN_SAFE_INTEGER
• MAX_SAFE_INTEGER : Le plus grand entier « sûr » (2^53 - 1).
let maxSafe = Number.MAX_SAFE_INTEGER;
• MIN_SAFE_INTEGER : Le plus petit entier « sûr » (-(2^53 - 1)).
let minSafe = Number.MIN_SAFE_INTEGER;
POSITIVE_INFINITY, NEGATIVE_INFINITY et NaN
• POSITIVE_INFINITY : Représente l’infini positif (résultat d’un overflow ou division
par 0).
let posInf = Number.POSITIVE_INFINITY;
• NEGATIVE_INFINITY : Représente l’infini négatif.
let negInf = Number.NEGATIVE_INFINITY;
• NaN : Une valeur représentant « Not a Number ».
let notANumber = NaN;
Conclusion
En résumé, JavaScript traite tous les nombres de manière uniforme en utilisant la représentation
en double précision. Cette approche unique simplifie la gestion des nombres mais induit
également des pièges relatifs à la précision, notamment pour les opérations sur nombres à
virgule flottante et les comparaisons entre valeurs primitives et objets Number. L’introduction
de BigInt permet désormais de travailler avec des entiers de très grande taille, complétant ainsi

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 43 / 83
l’ensemble des outils numériques de JavaScript. La compréhension approfondie de ces concepts
est essentielle pour développer des applications robustes et éviter des erreurs subtiles lors
d’opérations arithmétiques.
Tableau Récapitulatif des Fonctions, Méthodes et Propriétés
Fonction/Méthode / Propriété Description Exemple
Nombres Littéraux Création de nombres avec ou sans
décimales
let x = 3.14; ou let y =
3;
Notation Exponentielle Représentation de nombres très
grands ou petits en utilisant un
exposant
let a = 123e5; //
12300000
let b = 123e-5; //
0.00123
Double Précision (64 bits) Tous les nombres sont stockés
selon la norme IEEE 754 en 64 bits
—
Précision des Entiers Précision jusqu’à 15 chiffres pour
les entiers
let x = 999999999999999;
Opérateur +
(Addition/Concaténation)
Additionne des nombres ou
concatène des chaînes si l’un des
opérandes est une chaîne
10 + 20; // 30
"10" + "20"; // "1020"
Conversion Implicite Conversion automatique de chaînes
numériques dans les opérations
arithmétiques
"100" / "10"; // 10
NaN Indique qu’un résultat numérique
est invalide
let x = 100 / "Apple";
// NaN
isNaN() Vérifie si une valeur est NaN isNaN(100 / "Apple"); //
true
Infinity / -Infinity Représentent l’infini positif ou
négatif
2 / 0; // Infinity
-2 / 0; // -Infinity
Notation Hexadécimale Interprétation des nombres
précédés de 0x en base 16
let hex = 0xFF; // 255
toString() Convertit un nombre en chaîne (123).toString(); //
"123"
toExponential() Affiche le nombre en notation
exponentielle avec un nombre
optionnel de décimales
let x = 9.656;
x.toExponential(2);
toFixed() Arrondit le nombre à un nombre
fixe de décimales et renvoie une
chaîne
x.toFixed(2); // "9.66"
toPrecision() Formate le nombre avec un nombre
spécifié de chiffres significatifs
x.toPrecision(4); //
"9.656"
valueOf() Renvoie la valeur primitive d’un
nombre
(123).valueOf(); // 123
Number() Convertit une valeur en nombre Number("10"); // 10
parseFloat() Convertit une chaîne en nombre à
virgule flottante
parseFloat("10.33"); //
10.33
parseInt() Convertit une chaîne en entier parseInt("10 years"); //
10
Number.isInteger() Vérifie si une valeur est un entier Number.isInteger(10); //
true
Number.isSafeInteger() Vérifie si l’entier est représentable
de manière sûre (en double
précision)
Number.isSafeInteger(900
7199254740991); // true
BigInt Permet de représenter des entiers de
très grande taille
let big =
12345678901234567890n;
ou BigInt("1234567890123
4567890");

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 44 / 83
Number.EPSILON Différence entre 1 et le plus petit
nombre supérieur à 1
Number.EPSILON;
Number.MAX_VALUE /
MIN_VALUE
Valeur maximale/minimale
possible en JavaScript
Number.MAX_VALUE;
Number.MIN_VALUE;
Number.MAX_SAFE_INTEG
ER / MIN_SAFE_INTEGER
Entiers maximum et minimum sûrs
(2^53 - 1 et -(2^53 - 1))
Number.MAX_SAFE_INTEGER;
Number.MIN_SAFE_INTEGER;
Number.POSITIVE_INFINIT
Y / NEGATIVE_INFINITY
Représentent l’infini positif ou
négatif respectivement
Number.POSITIVE_INFINITY
;
Number.NEGATIVE_INFINITY
;
Les Instructions de Test et les Boucles en JavaScript
En JavaScript, les instructions de test permettent d'exécuter du code sous certaines conditions,
tandis que les boucles permettent de répéter des actions plusieurs fois.
Instructions de Test
if...else
Permet d'exécuter un bloc de code si une condition est vraie.
let age = 20;

if (age >= 18) {
console.log("Vous êtes majeur.");
} else {
console.log("Vous êtes mineur.");
}
• if : vérifie une condition.
• else : exécute un bloc si la condition est fausse.
• else if : permet plusieurs conditions successives.
let note = 85;

if (note >= 90) {
console.log("Excellent !");
} else if (note >= 60) {
console.log("Admis.");
} else {
console.log("Échec.");
}
switch
Utile pour tester plusieurs valeurs sans multiplier les if...else.
let jour = "lundi";

switch (jour) {
case "lundi":
console.log("Début de semaine !");
break;
case "vendredi":
console.log("Bientôt le week -end !");
break;
default:
console.log("Jour classique.");

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 45 / 83
}
• case : compare avec la valeur donnée.
• break : empêche d’exécuter les cas suivants.
• default : s’exécute si aucun case ne correspond.
Les Boucles
for
Utilisée quand le nombre d’itérations est connu.
for (let i = 0; i < 5; i++) {
console.log("Iteration " + i);
}
• Initialisation (let i = 0) : définit la variable.
• Condition (i < 5) : continue tant que vrai.
• Incrémentation (i++) : augmente i à chaque tour.
while
Utilisée quand le nombre d’itérations est inconnu.
let x = 0;
while (x < 3) {
console.log("x vaut " + x);
x++;
}
Exécute le bloc tant que la condition est vraie.
do...while
S’exécute au moins une fois avant de vérifier la condition.
let y = 0;
do {
console.log("Valeur de y : " + y);
y++;
} while (y < 3);
Exécute le bloc au moins une fois avant le test.
for...in (pour les objets)
Parcourt les clés d’un objet.
let personne = { nom: "Ali", âge: 25 };
for (let clé in personne) {
console.log(clé + " : " + personne[clé]);
}
for...of (pour les tableaux)
Parcourt les valeurs d’un tableau.
let fruits = ["Pomme", "Banane", "Orange"];

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 46 / 83
for (let fruit of fruits) {
console.log(fruit);
}
Résumé
Structure Utilisation
if...else Tester une condition.
switch Tester plusieurs valeurs.
for Boucle avec un nombre d'itérations connu.
while Boucle avec une condition.
do...while Exécute au moins une fois avant le test.
for...in Parcourt les clés d'un objet.
for...of Parcourt les valeurs d'un tableau.
Les functions en Javascript
Une fonction JavaScript est un bloc de code conçu pour exécuter une tâche précise. Elle
s’exécute lorsqu’elle est invoquée (appelée) par un événement, un appel direct dans le code ou
de manière auto-invoquée.
Définition et Syntaxe d’une Fonction
Déclaration d’une Fonction
• Utilisation du mot-clé function suivi d’un nom (respectant les mêmes règles que les
variables) et d’une liste de paramètres entre parenthèses.
• Le corps de la fonction, contenant le code à exécuter, est défini entre accolades {}.
Exemple :
// Fonction pour calculer le produit de p1 et p2
function myFunction(p1, p2) {
return p1 * p2;
}
Paramètres et Arguments
• Paramètres : Les noms des variables situés entre parenthèses dans la définition de la
fonction.
• Arguments : Les valeurs réelles passées à la fonction lors de son invocation.
NB : Les paramètres agissent comme des variables locales à l’intérieur de la fonction.
Invocation d’une Fonction
Appel de Fonction
Le code contenu dans la fonction s’exécute lorsqu’elle est appelée. L’appel peut se produire :
• Lors d’un événement (ex. : clic sur un bouton).
• Directement via un appel dans le code JavaScript.
• De manière auto-invoquée (self-invoked).
Exemple d’appel :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 47 / 83
let x = myFunction(4, 3); // Retourne 12
Opérateur ()
• toCelsius : se réfère à l’objet fonction lui-même.
• toCelsius() : exécute la fonction et renvoie le résultat.
Exemple :
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}

let value = toCelsius(77); // value contiendra la conversion en Celsius
let fct = toCelsius; // fct est la référence à la fonction, sans
exécution
Utilisation et Avantages des Fonctions
Réutilisation du Code
Les fonctions permettent de réutiliser le même code avec des arguments différents pour obtenir
des résultats variés.
Exemple :
let tempText = "La température est " + toCelsius(77) + " Celsius";
Fonctions comme Valeurs de Variables
Les fonctions peuvent être utilisées comme des variables dans des expressions, des affectations
ou des calculs.
Variables Locales
Portée Locale
• Les variables déclarées à l’intérieur d’une fonction sont locales à cette fonction.
• Ces variables ne sont accessibles qu’à l’intérieur de la fonction où elles sont définies.
Exemple :
function myFunction() {
let carName = "Volvo"; // carName est locale à myFunction
console.log(carName); // Accessible ici
}
console.log(carName); // Erreur : carName n'est pas défini en dehors de
la fonction
Isolation des Noms
Des variables locales portant le même nom dans différentes fonctions n’entrent pas en conflit,
car leur portée est limitée à chaque fonction.
Retour de Valeur d’une Fonction
Le Mot-clé return
• Permet de renvoyer une valeur à l’appelant et de terminer l’exécution de la fonction.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 48 / 83
• Si la fonction est appelée dans une expression, la valeur retournée est utilisée pour
continuer l’exécution.
Exemple :
function myFunction(a, b) {
return a * b; // Renvoie le produit de a et b
}
let x = myFunction(4, 3); // x reçoit la valeur 12
Tableau Récapitulatif des Principaux Concepts
Concept Description Exemple
Déclaration de
fonction
Utilisation du mot-clé function suivi
d’un nom et d’une liste de paramètres
function myFunction(p1, p2) {
return p1 * p2; }
Paramètres Noms placés dans la définition de la fonction
(portée locale)
(p1, p2)
Arguments Valeurs réelles passées à la fonction lors de
son appel
myFunction(4, 3)
Invocation Exécution de la fonction avec l’opérateur () let x = myFunction(4, 3);
Retour de
fonction
Le mot-clé return renvoie une valeur et
termine l’exécution de la fonction
return a * b;
Opérateur () Utilisé pour appeler une fonction (exécuter
et renvoyer le résultat)
toCelsius(77) vs. toCelsius
Fonctions
comme
variables
Les fonctions peuvent être affectées à des
variables et utilisées directement dans des
expressions
let text = "La température est
" + toCelsius(77) + " Celsius";
Variables
locales
Variables définies à l’intérieur d’une
fonction, accessibles uniquement dans cette
fonction
let carName = "Volvo"; dans une
fonction
Conclusion
Les fonctions en JavaScript offrent un moyen puissant et flexible pour structurer et réutiliser du
code. Elles permettent d’isoler des logiques spécifiques dans des blocs modulaires, facilitant
ainsi la maintenance et l’extension des programmes. La compréhension des concepts de
déclaration, d’invocation, de portée locale et de retour de valeur est essentielle pour exploiter
pleinement le potentiel des fonctions dans vos applications.
Les Objets en JavaScript
Introduction
Les objets constituent l’un des concepts fondamentaux de JavaScript. Ils permettent de
modéliser des entités complexes en regroupant des propriétés (valeurs nommées) et des
méthodes (fonctions associées). La compréhension des objets est essentielle pour exploiter
pleinement la programmation orientée objet en JavaScript.
Objets dans la vie réelle
Dans la vie courante, les objets représentent des entités telles que des maisons, des voitures ou
des personnes. Par exemple, une voiture possède des propriétés (nom, modèle, poids, couleur)
et des méthodes (démarrer, conduire, freiner, s’arrêter).

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 49 / 83
Exemple de voiture :
Propriété Valeur Méthode
car.name Fiat car.start()
car.model 500 car.drive()
car.weight 850 kg car.brake()
car.color white car.stop()
Définir et manipuler des objets en JavaScript
Variables et Objets
• Variables simples : conteneurs pour des valeurs primitives (ex. : let car = "Fiat";).
• Objets : peuvent contenir plusieurs valeurs, par exemple :
const car = { type: "Fiat", model: "500", color: "white" };
Il est courant de déclarer les objets avec le mot-clé const pour éviter toute réaffectation.
Création d’un Objet
Avec un littéral d’objet
L’objet est défini par une liste de paires clé:valeur entre accolades.
Exemples :
// Déclaration sur une seule ligne
const person = { firstName: " ALI", lastName: "Ali", age: 50 };
// Déclaration sur plusieurs lignes (les espaces et sauts de ligne n’ont pas
d’importance)
const person = {
firstName: "ALI",
lastName: "Ali",
age: 50
};
Avec le mot-clé new Object()
Il est également possible de créer un objet vide puis d’y ajouter des propriétés :
const person = new Object();
person.firstName = "ALI";
person.lastName = "Ali";
person.age = 50;
Pour des raisons de lisibilité et de rapidité, l’utilisation des littéraux d’objet est recommandée.
Propriétés d’un Objet
Les propriétés d’un objet sont les valeurs associées à des clés. Elles peuvent être de types
primitifs, d’objets ou de fonctions.
• Accès aux propriétés :
o Par notation pointée : person.lastName
o Par notation crochet : person["lastName"]
• Ajout et suppression :
o Ajout d’une propriété :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 50 / 83
person.nationality = "English";
o Suppression d’une propriété :
delete person.age;
Méthodes d’un Objet
Les méthodes sont des fonctions stockées en tant que propriétés.
Exemple d’une méthode qui retourne le nom complet d’une personne :
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
L’appel de la méthode se fait ainsi :
let nomComplet = person.fullName();
Il est également possible d’ajouter une méthode à un objet existant ou via le prototype d’un
constructeur pour l’ensemble des instances.
Objets Imbriqués
Un objet peut contenir d’autres objets en tant que valeurs de ses propriétés.
Exemple :
const myObj = {
name: "ALI",
age: 30,
myCars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
};

// Accès à une propriété imbriquée
let voiture = myObj.myCars.car2;
Affichage et Manipulation des Objets
Affichage d’un Objet
L’affichage direct d’un objet dans le navigateur renvoie la chaîne [object Object].
Exemple :
document.getElementById("demo").innerHTML = person;
Affichage des Propriétés d’un Objet
Plusieurs méthodes permettent d’afficher le contenu d’un objet :
• Accès direct aux propriétés :
document.getElementById("demo").innerHTML = person.firstName + ", " +
person.age ;
• Boucle for...in :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 51 / 83
let text = "";
for (let key in person) {
text += person[key] + " ";
}
document.getElementById("demo").innerHTML = text;
• Utilisation de Object.values() :
const values = Object.values(person);
document.getElementById("demo").innerHTML = values;
• Utilisation de Object.entries() :
let text = "";
for (let [key, value] of Object.entries(person)) {
text += key + ": " + value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Constructeurs d’Objets
Fonction Constructrice
Pour créer de nombreux objets du même type, il est courant d’utiliser une fonction constructeur.
Par convention, on lui donne un nom commençant par une majuscule.
function Person(first, last, age) {
this.firstName = first;
this.lastName = last;
this.age = age;
}
Les objets se créent ensuite à l’aide de l’opérateur new :
const myFather = new Person(" ALI", "Ali", 50);
const myMother = new Person(" LEILA", "Leila", 48);
Propriétés par Défaut et Méthodes dans le Constructeur
Il est possible d’attribuer des valeurs par défaut dans le constructeur et d’ajouter des méthodes
:
function Person(first, last, age, eyeColor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.nationality = "English"; // valeur par défaut
this.fullName = function() {
return this.firstName + " " + this.lastName;
};
}
Pour ajouter une méthode à toutes les instances d’un constructeur, il est préférable d’utiliser le
prototype :
Person.prototype.changeName = function(newName) {
this.lastName = newName;
};
Constructeurs Intégrés
JavaScript met également à disposition des constructeurs intégrés pour créer divers types
d’objets :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 52 / 83
• new Object() pour créer un objet générique
• new Array() pour créer un tableau
• new Map() pour créer une map
• new Set() pour créer un ensemble
• new Date() pour créer un objet date
• new Function() pour créer une fonction
• new RegExp() pour créer une expression régulière
NB : Il est recommandé d’utiliser les littéraux (par exemple, {}, [], /.../) plutôt que ces
constructeurs pour une meilleure lisibilité et performance.
Conclusion
En JavaScript, les objets sont des structures puissantes et flexibles, essentielles pour organiser
et manipuler des données complexes. Ils regroupent des propriétés et des méthodes, permettant
de représenter des entités réelles ou abstraites. La maîtrise de leur création (via des littéraux ou
des fonctions constructrices), de leur manipulation (accès, modification, suppression) et de leur
affichage constitue une compétence indispensable pour le développement d’applications
robustes et évolutives.
Les tableaux en Javascript
Un tableau (array) est une variable spéciale qui permet de stocker plusieurs valeurs sous un
même nom. Il facilite le traitement et la manipulation de listes d’éléments (ex. : noms de
voitures).
Création et Déclaration d’un Tableau
Utilisation de la Littérale
• Syntaxe :
const array = [élément1, élément2, ...];
• Exemples :
const cars = ["Saab", "Volvo", "BMW"];
• Possibilité d’écrire la déclaration sur plusieurs lignes pour améliorer la lisibilité.
Ajout d’Éléments Après Déclaration
• Déclaration d’un tableau vide, puis affectation par indice :
const cars = [];
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
Utilisation du Mot-clé new Array()
• Exemple équivalent :
const cars = new Array("Saab", "Volvo", "BMW");

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 53 / 83
NB : La syntaxe littérale est recommandée pour sa simplicité et ses performances.
Accès et Modification des Éléments
Accès par Indice
• Les indices commencent à 0.
const cars = ["Saab", "Volvo", "BMW"];
let firstCar = cars[0]; // "Saab"
Modification d’un Élément
• Affecter une nouvelle valeur par indice :
cars[0] = "Opel";
Propriété length
• Retourne le nombre d’éléments :
let count = cars.length;
• On peut utiliser length pour ajouter un élément à la fin :
cars[cars.length] = "Lemon";
Conversion d’un Tableau en Chaîne de Caractères
• Méthode toString() :
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = fruits.toString(); // "Banana,Orange,Apple,Mango"
• Méthode join() pour définir un séparateur personnalisé :
let text = fruits.join(" * "); // "Banana * Orange * Apple * Mango"
Tableaux et Objets
• Les tableaux sont un type particulier d’objet.
• Accès par numéro d’indice pour les tableaux, par clé pour les objets.
• Un tableau peut contenir des éléments de différents types (valeurs primitives, objets,
fonctions, ou même d’autres tableaux).
Boucles et Itérations sur les Tableaux
Boucle for
Exemple pour afficher tous les éléments :
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let list = "<ul>";
for (let i = 0; i < fruits.length; i++) {
list += "<li>" + fruits[i] + "</li>";
}
list += "</ul>";

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 54 / 83
Méthode forEach()
Appel d’une fonction sur chaque élément :
let list = "<ul>";
fruits.forEach(function(item) {
list += "<li>" + item + "</li>";
});
list += "</ul>";
Ajout et Suppression d’Éléments
Ajout
• push() ajoute un élément à la fin :
fruits.push("Kiwi");
• Affectation par indice (en utilisant length) :
fruits[fruits.length] = "Lemon";
Suppression
• pop() retire le dernier élément et le renvoie :
let removed = fruits.pop();
• shift() retire le premier élément et décale les autres :
let first = fruits.shift();
• unshift() ajoute un élément en début de tableau :
fruits.unshift("Lemon");
NB : L’utilisation de delete sur un élément laisse un "trou" (valeur indéfinie).
Fusion et Découpage des Tableaux
Concaténation
• concat() permet de fusionner plusieurs tableaux :
const merged = arr1.concat(arr2, arr3);
Découpage
• slice() extrait une portion d’un tableau sans modifier l’original :
const newArray = fruits.slice(1, 3); // Extrait du 2ème au 3ème élément
• splice() permet d’ajouter ou de supprimer des éléments et modifie le tableau
original :
fruits.splice(2, 0, "Lemon", "Kiwi"); // Ajoute deux éléments à partir
de l'indice 2
Tri et Recherche dans un Tableau
Tri
• sort() trie les éléments (alphabetiquement par défaut) :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 55 / 83
fruits.sort();
• Pour un tri numérique, fournir une fonction de comparaison :
points.sort(function(a, b) { return a - b; });
• reverse() inverse l’ordre des éléments.
Recherche
• indexOf() retourne l’indice de la première occurrence d’un élément ou -1 si
introuvable :
let pos = fruits.indexOf("Apple");
• lastIndexOf() retourne l’indice de la dernière occurrence.
• includes() vérifie la présence d’un élément dans le tableau :
let exists = fruits.includes("Mango");
Méthodes d’Itération et de Transformation
Itération
• forEach() pour itérer sur chaque élément.
• map() pour transformer un tableau et renvoyer un nouveau tableau.
• filter() pour créer un nouveau tableau avec les éléments qui passent un test.
• reduce() et reduceRight() pour réduire un tableau à une seule valeur (ex.
somme).
Autres Méthodes Utiles
• flat() pour aplatir un tableau multidimensionnel.
• flatMap() combine map() et flat() en une seule opération.
• Array.from() pour créer un tableau à partir d’un objet itérable.
Utilisation de const pour les Tableaux
• Les tableaux déclarés avec const ne peuvent pas être réaffectés, mais leurs éléments
peuvent être modifiés.
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Toyota"; // Autorisé
cars.push("Audi"); // Autorisé
// cars = ["Toyota", "Volvo", "Audi"]; // Erreur
• Le mot-clé const impose également une portée de bloc.
Conclusion
Les tableaux en JavaScript offrent une structure flexible pour stocker et manipuler des listes
d’éléments. Grâce à une large palette de méthodes intégrées (ajout, suppression, tri, découpage,
recherche, itération), ils permettent de réaliser de nombreuses opérations courantes de manière
efficace. La compréhension de leur fonctionnement et de leurs particularités (indices, propriété

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 56 / 83
length, tri et méthodes de transformation) est essentielle pour développer des applications
robustes.
Tableau Récapitulatif des Méthodes de Manipulation des Tableaux
Afin de faciliter la révision et la compréhension des différentes méthodes et fonctions associées
aux tableaux en JavaScript, nous vous proposons ci-dessous un tableau récapitulatif
synthétique. Ce tableau présente, de manière concise, chacune des fonctions abordées dans ce
support, accompagnée d’une brève description et d’un exemple d’utilisation. Il constitue un
outil de référence pratique que vous pourrez consulter pour mieux maîtriser les manipulations
de tableaux en JavaScript.
Fonction / Méthode Description Exemple
toString() Convertit un tableau en une chaîne
de caractères, séparant les éléments
par des virgules.
["Banana",
"Orange"].toString(); //
"Banana,Orange"
join(separateur) Concatène les éléments du tableau en
une chaîne en utilisant le séparateur
spécifié.
["Banana", "Orange"].join("
* "); // "Banana * Orange"
forEach(callback) Exécute une fonction (callback) pour
chaque élément du tableau.
["Banana",
"Orange"].forEach(item =>
console.log(item));
push(élément) Ajoute un ou plusieurs éléments à la
fin du tableau et retourne la nouvelle
longueur.
let fruits = ["Banana",
"Orange"];
fruits.push("Apple"); //
fruits = ["Banana",
"Orange", "Apple"]
pop() Retire et retourne le dernier élément
du tableau, modifiant le tableau
original.
let fruits = ["Banana",
"Orange", "Apple"]; let last
= fruits.pop(); // last =
"Apple", fruits = ["Banana",
"Orange"]
shift() Retire et retourne le premier élément
du tableau et décale les éléments vers
un indice inférieur.
let fruits = ["Banana",
"Orange", "Apple"]; let
first = fruits.shift(); //
first = "Banana", fruits =
["Orange", "Apple"]
unshift(élément) Ajoute un ou plusieurs éléments au
début du tableau et retourne la
nouvelle longueur.
let fruits = ["Orange",
"Apple"];
fruits.unshift("Banana");
// fruits = ["Banana",
"Orange", "Apple"]
concat() Fusionne deux ou plusieurs tableaux
et retourne un nouveau tableau sans
modifier les originaux.
let merged =
["Banana"].concat(["Orange"
]); // merged = ["Banana",
"Orange"]
slice(start, end) Extrait une portion du tableau (de
l'indice start à end, non inclus) et
retourne un nouveau tableau sans
altérer l’original.
let sub = ["Banana",
"Orange", "Apple",
"Mango"].slice(1, 3); // sub
= ["Orange", "Apple"]
splice(index, nb,
…éléments)
Ajoute, supprime ou remplace des
éléments dans le tableau, modifiant
le tableau original et renvoyant les
éléments supprimés.
let fruits = ["Banana",
"Orange", "Apple",
"Mango"]; fruits.splice(2,
1, "Kiwi"); // fruits =
["Banana", "Orange",
"Kiwi", "Mango"]
sort(compareFuncti
on)
Trie les éléments du tableau selon un
ordre défini (par défaut
let numbers = [40, 100, 1,
5]; numbers.sort((a, b) => a

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 57 / 83
alphabétique) et modifie le tableau
original.
- b); // numbers = [1, 5,
40, 100]
reverse() Inverse l’ordre des éléments du
tableau et modifie le tableau original.
let fruits = ["Banana",
"Orange", "Apple"];
fruits.reverse(); // fruits
= ["Apple", "Orange",
"Banana"]
map(callback) Crée un nouveau tableau en
appliquant une fonction de
transformation sur chaque élément
du tableau.
let doubled = [1, 2,
3].map(x => x * 2); //
doubled = [2, 4, 6]
filter(callback) Crée un nouveau tableau contenant
uniquement les éléments qui
satisfont la condition définie par la
fonction de test.
let evens = [1, 2, 3, 4,
5].filter(x => x % 2 === 0);
// evens = [2, 4]
reduce(callback,
init)
Réduit le tableau à une seule valeur
en cumulant les éléments via une
fonction de réduction.
let sum = [1, 2, 3,
4].reduce((total, x) =>
total + x, 0); // sum = 10
reduceRight(callba
ck, init)
Comme reduce(), mais le traitement
s’effectue de la droite vers la gauche.
let sum = [1, 2, 3,
4].reduceRight((total, x)
=> total + x, 0); // sum =
10
flat(depth) Aplati un tableau multidimensionnel
jusqu’à la profondeur spécifiée et
retourne un nouveau tableau aplati.
let flatArr = [1, [2, [3,
4]]].flat(2); // flatArr =
[1, 2, 3, 4]
flatMap(callback) Combine les méthodes map() et flat()
: transforme chaque élément puis
aplatit le résultat d’un niveau.
let result = [1, 2,
3].flatMap(x => [x, x * 2]);
// result = [1, 2, 2, 4, 3,
6]
indexOf(element,
start)
Renvoie l’indice de la première
occurrence de l’élément dans le
tableau, ou -1 s’il n’est pas trouvé.
let pos = ["Apple",
"Banana",
"Apple"].indexOf("Apple");
// pos = 0
lastIndexOf(elemen
t, start)
Renvoie l’indice de la dernière
occurrence de l’élément dans le
tableau, ou -1 s’il n’est pas trouvé.
let pos = ["Apple",
"Banana",
"Apple"].lastIndexOf("Apple
"); // pos = 2
includes(element) Vérifie si le tableau contient
l’élément et renvoie true (présent) ou
false (absent).
["Banana", "Orange",
"Apple"].includes("Apple");
// true
Array.from() Crée un nouveau tableau à partir
d’un objet itérable ou ayant une
propriété length.
let arr = Array.from("ABC");
// arr = ["A", "B", "C"]
keys() Retourne un itérateur sur les indices
du tableau.
for (let key of ["Apple",
"Banana"].keys()) {
console.log(key); } //
affiche 0 puis 1
entries() Retourne un itérateur sur des paires
[indice, valeur] pour chaque élément
du tableau.
for (let entry of ["Apple",
"Banana"].entries()) {
console.log(entry); } //
affiche [0,"Apple"],
[1,"Banana"]
with(index,
newValue)
(ES2023) Retourne un nouveau
tableau en remplaçant l’élément à
l’indice spécifié, sans modifier
l’original.
const newMonths = ["Jan",
"Feb", "Mar"].with(1,
"February"); // newMonths =
["Jan", "February", "Mar"]
... (Spread
operator)
Déploie (étend) un tableau dans un
contexte où plusieurs éléments sont
attendus, par exemple pour fusionner
des tableaux.
const c = [...[1, 2], ...[3,
4]]; // c = [1, 2, 3, 4]

Partie II
DOM (Document Object Model)
Le Document Object Model (DOM) constitue l’interface
essentielle entre JavaScript et la structure d’une page web. Dans
cette seconde partie, nous explorerons comment sélectionner,
modifier et structurer dynamiquement le contenu HTML et CSS.
Vous verrez comment réagir aux événements utilisateur,
naviguer dans l’arbre des nœuds, et créer, insérer ou supprimer
des éléments de manière fluide. À travers des exemples pratiques
et des manipulations pas à pas, vous acquerrez les compétences
nécessaires pour développer des interfaces interactives et
réactives, en tirant pleinement parti de l’API DOM standardisée
par le W3C.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 59 / 83
Qu’est-ce que le DOM ?
Lorsqu’une page Web est chargée, le navigateur construit pour elle un Document Object
Model (modèle d’objet de document), abrégé en DOM.
Le DOM représente la page sous la forme d’un arbre d’objets : chaque nœud de cet arbre
correspond à un élément, un attribut ou un fragment de texte du document HTML.

Figure 1 : Arbre d’objets du DOM HTML
Les atouts du DOM pour JavaScript
Le modèle objet du DOM offre à JavaScript toute la puissance nécessaire pour créer des pages
dynamiques. Concrètement, JavaScript peut :
• Modifier tous les éléments HTML de la page
• Changer toutes les valeurs d’attributs HTML
• Ajuster tous les styles CSS appliqués
• Supprimer des éléments ou attributs HTML existants
• Ajouter de nouveaux éléments ou attributs HTML
• Réagir à tous les événements HTML natifs
• Générer de nouveaux événements HTML
Ce que vous allez apprendre
Dans les chapitres suivants de ce tutoriel, vous verrez comment :
1. Modifier le contenu des éléments HTML
2. Changer le style (CSS) des éléments HTML
3. Réagir aux événements du DOM
4. Ajouter et supprimer des éléments HTML
Le DOM comme standard W3C
Le DOM est un standard défini par le World Wide Web Consortium (W3C). Il établit une
interface neutre vis-à-vis de la plateforme et du langage, permettant aux programmes et scripts
d’accéder et de mettre à jour dynamiquement le contenu, la structure et le style d’un document.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 60 / 83
Le standard DOM du W3C se compose de trois volets :
• Core DOM : modèle de base commun à tous types de documents
• XML DOM : modèle standard pour les documents XML
• HTML DOM : modèle standard pour les documents HTML
Spécificités du HTML DOM
Le HTML DOM définit un modèle objet ainsi qu’une interface de programmation pour le
HTML :
• Il considère chaque élément HTML comme un objet
• Il expose les propriétés de tous les éléments HTML
• Il fournit les méthodes permettant d’accéder à ces éléments
• Il définit les événements associés à chaque élément HTML
Autrement dit, le HTML DOM normalise la manière
de récupérer, modifier, ajouter ou supprimer des éléments HTML au sein d’une page.
Méthodes du DOM
En JavaScript, les méthodes du DOM HTML correspondent aux actions que l’on peut effectuer
sur les éléments HTML, tandis que les propriétés sont les valeurs associées à ces éléments que
l’on peut lire ou modifier.
Interface de programmation du DOM
• Dans le Document Object Model, tous les éléments HTML sont représentés sous
forme d’objets.
• L’interface de programmation est constituée des propriétés et des méthodes propres à
chaque objet DOM.
o Une propriété est une valeur que l’on peut obtenir ou définir (par exemple, le
contenu d’un élément HTML).
o Une méthode est une action que l’on peut exécuter (par exemple, ajouter ou
supprimer un élément HTML).
Exemple concret
Le code suivant remplace le contenu de l’élément <p> portant l’attribut id="demo" par le texte
« Bonjour tout le monde ! »:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple DOM</title>
</head>
<body>

<p id="demo"></p>

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 61 / 83

<script>
// La méthode getElementById() récupère l’élément dont l’id est "demo"
// innerHTML est la propriété qui définit son contenu HTML
document.getElementById("demo").innerHTML = "Bonjour tout le monde !" ;
</script>

</body>
</html>
• getElementById est une méthode permettant de retrouver un élément à partir de son
identifiant.
• innerHTML est une propriété utilisée pour lire ou remplacer le contenu HTML de
l’élément ciblé.
Méthode getElementById()
C’est la manière la plus courante d’accéder à un élément HTML : on fournit la valeur de son
attribut id.
const monElement = document.getElementById("monId");
Propriété innerHTML
Cette propriété sert à récupérer ou à modifier le contenu HTML (texte et balises) d’un élément :
// Lire le contenu
let contenu = monElement. innerHTML;

// Modifier le contenu
monElement.innerHTML = "<strong>Nouveau contenu</strong>" ;
Vous pouvez utiliser innerHTML sur n’importe quel élément HTML, y
compris <html> ou <body>.
Objet Document (Document)
L’objet document du DOM HTML est le propriétaire de tous les autres objets de votre page
Web. Il représente la page entière et constitue le point de départ pour toute manipulation DOM.
Accéder à l’objet document
Pour cibler un élément dans une page HTML avec JavaScript, on commence toujours par
l’objet document :
// Exemple : récupérer l’élément <p> dont l’id est "monParagraphe"
const monParagraphe = document.getElementById("monParagraphe");
Trouver des éléments HTML
Méthode Description

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 62 / 83
document.getElementById(id) Trouve un élément à partir de son id.
document.getElementsByTagName(nomBalise) Récupère tous les éléments du nom de balise
donné.
document.getElementsByClassName(nomClasse) Récupère tous les éléments portant une classe
donnée.
Modifier des éléments HTML
Propriétés
element.innerHTML = "<em>Nouveau contenu</em>" ;
element.maValeurAttribut = "nouvelleValeur";
element.style.maProprieteCSS = "nouvelleValeur";

Méthode
element.setAttribute("attribut", "nouvelleValeur");
Ajouter et supprimer des éléments
Méthode Description
document.createElement(nomÉlément) Crée un nouvel élément HTML.
parent.removeChild(enfant) Supprime un élément enfant.
parent.appendChild(enfant) Ajoute un élément enfant à un parent.
parent.replaceChild(nouveau,
ancien)
Remplace un élément enfant par un autre.
document.write(texte) Écrit du texte directement dans le flux HTML (à utiliser
avec prudence).
Ajouter un gestionnaire d’événements
document.getElementById("bouton").onclick = function() {
// code à exécuter lors du clic
};
Propriétés et collections de l’objet document
Le DOM HTML Level 1 (1998) définissait déjà plusieurs objets et collections, toujours valides
en HTML5. Le Level 3 en a ajouté d’autres.
Propriété Description
Nive
au
DO
M
document.body L’élément <body> 1
document.head L’élément <head> 3
document.document
Element
L’élément <html> 3

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 63 / 83
document.title Le contenu de <title> 1
document.URL L’URL complète du document 1
document.cookie Le ou les cookies du document 1
document.forms Collection de tous les formulaires (<form>) 1
document.images Collection de toutes les images (<img>) 1
document.links Collection des <a> et <area> avec attribut href 1
document.scripts Collection de tous les scripts (<script>) 3
document.embeds Collection des éléments <embed> 3
document.baseURI L’URI de base absolue du document 3
document.doctype Le type de document (<!DOCTYPE>) 3
document.readySta
te
État de chargement du document
(loading, interactive, complete)
3
document.lastModi
fied
Date et heure de la dernière modification du document 3
document.referrer URI du document ayant effectué la liaison 1
Dépréciées document.anchors, document.applets, document.domain
, document.domConfig
1 / 3
DOM Elements
Cette section explique comment repérer et accéder aux éléments HTML dans une page à l’aide
de JavaScript.
Pourquoi trouver des éléments HTML ?
Pour manipuler un élément (modifier son contenu, son style, le supprimer, etc.), il faut d’abord
le localiser dans le DOM. Plusieurs méthodes existent selon le critère de recherche.
1. Par identifiant (id)
La façon la plus simple de récupérer un élément est d’utiliser son attribut id :
const element = document.getElementById("intro");
• Si un élément avec id="intro" existe, la méthode renvoie l’objet correspondant.
• Sinon, element vaut null.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 64 / 83
2. Par nom de balise
Pour obtenir tous les éléments d’un type donné (par exemple, tous les <p>), on utilise :
const elements = document.getElementsByTagName("p");
On peut aussi restreindre la recherche à une sous-arborescence :
const main = document.getElementById("main");
const paragraphs = main.getElementsByTagName("p");
3. Par nom de classe
Pour sélectionner tous les éléments partageant une même classe CSS :
const intros = document.getElementsByClassName ("intro");
4. Par sélecteurs CSS
La méthode querySelectorAll() permet d’employer n’importe quel sélecteur CSS : type,
identifiant, classe, attributs, etc. :
// Tous les <p> ayant la classe "intro"
const intros = document.querySelectorAll("p.intro");
On peut également utiliser querySelector() pour ne récupérer que le premier élément
correspondant.
5. Par collections d’objets HTML
Le DOM expose plusieurs collections d’objets prêtes à l’emploi :
// Exemple : lire les valeurs d’un formulaire
const form = document.forms["frm1"];
let resultat = "";
for (let i = 0; i < form.elements.length; i++) {
resultat += form.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = resultat;
Parmi les collections disponibles :
• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 65 / 83
• document.title
DOM – Modification du contenu HTML
Le DOM HTML permet à JavaScript de modifier dynamiquement le contenu et les attributs des
éléments d’une page Web.
1. Modifier le contenu d’un élément HTML
La manière la plus simple pour changer le contenu d’un élément consiste à utiliser la
propriété innerHTML.
document.getElementById("monId").innerHTML = "Nouveau contenu HTML" ;

Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Modifier le contenu</title>
</head>
<body>

<p id="p1">Bonjour le monde !</p>

<script>
document.getElementById("p1").innerHTML = "Texte mis à jour !";
</script>

</body>
</html>
• La page contient un paragraphe <p id="p1">.
• La méthode getElementById("p1") récupère cet élément.
• La propriété innerHTML est réassignée pour remplacer « Bonjour le monde ! » par
« Texte mis à jour ! ».
Autre exemple avec un titre <h1> :
<!DOCTYPE html>
<html lang="fr">
<body>

<h1 id="titre">Ancien titre</h1>

<script>
const elt = document.getElementById("titre");
elt.innerHTML = "Nouveau titre";
</script>

</body>
</html>

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 66 / 83
2. Modifier la valeur d’un attribut
Pour changer un attribut d’un élément HTML, on peut réassigner directement la propriété
correspondante :
document.getElementById("monImage").src = "nouvelle-image.jpg";

Exemple :
<!DOCTYPE html>
<html lang="fr">
<body>

<img id="monImage" src="smiley.gif" alt="Smiley">

<script>
document.getElementById("monImage").src = "paysage.jpg";
</script>

</body>
</html>
• L’image initiale affiche smiley.gif.
• Après exécution du script, le src devient paysage.jpg.
3. Contenu HTML dynamique
JavaScript peut générer du contenu entièrement dynamique, par exemple en affichant la date et
l’heure courantes :
<!DOCTYPE html>
<html lang="fr">
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Date : " + Date();
</script>

</body>
</html>
4. Utilisation de document.write()
La méthode document.write() écrit directement dans le flux HTML pendant le chargement
de la page :
<!DOCTYPE html>
<html lang="fr">
<body>

<p>Avant le script</p>

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 67 / 83
<script>
document.write("Il est " + new Date());
</script>

<p>Après le script</p>

</body>
</html>
Attention : N’utilisez jamais document.write() une fois le document entièrement chargé, car
cela efface tout le contenu de la page.
Formulaires (DOM Forms)
Le DOM HTML permet à JavaScript de contrôler la validation et la gestion des formulaires
avant leur envoi au serveur.
1. Validation manuelle avec JavaScript
On peut vérifier au moment de la soumission si certains champs ont bien été renseignés.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Validation de formulaire </title>
<script>
function validateForm() {
// Récupère la valeur du champ fname dans le formulaire nommé "myForm"
const x = document.forms["myForm"]["fname"].value;
if (x === "") {
alert("Le nom doit être renseigné." );
return false; // Empêche l’envoi du formulaire
}
return true; // Autorise l’envoi si tout est ok
}
</script>
</head>
<body>

<form name="myForm" action="/action_page.php"
onsubmit="return validateForm()" method="post">
Nom : <input type="text" name="fname">
<input type="submit" value="Envoyer">
</form>

</body>
</html>
Explication :
1. La fonction validateForm() est invoquée lors de l’événement onsubmit.
2. Si le champ « fname » est vide, une alerte s’affiche et la soumission est annulée.
Vous pouvez également valider des entrées numériques :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 68 / 83
<form name="numForm" onsubmit="return validateNumber()" >
Entrez un nombre entre 1 et 10  :
<input type="number" name="num" min="1" max="10">
<input type="submit" value="Vérifier">
</form>

<script>
function validateNumber() {
const n = document.forms["numForm"]["num"].value;
if (n < 1 || n > 10) {
alert("Veuillez entrer un nombre compris entre 1 et 10." );
return false;
}
return true;
}
</script>
2. Validation automatique du navigateur
Depuis HTML5, certains attributs d’input déclenchent automatiquement une vérification :
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Envoyer">
</form>
• L’attribut required empêche l’envoi si le champ est vide.
• Cette validation ne fonctionne pas dans Internet Explorer 9 et versions antérieures.
3. Principes de la validation des données
La validation des données garantit que les informations saisies sont propres, correctes et
exploitables.
Questions typiques :
• L’utilisateur a-t-il rempli tous les champs obligatoires ?
• La date saisie est-elle valide ?
• Du texte n’a-t-il pas été entré dans un champ numérique ?
Modes de validation :
• Côté client (navigateur) : feedback immédiat avant envoi.
• Côté serveur : contrôle des données à la réception, indispensable pour la sécurité.
4. Validation par contraintes (Constraint Validation API)
HTML5 propose un modèle de validation fondé sur :
1. Attributs d’entrée (input)
2. Pseudo-sélecteurs CSS
3. Propriétés et méthodes du DOM

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 69 / 83
4.1 Attributs de validation
Attribut Description
required Champ obligatoire
type Type de saisie (email, number, url, etc.)
min Valeur minimale pour les champs numériques
max Valeur maximale pour les champs numériques
pattern Expression régulière que la saisie doit respecter
disabled Désactive le champ
4.2 Pseudo-sélecteurs CSS
Sélecteur Effet
:required Cible les champs ayant required
:optional Cible les champs sans l’attribut required
:valid Cible les champs dont la saisie est conforme aux contraintes
:invalid Cible les champs dont la saisie viole une contrainte
:disabled Cible les champs désactivés
DOM – Modification des styles CSS
Le DOM HTML permet à JavaScript de modifier dynamiquement l’apparence des éléments
d’une page.
1. Changer le style d’un élément
Pour ajuster une propriété CSS d’un élément, on utilise la syntaxe :
document.getElementById("monId").style.proprieteCSS = "nouvelleValeur";

Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Modifier le CSS</title>
</head>
<body>

<p id="p2">Bonjour le monde !</p>

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 70 / 83
<script>
// Le paragraphe passe en bleu
document.getElementById("p2").style.color = "blue";
</script>

</body>
</html>
2. Modifier le style en réponse à un événement
Le DOM permet d’exécuter du code JavaScript lorsqu’un événement survient (clic, chargement
de la page, modification d’un champ, etc.).
Exemple : changer la couleur d’un titre au clic sur un bouton
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Événements et CSS</title>
</head>
<body>

<h1 id="id1">Mon titre principal</h1>

<button type="button"
onclick="document.getElementById('id1').style.color = 'red'" >
Cliquez ici !
</button>

</body>
</html>
• L’attribut onclick du bouton déclenche la modification de la propriété CSS color de
l’élément <h1> identifié par id="id1".
DOM – Animations
Le DOM HTML permet de réaliser des animations en modifiant progressivement les styles des
éléments via JavaScript.
1. Structure de base de la page
Pour illustrer le principe, partons d’une page simple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Première animation JavaScript </title>
</head>
<body>

<h1>Ma première animation JavaScript </h1>
<div id="animation">Ici se déroulera l’animation </div>

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 71 / 83
</body>
</html>
2. Créer un conteneur d’animation
Toutes les animations doivent s’appuyer sur un élément conteneur positionné relativement.
L’élément animé sera positionné absolument à l’intérieur de ce conteneur :
<div id="container">
<div id="animate">Ici se déroulera l’animation </div>
</div>
3. Définir les styles CSS
#container {
width: 400px;
height: 400px;
position: relative; /* Conteneur positionné relativement */
background: yellow;
}

#animate {
width: 50px;
height: 50px;
position: absolute; /* Élément animé positionné absolument */
background: red;
}
4. Principe de l’animation
Une animation JavaScript consiste à appliquer, à intervalles réguliers, des modifications de style
à un élément. On utilise un timer (setInterval) pour exécuter une fonction qui fera évoluer
progressivement les propriétés CSS (par exemple top et left).
// Lance l’appel répété de la fonction frame toutes les 5 millisecondes
let id = setInterval(frame, 5);

function frame() {
if (/* condition d’arrêt */ ) {
clearInterval(id); // Stoppe le timer lorsque l’animation est terminée
} else {
// Modification progressive du style de l’élément
}
}
5. Exemple complet d’animation
L’exemple suivant déplace un carré rouge du coin supérieur gauche jusqu’à 350 px vers la
droite et vers le bas :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Animation JavaScript </title>
<style>

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 72 / 83
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
</head>
<body>

<h1>Mon animation JavaScript </h1>

<div id="container">
<div id="animate"></div>
</div>

<button onclick="myMove()">Démarrer l’animation </button>

<script>
function myMove() {
let id = null;
const elem = document.getElementById("animate");
let pos = 0;
clearInterval(id); // S’assure qu’aucun timer
n’est déjà actif
id = setInterval(frame, 5); // Appelle frame() toutes
les 5 ms

function frame() {
if (pos === 350) { // Condition d’arrêt
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px'; // Déplace vers le bas
elem.style.left = pos + 'px'; // Déplace vers la droite
}
}
}
</script>

</body>
</html>
• Le bouton déclenche la fonction myMove().
• Celle-ci initialise la position à 0 puis augmente pos à chaque appel de frame.
• Les propriétés CSS top et left de l’élément animé sont mises à jour pour créer l’effet
de déplacement fluide.
DOM – Événements
Le DOM HTML permet à JavaScript de répondre aux événements générés par l’utilisateur ou
le navigateur.

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 73 / 83
1. Qu’est-ce qu’un événement ?
Un événement correspond à toute action ou changement d’état relatif à un élément HTML, par
exemple :
• Clic de souris
• Chargement de la page ou d’une image
• Déplacement du curseur sur un élément
• Modification d’un champ de saisie
• Soumission d’un formulaire
• Appui sur une touche du clavier
2. Réagir à un événement avec un attribut HTML
Vous pouvez associer directement du code JavaScript à un attribut d’événement dans la balise
HTML :

<h1 onclick="this.innerHTML = 'Oops !'" >
Cliquez sur ce texte !
</h1>
Ou faire appel à une fonction :
<h1 onclick="changeText(this)">
Cliquez sur ce texte !
</h1>

<script>
function changeText(element) {
element.innerHTML = "Oops !";
}
</script>
3. Attributs d’événement courants
Événement Description
onclick Déclenché au clic de souris
onload Déclenché à la fin du chargement de la page ou d’une ressource
onunload Déclenché lorsque l’utilisateur quitte la page
oninput Déclenché à chaque modification du contenu d’un champ
onchange Déclenché lorsque la valeur d’un champ perd le focus et change
onmouseover Déclenché lorsque le curseur passe au-dessus d’un élément
onmouseout Déclenché lorsque le curseur quitte un élément
onmousedown Déclenché à l’appui d’un bouton de souris

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 74 / 83
onmouseup Déclenché au relâchement d’un bouton de souris
4. Associer un gestionnaire d’événements en JavaScript
Au lieu d’utiliser un attribut HTML, vous pouvez lier un événement depuis le script :
<button id="myBtn">Afficher la date</button>

<script>
// Assigne la fonction displayDate à l'événement click de l'élément #myBtn
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
alert(new Date());
}
</script>
5. Quelques cas d’usage
• onload / onunload : détecter l’entrée ou la sortie de l’utilisateur, gérer les cookies,
adapter le contenu selon le navigateur.
<body onload="initializePage()" onunload="saveState()">
• oninput : transformer automatiquement le texte saisi (ex. passage en majuscules).
<input type="text" id="fname" oninput="toUpperCase(this)">
• onchange : valider une saisie après modification.
<input type="text" id="age" onchange="validateAge()">
• onmouseover / onmouseout : animer ou styliser un élément au passage du curseur.
<div onmouseover="highlight(this)" onmouseout="unhighlight(this)">
Survolez-moi
</div>
DOM – Gestionnaires d’événements avancés
(addEventListener)
La méthode addEventListener() offre un moyen souple d’attacher des gestionnaires
d’événements à un élément sans écraser ceux déjà existants, et de séparer le code JavaScript du
balisage HTML.
1. Syntaxe et principes
element.addEventListener(typeÉvénement, fonctionGestionnaire, useCapture);
• typeÉvénement : nom de l’événement sans préfixe « on » (ex. "click", "mousedown",
etc.).

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 75 / 83
• fonctionGestionnaire : la fonction à exécuter lorsque l’événement se produit.
• useCapture (optionnel) : booléen indiquant si l’on souhaite utiliser la capture (true)
plutôt que le bubbling (false, valeur par défaut).
Remarque : pour retirer un gestionnaire ajouté, on utilise removeEventListener() avec la
même signature.
2. Ajouter un gestionnaire
Directement avec une fonction anonyme :
document.getElementById("myBtn")
.addEventListener("click", function() {
alert("Bonjour le monde !");
});
Avec une fonction nommée :
document.getElementById("myBtn")
.addEventListener("click", afficherDate);

function afficherDate() {
alert(new Date());
}
3. Ajouter plusieurs gestionnaires au même élément
element.addEventListener("click", fonctionA);
element.addEventListener("click", fonctionB);
On peut même mixer différents types d’événements :
element.addEventListener("mouseover", sourisEntree);
element.addEventListener("mouseout", sourisSortie);
element.addEventListener("click", clicSouris);
4. Sur d’autres objets DOM
addEventListener() fonctionne avec tout objet supportant les événements :
• Éléments HTML (<button>, <div>, etc.)
• Objet window
• Objet document
• Objets personnalisés (ex. XMLHttpRequest)
Exemple – redimensionnement de la fenêtre :
window.addEventListener("resize", function() {
document.getElementById("demo")
.innerHTML = "Nouvelle taille de fenêtre  : " + window.innerWidth +
"×" + window.innerHeight;
});

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 76 / 83
5. Passage de paramètres
Pour transmettre des arguments à votre gestionnaire, encapsulez l’appel dans une fonction
anonyme :
element.addEventListener("click", function() {
maFonction(param1, param2);
});
6. Propagation des événements : bubbling vs capture
• Bubbling (par défaut, useCapture = false) : l’événement est d’abord géré par
l’élément le plus interne, puis remonte vers les parents.
• Capture (useCapture = true) : l’événement est pris en charge d’abord par les
éléments externes, pour descendre ensuite jusqu’à l’élément cible.
// Gestion en phase de capture
document.getElementById("monP")
.addEventListener("click", maFonction, true);
document.getElementById("monDiv")
.addEventListener("click", maFonction, true);
7. Suppression d’un gestionnaire
element.removeEventListener("mousemove", maFonction);
Cela désassocie la fonction maFonction de l’événement "mousemove" sur l’élément donné.
DOM – Navigation dans l’arbre des nœuds
Le DOM HTML représente le document comme un arbre de nœuds. Chaque nœud correspond
à une partie du document : balise, texte, attribut ou commentaire. JavaScript peut explorer cet
arbre pour lire, modifier, créer ou supprimer des nœuds.
1. Types de nœuds
Selon la spécification W3C, tout dans un document HTML est un nœud :
• Document (nœud racine)
• Élément (balises HTML)
• Texte (contenu textuel à l’intérieur des balises)
• Attribut (propriétés des balises – déprécié en HTML)
• Commentaire
2. Relations hiérarchiques
Chaque nœud (sauf le nœud racine) a un parent et peut avoir des enfants ; deux nœuds partagent
une relation de frères/soeurs s’ils ont le même parent.
Illustration avec ce document :

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 77 / 83
<html>
<head>
<title>Leçon DOM</title>
</head>
<body>
<h1>Introduction au DOM</h1>
<p>Bonjour monde !</p>
</body>
</html>
• <html> est la racine (root).
• Ses enfants sont <head> et <body>.
• <head> a pour unique enfant <title>, lui-même contenant un nœud texte « Leçon
DOM ».
• <body> contient <h1> et <p>, qui sont frères.
3. Propriétés de navigation
Propriété Description
parentNode Nœud parent
childNodes[index] Tableau de tous les enfants
firstChild Premier enfant
lastChild Dernier enfant
nextSibling Nœud suivant (même parent)
previousSibling Nœud précédent (même parent)
Exemple : lire le contenu texte d’un <h1> puis l’attribuer à un <p> :
const titre = document.getElementById("id01").firstChild.nodeValue;
const parag = document.getElementById("id02");
parag.innerHTML = titre;
4. Texte vs Élément
Un élément ne contient pas directement de texte, mais un nœud texte enfant. Pour récupérer la
chaîne :
• innerHTML renvoie le contenu HTML/textuel de l’élément.
• firstChild.nodeValue ou childNodes[0].nodeValue donne la même chaîne pour
un nœud texte unique.
5. Accès aux nœuds racine
Deux propriétés fournissent l’accès direct aux parties majeures du document :
• document.body → l’élément <body>
• document.documentElement → l’élément racine <html>

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 78 / 83
Exemple :
// Affiche tout le contenu de <body>
document.getElementById("demo").innerHTML = document.body.innerHTML;
6. Propriétés de définition d’un nœud
Propriété Valeur retournée
nodeName Nom du nœud (balise en MAJUSCULE ou #text, #document)
nodeValue Contenu du nœud (texte pour un nœud TEXTE, null pour un élément)
nodeType Type de nœud (chiffre) :

• 1 = ELEMENT_NODE

• 2 = ATTRIBUTE_NODE (déprécié HTML)

• 3 = TEXT_NODE

• 8 = COMMENT_NODE

• 9 = DOCUMENT_NODE

• 10 = DOCUMENT_TYPE_NODE
Exemple :
<h1 id="id01">Ma Page</h1>
<p id="id02"></p>
<script>
// Affiche "H1"
document.getElementById("id02").innerHTML =
document.getElementById("id01").nodeName;
</script>
Ajouter et supprimer des nœuds (éléments HTML)
Le DOM permet de créer, d’insérer, de remplacer et de supprimer dynamiquement des nœuds
(éléments HTML) au sein d’une page.
1. Créer et ajouter un nouvel élément
Pour ajouter un élément, on procède en deux étapes :
1. Créer l’élément et son contenu
2. Insérer cet élément dans le document
<div id="div1">
<p id="p1">Ceci est un paragraphe. </p>
<p id="p2">Ceci est un autre paragraphe. </p>
</div>

<script>
// 1. Création du nouvel élément <p> et de son nœud texte
const para = document.createElement("p");

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 79 / 83
const text = document.createTextNode("Ceci est un paragraphe ajouté." );
para.appendChild(text);

// 2. Insertion du nouvel élément à la fin de #div1
const container = document.getElementById("div1");
container.appendChild(para);
</script>
2. Insérer avant un nœud existant (insertBefore)
Par défaut, appendChild() place l’élément en dernier ; pour l’insérer à un autre emplacement :
<script>
const para = document.createElement("p");
para.appendChild(document.createTextNode("Inséré avant p1."));

const container = document.getElementById("div1");
const child = document.getElementById("p1");
container.insertBefore(para, child);
</script>
3. Supprimer un élément (remove)
La méthode remove() détache directement l’élément ciblé :
<script>
const elt = document.getElementById("p1");
elt.remove(); // Supprime <p id="p1">
</script>
Note : remove() n’est pas supportée dans certains anciens navigateurs.
4. Supprimer un enfant via le parent (removeChild)
Pour garantir la compatibilité, on peut retirer un nœud via son parent :
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
Ou plus simplement :
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
5. Remplacer un élément (replaceChild)
Pour substituer un nœud par un autre :
<script>
// Préparation du nouvel élément
const nouveau = document.createElement("p");

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 80 / 83
nouveau.appendChild(document.createTextNode("Texte de remplacement." ));

// Opération de remplacement
const parent = document.getElementById("div1");
const ancien = document.getElementById("p1");
parent.replaceChild(nouveau, ancien);
</script>
Collections DOM
Une HTMLCollection est un ensemble d’éléments HTML, renvoyé par certaines méthodes du
DOM. Elle se comporte comme une liste indexée, mais n’est pas un tableau JavaScript à part
entière.
1. Création d’une HTMLCollection
La méthode la plus courante pour obtenir une HTMLCollection
est getElementsByTagName() :
// Récupère tous les <p> du document
const maCollection = document.getElementsByTagName("p");
2. Accès aux éléments
• Chaque élément de la collection peut être atteint par son indice, qui commence à 0 :
const deuxiemeParagraphe = maCollection[ 1];
• La propriété length indique le nombre d’éléments présents :
console.log(maCollection.length); // Affiche le nombre de <p>
3. Boucler sur une HTMLCollection
Pour appliquer une opération à chaque élément, on parcourt la collection à l’aide d’une boucle
classique :
for (let i = 0; i < maCollection.length; i++) {
maCollection[i].style.color = "red";
}
4. HTMLCollection ≠ Array
Bien qu’elle propose un accès indexé et une propriété length, une HTMLCollection n’hérite
pas des méthodes de tableau (pop(), push(), join(), etc.).
• On peut utiliser une boucle for ou for…of pour l’itération.
• On ne peut pas employer directement les méthodes Array.prototype sans conversion
préalable (p. ex. Array.from(maCollection)).

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 81 / 83
NodeList
Un NodeList est une collection de nœuds du DOM, similaire à une HTMLCollection, mais
pouvant contenir tout type de nœud (éléments, texte, attributs).
1. Création d’un NodeList
• querySelectorAll() renvoie un NodeList statique :
// Sélectionne tous les <p> du document
const maNodeList = document.querySelectorAll("p");
• childNodes renvoie toujours un NodeList vivant (live) : les modifications du DOM y
sont reflétées automatiquement.
• Certains navigateurs plus anciens renvoient un NodeList plutôt qu’une
HTMLCollection pour getElementsByClassName().
2. Accès et parcours
• Comme pour les collections, on utilise un indice commençant à 0 :
const secondParagraphe = maNodeList[1];
• La propriété length indique le nombre de nœuds :
console.log(maNodeList.length);
• Pour appliquer une action à chaque nœud :
for (let i = 0; i < maNodeList.length; i++) {
maNodeList[i].style.color = "red";
}
3. NodeList vs HTMLCollection
Critère HTMLCollection NodeList
Contenu Uniquement des éléments HTML Nœuds (éléments, texte, attributs)
Accès Par nom, id ou indice Par indice uniquement
Dynamisme Vivant (live) : se met à jour
automatiquement
Statique (par défaut
pour querySelectorAll)
Méthodes
JavaScript
Pas de méthodes d’Array (push, pop,
etc.)
Idem

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 82 / 83
4. Pas un tableau
Bien qu’elles offrent un accès indexé et une propriété length, ni la HTMLCollection ni
la NodeList ne sont de véritables tableaux JavaScript :
• Impossible d’utiliser directement push(), pop(), join(), etc.
• Pour employer ces méthodes, on peut convertir la collection :
const tableau = Array.from(maNodeList);

Support de cours – Module « Programmation Web 2 : Langage Javascript » – Filière TC-MIP, S4.
Y. EL ALLIOUI – FPK – USMS – [email protected] 83 / 83

Conclusion générale et perspectives
À travers ce support de cours, vous avez acquis une vision globale du langage JavaScript et de
son utilisation pour manipuler le DOM. Vous savez désormais écrire des scripts structurés,
contrôler l’exécution du code, manipuler des objets et des tableaux, et interagir avec les
éléments d’une page web : ajouter, modifier ou supprimer du contenu, réagir aux événements
utilisateur, et animer des interfaces.
Ces connaissances constituent une base indispensable pour tout développeur web. Elles
ouvrent la voie à des perspectives plus avancées :
• Approfondissement de JavaScript moderne (ES6 et +) : modules, classes, gestion
avancée des promesses, API Fetch.
• Interaction avec des services externes : manipulation des données en JSON, requêtes
AJAX, Web APIs.
• Utilisation de bibliothèques et frameworks : jQuery pour simplifier le DOM, ou des
frameworks modernes comme React, Vue.js ou Angular pour construire des
applications complexes.
• Optimisation des performances et bonnes pratiques : organisation du code, débogage
et sécurité.
La maîtrise des bases présentées ici constitue ainsi une étape essentielle pour évoluer vers des
développements web plus sophistiqués et pour s’adapter aux exigences des technologies
actuelles.

Programmation Web 2 - LANGAGE JAVASCRIPT

About This Presentation

Slide Content

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

Programmation Web 2 - LANGAGE JAVASCRIPT

About This Presentation

Slide Content

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75

Slide 76

Slide 77