Institut Universitaire d'Abidjan

JAVASCRIPT
DJE BI DJE GABIN
JAVASCRIPT
DJE BI DJE GABIN
SOMMAIRE

1. GENERALITES ................................................................................................................... 1
2. LE LANGAGE ..................................................................................................................... 1
3. LES STRUCTURES DE DONNEES .................................................................................... 7
4. LES OPERATEURS ........................................................................................................... 10
5. LES BOITES DE MESSAGE ............................................................................................. 16
6. LES FONCTIONS .............................................................................................................. 18
7. LES STRUCTURES DE CONTROLE ................................................................................ 24
8. LES EVENEMENTS .......................................................................................................... 30
9. MANIPULER DU CODE HTML ....................................................................................... 35
10. L’OBJET ARRAY ............................................................................................................ 46
11. L’OBJET NAVIGATOR................................................................................................... 51
12. L’OBJET MATH .............................................................................................................. 52
13. L’OBJET STRING............................................................................................................ 56
14.L’OBJET DATE ................................................................................................................ 61
15. LES COOKIES ................................................................................................................. 66
16. LES EXPRESSION REGULIERES .................................................................................. 70
17. FONCTIONS ET PROPRIÉTÉS ....................................................................................... 77

0
 1. GENERALITES

1.1. Le langage Javascript

Javascript est un langage interprété, c’est-à-dire qu’il n’est pas

compilé en langage machine avant exécution, comme le Java ou le C++. Le
Javascript est intégré au code HTML, il vous faudra donc des bases assez
solides en HTML. Il s’agit, a priori, du premier langage de script créé pour
le web. Il permet d’exécuter des commandes du côté utilisateur, donc au
niveau du navigateur et non du serveur -comme le PHP - .

1.2. Côté pratique

Pour programmer en Javascript, il vous faut un navigateur web assez récent
et un éditeur de texte, le bloc-notes de Windows est suffisant. Une
connexion Internet est souhaitable.

2. LE LANGAGE

2.1. Incorporation du code

Le code s’intègre donc dans la page HTML avec les balises <script>.
Il existe deux façons d’intégrer votre code. La première consiste à le placer
entre les balises, tout simplement.

Syntaxe :
<script> code </script>

Exemple 2.1 :
<script >
var mavariable = 12 ;
[Link] (typeof(mavariable)) ;
1
 </script>

Il est aussi possible de placer votre code dans un fichier Javascript,

comportant l’extension « .js ». Ensuite, il faut l’insérer dans la page HTML
avec la balise <script>. Ne pas oublier il est préférable de placer le fichier
JS dans la même dossier que la page.

Syntaxe :
<script src = "chemin_fichier"></script>

Exemple 2.2 :
<script src = "mon_fichier_javascript.js">
</script>

2
 2.2. Spécificités du langage

La première chose qu’il faut noter en Javascript, comme dans le C,

est que chaque instruction se termine par un point-virgule ‘;’. Il est possible
de mettre plusieurs instructions sur la même ligne, puisque l’interpréteur
ignore les sauts de lignes. Vous pouvez aussi insérer des blancs où vous
voulez – excepté dans des noms de variables ou dans des expressions – cela
ne change pas le code.

Il est utile de commenter son code. Cela se fait à l’aide de ‘//’, tout le
texte suivant le double slash jusqu’à la fin de la ligne est ignoré par
l’interpréteur. Il est aussi possible de mettre des commentaires au milieu
d’une ligne, ou sur plusieurs ligne, en les encadrant avec « /* » et « */ »

3
 POINTS IMPORTANTS A RETENIR

-Les instructions doivent êtres séparées par un point-virgule.

-Un code Javascript bien présenté est plus lisible et plus
facilement modifiable.
-Il est possible d'inclure des commentaires au moyen des
caractères //, /* et */.
-Les codes Javascript se placent dans un élément <script>.
-Il est possible d'inclure un fichier Javascript grâce à l'attribut

RÉFÉRENCES BIBLIOGRAPHIQUES

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos

sites web avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le
Web2.0, Eyrolles, 2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué
au Feuilles de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux
concepts avancés, ENI Edition 2008, 189 pages.

4
EXERCICES D’ASSIMILATION

Soit le script javascript suivant : alert ('Bienvenu à IUA !');

Comment utiliser ce script dans la page ci-dessous (2 possibilités)?

<!DOCTYPE html>
<html>
<head>
<title>Site IUA Math-Info</title>
</head>

5
<body>

</body>
</html>

6
3. LES STRUCTURES DE DONNEES
3.1. Les données constantes

Le JS fournit quatre types de constantes déjà définies :

 Les constantes numériques, en notation décimale ou flottante.
 Les constantes booléennes : true et false.
 Les chaînes de caractères, encadrées de guillemets ou de
d’apostrophes (‘’).
 La constante null qui signifie « rien », « sans valeur », et qui est
attribuée au variables non définies.

3.2. Les variables en JS

Pour faire simple, une variable est un espace de stockage sur votre
ordinateur permettant d'enregistrer tout type de donnée, que ce soit une
chaîne de caractères, une valeur numérique ou bien des structures un peu
plus particulières.
3.2.1. Les types de variable
Un nom de variable doit commencer par une lettre (alphabet ASCII) 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é.
Javascript est sensible à la casse (majuscule et minuscule). Cela signifie
que « MaVariable » n’est pas équivalent à « mavariable ».

Il existe 5 types de variables en Javascript :

 Les nombres : number
 Les chaînes de caractères : string
 Les booléens : boolean
 Les objets : object
 Les fonctions : function

[Link] déclaration et l’affectation

7
 On distinguera ici la déclaration et l’affectation. La première
consiste à donner un nom à la variable alors que la seconde consiste à
donner une valeur à la variable. La différence est qu’une variable peut-être
affectée d’une valeur plusieurs fois alors qu’elle ne peut être définie qu’une
seule fois. L’exemple suivant illustre une définition sans affectation.

Exemple 3 :

var Numero;

Dans les exemples qui suivent, par facilité, j’ai regroupé l’affectation
avec la déclaration. Les variables peuvent être déclarées de deux façons :

 De façon explicite, avec le mot-clé « var ».

Exemple 4 :

var Numero = 1 ;
var myVariable1, myVariable2= 4,
myVariable3;

 De façon implicite. On écrit directement le nom de la variable suivi

de la valeur que l'on lui attribue.
Exemple 5 :
Numero = 1 ;
result = 3 + 2;
alert(result); // Affiche : « 5 »

text = 'Bonjour ';

text += 'toi';
alert(text); // Affiche « Bonjour toi ».

8
 3.2.2. Les noms réservés
Les mots de la liste ci-après ne peuvent être utilisés pour des noms de
fonctions et de variables. Certains de ces mots sont des mots clés
Javascript, d'autres ont été réservés par Netscape pour un futur usage
éventuel.

Lettre
Mot-clé
A abstract

B boolean / break / byte

C case / catch / char / class / const / continue

D default / do / double

E else / extends

F false / final / finally / float / for / function

G goto

if / implements / import / in / instanceof / int /

I
interface

L long

N native / new / null

P package / private / protected / public

R return

S short / static / super / switch / synchronized

9
 T this / throw / throws / transient / true / try

V var / void

W while / with

[Link] globales et variables locales

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 contextuelle. 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 contextuellement (sans utiliser le
mot var), sa portée sera globale.

4. LES OPERATEURS
Comme tout langage informatique, JS possède des opérateurs pour
effectuer les calculs. Leur présentation est rapide, surtout pour les plus
simples.
[Link] opérateurs de calcul
Signe Nom Signification Résultat
Exemple
+ plus addition x+3 14

- moins soustraction x-3 8

multiplié
* multiplication x*2 22
par

/ divisé par division x/2 5.5

10
 reste de la
% modulo x%5 1
division par

= affectation a la valeur x=5 5

[Link] opérateurs de comparaison

Signe Nom Résultat
Exemple
== Egal 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

[Link] opérateurs associatifs

Signe Description Exemple Signification Résultat

+= plus égal x += y x=x+y 16

-= moins égal x -= y x=x-y 6

multiplié
*= x *= y x=x*y 55
égal

/= divisé égal x /= y x=x/y 2.2

[Link] opérateurs logiques

Signe Nom Exemple Signification

11
 (condition1) && condition1 et
&& et
(condition2) condition2

condition1 ou
|| ou (condition1) || (condition2)
condition2

[Link] opérateurs d'incrémentation

Signe Description Exemple Signification Résultat

x++ incrémentation y = x++ y =x+1 6

x-- décrémentation y= x-- y =x-1 4

12
 POINTS IMPORTANTS A RETENIR

- Une variable est un moyen pour stocker une valeur.

- On utilise le mot clé var pour déclarer une variable, et on utilise
= pour affecter une valeur à la variable.
- Les variables sont typées dynamiquement, ce qui veut dire que
l'on n'a pas besoin de spécifier le type de contenu que la variable
va contenir.
- Grâce à différents opérateurs, on peut faire des opérations entre
les variables.
- L'opérateur + permet de concaténer des chaînes de caractères,
c'est-à-dire de les mettre bout à bout.

RÉFÉRENCES BIBLIOGRAPHIQUES

- Johann Pardanaud et Sébastien

13 de la Marck, Dynamisez vos
sites web avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le
Web2.0, Eyrolles, 2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué
au Feuilles de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux
EXERCICES D’ASSIMILATION
1-
Declarer 5 variales de types [Link] la fonction typeof pour
afficher les types
2-
var text, number1 = 4, number2 = 2; text = number1 + '' + number2;
que contient la variable (text);
3-
var number1 = 3, number2 = 2, result; result = number1 * number2;
que contient la variable (result);
4-
var divisor = 3, result1, result2, result3;
result1 = (16 + 8) / 2 - 2;
result2 = result1 / divisor;
result3 = result1 % divisor;
que contient la variable (result2);
que contient la variable (result3);
5-
var number = 0;
var output = number++;
que contient la variable (number);
que contient la variable (output);
6-
var number1 = 2, number2 = 2, number3 = 4, result;
result = number1 == number2;
que contient la variable (result);
result = number1 == number3;

14
que contient la variable (result);
result = number1 < number3;
que contient la variable (result);

15
5. LES BOITES DE MESSAGE

Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à
un événement, et qui permet
 Soit d'avertir l'utilisateur
 Soit le confronter à un choix
 Soit lui demander de compléter un champ pour récupérer une
information
[Link]()
La méthode alert() permet d'afficher dans une boîte toute simple composée
d'une fenêtre et d'un bouton OK le texte qu'on lui fournit en paramètre. Dès
que cette boîte est affichée, l'utilisateur n'a d'autre alternative que de cliquer
sur le bouton OK.
Syntaxe :
alert (paramètres) ;

[Link]()
La méthode prompt est un peu plus évoluée que les deux
précédentes puisqu'elle fournit un moyen simple de récupérer une
information provenant de l'utilisateur, on parle alors de boîte d'invite. La
méthode prompt() requiert deux arguments :
 le texte d'invite
 la chaîne de caractères par défaut dans le champ de saisie
Syntaxe :
variable = prompt ("texte", "valeur");

[Link]()
La méthode confirm() est similaire à la méthode alert(), si ce n'est qu'elle
permet un choix entre "OK" et "Annuler". Lorsque l'utilisateur appuie sur
"OK" la méthode renvoie la valeur true. Elle renvoie false dans le cas
contraire...
Syntaxe :
variable = confirm ("texte");

POINTS IMPORTANTS À RETENIR

16
En Javascript nous avont 3 boites de message permettant:
 Soit d'avertir l'utilisateur : alert()
 Soit le confronter à un choix : confirm()
 Soit lui demander de compléter un champ pour récupérer une
information : prompt()

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.

EXERCICES D’ASSIMILATION

1- Que permet le code suivant ?

var first, second, result;
first = parseFloat(prompt('Entrez le premier chiffre :'));
second = parseFloat prompt('Entrez le second chiffre :'));
result = first + second;
alert(result);

2- afficher dans une boîte de dialogue le contenu de l’addition de 1 et de 2

multiplié par 3.
3- afficher une concaténation de deux variables correspondant au nom et au
prénom de l’utilisateur en les séparant d’un espace

17
6. LES FONCTIONS

Les fonctions personnelles

6.1.Définition

C’est un groupe d’instruction prédéfini et exécuté lorsqu’il est appelé

et que l’on peut appeler plusieurs fois.

6.2. Déclaration
Syntaxe :
function nom_de_la_fonction (arguments) {
code des instructions
}

[Link] fonctions dans l’en-tête

Il est plus prudent de placer les déclarations de fonctions dans l’en-

tête <head>…</head>.

6.4.L'appel d'une fonction

Syntaxe :
nom_de_la_fonction();

6.5. Fonctions manipulant des valeurs

6.5.1. Passer une valeur à une fonction
Syntaxe :
function nom_de_la_fonction(arg1, arg2, arg3) {
instructions

6.5.2. Retourner une valeur

18
 Une fonction peut retourner une valeur. Il suffit alors de placer le
mot-clé return suivi de la valeur ou de la variable à retourner.

Les fonctions integreés

Quelques fonctions intégrées au langage, et ne dépendant d’aucun
objet.

[Link]()
Cette fonction encode les caractères spéciaux d’une chaîne, selon le
code %xx, et retourne cette chaîne encodée.

Syntaxe :
chaine1 = escape (chaine2)

Exemple 1 :
var chaine = "Voici des caractères spéciaux !" ;
[Link]( escape(chaine) ) ;

[Link]()
Cette fonction décode les caractères spéciaux codé par escape(), et
retourne cette chaîne encodée.

Syntaxe :
chaine1 = escape (chaine2)

Exemple 2 :
var chaine = "Voici des caractères spéciaux !" ;
var chaine2 = escape(chaine) ;
[Link]( unescape(chaine2) ) ;

[Link] ()
Cette fonction convertit une chaîne passée en paramètre en nombre
décimal. Renvoie NaN si la conversion est impossible.

Syntaxe :
19
 decimal = parseFloat (chaine)

Exemple 3 :
var chaine = "Voici des caractères spéciaux !" ;
var chaine2 = "35.7" ;
[Link]( parseFloat(chaine) + "<br/>" ) ;
[Link]( parseFloat(chaine2) ) ;

[Link] ()
Cette fonction convertit une chaîne passée en paramètre en nombre
entier. Renvoie NaN si la conversion est impossible. Le paramètre
facultatif base permet de faire une conversion en une autre base que
décimale.

Syntaxe :
decimal = parseInt (chaine, base)

Exemple 4 :
var chaine = "35.7" ;
[Link]( parseInt(chaine) + "<br/>" ) ;
[Link]( parseInt(chaine, 8) ) ;

[Link] ()
Cette fonction renvoie true si le nombre est fini, sinon, elle renvoie
false.

Syntaxe :
booleen = isFinite (nombre)

Exemple 5 :
var chaine = "35.7" ;
var chaine2 = "Math";
[Link]( isFinite(chaine) + "<br/>") ;
20
 [Link]( isFinite(chaine2) ) ;

[Link] ()
Cette fonction renvoie true si la chaîne n’est pas un nombre, sinon,
elle renvoie false.

Syntaxe :
booleen = isNaN (chaine)

Exemple 6 :
var chaine = "35.7" ;
var chaine2 = "Math";
[Link]( isNaN(chaine) + "<br/>") ;
[Link]( isNaN(chaine2) ) ;

[Link]()
Cette méthode renvoie tout simplement la valeur de l’objet.

Syntaxe :
variable = [Link] ;

Exemple 7 :
var tab = new Array(5);
for (i = 0; i < 5; i++) tab[i] = i + 1;
var s = "string";
[Link] ("Valeur du Tableau : " + [Link]() + "<br/>");
[Link] ("Valeur de la Chaîne : " + [Link]() + "<br/>");

[Link]()
Cette méthode retourne la description de l’objet.

Syntaxe :
variable = [Link] ;

Exemple 8 :

21
var tab = new Array(5);
for (i = 0; i < 5; i++) tab[i] = i + 1;
var s = "string";
[Link] ("Description du Tableau : " + [Link]() + "<br/>");
[Link] ("Description de la Chaîne : " + [Link]() + "<br/>");

22
POINTS IMPORTANTS À RETENIR

 Il existe des fonctions natives, mais il est aussi possible d'en créer,
avec le mot-clé function.
 Les variables déclarées avec var au sein d'une fonction ne sont
accessibles que dans cette fonction.
 Il faut éviter le plus possible d'avoir recours aux variables globales.
 Une fonction peut recevoir un nombre défini ou indéfini de
paramètres. Elle peut aussi retourner une valeur ou ne rien retourner
du tout.

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.

23
EXERCICES D’ASSIMILATION

1- Créer une fonction faire_addition avec le code suivant ?

var first, second, result;
first = parseFloat(prompt('Entrez le premier chiffre :'));
second = parseFloat prompt('Entrez le second chiffre :'));
result = first + second;
return(result);

2- Créer une fonction permetant de calculer et afficher la valeur de la TVA

et du montant TTC, le prix HT est indiqué par l’utilisateur.

7. LES STRUCTURES DE CONTROLE

7.1. La structure séquentielle

Algorithme Code JS
DEBUT {
Instruction1 Instruction1
Instruction2 Instruction2
FIN }

7.2. Les instructions conditionnelles

Ces instructions permettent d’orienter le déroulement du script en fonction
de tests. Par exemple, il est possible de contrôler le contenu d’une variable
et d’exécuter une instruction si le test est respecté (true), ou d’exécuter une
autre instruction, si le résultat du test est faux (false). Ces instructions sont
placées à l’intérieur de structures de contrôles, qui permettent de traiter
tous les cas de figure en fonction de la réponse du test.

7.2.1. L’expression if … else

Algorithme Code JS

24
 SI condition If (condition) {
ALORS Instructions1 Instruction1
SINON Instructions2 }
FINSI else {
Instruction2
}

Exemple
if (age<18) {
alert("Vous devez être majeur");
[Link]="[Link]";
} else {
[Link]="[Link]";
}

7.2.2. L’expression () ? :
Algorithme Code JS
SI condition (condition) ? instruction 1 :
ALORS Instructions1 instruction 2
SINON Instructions2
FINSI

7.3. Les instructions itératives

Les boucles permettent de réaliser des blocs d’instructions à plusieurs

reprises, appelées instructions d’itération. En Javascript, il en existe deux
types, les boucles avec for et les boucles avec while.
7.3.1. L’itération for
Algorithme Code JS
POUR i = valeur initiale A i For (val initiale ; condition ;
= valeur finale incrémentation) {
REPETER instructions Instructions
FIN POUR }
Exemple
for (var i=10; i>0; i=i-1){
[Link]= i+”<br>”;
}
25
 7.3.2. L’itération while
Algorithme Code JS
TANT QUE (condition while (condition) {
vraie) instructions
REPETER instructions }
FIN TANT QUE
Exemple
i=0;
While (i<=100){
[Link]= i +”<br>”;
i=i++;
}
7.5. Interrompre une boucle
7.5.1. L’instruction break
Break permet de quitter les boucles de manière prématurée. L’instruction
break peut aussi renvoyer le déroulement du script vers une étiquette (un
label), c’est à dire à une position identifiée par un nom suivi de deux
points.
L’instruction break ne peut être utilisée qu’à l’intérieur de boucles
imbriquées avec for ou switch.
Le nom de l’étiquette doit suivre les mêmes contraintes de nommage que
les variables (pas d’espace, le nom de l’étiquette doit toujours commencer
par une lettre, etc.).
L’étiquette doit être placée avant l’instruction break et doit être suivie d’un
double point.
7.5.2. L’instruction continue
L’instruction continue permet de ne pas prendre en compte certaines
valeurs qui seraient fausses dans le test, assurant ainsi la poursuite de la
boucle.

26
POINTS IMPORTANTS À RETENIR

 Une condition retourne une valeur booléenne : true ou false.

 De nombreux opérateurs existent afin de tester des conditions et ils
peuvent être combinés entre eux.
 La condition if else est la plus utilisée et permet de combiner les
conditions.
 Quand il s'agit de tester une égalité entre une multitude de valeurs, la
condition switch est préférable.
 Les ternaires sont un moyen concis d'écrire des conditions if else et
ont l'avantage de retourner une valeur.
 L'incrémentation est importante au sein des boucles. Incrémenter ou
décrémenter signifie ajouter ou soustraire une unité à une variable.
Le comportement d'un opérateur d'incrémentation est différent s'il se
place avant ou après la variable.
 La boucle while permet de répéter une liste d'instructions tant que la
condition est vérifiée.
 La boucle do while est une variante de while qui sera exécutée au
moins une fois, peu importe la condition.
 La boucle for est une boucle utilisée pour répéter une liste
d'instructions un certain nombre de fois. C'est donc une variante très
ciblée de la boucle while.

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.

27
EXERCICES D’ASSIMILATION

1- Afficher la valeur d’une réduction obtenue par calcul, en fonction du

montant de la commande saisie dans une boîte de dialogue.
La réduction sera égale à zéro si le montant de la commande n’atteint pas
10 000 Fcfa.
Elle sera égale à 5 % de la commande si celle-ci est comprise entre 10 000
et 25 000 Fcfa et elle sera égale à 10 % au dessus de ce montant.
2- afficher dix fois dans la page le résultat d’une boucle comportant une
variable postincrémentée.
3- Afficher une boîte de dialogue demandant la saisie d’un nombre dont la
valeur doit être positive. Tant qu’une valeur négative ou nulle est saisie, la
boîte de dialogue continue à s’afficher.
4- Créer une fonction permetant de calculer et afficher la factorielle d’un
nombre indiqué.
5- Créer une fonction permetant de calculer et afficher la puisance d’un
nombre.
6- Créer une fonction permetant de calculer et afficher la valeur de la TVA
et du montant TTC, le prix HT est indiqué par l’utilisateur.
7- Ecrire un programme qui affiche une table de multiplicatiion,
l’utilisateur doit pouvoir indiquer la table souhatée.

28
7. LES FORMULAIRES

7.1. Champ de texte

[Link] de texte
<input type=”text” name=”nom” value="valeur" size=x
maxlength=z>

[Link] de texte
<textarea name=”nom” rows=x cols=y>
texte par défaut
</textarea>

[Link] password
<input type=”password” name=”nom” value="valeur"
size=x maxlength=z>

[Link] à sélectionner
[Link] radios
<input type=”radio” name=”nom” value="valeur"> texte

[Link]
<input type=”checkbox” name=”nom” value="valeur">
texte

[Link] de sélection
<select name=”nom” size=x>
<option value="valeur"> texte
</select>

[Link]
[Link] simple
<input type=”button” name=”nom” value=”valeur”>

29
 [Link] reset
<input type=”reset” name=”nom” value=”valeur”>

[Link] submit
<input type=”submit” name=”nom” value=”valeur”>

8. LES EVENEMENTS

Les évènements s’appliquent aux objets présents dans la page : les boutons,
les champs ou les ascenseurs de la fenêtre mais aussi la page en ellemême.
C’est grâce aux évènements que la page devient interactive. Il est possible
d’activer une action lorsqu’un évènement se produit. La syntaxe à suivre
correspond à : évènement= "actionaréaliser" ;
Il suffit, donc, de nommer l’évènement (voir la liste cidessous), de le faire
suivre du signe égal « = » et de rédiger l’action qui doit lui correspondre.
8.1. Le reset
onReset
<input type="reset">
8.2. Le clic de souris
onClick
<input type="button">, <input type="checkbox">, <input type="radio">,
<input type="reset">, <input type="submit">, <a href..>
8.3. Load
onLoad
<body>, <frameset>
8.4. UnLoad
onUnLoad
<body>, <frameset>
8.5. Error
onError
<body>, <frameset>, <img>

30
 8.6. Abort
onAbort
<img>
8.7. MouseOver
onMouseOver
<a href…>, <area href…>
8.8. MouseOut
onMouseOut
<a href…>, <area href…>
8.9. Focus
onFocus
<input type="text">, <select>, <textarea>, <input type="password">
8.10. Blur
onBlur
<input type="text">, <select>, <textarea>, <input type="password">
8.11. Les changements
onChange
<input type="text">, <select>, <textarea>, <input type="password">
8.12. La sélection
onSelect
<input type="text">, <textarea>
8.13. L’envoi
onSubmit
<input type="submit">

Exemple :
afficher une boîte de dialogue, au moment du chargement de la page :
<script >
[Link]=alert("Cette fenêtre s’affiche au moment
du chargement de la page");
</script>

31
POINTS IMPORTANTS À RETENIR

- En JavaScript, on peut accéder à chaque élément d’un formulaire

pour y lire et/ou écrire une valeur, par exemple. Tous ces éléments
renforcent les capacités interactives des pages Web.

- Les gestionnaires d’événement vont apporter l’élément

d’interactivité qui caractérise le JavaScript. Par leur intermédiaire,
les actions du visiteur mettent en oeuvre les outils de programmation
du JavaScript. La gestion de ces événements (déclenchés
généralement par l’internaute) fait le lien entre le langage Xhtml et le
JavaScript.
Il existe de nombreux événements, tous plus ou moins utiles. Voici la liste
des événements principaux, ainsi que les actions à effectuer pour qu'ils se
déclenchent :
Nom de l'événement Action pour le déclencher
Click Cliquer (appuyer puis relâcher) sur l'élément
dblclick Double-cliquer sur l'élément
mouseover Faire entrer le curseur sur l'élément
mouseout Faire sortir le curseur de l'élément
mousedown Appuyer (sans relâcher) sur le bouton gauche de la souris
sur l'élément
mouseup Relâcher le bouton gauche de la souris sur l'élément
mousemove Faire déplacer le curseur sur l'élément
keydown Appuyer (sans relâcher) sur une touche de clavier sur
l'élément
keyup Relâcher une touche de clavier sur l'élément
keypress Frapper (appuyer puis relâcher) une touche de clavier sur
l'élément

32
focus « Cibler » l'élément
blur Annuler le « ciblage » de l'élément
change Changer la valeur d'un élément spécifique aux formulaires
(input, checkbox, etc.)
select Sélectionner le contenu d'un champ de texte (input, textarea,
etc.)

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.

33
EXERCICES D’ASSIMILATION

1- Contrôler si un champ Text est vide par une fonction lancée après un clic
sur bouton, puis afficher un message d’avertissement dans une boîte de
dialogue.
2- Afficher une boîte de dialogue demandant la saisie d’un nombre dont la
valeur doit être positive. Tant qu’une valeur négative ou nulle est saisie, la
boîte de dialogue continue à s’afficher.
3- Créer un formulaire permetant de calculer et afficher la factorielle d’un
nombre indiqué.
4- Créer un formulaire permetant de calculer et afficher la puisance d’un
nombre.
5- Créer un formulaire permetant de calculer et afficher la valeur de la
TVA et du montant TTC, le prix HT est indiqué par l’utilisateur.

34
9. MANIPULER DU CODE HTML

Le Javascript est un langage qui permet de créer ce que l'on appelle des
pages DHTML. Ce terme désigne les pages Web qui modifient elles-
mêmes leur propre contenu sans charger de nouvelle page. C'est cette
modification de la structure d'une page.
Le Document Object Model (abrégé DOM) est une interface de
programmation pour les documents XML et HTML. Le DOM est donc une
API qui s'utilise avec les documents XML et HTML, et qui va nous
permettre, via le Javascript, d'accéder au code XML et/ou HTML d'un
document. C'est grâce au DOM que nous allons pouvoir modifier des
éléments HTML (afficher ou masquer un <div> par exemple), en ajouter,
en déplacer ou même en supprimer.

L'OBJET WINDOW
Avant de véritablement parler du document, c'est-à-dire de la page Web,
nous allons parler de l'objet window. L'objet window est ce qu'on appelle
un objet global qui représente la fenêtre du navigateur. C'est à partir de cet
objet que le Javascript est exécuté.
Contrairement à ce qui a été dit dans ce cours, alert() n'est pas vraiment une
fonction. Il s'agit en réalité d'une méthode appartenant à l'objet window.
Mais l'objet window est dit implicite, c'est-à-dire qu'il n'y a généralement
pas besoin de le spécifier. Ainsi, ces deux instructions produisent le même
effet, à savoir ouvrir une boîte de dialogue :
[Link]('Hello world!');
alert('Hello world!');

9.1. Les propriétés de window

Toutes ces propriétés correspondent à des éléments de la fenêtre

ouverte. Elles permettent de changer quelques détails sympathiques dans le

35
visuel d’une page web. Pour y accéder, on suit la syntaxe habituelle d’un
objet.

Syntaxe :
[Link]été;

 defaultStatus : le texte par défaut affiché dans la barre d’état.

 status : le texte à afficher dans la barre d’état, prioritaire par rapport à
defaultStatus.
 name : le nom de la fenêtre
 screenTop : ordonnée du point supérieur gauche de la fenêtre.
 screenLeft : abscisse du point supérieur gauche de la fenêtre.
 closed : booléen indiquant si la fenêtre est fermée.

9.2. Les méthodes de window

9.2.1. Généralités

L’objet window possède de nombreuses méthodes, dont certaines

que nous avons déjà vu précédemment – les boîtes de dialogue -, et qui
peuvent offrir quelques atouts à votre page web. La plupart renvoient une
valeur à la variable qui appelle la fonction.

Syntaxe:
variable = window.méthode();

Certaines propriétés ne nécessitent pas de préciser le suffixe window.

pour fonctionner. C’est notamment le cas des boites de dialogue.

9.2.2. Liste des méthodes

 alert (‘texte’) : boite de message avec un bouton unique.
 prompt (‘texte’, ‘valeur_défaut’) : boite d’invite avec un texte
informatif et une zone de texte avec une valeur par défaut facultative.
 confirm (‘texte’) : boite de confirmation avec un texte informatif et
deux boutons « OK » et « annuler ».
 print (‘texte’) : afficher le texte dans la page.
 open (‘URL’, ‘nom’, options) : ouvre une page pop-up avec les
caractéristiques données en paramètres.
36
  close () : ferme la fenêtre.
 focus () : donne le focus à la page.
 blur () : enlève le focus à la page.
 moveBy (x,y) : déplacement relatif du coin supérieur gauche de la
fenêtre.
 moveTo (x,y) : déplacement absolu du coin supérieur gauche de la
fenêtre.
 resizeBy (x,y) : redimensionnement relatif de la fenêtre.
 resizeTo (x,y) : redimensionnement absolu de la fenêtre.
 scrollBy (x,y) : scroll relatif.
 scrollTo (x,y) : scroll absolu.
 setTimeOut (‘fonction’, temps) : déclenche une minuterie en
millisecondes.
 clearTimeout(‘timer’) : suspend la minuterie.
 stopTimeOut (‘timer’) : arrête une minuterie.
 setInterval(code, délai) : exécute le code – sous forme de String -
passé en paramètre à chaque fois que le délai est écoulé.
 clearInterval(timer) : arrête la minuterie définie avec setInterval().
 stop() : arrête le chargement de la page.
 home() : ouvre la page de démarrage de l’internaute.

9.3. Les objets de window

L’objet window contient plusieurs autres objets assez réduits que je
présente dans cette partie.

Syntaxe :
variable = [Link]été ;
variable = [Link].méthode() ;

9.3.1.L’objet parent
Il s’agit de la page principale, qui contient la déclaration de tous les
frames. Il possède les mêmes attributs que l’objet window.

Syntaxe :
variable = [Link].méthode() ;
variable = [Link]été ;

37
 9.3.2.L’objet top
Il s’agit de la page de plus haut niveau. Il possède les mêmes attributs que
l’objet window.

Syntaxe :
variable = [Link].méthode() ;
variable = [Link]été ;

9.3.3.L’objet opener

Il s’agit de la page responsable de l’ouverture de la page courante. Il

possède les mêmes attributs que l’objet window.

Syntaxe :

variable = [Link].méthode() ;
variable = [Link]été ;
9.3.4.L’objet history

Il s’agit de l’historique des pages consultées. Il possède une propriété

et 3 méthodes. Voici la propriété et les méthodes de cet objet, qui se
déclarent selon la syntaxe objet.

Syntaxe :

variable = [Link].méthode() ;
variable = [Link]été ;

 length : le nombre d’entrées de l’historique.

 back () : permet de retourner à la page précédente.
 forward () : permet d’aller à la page suivante.
 go (numéro) : permet d’aller à la page du numéro passé en
paramètre.
9.3.5. L’objet location
Il s’agit de toutes les informations contenues dans l’URL de la page
en cours. Voici la propriété et les méthodes de cet objet, qui se déclarent

38
selon la syntaxe objet. L’objet [Link] renvoie l’URL complète de
la page en cours.

Syntaxe :

variable = [Link].méthode() ;
variable = [Link]été ;

Les propriétés suivantes renvoient des informations plus précises

concernant l’URL. Je ne précise pas à quoi elle renvoie exactement car ce
n’est pas très utile dans ce cours.

 hash
 host
 hostName
 pathName
 href
 port
 protocole
 search : renvoie la partie de l’URL située après le « ? ».

Il existe deux propriétés de l’objet [Link], qui concernent

toutes deux le rechargement de la page.

 reload () : recharge la page. Ne fonctionne pas sous tous les

navigateurs.
 replace (page) : recharge la page en cours sans modifier l’historique.

39
9.4 Le document
L'objet document est un sous-objet de window, l'un des plus utilisés. Et
pour cause, il représente la page Web et plus précisément la balise <html>.
C'est grâce à cet élément-là que nous allons pouvoir accéder aux éléments
HTML et les modifier.

9.4.1 Accéder aux éléments

L'accès aux éléments HTML via le DOM est assez simple mais demeure
actuellement plutôt limité. L'objet document possède trois méthodes
principales : getElementById(), getElementsByTagName() et
getElementsByName().
getElementById()
Cette méthode permet d'accéder à un élément en connaissant son ID qui est
simplement l'attribut id de l'élément. Cela fonctionne de cette manière :

Exemple :
<div id="myDiv">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
var div = [Link]('myDiv');
alert(div);
</script>

getElementsByTagName()
Cette méthode permet de récupérer, sous la forme d'un tableau, tous les
éléments de la famille.
La méthode retourne une collection d'éléments (utilisable de la même
manière qu'un tableau). Pour accéder à chaque élément, il est nécessaire de
parcourir le tableau avec une petite boucle.
40
getElementsByName()
Cette méthode est semblable à getElementsByTagName() et permet de ne
récupérer que les éléments qui possèdent un attribut name que vous
spécifiez. L'attribut name n'est utilisé qu'au sein des formulaires, et est
déprécié depuis la spécification HTML5 dans tout autre élément que celui
d'un formulaire. Par exemple, vous pouvez vous en servir pour un élément
<input> mais pas pour un élément <map>.
Sachez aussi que cette méthode est dépréciée en XHTML mais est
maintenant standardisée pour l'HTML5.

9.4.2 Accéder aux éléments grâce aux technologies récentes

Ces deux méthodes sont querySelector() et querySelectorAll() et ont pour
particularité de grandement simplifier la sélection d'éléments dans l'arbre
DOM grâce à leur mode de fonctionnement. Ces deux méthodes prennent
pour paramètre un seul argument : une chaîne de caractères.

Exemple

CSS:
#menu .item span
Voyons maintenant les particularités de ces deux méthodes. La première,
querySelector(), renvoie le premier élément trouvé correspondant au
sélecteur CSS, tandis que querySelectorAll() va renvoyer tous les éléments
(sous forme de tableau) correspondant au sélecteur CSS fourni. Prenons un
exemple simple :

Code HML

<div id="menu">
<div class="item">

41
 <span>Élément 1</span>
<span>Élément 2</span>
</div>
<div class="publicite">
<span>Élément 3</span>
<span>Élément 4</span>
</div>
</div>
<div id="contenu">
<span>Introduction au contenu de la page...</span>
</div>

Code Javascript
var query = [Link]('#menu .item span'),
queryAll = [Link]('#menu .item span');
alert([Link]); // Affiche : "Élément 1"
alert([Link]); // Affiche : "2"
alert(queryAll[0].innerHTML + ' - ' +
queryAll[1].innerHTML); //
Affiche : "Élément 1 - Élément 2"

9.4.3 Le contenu : innerHTML

La propriété innerHTML est spéciale et demande une petite introduction.
Elle a été créée par Microsoft pour les besoins d'Internet Explorer et vient
tout juste d'être normalisée au sein du HTML5. Bien que non normalisée
pendant des années, elle est devenue un standard parce que tous les
navigateurs supportaient déjà cette propriété, et pas l'inverse comme c'est
généralement le cas.

42
Récupérer du HTML
innerHTML permet de récupérer le code HTML enfant d'un élément sous
forme de texte. Ainsi, si des balises sont présentes, innerHTML les
retournera sous forme de texte :
exemple :

<body>
<div id="myDiv">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
var div = [Link]('myDiv');
alert([Link]);
</script>
</body>

Ajouter ou éditer du HTML

Pour éditer ou ajouter du contenu HTML, il suffit de faire l'inverse, c'est-à-
dire de définir un nouveau contenu :
Exemple :
[Link]('myDiv').innerHTML = '<blockquote>Je mets
une citation à la place du paragraphe</blockquote>';

43
POINTS IMPORTANTS À RETENIR

- Le DOM va servir à accéder aux éléments HTML présents dans un

document afin de les modifier et d'interagir avec eux.
- L'objet window est un objet global qui représente la fenêtre du navigateur.
document, quant à lui, est un sous-objet de window et représente la page
Web. C'est grâce à lui que l'on va pouvoir accéder aux éléments HTML de
la page Web.
- Les éléments de la page sont structurés comme un arbre généalogique,
avec l'élément <html> comme élément fondateur.
-Différentes méthodes, comme getElementById(),
getElementsByTagName(), querySelector() ou querySelectorAll(), sont
disponibles pour accéder aux éléments.
- Les attributs peuvent tous être modifiés grâce à setAttribute(). Certains
éléments possèdent des propriétés qui permettent de modifier ces attributs.
- La propriété innerHTML permet de récupérer ou de définir le code
HTML présent à l'intérieur d'un élément.

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.

44
EXERCICES D’ASSIMILATION

1- Contrôler si un champ Text est vide par une fonction lancée après un clic
sur bouton, puis afficher un message d’avertissement dans une boîte de
dialogue.
2- Afficher une boîte de dialogue demandant la saisie d’un nombre dont la
valeur doit être positive. Tant qu’une valeur négative ou nulle est saisie, la
boîte de dialogue continue à s’afficher.
3- Créer un formulaire permetant de calculer et afficher la factorielle d’un
nombre indiqué.
4- Créer un formulaire permetant de calculer et afficher la puisance d’un
nombre.
5- Créer un formulaire permetant de calculer et afficher la valeur de la
TVA et du montant TTC, le prix HT est indiqué par l’utilisateur.
6- L’exercice consiste à faire un bouton dont la valeur s’incrémente à
chaque clic.

45
10. L’OBJET ARRAY

Les tableaux sont des éléments indispensables de la programmation dans

tous les langages.
Un tableau est une structure ordonnée contenant des informations,
accessibles et manipulables facilement.
10.1. Création et affectation d’un tableau
Syntaxe :

variable = new Array(x) ;

variable [i] = y; // affectation
alert (variable [i]) ; //Accès aux données

Exemple
var MonTableau = new Array (2) ;
MonTableau [0] = 7 ;
MonTableau [1] = 4 ;

var tableau_associa={
"valeur1":10,
"valeur2":55,
"valeur3":30
};
Affectation multiple

var MonTableau = new Array (5) ;

for ( var i = 0 ; i < 5 ; i++) {
MonTableau [i] = i;
[Link] (MonTableau[i]);
}
Accès aux données d’un tableau
var MonTableau = new Array (2) ;
MonTableau [0] = 7 ;
var element = MonTableau [0] ;
46
 [Link] (MonTableau [0]) ;

var tableau_associa={
"valeur1":10,
"valeur2":55,
"valeur3":30
};

alert(tableau_associa.valeur2);

[Link] à 2 dimensions
Il est donc possible de créer des tableaux de tableaux, ce qui correspond à
des tableaux à plusieurs dimensions. Le nombre de dimensions d'un tableau
n'est pas limité.

Syntaxe:

variable = new Array (x) ;

variable [i] = new Array (y) ;

Exemple

var MonTableau = new Array (2) ;

MonTableau [0] = new Array (7) ;

Il est bien entendu plus rapide d’utiliser une instruction itérative pour
créer ce tableau à 2 dimensions.

var MonTableau = new Array (5) ;

for ( var i = 0 ; i < 5 ; i++) {
MonTableau [i] = new Array (3);
}

47
 [Link]étés et méthodes
[Link]été
Syntaxe :

variable = new Array (x) ;

y = [Link] ;

10.3.2.Méthodes
L’objet Array possède plusieurs méthodes qui permettent de manier les
éléments du tableau.

Syntaxe :

tableau.méthode() ;

 join (séparateur) : regroupe tous les éléments du tableau en une seule

chaîne. Chaque élément est séparé par un séparateur. Ci celui-ci n’est
pas précisé, ce sera une virgule.
 reverse () : inverse l’ordre des éléments sans les trier.
 sort () : Renvoie les éléments par ordre alphabétique, s’ils sont de
même nature.
 concat(tableau) : concatène le tableau passé en paramètre avec celui
de la méthode.
 pop() : supprime le dernier élément du tableau.
 push(élément1,…) : ajoute l(es) élément(s) passé(s) en paramètre à la
fin du tableau.
 shift() : supprime le premier élément du tableau.
 slice(début,fin) : renvoie les éléments contenus entre la position
supérieure ou égale à début et inférieure à fin.
 splice(début, nombre, éléments) : supprime les éléments à partir de la
position début et sur nombre de position. Les éléments sont
remplacés par ceux fournis en paramètre (facultatif).
 unshift(élément1,…) : ajoute l(es) élément(s) passé(s) en paramètre
au début du tableau.

Exemple :

var MonTableau = new Array (4) ;

48
MonTableau [0] = “Janvier” ;
MonTableau [1] = “Février” ;
MonTableau [2] = “Mars” ;
MonTableau [3] = “Avril” ;
[Link]() ;
[Link] ([Link](‘ ‘)) ;
[Link]() ;
[Link] ("<br>" + [Link](‘ ‘)) ;

49
POINTS IMPORTANTS À RETENIR

- Un tableau, en Javascript, est une variable pouvant contenir plusieurs

données indépendantes, indexées par un numéro, appelé indice.
- L'indice d'un tableau est ainsi l'élément permettant d'accéder aux données
qui y sont stockées.
- L'objet global Array est utilisé pour créer des tableaux.
- En JavaScript, comme dans la plupart des langages de programmation, le
premier élément du tableau commence à l'indice 0.
- Il est possible d'utiliser des indices personnalisés pour indexer des
valeurs, on parle alors de tableau associatif.
-L’objet Array possède plusieurs méthodes qui permettent de manier les
éléments du tableau.
- Pour parcourir un tableau, on utilise généralement une boucle for,
puisqu'on connaît, grâce à la propriété length, le nombre d'items du tableau.
- Pour concaténer deux tableaux, il faut utiliser la méthode concat(), car
l'opérateur + ne fonctionne pas selon le comportement voulu.
- La méthode forEach() permet de parcourir un tableau en s'affranchissant
d'une boucle for.

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.

50
EXERCICES D’ASSIMILATION

1- Le but de l’exercice est d’afficher les entiers compris entre 1 et 10 inclus

dans l’ordre décroissant. Vous utiliserez pour cela un tableau de 10
éléments.

2- Ecrire un programme permattant de faire le classement dans une matiere

donnée. La classe contient un nombre d’éleve qui sera indiqué par
l’utilisateur. Chaque éleve à 3 notes dans cette matiere. Les noms de éleves
ainsi que leurs notes seront saisies pas l’utilisateur.

3- Realiser le tableau suivant en javascript.

Indice 1 2 3 4 5 6 7

Contenu Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche

4- Créer le tableau multidimensionnel suivant en javascript:

0 1 2 3

donnée donnée 2 (tableau) donnée donnée 4 (tableau)

1 3
(variable) 0 1 2 (variable) 0 1

donnée donnée donnée donnée donnée

1 2 3 1 2

11. L’OBJET NAVIGATOR

Il s’agit – comme son nom l’indique – de votre navigateur, ou votre

browser. Les deux principaux sont sûrement Microsoft Internet Explorer et
Netscape. L’objet navigator possède toutes les caractéristiques de votre
navigateur ainsi que certaines de votre ordinateur. Cela peut s’avérer utile
pour tester la compatibilité de certains codes avec un browser.
51
 L’objet navigator étant intégré dans le langage, il n’est pas nécessaire
de créer une instance de cette classe.

11.1. Les propriétés de navigator

Toutes ces propriétés ne font que donner des informations sur votre
type de navigateur. Pour y accéder, on suit la syntaxe habituelle d’un objet.

Syntaxe :

variable = [Link]été ;

Les propriétés qui suivent fonctionnent sous tous les navigateurs. Les
compatibilités ne seront évoqués que pour Netscape et Internet Explorer.

 appCodeName : nom de code du navigateur.

 appName : nom complet du navigateur.
 appVersion : numéro de version du navigateur ainsi que d’autres
informations de plate-forme.
 userAgent : informations de appCodeName et de appVersion réunies.

12. L’OBJET MATH

12.1. Fonctions
Les fonctions mathématiques usuelles ont été transcrites en langage JS à
travers l’objet Math. La plupart des fonctions s’utilisent selon la même
syntaxe.

Syntaxe :
var1 = [Link](paramètres) ;

12.1.1. Fonctions diverses

 abs(x) : renvoie la valeur absolue de x.

52
  ceil(x) : renvoie l’entier supérieur à x.
 floor(x) : renvoie l’entier inférieur à x.
 round(x) : renvoie l’entier le plus proche de x.
 max(x,y) : renvoie le plus grand nombre entre x et y.
 min(x,y) : renvoie le plus petit nombre entre x et y.
 pow(x,y) : renvoie le nombre x à la puissance y.
 random(x,y) : renvoie un nombre aléatoire entre 0 et 1.
 sqrt(y) : renvoie la racine carrée de x.

12.1.2. Fonctions trigonométriques

 sin(x)
 asin(x)
 cos(x)
 acos(x)
 tan(x)
 atan(x)
 exp(x)
 log(x)

12.2. Constantes
 [Link]
 math.LN2
 math.LN10
 math.E
 math.LOG2E
 math.LOG10E

12.3. Simplification
Si vous utilisez beaucoup l’objet math, l’écriture deviendra vite pénible. Il
est possible de ne pas avoir à écrire le mot "math" à chaque fois. Il suffit
d’encadrer la zone de code par des accolades et l’expression with(math).

with (math) {
code...
}

Exemple :

with (Math) {

53
 x = sqrt (238) ;
y = sin (x) ;
[Link](y) ;
}

POINTS IMPORTANTS À RETENIR

- L’objet Math permet d’utiliser les fonctions mathématiques usuelles.

- with (math) permet une ecriture simplifiée lorsque nous travaillons avec
l’objet math.

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.

54
EXERCICES D’ASSIMILATION

L’exercice consiste à afficher la racine carrée de tous les x entiers, compris

dans [0 ; 20].
Le résultat doit être arrondi à l’entier.

55
13. L’OBJET STRING
Un objet string est une chaîne de caractères. Il possède une propriété et 7
méthodes. Cet classe permet la manipulation des caractères qui s’avère
très utile en JS. Il est à préciser que l’objet string ne se construit pas comme
les autres objets. Une chaîne de caractère est en soi un objet string.
13.1. La propriété length
Syntaxe :
variable1 = [Link] ;
variable = (“chaine”).length ;

Exemple
x = "Mon château" ;
y = [Link] ;
[Link](y) ;

13.2. Quelques méthodes

 CharAt () : Cette méthode renvoie le caractère situé à la position x
fournie en paramètre. Le numéro de la position est compris entre 0 et
la longueur de la chaîne –1.

x = "Mon Château" ;
y = [Link](4) ;
[Link](y) ;

 IndexOf ():Cette méthode renvoie la première position d’une chaîne

partielle dans une autre chaîne en partant de gauche, à partir de la
position x indiquée en paramètre. Si elle n’est pas présente, la
méthode renvoie –1. Le numéro de la position est compris entre 0 et
la longueur de la chaîne –1.

x = "maman" ;
y = [Link]("ma",0) ;
[Link](y) ;

 LastIndexOf ():Cette méthode renvoie la première position d’une

chaîne partielle dans une autre chaîne en partant de gauche, à partir
de la position x indiquée en paramètre. Si elle n’est pas présente, la
56
 méthode renvoie –1. Le numéro de la position est compris entre 0 et
la longueur de la chaîne –1.

x = "maman" ;
y = [Link]("ma",4) ;
[Link](y) ;

 Substring ():Cette méthode renvoie la sous-chaîne comprise entre les

positions x et y indiquées en paramètres, dans la chaîne principale.

x = "maman" ;
y = [Link](1,3) ;
[Link](y) ;

 Substr () : Cette méthode renvoie le texte une sous-chaîne de la

String de la méthode, à partir du début et sur n caractères.

y = "lepape@[Link]";
[Link]([Link](5,2)) ;

 Slice () : Equivalent à substring(). La fin est facultative.

y = "lepape@[Link]";
[Link]([Link](7)) ;

 Split () : Cette méthode renvoie un tableau de sous-chaînes

découpées selon le séparateur passé en paramètres.

x = "lepape@[Link]" ;
y = [Link]("@") ;
[Link](y[0] + "<br>" + y[1]) ;

 Concat () : Cette méthode renvoie la concaténation de la chaîne

passée en paramètre avec celle de la méthode.

x = "Ecrivez-moi à " ;
y = "lepape@[Link]";
z = [Link](y) ;
[Link](z) ;

57
 ToLowerCase ():Cette méthode renvoie la chaîne avec tous les
caractères en minuscules

x = "MAMAN" ;
y = [Link]() ;
[Link](y) ;

 ToUpperCase ():Cette méthode renvoie la chaîne avec tous les

caractères en majuscules
x = "Maman" ;
y = [Link]() ;
[Link](y) ;

13.3. Caractères spéciaux

Affichage
Caractère
\b touche de suppression

\f formulaire plein

\n retour à la ligne

\r appui sur la touche ENTREE

\t tabulation

\" guillemets

\' apostrophes

\\ caractère antislash

58
POINTS IMPORTANTS À RETENIR

 Il existe des objets et des types primitifs. Si leur utilisation semble

identique, il faut faire attention lors des tests avec les
opérateurs instanceof et typeof. Mais heureusement valueOf() sera
d'une aide précieuse.
 Il est préférable d'utiliser les types primitifs, comme nous le faisons
depuis le début de ce cours.
 String fournit des méthodes pour manipuler les caractères : mettre en
majuscule ou en minuscule, récupérer un caractère grâce à sa
position et supprimer les espaces de part et d'autre de la chaîne.
 String fournit aussi des méthodes pour rechercher, couper et extraire.
 L'utilisation du caractère tilde est méconnue, mais peut se révéler
très utile en couple avec indexOf() ou lastIndexOf().

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.

59
EXERCICES D’ASSIMILATION

1- Créer un formulaire avec un bouton et une zone de texte. L’internaute

entre une série de mots séparés par des espaces. Ensuite, on récupère ces
mots, et on les sépare par des virgules. Enfin, on les affiche à l’écran avec
[Link]().

60
14.L’OBJET DATE

[Link]
 getYear() : Retourne les 2 derniers chiffres de l’année. Il faudra donc
rajouter le préfixe "20".
 getFullYear() : Retourne la date sur 4 chiffres.
 getMonth() : Retourne le mois sous la forme d’un entier compris
entre 0 et 11.
 getDate() : Retourne le jour du mois sous forme d’un entier compris
entre 1 et 31.
 getDay() : Retourne le jour de la semaine sous forme d’un entier
compris entre 0 et 6.
 getHours() : Retourne l’heure sous forme d’un entier compris entre 0
et 23.
 getMinutes() : Retourne les minutes sous forme d’un entier compris
entre 0 et 59.
 getSeconds() : Retourne les secondes sous forme d’un entier compris
entre 0 et 59.
 getMilliseconds() : retourne les millisecondes de la date. A ne pas
confondre avec getTime().
[Link]
 setYear() : Assigne les 2 derniers chiffres de l’année, sous forme
d’un entier supérieur à 1900.
 setYear() : Assigne l’année sur 4 chiffres.
 setMonth() : Assigne le mois sous la forme d’un entier compris entre
0 et 11.
 setDate() : Assigne le jour du mois sous forme d’un entier compris
entre 1 et 31.
 setDay() : Assigne le jour de la semaine sous forme d’un entier
compris entre 0 et 6.
 setHours() : Assigne l’heure sous forme d’un entier compris entre 0
et 23.
 setMinutes() : Assigne les minutes sous forme d’un entier compris
entre 0 et 59.
 setSeconds() : Assigne les secondes sous forme d’un entier compris
entre 0 et 59.
 setMilliseconds() : assigne les millisecondes de la date. A ne pas
confondre avec setTime().

61
 14.3.L’heure
 getTime() : Renvoie l’heure courante sous forme d’un entier
représentant le nombre de millisecondes depuis le 1er janvier 1970
00h 00min 00s.
 getTimezoneOffset() : Renvoie la différence entre l’heure locale et
l’heure GMT sous forme d’un entier en minutes.
 setTime() : Assigne l’heure courante sous forme d’un entier
représentant le nombre de millisecondes depuis le 1er janvier 1970
00h 00min 00s.
 toGMTString() : Renvoie la valeur actuelle de la variable Date en
heure GMT.
 toLocaleString() : Renvoie la valeur actuelle de l’heure de la variable
Date. C’est plus rapide que de combiner getHours(), getMinutes(), et
getSeconds().

Exemple
Le but de cet exemple est d’afficher une horloge dans une ligne de
texte. Pour cela, on utilise la méthode [Link](), qui rappelle la
fonction d’affichage toute les secondes.

<HTML>
<HEAD>
<script language="Javascript">
function GetTime () { //la fonction que l’on doit appeler
var time = new Date (); // objet Date()
var hours = [Link](); //on récupère les heures
var min = [Link](); //on récupère les minutes
var sec = [Link](); //on récupère les secondes
if (hours < 10) hours = "0" + hours; //on rajoute un 0
if (min < 10) min = "0" + min; //si le chiffre est
if (sec < 10) sec = "0" + sec; //inférieur à 10
// affichage de l’heure dans une zone de texte
[Link] = hours + ":" + min + ":" + sec;
[Link]('GetTime()',1000); /* le timer rappelle la
fonction toutes les secondes */
}
</script>
</HEAD>
<BODY onLoad="GetTime();">
<form name="time">
62
Voici l'heure :
<!-- la zone de texte qui sert à l’affichage -->
<center><input type="text" name="heure" value="" size=6></center>
</form>
</BODY>
</HTML>

63
POINTS IMPORTANTS À RETENIR

 Le JavaScript se base sur un timestamp exprimé en millisecondes

pour calculer les dates. Il faut faire attention, car un timestamp est
parfois exprimé en secondes, comme au sein du système Unix ou
dans des langages comme le PHP.
 En instanciant, sans paramètres, un objet Date, ce dernier contient la
date de son instanciation. Il est ensuite possible de définir une autre
date par le biais de méthodes ad hoc.
 Date est couramment utilisé pour déterminer le temps d'exécution
d'un script. Il suffit de soustraire le timestamp du début au timestamp
de fin.
 Plusieurs fonctions existent pour créer des délais d'exécution et de
répétition, ce qui peut être utilisé pour réaliser des animations.

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.

64
EXERCICES D’ASSIMILATION

- Écrivez une fonction Javascript affichant le délai (en jours, heures et

minutes) qui reste avant le prochain réveillon de Noel. Attention, le
script peut être exécuté le 28 décembre, et doit fonctionner
correctement.

- Écrivez une fonction Javascript qui emploie un formulaire qui permet

de choisir une date quelconque à travers une boîte de sélection pour le
jour et le mois, et deux boîtes de saisie pour l'année. Rajouter un
bouton "Calculer" qui permet d'appeler une fonction qui calcule et
affiche le nombre de jours qui séparent la date actuelle de la date
choisie par l'utilisateur.

65
15. LES COOKIES
Les cookies sont très utilisés, par tous les sites commerciaux et par de plus
en plus de sites d'information. La raison est simple. Un cookie permet
de stocker de manière permanente des informations sur le poste du
visiteur, qui pourront être récupérées lors des futures visites.
Voyons quelques unes des principales informations stockées dans les
cookies :
 Le nombre de visites, la date de la dernière visite, ...
 L'identifiant de la session de l'utilisateur
 Un identifiant et un mot de passe crypté pour une reconnaissance
automatique du visiteur
 Une liste de mots-clés utilisés dans les moteurs de recherche pour
cibler les publicités à afficher
 Une liste de paramètres de préférences de navigation pour
personnaliser la page présentée

15.1. Créer un cookie

[Link] = "variable = contenu ; expires = date ; path = nom ;
domain = domaine ; secure = true/false" ;

 Le champ information : il s’agit de ce que vous voulez stocker dans

le cookie. Il faut définir un nom à la variable et lui affecter une
valeur, un contenu. Comme on peut le voir ci-dessus, les champs
sont séparés par des points-virgule, il ne faut donc pas insérer des
« ; » dans le contenu.
 expires : contient la date d’expiration, à laquelle le cookie sera
détruit. La valeur est en secondes. Le plus simple consiste à utiliser
un objet Date.
 path : le chemin de la page qui a créé le cookie.
 domain : le domaine de la page qui a créé le cookie.
 secure : booléen qui indique si le cookie doit utiliser le protocole
HTTP (false) ou le protocole sécurisé HTTPS (true).

15.2. Récupérer un cookie

66
 variable = [Link] ;

15.3. Modifier un cookie

Modifier un cookie est aussi simple que de le créer. En réalité, il
suffit de le recréer avec un contenu différent et une date actualisée.

15.4. Supprimer un cookie

Pour supprimer un cookie, il faut tout simplement le recréer, avec la

même valeur pour éviter de se compliquer les choses, et lui donner une date
d’expiration passée. Sinon, il suffit d’attendre sa date d‘expiration, ce qui
n’est pas toujours satisfaisant.
15.5. La sécurité des cookies
On a vu que toutes les informations contenues dans les cookies du visiteur
naviguent entre le navigateur et le serveur web. Il ne faut donc pas stocker
dans les cookies de données sensibles comme un mot de passe non crypté
car il est possible que ces données soient interceptées. Cela peut être
facilement le cas dans les reseaux wifi des lieux publics ou des hôtels dont
la clé est largement diffusée.
C'est en partie pour cette raison que Google incite à passer son site en
protocole https qui crypte toutes les transmissions entre le navigateur et le
serveur, empêchant l'interception des données sur les différents réseaux du
chemin reliant le navigateur à l'hébergeur du serveur.

67
POINTS IMPORTANTS À RETENIR

 Un cookie permet de stocker de manière permanente des

informations sur le poste du visiteur
 Il est préférable d'utiliser les types primitifs, comme nous le faisons
depuis le début de ce cours.
 String fournit des méthodes pour manipuler les caractères : mettre en
majuscule ou en minuscule, récupérer un caractère grâce à sa
position et supprimer les espaces de part et d'autre de la chaîne.
 String fournit aussi des méthodes pour rechercher, couper et extraire.
 L'utilisation du caractère tilde est méconnue, mais peut se révéler
très utile en couple avec indexOf() ou lastIndexOf().

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375pages
- Thierry Templier,Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles ,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI 1998, 402 pages
- Emmanuel GUTIERREZ , JavaScript Des fondamentaux aux concepts
avancés,2008, 189 pages

68
EXERCICES D’ASSIMILATION

Créer un formulaire avec un bouton et une zone de texte. L’internaute entre

une série de mots séparés par des espaces. Ensuite, on récupère ces mots, et
on les sépare par des virgules. Enfin, on les affiche à l’écran avec
[Link]().

69
16. LES EXPRESSION REGULIERES

16.1. Définition
Elles permettent de réaliser des traitements sur les chaînes de caractères.
Ces traitements sont de l’ordre de la recherche de caractères, de l’extraction
de sous-chaînes… beaucoup d’autres traitements existent qu’il revient à
vous d’imaginer et de créer. En réalité, une expression régulière possède un
motif, qui est une suite de caractères ordonnés selon un ordre, un nombre
d’apparitions, une non-apparition…

Une expression régulière est avant tout un objet RegExp. Comme

tout objet, il se déclare ainsi :

var reg = RegExp (pattern, option);

Comme vous l’avez sûrement remarqué, pour la première fois, il faut

fournir des paramètres au constructeur. Ces paramètres concernent
l’expression régulière que vous utilisez. Le pattern est le motif de
l’expression. L’option est une chaîne de caractères, qui – comme son nom
l’indique – contient les options de l’expression régulière.
Il existe aussi une autre façon de déclarer une expression régulière.
Elle est moins utilisée et surtout moins claire.

var reg = /pattern/option;

16.2. Paramètres d’une expression régulière

16.2.1. L’option
La chaîne option peut prendre 4 valeurs. La première est la chaîne vide "",
qui signifie l’absence d’option. Les 3 autres valeurs sont détaillées ci-
dessous.

 "g" : la recherche est globale – sur toute la chaîne -.

 "i" : ne pas tenir compte de casse – majuscules/minuscules- .
 "gi" : les deux options réunies

16.2.2. Le pattern
Il faut savoir que le pattern correspond aux caractères que vous cherchez –
pour une raison ou une autre – dans une chaîne.
70
 La chaîne pattern est extensible à l’infini. Le choix de ce qu’elle
contient vous appartient. Il s’agit du motif de la chaîne, c’est-à-dire des
caractères que vous choisirez d’inclure ou d’exclure de votre recherche.
Cette chaîne pattern contient des caractères spéciaux concaténés. Ces
caractères spéciaux concernent le motif lui-même, le caractère à rechercher,
le nombre d’occurrences, le groupe de caractères cherché… Leur liste se
trouve dans le Tableau

Motif
Signification
^ Début du pattern – de la chaîne.

$ Fin du pattern. Interdit tout caractère après.

. N’importe quel caractère.

a|b Caractère a OU b.

* Caractère précédent présent 0 à x fois.

+ Caractère précédent présent 1 à x fois.

? Caractère précédent présent 0 à 1 fois.

{x} Caractère précédent présent x fois.

{x,} Caractère précédent présent au moins x fois.

{x,y} Caractère précédent présent au entre x et y fois.

Groupe de caractères : n’importe lequel contenu entre les

[abc]
crochets.

[a-z] N’importe quel caractère alphabétique.

[^a-z] Aucun caractère alphabétique.

71
 \\ Caractère « \ ».

\d Tous les chiffres – équivalent de [0-9] - .

\D Aucun chiffre – équivalent de [^0-9] -.

\b Limites des mots (espace, tab, …).

Tous les caractères d’espacements – équivalent de

\s
[\v\r\n\t\f] -.

Aucun caractère d’espacements – équivalent de

\S
[^\v\r\n\t\f] -.

Tous les caractères alphanumériques dont « _ » –

\w
équivalent de [A-Za-z0-9_] -.

Aucun caractère alphanumérique – équivalent de [^A-

\W
Za-z0-9_] -.

Exemple 1 :

var exp = new RegExp("^[A-Za-z0-9]{4,}$","i") ;

L’exemple 1 présente la recherche d’une chaîne de au moins 4

caractères alphanumériques. [A-Za-z0-9] désigne les caractères
alphanumériques, et {4,} désigne 4 fois ou plus. Les caractères sont au
chois majuscules ou minuscules.

Exemple 2:

var exp = /^[A-Za-z0-9]{4,}$/i ;

L’exemple 2 est équivalent à l’exemple 1, mais il utilise l’autre

notation.

72
Exemple 3 :

var exp = new RegExp (“^[A-Za-z0-9]+[A-Za-z0-9\.\-_]*@[A-Za-z0-

9\-_]+\.[A-Za-z0-9\.\-_]{1,}$”,””);

L’exemple 3 présente la vérification d’une adresse e-mail. Elle doit

commencer par au moins un caractère alphanumérique : [A-Za-z0-9]+ .
Ensuite elle peut comporter autant de caractères alphanumériques que l’on
veut, plus le point, le tiret et l’underscore : [A-Za-z0-9\.\-_]*.
Tout cela doit être suivi d’un @ : @. Ensuite, il peut y avoir n’importe quel
nombre de caractères alphanumériques, plus le point, le tiret et
l’underscore : [A-Za-z0-9\-_]+. Cela doit être suivi d’un point : \. . Ce
dernier doit être suivi d’au moins deux caractères alphanumériques dont le
point et le tiret : [A-Za-z0-9\.\-_]{1,}. Il n’y a aucune option.

16.3. Utilisation d’une expression régulière

16.3.1. Les méthode de l’objet RegExp

Il existe trois méthodes de l’objet RegExp : test(), exec() et

compile(). Elles s’utilisent selon la syntaxe objet habituelle. La première
prend en paramètre la chaîne à tester selon le motif de l’expression
régulière. Elle renvoie un booléen qui indique si la chaîne correspond au
motif ou non. La deuxième méthode prend aussi la chaîne à tester en
paramètre. Elle renvoie un tableau des occurrences du motif à tester. La
dernière permet de modifier le motif de l’expression régulière, sans en
créer un nouveau.

Exemple :
adresse = prompt ("Votre mail ?","mail@[Link]") ;
var exp = new RegExp (“^[A-Za-z0-9]+[A-Za-z0-9\.\-_]*@[A-Za-z0-9\-
_]+\.[A-Za-z0-9\.\-_]{1,}$”,””);
[Link] ([Link](adresse) );

73
 16.3.2. Les méthode de l’objet String

 search() : trouver les occurrences répondant aux critères du motif.

 replace () : trouver remplacer les occurrences répondant aux critères
du motif.
 match() : trouver les occurrences répondant aux critères du motif.

var reg = RegExp (pattern, option);

chaîne.méthode(reg);

74
POINTS IMPORTANTS À RETENIR

 Les regex constituent une technologie à part, utilisée au sein du

JavaScript et qui permet de manipuler les chaînes de caractères. La
syntaxe de ces regex se base sur celle du langage Perl.
 Plusieurs méthodes de l'objet String peuvent être utilisées avec des
regex, à savoir match(), search() et replace().
 L'option i indique à la regex que la casse doit être ignorée.
 Les caractères ^ et $ indiquent respectivement le début et la fin de la
chaîne de caractères.
 Les classes et les intervalles de caractères, ainsi que les types
génériques, servent à rechercher un caractère possible parmi
plusieurs.
 Les différents métacaractères doivent absolument être échappés.
 Les quantificateurs servent à indiquer le nombre de fois qu'un
caractère peut être répété.

RÉFÉRENCES BIBLIOGRAPHIQUES POUR APPROFONDIR LE

CHAPITRE

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.

75
EXERCICES D’ASSIMILATION
- Faites un formulaire avec 3 lignes de texte et un bouton. Dans les lignes
de texte, l’internaute entre son adresse, code postal et ville. En cliquant sur
le bouton, on teste leur validité.

76
17. FONCTIONS ET PROPRIÉTÉS
17.1. Les fonctions du langage
[Link]()

chaine1 = escape (chaine2)

[Link]()

chaine1 = escape (chaine2)

[Link] ()

decimal = parseFloat (chaine)

[Link] ()

decimal = parseInt (chaine, base)

[Link] ()

booleen = isFinite (nombre)

[Link] ()

booleen = isNaN (chaine)

[Link]()

variable = [Link] ;
[Link]()

variable = [Link] ;

77
Bibliographie générale

- Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web

avec Javascript, le site du zéro, 2012, 375 pages.
- Thierry Templier Arnaud Gougeon, JavaScript pour le Web2.0, Eyrolles,
2011, 509 pages.
- Van Lancker Luc, Des CSS au DHTML Javascript Appliqué au Feuilles
de styles, ENI Edition, 1998, 402 pages.
- Emmanuel GUTIERREZ, JavaScript Des fondamentaux aux concepts
avancés, ENI Edition 2008, 189 pages.
- Davide FLANAGAN, Javascript The Definitive Guide, O’RIELLY 6eme
Edition, 2011, 1098 pages.

Webographie

[Link], (14/08/2019)
[Link], (14/08/2019)
[Link] (14/08/2019)

78
Table des matières
1. GENERALITES ................................................................................................................... 1
1.1. Le langage Javascript ..................................................................................................... 1
1.2. Côté pratique .................................................................................................................. 1
2. LE LANGAGE ..................................................................................................................... 1
2.1. Incorporation du code ..................................................................................................... 1
2.2. Spécificités du langage ................................................................................................... 3
3. LES STRUCTURES DE DONNEES .................................................................................... 7
3.1. Les données constantes ................................................................................................... 7
3.2. Les variables en JS ......................................................................................................... 7
3.2.1. Les types de variable ............................................................................................... 7
[Link] déclaration et l’affectation.................................................................................... 7
3.2.2. Les noms réservés .................................................................................................... 9
[Link] globales et variables locales .................................................................... 10
4. LES OPERATEURS ........................................................................................................... 10
[Link] opérateurs de calcul ................................................................................................ 10
Exemple.............................................................................................................................. 10
[Link] opérateurs de comparaison ...................................................................................... 11
[Link] opérateurs associatifs .............................................................................................. 11
[Link] opérateurs logiques ................................................................................................. 11
[Link] opérateurs d'incrémentation ..................................................................................... 12
5. LES BOITES DE MESSAGE ............................................................................................. 16
[Link]() ........................................................................................................................... 16
[Link]() ........................................................................................................................ 16
[Link]() ...................................................................................................................... 16
6. LES FONCTIONS .............................................................................................................. 18
Les fonctions personnelles .................................................................................................. 18
6.1.Définition .................................................................................................................. 18
6.2. Déclaration ............................................................................................................... 18
[Link] fonctions dans l’en-tête ....................................................................................... 18
6.4.L'appel d'une fonction ................................................................................................... 18
6.5. Fonctions manipulant des valeurs ................................................................................. 18
6.5.1. Passer une valeur à une fonction ............................................................................ 18
6.5.2. Retourner une valeur ................................................................................................. 18
79
 Les fonctions integreés ........................................................................................................ 19
[Link]() ....................................................................................................................... 19
[Link]() ................................................................................................................... 19
[Link] () ................................................................................................................. 19
[Link] () .................................................................................................................... 20
[Link] () ..................................................................................................................... 20
[Link] () ....................................................................................................................... 21
[Link]() ..................................................................................................................... 21
[Link]() .................................................................................................................... 21
7. LES STRUCTURES DE CONTROLE ................................................................................ 24
7.1. La structure séquentielle ............................................................................................... 24
7.2. Les instructions conditionnelles .................................................................................... 24
7.2.1. L’expression if … else ........................................................................................... 24
7.2.2. L’expression () ? : .................................................................................................. 25
7.3. Les instructions itératives ............................................................................................. 25
7.3.1. L’itération for ........................................................................................................ 25
7.3.2. L’itération while .................................................................................................... 26
7.5. Interrompre une boucle ................................................................................................. 26
7.5.1. L’instruction break ................................................................................................ 26
7.5.2. L’instruction continue ............................................................................................ 26
7. LES FORMULAIRES......................................................................................................... 29
7.1. Champ de texte............................................................................................................. 29
[Link] de texte ......................................................................................................... 29
[Link] de texte .......................................................................................................... 29
[Link] password .................................................................................................... 29
[Link] à sélectionner....................................................................................................... 29
[Link] radios ........................................................................................................ 29
[Link] ............................................................................................................... 29
[Link] de sélection ........................................................................................................... 29
[Link] .......................................................................................................................... 29
[Link] simple ........................................................................................................ 29
[Link] reset ........................................................................................................... 30
[Link] submit ........................................................................................................ 30
8. LES EVENEMENTS .......................................................................................................... 30
80
 8.1. Le reset..................................................................................................................... 30
8.2. Le clic de souris........................................................................................................ 30
8.3. Load ......................................................................................................................... 30
8.4. UnLoad .................................................................................................................... 30
8.5. Error......................................................................................................................... 30
8.6. Abort ........................................................................................................................ 31
8.7. MouseOver ............................................................................................................... 31
8.8. MouseOut................................................................................................................. 31
8.9. Focus........................................................................................................................ 31
8.10. Blur ........................................................................................................................ 31
8.11. Les changements .................................................................................................... 31
8.12. La sélection ............................................................................................................ 31
8.13. L’envoi ................................................................................................................... 31
9. MANIPULER DU CODE HTML ....................................................................................... 35
L'OBJET WINDOW ....................................................................................................... 35
9.1. Les propriétés de window ............................................................................................. 35
9.2. Les méthodes de window.............................................................................................. 36
9.2.1. Généralités ............................................................................................................ 36
9.2.2. Liste des méthodes................................................................................................. 36
9.3. Les objets de window ................................................................................................... 37
9.3.1.L’objet parent ......................................................................................................... 37
9.3.2.L’objet top .............................................................................................................. 38
9.3.3.L’objet opener ........................................................................................................ 38
9.3.4.L’objet history ........................................................................................................ 38
9.3.5. L’objet location ..................................................................................................... 38
9.4 Le document ................................................................................................................. 40
9.4.1 Accéder aux éléments ............................................................................................. 40
9.4.2 Accéder aux éléments grâce aux technologies récentes ............................................ 41
9.4.3 Le contenu : innerHTML ........................................................................................ 42
10. L’OBJET ARRAY ............................................................................................................ 46
10.1. Création et affectation d’un tableau............................................................................. 46
Affectation multiple ........................................................................................................ 46
Accès aux données d’un tableau ...................................................................................... 46
[Link] à 2 dimensions ............................................................................................... 47
81
 [Link]étés et méthodes ................................................................................................. 48
[Link]été ............................................................................................................... 48
10.3.2.Méthodes .............................................................................................................. 48
11. L’OBJET NAVIGATOR................................................................................................... 51
11.1. Les propriétés de navigator ......................................................................................... 52
12. L’OBJET MATH .............................................................................................................. 52
12.1. Fonctions.................................................................................................................... 52
12.1.1. Fonctions diverses ............................................................................................... 52
12.1.2. Fonctions trigonométriques .................................................................................. 53
12.2. Constantes .................................................................................................................. 53
12.3. Simplification ............................................................................................................. 53
13. L’OBJET STRING............................................................................................................ 56
13.1. La propriété length ..................................................................................................... 56
13.2. Quelques méthodes ..................................................................................................... 56
13.3. Caractères spéciaux .................................................................................................... 58
14.L’OBJET DATE ................................................................................................................ 61
[Link] .............................................................................................................................. 61
[Link] ............................................................................................................................... 61
14.3.L’heure ....................................................................................................................... 62
15. LES COOKIES ................................................................................................................. 66
15.1. Créer un cookie .......................................................................................................... 66
15.2. Récupérer un cookie ................................................................................................... 66
15.3. Modifier un cookie ..................................................................................................... 67
15.4. Supprimer un cookie................................................................................................... 67
15.5. La sécurité des cookies ............................................................................................... 67
16. LES EXPRESSION REGULIERES .................................................................................. 70
16.1. Définition ................................................................................................................... 70
16.2. Paramètres d’une expression régulière ........................................................................ 70
16.2.1. L’option............................................................................................................... 70
16.2.2. Le pattern ............................................................................................................ 70
16.3. Utilisation d’une expression régulière ......................................................................... 73
16.3.1. Les méthode de l’objet RegExp ............................................................................... 73
16.3.2. Les méthode de l’objet String .................................................................................. 74
17. FONCTIONS ET PROPRIÉTÉS ....................................................................................... 77
82
83