Académique Documents
Professionnel Documents
Culture Documents
PROGRAMMATION WEB:
HTML-CSS-JS-PHP
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
CHAPITRE 4: JAVASCRIPT
I. GÉNÉRALITÉS
1. DÉFINITION
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
CHAPITRE 4: JAVASCRIPT
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
CHAPITRE 4: JAVASCRIPT
11
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
1. OÙ PLACER LE CODE JAVASCRIPT?
<script>
function Bonjour() { alert("Bonjour tout le monde"); }
</script>
</body>
</html>
12
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
1. OÙ PLACER LE CODE JAVASCRIPT?
13
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
1. OÙ PLACER LE CODE JAVASCRIPT?
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
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
2. PROPRIÉTÉS SYNTAXIQUES
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
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
3. LES VARIABLES
3.1. DÉCLARATION
25
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
3. LES VARIABLES
3.3. LES OPÉRATEURS
o Exemple:
//le résultat
x = 5 + 5; x vaudra 10;
y = "5" + 5; y vaudra 55;
z= "Hello" + 5; z vaudra Hello5;
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
3. LES VARIABLES
3.3. LES OPÉRATEURS
é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
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
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
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()
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
4. LES CONDITIONS
4.1. LA CONDITION IF-ELSE
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
}
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
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
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
5. LES BOUCLES
do {
instructions;
} while(condition);
36
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
5. LES BOUCLES
Exemple:
for (var i=0 ; i<10; i++) {
if(i==2) break;
alert('i='+i);
}
38
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
5. LES BOUCLES
5.1. BREAK ET CONTINUE
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
}
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
6. LES FONCTIONS
6.1. GÉNÉRALITÉS
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
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
7. LES OBJETS
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)
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');
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);
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
7. LES OBJETS
7.4. LES OBJETS 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
…
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
7. LES OBJETS
Exemple:
var monRegex = /Go{2}gle/;
var monTexte = "j'utilise Google";
if (monRegex.test(monTexte))
alert(monRegex.exec(monTexte))
Exemple:
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
7. LES OBJETS
7.6. LES EXPRESSIONS RÉGULIÈRES: REGEXP / UTILISATION D’UNE REGEX
Exemple:
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
7. LES OBJETS
7.6. LES EXPRESSIONS RÉGULIÈRES: REGEXP / UTILISATION D’UNE REGEX
o replace():
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
7. LES OBJETS
7.6. LES EXPRESSIONS RÉGULIÈRES: REGEXP / UTILISATION D’UNE REGEX
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
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
8. LES TABLEAUX
8.1. GÉNÉRALITÉS
Exemple:
var personne = {
prenom:"Ahmed",
nom:"Erradi",
age:46 };
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
var fruits = ["Banane", "Orange", "Pomme"];
fruits.splice(0,1); //fruits vaut ["Orange", "Pomme"]
fruits.splice(1,0,"Kiwi", "Fraise"); //fruits vaut
["Orange", "Kiwi" , "Fraise" , "Pomme"]
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
8. LES TABLEAUX
8.3. OPÉRATION SUR LES TABLEAUX
e. Trier un tableau:
La méthode sort() trie alphabétiquement un
tableau de chaîne de caractères.
e. Trier un tableau:
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);
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
8. LES TABLEAUX
8.3. OPÉRATION SUR LES TABLEAUX
e. Trier un tableau:
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
CHAPITRE 4: JAVASCRIPT
II. DÉBUTER EN JAVASCRIPT
8. LES TABLEAUX
8.3. OPÉRATION SUR LES TABLEAUX
e. Trier un tableau:
Exemple:
var nombres = [20, 1, 100];
nombres.sort();
alert(nombres);
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.
115
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
1. DOM
116
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
1. DOM
117
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
1. DOM
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES 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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.1. ACCÈS AUX ÉLÉMENTS HTML
Exemple:
<!-- le code HTML -->
<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"; }
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.
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.1. ACCÈS AUX ÉLÉMENTS HTML
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.
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.1. ACCÈS AUX ÉLÉMENTS HTML
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.
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.1. ACCÈS AUX ÉLÉMENTS HTML
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.
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.1. ACCÈS AUX ÉLÉMENTS HTML
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>
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS 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");
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.2. MODIFIER UN ÉLÉMENT HTML
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");
}
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.2. MODIFIER UN ÉLÉMENT HTML
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);
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.2. MODIFIER UN ÉLÉMENT HTML
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
document.getElementsByTagName(
"button")[0].attributes[0].name;
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.2. MODIFIER UN ÉLÉMENT HTML
a. Les attributs:
o value: cette propriété renvoie ou modifie
la valeur d’un attribut.
alert (document.getElementsByTagName(
"button")[0].attributes[0].value);
document.getElementsByTagName(
"button")[0].attributes[0].value="nouvelleValeur";
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.2. MODIFIER UN ÉLÉMENT HTML
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é.
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.2. MODIFIER UN ÉLÉMENT HTML
o innerHTML:
Exemple:
<div id="myDiv"> <p> du texte </p> </div>
<script>
alert(document.getElementById('myDiv').innerHTML);
</script>
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.2. MODIFIER UN ÉLÉMENT HTML
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>
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.2. MODIFIER UN ÉLÉMENT HTML
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>
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
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().
var lien = document.createElement("a");
lien.setAttribute('href','monCV.html');
document.getElementById("monDiv").appendChild(lien);
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.3. AJOUTER DES ÉLÉMENTS HTML
• nextSibling et previousSibling
152
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.3. AJOUTER DES ÉLÉMENTS HTML
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.3. AJOUTER DES ÉLÉMENTS HTML
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.3. AJOUTER DES ÉLÉMENTS HTML
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
3. LES ÉLÉMENTS HTML
3.3. AJOUTER DES ÉLÉMENTS HTML
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
158
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES É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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.2. LISTES DES ÉVÉNEMENTS
o Événements du clavier
Event Description
162
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES É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>
function myFunction() {
document.getElementById("demo").innerHTML ="Bonjour";
}
</script> 164
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES É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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES É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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES É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>
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES É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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES É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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES É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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES ÉVÉNEMENTS
o Avec le DOM-2:
<div id="div1"> <p id="p1"> tout le monde </p> </div>
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>
Avec le DOM-2:
175
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES ÉVÉNEMENTS
176
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES É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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES ÉVÉNEMENTS
179
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
4. LES ÉVÉNEMENTS
4.3. UTILISATION DES É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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
5. LES FORMULAIRES
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>
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
5. LES FORMULAIRES
5.1. PROPRIÉTÉS
189
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
6. LE CSS
Exemple
194
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
6. LE CSS
B. GETCOMPUTEDSTYLE()
<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
CHAPITRE 4: JAVASCRIPT
III. DYNAMISER LES PAGES HTML
6. LE CSS
B. GETCOMPUTEDSTYLE()
<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.