Ch4 Javascript

UNIVERSITÉ ABDELMALEK ESSAÂDI
FACULTÉ POLYDISCIPLINAIRE DE LARACHE
PROGRAMMATION WEB:
HTML-CSS-JS-PHP
FILIÈRE: SMI 2019-2020

Chapitre 4:
JAVASCRIPT
2
CHAPITRE 4: JAVASCRIPT
I. GÉNÉRALITÉS:
1. Définition
 JavaScript (JS) est apparu en 1995. Il a été
crée par Brendan Eich pour le compte de
Netscape.
 JavaScript s’est inspiré de plusieurs langages
de programmation dont Java qui en est
totalement différent.
 Après HTML et CSS, JavaScript est le troisième
langage que tout développeur de sites web
doit impérativement connaitre. 3
I. GÉNÉRALITÉS
1. DÉFINITION
 Généralement, JavaScript est utilisé

conjointement avec le code HTML afin de
dynamiser les pages web:
modifier le contenu des balise HTML;
modifier la valeur d’un attribut d’une balise
HTML;
modifier le style des balises HTML;
contrôler et valider les formulaires HTML
 JavaScript est un langage orienté objet
(orienté prototype)
4
I. GÉNÉRALITÉS
1. DÉFINITION
 JavaScript est un langage de scripts 

c’est un langage interprété.
 L’interpréteur du code JavaScript est inclut
dans le navigateur  JavaScript est un
langage côté client
 Chaque navigateur a son propre
interpréteur JavaScript:
o Google Chrome: V8
o IE9: Chakra
o Mozilla Firefox: SpiderMonkey
5
I. GÉNÉRALITÉS
2. Standardisation et Historique
 Netscape a soumet JavaScript à
l’association de standardisation des systèmes
d’information et de communication Ecma
international (à l’époque elle s’appelait
ECMA qui signifiait European Computer
Manufacturers Association).
 Ecma international a délivré la version
standardisée de JavaScript sous le nom
d’ECMAScript (ES), à partir de laquelle
découle toutes les versions JavaScript. 6
I. GÉNÉRALITÉS
2. Standardisation et Historique
 La version adoptée actuellement par la
majorité des navigateurs web est
JavaScript 6.
 Elle a été publiée en Juin 2015 et elle se
réfère à la sixième édition d'ECMAScript
(EcmaScript 2015 ou ES6).
7
II. DÉBUTER EN JAVASCRIPT:

1. Où placer le code JavaScript?
 Le code JavaScript doit être inséré à l’aide de
la balise HTML <script>.
 Avant HTML5, il fallait ajouter l’attribut type
dans la balise <script> 
<script type= " text/JavaScript">
 Pour dynamiser une page HTML, le code
JavaScript peut être placé dans :
o la balise <head>
o la balise <body>
o un fichier externe .js 9
II. DÉBUTER EN JAVASCRIPT
1. OÙ PLACER LE CODE JAVASCRIPT?
i. JavaScript dans <head>

 Le code JavaScript peut être placé à
l’intérieur de la balise <head> en utilisant la
balise <script>.
 Exemple:
<head>
<script>
document.write ("<h1>Bonjour tout le monde</h1>");
</script>
</head>
<body>
</body>
</html>
10
i. JavaScript dans <head>

 Exemple:
<head>
<script>
function Bonjour() { alert("Bonjour tout le monde"); }
</script>
</head>
<body>
<button type="button" onclick="Bonjour()">Bonjour</button>
</body>
</html>
11
ii. JavaScript dans <body>

 Le code JavaScript peut être inséré dans la
balise <body> avec plusieurs manières.
 Exemple: un script dans <body>
<body>
<script>
</script>
</body>
</html>
12
ii. JavaScript dans <body>

 Exemple: JavaScript dans une balise HTML
<body>
<button type="button" onclick="alert('Bonjour tout le monde')">
Bonjour </button>
</body>
</html>
13
iii. JavaScript dans un fichier externe

 Il est préférable d’insérer le code JavaScript
dans un fichier externe portant l’extension .js
 Pour cela il suffit d’indiquer le chemin du
fichier .js dans l’attribut src de la balise
<script>.
 La balise <script> peut être placée dans
<head> ou dans <body>
iii. JavaScript dans un fichier externe

 Exemple:

<body>
<script src="bonjour.js"></script>
</body>
//le fichier JavaScript bonjour.js

 N.B: afin d’optimiser le chargement de la

page web, il vaut mieux placer les balises
<script> juste avant la fermeture de <body>
2. Propriétés syntaxiques
 JavaScript est sensible à la casse.
 Si plusieurs instructions JS sont écrites sur
la même ligne, alors il faut les séparer par
un point-virgule.
 Exemple:
var x = 5; var y = 6; N.B: il vaut mieux toujours
var z terminer ses instructions par le
z = x + y point-virgule
16
2. PROPRIÉTÉS SYNTAXIQUES
 Exactement comme le langage C, il

existe deux types de commentaires:
o Commentaire sur une ligne: ajouté avec //
Exemple:
var x = 5; // c’est une variable
o Commentaire sur plusieurs lignes: ajouté

avec /* … */
Exemple:
/* declaration et definition
de la variable x */
var y = 6;
2. PROPRIÉTÉS SYNTAXIQUES
 JavaScript utilise le jeu de caractères

Unicode.
 Unicode permet pratiquement la
représentation de tous les caractères
3. Les variables
3.1. Déclaration
 Le nom d’une variable JavaScript doit
obligatoirement commencer par une lettre,
$ ou _ (underscore)
 Le nom d’une variable peut être constitué
de lettres, chiffres , $ ou _
 La déclaration d’une variable se fait avec
le mot clé « var ».
 Exemple: var Nom; 19
3. LES VARIABLES
3.1. DÉCLARATION
 On peut déclarer plusieurs variables sur la

même ligne.
 Exemple: var Nom, prenom;
 L’opérateur d’affectation est =
 On peut faire la déclaration et l’affectation
en utilisant une seule instruction.
 Exemple:
var Nom="toto",prenom;
prenom='tata';
3. LES VARIABLES
3.1. DÉCLARATION
 Une variable non encore définie vaudra la

valeur undefined.
 Exemple:
var a;
alert(typeof(a));
/* la variable a n’est pas encore définie  on
ne peut pas connaître son type
Typeof() renvoie le type d’une variable */
3. LES VARIABLES
3.2. Types de variables

 JavaScript est un langage typé
dynamiquement.
On ne détermine pas le type d’une variable
lors de sa déclaration, on n’utilise que var.
 Les principaux types en JavaScript:
o Chaîne de caractères (string): elle doit être
encadrée par des guillemets ou des
apostrophes.
o Exemple:
var nom="toto", m1= 'aujourd\'hui‘ ;
22
var m2= "c'est moi" ;
3. LES VARIABLES
3.2. TYPES DE VARIABLES
o Numérique (number): il représente tous les

nombres (entier, réel, nombre scientifique,
hexadécimal, …)
o Exemple:
var x=2, y= 5.12 ;
var ex= 0x10F; //notation exadécimale
o Quelques valeurs numériques spéciales:
• Infinity: cette valeur numérique représente
l’infinie. var x = 2 / 0; // x vaudra Infinity
• NaN: veut dire Not a Number. C’est une valeur
pour représenter une quantité qui n’est pas un
nombre. var x = 10 * "abc";// x vaudra NaN
3. LES VARIABLES
3.2. TYPES DE VARIABLES
o Booléen (boolean): il accepte deux valeurs, true

ou false.
Exemple:
var isTrue= true ;
var isExist= false;
o N.B: puisque JavaScript est un langage typé
dynamiquement, une variable peut prendre
plusieurs valeurs de types différents.
var x; // x est de type undefined
x = 5; // x est de type number
x = "abc"; // x est de type string
3. LES VARIABLES
3.3. Les opérateurs

 Les opérateurs Arithmétiques: +, -, *, /,
% (modulo) , ++(incrémentation),
--(décrémentation)
 Les opérateurs d’affectation: =, +=, -=, /=, *=,
%=
 Exemple:
var x = 10;
x += 5; //équivalent à x = x + 5
25
3. LES VARIABLES
3.3. LES OPÉRATEURS
 Opérateurs de chaînes de caractères:

o concaténation: elle se fait avec l’opérateur +
Exemple:
var txt1 = "Bonjour";
var txt2 = prompt("donnez votre prénom");
var txt3 = txt1 + " " + txt2;
alert (txt3);
On peut également concaténer en utilisant

l’opérateur +=: txt1 += " " + txt2
3. LES VARIABLES
o concaténation d’une chaîne avec un nombre:

il est possible de concaténer une chaîne de
caractères avec un nombre, sachant que le
résultat sera de type chaîne de caractères.
o Exemple:
//le résultat
x = 5 + 5; x vaudra 10;
y = "5" + 5; y vaudra 55;
z= "Hello" + 5; z vaudra Hello5;
3. LES VARIABLES
o convertir une chaîne en nombre: pour convertir

une chaîne de caractères sous forme de
nombre, il faut utiliser la fonction parseInt().
o Exemple:
y = parseInt("5") + 5; //y vaudra 10
o concaténer deux nombres: il suffit d’introduire

une chaîne de caractères vide entre les deux
nombres.
o Exemple:
var x = 5 , y = 5;
var z = x + '' + y; //z vaudra 55
3. LES VARIABLES
 Opérateurs de comparaison: soit x=5;

Opérateur Description Comparaison Valeur retournée
égalité x == 8 false
==
égalité de valeur ET x === "5" false
=== de type x === 5 true
!= différent x!=8 true
non égalité de valeur x !== "5" true
!= = OU de type x !== 5 false
> supérieur à x>8 false
< inférieur à x<8 true
>= supérieur ou égale à x >= 5 true
<= inférieur ou égale à x <= 5 true

3. LES VARIABLES
 Opérateurs logiques: les opérateurs logiques

de JavaScript sont:
o &&: le ET logique
o ||: le OU logique
o ! : le NON logique
4. Les conditions
4.1. La condition if-else
 L’instruction if exécute une ou plusieurs
instructions si une condition donnée est
vraie (true), sinon (else), il est possible
d’exécuter d’autres instructions.
if (condition1)
{ instruction1; instruction2; }
else if (condition2)
{instruction3; instruction4; }
...
else instructionN; 31
4. LES CONDITIONS
4.1. LA CONDITION IF-ELSE
 Exemple:
if (confirm('voulez-vous exécuter ce code?'))
alert('le code a été bien exécuté!');
confirm() alert()
4. LES CONDITIONS
4.1. LA CONDITION IF-ELSE
 L’opérateur ternaire: c’est un cas

particulier de la condition if-else. Il est
utilisé généralement pour raccourcir
l’écriture de if-else.
 Il contient trois opérandes.
 Exemple:
var adult = confirm('Êtes-vous majeur ?');
M = adult ? '+18' : '-18';
alert('vous avez' + M);
4. LES CONDITIONS
4.2. switch
 L’instruction switch évalue une expression, et
selon le résultat obtenu et un cas de figure
correspondant, elle exécute une ou plusieurs
instructions.
switch (expression) {
case valeur1: instructions1;
break;
case valeur2: instructions2;
break;
...
default: instructions_par_defaut;
34
}
5. Les boucles
5.1. La boucle while
 while permet d’exécuter une instruction ou
plusieurs instructions d’une manière
répétitive tant qu’une condition est vérifiée.
 La condition est évaluée avant d’exécuter
les instructions.
while (condition) {
instructions;
}
35
5. LES BOUCLES
4.2. La boucle do…while

 Elle a le même principe de fonctionnement
que la boucle while, sauf que do…while
évalue la condition après que l’instruction soit
exécutée.
Les instructions définies dans la boucle seront
donc exécutées au moins une fois.
do {
instructions;
} while(condition);
36
5. LES BOUCLES
4.3. La boucle for

 La boucle for fonctionne exactement comme
la boucle while.
 La syntaxe de for est différente de celle de
while.
for (initialisation ;condition ;incrémentation) {
instructions;
}
 Exemple:
for(var i=0;i<3;i++)
alert('i='+i);
37
5. LES BOUCLES
4.4. les instructions break et continue

 L’instruction break permet de terminer la
boucle en cours.
 Exemple:
for (var i=0 ; i<10; i++) {
if(i==2) break;
alert('i='+i);
}
38
5. LES BOUCLES
5.1. BREAK ET CONTINUE
 L’instruction continue arrête l’exécution

des instructions pour l’itération courante
de la boucle courante.
 L’exécution est reprise pour l’itération
suivante.
 Exemple:
for (var i=0 ; i<10; i++) {
if(i==2) continue;
alert('i='+i);
}
6. Les fonctions
6.1. Généralités
 Une fonction est déclarée avec le mot clé
function, suivi par:
o Le nom de la fonction;
o La liste d’arguments entre parenthèses
séparés par des virgules;
o Le code JavaScript entre accolades.
function multiplication(p1, p2) {
return p1 * p2;
40
}
6. LES FONCTIONS
6.1. GÉNÉRALITÉS
 Les paramètres (primitifs) d’une fonction,

sont passés par valeur.
 Si l’argument passé à la fonction est un
objet, et que la fonction opère des
changements sur ses propriétés, ces
changements seront visibles en dehors de la
fonction.
o N.B: si on affecte un nouvel objet au
paramètre (objet) de la fonction, ça n’aura
aucun effet en dehors de la fonction
6. LES FONCTIONS
4.2. Les fonctions anonymes

 Une fonction anonyme, est une fonction
définie sans nom.
 Afin de pouvoir appeler la fonction, il faut
l’affecter à une variable.
var M = function (p1, p2) {
return p1 * p2;};
 L’appel de la fonction se fait via la variable à

laquelle elle a été affectée.
var x= M(2,3)
42
7. Les objets natifs

 Deux types d’objets:
o objets natifs (String, Number, Boolean,
Array,…);
o objets crées par l’utilisateur.
 Un objet natif est un objet prédéfini par
JavaScript
 Un objet possède: un constructeur, des
propriétés et des méthodes.
43
7. LES OBJETS
7.1. Les objets String

 Généralement, une chaîne de caractères est
déclarée en tant qu’une variable primitive.
var nom = 'monNom'; // typeof(nom) retourne string
 Mais, elle peut également être déclarée
comme un objet String.
var nom = new String('monNom');
// typeof(nom) retourne object
 N.B: il faut éviter de déclarer les chaînes de
caractères en tant qu’objets.
7. LES OBJETS
7.1. LES OBJETS STRING
 les variables primitives ne possèdent pas des

propriétés et des méthodes.
 Mais avec JavaScript, les propriétés et les
méthodes disponibles pour les objets String,
sont aussi utilisables pour les variables string.
 Les propriétés: l’objet String, possède une
seule propriété lenght, qui définie la longueur
d’une chaîne de caractères.
var x='abc';
alert('la longueur de x='+x.length);
7. LES OBJETS
 Les méthodes: String possède plusieurs

méthodes, en voici quelques une:
7. LES OBJETS
 Les méthodes:
match() Cherche les correspondances entre la chaîne courante et une
expression régulière
replace() renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie
des correspondances à un modèle sont remplacées par une chaîne
search() Cherche la correspondance entre la chaîne courante et une expression
régulière. Elle renvoie la position de la première correspondance.
slice() extrait une section d'une chaine de caractères et la retourne comme
une nouvelle chaine de caractères.
split() permet de diviser une chaîne de caractères à partir d'un séparateur
pour fournir un tableau de sous-chaînes.
toLowerCase() retourne la chaîne de caractères courante en minuscules
toString() renvoie une chaine de caractères représentant l'objet courant.
toUpperCase() retourne la chaîne courante, convertie en majuscules
trim() Supprime les espaces blancs en début et fin de chaîne
7. LES OBJETS
7.2. Les objets Number

 Les variables numériques peuvent être
déclarées également en tant qu’objets
Number.
var age = 25; // typeof(age); retourne number
var age = new Number(25);
// typeof(age); retourne object
 N.B: Il faut éviter de déclarer les variables

numériques en tant qu’objets Number.
 Les propriétés et méthodes des objets
Number sont aussi utilisables pour les
primitives de type number
7. LES OBJETS
7.2. LES OBJETS NUMBER
 Les propriétés de l’objet Number sont

accessibles uniquement via Number.propriété
Property Description
MAX_VALUE Valeur maximale que peut prendre un Number
MIN_VALUE Valeur minimale que peut prendre un Number
NEGATIVE_INFINITY Infinity négative (retournée en cas de débordement)
NaN La valeur NaN

POSITIVE_INFINITY Infinity positive (retournée en cas de débordement)
alert('la valeur maximale de Number ='+Number.MAX_VALUE);

7. LES OBJETS
7.2. LES OBJETS NUMBER
 Les méthodes globales: peuvent être utilisées

avec tous les types de données
Method Description
Number() Transforme une chaîne de caractère en une valeur numérique
parseFloat() Transforme une chaîne de caractères en un nombre flottant
parseInt() Transforme une une chaîne de caractères en un entier
 Les méthodes Number: voici quelques

méthodes de type Number
Method Description
toString() Transforme un numérique en chaîne de caractères
toPrecision() renvoie une chaîne de caractères représentant un nombre avec
la précision donnée
7. LES OBJETS
7.3. Les objets Boolean

 Une variable booléenne peut être déclarée
comme un objet Boolean.
var majeur = false;
// typeof(majeur); retourne boolean
var majeur = new Boolean(false);
// typeof(majeur); retourne object
 N.B: Il est déconseillé d’utiliser un objet

Boolean au lieu d’une variable primitive de
type boolean.
7. LES OBJETS
7.3. LES OBJETS BOOLEAN
 Il n’existe pas de propriétés et de méthodes

propres aux objets Boolean.
7. LES OBJETS
7.4. Les objets Date

 JavaScript ne possède pas un type de
données pour gérer les dates. En revanche, il
est possible d’utiliser un objet Date.
var dateSys = new Date();
alert(dateSys);
7. LES OBJETS
7.4. LES OBJETS DATE
 L’objet Date admet plusieurs paramètres:

o Date() : crée la date et l’heure actuelle;
o Date(chaîne de caractères): représente la date
au format mois (en anglais) jour, année,
heures: minutes:secondes
var d = new Date("april 04, 2018");
o Date(year, month, day, hours, minutes, seconds):
tous ces paramètres sont de type entier
var d = new Date(2018,0,22);
alert (d);
7. LES OBJETS
o d’autres formats
sont possibles pour
Date(chaîne de caractères):
• Date("YYYY-MM-DD") ou Date("YYYY/MM/DD")
new Date('2015-04-10');
new Date('2015-04-10T13:00:00');
• Date("MMM/DD/YYYY") ou Date("MMM DD YYYY")

new Date('12 APR 2010'); new Date('2010 APR 12');
new Date('APR 12 2010');
• Date("MM/DD/YYYY")
new Date('02/25/2015');
7. LES OBJETS
o Date(nombre de millisecondes):
Javsascript
comme java, stocke les dates comme le
nombre de millisecondes depuis le 01
Janvier 1970 à 00:00:00 UTC.
Cette déclaration crée une date en
ajoutant le nombre de millisecondes à la
date 01 Janvier 1970 à 00:00:00 UTC.
var d = new Date(250 000 000 000);
alert (d);
7. LES OBJETS
 Les propriétés de l’objet Date: y en a pas

 Les méthodes de l’objet Date:
Method Description
getDate() Get the day as a number (1-31)
getDay() Get the weekday as a number (0-6)
getFullYear() Get the four digit year (yyyy)
getMonth() Get the month as number (0-11)
getTime() Get the time (milliseconds since
January 1, 1970)
…
7. LES OBJETS
 Les méthodes de l’objet Date:
Method Description
setDate() Set the day as a number (1-31)
setFullYear() Set the year (optionally month and day)
setMonth() Set the month (0-11)
setTime() Set the time (milliseconds since January
1, 1970)
Date.parse() Convertir une date sous forme de
chaîne de caractères en nombre de
millisecondes entre cette date et le 01
Janvier 1970
…
7. LES OBJETS
7.5. Les objets Math

 Toutes les propriétés et les méthodes de
l’objet Math sont statiques.
 Les propriétés de l’objet Math:
Math.E // nombre d’Euler, environ 2,718
Math.PI // PI, environ 3,14159
Math.SQRT2 // racine carré de 2, environ 1,414
Math.SQRT1_2 // racine carré de 1/2, environ 0,707
Math.LN2 // logarithme naturel de 2, environ 0,693
Math.LN10 // logarithme naturel de 10, environ 2,302
Math.LOG2E // logarithme de base 2 de E, environ 1,442
Math.LOG10E // logarithme de base 10 de E, environ 0,434
7. LES OBJETS
7.5. LES OBJETS MATH
 Les méthodes de l’objet Math:

7. LES OBJETS
7.5. LES OBJETS MATH
Method Description
abs(x) Retourne la valeur absolue de x
acos(x), asin(x), atan(x) Retourne l’arc cosinus, arc sinus, arc tangente de x
ceil(x) Retourne le plus petit entier supérieur ou égal à x
cos(x), sin(x), tan(x) Retourne le cosinus, sinus, tangente de x
x
exp(x) Retourne l’exponentiel de x (soit e )
floor(x) Retourne le plus grand entier inférieur ou égal à x
log(x) Retourne le logarithme naturel (à base de E) de x
max(x,y,z,...,n) Retourne la plus grande valeur d’une liste de nombre
min(x,y,z,...,n) Retourne la plus petite valeur d’une liste de nombre
pow(x,y) Retourne x à la puissance y
random() Retourne un nombre aléatoire compris entre 0 et 1
round(x) Retourne l’arrondi de x
sqrt(x) Retourne la racine carrée de x
7. LES OBJETS
7.6. Les expressions régulières: RegExp

 Une expression régulière ou rationnelle est un
motif (modèle) utilisé pour chercher et
manipuler des chaînes de caractères.
 Avec les expressions régulières on peut:
o Vérifier les données saisies dans un formulaire:
nom, prénom, email, url, tél, etc.
o Chercher et extraire des informations à partir
des chaînes de caractères.
o Chercher puis remplacer ou supprimer des
caractères à partir des chaînes de caractères.
7. LES OBJETS
7.6. LES EXPRESSIONS RÉGULIÈRES: REGEXP
 Les expressions régulières ne sont pas

limitées au langage JavaScript.
 Elles existent également dans d’autres
langages tels que Perl, Python et PHP.
 Une expression régulière est généralement
abrégée par regex.
7. LES OBJETS
7.6. LES EXPRESSIONS RÉGULIÈRES: REGEXP
a. Création d’une expression régulière

 Pour construire une expression régulière:
o Utiliser un littéral d’expression régulière qui
correspond à un motif contenu entre deux
barres obliques (slash)
Exemple: var er = /ab+c/;
o Appeler le constructeur de l’objet RegExp
Exemple: var er = new RegExp("ab+c");
7. LES OBJETS
7.6. LES EXPRESSIONS RÉGULIÈRES: REGEXP / CRÉATION D’UNE REGEX
 Le motif d’une expression régulière peut être

composé de caractères simples ou de
caractères simples plus d’autres caractères
spéciaux.
 Un motif simple est construit à partir de
caractères pour lesquels on souhaite avoir
une correspondance directe.
 Par exemple: Une expression régulière
correspondant au motif /des/ cherche les
suites de caractères 'des' ensemble et dans
cet ordre précis
7. LES OBJETS
 Lorsque le motif à trouver est plus complexe

qu’une simple égalité, alors il faut utiliser des
caractères spéciaux.
 Par exemple: Le motif /ab+c/ correspond à
toutes les suites de caractères qui possèdent
un seul a suivi d’un ou de plusieurs (le rôle du
caractère spécial +) b qui sont
immédiatement suivi d’un c.
 Le tableau suivant fournit une liste des
caractères spéciaux pouvant être utilisés
dans les expressions régulières.
7. LES OBJETS
Caractère Signification Exemple

expression précédente répétée 0 ou /bo*/  "boo" dans "booléen" ; "b"
* plusieurs fois dans "bateau"
expression précédente répétée 1 ou /a+/  "a" dans "maison" ; "aa" dans
+ plusieurs fois "maaison"
expression précédente répétée 0 ou /e?le?/  "el" dans "gel" ; "le" dans
une seule fois. "angle" ; "l" dans "mal".
S’il est utilisé immédiatement après /zoo+/  correspond à "zoo",

? l'un des quantificateurs : *, +, ?, ou {}, "zooo", "zoooo", etc.
il rend le quantificateur moins /zoo+?/  correspond uniquement
« gourmand »  la recherche s’arrête à "zoo"
dès que le quantificateur atteint le
minimum requis.
7. LES OBJETS

n'importe quel caractère excepté un /.n/  "en" , "on" et "un" dans la
. caractère de saut de ligne. chaîne "une formation en javascript"
\ échappement /a\+b/  "a+b"

/^Bon/ correspond à "Bon" de
marque le début d’une chaîne de
^ caractères
"Bonjour" et non pas à "Bon" de "Un
Bon jour"
/jour$/ correspond à "jour" de
marque la fin d’une chaîne de
$ caractères
"Bonjour" et non pas à "jour" de
"Bonjour!"
7. LES OBJETS

/vert|rouge/  "vert" dans "feu
| correspond à l’opérateur OU logique
vert" ; "rouge" dans "feu rouge"
correspond pour exactement n /o{2}/  correspond à "oo" dans
{n} occurrences de l'expression "Google" et non pas à "o" de "Alo"
précédente. n est un entier positif.
correspond pour au moins n /o{2,}/  correspond à "oo" dans
{n,} occurrences de l'expression "Google" et "ooo" dans "Gooogle"
précédente. non pas à "o" de "Alo"
correspond pour au plus m /o{,2}/  correspond à "oo" dans
{,m} occurrences de l'expression "Google" et non pas à "ooo" dans
précédente. "Gooogle".
correspond pour au moins n
occurrences de l'expression /o{2,3}/  correspond à "oo" dans
{n,m} précédente et au plus m "Google" et "ooo" dans "Gooogle"
occurrences. n et m sont deux entiers non pas à "oooo" de "Goooogle"
positifs.
7. LES OBJETS

Défini une classe de caractères. Ça /[ABz]/  correspond à "A" dans
[xyz] correspond à tous les caractères "Alo" et "B" dans "Bateau" et "z" de
présents entre crochets "onze"
correspond à tous les caractères
[a-z] entre a et z
/[a-c]/ est équivalent à /[abc]/
correspond à tous les caractères

[^xyz] sauf ceux compris entre crochets.
/[âbc]/ est équivalent à /[â-c]/
N.B: Les métacaractères (! ^ $ ( ) [ ] { } ? + * . / \ |) n’ont pas besoin d’être échappés à

l’intérieur d’une classe à l’exception des crochets, du tiret et de l’anti-slash.
\d correspond à un chiffre équivalent à /[0-9]/

correspond à n’importe quel
\D caractère sauf un chiffre
équivalent à /[^0-9]/
correspond à un caractère blanc. Il

\s comprend les espaces, tabulations,
sauts de ligne ou sauts de page
7. LES OBJETS
correspond à tout caractère sauf le
\S caractère blanc
\t correspond à une tabulation

correspond à n'importe quel
\w caractère alphanumérique, y compris équivalent à /[a-zA-Z0-9_]/
le tiret bas.
correspond à n'importe quel
\W caractère n’étant pas un caractère de équivalent à /[â-zA-Z0-9_]/
mot
 Exemple: proposer une expression régulière

pour vérifier une adresse email.
/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/
7. LES OBJETS
b. Utilisation d’une expression régulière

 On peut utiliser les expressions régulières par
le biais de:
o méthodes test() et exec() de l’objet
RegExp
o méthodes match(), replace(), search(),et
split() de l’objet String.
7. LES OBJETS
7.6. LES EXPRESSIONS RÉGULIÈRES: REGEXP / UTILISATION D’UNE REGEX
 On rappelle que pour créer une expression

régulière, on peut utiliser soit le type primitif
(littéral de regex) ou le constructeur de l’objet
RegExp.
var monRegex1 = /Go{2}gle/;
var monRegex2 = new RegExp("Go{2}gle");
 Il est recommandé d'utiliser la notation
littérale (le type primitif).
 myRegex1 et myRegex2 sont les deux de type
object.
7. LES OBJETS
 RegExp ne possède que deux méthodes

: test() et exec().
 test() permet de tester une expression
régulière ; elle renvoie true si le test est réussi,
sinon elle renvoie false.
 exec() applique une expression régulière, et
renvoie un tableau dont le premier élément
contient la correspondance trouvée dans la
chaîne de caractères. Si rien n'est
trouvé, null est renvoyé.
7. LES OBJETS
 Exemple:
var monRegex = /Go{2}gle/;
var monTexte = "j'utilise Google";
if (monRegex.test(monTexte))
alert(monRegex.exec(monTexte))
 L'objet RegExp possède neuf propriétés,

appelées $1, $2, $3… jusqu'à $9.
 Pour accéder à la première propriété par
exemple, il faut écrire: RegExp.$1
7. LES OBJETS
 Les parenthèses: utilisées dans une expression

régulière, permettent de garder en mémoire
une portion d'une correspondance.
 Ainsi, /a(b)c/ correspond aux caractères
'abc' et garde 'b' en mémoire.
 Les portions capturées sont enregistrées
temporairement au sein de l'objet RegExp.
 La première portion sera enregistrée dans la
propriété $1, la deuxième dans $2 et ainsi de
suite.
7. LES OBJETS
 On peut également accéder aux portions

mémorisées grâce au tableau retourné par la
méthode exec().
 Le premier élément (d’indice 0) de ce
tableau contient toute la correspondance
trouvée.
 À partir du deuxième élément (d’indice 1) on
trouve les portions de texte sauvegardées en
mémoire en utilisant les parenthèses.
7. LES OBJETS
 Exemple:
7. LES OBJETS
 Exemple: proposer une regex permettant la

validation d’une adresse email et la
récupération de ses différentes parties (il y en
a trois).
7. LES OBJETS
 Pour ajouter des parenthèses dans une

expression régulière sans garder en mémoire
les portions capturées, il faut ajouter ?: au
début du contenu de la parenthèse.
 Dans ce cas, ça sera uniquement une façon
de structuration pour bien distinguer les
différentes parties d’une expression régulière.
 Exemple: /^(?:https|http):\/\//
7. LES OBJETS
 Les parenthèses peuvent être également

utilisées pour construire des regex appliquant
des tests de recherche avant et arrière:
/ahmed(?= ahmadi)/  "ahmed"
correspond à 'x' seulement s’il est
x(?=y) suivi de 'y'
dans "ahmed ahmadi" et non pas à
"ahmed« dans "ahmed el ahmadi"
correspond à 'x' seulement s’il n’est
x(?!y) pas suivi de 'y'
correspond à 'x' seulement s’il est
(?<=y)x précédé par 'y'
correspond à 'x' seulement s’il n’est
(?<!y)x précédé par 'y'
7. LES OBJETS
 Les marqueurs (flags): sont des options de

recherche que l’on peut spécifier lors de la
construction d’une expression régulière.
 Les options les plus utilisées sont:
o i: indique que la recherche est insensible à
la casse.
o g: indique que la recherche doit être
globale  il faut chercher toutes les
occurrences possibles d’une regex donnée.
Par défaut, la recherche s’arrête dès que
l’on trouve la première occurrence.
7. LES OBJETS
 Pour utiliser les marqueurs, il suffit de les

ajouter après la définition de l’expression
régulière:
o var regex = /motif/marqueurs;
var regex = /\w+/i;
o Var regex= new RegExp("motif",
"marqueurs");
var regex = new RegExp("[a-z]+", "ig");
 N.B: l’option « g » ne fonctionne qu’avec la
méthode match() de l’objet String.
7. LES OBJETS
 Exemple:
7. LES OBJETS
 On rappelle que les expressions régulières

s’utilisent aussi via les méthodes match(),
replace(), search(),et split() de l’objet
String.
o match(): cherche la ou les correspondances
entre la chaîne courante et une expression
régulière
o replace(): renvoie une nouvelle chaîne de
caractères dans laquelle tout ou partie des
correspondances à un modèle sont
remplacées par une chaîne.
7. LES OBJETS
o replace():
7. LES OBJETS
o search(): cherche la correspondance entre

la chaîne courante et une expression
régulière. Elle renvoie la position de la
première correspondance.
7. LES OBJETS
o split(): divise une chaîne de caractères à

base d'un séparateur pour fournir un tableau
de sous-chaînes.
o Le séparateur peut être un simple caractère
ou une expression régulière.
8. Les Tableaux
8.1. Généralités
 Un tableau est un ensemble ordonné de
valeurs (items) auxquelles on peut faire
référence via un nom et un indice.
 Les indices commencent de 0
 La déclaration des tableaux se fait soit avec
var, soit avec new Array().
var pays = ["Maroc", "France", "Espagne"];
var info = [30, 'ahmed', 18, 'fatima'];
var info = new Array(30, 'ahmed', 18, 'fatima');
90
8. LES TABLEAUX
8.1. GÉNÉRALITÉS
 On peut créer un tableau avec un nombre

bien déterminé d’éléments, pourtant la taille
du tableau ne sera jamais fixe.
var T = [];
var T = new Array(10); ou T.length=10;
 length est la propriété qui renvoi la longueur du
tableau.
var T = [];
T.length=10;
alert(T.length);
8. LES TABLEAUX
8.1. GÉNÉRALITÉS
 La syntaxe utilisant des crochets, appelée

« littéral de tableau », est la forme la plus
simple et celle recommandée pour la
création de tableaux.
 En JavaScript, les tableaux sont tous des
objets natifs.
 Exemple:
var info = [];
alert(typeof info);
8. LES TABLEAUX
8.1. GÉNÉRALITÉS
 Le tableau est un objet  on peut avoir:

o Un tableau en tant que propriété, à l’intérieur
d’un autre tableau
Exemple:
var t = [[1, "abc"] ,"Maroc"];
o Une fonction en tant que propriété, à l’intérieur

d’un tableau
Exemple:
var t=[monNom('abc'),3];
alert(t[0]);
function monNom(nom) { return nom;}
8. LES TABLEAUX
8.1. GÉNÉRALITÉS
o Un objet en tant que propriété, à l’intérieur d’un

tableau
Exemple:
var obj= new String("Ahmed");
var t = ["Mohamed",48 ,obj ,39];
alert (t[2])
8. LES TABLEAUX
8.1. GÉNÉRALITÉS
 JavaScript ne supporte pas les tableaux

associatifs (ou de hachage) composés de
paires clé-valeur.
 Cependant, nous pouvons créer des
tableaux indexés par noms (chaîne de
caractères) au lieu d’indices numériques.
8. LES TABLEAUX
8.1. GÉNÉRALITÉS
 Exemple:
var personne = {
prenom:"Ahmed",
nom:"Erradi",
age:46 };
alert (personne["prenom"]+ ' '+ personne.nom);

/*
alert (personne["prenom"]+' '+ personne["nom"]);
*/
8. LES TABLEAUX
8.1. GÉNÉRALITÉS
 Dans le cas où l’on utilise des tableaux

indexés par noms, JavaScript redéfinit le
tableau Array en un objet standard
On ne peut pas utiliser les propriétés ou les
méthodes de l’objet Array, ça donne des
résultats incorrects ou des valeurs indéfinies
var personne = {
prenom:"Ahmed",
nom:"Erradi",
age:46};
alert(personne.length);
8. LES TABLEAUX
8.2. Parcourir un tableau

 On peut utiliser l’une des méthodes suivantes:
o la boucle for (ou while):
var couleurs = ['rouge', 'vert', 'bleu'];
for (var i = 0; i < couleurs.length; i++)
{ //traitement }
o la boucle for in: l’ordre d’itération n’est pas
nécessairement l’ordre d’insertion.
var couleurs = {a:'rouge',b: 'vert',1: 'bleu'};
var c='';
for (var key in couleurs) c+=couleurs[key] + ' ';
alert (c);
8. LES TABLEAUX
8.2. PARCOURIR UN TABLEAU
o La méthode forEach(): permet d'exécuter

une fonction de rappel (callback) sur
chaque élément du tableau.
Syntaxe: nomTableau.forEach(callback)
callback: la fonction de rappel. À utiliser pour
chaque élément du tableau nomTableau.
Elle admet trois arguments :
 valeur courante: la valeur de l'élément du tableau
en cours de traitement.
 index: L'indice de l'élément en cours de traitement.
 array: Le tableau via lequel la méthode forEach a
été appelée.
8. LES TABLEAUX
N.B: La boucle forEach ne peut pas être utilisée

sur les tableaux indexés par noms.
o Exemple:
couleurs.forEach(mesCouleurs);
function mesCouleurs (elem, index)
{
alert("couleurs[" + index + "] = " + elem);
}
8. LES TABLEAUX
o On peut utiliser une fonction anonyme en

tant que fonction de rappel

couleurs.forEach(function(elem, index){
alert("couleurs[" + index + "] = " + elem);
});
8. LES TABLEAUX
8.3. Opérations sur les tableaux

a. Ajouter/supprimer des éléments
 L’ajout (pushing) des éléments dans un
tableau se fait avec la méthode push().
 Les éléments nouvellement ajoutés,
viennent à la fin du tableau.
 Exemple:
var fruits = ["Banane", "Orange", "Pomme"];
fruits.push("Kiwi");
fruits[fruits.length]="Fraise"; // même
résultat que push()
8. LES TABLEAUX
8.3. OPÉRATION SUR LES TABLEAUX
 Si on veut ajouter des éléments au début du

tableau, il faut appeler la fonction unshift().
 Exemple:
fruits.unshift("Kiwi");
alert(fruits[0]);
8. LES TABLEAUX
 La suppression (popping) des éléments

d’un tableau se fait à l’aide de la méthode
pop().
 pop(), enlève le dernier élément du
tableau.
 Exemple:
fruits.pop();
8. LES TABLEAUX
 Si on veut supprimer un élément à partir du

début du tableau, il faut utiliser la méthode
shift().
fruits.shift();
alert(fruits[0]);
 N.B: on peut utiliser l’opérateur delete pour
retirer un élément d’un tableau, mais dans ce
cas, la valeur de l’élément supprimé sera
remplacée par undefined
delete fruits[1]; // fruits[1] vaudra undefined
8. LES TABLEAUX
b. Fusionnement de deux tableaux

 La méthode concat(), fusionne deux tableaux
ou plus, et renvoie le tableau résultat.
var monTableau = new Array(1, 2, 3);
monTableau = monTableau.concat("a", "b", "c");
// monTableau vaut [1, 2, 3, "a", "b", "c"]
c. Tableau vers chaîne de caractères

 Pour convertir les éléments d’un tableau en
une chaîne de caractères, il faut utiliser l’une
des méthodes suivantes: valueOf(), toString()
ou join().
8. LES TABLEAUX
c. Tableau vers chaîne de caractères

 La méthode join() permet de préciser le
caractère séparateur (virgule par défaut)
 Exemple
var tousLesFruits = fruits.valueOf();
alert(tousLesFruits);
var tousLesFruits = fruits.join(" - ");
alert(tousLesFruits);
8. LES TABLEAUX
d. La méthode splice():
 Cette méthode peut être utilisée pour insérer
ou retirer des éléments d’un tableau donné.
 splice() admet trois paramètres:
o premier: l’indice à partir duquel commence le
changement;
o deuxième: le nombre d’éléments à supprimer
o troisième: les éléments à insérer
fruits.splice(0,1); //fruits vaut ["Orange", "Pomme"]
fruits.splice(1,0,"Kiwi", "Fraise"); //fruits vaut
["Orange", "Kiwi" , "Fraise" , "Pomme"]
8. LES TABLEAUX
e. Trier un tableau:
 La méthode sort() trie alphabétiquement un
tableau de chaîne de caractères.
var fruits = ["Banane", "Pomme", "Orange"];

fruits.sort();
alert(fruits);
8. LES TABLEAUX
 Pour appliquer un tri décroissant, vous pouvez
appeler la méthode sort(), puis la méthode
reverse() pour inverser l’ordre des éléments du
tableau.
 Exemple:
var fruits = ["Banane", "Pomme", "Orange"];
fruits.sort();
fruits.reverse();
alert(fruits);
8. LES TABLEAUX
 Afin de trier des valeurs numériques, la
méthode sort() admet en paramètre une
fonction de rappel qui détermine la relation
d’ordre selon laquelle les éléments seront
comparés
8. LES TABLEAUX
 Exemple:
var nombres = [20, 1, 100];
nombres.sort();
alert(nombres);
var nombres = [20, 1, 100];

nombres.sort(function (a,b){return a-b});
alert(nombres);
8. LES TABLEAUX
f. La méthode slice() :
 slice() renvoie un tableau contenant une copie
d’une portion du tableau d’origine.
 Deux paramètres:
o début: l’indice à partir duquel commence
l’extraction;
o fin: l’indice auquel s’arrête l’extraction. L’élément
qui correspond à cet indice n’est pas inclus.
var fruits = ["Banane", "Orange", "Citron", "Pomme"];

alert(fruits.slice(1,3));
alert(fruits.slice(1));
III. DYNAMISER LES PAGES HTML:

1. DOM
 Le DOM pour Document Object Model (le
modèle objet de document) est une API
(Application Programming Interface) ou
une interface de programmation pour les
documents HTML et XML.
 Dans ce cours, nous nous intéressons
uniquement au DOM HTML.
114
III. DYNAMISER LES PAGES HTML
1. DOM
 Le DOM fournit une représentation

structurelle (sous forme d’un arbre) du
document HTML (page web), permettant
de modifier son contenu, sa structure et son
style  document HTML dynamique
 Généralement, le DOM relie les pages Web
aux scripts et langages de programmation.
 Le DOM est le plus souvent utilisé en
conjonction avec JavaScript.
115
1. DOM
 Exemple: soit la page web suivante

<!DOCTYPE html>
<html>
<head>
<title> My title</title>
</head>
<body>
<h1> My header </h1>
<a href="Mypage.html"> My link </a>
</body>
</html>
116
1. DOM
 Au chargement de la page, le browser crée

le DOM de celle-ci.
117
1. DOM
 une page web est un ensemble de nœuds,

et chaque nœud est un objet JavaScript:
o le document est un nœud de type document;
o tous les éléments HTML sont des nœuds de
type element;
o tous les attributs HTML sont des nœuds de type
attribute;
o le contenu d’un élément HTML, est un nœud
de type text;
o et même les commentaires, sont des nœuds
comment.
118
2. Les objets window et document

2.1. window
 L’objet window est un objet global qui
représente la fenêtre du navigateur.
 Une variable déclarée dans le contexte
global, deviendra une propriété de l’objet
window.
 Une variable non déclarée (utilisée sans jamais
écrire le mot-clé var), peu importe son endroit,
deviendra une propriété de l’objet window
 L’objet window est implicite. 120
2. LES OBJETS WINDOW ET DOCUMENT
2.1. WINDOW
 Quelques propriétés de l’objet window:

Propriété Description
document Returns the document object for the window
name Sets or returns the name of a window
navigator Returns the navigator object for the window
 Quelques méthodes de l’objet window:

Méthode Description
alert() Displays an alert box with a message and an OK button
confirm() Displays a dialog box with a message, an OK and a Cancel button
open() Opens a new browser window
stop() Stops the window from loading
prompt() Displays a dialog box that prompts the visitor for input
2. LES OBJETS WINDOW ET DOCUMENT
2.2. document
 L’objet document est un sous objet de
l’objet window
 Il représente le document HTML: la page
web  C’est le nœud racine du DOM
 C’est le propriétaire (parent) de tous les
éléments HTML de la page web.
 L’objet document possède des propriétés
et des méthodes pour accéder à tous les
autres nœuds de la page web.
122
3. Les éléments HTML

3.1. L’accès aux éléments HTML
 On rappelle que le DOM HTML est constitué
d’un ensemble de nœuds.
 Un nœud peut être un élément HTML
(element), un attribut (attribute), un texte
(text) ou un commentaire (comment).
Les éléments HTML sont tous des objets de
type element;
123
3. Les éléments HTML

3.1. L’accès aux éléments HTML
 L’accès aux éléments HTML, se fait
généralement à travers des méthodes de
l’objet document (racine de l’arbre du
DOM HTML)
o getElementById()
o getElementsByTagName()
o getElementsByName()
o getElementsByClassName()
124
3. LES ÉLÉMENTS HTML
3.1. ACCÈS AUX ÉLÉMENTS HTML
o getElementById():
• Retourne l’élément HTML dont la valeur de
son attribut id est passée en paramètre.
• S’il n’existe aucun élément avec l’id
spécifié, elle retourne null.
• L’id doit être unique dans le document
HTML. Pourtant, s’il y avait plus qu’un
élément HTML avec le même id,
getElementById() retourne le premier
élément rencontré.
125
Exemple:

<body>
<p id="monid" onmouseover="Bonsoir()" onmouseleave="Bonjour()">
Bonjour
</p>
<script src="monscript.js"></script>
</body>
//le fichier JavaScript monscript.js
function Bonsoir() {
var e =document.getElementById("monid");
e.innerHTML= "Bonsoir"; }
function Bonjour() {
document.getElementById("monid").innerHTML= "Bonjour"; }
innerHTML est une propriété commune à tous les éléments HTML.

Elle retourne ou affecte un contenu à une balise HTML
o getElementsByTagName()
• Elle retourne la liste des éléments HTML qui
portent le nom passé en paramètre.
• En fait, elle retourne un objet NodeList qui est
une collection d’éléments, exploitable de la
même manière qu’un tableau. On peut
utiliser la propriété length pour récupérer le
nombre d’éléments de la liste.
• Les éléments de la liste sont accessibles via
leurs indices numériques à partir de 0.
o getElementsByName()
• Elle retourne la liste des éléments HTML qui
possèdent l'attribut name dont la valeur
est spécifiée en paramètre.
• La collection des éléments retournés est
représentée par un objet NodeList.
o getElementsByClassName()
• Cette méthode est également utilisée
pour récupérer des éléments HTML.
• Elle retourne la liste des éléments HTML
(NodeList) qui possèdent un attribut class
dont la valeur est passée en paramètre.
o querySelector() et querySelectorAll()
 L’accès aux éléments HTML, peut se faire avec
deux autres méthodes de l’objet document:
querySelector() et querySelectorAll().
 Ces deux méthodes admettent un paramètre
sous forme d’une chaîne de caractère indiquant
un sélecteur CSS.
o querySelector(): renvoie le premier élément
HTML trouvé correspondant au sélecteur CSS;
o querySelectorAll(): renvoie tous les éléments, sous
forme d'un NodeList, correspondant au sélecteur
CSS fourni en paramètre.
 Exemple:
<body>
<p class="maclasse" onclick="monElement()" onmouseleave="mesElements()">
Bonjour tout le <span class="maclasse"> monde </span>
</p>
<script>
function monElement(){alert(document.querySelector(".maclasse"));}
function mesElements(){alert(document.querySelectorAll(".maclasse"));}
</script>
</body>
3.2. modifier un élément HTML

 Après avoir accéder à un élément HTML, il
faut savoir le modifier.
 Un élément HTML se compose d’attributs et
de contenu;
 Le contenu d’un élément HTML peut être
du texte ou d'autres éléments HTML
La modification d’un élément HTML
consiste à modifier la valeur de ses attributs
ou son contenu
132
3.2. MODIFIER UN ÉLÉMENT HTML
a. Les attributs:
 Un objet element (élément HTML) fournis
plusieurs méthodes et propriétés pour
interagir avec les attributs d’un élément
HTML donné:
o getAttribute(): cette méthode récupère
la valeur de l'attribut passé en paramètre.
document.getElementsByTagName(
"p")[0].getAttribute("class");
a. Les attributs:
o setAttribute(): pour un élément HTML
donné, cette méthode ajoute un nouvel
attribut ou change la valeur d'un attribut
existant.
function modifierImage(){
document.getElementById("monImage").setAttribute(
"src", "monImage2.png");
}
a. Les attributs:
o attributes: cette propriété récupère la
liste de tous les attributs d’un élément
HTML
var p=document.getElementsByTagName("p");
var a=p[0]. attributes;
alert(a[0].value);
a. Les attributs:
 L’attribut d’un élément HTML est également
un objet JavaScript de type attribute, qui
possède des propriétés et des méthodes:
o name: cette propriété renvoie le nom d’un
attribut
"button")[0].attributes[0].name;
a. Les attributs:
o value: cette propriété renvoie ou modifie
la valeur d’un attribut.
alert (document.getElementsByTagName(
"button")[0].attributes[0].value);
"button")[0].attributes[0].value="nouvelleValeur";
b. Le contenu:
 Le contenu d’un élément HTML peut être du
texte et/ou d’autres éléments HTML.
o innerHTML: cette propriété récupère ou
définit le contenu HTML d'un élément
donné.
o innerHTML:
Exemple:
<div id="myDiv"> <p> du texte </p> </div>
<script>
alert(document.getElementById('myDiv').innerHTML);
</script>
b. Le contenu:
o innerHTML: si on veut ajouter sans perdre
l’ancien contenu d’un élément HTML, il faut
faire une concaténation à l’aide de
l’opérateur +=
<div id="myDiv">
<p onclick="ajouterParag()"> du texte </p>
</div>
<script>
function ajouterParag(){
document.getElementById('myDiv').innerHTML+="<p> un
autre paragraphe </p>";
}
</script>
b. Le contenu:
o textContent: cette propriété récupère le
contenu texte d’un élément HTML ainsi que
celui de tous ses descendants.
<div id="myDiv"> voici un paragraphe
<p> du texte </p>
</div>
<script>
alert(document.getElementById(
'myDiv').textContent);
</script>
3.3. Ajouter des éléments HTML

 Afin d’ajouter un élément HTML à votre page
web, il faut d’abord créer cet élément,
ensuite lui ajouter des attributs et finalement
l’insérer dans un document HTML.
o Créer un élément HTML: la création d’un
élément HTML se fait avec la méthode
createElement() de l’objet document.
var lien = document.createElement("a");
// on vient de créer un lien HTML, mais il n’est
pas encore inséré dans le document  il est
toujours invisible 142
3.3. AJOUTER DES ÉLÉMENTS HTML
o ajouter des attributs: après la création de

l’élément HTML, on peut lui affecter quelques
attributs à l’aide de la méthode
setAttribute().
lien.setAttribute('href','monCV.html');
o insérer l’élément : pour insérer un élément
HTML dans un document (page web), on
doit utiliser la méthode appendChild().
Celle-ci ajoute un élément à la fin de la liste
des enfants d'un élément Parent donné.
143
o insérer l’élément:
On peut chercher l’élément parent avec
l’une des méthodes d’accès aux éléments
HTML telles que getElementById().
lien.setAttribute('href','monCV.html');
document.getElementById("monDiv").appendChild(lien);
o createTextNode(): cette méthode crée des

nœuds de type « Text »
var lienText = document.createTextNode("consultez mon CV");
lien.appendChild(lienText);
144
o cloneNode(): cette méthode peut créer un

nouvel élément HTML en faisant copie
(clone) d’un autre.
Elle admet un paramètre boolean: true si on
veut copier le contenu de l’élément (les fils
et le texte) et false sinon.
var p1 = document.getElementById('idParag');
var p2 = p1.cloneNode(true);
/* l'élément est cloné, mais pas encore « inséré »
dans le document*/
document.body.appendChild(p2);
body est une propriété de l’objet document. Elle récupère l’élément
HTML body
145
o replaceChild(): cette méthode remplace

un nœud par un autre.
Elle admet deux paramètres: le nouvel
enfant et l’enfant à remplacer
<div>
<p id="idParag">du texte <a>et un lien</a></p>
</div>
<script>
var lien = document.getElementsByTagName('a')[0];
var label= document.createTextNode('et un
hyperlien');
lien.replaceChild(label, lien.firstChild);
</script>
146
o Il existe des propriétés qui permettent de

récupérer les nœuds enfants d’un nœud
parent, telles que:
• La propriété firstChild récupère le
premier nœud enfant d’un nœud parent;
• La propriété lastChild récupère le dernier
enfant d’un nœud parent;
• La propriété childNodes récupère la liste
des nœuds enfants d’un nœud parent.
N.B: l’ensemble de ces propriétés récupèrent des nœuds enfants
de type Element, Text ou Comment.
147
o Il existe d’autres propriétés permettant de

récupérer les nœuds enfants de type
Element d’un nœud parent:
• La propriété firstElementChild récupère
le premier nœud enfant de type Element
d’un nœud parent;
• La propriété lastElementChild récupère le
dernier enfant Element d’un nœud parent;
• La propriété children récupère la liste des
nœuds enfants Element d’un nœud parent.
148
o Exemple:
<div id="mondiv">
<p> P1 </p>
<p> P1 </p>
<p> P1 </p>
</div>
<script>
alert ("nbr element: "+document.getElementById('mondiv').children);
alert ("nbr nœuds: "+ document.getElementById('mondiv').childNodes);
</script>
149
o Il existe également deux propriétés pour

récupérer le nœud qui suit ou qui précède
un certain nœud:
• nextSibling récupère le nœud suivant;
• previousSibling récupère le nœud
précédent;
o Pour récupérer un nœud de type element
qui suit ou qui précède un certain nœud, il
faut utiliser les propriétés nextElementSibling
et previousElementSibling
150
• nextSibling et previousSibling
La propriété « data » récupère le contenu

d’un nœud de type « Text », « Attribute »
ou « Comment ».
La propriété « nodeValue » a le même
rôle que « data ». 151
o removeChild(): cette méthode supprime un

nœud enfant de l’arbre du DOM.
Elle accepte comme paramètre, le nœud
enfant à retirer.
Elle retourne le nœud supprimé  on peut
enlever un élément pour le réinsérer ailleurs.
var lien = document.getElementsByTagName('a')[0];
lien.parentNode.removeChild(lien);
La propriété parentNode retourne le nœud parent du nœud spécifié en

tant qu’un objet Node
152
o Autres méthodes:
• hasChildNodes(): pour vérifier qu’un
nœud possède des nœuds enfants. S’il a
au moins un enfant, la méthode retourne
true;
• insertBefore(): elle insère un nœud
avant un autre. Elle reçoit deux
paramètres:
 Le nœud à insérer;
 Le nœud avant lequel le nouveau nœud
doit être inséré. 153
Exemple:
<div id="elementParent">
<span id="elementEnfant">Span2</span>
</div>
<script>
var sp1= document.createElement("span");
sp1.setAttribute("id", "nouveauSpan");
var sp1_contenu= document.createTextNode("Span1");
sp1.appendChild(sp1_contenu);
var sp2= document.getElementById("elementEnfant");
var parentDiv = sp2.parentNode;
parentDiv.insertBefore(sp1, sp2);
</script>
154
o Autres propriétés:
• nodeName: cette propriété récupère le nom
d’un nœud donné;
- si le nœud est un élément HTML, elle
retourne son nom;
- Si c’est un attribut, elle retourne son nom;
- Si c’est un texte, elle retourne #text;
- Si c’est un commentaire, elle retourne
#comment
155
o Autres propriétés:
• nodeValue: cette propriété récupère ou
établit la valeur d’un nœud donné.
- si le nœud est un élément HTML, elle
retourne null;
- Si c’est un attribut, elle retourne la valeur
de l’attribut;
- Si c’est un texte, elle retourne le texte;
- Si c’est un commentaire, elle retourne le
commentaire.
156
4. Les événements
4.1. Définition
 Les événements déclenchent l’exécution
d’une fonction (méthode) suite à une
action bien déterminée.
 Exemple: lorsque l’utilisateur survole un
élément HTML, on affiche un message avec
la méthode alert().
157
4. LES ÉVÉNEMENTS
4.2. Listes des événements

 Il existe un nombre très important
d’événements, en voici quelques listes:
o Événements de la souris
158
4. LES ÉVÉNEMENTS
4.2. Listes des événements
Event Description
onclick The event occurs when the user clicks on an element
ondblclick The event occurs when the user double-clicks on an element
onmousedown when the user presses a mouse button over an element
onmouseup The event occurs when a user releases a mouse button over an element
onmousemove when the pointer is moving while it is over an element
onmouseleave The event occurs when the pointer is moved out of an element
onmouseover when the pointer is moved onto an element, or onto one of its children
onmouseout when a user moves the mouse pointer out of an element, or out of one
of its children
159
4. LES ÉVÉNEMENTS
4.2. LISTES DES ÉVÉNEMENTS
o Événements des formulaires

Event Description
onfocus The event occurs when an element gets focus
onblur The event occurs when an element loses focus
The event occurs when the content of a form element state have changed
onchange
(for <input>,, <select>, and <textarea>)
oninvalid The event occurs when an element is invalid
onreset The event occurs when a form is reset
The event occurs when the user writes something in a search field
onsearch
(for <input type="search">)
The event occurs after the user selects some text (for <input> and
onselect
<textarea>)
onsubmit The event occurs when a form is submitted
160
4. LES ÉVÉNEMENTS
4.2. LISTES DES ÉVÉNEMENTS
o Événements du clavier
Event Description
onkeydown The event occurs when the user is pressing a key

onkeypress The event occurs when the user presses a key
onkeyup The event occurs when the user releases a key
o Événements du clipboard (presse-papier)

Event Description
oncopy The event occurs when the user copies the content of an element
oncut The event occurs when the user cuts the content of an element
onpaste The event occurs when the user pastes some content in an
element 161
4. LES ÉVÉNEMENTS
4.3. Utilisation des événements

 Généralement les événements sont utilisés
de trois manières différentes:
o Sans le DOM
o Avec le DOM-0
o Avec le DOM-2
162
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES ÉVÉNEMENTS
o Sans le DOM:
Il suffit d’ajouter le nom de l’événement en
tant qu’attribut dans un élément HTML et de
lui associer une fonction
Exemple:
<button onclick="myFunction()"> Cliquez </button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML ="Bonjour";
}
</script>
163
4. LES ÉVÉNEMENTS
o Sans le DOM:
On peut attribuer plusieurs fonctions au
même événement. Pour cela, il suffit de
séparer les événements par un point-virgule.
Exemple:
<button onclick="myFunction();alert('vous venez de
modifier le contenu du paragraphe')"> Cliquez </button>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML ="Bonjour";
}
</script> 164
4. LES ÉVÉNEMENTS
o Sans le DOM:
Certains éléments HTML déclenchent des
événements par défaut. Pour bloquer ce
comportement, il faut ajouter return false à
l’événement concerné
Exemple:
<a
href="https://www.google.com" onclick="alert('
Bonjour');return false"> Google </a>
165
4. LES ÉVÉNEMENTS
o Avec le DOM-0:
Le DOM-0 est le DOM de niveau 0, considéré
comme l’implémentation de base créée par
Netscape et intégrée dans Netscape2.0
Les événements avec le DOM-0 ne sont plus
définis dans le code HTML mais directement
dans les scripts JavaScript.
Cette méthode est un peu vielle, mais elle
peu être très pratique dans certains cas.
166
4. LES ÉVÉNEMENTS
o Avec le DOM-0:
Exemple:
<button id='btn'>Cliquez</button>
<p id="demo"></p>
<script>
var e=document.getElementById('btn');
e.onclick= function(){
document.getElementById('demo').innerHTML ="Bonjour";
};
</script>
N.B: la propriété onclick accepte une fonction

anonyme ou le nom d’une fonction.
167
4. LES ÉVÉNEMENTS
o Avec le DOM-2:
Le DOM-2 s’utilise via la méthode
addEventListener(). Elle admet trois paramètres:
1. Le nom de l’événement. Il faut enlever le préfixe
« on » (click à la place de onclick);
2. La fonction à exécuter lorsque l’événement est
déclenché. Ça sera une fonction anonyme ou
le nom d’une fonction;
3. Un booléen qui spécifie est ce que l’événement
doit être exécuté en phase de capture (true) ou
en phase de bouillonnement (false, par défaut)
168
4. LES ÉVÉNEMENTS
o Avec le DOM-2:
Exemple:
<button id='btn'>Cliquez</button>
<p id="demo"></p>
<script>
var e;
e = document.getElementById("btn");
e.addEventListener ("click", function(){
document.getElementById("demo").innerHTML
= "Hello World";}, false);
</script>
169
4. LES ÉVÉNEMENTS
o Avec le DOM-2:
Exemple: on peut spécifier plusieurs fonctions
pour le même événement
var e= document.getElementById("btn");
//premier événement click
e.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello
World";}, false);
//deuxième événement click
e.addEventListener("click", alerter);
function alerter(){
alert("contenu vient d'être modifié"); }
170
4. LES ÉVÉNEMENTS
o Avec le DOM-2:
Le troisième paramètre de la méthode
addEventListner() permet de spécifier le sens
de propagation d’un événement:
bouillonnement (false, par défaut) ou capture
(true).
Exemple:
<div id="div1"> <p id="p1"> tout le monde </p> </div>
Si on attribue une fonction à l’événement
« click » pour les deux éléments <div> et <p>,
lorsqu’on clique sur le texte, lequel des deux
événements se déclenchera le premier? C’est
là où intervient le rôle de ce paramètre. 171
4. LES ÉVÉNEMENTS
o Avec le DOM-2:
<div id="div1"> <p id="p1"> tout le monde </p> </div>
Si on choisis le mode capture (true), alors

l'événement de <div> se déclenchera en
premier, puis viendra l'événement de <p>.
En revanche, si on utilise le bouillonnement
(false, par défaut), ce sera d'abord
l'événement de <p> qui se déclenchera le
premier , puis viendra par la suite celui de
<div>.
172
4. LES ÉVÉNEMENTS
 L’utilisation de l’objet Event est l’un des

avantages du DOM pour la gestion des
événements,.
 L’objet Event fournit des informations sur
l’événement déclenché, telles que l’élément
HTML qui a déclenché l’événement, le type
de l’événement, les coordonnées du curseur,
les touches actuellement enfoncées, …
 On accède à cet objet via la fonction
exécutée par l’événement
173
4. LES ÉVÉNEMENTS
 Avec le DOM-0:
<button id='btn'> Cliquez </button>
<p id="demo"></p>
<script>
var elem = document.getElementById("btn");
elem.onclick= function(ev){
alert(ev.type) //le type d’événement: click
};
</script>
le paramètre ev récupère une référence vers

l’objet Event.
174
4. LES ÉVÉNEMENTS
 Avec le DOM-2:
<button id='btn'> Cliquez </button>

<p id="demo"></p>
<script>
document.getElementById("btn").addEventListener(
"click", alerter);
function alerter(e) { alert(e.type); }
</script>
175
4. LES ÉVÉNEMENTS
 L’objet Event possède plusieurs propriétés,

entre autres:
o type: cette propriété donne le type de
l’événement déclenché;
o target: retourne l’élément HTML qui a
déclenché l’événement;
176
4. LES ÉVÉNEMENTS
 Exemple:
<p id="demo"> Hello </p>
<script>
document.getElementById("demo").addEventListener("click"
, alerter);
function alerter(e) { alert("élément déclencheur: " +
e.target.tagName); }
</script>
177
4. LES ÉVÉNEMENTS
o clientX et clientY: ces deux propriétés

renvoient les positions (en px) du pointeur
de la souris par rapport au coin supérieur
gauche de la page web. clientX renvoie la
position horizontale et clientY renvoie la
position verticale.
Exemple:
<p id="position"></p>
<script>
var position = document.getElementById('position');
document.addEventListener('mousemove', function(e) {
position.innerHTML = 'X : ' + e.clientX + 'px<br/>Y : ' +
e.clientY + 'px';}, false);
178
</script>
4. LES ÉVÉNEMENTS
o keyCode: permet de récupérer le code

ASCII de la touche du clavier pressée par
l’utilisateur. Cette propriété peut être
attachée aux événements keydown,
keyup ou keypress
Pour obtenir le caractère correspondant
à un code ASCII, on peut utiliser la
méthode fromCharCode(). C’est une
méthode statique de l’objet String.
179
4. LES ÉVÉNEMENTS
o keyCode:
Exemple:
<p id="position"></p>
<script>
var position =
document.getElementById('position');
document.addEventListener('keydown', function(e) {
position.innerHTML = 'le caractère frappé:
'+String.fromCharCode(e.keyCode)+'<br>son code
ASCII : '+e.keyCode;}, false);
</script>
180
5. Les formulaires
 Les éléments d’un formulaire partagent
toutes les propriétés et méthodes des autres
éléments HTML.
 Les formulaires et leurs éléments peuvent
être sélectionnés à partir d'un document
HTML en utilisant des méthodes standard
telles que getElementById(),
getElementsByTagName(), etc.
181
5. LES FORMULAIRES
 Cependant, un élément <form> avec un

attribut name ou id peut être sélectionné
en utilisant d’autres techniques.
 Un formulaire <form> avec un attribut
name = "address" peut être sélectionné de
l'une des techniques suivantes :
o window.address
o document.address
// ces deux écritures fonctionnent
uniquement avec l’attribut name
182
5. LES FORMULAIRES
o document.forms.address
//forms récupère une collection des
formulaires de document.
//L’accès peut se faire via l’attribut name
ou l’attribut id
o document.forms["address"]
//L’accès peut se faire via l’attribut name
ou l’attribut id
o document.forms[n]
//n est l’indice du formulaire commençant
par 0 183
5. LES FORMULAIRES
 Maintenant, pour accéder à un élément du

formulaire, on peut utiliser son attribut name
,son attribut id, son indice numérique (à
partir de 0) ou la collection elements
contenant tous les éléments du formulaire.
 Supposons qu’un formulaire porte l’attribut
name = "address" et son premier élément
possède un attribut name = "street" (ou un
attribut id = "street"), alors l’accès aux
éléments du formulaire peut se faire avec
l'une des manières suivantes : 184
5. LES FORMULAIRES
o document.forms.address[0]
o document.forms.address["street"]
o document.forms.address.street
o document.address.street //cette expression
fonctionne uniquement avec l’attribut name =
"address" et non pas pour l’attribut id =
"address"
o document.forms.address.elements["street"]
o document.forms.address.elements[0]
o document.forms.address.elements.street
o document.forms["address"].street
o document.forms["address"]["street"] 185
 Exemple:
<form name="adresse" id="addr">
<input type="text" name="zonetexte" value="Valeur
initiale">
<input type="button" value="Changer la zone de
texte" onclick='
document.forms.adresse["zonetexte"].value="NOUVEAU"
'>
</form>
 Les formulaires disposent de méthodes et

de propriétés spécifiques permettant de
manipuler ses éléments à l’aide du DOM
186
5. LES FORMULAIRES
5.1. Propriétés
 Voici quelques propriétés spécifiques pour les
éléments d’un formulaire HTML:
o value: pour récupérer ou définir la valeur de
certains éléments du formulaire, tels que les
<input>
<input type="text" id="text" value="Vous n'avez pas le focus !" />
<script>
var text = document.getElementById('text');
text.addEventListener('focus', function(e) { e.target.value =
"Vous avez le focus !"; });
text.addEventListener('blur', function(e) { e.target.value =
"Vous n'avez pas le focus !"; });
</script> 187
5. LES FORMULAIRES
5.1. PROPRIÉTÉS
o disabled: C’est une propriété booléenne qui

active ou désactive des éléments de
formulaires HTML
<input id="text1" type="text" value="zone de texte" />
<script>
var inputText1 = document.getElementById('text1');
inputText1.disabled=true;
</script>
o checked: elle s’emploie avec les cases à

cocher et les boutons radio.
Chaque bouton coché se verra attribuer la
valeur true à sa propriété checked
188
5. LES FORMULAIRES
5.1. PROPRIÉTÉS
o selectedIndex: dans une liste déroulante,

cette propriété renvoie l’indice (à partir de 0)
de l’option sélectionnée
o options: retourne, dans un tableau, toutes les
options d’une liste déroulante
189
5. LES FORMULAIRES
5.2. Méthodes
 Un formulaire HTML possède deux méthodes
intéressantes:
o submit(): permet d’envoyer un formulaire
sans l’intervention de l’utilisateur;
o reset(): permet de réinitialiser tous les
champs d’un formulaire.
190
6. Le CSS
 Le JavaScript est capable d’accéder aux
propriétés du CSS et les modifier
 On rappel qu’un style peut être appliqué
de trois manières différentes:
o à l’intérieur d’un élément HTML à l’aide de
l’attribut style
o dans le <head> à l’aide de la balise HTML
<style>
o dans un fichier externe .css 191
6. LE CSS
 Deux grandes techniques pour accéder au

style CSS:
a. L’attribut style: on peut accéder à cet
attribut en utilisant la propriété attributes
ou la méthode getAttribute(). On peut y
accéder aussi via la propriété style de
l’élément HTML(element.style).
Ensuite on accède aux propriétés du style,
qui sont exactement pareils aux celles
utilisées en CSS (element.style.proprité).
192
6. LE CSS
A. L’ATTRIBUT STYLE
Exemple
<h1 id="myH1" style="color:blue; background-color:

yellow; "> Style CSS </h1>
<button onclick="myFunction()">
modifier le style
</button>
<script>
var h= document.getElementById("myH1");
h.style.color = "yellow";
h.style.backgroundColor = "blue";
}
</script>
193
6. LE CSS
b. getComputedStyle(): dans le cas où le style

est définit dans un fichier externe .css, ou à
l’aide de la balise <style>, il devient
impossible d’utiliser l’attribut style et il faut
obligatoirement faire appel à la méthode
getComputedStyle() de l’objet window.
Cette méthode est opérationnelle quelque
soit la manière (.css, <style> ou également
l’attribut style) avec laquelle on définit le
style dans une page web.
194
6. LE CSS
B. GETCOMPUTEDSTYLE()
getComputedStyle() retourne un objet de

type CSSStyleDeclaration. Cet objet
représente une liste de paires
« paropriétésCSS – valeur »
Pour récupérer la valeur d’une propriétés
CSS, on peut utiliser la méthode
getPropertyValue() de l’objet
CSSStyleDeclaration.
Pour ajouter/modifier la valeur d’une
propriété CSS, on peut utiliser la méthode
setProperty() de l’objet CSSStyleDeclaration.
195
6. LE CSS
<style>
#text {
background-color: red;
}
</style>
<span id="text">Bonjour</span>
<script>
var t1 = document.getElementById('text');
var c= getComputedStyle(t1).backgroundColor;
alert(c);
</script>
196
6. LE CSS
<style>
#titre1::first-letter {
color: red;
}
</style>
<h1 id="titre1">Bonjour</h1>
<script>
var t1 = document.getElementById('titre1');
Var style= getComputedStyle(t1,"first-letter");
Var couleur = style.getPropertyValue("color");
alert(couleur);
</script>
N.B: getComputedStyle() peut admettre un deuxième paramètre
197
pour spécifier un pseudo-élément.

Ch4 Javascript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ch4 Javascript

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSITÉ ABDELMALEK ESSAÂDI

FACULTÉ POLYDISCIPLINAIRE DE LARACHE

FILIÈRE: SMI 2019-2020

 Généralement, JavaScript est utilisé

 JavaScript est un langage de scripts 

II. DÉBUTER EN JAVASCRIPT:

i. JavaScript dans <head>

i. JavaScript dans <head>

ii. JavaScript dans <body>

ii. JavaScript dans <body>

iii. JavaScript dans un fichier externe

iii. JavaScript dans un fichier externe

//le fichier JavaScript bonjour.js

 N.B: afin d’optimiser le chargement de la

 Exactement comme le langage C, il

o Commentaire sur plusieurs lignes: ajouté

 JavaScript utilise le jeu de caractères

 On peut déclarer plusieurs variables sur la

 Une variable non encore définie vaudra la

3.2. Types de variables

o Numérique (number): il représente tous les

o Booléen (boolean): il accepte deux valeurs, true

3.3. Les opérateurs

 Opérateurs de chaînes de caractères:

On peut également concaténer en utilisant

o concaténation d’une chaîne avec un nombre:

o convertir une chaîne en nombre: pour convertir

o concaténer deux nombres: il suffit d’introduire

 Opérateurs de comparaison: soit x=5;

< inférieur à x<8 true

>= supérieur ou égale à x >= 5 true

<= inférieur ou égale à x <= 5 true

 Opérateurs logiques: les opérateurs logiques

 L’opérateur ternaire: c’est un cas

4.2. La boucle do…while

4.3. La boucle for

4.4. les instructions break et continue

 L’instruction continue arrête l’exécution

 Les paramètres (primitifs) d’une fonction,

4.2. Les fonctions anonymes

 L’appel de la fonction se fait via la variable à

7. Les objets natifs

7.1. Les objets String

 les variables primitives ne possèdent pas des

 Les méthodes: String possède plusieurs

7.2. Les objets Number

 N.B: Il faut éviter de déclarer les variables

 Les propriétés de l’objet Number sont

NaN La valeur NaN

alert('la valeur maximale de Number ='+Number.MAX_VALUE);

 Les méthodes globales: peuvent être utilisées

 Les méthodes Number: voici quelques

7.3. Les objets Boolean

 N.B: Il est déconseillé d’utiliser un objet

 Il n’existe pas de propriétés et de méthodes

7.4. Les objets Date

 L’objet Date admet plusieurs paramètres:

• Date("MMM/DD/YYYY") ou Date("MMM DD YYYY")

 Les propriétés de l’objet Date: y en a pas

 Les méthodes de l’objet Date:

7.5. Les objets Math

 Les méthodes de l’objet Math:

7.6. Les expressions régulières: RegExp

 Les expressions régulières ne sont pas