SUPPORT DE COURS

UE : DEVELOPPEMENT
WEB DYNAMIQUE II

LPRGL 3

Equipe Pédagogique

INFORMATIQUE
Propriété exclusive de PIGIER CI. Toute reproduction même partielle de ce document est strictement interdite.

Formation – Placement - Consultance

Tél : (225) 27 20 30 35 00 / Fax : (225) 27 20 22 67 64 SARL au capital de 300.000.000 FCFA
E-mail : pigierci@aviso.ci / pigierci@pigierci.com RCCM N° CI-ABJ-1977-B-26872
01 BP 1585 Abidjan République de Côte d'Ivoire CC : 7702508 P / Centre des Impôts : DGE
23, Boulevard de la République -Plateau Régime d’Imposition : Réel Normal
APPRENDRE
FACILEMENT JavaScript
 Apprendre Facilement JavaScript

Sommaire
CHAPITRE I : LES BASES DU LANGAGE .............................................................................................. 7
INTRODUCTION ..................................................................................................................................... 7
I- SYNTAXE DU LANGAGE ............................................................................................................ 7
1- La structure du code JavaScript ................................................................................................ 7
2- Les instructions et séparateurs .................................................................................................. 8
3- Les commentaires ........................................................................................................................ 8
4- Les blocs d'instructions .............................................................................................................. 8
5- Les entrées /sorties....................................................................................................................... 8
II- LES VARIABLES ......................................................................................................................... 9
1- Les variables ................................................................................................................................. 9
2- La déclaration d'une variable .................................................................................................... 9
3- Les types de données .................................................................................................................. 9
4- La portée des variables ............................................................................................................... 9
III- APPLICATION ............................................................................................................................ 9
CHAPITRE II : LES OPERATEURS ET EXPRESSIONS ........................................................................ 10
INTRODUCTION ................................................................................................................................... 10
I- LES OPERATEURS ARITHMETIQUES................................................................................... 10
II- LES OPERATEURS DE COMPARAISON ........................................................................... 10
III- LES OPERATEURS D'ASSIGNATION................................................................................ 11
IV- LES OPERATEURS LOGIQUES ............................................................................................ 11
V- APPLICATION ...................................................................................................................... 11
CHAPITRE III : LES STRUCTURES DE CONTROLE........................................................................... 12
I. LA STRUCTURE CONDITIONNELLE SIMPLE ................................................................ 12
II. LA STRUCTURE ALTERNATIVE ..................................................................................... 12
III. LA STRUCTURE DE CHOIX .............................................................................................. 12
CHAPITRE IV : LES STRUCTURES ITERATIVES ................................................................................ 13
I. LA STRUCTURE while ............................................................................................................ 13
II. LA STRUCTURE do…while ............................................................................................... 13
III. LA BOUCLE for ..................................................................................................................... 13
CHAPITRE V : LES FONCTIONS ............................................................................................................ 14
I- DEFINITION.................................................................................................................................. 14
II- DECLARATION D'UNE FONCTION .................................................................................. 14
III- L'APPEL D'UNE FONCTION ................................................................................................. 14
IV- LES ARGUMENTS DE FONCTION ..................................................................................... 15

2
 Apprendre Facilement JavaScript

1- Fonctions sans argument .......................................................................................................... 15

2- Fonctions avec arguments ........................................................................................................ 15
V- APPLICATION .......................................................................................................................... 15
CHAPITRE VI : LES TABLEAUX ............................................................................................................ 16
INTRODUCTION ................................................................................................................................... 16
I- LES TABLEAUX A UNE DIMENSION .................................................................................... 16
1- Déclaration d'un tableau .......................................................................................................... 16
2- Indexation d'un tableau............................................................................................................ 16
II- TABLEAU A DEUX DIMENSIONS ...................................................................................... 16
III- PROPRIETE ET METHODES D'UN TABLEAU ................................................................ 16
1- La propriété length .................................................................................................................... 16
2- Les méthodes du tableau .......................................................................................................... 17
IV- APPLICATION .......................................................................................................................... 18
CHAPITRE VII : LES EVENEMENTS ..................................................................................................... 19
INTRODUCTION ................................................................................................................................... 19
I- LES GESTIONNAIRES D'EVENEMENTS .............................................................................. 19
II- LES OBJETS LIES AUX EVENEMENTS .............................................................................. 20
III- APPLICATION .......................................................................................................................... 20
CHAPITRE VIII : LES OBJETS PREDEFINIS EN JAVASCRIPT ......................................................... 21
INTRODUCTION ................................................................................................................................... 21
I- HIERARCHIE DES OBJETS DU NAVIGATEUR .................................................................. 21
II- L'OBJET window ....................................................................................................................... 22
1. Les propriétés de l'objet window ........................................................................................... 22
2. Les méthodes de l'objet window ............................................................................................ 22
III- L'OBJET navigator ..................................................................................................................... 23
1. Les propriétés de l'objet navigator ......................................................................................... 23
2. Les méthodes de l'objet navigator .......................................................................................... 24
IV- L'OBJET document .................................................................................................................... 24
1. Les propriétés de l'objet document ........................................................................................ 24
2. Les méthodes de l'objet document ......................................................................................... 25
V- APPLICATION .......................................................................................................................... 25

3
 Apprendre Facilement JavaScript

................................................................................. 25
VI- L'OBJET Array............................................................................................................................ 25
1. Les constructeurs ....................................................................................................................... 25
2. Les propriétés ............................................................................................................................. 25
3. Les méthodes .............................................................................................................................. 26
4. Exemple ....................................................................................................................................... 26
VII- L'OBJET Boolean ....................................................................................................................... 26
1. Le constructeur ........................................................................................................................... 26
2. Les propriétés ............................................................................................................................. 26
3. Les méthodes .............................................................................................................................. 26
VIII- L'OBJET Date ......................................................................................................................... 26
1. Les constructeurs ....................................................................................................................... 26
2. Les propriétés ............................................................................................................................. 26
3. Les méthodes .............................................................................................................................. 26
4. Exemple ....................................................................................................................................... 26
IX- L'OBJET function ...................................................................................................................... 26
1. Le constructeur ........................................................................................................................... 26
2. Les propriétés ............................................................................................................................. 26
3. La méthode.................................................................................................................................. 26
4. Exemple ....................................................................................................................................... 26
X- L'OBJET Math ............................................................................................................................ 27
1. Les propriétés ............................................................................................................................. 27
2. Les méthodes .............................................................................................................................. 27
3. Exemple ....................................................................................................................................... 27
XI- L'OBJET Number ....................................................................................................................... 27
1. Le constructeur ........................................................................................................................... 27
2. Les propriétés ............................................................................................................................. 27
3. Les méthodes .............................................................................................................................. 27

4
 Apprendre Facilement JavaScript

4. Exemple ....................................................................................................................................... 27
XII- L'OBJET String........................................................................................................................... 27
1. Les propriétés ............................................................................................................................. 27
2. Les méthodes .............................................................................................................................. 27
3. Exemple (Voir cours)................................................................................................................. 27
CHAPITRE IX : LE DOM .......................................................................................................................... 28
INTRODUCTION ................................................................................................................................... 28
I- REPRESENTATION DU DOM D'UN DOCUMENT XHTML ............................................ 28
1. Présentation d'une structure de page HTML ....................................................................... 28
2. Représentation schématique du DOM issu de la structure HTML ................................. 28
3. Description de la représentation schématique du DOM ................................................... 29
II- ACCES DIRECT AUX NŒUDS ............................................................................................. 29
1. La méthode getElementById( ) ............................................................................................... 29
2. La méthode getElementsByName( ) ....................................................................................... 29
3. La méthode getElementsByTagName( ) ................................................................................ 29
III- ACCES AUX ELEMENTS A PARTIR D'UN NŒUD ......................................................... 29
1. childNodes .................................................................................................................................. 29
2. parentNode ................................................................................................................................. 29
3. firstChild ..................................................................................................................................... 30
4. lastChild ...................................................................................................................................... 30
5. nextSibling.................................................................................................................................. 30
6. previousSibling ......................................................................................................................... 30
7. innerHTML ................................................................................................................................. 30
IV- MANIPULATION DES NŒUDS ........................................................................................... 30
1. createElement ............................................................................................................................. 30
2. createTextNode .......................................................................................................................... 30
3. replaceChild ............................................................................................................................... 30
4. removeChild ............................................................................................................................... 30
5. appendChild ............................................................................................................................... 31
6. insertBefore................................................................................................................................. 31
7. hasChildNodes........................................................................................................................... 31
V- MANIPULATION DES ATTRIBUTS ................................................................................... 31
1. attributes ..................................................................................................................................... 31
2. hasAttributes() ........................................................................................................................... 31
3. getAttribute() .............................................................................................................................. 31

5
 Apprendre Facilement JavaScript

4. getAttributeNode() .................................................................................................................... 31
5. removeAttribute() ...................................................................................................................... 31
6. removeAttributeNode() ............................................................................................................ 32
7. setAttribute() .............................................................................................................................. 32
8. createAttribute() ......................................................................................................................... 32
VI- INFORMATION SUR LA NATURE DES NŒUDS ........................................................... 32
1. nodeName ................................................................................................................................... 32
2. nodeType..................................................................................................................................... 32
3. nodeValue ................................................................................................................................... 32
VII- APPLICATION .......................................................................................................................... 32
CHAPITRE X : JAVASCRIPT ET LES FORMULAIRES ........................................................................ 33
INTRODUCTION ................................................................................................................................... 33
II- DECLARATION D'UN FORMULAIRE ............................................................................... 33
III- LES ELEMENTS DE FORMULAIRE ..................................................................................... 33
1. La zone de texte .......................................................................................................................... 33
3. Les boutons case à cocher (checkbox) .................................................................................... 33
1. Les listes ...................................................................................................................................... 34
2. La zone de texte multi-lignes .................................................................................................. 34
II- APPLICATION .......................................................................................................................... 34
CHAPITRE VI : LES CLASSES ET OBJETS ............................................................................................ 35
INTRODUCTION ................................................................................................................................... 35
I- DEFINITION DE QUELQUES TERMES.................................................................................. 35
II- CREATION DE CLASSE ET D'OBJETS EN JAVASCRIPT ............................................ 36
1- Définition de la classe .............................................................................................................. 36
2- Création d'un objet .................................................................................................................... 37
3- L'unicité des propriétés ............................................................................................................ 37
III- APPLICATION .......................................................................................................................... 37

6
 Apprendre Facilement JavaScript

CHAPITRE I : LES BASES DU LANGAGE

OP : Etre capable de présenter le fonctionnement du langage JavaScript

INTRODUCTION

JavaScript est un langage de programmation orienté objet interprété par le navigateur

web et exécuté du côté client. Il a pour but de rendre dynamique les pages web (faire des
validations de données dans un formulaire, afficher des calculs locaux, identifier le
navigateur etc.) sans passer par un serveur web. JavaScript est sensible à la casse. On
note que le langage Java est différent du langage JavaScript.

I- SYNTAXE DU LANGAGE

1- La structure du code JavaScript

Le script peut être écrit dans la section <head>, dans la section <body> ou bien dans un
fichier externe. On note que le script est toujours identifié par les balises
<script type="text/javascript"> .... </script>
 Structure du script dans la section <head>:

 Structure du script dans la section <body>:

 Appel d'un script à partir d'un fichier JScript dans une page html.

7
 Apprendre Facilement JavaScript

2- Les instructions et séparateurs

Les instructions ne sont pas limitées par la fin de ligne (sauf le commentaire simple) et
ont pour unique séparateur le point-virgule. Cependant quand une instruction est
considérée comme complète et que l'interpréteur rencontre un espace, une fin de ligne,
une tabulation, il insère virtuellement un point-virgule. Il vaut mieux toutefois ne pas
compter là-dessus pour ne pas rendre le code illisible.
La virgule est un séparateur interne aux instructions, par exemple dans l'en-tête d'une
fonction elle sépare les arguments. Les parenthèses () regroupent des listes ou isolent une
expression. Les crochets [ ] servent à définir un indice dans un tableau.

3- Les commentaires
Un commentaire simple débute par une double barre inclinée // et se poursuit jusqu'en
fin de ligne.
Un commentaire de plusieurs lignes commence par le couple de symboles /* et se
termine par */ sans que les fins de lignes n'aient de rôle à jouer autre que la mise en
forme.

4- Les blocs d'instructions

Un bloc d'instructions est un ensemble d'instructions isolé par les opérateurs "{" pour le
début du bloc et "}" pour la fin. Cet ensemble est généralement associé à une instruction
conditionnelle ou une instruction de boucle.

5- Les entrées /sorties

Les saisies de données (entrées) s'effectuent à l'aide de formulaire ou de boîtes de
dialogue.
L'affichage de résultats (sorties) s'effectue à l'aide des boîtes de dialogue (méthodes de
l'objet window) ou dans un document (méthode de l'objet document)

a- Les boîtes de dialogue

L'affichage d'une boîte de dialogue en JavaScript s'effectue à l'aide des méthodes de
l'objet window que sont: alert, prompt et confirm.
 alert()
Cette méthode retourne du texte dans une boîte de dialogue, elle prend en paramètre une
chaîne de caractères. La syntaxe est la suivante: alert("la chaîne de caractères")
 prompt()
Cette méthode retourne la chaîne de caractères saisie dans la zone de texte de la boîte
lorsque l'utilisateur clique sur le bouton "Ok" sinon et elle retourne une valeur nulle
lorsqu'il clique sur le bouton "Annuler". La syntaxe est la suivante: prompt("chaîne de
caractères").

 confirm()
Cette méthode affiche la chaîne de caractères définie en paramètre dans une boîte de
dialogue, ainsi que deux boutons. Lorsque l'utilisateur clique sur OK, la méthode
retourne la valeur booléenne true sinon false. La syntaxe est la suivante: confirm("la
chaîne de caractères").
Exemples: (Voir cours)

8
 Apprendre Facilement JavaScript

II- LES VARIABLES

1- Les variables
Les variables contiennent des données qui peuvent être modifiées lors de l'exécution d'un
programme. On y fait référence par le nom de cette variable. En JavaScript, les variables
sont dynamiques car elles peuvent être réaffectées à des valeurs de types différents.
Un nom de variable doit commencer par une lettre alphabétique ou le signe_ et se
composer de lettres, de chiffres et des caractères _ et $ (à l'exclusion du blanc). Le nombre
de caractères n'est pas précisé. Pour rappel JavaScript est sensible à la casse. Attention
donc aux majuscules et minuscules.

2- La déclaration d'une variable

Les variables peuvent se déclarer de deux façons :
 soit de façon explicite en utilisant le mot clé var.
Exemple:
var Numero = 1
var Prenom = "Luc"
 soit de façon implicite en écrivant directement le nom de la variable suivi de la
valeur que l'on lui attribue.
Exemple:
Numero = 1
Prenom = "Luc"

3- Les types de données

JavaScript utilise quatre types de données que sont:
 Les nombres: Tout nombre entier ou avec virgule tel que 22 ou 3.1416
 Les chaînes de caractères: Toute suite de caractères comprise entre guillemets telle
que "suite de caractères"
 Les booléens: Les mots true pour vrai et false pour faux
 Le mot Null: Mot spécial qui ne représente pas de valeur

4- La portée des variables

Les variables déclarées tout au début du script, en dehors et avant toutes fonctions,
seront toujours globales, qu'elles soient déclarées avec var ou de façon implicite. On
pourra donc les exploiter partout dans le script.
Dans une fonction, une variable déclarée par le mot clé var aura une portée limitée à cette
seule fonction. On ne pourra donc pas l'exploiter ailleurs dans le script. D'où son nom de
locale. Par contre, toujours dans une fonction, si la variable est déclarée de manière
implicite (sans utiliser le mot var), sa portée sera globale.

III- APPLICATION

Enoncé

Ecrire un programme en JavaScript qui permettra à partir de deux variables (une de type
texte et l'autre de type nombre) d'afficher à l'écran, mon chiffre préféré est le 7.

9
 Apprendre Facilement JavaScript

CHAPITRE II : LES OPERATEURS ET EXPRESSIONS

OP : Etre capable d'utiliser les opérateurs en JavaScript

INTRODUCTION
Les opérateurs JavaScript sont des symboles qui permettent de manipuler et d'évaluer les
variables. Nous en distinguons plusieurs à savoir: les opérateurs arithmétiques, les
opérateurs de comparaison, les opérateurs d'assignation et les opérateurs logiques.

I- LES OPERATEURS ARITHMETIQUES

Dans les exemples, la valeur initiale de x sera toujours égale à 11

Signes Noms Significations Exemples Résultats

+ plus addition x+3 14
- moins soustraction x–3 8
* multiplié par multiplication x*2 22
/ divisé par division x /2 5.5
% modulo reste de la x%5 1
division par
= à la valeur Affectation x=5 5
++ incrémentation Plus 1 y=++x y=12, x=12
y=x++ y=11, x=12
-- décrémentation Moins 1 y=--x y=10, x=10
y=x-- y=11, x=10

II- LES OPERATEURS DE COMPARAISON

Les opérateurs de comparaison servent à comparé des variables et des valeurs. Dans les
exemples, la valeur initiale de x sera toujours égale à 11.

Signes Noms Exemples Résultats

== égal x==11 true
< inférieur x<11 false
<= inférieur ou égal x<=11 true
> supérieur x> 11 false
>= supérieur ou égal x>=11 true
!= différent x!=11 false

10
 Apprendre Facilement JavaScript

III- LES OPERATEURS D'ASSIGNATION

Ce sont les opérateurs qui réalisent des calculs dans lesquels une variable intervient des
deux côtés du signe =. Dans les exemples suivants x vaut toujours 11 et y aura comme
valeur 5.

Signes Exemples Significations Résultats

+= x += y x=x+y 16
-= x -= y x=x-y 6
*= x *= y x=x*y 55
/= x /= y x=x/y 2.2
^= x ^=y x=x^y 161051
%= x%=y x=x%y 1

IV- LES OPERATEURS LOGIQUES

Aussi appelés opérateurs booléens, ses opérateurs servent à vérifier deux ou plusieurs
conditions.

Signes Noms Exemples Significations

&& et (condition1) && (condition2) condition1 et condition2
|| ou (condition1) || (condition2) condition1 ou condition2
! non !(condition) Contraire de condition

V- APPLICATION

Enoncé
<body>
<script language="javascript">
i=2;
j=2;
var k=++i;
var l=j++;
document.write("i= "+i+"<br/>");
document.write("j= "+j+"<br/>");
document.write("k= "+k+"<br/>");
document.write("l= "+l+"<br/>");
</script>
</body>
Quel est le résultat généré par ce programme?

11
 Apprendre Facilement JavaScript

CHAPITRE III : LES STRUCTURES DE CONTROLE

OP : Etre capable d'utiliser les structures de conditionnelles en JavaScript.

I. LA STRUCTURE CONDITIONNELLE SIMPLE

Elle permet d'exécuter un bloc d'instructions lorsqu'une condition est vérifiée.

1- Syntaxe
if (<condition>) {
<bloc d'instructions>;
}
2- Exemple
(Voir cours)
II. LA STRUCTURE ALTERNATIVE
Elle permet d'exécuter une action lorsqu'une condition est vérifiée et d'exécuter une autre
lorsqu'elle ne l'est pas.

1- Syntaxe
if (<condition>) { var=(condition)?expr_vrai : expr_faux;
<bloc d'instructions>;
} ou
else{
<bloc d'instructions>;
}
2- Exemple
(voir cours)

III. LA STRUCTURE DE CHOIX

Elle exécute un bloc d'instructions en fonction de la condition posée; Les cas sont
comparés successivement, L'instruction break marque la fin du code pour le cas, donc si
break est omis, le bloc d'instructions du cas suivant est exécuté à son tour.
1. Syntaxe
Switch (variable){
Case 'valeur1':
<bloc d'instructions si variable=valeur1>;
break;
Case 'valeur2':
<bloc d'instructions si variable=valeur2>;
break;
…
Default:
<bloc d'instructions si toutes les conditions précitées ne sont pas vérifiées>;
Break;
}
2. Exemple
(Voir cours)
12
 Apprendre Facilement JavaScript

CHAPITRE IV : LES STRUCTURES ITERATIVES

OP : Etre capable d'utiliser les structures répétitives en JavaScript.

Il est très utile de disposer d'une instruction permettant d'effectuer de manière répétitive
une série d'opérations. JavaScript propose plusieurs types de boucles itératives.

I. LA STRUCTURE while

Elle exécute un bloc d'instructions aussi longtemps que la condition est vérifiée. Si la
condition est fausse au début, aucune instruction n’est exécutée.

1- Syntaxe
while ( <condition> ) {
<bloc d'instructions>;
}

2- Exemple
(voir cours)

II. LA STRUCTURE do…while

Elle exécute un bloc d'instructions aussi longtemps que la condition est vérifiée. Si la
condition est fausse au début, elle exécute une fois le bloc d'instructions.

1. Syntaxe
do {
<bloc d'instructions>;
} while ( <condition> )

2. Exemple
(Voir cours)

III. LA BOUCLE for

La boucle for, après initialisation de la variable au départ, vérifie la condition puis

exécute un bloc d'instructions et incrémente la variable autant de fois que la condition est
vérifiée. La boucle ne prend fin que lorsque la condition de continuation devient fausse.

a- Syntaxe

for ( <initialisation de la variable> ; <condition de continuation> ; <incrémentation> )

{
<bloc d'instructions>
}

b- Exemple
(Voir cours)

13
 Apprendre Facilement JavaScript

CHAPITRE V : LES FONCTIONS

OP : Etre capable d'utiliser les fonctions en JavaScript.

I- DEFINITION

Une fonction est un groupe de ligne(s) de code de programmation destiné à exécuter une
tâche bien spécifique et que l'on pourra, si besoin est, utiliser à plusieurs reprises. De
plus, l'usage des fonctions améliorera grandement la lisibilité de votre script.

En JavaScript, il existe deux types de fonctions :

 les fonctions propres à JavaScript. On les appelle des "méthodes". Elles sont
associées à un objet bien particulier. Comme exemple, nous avons la méthode
Alert() issue de l'objet window.

 les fonctions écrites par vous-même pour les besoins de votre script (c'est à celles-
là que nous nous intéressons maintenant).

II- DECLARATION D'UNE FONCTION

Pour déclarer ou définir une fonction, on utilise le mot (réservé) function. La syntaxe
d'une déclaration de fonction est la suivante :

function nom_de_la_fonction(arguments) {
... code des instructions ...
}

Remarque:

 Le nom de la fonction suit les mêmes règles que celles qui régissent le nom de
variables (nombre de caractères indéfini, commencer par une lettre, possibilité
d'inclure des chiffres...). Pour rappel, JavaScript est sensible à la casse. Ainsi test()
ne sera pas égal à Test(). En outre, Tous les noms des fonctions dans un script
doivent être uniques.

 Lorsqu'une accolade est ouverte, elle doit impérativement, sous peine de message
d'erreur, être refermée. Prenez la bonne habitude de fermer directement vos
accolades et d'écrire votre code entre elles.

III- L'APPEL D'UNE FONCTION

Le fait de définir une fonction n'entraîne pas l'exécution des commandes qui la
composent. Ce n'est que lors de l'appel de la fonction que le code de programme est
exécuté. Cet appel se fait par le nom de la fonction suivi des parenthèses.
Exemple: test()

14
 Apprendre Facilement JavaScript

IV- LES ARGUMENTS DE FONCTION

1- Fonctions sans argument

La mention des arguments est facultative mais dans ce cas les parenthèses doivent rester.
C'est d'ailleurs grâce à ces parenthèses que l'interpréteur JavaScript distingue les
variables des fonctions.
Exemple:
(voir cours)

2- Fonctions avec arguments

a- Exemple de fonction avec un seul argument
On peut passer des valeurs ou paramètres aux fonctions JavaScript. La valeur ainsi
passée sera utilisée par la fonction. Pour passer un paramètre à une fonction, on fournit
un nom d'une variable dans la déclaration de la fonction.

b- Fonction avec plusieurs arguments

On peut passer plusieurs paramètres à une fonction. Comme c'est souvent le cas en
JavaScript, on sépare les paramètres par des virgules.
Syntaxe: function nom_de_la_fonction(arg1, arg2, arg3) {
... code des instructions ...
}
Exemple
(Voir cours)

c- Remarques sur les arguments

 Les arguments d'une fonction JavaScript sont tous optionnels car l'interpréteur
place les paramètres dans un tableau arguments, et les retrouve en interne par le
nom de variable qui sert d'index. Mais l'on ne définit pas de valeur par défaut. Les
attributs de la variables prédéfinies arguments sont: length (qui permet de
déterminer le nombre d'arguments passés à une fonction) et callee (détermine le
nom de la fonction dont sont issus les arguments). Par exemple une fonction
définit comme celle-ci: function mafonc(x,y,z), peut être appelée par mafonc(10)
ou par mafonc(a,10) ou encore par mafonc(2,4,1);

 A l'inverse, nous pouvons lors de l'appel, ajouter des paramètres dont le nombre
est supérieur à celui utilisé lors de la définition de la fonction.
Exemple: mafonc(0,10,20,30,40,50);
mafonc.arguments[3] ou arguments[3] retourne 30.

V- APPLICATION
(Voir cours)

15
 Apprendre Facilement JavaScript

CHAPITRE VI : LES TABLEAUX

OP : Etre capable de créer un tableau à partir du langage JavaScript

INTRODUCTION
Les tableaux sont des séries de données, généralement du même type (booléens,
numériques ou chaînes de caractères), indicées de 0 jusqu’à ce qu’on veut.
Comme dans la plupart des langages de programmation, JavaScript permet de construire
des tableaux dynamiques

I- LES TABLEAUX A UNE DIMENSION

1- Déclaration d'un tableau

Les tableaux se déclarent en JavaScript en assignant un litéral qui se construit en utilisant
des crochets à l'intérieur desquels se définit une liste de données numériques ou
textuelles séparées par des virgules; nous pouvons également déclarer un tableau avec
un constructeur et le mot clé new.
Exemples:
(Voir cours)
On note que si le constructeur Array() contient un seul élément numérique, cet élément
définit la taille du tableau et n'est pas un élément du tableau. Si l'on veut créer un tableau
d'un élément, il faut utiliser un litéral.
Exemples:
(Voir cours)

2- Indexation d'un tableau

Le premier élément d'un tableau à la position 0. On assigne ou on lit le contenu d'un
tableau avec l'indice de position entre crochets.
Exemple:
(Voir cours)

II- TABLEAU A DEUX DIMENSIONS

Pour créer un tableau à deux dimensions, on crée un simple tableau. Puis on crée un
tableau pour chaque élément.
Exemples:
(Voir cours)

III- PROPRIETE ET METHODES D'UN TABLEAU

1- La propriété length
Cette propriété retourne le nombre d'éléments qui compose le tableau. Le premier
élément d'un tableau est en position 0.
Exemple:
(Voir cours)

16
 Apprendre Facilement JavaScript

2- Les méthodes du tableau

a- La méthode join()
Cette méthode permet de récupérer les valeurs d'un tableau sous forme de chaîne de
caractères en adjoignant un séparateur.
Exemple avec tab = [true,2,5,"d","m","c","m"];

b- La méthode concat()
Cette méthode renvoie un tableau contenant les éléments des tableaux concaténés.
Exemple: Associer les valeurs de trois tableau: tab1(1,2), tab2(3,4), tab3(5,6)

c- La méthode pop()
Cette méthode renvoie la dernière valeur d'un tableau et la supprime.
Exemple: créer un tableau tab constitué de 4 éléments (5,4,1,6) et supprimer le dernier
élément de ce tableau.

d- La méthode shift()
Cette méthode renvoie la première valeur d'un tableau et la supprime.
Exemple: créer un tableau tab constitué de 4 éléments (5,4,1,6) et supprimer le premier
élément de ce tableau.

e- La méthode slice(Arg1,Arg2)
Cette méthode renvoie un tableau qui est sous-ensemble d'éléments contigus (voisins) du
tableau principal. Il prend en paramètre deux arguments séparés par une virgule.
Arg1: désigne la position (en comptant à partir de zéro et partant de la gauche) dans le
tableau principal du premier élément du sous-ensemble.
Arg2: désigne la position (en comptant à partir de un et partant de la gauche) dans le
tableau principal du dernier élément du sous-ensemble.
NB:
- Le deuxième argument étant facultatif, S'il est omis, tous les éléments à partir de
début sont sélectionnés.
- Si Arg2 est négatif, le décompte se fait par rapport au dernier élément et non par
rapport à début.
Exemple: Ecrire un script JavaScript qui ne retourne que 4 et 10

f- La méthode push()
Cette méthode ajoute un ou plusieurs éléments (séparés par des virgules) à la fin d'un
tableau, elle retourne également la longueur du tableau modifié.
Exemple: Ajouter 6 et 5 dans le tableau tab[2,6,4,7,8] et retourner la longueur de ce
tableau.

g- La méthode unshift()
Cette méthode ajoute un ou plusieurs éléments (séparés par des virgules) au début d'un
tableau, elle retourne également la longueur du tableau modifié.
Exemple: Ajouter 6 et 5 dans le tableau tab[2,6,4,7,8] et retourner la longueur de ce
tableau.

17
 Apprendre Facilement JavaScript

h- La méthode splice()
Cette méthode permet de modifier, supprimer ou ajouter des valeurs dans un tableau.
Exemples: Ecrire 2 scripts (un permettant de remplacer dans le tableau tab[1,2,3,4,5], les
valeurs 2 et 3 par a et b; et l'autre permettant à partir du tableau tab[1,2,3,4,5] de
supprimer 2 et 3).

i- La méthode reverse()
Cette méthode renvoie une copie du tableau dans l'ordre inversé des éléments de ce
tableau.
Exemple: retourner dans l'ordre inverse, une copie du tableau tab[1,2,3,4,5,6]

IV- APPLICATION

Enoncé
Ecrire un programme un qui permet de rentrer les jours de la semaine (sauf dimanche)
dans un tableau. Utiliser par la suite des fonctions qui ajoutent "dimanche" (première
valeur du tableau) et retranchent mercredi et jeudi du tableau. A la fin, votre programme
doit afficher le tableau initial et le tableau final.

18
 Apprendre Facilement JavaScript

CHAPITRE VII : LES EVENEMENTS

OP : Etre capable d'utiliser les évènements en JavaScript.

INTRODUCTION
Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une
interactivité. Grâce au Javascript il est possible d'associer des fonctions, des méthodes à
des événements tels que le passage de la souris au-dessus d'une zone, le changement
d'une valeur, etc. Ce sont les gestionnaires d'événements qui permettent d'associer une
action à un événement. La syntaxe d'un gestionnaire d'événement est la suivante :
onEvenement="Action_Javascript_ou_Fonction();"

I- LES GESTIONNAIRES D'EVENEMENTS

Les gestionnaires d'événements sont associés à des objets, et leur code s'insèrent dans les
balises de ceux-ci.
 Abort (onAbort): Cet événement a lieu lorsque l'utilisateur interrompt le
chargement de l'image.
 Blur (onBlur): Se produit lorsque l'élément perd le focus, c'est-à-dire que
l'utilisateur clique hors de cet élément, celui-ci n'est alors plus sélectionné comme
étant l'élément actif.
 Change (onChange): Se produit lorsque l'utilisateur modifie le contenu d'un
champ de données.
 Click (onClick): Se produit lorsque l'utilisateur clique sur l'élément associé à
l'événement.
 dblclick (onDblclick): Se produit lorsque l'utilisateur double-clique sur l'élément
associé à l'événement (un lien hypertexte ou un élément de formulaire). Cet
événement n'est supporté que par les versions de Javascript 1.2 et supérieures.
 dragdrop (onDragdrop): Se produit lorsque l'utilisateur effectue un glisser-déposer
sur la fenêtre du navigateur. Cet événement n'est supporté que par les versions de
Javascript 1.2 et supérieures.
 error (onError): Se déclenche lorsqu'une erreur apparaît durant le chargement de
la page. Cet événement fait partie du Javascript 1.1.
 Focus (onFocus): Se produit lorsque l'utilisateur donne le focus à un élément,
c'est-à-dire que cet élément est sélectionné comme étant l'élément actif.
 keydown (onKeydown): Se produit lorsque l'utilisateur appuie sur une touche de
son clavier. Cet événement n'est supporté que par les versions de Javascript 1.2 et
supérieures.
 keypress (onKeypress): Se produit lorsque l'utilisateur maintient une touche de
son clavier enfoncée. Cet événement n'est supporté que par les versions de
Javascript 1.2 et supérieures.
 keyup (onKeypress) Se produit lorsque l'utilisateur relâche une touche de son
clavier préalablement enfoncée. Cet événement n'est supporté que par les versions
de Javascript 1.2 et supérieures.
19
 Apprendre Facilement JavaScript

 Load (onLoad): Se produit lorsque le navigateur de l'utilisateur charge la page en

cours.
 MouseOver (onMouseOver): Se produit lorsque l'utilisateur positionne le curseur
de la souris au-dessus d'un élément.
 MouseOut (onMouseOut): Se produit lorsque le curseur de la souris quitte un
élément.
Cet événement fait partie du Javascript 1.1.
 Reset (onReset): Se produit lorsque l'utilisateur efface les données d'un formulaire
à l'aide du bouton Reset.
 Resize (onResize): Se produit lorsque l'utilisateur redimensionne la fenêtre du
navigateur.
 Select (onSelect): Se produit lorsque l'utilisateur sélectionne un texte (ou une
partie d'un texte) dans un champ de type "text" ou "textarea".
 Submit (onSubmit): Se produit lorsque l'utilisateur clique sur le bouton de
soumission d'un formulaire (le bouton qui permet d'envoyer le formulaire).
 Unload (onUnload): Se produit lorsque le navigateur de l'utilisateur quitte la page
en cours.

II- LES OBJETS LIES AUX EVENEMENTS

onAbort(Image), onBlur(Button, Checkbox, FileUpload, Layer, Password, Radio, Reset,
Select, Submit, Text, TextArea, window), onChange(FileUpload, Select, Submit, Text,
TextArea), onClick(Button, document, Checkbox, Link, Radio, Reset, Select, Submit),
onDblclick(document, Link), onDragdrop(window), onError(Image, window), onFocus(
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text,
TextArea, window), onKeydown(document, Image, Link, TextArea),
onKeypress(document, Image, Link, TextArea), onKeyup(document, Image, Link,
TextArea), onLoad(Image, Layer, window), onMousedown(Button, document, Link),
onMouseout(Layer, Link), onMouseover(Area, Layer, Link), onMouseup(Button,
document, Link), onMove(window), onReset(form), onResize(window), onSelect: text,
Textarea), onSubmit(Form), onUnload(window)

III- APPLICATION

Exemple1: Affichez à partir d'un lien un message dans une boîte de dialogue.

Exemple2: changez d'image lors du survol du pointeur de la souris sur l'image.

20
 Apprendre Facilement JavaScript

CHAPITRE VIII : LES OBJETS PREDEFINIS EN JAVASCRIPT

OP : Etre capable de manipuler les objets du navigateur en JavaScript.

INTRODUCTION

Lorsque vous ouvrez une page Web, le navigateur crée des objets prédéfinis
correspondant à la page Web, à l'état du navigateur, et qui donnent des informations
nécessaires au traitement de données. Les objets de base du navigateur sont les suivants :
navigator, window, location, history, document.

I- HIERARCHIE DES OBJETS DU NAVIGATEUR

Les objets du navigateur sont classés dans une hiérarchie qui décrit la page affichée à
l'écran, et qui permet d'accéder à n'importe quel objet grâce à une désignation dépendant
de la hiérarchie.

Pour accéder à un objet du navigateur, il faut parcourir la hiérarchie du navigateur, en

partant du sommet (l'objet window), puis en parcourant tous les maillons jusqu'à
atteindre l'objet désiré. La syntaxe est window.objet1.objet2.objet3.objet_visé (ici il y a trois
objets intermédiaires objet1 objet2 objet3 mais ce nombre peut varier de 0 à un très grand
nombre d'objets, suivant l'imbrication de vos objets dans la page...). Pour lire ou modifier
le contenu d'une propriété de l'objet visé il suffit de rajouter un point, puis le nom de la
propriété.
21
 Apprendre Facilement JavaScript

II- L'OBJET window

L'objet window est l'objet par excellence dans JavaScript, car il est le parent de chaque
objet qui compose la page web, il contient donc :

 l'objet document: la page en elle-même

 l'objet location: le lieu de stockage de la page
 l'objet history: les pages visitées précédemment
 l'objet frames: les cadres (division de la fenêtre en sous-fenêtres)

1. Les propriétés de l'objet window

 defaultStatus: Il s'agit du message qui s'affiche par défaut dans la barre d'état du
navigateur.
 frame: s Il s'agit d'un tableau qui contient les cadres présents dans la fenêtre.
 length: nombre de cadres (nombre d'éléments du tableau frames.
 name: nom de la fenêtre dans laquelle on se trouve.
 parent: Il s'agit de la fenêtre qui englobe celle dans laquelle on se trouve (si il y en
a une..).
 status: Il s'agit d'un message temporaire qui s'affiche dans la barre d'état du
navigateur suite à un évènement.
 top: Il s'agit de la fenêtre de plus haut niveau, celle qui contient tous les cadres
(frames).
 Window: Il s'agit de la fenêtre actuelle.

2. Les méthodes de l'objet window

L'objet window possède des méthodes relatives à l'ouverture et à la fermeture des
fenêtres.
 Les méthodes alert(), confirm() et prompt(): ces sont des méthodes qui font
apparaître une boîte de dialogue.
 La méthode open(): elle permet d'ouvrir une fenêtre, sa syntaxe est la suivante:

window.open("URL","nom_de_la_fenetre","options_de_la_fenetre"); Si vous utilisez cette

instruction dans un lien hypertexte, veillez à remplacer les guillemets doubles par des
guillemets simples :

<a href="javascript:window.open('URL','nom_de_la_fenetre',
'options_de_la_fenetre')">Lien vers URL</a>
Les options de la fenêtre sont:
 directories=yes ou no : Affiche ou non les boutons de navigation.
 location=yes/no: Affiche ou non la barre d'adresse.
 scrollbars Vaut yes si les barres de défilement s'affichent et no sinon.
 statusbar Vaut yes ou no selon que l'on affiche la barre d'état ou non.
 toolbar Vaut yes ou no selon que l'on affiche la barre d'outils ou non.
 menubar=yes ou no: Affiche ou non la barre de menus.
 Resizable=yes ou no: donne la possibilité de changer ou non les dimensions
de la fenêtre.
 width = largeur (en pixels): définit la largeur
 height = hauteur (en pixels) définit la hauteur

22
 Apprendre Facilement JavaScript

 la méthode close():requiert le nom de la fenêtre à fermer comme argument, il suffit

donc de créer un bouton (image, hypertexte, ou bouton de formulaire) qui
permettra de fermer cette fenêtre.

 Pour un lien hypertexte, le code sera :

<a href="javascript:self.close('nom_de_la_fenetre_');">
Cliquez ici pour fermer la fenêtre
</a>

 Pour un bouton (image), le code sera :

<a href="javascript:self.close('nom_de_la_fenetre_');">
<img src="nom_de_l_image">
</a>
Ou
<a href="javascript:;" onMouseOver="self.close('nom_de_la_fenetre_');" >
<img src="nom_de_l_image">
</a>

III- L'OBJET navigator

L'objet navigator est un objet qui permet de récupérer des informations sur le navigateur
qu'utilise le visiteur. Cela paraît totalement inutile à première vue, toutefois, comme vous
le savez sûrement, il existe de grandes différences entre différentes versions d'un même
navigateur (intègration de nouvelles technologies), ainsi qu'entre des navigateurs de
types différents (les deux antagonistes sont généralement Netscape Navigator © et
Microsoft Internet Explorer qui d'une part n'interprètent pas toutes les balises HTML et
les instructions Javascript de la même manière, et qui, d'autre part, possède parfois des
balises HTML propriètaires, c'est-à-dire qui leur sont propres...).

1. Les propriétés de l'objet navigator

Toutes les propriétés de l'objet navigator sont en lecture seule, elles servent uniquement à
récupérer des informations et non à les modifier. Etant donné que ces propriétés sont
statiques, il est nécessaires de les faire précéder par navigator .
Syntaxe: <script language="Javascript">
document.write(navigator.propriete);
</script>

 appCodeName: retourne le code du navigateur. Un navigateur a généralement

pour nom de code Mozilla, le moteur utilisé par la plupart des navigateurs
(internet explorer, netscape, mais aussi beaucoup de navigateurs sous Unix...).
Cette valeur sera différente si le navigateur du client n'est pas basé sur un autre
moteur (e.g. Opera, ...).
 appName : retourne le nom du navigateur (la plupart du temps la marque). Cette
propriété est utile pour différencier les navigateurs de Netscape et de Microsoft).
 appVersion : retourne la version du navigateur. Cette propriété prend la forme
suivante : Numéro de version( plateforme (système d'exploitation), nationalité)
Elle est utile pour connaître le système d'exploitation de l'utilisateur, mais surtout,
associée avec la propriété navigator.appName elle permet de connaître les
fonctionnlités que supporte le navigateur de votre visiteur.
23
 Apprendre Facilement JavaScript

 language : renvoie une chaîne de caractère donnant la langue utilisée par la

navigateur du client. Cette propriété n'est comprise que par les navigateurs
supportant les versions 1.2 et supérieures de Javascript.
 mimeTypes: Cette propriété renvoie un tableau répertoriant les types MIME
supportés par le navigateur, c'est-à-dire les types de fichiers enregistrés.
 platform: Cette propriété renvoie une chaîne de caractère indiquant la plateforme
sur laquelle le navigateur fonctionne, c'est-à-dire le système d'exploitation du
client. Cette propriété n'est comprise que par les navigateurs supportant les
versions 1.2 et supérieures de Javascript.
 Plugins: Cette propriété renvoie un tableau contenant la liste des plugins installés
sur la machine cliente.
 userAgent: retourne la chaîne de caractère qui comprend toutes les informations
sur le navigateur de client. Les propriétés ci-dessus offrent un moyen pratique de
récupérer une partie de cette information.

2. Les méthodes de l'objet navigator

Les méthodes de l'objet navigator permettent d'effectuer certaines opérations concernant
le navigateur du client. Dans la mesure où il s'agit de méthodes statiques, il est
indispensable de les faire précéder par navigator.
 javaEnabled(): Cette méthode permet de vérifier si le navigateur du client est
configuré pour exécuter des applets Java.
 plugins.refresh(): La méthode refresh() de la propriété plugin permet de rafraîchir
la liste des plugins installés sur le poste client.
 preference("preference",valeur): Cette méthode supportée à partir de la version
1.2 de Javascript permet à un script signé de redéfinir les préférences du
navigateur. Le script doit ainsi obtenir les privilèges suffisants pour pouvoir
effectuer ces actions.
 savePreferences(): Cette méthode supportée à partir de la version 1.2 de Javascript
permet de sauvegarder les modifications apportées aux préférences du navigateur
du client.
 taintEnabled(): Cette méthode permet de vérifier que la protection des données a
été activée grâce à la méthode taint() de Javascript. Cette méthode est obsolète
depuis la version 1.2 de Javascript, et ne fonctionne ainsi que sur Netscape
Navigator 3.

IV- L'OBJET document

Cet objet est créé indirectement par la balise HTML <body>

1. Les propriétés de l'objet document

 images: cette propriété référence dans un tableau, toutes les images disponibles
sur la page.
 forms: elle référence dans un tableau, tous les formulaires disponibles sur la page.
 links: référence dans un tableau, tous les liens disponibles sur la page.
 anchors: elle retourne dans un tableau, les éléments 'a' utilisés comme ancre ou
comme combinaison de liens et d'ancres.
 applets: Elle retourne dans un tableau, la liste des applets disponibles sur la page.

24
 Apprendre Facilement JavaScript

Il existe d'autres propriétés telles que: alinkColor, bgColor, cookie, domain, embeds,
fgColor, lastModified, layers, linkColor, plugins, referrer, title, URL, vlinkColor.
 alinkColor : Couleurs des liens actifs (bouton de souris enfoncé)
 linkColor : Couleur des liens non actifs et non visités.
 vlinkColor : Couleur des liens visités
 bgColor : Couleur de fond
 fgColor : Couleur du texte
 lastModified : Date de dernière modification du document source.
 cookie : chaîne de caractères contenant les cookies.
 referrer : Adresse de la page d'origine. Permet donc de connaître l'adresse du lien
vers la page en cours.
 title : Titre du document indiqué par la balise <TITLE>. Modifiable avec Internet
Explorer.

2. Les méthodes de l'objet document

 write(texte) : Affiche du texte et du code HTML dans le document en cours
 close() : Ferme le flux d'affichage externe (voir popup).
 open() : Ouvre une nouvelle fenêtre de navigateur.
 getSelection() : Retourne le texte sélectionné dans la page.
 handleEvents() : Crée un gestionnaire d'événement.
 captureEvents() : Détecte un événement.
 eval(chaine) : Evalue une chaîne et retourne le résultat.

V- APPLICATION

Après avoir réalisé deux formulaires contenant les informations ci-dessus, affichez dans
une boîte de dialogue:

- Le navigateur utilisé pour exécuter la page, sa version ainsi que le nombre de

formulaires contenus dans le document.

VI- L'OBJET Array

Cet objet est utilisé pour créer un tableau.
1. Les constructeurs
 Array(n)
 Array(élément0, …, élémentn-1)
2. Les propriétés
index, input, lenght, prototype

25
 Apprendre Facilement JavaScript

3. Les méthodes
concat, join, pop, push, reverse, shift, slice, splice, sort, toString, unshift
4. Exemple
(Voir cours)

VII- L'OBJET Boolean

Cet objet permet de créer un boolén (true ou false)
1. Le constructeur
 Boolean(valeur)
2. Les propriétés
 prototype
3. Les méthodes
 toString

VIII- L'OBJET Date

Cet objet contient des méthodes de traitement de la date.

1. Les constructeurs
 Date()
 Date("mois jour, année heure :minutes :secondes")
 Date(année,mois,jour)
 Date(année,mois,jour,heure,minutes,secondes)
2. Les propriétés
 prototype
3. Les méthodes
getDate, getDay, getHours, getMinutes, getMonth, getSeconds, getTime,
getTimezoneOffset, getYear, parse, setDate, setHours, setMinutes, setMonth, setSeconds,
setTime, setYear, toGMTString, toLocaleString, UTC.
4. Exemple
(Voir cours)

IX- L'OBJET function

Les fonctions ainsi créées ne possèdent pas de nom. Elles doivent donc être référencées
par une variable.
1. Le constructeur
 Function (arg1, arg2,…,corps)
2. Les propriétés
Arguments, Arity, Caller, Prototype

3. La méthode
 toString
4. Exemple
(Voir cours)

26
 Apprendre Facilement JavaScript

X- L'OBJET Math
C’est un objet prédéfini de JavaScript. Ce n’est pas une classe et ne peut donc être
instanciée. On peut considérer cet objet comme une bibliothèque ou collection de
fonctions et constantes.

1. Les propriétés
 E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT2
2. Les méthodes
 Abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, max, min, pow, random,
round, sin, sqrt, tan.
3. Exemple
(Voir cours)
XI- L'OBJET Number
Cet objet est utilisé pour créer des nombres.

1. Le constructeur
 Number (valeur)
2. Les propriétés
 MAX_VALUE, MIN_VALUE, NaN, NEGATIVE_INFINITY POSITIVE_INFINITY,
prototype
3. Les méthodes
 toString
4. Exemple
(Voir cours)

XII- L'OBJET String

Cet objet n'est pas une classe et ne peut être instancié.

1. Les propriétés
 Length, prototype

2. Les méthodes
Anchor, big, blink, bold, charAt, charCodeAt, concat, fixed, fontcolor, fontsize,
fromCharCode, indexOf, italics, lastIndexOf link, match, replace, search, slice, small,
split, strike, sub, substr, substring, sup, toLowerCase, toUpperCase.
3. Exemple (Voir cours)

27
 Apprendre Facilement JavaScript

CHAPITRE IX : LE DOM
OP : Etre capable de manipuler les objets en JavaScript à l'aide du DOM.
INTRODUCTION
Le DOM (Document Object Model ou Modèle Objet de Document en français) est un
arbre d’objets Node (noeud) qui fournit une représentation structurée du document. On
aura donc un node racine avec x nodes fils. La relation entre les nodes est donc verticale
entre des noeuds enfants et des noeuds parents, mais il existe aussi une relation
horizontale entre deux nodes accolés de même niveau hiérarchique. Dans notre contexte,
le modèle DOM représente les éléments HTML, mais de façon général, il est applicable
dans toutes sortes de documents XML, car le HTML est une représentation XML
particulière.

I- REPRESENTATION DU DOM D'UN DOCUMENT XHTML

1. Présentation d'une structure de page HTML
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>Ma page HTML</title>
</head>
<body>
<div id="d1">contenu 1</div>
</body>
</html>
2. Représentation schématique du DOM issu de la structure HTML

document

html

head body

meta title div

#Text #Text

28
 Apprendre Facilement JavaScript

3. Description de la représentation schématique du DOM

L'élément <html> est composé de deux éléments appelés enfants (child en anglais) que
sont <head> et <body>. L'élément <html> représente pour ces deux enfants, l'élément
parent. Chaque élément est appelé nœud (node en anglais). Le nœud <head> contient
également de nœuds enfants que sont <meta> et <title>. Le nœud <title> contient un
nœud enfant de type text etc.

II- ACCES DIRECT AUX NŒUDS

L'objet document possède trois méthodes principales pour accéder aux nœuds à savoir:
getElementById( ), getElementsByName( ) et getElementsByTagName( ).

1. La méthode getElementById( )
Cette méthode parcourt le document et retourne le nœud portant l'identifiant spécifié en
paramètre.
Syntaxe: document.getElementById('identifiant')
Exemple: n1=document.getElementById('d1');
2. La méthode getElementsByName( )
Cette méthode parcourt le document et retourne une collection de nœuds dont l'attribut
name a pour valeur, celle spécifiée en paramètre
Syntaxe: document.getElementsByName('valeur_name')
Exemple: document.getElementsByName('val1');

3. La méthode getElementsByTagName( )
Cette méthode parcourt le document et retourne une collection de nœuds se référant au
nom de balise spécifié en paramètre.
Syntaxe: document.getElementsByTagName('nom_balise')
Exemple: document.getElementsByTagName('p');

III- ACCES AUX ELEMENTS A PARTIR D'UN NŒUD

La classe Node permet, à partir de ses propriétés, de parcourir un arbre DOM
relativement à un nœud précis (nœud ou élément courant).

1. childNodes
Cette propriété retourne une collection de nœuds enfants de l'élément courant.
Syntaxe: element.childNodes
Exemple: (Voir cours)

2. parentNode
Chaque élément d'un document XHTML possède un noeud parent à l'exception de
document. Pour accéder au nœud père d'un nœud spécifique, le DOM se sert de la
propriété parentNode qui permet l'accès direct au père supérieur d'un nœud.
Syntaxe: element.parentNode
Exemple: (voir cours)

29
 Apprendre Facilement JavaScript

3. firstChild
Retourne le premier nœud enfant du nœud courant ou Null s'il n'en a pas.
Syntaxe: element.firstChild
Exemple: (Voir cours)

4. lastChild
Cette propriété retourne le dernier nœud enfant du nœud courant ou Null s'il n'en a pas.
Syntaxe: element.lastChild
Exemple: (Voir cours)

5. nextSibling
Cette propriété retourne le nœud suivant nœud courant dont le parent est identique. Si le
nœud courant est le dernier, la propriété retourne Null.
Syntaxe: nœud.nextSibling

6. previousSibling
Cette propriété retourne le nœud précédent nœud courant dont le parent est identique. Si
le nœud courant est le premier, la propriété retourne Null.
Syntaxe: nœud.previousSibling

7. innerHTML
Cette propriété permet d'ajouter ou de modifier le contenu de balises html.
Syntaxe: element.innerHTML

IV- MANIPULATION DES NŒUDS

Certaines méthodes permettent de lier les nœuds créés aux nœuds existants.

1. createElement
Cette méthode de l'objet document permet de créer un nœud qui n'est rien d'autre qu'une
balise définie en paramètre.
Syntaxe: document.createElement('nom_balise')
Exemple: document.createElement('p');

2. createTextNode
Cette méthode de l'objet document permet de créer un nœud de type texte défini en
paramètre.
Syntaxe: document.createTextNode('definition _du_texte')
Exemple: document.createTextNode('Bienvenue sur notre page');

3. replaceChild
Cette méthode remplace un nœud enfant de l'élément courant par un autre nœud.
Syntaxe: noeudParent.replaceChild(nouvelEnfant, ancienEnfant)
Exemple: (Voir cours)

4. removeChild
Cette méthode supprime un nœud enfant de l'élément parent.
Syntaxe:
noeudParent.removeChild(enfant)
Exemple (Voir cours)

30
 Apprendre Facilement JavaScript

5. appendChild
Cette méthode ajoute un nœud spécifié en paramètre, à la fin de la liste des enfants d'un
nœud parent.
Syntaxe: element.appendChild(enfant)
Exemple: (Voir cours)

6. insertBefore
Insère le nœud spécifié juste avant un nœud de référence parmi les enfants du nœud
parent.
Syntaxe: nœudparent.insertBefore( nouveaunoeud,noeudreference)
Exemple: (Voir cours)

7. hasChildNodes
hasChildNodes renvoie une valeur booléenne indiquant si l'élément actuel possède des
nœuds enfants.
Syntaxe: element.hasChildNodes()
Exemple: (Voir cours)

V- MANIPULATION DES ATTRIBUTS

1. attributes
Cette propriété retourne une collection d'attributs se référant au nœud spécifié.
Syntaxe: NodeReference.attributes
Exemple: (Voir cours)

2. hasAttributes()
Cette méthode s'assure que le nœud spécifié admet des attributs; elle retourne donc une
valeur booléenne.
Syntaxe: nœudspecifie.hasAttributes()

3. getAttribute()
Cette méthode retourne la valeur de l'attribut spécifié en paramètre d'un élément donné.
Syntaxe: element.getAttribute('nom_attribut')
Exemple: (Voir cours)

4. getAttributeNode()
Renvoie le noeud d'attribut spécifié pour l'élément courant.
Syntaxe:
attrNode = element.getAttributeNode('nom_attribut')
 attrNode est un noeud Attr pour l'attribut demandé.
 nom_attribut est une chaîne de caractères qui contient le nom de l'attribut.
Exemple: (Voir cours)
NB: la méthode getAttribute est généralement utilisée à la place de getAttributeNode
pour obtenir la valeur d'un attribut d'un élément.

5. removeAttribute()
Cette méthode supprime un attribut et sa valeur de l'élément courant à partir du nom
d'attribut spécifié en paramètre.
Syntaxe: element.removeAttribute('Nom_attrbut')
Exemple: (Voir cours)

31
 Apprendre Facilement JavaScript

6. removeAttributeNode()
Cette méthode permet de supprimer un attribut et sa valeur à partir d'un nœud d'attribut
spécifié en paramètre.
Syntaxe: element.removeAttributeNode(attributeNode)
Exemple: (Voir cours)

7. setAttribute()
Cette méthode ajoute un nouvel attribut ou change la valeur d'un attribut existant pour
l'élément spécifié.
Syntaxe: element.setAttribute(nom, valeur);
 nom est le nom du nouvel attribut sous forme de chaîne.
 valeur est la nouvelle valeur désirée de l'attribut.
Exemple: (Voir cours)

8. createAttribute()
CreateAttribute crée un nouveau nœud de type attribut. Elle est une méthode de l'objet
document.
Syntaxe: document.createAttribute('nom_attribut')
Exemple: (Voir cours)

VI- INFORMATION SUR LA NATURE DES NŒUDS

Chaque nœud dispose de propriétés permettant de fournir des informations sur lui telles
que: son nom, son type ou même son contenu.
1. nodeName
Cette propriété renvoie le nom d'un nœud courant. Ainsi, nous vous présentons l'
INTERFACE NODE associé au (NAME).
Attr (identique à Attr.name), CDATASection ("#cdata-section"), Comment
("#comment"), Document("#document"), DocumentFragment ("#document-fragment"),
DocumentType (identique à DocumentType.name), Element(identique à
Element.tagName), Entity (nom de l'entité), EntityReference (nom de la référence
d'entité), Notation (nom de la notation), ProcessingInstruction (identique à
ProcessingInstruction.target), Text("#text");
Syntaxe: nœud.nodeName
Exemple: (Voir cours)

2. nodeType
Cette propriété retourne un entier, représentant le type de nœud.
noeud élément (1), noeud attribut(2), noeud texte(3), noeud de section CDATA(4),noeud de
référence à une entité(5), noeud de commentaire(8), noeud de document(9),
Syntaxe: nœud.nodeType
Exemple: (Voir cours)
3. nodeValue
Cette méthode renvoie la valeur du nœud courant sous forme de chaîne de caractères.
Syntaxe: nœud.nodeValue
Exemple: (Voir cours)

VII- APPLICATION

32
 Apprendre Facilement JavaScript

CHAPITRE X : JAVASCRIPT ET LES FORMULAIRES

OP : Etre capable de manipuler les objets du formulaire en JavaScript.

INTRODUCTION

Pour intégrer des éléments de formulaire, il faut encadrer les balises par <FORM> et
</FORM>. Un formulaire contient un ou plusieurs éléments que nous appellerons des
contrôles (widgets). Ces contrôles sont notés par exemple par la balise <INPUT TYPE= ...>.

II- DECLARATION D'UN FORMULAIRE

La déclaration d'un formulaire se fait par les balises <FORM> et </FORM>. Il faut noter
qu'en JavaScript, l'attribut NAME="nom_du_formulaire" a toute son importance pour
désigner le chemin complet des éléments.
En outre, les attributs ACTION et METHOD sont facultatifs pour autant que vous ne
faites pas appel au serveur. Une erreur classique en JavaScript est d'oublier de déclarer la
fin du formulaire </FORM> après avoir incorporé un contrôle.

III- LES ELEMENTS DE FORMULAIRE

Nous allons dans cette partie, présenter les éléments de formulaire avec leurs propriétés,
méthodes et évènements associés.
1. La zone de texte
a- Définition
La zone de texte est l'élément d'entrée/sortie par excellence de Javascript. La syntaxe
Html est <INPUT TYPE="text" NAME="nom" SIZE=x MAXLENGTH=y> pour un
champ de saisie d'une seule ligne, de longueur x et de longueur maximale de y. L'objet
"text" possède trois propriétés :
name(indique le nom du contrôle par lequel on pourra accéder), defaultvalue(indique la
valeur par défaut qui sera affichée dans la zone de texte), value(indique la valeur en
cours de la zone de texte, soit celle tapée par l'utilisateur ou si celui-ci n'a rien tapé, la
valeur par défaut).
b- Exemple (Voir cours)
2. Les boutons d'options (radio)
a- Définition
Les boutons radio sont utilisés pour noter un choix, et seulement un seul, parmi un
ensemble de propositions. Ses propriétés sont les suivantes:
name(indique le nom du contrôle. Tous les boutons portent le même nom), index(l'index
ou le rang du bouton radio en commençant par 0), checked(indique l'état en cours de
l'élément radio), defaultchecked(indique l'état du bouton sélectionné par défaut), value(
indique la valeur de l'élément radio).
b- Exemple : (Voir cours)
3. Les boutons case à cocher (checkbox)
a- Définition
Les boutons case à cocher sont utilisés pour noter un ou plusieurs choix (pour rappel
avec les boutons radio un seul choix) parmi un ensemble de propositions. A part cela, sa
syntaxe et son usage est tout à fait semblable aux boutons radio sauf en ce qui concerne
l'attribut name.

33
 Apprendre Facilement JavaScript

name(indique le nom du contrôle. Toutes les cases à cocher portent des noms différents),
checked(indique l'état en cours de l'élément case à cocher), defaultchecked(indique l'état
du bouton sélectionné par défaut), value(indique la valeur de l'élément case à cocher).
b- Exemple (Voir cours)
1. Les listes
a- Définition
Les listes sont définies par la balise <SELECT>. Cette balise définie la zone de la liste.
Les lignes de contenu de la liste sont alimentées par la balises <OPTION>. L'objet
OPTION est assez simple. Il peut avoir comme attributs : name, value, selected.
selected force la sélection de cette occurence dans la liste.
 Les propriétés de l'élément <select>
name(donne le nom de la liste), size(détermine le nombre de lignes à afficher), multiple(
détermine la sélection multiple autorisée), disabled(effectue le grisage de la liste
affichée), class(permet d'associer une classe de style à l'objet), style(définit le style de la
liste).
 Les méthodes de l'élément <select>
Add(ajoute une ligne à la liste), remove(supprime une ligne de la liste), focus(donne le
focus à la liste), blur(retire le focus de la liste).
 Les évènements associés à l'élément <select>
onChange(détecte la sélection d'une nouvelle ligne de la liste), onFocus(détecte la prise
de focus), onblur(détecte la perte de focus).
b- Exemple
(Voir cours)
2. La zone de texte multi-lignes
L'objet TEXTAREA est essentiellement utilisé pour permettre au visiteur de saisir un
texte assez long (message, descriptif...).
 Les propriétés de l'objet TEXTAREA
Name(détermine le nom de la zone de texte multi-lignes), rows(détermine le nombre de
lignes du contrôle), cols(détermine le nombre de colonnes du contrôle), disabled(effectue
le grisage du contrôle), readOnly(met le contrôle en lecture seule), class(permet
d'associer une classe de style à l'objet), style(définit le style du contrôle), value(indique la
valeur en cours de la zone de texte,soit celle tapée par l'utilisateur ou si celui-ci n'a rien
tapé, la valeur par défaut).
 Les méthodes de l'objet TEXTAREA
focus(donne le focus à la zone de texte milti-lignes), blur(retire le focus).
 Les évènements associés à l'objet TEXTAREA
onChange(détecte le changement du contenu), onScroll(détecte le défilement de la zone
de texte multi-lignes), onFocus(détecte la prise du focus par le focus), onBlur(détecte la
perte du focus par le contrôle).

II- APPLICATION
Exo1: saisir du texte dans une zone de texte et afficher le contenu dans une autre zone de
texte.
Exo2: faire la somme de deux nombres et afficher le résultat dans une autre zone de texte.

34
 Apprendre Facilement JavaScript

CHAPITRE VI : LES CLASSES ET OBJETS

OP : Etre capable de définir et d'utiliser les classes et les objets en JavaScript.

INTRODUCTION
Un langage objet est un langage de programmation qui propose un ensemble de
méthodes (fonctions) et de propriétés (caractéristiques) qui peuvent s’appliquer aux
différents objets définis dans le langage. Il existe des classes d’objets, qui hiérarchisent les
objets qui la constituent. Chaque objet hérite des propriétés et méthodes de l’objet parent.
Cette notion de classe en JavaScript n’est pas aussi pointue et bien définie. C’est pour cela
que le JavaScript est un langage orienté objet ou basé objet selon le terme employé mais
pas objet tout cours. Les objets en JavaScript sont des entités qui décrivent les éléments
contenus dans une page HTML (frame, formulaires, image …) ainsi que les éléments qui
structurent cette page (navigateur).

I- DEFINITION DE QUELQUES TERMES

 Le code au kilomètre...
Au début, on écrivait son code ligne par ligne, avec des renvois à un numéro de ligne.
Les programmes étaient heureusement courts, mais dès qu’ils se sont allongés, c’était
illisible et fastidieux.
 La programmation fonctionnelle
On a eu idée de créer des fonctions, qui permettaient de ne pas écrire plusieurs fois les
mêmes sections de code, et surtout de concentrer des actions du programme dans de
petites unités.
 La programmation orientée objet (POO)
On s’est aperçu que notre mode de penser fonctionne par objets : un stylo qui permet
d’écrire, qui a telle couleur, une feuille de papier qui contient tel texte ou qui est vide etc.
Un objet est constitué de propriétés (la couleur, la marque du stylo) et de méthodes, c’est
à dire, les fonctions qui décrivent le comportement de l’objet ou les actions qu’on peut lui
faire faire (écrire avec un stylo, remplir sa recharge, le ranger etc.).
La Programmation Orientée Objet rend un code plus lisible et plus facile à modifier.
 La classe
Une classe décrit une catégorie d’objets (comme des personnes ou des voitures etc.) en
d'autres termes elle possède en son sein plusieurs constructeurs. La classe contient des
propriétés inhérentes à l’objet décrit, plus des méthodes ou fonctions qui définissent le
comportement de l’objet.
On a souvent tendance à confondre classe et objet. La classe est un concept, elle décrit
l’objet, tandis que l’objet est un élément concret. On verra avec les exemples.
En JavaScript, la classe n’existe pas en temps que définition. Dans les véritables langages
objets, on définit une classe et ses objets.
Exemple: (Voir cours)
 L'objet
Une fois la classe définie, on peut créer des objets sur le modèle de cette classe. Le
langage crée alors une copie de la classe (avec les propriétés et les méthodes) pour
chaque objet créé.
Exemple: monObjet = new MaClasse(); // création de l'objet monObjet
 La propriété
Une propriété est une variable qui décrit un aspect de la classe. Ainsi document.title
décrit la propriété « titre » du document (la page).
35
 Apprendre Facilement JavaScript

 La méthode
Une méthode n’est rien d’autre qu’une fonction incluse dans une classe. Ainsi
document.write() est une méthode de la classe document, alors que new() (qui permet de
créer un objet à partir d’une classe) est une fonction du langage, donc rattachée à aucun
objet.
 Le constructeur
Un constructeur est une méthode spéciale, qui est appelée à chaque fois qu’on crée un
objet avec la fonction new(). JavaScript n’a pas de type « classe », mais il le remplace par
un constructeur. Et c’est le constructeur qui décrit la classe. En fait, constructeur et
création de classe est mélangé.
 Le destructeur
Un destructeur est une fonction qui permet de supprimer un objet. Il n’est pas possible
d’en créer en JavaScript : le destructeur par défaut est appelé par la fonction delete(objet)
 L'héritage
Dans certains cas, on peut définir une hiérarchie d’objets, des plus simples aux plus
complexes. On a une classe de base, qui contient le minimum de propriétés et de
méthodes puis des classes dérivées, contenant des propriétés et des méthodes plus
spécialisées. Ces classes dérivées peuvent hériter alors des propriétés et des méthodes de
la classe de base, sans les redéfinir.

II- CREATION DE CLASSE ET D'OBJETS EN JAVASCRIPT

Pour illustrer les classes et les objets en JavaScript, nous procédons par l'exemple de la
gestion d'un parc automobile.

1- Définition de la classe
En JavaScript, créer une classe revient à définir un constructeur.
a- Création d'un constructeur
function clVoiture(la_marque, le_modele, le_numero, kilometrage, le_prix) {
this.marque = la_marque;
this.modele = le_modele;
this.numero = le_numero;
this.km = kilometrage;
this.prix = le_prix + " €";
}
Remarques:
 "marque", "modele", "annee", "km" et "prix" sont les propriétés de la classe
clVoiture. L’opérateur "this" indique que ces variables sont des variables
rattachées à clVoiture.
 Les noms des paramètres ("la_marque", etc.) sont différents des noms des
propriétés mais on aurait pu donner les mêmes noms.
b- Création d'un constructeur avec des méthodes
Nous allons créer une méthode qui affiche les infos d’une voiture, pour l’utiliser dans un
listing. Nous allons l’appeler simplement affiche(). Pour ce faire, nous notons qu'il existe
3 manières de créer des méthodes.

36
 Apprendre Facilement JavaScript

 Dans le constructeur
Exemple: (Voir cours)
Remarques:
- Dans la définition this.affiche = clVoiture_affiche;, on n’indique pas de ().
- Dans la définition de la fonction clVoiture_affiche(), on fait référence aux
propriétés de l’objet en utilisant l’opérateur "this", parce que cette fonction est une
méthode.
 A partir de la propriété "prototype"
Exemple: (Voir cours)
Remarques:
- Le résultat est exactement le même que dans la définition précédente : on crée une
méthode affiche(), mais la définition est faite à l’extérieur du constructeur, grâce à
la propriété "prototype".
- Dans le prototype : à gauche du signe "=" le nom de la méthode, à droite le nom de
la fonction correspondante.
- Avec cette façon de faire, nous pouvons définir le prototype n’importe où dans le
script.
 Dans le prototype
Exemple: (Voir cours)
Remarques:
- Avec cette façon de procéder, nous ne créons plus de fonction clVoiture_affiche().
- Cependant, il faut écrire la méthode avant le code qui l’appellera, contrairement à
la façon précédente qui permet plus de liberté à ce niveau là.
- Les 2 dernières façons de créer des méthodes sont les seules utilisables, si on veut
ajouter de nouvelles méthodes à des objets JavaScript prédéfinis.
2- Création d'un objet
a- A partir d'une instance de classe
L'instanciation d'un objet, revient à créer réellement cet objet à partir d'un constructeur;
on dit également qu'on crée une instance de classe. Pour ce faire, on utilise la syntaxe
suivante: new nom_constructeur(parametres_du_constructeur);
Exemple: (Voir cours)

b- Création d'objet sans passer par un constructeur

Il existe une autre manière de créer des objets, sans passer par un constructeur. C’est plus
simple mais plus limité, car on ne peut pas leur rattacher de méthode.
Exemple:(Voir cours)

3- L'unicité des propriétés

Supposons qu’après avoir défini la classe clVoiture on veuille aussi définir une autre
classe clClient, avec un numéro, un nom et un numéro de téléphone.
Exemple: (Voir cours)

III- APPLICATION
En vous servant des classes et objets, écrivez un programme qui permet de gérer les
articles d'un supermarché. A partir d'une méthode, ce programme doit générer la
référence, la désignation et le montant, la quantité commandée et le montant TTC de
l'article commandé.

37