Technologies du web

Partie 3 : JavaScript

2
 Plan de la présentation
Introduction à JavaScript

Core JavaScript

Les Objets dans JavaScript

Plan

Client-side JavaScript

3
 Introduction

Interagir
Manipuler les avec les
événements éléments Valider les formulaires
HTML web côté client
Introduction

Drag & Drop

Faire un peu de dessin

et des animations, et
bien d'autres choses !

4
Introduction Introduction

Une suggestion lors de la frappe dans un Un système de chat, comme celui de

champ de texte, comme lors d'une Facebook
recherche avec Google ;

Des jeux exploitants la balise <canvas> : Un lecteur de vidéos ou de musiques grâce aux
Torus; Tetris en 3D ; modélisation 3D d’une balises <video> et <audio>
Lamborghini affichée grâce à l'API WebGL et à la
bibliothèque [Link] 5
Introduction à JavaScript Introduction à JavaScript

JavaScript C’est quoi ???!!

Compilé vs Interprété
L’usage de JavaScript
Les particularités de JavaScript
Historique de JavaScript

6
Introduction à JavaScript Un peu d’histoire…

Netscape Communications a eu besoin d’un langage

coller au HTML afin de rendre les pages un peu
plus dynamique
Ce langage doit être:
Facile utiliser par les designers et les programmeurs
Capable d’assembler les composants (images, plugins,..)

Brendan Eich, a développé le premier prototype en

10 jours
Introduction à JavaScript Un peu d’histoire…

Le premier nom de ce langage a été Mocha

Ensuite LiveScript
Il a été renommé « JavaScript » lorsque sa
version Beta 3 a été déployé
Aucun lien avec JAVA
Choix de Marketing
Normalisé par Ecma International en 1996 il a été
batisé ECMAScript
 JavaScript C’est quoi ???!!

JavaScript est un langage de programmation qui sert

principalement à dynamiser et à rendre interactifs les
Introduction à JavaScript

pages WEB.
Exécuté sur vos machine donc côté Client.
L’un des langages WEB les plus utiles et membre du
fameux triplet :
HTML pour le contenu
CSS pour la présentation
JS pour le comportement
JavaScript est:
Haut niveau
Dynamique
Non typé
Interprété
 Compilé vs Interprété

Compilation
Introduction à JavaScript

Un compilateur va traduire le programme dans un

code spécifique à la machine cible (l’exécutable).
Etapes :
Le code source est analysé et parsé : C’est la ou on détecte
les erreurs.

Un générateur de code produit l’exécutable.

Le code est ensuite exécuté

 Compilé vs Interprété

Interprétation
Introduction à JavaScript

Le code source n’est pas directement exécuté par la

machine cible.

Un autre programme (i.e. l’interpréteur) lit et exécute

le code source.

Dans l’interprétation le code source est traduit en un

code intermédiaire qui est ensuite traduit en en un
code machine.
 Plan Core JS

Les bases du JavaScript

Les variables
Les types de données
Core JavaScript

Operateurs et Expressions
Structures conditionnelles et itératives
Les Fonctions
Les Tableaux
Les Objets
 La structure lexicale de JavaScript

JS est sensible à la casse

Les tags html et ces attributs doivent être représenté en
minuscule coté JS.
Core JavaScript

JS ignore les espaces et les retours à la ligne.

Cependant formater votre code c’est UN DEVOIR
Les commentaires
// : commente le texte jusqu’à la fin de la ligne
/* text */ : Commente un bloc
 La structure lexicale de JavaScript

Identifiants
Doit commencer par une lettre, par (_) ou par le signe dollar ($)
Le reste des lettres, chiffres, (_), ou $
Core JavaScript

Mots clé réservés

Certain identifiants sont réservés comme mot clé
break delete function return
typeof
case do if switch var
catch else in this void
continue false instanceof throw while
debugger finally new true with
default for null try

Certains sont moins utilisés mais peuvent l’être plus dans les futurs
versions
class const enum export extends import super
 Dates et Times

Dans JS l’heure et le temps sont gérés par l’objet Date.

Stocké sous forme de timestamp (nombre de millisecondes
écoulées depuis le 1er Janvier1970).
Core JavaScript

var maDate = new Date(2010, 0, 1); // Premier jour du premier mois

// de 2010
var apres = new Date(2010, 0, 1, // Même jour, à 5:10:30pm, heure
17, 10, 30); locale
var mnt = new Date(); // Date et heure actuelles
var elapsed = now - then; // La valeur de retour représente
la différence en millisecondes
[Link]() // => 2010
[Link]() // => 0: (0:11)
[Link]() // => Jour du mois 1: (1:31)
[Link]() // => Jour de la semaine (0:6)
5: zero-based jour
0 représente dimanche.
[Link]() // => Heure (0:23) 17
[Link]() // (0:59)
[Link]() // (0:59)
[Link]() // (0:999)
[Link]() // retourne le timestamp de l’objet
[Link](timestamp) // modifie l’objet selon letimestamp
 Dates et Times
setTimout( execFunction, waitingTime, param1,param2,…,paramN)
est une fonction qui permet d’exécuter la fonction execFunction après
waitingTime milliseconde de son appel. Les paramètres param1,
paramN sont les paramètres que nous voulons passer à execFunction
Core JavaScript

(ne marche pas dans les internet explorer <10). Cette fonction
retourne un id qui identifie la fonction pour pouvoir l’annuler avec la
fonction clearTimout.
setInterval( execFunction, intervalTime, param1,param2,…,paramN)
est une fonction qui permet d’exécuter la fonction execFunction tout
les intervalTime milliseconde à partir de son appel. Les paramètres
param1, paramN sont les paramètres que nous voulons passer à
execFunction (ne marche pas dans les internet explorer <10).
Si La version est inférieur à explorer 10 il suffit d’utiliser une fonction
anonyme et dans laquelle on appellera la fonction execFunction. Cette
fonction retourne un id qui identifie la fonction pour pouvoir l’annuler
avec la fonction clearInterval.
 Dates et Times
function testTimout() {
setTimeout(function () {
[Link]('Je test le Timout');
},2000);
}
Core JavaScript

testTimout();var i=0;
testInterval();
function testInterval() {
var code =setInterval(function () {
if(i<22)
{
[Link](i);
i++
}
else{
clearInterval(code);
}
},100,code);
}
 Chaines

Les chaines en JS peuvent être mises entre ’ ou «

Il y a deux types de chaines de caractère, le type primitif
et les strings
Core JavaScript

var primitifChaine = « bjr »; var varString = new

String(« bjr »);
En ECMAScript 5, les chaines peuvent être représentées
sur plusieurs lignes en terminant chaque ligne par \
Pour échapper un caractère spécial on utilise \
\n, \’, \t, \\,…
La concatenation se fait avec +
Pour avoir le nombre de caractère on utilise l’attribut
length.
[Link]
 Chaines
var s = "hello, on déclare une chaine
world"
[Link](0) "h": premier caractère
[Link]([Link]-1) "d": le dernier caractère
Core JavaScript

[Link](1,4) "ell": les 2éme 3éme et 4éme caractère.

[Link](1,4) "ell": même résultat
[Link](-3) "rld": le deuxième paramètre peut être négatif ce qui indique
qu’on commence par la fin.
[Link]("l") 2: position de la première occurrence de l, -1 si la chaine ou le
caractère n’existe pas.
[Link]("l") 10: position du dernier caractère ou chaine.
[Link]("l", 3) 3: position of first "l" at or after 3
s[0] "h"
s[[Link]-1] "d"
[Link]() supprime les blanc à gauche et à droite
 Les booléens

Deux valeurs true et false

Les valeurs évaluées à false sont :
undefined, null, 0, -0, NaN, ""
Core JavaScript

Tous le reste est évalué à true

Pour convertir un booléen vers un string on peut
utiliser le toString()
Les opérations sur les booléens
&& : et
|| : ou
! : NOT
 La conversion de type
Deux types de conversion : implicite et explicite
Conversion implicite
Lorsque JS s’attend à avoir un type particulier, il le convertit
automatiquement
Core JavaScript

Pour les numériques, si la conversion n’est pas possible, la

variable est convertit en NaN.
Number("3") // => 3
String(false) // => "false" Or use
[Link]()
Boolean([]) // => true
Object(3) // => new Number(3)
x + "" // Même chose que String(x)
+x // Même chose que Number(x).
Conversion explicite
Utilisation de : Boolean(), Number(), String(), Object()
Utilisation de +
10 + " objets" // => "10 objets". 10 est converti en une chaine
"7" * "4" // => 28: Les chaines sont convertis en un entier
var n = 1 - "x"; // => NaN: x ne peut pas être convertit en un entier
n + " objets" // => "NaN objets": NaN est convertit en la chaine"NaN"
 Les variables

Les variables sont déclarées avec le mot clé var.

Si une variable n’est pas initialisée elle aura la

Core JavaScript

valeur undefined.

Une variable déclarée sans utiliser le mot var est

une variable globale.

Les variables sont non typées, le type est associé

lors de l’exécution et il peut changer.
 La portée des variables

La portée (scope) d’une variable est l’emplacement dans lequel

elle est définie.
Variables globales : ce sont les variables définies dans tout le
Core JavaScript

script JS.
Variables locales
Déclarées dans le corps d’une fonction
Définit dans une fonction ou dans n’importe quelle fonction
définie à l’intérieur de celle-ci.
Vous devez toujours utiliser var pour les variables locales
JS n’a pas de portée de block.
 La portée des variables

La portée (scope) d’une variable est l’emplacement dans lequel

elle est définie.
Variables globales : ce sont les variables définies dans tout le
Core JavaScript

script JS.
Variables locales
Déclarées dans le corps d’une fonction
Définit dans une fonction ou dans n’importe quelle fonction
functiondéfinie
test(o) { à l’intérieur de celle-ci.
var i = 0; // i est défini dans la fonction

Vous
var jdevez toujours utiliser var pour
if (typeof o == "object") {
= 0; lesdéfini
// j est variables
dans la locales
for (var k=0; k < 10; k++) { // k est défini dans la fonction pas
JS n’a pas de [Link](k);
portée de block. //que dans la boucle
// Afficher les nombres de 0 à 9
}
[Link](k); // k est toujours défini
}
[Link](j); // j est toujours défini mais elle peut ne pas être initialisé
}
 La portée des variables

Les variables locales sont visibles dans la fonction

même avant leur déclaration.
Ce processus est appelé le hoisting
Core JavaScript

Toutes les déclarations de variables sont « hoisté »

(mis en haut). Ce n’est pas le cas des initialisations.

var scope = "globale";

function f() {
[Link](scope); // "undefined"
var scope = "locale"; // Variable initialisée ici, mais
définie en haut dû au hoisting
[Link](scope); // affiche "locale"
}
 Les tableaux

Un tableau est une suite de valeurs de différents

types.
Pour initialiser un tableau on a plusieurs méthodes :
Core JavaScript

monArray = [val1, val2, ,valN];

monArray = new Array();

monArray =[ ];
monArray =[1+2,3+4]; // 3, 7
var matrice = [[1,2,3], [4,5,6], [7,8,9]];
var eparseArray = [1,,,,5]; // eparseArray[1]==undefined;
var t = new Array(1,2,3) var t=[1,2,3]
 Les tableaux

Lire un élément du tableau

var a = ["world"];
Avec l’opérateur [] var value = a[0];
Un tableau peut être tronqué a[1] = 3.14;
i = 2;
en modifiant l’attribut length a[i] = 3;
Core JavaScript

Ajout et suppression a[i + 1] = "hello";

a[a[i]] = a[0];
d’éléments [Link] // => 4
[Link] = 2 // a devient ["world",3.14]
push(): ajoute une valeur à la // Ajout
fin du tableau [Link]("zero"); //a[2]=="zero"
unshift(): ajoute une valeur [Link](1,3); //a[3]==1, a[4]==3
//Suppression
au début du tableau a = [1,2,3];
delete: supprime un élément delete a[1]; // a n’a plus d’élément l’indice 1
1 in a // => false: pas d’indice 1
• Itérer sur un tableau [Link] // => 3: delete n’affecte pas la taille du tableau
// Itération
– for ou for/in for (var indice in a) {
var value = a[indice];
// Faites ce que vous voulez
}
 Les tableaux

Les méthodes sur les tableaux :

la méthode concat permet de concaténer 2 tableaux et de
retourner le tableau résultat.
Core JavaScript

la méthode forEach permet de parcourir le tableau. Elle prend

en paramètre la fonction à exécuter à qui elle fourni la valeur
actuelle du tableau son indice et le tableau en question.
Les méthodes de recherche sont les mêmes que les chaines mais
d’une façon générique vu que le tableau contient des éléments
de différents types. Pour rappel les méthodes sont indexof( ) et
lastIndexOf( ).
var tab1=[1,2,3];
var tab2 = [4,5,6];
var tab3 = [Link](tab2);
[Link](function(val,ind,monTab){
[Link]("tab["+ind+"]="+val);
});
 Les tableaux
Afin de trier un tableau nous utilisons la méthode sort( ) qui
transforme les éléments du tableau en chaine de caractère et effectue
le trie par ordre alphabétique.
La fonction sort prend un paramètre facultatif qui est une fonction
qui spécifie l’ordre de trie. Cette fonction devra retourner un entier
Core JavaScript

(-1 si le 1er est inférieur au second, 0 si égaux et 1 sinon).

Pour extraire une portion d’un tableau on utilise la même
fonction que les chaines slice.
Afin de modifier une partie du tableau on utilise la
méthode splice(indice, nbElement, var1, var2,…, varN)
qui extrait les nbElement à partir de l’indice indice et les
remplace par les variables varn). Seul les deux premiers
paramètres sont obligatoires.
 Les tableaux

// Ceci marche du à la conversion implicite de JS

(mais ca ne marche pas en cas de undefined et de
Core JavaScript

NAN)
function comparerDesNombres(a, b) {
return a - b;
}
function comparerDesNombres(a,b){
var x=parseInt(a,10);var y=parseInt(b,10);
if(x>y){
return 1;
}else if(y>x){
return -1;
}return 0;
}
var t=[1,2,3,11,22,33];
[Link](comparerDesNombres);
 Les objets : Valeurs primitives vs Objets
Primitives:
undefined, null, boolean, numériques, et strings
Immutable : leur allocation de mémoire initiale ne
Core JavaScript

change jamais
Sont comparées par valeur

Objets :
Tout le reste: objets, tableaux et fonctions
Mutable: leur mémoire peut changer dynamiquement
Sont comparés par référence
 Les objets
Un objet est une valeur composite
C’est une collection de propriétés désordonnée, chacune
avec un nom et une valeur et qui peuvent être:
Des Attributs
Core JavaScript

Des Méthodes
Les propriétés peuvent être ajoutés dynamiquement
Trois types d’objets :
Objet Native: défini par la spécification ECMAScript (Arrays,
fonctions, dates)
Objet Hôte: défini par l’environnement hôte (e.g. navigateur)
dans lequel l’interpréteur est embarqué, i.e. HTMLElement dans
le JS coté client.
Object défini par l’utilisateur : objet crée par l’exécution du
code JS.
 Le modèle objet JS : Les prototypes
Un langage basée sur les prototypes ne possède (généralement) que
des objets.
Parmi ces objets il peut y avoir des objets prototypes agissant
comme un modèle permettant ainsi s’avoir des propriétés et des
Core JavaScript

méthodes initiales (jouant le rôle de la classe mais sans en être une).

Tout objet peut définir ces propres propriétés dynamiquement et à
n’importe quel moment.
Si une propriété est ajoutée à un objet utilisé comme prototype, tous
les objets qui l’utilisent comme prototype bénéficieront de cette
propriété.
 Le modèle objet JS : Les prototypes
Langage de classe (Java) Langage de prototype (JavaScript)

classes et instances sont deux entités distinctes. Tous les objets sont des instances.

Une classe est définie avec une définition de On définit et on crée un ensemble d’objets
classe. On instancie une classe avec des avec des fonctions qui sont des
Core JavaScript

méthodes appelées constructeurs constructeurs.

On crée un seul objet grâce à l’opérateur new. Même chose
hiérarchie d’objets construite en utilisant les Hiérarchie d’objets en assignant un
définitions des classes. prototype à un objet dans le constructeur.
Les objets héritent des propriétés
Les objets héritent des propriétés appartenant à
appartenant à la chaîne des prototypes de la
la chaîne des classes de la hiérarchie.
hiérarchie.

Le constructeur ou le prototype définit un

La définition de la classe définit exactement
ensemble de propriétés initiales. Possibilité
toutes les propriétés de toutes les instances
de retirer des propriétés dynamiquement,
d’une classe. Il est impossible d’ajouter des
pour certains objets en particuliers ou bien
propriétés dynamiquement pendant l’exécution.
pour l’ensemble des objets.
[Link]
 Les objets : Création
Avec les objets littéraux // Avec les objets littéraux
var book = {
Une paire de clef valeur "main title": "JavaScript",
séparée par des ‘;’ 'sub-title': "The Guide",
"for": "all audiences",
Le nom d’une propriété doit author: {
être défini en tant que chaine firstname: "David",
Core JavaScript

si : }
surname: "Flanagan"

Il inclut un espace };
C’est un mot réservé // Avec l’opérateur new
var o = new Object();
Avec l’opérateur new var a = new Array();
var d = new Date();
new doit être suivi du var r = new RegExp("js");
constructeur // Avec [Link]()
Avec [Link]() var o1 = [Link]({x:1, y:2});
var o2 = [Link](null);
Crée un nouvel objet en var o3 = [Link]([Link]);
utilisant le premier argument var o4 = [Link](o1);
//Exemple constructeur
comme prototype de l’objet function Personne(nom,prenom){
[Link]=nom;
[Link]=prenom;
[Link] =function() {
[Link]([Link]+[Link]);
}
}
 Les objets : Création
Ajout et modification des
propriétés // Ajout et modification des propriétés
var author = [Link];
Avec ‘.’ ou ‘[ ]’ var name = [Link];
var title = book["main title"];

Suppression des propriétés

Core JavaScript

// Suppression des propriétés

delete [Link];
Avec la fonction delete suivie delete book["main title"];
de la propriété à supprimer delete [Link]; //on ne peut
pas la supprimer
//Tester et énumérer des propriétés
Tester et énumérer des var o = { x: 10}
"x" in o // true
propriétés "y" in o // false
Avec l’opérateur in for (p in o) {
Pour accéder à la valeur, on [Link](p);
utilise o[indice], et non //=> x
[Link] [Link](o[p]);
//=> 10
[Link](o.p);
//=> undefined
}
 Les objets

Sérialisation d’Object
C’est le processus de transformation d’un objet en une
chaine de caractère et qui peut être récupérée
Core JavaScript

ultérieurement.
2 fonctions :
[Link](objet) : retourne une chaine
[Link](objet) : restore l’objet partir de la chaine JSON

o = {x:1, y:{z:[false,null,""]}};
s = [Link](o); // s : '{"x":1,"y":{"z":[false,null,""]}}'
p = [Link](s); // p est une copie de o
 Les Fonctions
C’est un objet « spécial »
Vous pouvez lui ajouter des propriétés et invoquer des méthodes.
C’est un bloc JS défini une fois mais qui peut être exécuté à volonté.
Paramétrable :
Core JavaScript

Inclut un ensemble d’identifiant, paramètres travaillant comme des

variables locales.
L’invocation de la fonction nécessite de lui passer les arguments.
Peut retourner une valeur
Possède un contexte d’invocation
Le mot clé this
Peut être assigné à la propriété d’un objet qui devient une méthode
Quand une fonction est invoqué à travers un objet, cet objet devient son
contexte d’invocation.
Peut être utilisé pour initialiser un objet. C’est le constructeur de l’objet.
 Les Fonctions

Une fonction est déclaré en utilisant le mot clé

function
Une fonction littérale est déclarée
Core JavaScript

var carre=function(x){return x*x;}

Dans ce cas, seul la déclaration va être hoistée.
Déclaration standard
function square(x) { return x*x; }
Dans ce cas c’est toute la fonction qui va être
hoisté.
 Les Fonctions

function foo(){ alert(foo());

function bar() { function foo(){
return 3; var bar = function() {
} return 3;
return bar(); };
function bar() { return bar();
Core JavaScript

return 8; var bar = function() {

} return 8;
} };
alert(foo()); }

// return 8 // return 3
/************************************/ /************************************/

function foo(){ function foo(){

var bar = function() { return bar();
return 3; var bar = function() {
}; return 3;
return bar(); };
var bar = function() { var bar = function() {
return 8; return 8;
}; };
} }
alert(foo()); alert(foo());
// return 3 //[Type Error: bar is not a function]
 Les Fonctions

Comme toute fonction, elle ne sera évoqué que si

on fait appel à elle.
Core JavaScript

Les fonctions JavaScript peuvent être invoqué de

plusieurs façons :
En tant que fonction
En tant que méthode
En tant que constructeur
Indirectement avec les méthodes call() et apply()
 Les Fonctions

Invocation d’une méthode

o["m"](x,y);
a[0](z) // En supposant que a[0] soit une fonction.
Core JavaScript

f().m(); // Invoque la méthode m() de la valeur de retour

de f()

var calculator = { // un objet littéral

operand1: 1,
operand2: 1,
add: function() {
// Ici on utilise le this pour faire référence à l’objet
// (le context d’exécution)
[Link] = this.operand1 + this.operand2;
}
};
[Link]();
[Link] // => 2
 Les Fonctions
Invocation indirecte
Les fonctions JS sont des objets, ils peuvent donc avoir
des méthodes.
Core JavaScript

Deux méthodes prédéfinies permettent d’invoquer

indirectement la fonction : call() et apply()
Elles permettent toutes les deux d’invoquer une méthode
temporaire d’un objet sans l’ajouter à son prototype.
Le premier arguments des deux méthodes est l’objet
auquel on applique la méthode.
call(): utilises sa liste d’arguments comme arguments de la
méthode invoquer.
apply(): Ne connaissant pas le nombre des arguments on passe
un tableau.
 Les Fonctions
Invocation indirecte
Les fonctions JS sont des objets, ils peuvent donc avoir
des méthodes.
Core JavaScript

Deux méthodes prédéfinies permettent d’invoquer

indirectement la fonction : call() et apply()
Elles permettent toutes les deux d’invoquer une méthode
temporaire d’un objet sans l’ajouter à son prototype.
Le premier arguments des deux méthodes est l’objet
auquel on applique la méthode.
[Link](o,1,2); // Associe l’objet o à la méthode f avec les arguments 1 et 2
[Link](o,[1,2]); // Associe l’objet o la méthode f avec le tableau d’arguments
call(): utilises sa liste d’arguments comme arguments de la
o.m = f;
méthode
// Les deux invoquer.
sont équivalentes à :
// Crée une méthode temporaire de o.
o.m(1,2); apply(): Ne connaissant pas
// L’invoquer enlelui
nombre
passantdes arguments on passe
2 paramètres.
delete o.m; // Supprimer la méthode.
un tableau.
 Les Fonctions

S’il y a plus de paramètres, il n’y a aucune façon

d’accéder directement à ces derniers
On peut utiliser l’objet arguments
Core JavaScript

Tableau contenant l’ensemble des paramètres transmises

Permet de définir des fonctions avec un nombre
quelconque de paramètres
function max(/* ... */) {
// On initialise à – l’infini :D
var max = Number.NEGATIVE_INFINITY;
// On boucle sur les arguments pour chercher le plus grand.
for (var i = 0; i < [Link]; i++)
if (arguments[i] > max) max = arguments[i];
return max;
}

//Appeler avec autant de paramètres que vous voulez

var largest = max(1, 10, 2, 20, 3, 30, 4, 400, 500, 6); // => 500
 Les Fonctions (callback function)

Une fonction de rappel callback function est une

fonction passée en paramètre d’une autre fonction.
Pour JavaScript, c’est le cas par exemple
Core JavaScript

de setTimeout(), setInterval() ou encore des fonctions

appelées par un gestionnaire d’événement (client
side).
Permettent la généricité de traitement.
 Les Fonctions (callback function)

Une fonction de rappel callback function est une

fonction passée en paramètre d’une autre fonction.
Pour JavaScript, c’est le cas par exemple
Core JavaScript

de setTimeout(), setInterval() ou encore des fonctions

appelées par un gestionnaire d’événement (client
side).
// Retourne une fonction qui calcule f(g)
// La fonction retournée g passe tous ces arguments à f, puis retourne la valeur
de retour de f. (c’est le principe de f°g).
Permettent la généricité de traitement.
// f et g sont appelées avec le même this.
function compose(f,g) {
return function() {
// Nous avons utilisé call pour f parce qu’on lui transmet une seule
valeur
// Nous avons utilisé apply pour g parce qu’on lui transmet un tableau
de paramètres
return [Link](this, [Link](this, arguments));
};
}
var square = function(x) { return x*x; };
var sum = function(x,y) { return x+y; };
var squareofsum = compose(square, sum);
squareofsum(2,3) // => 25
 Les Fonctions

function add(x,y) { return x + y; }

function subtract(x,y) { return x - y; }
function multiply(x,y) { return x * y; }
function divide(x,y) { return x / y; }
// Cette fonction prend le nom de l’opération,
Core JavaScript

vérifie que c’est une fonction de l’objet

// Voici une fonction qui prend en
operators et ensuite l’exécute
paramètre la fonction ainsi que les deux
opérandes.
function operate2(operation, operand1,
function operate(operator, operand1,
operand2) {
operand2) {
if (typeof operators[operation] ===
return operator(operand1,
"function")
operand2);
return operators[operation](operand1,
}
operand2);
// Que représente cet exemple
else throw "unknown operator";
var i = operate(add, operate(add, 2, 3),
}
operate(multiply, 4,
// Permet de retourner la chaine "hello world "
5));
// On regroupe tout ca dans un objet
var j = operate2("add", "hello",
var operators = {
operate2("add",
add: function(x,y) { return x+y; },
" ", "world"));
subtract: function(x,y) { return x-y;
},
// utilise pow:
multiply: function(x,y) { return x*y;
var k = operate2("pow", 10, 2);
},
divide: function(x,y) { return x/y; },
pow: [Link]
};
 Intégrer le Js avec votre page HTML

Afin d’intégrer votre code JS avec votre page HTML, deux méthodes peuvent être
appliquées :

L’intégrer directement à travers une balise <script></script> au sein de votre

page HTML et y mettre votre code JS.
Client Side

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
[Link]('Bonjour je suis un
script non portable je ne sert qu\'ici
:(');
</script>
</head>
<body>

</body>
</html>

Ca assassine le concept de portabilité du code.

Anti séparation des rôles. 49
 Intégrer le Js avec votre page HTML

insertion d’un fichier externe (usuellement ’.js’)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
Client Side

</head>
<body> [Link]('Bonjour je suis un script
<script src=‘[Link]’></script> libre liiiiiiiiibre vous avez besoin de
</body> moi il suffit de m’appeler :D');
</html>
[Link] [Link]

50
 Le DOM

Le Document Object Model (DOM) représente une API pour les documents
HTML et XML permettant leur manipulation.

En tant que recommandation du W3C, l’objectif du DOM est de fournir une

interface de programmation standard pour être utilisée par tous (applications, OS)
Client Side

Permet de construire une arborescence de la structure d’un document et de ses

éléments.

Modélisé sous forme d’arbre.

Chaque élément du DOM est représenté par un objet en JavaScript.

La tête de l’arbre est l’objet window qui représente la fenêtre du navigateur.

L’objet document est un sous-objet de window c’est son fils. Il représente la page
Web et permet de pointer ou d’accéder à la balise HTMl.

51
 Le DOM
html est le parent direct
title est l'unique enfant de head et de body, ses
de head deux enfants

<html>
Client Side

<head>
<title>Titre du document</title>
</head>
<body>
<h1>Titre</h1>
<p>Un peu de texte</p>
</body>
</html>
h1 est le premier
enfant de body

p est le deuxième, il est frère

de h1 52
 Le DOM

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
Client Side

<title>Le titre de la page</title>

</head>

<body>
<div>
<p>Un peu de texte
<a>et un lien</a>
</p>
</div>
</body>
</html>

53
 Les différents types des objets du DOM

Node : C’est le type le plus générique, tous les éléments du DOM sont des Nodes.

Element : Représente un élément HTML ou XML

HTMLElement : Dans le DOM HTML, un Element est un HTMLElement. Ca

représente les éléments HTML du documents , e.g : les balises.
Client Side

NodeAttribute : Les attributs des

balises

TextAttribute : Les attributs textuelles

Les nœuds commentaires

54
 Quelques fonctions de Window

alert() : affiche une alerte et bloque le script lors de son appel.

Client Side

prompt() : permet d’avoir un champ input permettant de récupérer une valeur

de l’utilisateur.

Confirm() : affiche un message contenant deux boutons afin de confirmer ou

non.

55
 Héritage dans le DOM
Tous les éléments du DOM sont des objets ce qui implique qu’ils contiennent
tous leurs propres méthodes et des attributs.
Ils existent des méthodes et attributs communs à l’ensemble des objets. Ceci est
dû au fait que l’ensemble des éléments sont tous du même type : les nœuds
(Node).
L’aspect d’héritage entre les différents types d’éléments permet d’avoir les
éléments en commun.
Client Side

Node

Element

HTMLElement

HTMLDivElement
56
 Manipulation des éléments
Pour accéder aux éléments HTML en utilisant le DOM, l’objet document offre
plusieurs méthodes :

getElementById() qui, comme son nom l’indique, permet d’accéder à un

élément par son id.
Client Side

getElementsByTagName() permet de récupérer sous forme d’un tableau

d’objets tous les éléments du tag passé en paramètre.

getElementsByName() permet de récupérer sous forme d’un tableau

d’objets tous les éléments dont l’attribut name est égale au nom passé en
paramètre.

querySelector() cette fonction prend en paramètre une chaine de caractère

représentant un sélecteur CSS. Elle retourne le premier élément qui y
correspond.

querySelectorAll() cette fonction prend en paramètre une chaine de

caractère représentant un sélecteur CSS. Elle retourne un tableau d’objets
contenant TOUS les éléments qui correspondent à ce sélecteur.
57
 Manipulation des éléments : Exemple
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Ma page de Test </title>
</head>
<body>
<div id="monMenu"> var getByid=
<div class="item"> [Link]('monMenu');
<span>menu 1</span> var getElementByTagName =
<span>menu 2</span> [Link]("div");
Client Side

</div> var getElementByName =

<div class="Pub"> [Link]("monNom");
<span>Pub 1</span> [Link]('ce que me donne
<span>Pub 2</span> getElementById : '+ [Link]);
</div> [Link]('Ce que donne le
</div> getElementByTagName : ');
<div id="content">
<span>Ici je vais mettre mon for(var
contenu</span> i=0;i<[Link];i++){
</div> [Link](getElementByTagName[i]);
Un formulaire bizar pour tester }
getElementsByName() :
<form name="monNom"> [Link]('Ce que donne le
<input type="password" name="monNom"> getElementByName : ');
<input> for(var
<button name="monNom"></button> i=0;i<[Link];i++){
</form> [Link](getElementByName[i]);
<script src="[Link]"></script> }
</body>
</html>
[Link] 58
[Link]
Client Side Manipulation des éléments : Exemple

Résultat dans la console 59

 Manipulation des éléments : Exemple
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Ma page de Test </title>
</head>
<body> var queryselector=
<div id="monMenu"> [Link]("head title");
<div class="item"> var queryselectorAll=
<span>menu 1</span> [Link]("#monMenu .item
<span>menu 2</span> span");
Client Side

</div>
<div class="Pub"> [Link]('ce que me donne querySelector
<span>Pub 1</span> : '+ [Link]);
<span>Pub 2</span> [Link]('Ce que donne le
</div> querySelectorAll : ');
</div> for(var
<div id="content"> i=0;i<[Link];i++){
<span>Ici je vais mettre mon
contenu</span> [Link](queryselectorAll[i].textConten
</div> t);
Un formulaire bizar pour tester }
getElementsByName() :
<form name="monNom"> [Link]
<input type="password" name="monNom">
<input>
<button name="monNom"></button>
</form>
<script src="[Link]"></script>
</body>
</html>
[Link] 60
Client Side Manipulation des éléments : Exemple

Résultat dans la console

61
 Manipulation des éléments

Pour accéder à la liste des classes CSS définies dans l'attribut class d'un élément
nous utilisons className qui retourne la liste des classes associées à l’élément
en question dans une chaine de caractère ou les classes sont séparées par des
Client Side

espaces.

La méthode classList quant à elle retourne un tableau contenant les classes

associées à un élément. Elle offre aussi les méthodes suivantes :

add() qui ajoute une classe au tableau.

remove() qui supprime une classe.

contains() qui vérifie si une classe existe ou non.

toggle() ajoute la classe si elle n’existe pas et l’enlève si elle existe

62
 Manipulation des éléments
Afin de lire, de créer ou de modifier un attribut d’un « Element » du DOM,
l’objet Element met votre disposition deux méthodes
getAttribute() qui comme son nom l’indique permet de récupérer la valeur
d’un attribut.
setAttribute() qui permet de la modifier

Exemple :
Client Side

<!doctype html> var

<html> leLien=[Link]("lelien");
<head> var dest=[Link]("href");
<meta charset="utf-8" /> [Link]("Voici l'url du lien avant la
<title>Ma page de Test </title> modification : "+dest);
</head> var nouveauCvLien=prompt();
<body> [Link]("href",nouveauCvLien)
vous allez trouvez mon Cv <a id="lelien" ;
href="[Link]">ici</a>. dest=[Link]("href");
<script src="[Link]"></script> [Link]("Voici l'url du lien après la
</body> modification : "+dest);
</html>
[Link] [Link]

63
Client Side Manipulation des éléments

64
Console
 Manipulation des éléments
La deuxième méthode mais qui n’est pas appliquée sur la totalité des
navigateurs est d’accéder directement en utilisant le nom de l’attribut
Dans notre exemple le getAttribut(«href») est remplacé [Link]. Le
setAttribut est lui remplacé par [Link]="[Link]"
Client Side

var lautreLien=[Link]("lautrelien");

alert([Link]);

[Link]="[Link]"

[Link]

65
 Manipulation le texte des balises
innerHTML : permet de récupérer du code html enfant d’une balise.

Elle permet aussi d’ajouter directement du contenu HTML

textContent (dans sa version standard et innerText qui n’est pas supporté par
tous les navigateurs) permet de faire le même travail que innerHTML sauf qu’elle
Client Side

supprime les balises HTML) var monDiv=[Link]("div");

var monDiv1=[Link]("div1");
<!doctype html> [Link]("Je suis innerHTML voila ce que
<html> j'affiche "+[Link]);
<head>
<meta charset="utf-8" /> [Link]("Je suis textContentt voila ce
<title>Ma page de Test </title> que j'affiche "+[Link]);
</head>
[Link]="I delete every thing in
<body> my road <b>i'm a monster 3:)</b> ";
<div id="div">
<p>Je suis dans la div d'id div</p> [Link]="I delete every thing in my
</div> road <b>i'm a monster too 3:)</b> ";
<div id="div1">
<p>Je suis dans la div d'id div1</p> [Link]("Je suis innerHTML voila ce que
</div> j'affiche apres modification
<script src="[Link]"></script> "+[Link]);
</body>
[Link]("Je suis textContent voila ce
</html> que j'affiche apres modification
"+[Link]);
[Link] [Link]
66
Client Side Manipulation le texte des balises

console

67
 Quelques méthodes utiles
Il existe quelques méthodes très utiles qui renseigne sur les éléments du DOM

nodeType permet de récupérer le type d’un nœud du DOM. Elle retourne un

numéro qui correspond au type du nœud. Les types les plus courants sont :
1 Element
2 attribut
3 texte
Client Side

8 commentaire

nodeName permet de récupérer le nom du nœud en MAJISCULE.

68
 Se déplacer dans le DOM

childNodes permet de retourner un tableau contenant l’ensemble des nœuds

fils.
Client Side

nextSibling permet d’accéder au nœud suivant donc au frère suivant d’un nœud

previousSibling permet d’accéder au nœud précédent donc au frère précédent

d’un nœud

nextElementSibling permet d’accéder à l’élément HTML suivant donc au frère

suivant d’un nœud

previousElementSibling permet d’accéder à l’élément HTML précédent donc au

frère précédent d’un nœud

69
 Se déplacer dans le DOM
<!doctype html> var nod=[Link]("para");
<html> [Link]("Bonjour je suis le noeud
<head> "+[Link]) ;
<meta charset="utf-8" /> [Link]("Pour visualiser la différence
<title>Ma page de Test </title> entre firstChild et firstElementChild ");
</head> [Link]("bonjour je suis le first child
<body> : "+[Link]);
[Link]("bonjour je suis le first
<p id="para">vous allez trouvez mon Cv <a Elementchild : "+[Link]);
Client Side

id="lelien" href="[Link]">ici</a>.
Veuillez le consulter et appeler moi au
<i>222222</i> pour plus de détails</p> [Link]
<div id="monMenu">

<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>

<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>

</div>
<script src="[Link]">
</script>
</body>
</html>
console
[Link] 70
 Se déplacer dans le DOM
Plusieurs propriétés sont offertes permettant le déplacement dans le DOM.

Ces propriétés permettent à partir d’un nœud d’accéder à son père, ou à ses
enfants.

parentNode permet à partir d’un élément d’accéder à son élément père.

Client Side

firstChild permet, comme son nom l’indique, à partir d’un élément, d’accéder au
premier enfant d’un noeud.

lastChild permet, comme son nom l’indique, à partir d’un élément, d’accéder au
dernier enfant d’un noeud.

firstElementChild permet, comme son nom l’indique, à partir d’un élément,

d’accéder au premier Element enfant d’un noeud.

lastElementChild permet, comme son nom l’indique, à partir d’un élément,

d’accéder au dernier Element enfant d’un noeud.

childNodes permet de retourner un tableau contenant l’ensemble des nœuds

fils. 71
 Se déplacer dans le DOM
<!doctype html> var nod=[Link]("para");
<html> [Link]("Bonjour je suis le noeud
<head> "+[Link]) ;
<meta charset="utf-8" /> [Link]("Je vous présente mes fils : ");
<title>Ma page de Test </title> var fils=[Link];
</head> for (var i=0;i<[Link];i++){
<body> [Link]("bonjour je suis le fils numéro
:"+ (i+1)+" je m'appelle"
<p id="para">vous allez trouvez mon Cv <a +fils[i].nodeName+" Et mon contenu text est :");
Client Side

id="lelien" href="[Link]">ici</a>. if(fils[i].nodeType==Node.ELEMENT_NODE){

Veuillez le consulter et appeler moi au [Link](fils[i].[Link]);
<i>222222</i> pour plus de détails</p> }else{
[Link](fils[i].data);
<div id="monMenu"> }
}
<div id="item"> [Link]
<span>menu 1</span>
<span>menu 2</span>
</div>

<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>

</div>
<script src="[Link]">
</script>
</body>
</html>
[Link] console 72
 Mise à jour du DOM : Ajout d’un élément
Afin d’ajouter un nœud dans le DOM il faut généralement suivre les étapes
suivantes :
Récupérer ou créer l’élément à ajouter. Pour le créer, on utilise la méthode de
l’objet document createElement() qui prend en paramètre une chaine
contenant le nom de l’élément à créer.

Décorer l’élément avec les attributs nécessaires en utilisant l’une des deux
Client Side

méthodes précédemment mentionnées.

En utilisant la méthode setAttribute(nomAttrib,val)
En accédant directement à la propriété de l’objet : [Link]=valeur

Insérer l’élément dans le DOM en utilisant la méthode appendChild() qui prend

en paramètre l’élément à insérer et elle ajoute cet élément comme dernier fils
de l’objet qui a appelé la méthode.

Pour les textNode on utilise la méthode createTextNode() qui prend en paramètre le

texte en question.
Il existe aussi la méthode qui permet d’insérer un nœud avant un autre c’est la
méthode insertBefore() qui prend en paramètres le nœud à insérer et le nœud fils
avant lequel on va insérer. Si ce nœud n’est pas spécifié le nouveau nœud sera
insérer en dernier.
 Mise à jour du DOM : exemple ajout
<!doctype html> var nod=[Link]("para");
<html> var newNode=[Link]("img");
<head> [Link]="asimg";
<meta charset="utf-8" /> [Link]="[Link]";
<title>Ma page de Test </title> [Link]="Je suis l'image de aymen";
</head> [Link]="50";
<body> [Link]="50";
[Link](newNode);
<p id="para">vous allez trouvez mon Cv <a
id="lelien" href="[Link]">ici</a>. [Link]
Veuillez le consulter et appeler moi au
Client Side

<i>222222</i> pour plus de détails</p>

<div id="monMenu">

<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>

<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>

</div>
<script src="[Link]">
</script>
</body>
</html>
[Link] 74
console
 Mise à jour du DOM : Cloner un élément

Afin de cloner un nœud dans le DOM il suffit d’appeler la méthode cloneNode().

Client Side

Cette méthode prend en paramètre un booléen.

True : Le nœud sera cloner avec ces fils et ses attributs

False : Le nœud sera cloner sans ces fils et ses attributs

 Mise à jour du DOM : exemple clone
var nod=[Link]("para");
<!doctype html> var newNode=[Link]("img");
<html> [Link]="asimg";
<head> [Link]="[Link]";
<meta charset="utf-8" /> [Link]="Je suis l'image de aymen";
<title>Ma page de Test </title> [Link]="50";
</head> [Link]="50";
<body> [Link](newNode);
var trueClonedNode = [Link](true);
<p id="para">vous allez trouvez mon Cv <a var falseClonedNode = [Link](false);
id="lelien" href="[Link]">ici</a>. [Link](trueClonedNode);
Veuillez le consulter et appeler moi au
Client Side

[Link](falseClonedNode);
<i>222222</i> pour plus de détails</p>
[Link]
<div id="monMenu">

<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>

<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>

</div>
<script src="[Link]">
</script>
</body>
</html>
[Link] 76
 Mise à jour du DOM : exemple clone
var nod=[Link]("para");
<!doctype html> var newNode=[Link]("img");
<html> [Link]="asimg";
<head> [Link]="[Link]";
<meta charset="utf-8" /> [Link]="Je suis l'image de aymen";
<title>Ma page de Test </title> [Link]="50";
</head> [Link]="50";
<body> [Link](newNode);
var trueClonedNode = [Link](true);
<p id="para">vous allez trouvez mon Cv <a var falseClonedNode = [Link](false);
id="lelien" href="[Link]">ici</a>. [Link](trueClonedNode);
Veuillez le consulter et appeler moi au
Client Side

[Link](falseClonedNode);
<i>222222</i> pour plus de détails</p>
[Link]
<div id="monMenu">

<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>

<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>

</div>
<script src="[Link]">
</script>
</body>
</html>
[Link] 77
console
 Mise à jour du DOM : Supprimer un élément

Afin de supprimer un nœud dans le DOM il suffit d’appeler la méthode

Client Side

removeChild() à partir du nœud pére.

Cette méthode prend en paramètre le nœud à supprimer.

La valeur de retour est une référence sur le nœud supprimé.

Comment faire pour supprimer le premier span d’un menu d’un div d’id item ?
 Mise à jour du DOM : exemple remove
<!doctype html> var nod=[Link]("item");
<html> [Link]([Link]);
<head>
<meta charset="utf-8" /> [Link]
<title>Ma page de Test
</title>
</head>
<body>

<p id="para">vous allez trouvez mon Cv

<a id="lelien"
Client Side

href="[Link]">ici</a>. Veuillez le
consulter et appeler moi au
<i>222222</i> pour plus de détails</p>

<div id="monMenu">

<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>

<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>

</div>
<script src="[Link]"> console
</script>
</body>
</html> [Link] 79
 Mise à jour du DOM : remplacer un élément
Afin de remplacer un nœud dans le DOM par un autre il suffit d’appeler la méthode
replaceChild() partir du nœud pére.

Cette méthode prend en paramètre le nouveau nœud suivi de l’ancien nœud.

Comment faire pour remplacer le second span par la div pub?
<!doctype html>
<html>
Client Side

<head>
<meta charset="utf-8" />
<title>Ma page de Test </title>
</head>
<body>
<p id="para">vous allez trouvez mon Cv <a id="lelien" href="[Link]">ici</a>. Veuillez le consulter
et appeler moi au <i>222222</i> pour plus de détails</p>
<div id="monMenu">
<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
<script src="[Link]">
</script>
</body>
</html>
 Mise à jour du DOM : exemple replace
<!doctype html> var nod=[Link]("item");
<html> var
<head> newnod=[Link]("Pub")[0].cloneN
<meta charset="utf-8" /> ode(true);
<title>Ma page de Test [Link](newnod,[Link]);
</title>
</head> [Link]
<body>

<p id="para">vous allez trouvez mon Cv

<a id="lelien"
Client Side

href="[Link]">ici</a>. Veuillez le
consulter et appeler moi au
<i>222222</i> pour plus de détails</p>

<div id="monMenu">

<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>

<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>

</div>
<script src="[Link]">
</script>
</body> console
</html> [Link] 81
 Manipulation du CSS
JavaScript permet aussi de manipuler et de gérer l’apparence des éléments HTML.

Pour ce faire, il offre une panoplie d’outils permettant de modifier le CSS.

La base de la manipulation des CSS par JavaScript est l’aspect CASCADE qui indique
Client Side

que les règles de styles qui sont appliquées à un élément du document HTML
peuvent venir d’une cascade de différentes sources dont la plus prioritaire est
l’attribut style d’un élément HTML individuel.

Style étant la propriété la plus prioritaire, c’est elle qui sera la plus utilisée.
 Manipulation du CSS : La propriété style
Pour accéder à la propriété style :
[Link]
Pour ajouter ou modifier une des propriétés de style
[Link]été
var nod=[Link]("item");
…Exemple : [Link]="blue";
<div id="monMenu">
<div id="item"> [Link]
Client Side

<span>
menu 1
</span>
<span>
menu 2
</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
<script src="[Link]">
</script>
</body>
</html>
[Link]
Pour afficher une propriété ?
 Manipulation du CSS : getComputedStyle

Pour accéder à une des propriétés des feuilles de styles il faut utiliser la méthode
getComputedStyle()
Client Side

Cette méthode récupère les style CSS associés à un Element HTML qu’elle soient
dans l’attribut style, dans un bloc style ou dans une feuille de style.

La valeur de retour est un objet contenant l’ensemble des styles, donc pour accéder
à un style en particulier il faut utiliser le nom de cette propriété.
 Manipulation du CSS : getComputedStyle
<!doctype html> var nod=[Link]("item");
<html> [Link]("je suis l'objet "+ [Link] + "voila
<head>
mes attributs : ");
<meta charset="utf-8" />
<title>Ma page de Test </title> var mesStyles=getComputedStyle(nod);
<link href="css/[Link]" [Link]("ma taille est : "+[Link]+" et "+
rel="stylesheet" type="text/css"> [Link]);
</head> [Link]("La couleur de mon arrière plan est :
<body>
"+[Link]+" et la couleur de
<p id="para">vous allez trouvez mon Cv
<a id="lelien" l'écriture est "+ [Link]);
href="[Link]">ici</a>. Veuillez le for(myStyle in mesStyles){
consulter et appeler moi au [Link](myStyle);
Client Side

<i>222222</i> pour plus de détails</p> [Link](mesStyles[myStyle]);

<div id="monMenu">
<div id="item">
}
<span>menu 1</span> [Link]
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
<input id="input" type="text" size="50" #item{
value="Cliquez ici !" background-color: yellow;
onfocus="[Link]='Appuyez maintenant color: red;
sur votre touche de tabulation.';" width: 200px;
onblur="[Link]='Cliquez ici !';"/>
height: 200px;
<br /><br/>
<a href="#" }
onfocus="[Link]('input'
).value = 'Vous avez maintenant le focus
[Link]
sur le lien, bravo !';">Un lien
bidon</a>
<script src="[Link]"></script>
</body> 85
</html> [Link]
Client Side Manipulation du CSS : getComputedStyle
 Gestion des événements
Un événement dans notre contexte est un changement d’état d’un des éléments du
DOM :
Lorsqu’on click sur un élément, qu’on le survole ou qu’on écrit quelque chose
dedans
Lorsqu’on on submit un formulaire
…
Client Side

L’utilisation des événements consiste à déclencher un traitement particulier lors de

la détection d’un événement.

Le navigateur intercepte les événements (interruptions) et agit en conséquence

Une fois l’événement crée, il se propage dans le DOM (l’arbre) en se dirigeant de la

racine vers le nœud cible puis en effectuant le sens inverse. Les trois étape par
lequel passe l’événement sont :
Phase de capture
Phase de ciblage (l’événement atteint la cible)
Phase de bouillonnement (bubbling)

87
 Gestion des événements
Lors de l’activation du lien, un <html>
<body>
événement click va être crée. <p>
<a href="[Link]
L’événement entame sa L’ Evenement
</a> de l’année
propagation (phase de capture)
</p>
du document vers le nœud qui </body>
précède la cible qui est ici le </html>
Client Side

nœud a.
Document
L’événement atteint sa cible (le
nœud a) <html>

L’événement entame sa 1 Capture 3 Bouillonnement

propagation vers le document <body>

(phase de bouillonnement)
<p>

2 Cible <a> <p>

L’Evenement De l’année 88
 Gestion des événements
Liste non exhaustive des événements les plus utilisées :
click : un clic du bouton gauche de la souris sur une cible
dblclick : undouble clic du bouton gauche de la souris sur une cible
mouseover : passage du pointeur de la souris sur une cible
mouseout : sortie du pointeur de la souris d’une cible
Client Side

focus : une activation d’une cible

blur : une perte de focus d’une cible
select : sélection d’une cible
change : une modification du contenue d’une cible
Input : Saisir du texte dans un champ texte
submit : une soumission d’un formulaire
reset : réinitialiser les éléments du formulaire
load : à la fin du chargement d’un élément
[Link] 89
 Gestion des évènements : Utilisation
L’interception des événement et l’actionnement d’une action suite à
cette interception se fait de deux manière :
Associer à un élément html un attribut onevent et y affecter le code
JavaScript à exécuter.
Exemple onclick, onblur, onchange.
<span onclick ="alert(‘Salut, tu as clické sur ce span et moi j ai intercépté ton
Client Side

click :D');">Cliquez-moi !</span>

En utilisant le DOM
En utilisant l’ancienne méthode (DOM-0), ceci est fait en affectant à l’attribut
onevent de l’élément à traiter la fonction à exécuter.

En utilisant le DOM-2 et la méthode addEventListner()

90
 Gestion des évènements : DOM-0
… var nod=[Link]("item");
<div id="monMenu"> [Link]=function (){
[Link]('Bonjour je suis l\'objet'+ [Link]+'et mon
contenu est : '+[Link]);
<div id="item"> };
<span>menu 1</span> [Link]=function(){
<span>menu 2</span> [Link]('Tu viens d\'accéder à l\'élément '+[Link]);
</div> }
[Link]=function(){
[Link]('Tu viens de sortir de l\'élément '+ [Link]+
<div class="Pub"> ' 1ere version');
<span>Pub 1</span> }
Client Side

<span>Pub 2</span> [Link]=function(){

</div> [Link]('Tu viens de sortir de l\'élément '+ [Link] +
' 2eme version');
}
</div> [Link]
<script src="[Link]">
</script>
</body>
</html> [Link]

Inconvénients :
Ancienne version.
Impossibilité de créer plusieurs
fois le même événement, si vous le
créer plusieurs fois il n’executera
que le dernier.

console 91
 Gestion des évènements : DOM-2
La détection des événement sera réalisée à travers la méthode
addEventListner()

Cette méthode prend 2 paramètres obligatoires et un optionnel.

Nom de l’événément (click, blur, …)

Client Side

La fonction qui s’executera

Un booléen (False par défaut) qui permet de spécifier quelle phase utiliser
False : Phase de bouillonnement y inclut la cible
True : Phase de capture

Dans le cas d’une Phase de bouillonnement l’élément le plus profond est le

premier à s’exécuter. C’est la phase la plus utilisé.

Dans le cas d’une Phase de capture l’élément le plus profond est le dernier à
s’exécuter.
92
 Gestion des évènements : L’objet Event
L’objet Event permet de récupérer des information sur l’événement
déclenché
N’est récupérable que dans une fonction associé à un événement
[Link](‘click’,f(e){alert( e );})
Tester ce code et vérifier le contenu de l’objet event dans la console
Client Side

var nod=[Link]("item");

[Link]('click',function (e) {
[Link](e);
[Link]('Bonjour je suis l\'objet'+
[Link]+'et mon contenu est : '+[Link]);
});
L’une des méthodes la plus utilisée est preventDefault()qui permet
d’annuler l’événement par exemple bloquer l’envoi d’un formulaire
Maintenant et selon votre besoin utiliser et étudier ces propriétés.

93
 Les formulaires

L’utilisation de JavaScript pour les formulaires est généralement

consacré à deux aspects
Modification des propriétés des éléments du formulaire
Client Side

Vérification et validation des champs côté client (mais ce n’est jamais

suffisant)
Les attributs communs à tous les éléments du formulaire sont :
form
Name
type

94
 Références

M. Haverbeke, Eloquent JavaScript: A modern

introduction to programming, 2014
D. Flanagan, JavaScript: The Definitive Guide, 6th
edition, O’reilly, 2011

95