0% ont trouvé ce document utile (0 vote)

15 vues87 pages

Introduction au langage Javascript

Ce document est un guide complet sur le langage JavaScript, couvrant des sujets allant des généralités et spécificités du langage aux structures de données, fonctions, et objets. Il inclut également des sections sur les événements, les formulaires, et les objets du navigateur, ainsi que des exercices pratiques pour renforcer l'apprentissage. Chaque chapitre aborde des aspects techniques et pratiques, facilitant la compréhension et l'application de JavaScript.

Transféré par

adikoeliane92

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

0% ont trouvé ce document utile (0 vote)

15 vues87 pages

Introduction au langage Javascript

Transféré par

adikoeliane92

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

JAVASCRIPT

1
SOMMAIRE

[Link] ...................................................................................................................... 8
[Link] langage Javascript ........................................................................................................ 8
1.2.Côté pratique ..................................................................................................................... 8
1.3.Détails techniques ............................................................................................................. 8
[Link] LANGAGE ........................................................................................................................ 8
[Link] du code ....................................................................................................... 8
[Link]écificités du langage ..................................................................................................... 9
[Link] STRUCTURES DE DONNEES ..................................................................................... 9
[Link] données constantes ..................................................................................................... 9
[Link] variables en JS .......................................................................................................... 10
[Link] types de variable ................................................................................................ 10
[Link] déclaration et l’affectation ................................................................................... 10
3.2.3. Les noms réservés .................................................................................................... 11
[Link] sur les chaînes de caractères ............................................................. 11
[Link] globales et variables locales ..................................................................... 12
4. LES OPERATEURS ............................................................................................................ 12
[Link] opérateurs de calcul .................................................................................................. 12
[Link] opérateurs de comparaison ....................................................................................... 12
[Link] opérateurs associatifs ............................................................................................... 13
[Link] opérateurs logiques................................................................................................... 13
[Link] opérateurs d'incrémentation ..................................................................................... 13
5. LES FONCTIONS ............................................................................................................... 14
5.1.Définition ........................................................................................................................ 14
5.2.Déclaration ...................................................................................................................... 14
[Link] fonctions dans l’en-tête ............................................................................................ 14
5.4.L'appel d'une fonction ..................................................................................................... 14
[Link] manipulant des valeurs ................................................................................... 14
[Link] une valeur à une fonction .............................................................................. 14
[Link] une valeur ................................................................................................ 15
[Link] locales et variables globales ........................................................................... 15
6. LES STRUCTURES DE CONTROLE................................................................................ 16
[Link] structures algorithmiques ......................................................................................... 16
[Link] structure séquentielle ................................................................................................. 16
[Link] instructions conditionnelles ...................................................................................... 16
6.3.1.L’expression if … else ................................................................................................. 16
6.3.2.L’expression () ? : ........................................................................................................ 17
[Link] instructions itératives ............................................................................................... 17
6.4.1.L’itération for ........................................................................................................... 17
6.4.2.L’itération while ....................................................................................................... 18
[Link] une boucle ................................................................................................... 18
6.5.1.L’instruction break ................................................................................................... 18
6.5.2.L’instruction continue............................................................................................... 18
[Link]........................................................................................................................... 19
7. LES BOITES DE MESSAGE .............................................................................................. 19
7.1.Généralités ...................................................................................................................... 19
[Link]() .............................................................................................................................. 19
[Link]() .......................................................................................................................... 19
[Link]() ........................................................................................................................ 20
[Link] : Confirmation et vérification........................................................................... 20
8. NOTION OBJET.................................................................................................................. 20
[Link] concept objet .............................................................................................................. 20

2
[Link]éation d’un objet ......................................................................................................... 21
[Link]ès aux propriétés et aux méthodes ............................................................................ 21
8.4.L’objet this ...................................................................................................................... 21
9. LES FORMULAIRES.......................................................................................................... 21
9.1.Généralités ...................................................................................................................... 21
[Link]ésentation .............................................................................................................. 21
[Link] balise form ........................................................................................................... 22
9.2. Champ de texte .............................................................................................................. 22
[Link] de texte ........................................................................................................... 22
[Link] de texte ............................................................................................................ 23
[Link] password....................................................................................................... 23
[Link] à sélectionner ........................................................................................................ 24
[Link] radios .......................................................................................................... 24
[Link] .................................................................................................................. 25
[Link] de sélection............................................................................................................. 25
[Link] ............................................................................................................................. 26
[Link] simple ........................................................................................................... 26
[Link] reset .............................................................................................................. 27
[Link] submit........................................................................................................... 27
[Link]ôle caché ................................................................................................................ 28
[Link] formulaire complet .................................................................................................... 28
[Link] objet du formulaire ................................................................................................... 29
[Link]........................................................................................................................... 30
10. LES EVENEMENTS ...................................................................................................... 30
10.1.Généralités .................................................................................................................... 30
[Link]ésentation ............................................................................................................ 30
[Link] ...................................................................................................... 30
[Link] clic de souris ............................................................................................................ 31
[Link] chargement ............................................................................................................... 31
[Link] ........................................................................................................................ 31
[Link] ................................................................................................................... 32
[Link] ........................................................................................................................ 32
[Link] ....................................................................................................................... 32
[Link] passage de la souris .................................................................................................. 32
[Link] ............................................................................................................. 32
[Link] ............................................................................................................... 33
[Link] focus ......................................................................................................................... 33
[Link] ....................................................................................................................... 33
[Link] ......................................................................................................................... 33
[Link] changements ........................................................................................................... 34
[Link] sélection ................................................................................................................... 34
10.8.L’envoi .......................................................................................................................... 34
[Link] reset .......................................................................................................................... 35
10.10.L’utilisation de l’objet document ................................................................................ 35
[Link] concret.......................................................................................................... 35
[Link]....................................................................................................................... 36
[Link] bouton .............................................................................................................. 36
[Link] phrase............................................................................................................... 36
11. L’OBJET ARRAY ............................................................................................................. 36
11.1.Généralités .................................................................................................................... 36
[Link]éation et affectation d’un tableau .............................................................................. 37
11.2.1 Création d’un tableau.............................................................................................. 37
11.2.2 Affectation d’un tableau ......................................................................................... 37

3
[Link]ès aux données d’un tableau ................................................................................... 37
[Link] à 2 dimensions ................................................................................................. 38
[Link]étés et méthodes .................................................................................................. 38
[Link]été.................................................................................................................. 38
11.5.2.Méthodes ................................................................................................................ 39
[Link] concret............................................................................................................ 39
[Link]......................................................................................................................... 40
[Link] OBJETS DU NAVIGATEUR..................................................................................... 40
12.1.Généralités .................................................................................................................... 40
[Link]................................................................................................................. 40
13.L’OBJET NAVIGATOR .................................................................................................... 41
[Link] propriétés de navigator ........................................................................................... 41
[Link] méthodes de navigator............................................................................................ 42
[Link] objets de navigator ................................................................................................. 42
[Link] ........................................................................................................................ 42
14.L’OBJET WINDOW........................................................................................................... 43
[Link] propriétés de window ............................................................................................. 43
[Link] méthodes de window .............................................................................................. 43
14.2.1.Généralités .............................................................................................................. 43
[Link] des méthodes.................................................................................................. 44
[Link] ................................................................................................................ 44
[Link] évènements de window .......................................................................................... 46
[Link] objets de window.................................................................................................... 47
14.4.1.L’objet frames......................................................................................................... 47
14.4.2.L’objet parent ......................................................................................................... 47
14.4.3.L’objet top .............................................................................................................. 47
14.4.4.L’objet opener......................................................................................................... 47
14.4.5.L’objet history ........................................................................................................ 48
14.4.6.L’objet location....................................................................................................... 48
14.4.7.L’objet screen ......................................................................................................... 48
14.4.8.L’objet event ........................................................................................................... 49
14.4.9.L’objet external....................................................................................................... 49
[Link] concret............................................................................................................ 49
[Link]......................................................................................................................... 49
15.L’OBJET DOCUMENT ..................................................................................................... 50
[Link] propriétés de document .......................................................................................... 50
[Link] méthodes de document ........................................................................................... 51
[Link] évènements de document ....................................................................................... 52
[Link] objets de document ................................................................................................. 52
15.4.1.L’objet all ............................................................................................................... 52
15.4.2.L’objet layers .......................................................................................................... 52
15.4.3.L’objet forms .......................................................................................................... 52
15.4.4.L’objet anchors ....................................................................................................... 53
15.4.5.L’objet images ........................................................................................................ 53
15.4.6.L’objet applets ........................................................................................................ 53
15.4.7.L’objet plugins ........................................................................................................ 53
15.4.8.L’objet frames......................................................................................................... 53
[Link]......................................................................................................................... 53
[Link] OBJET DU NOYAU JAVASCRIPT .......................................................................... 54
16.1.Généralités .................................................................................................................... 54
[Link] précisions ...................................................................................................... 54
17.L’OBJET MATH ................................................................................................................ 54
[Link] ....................................................................................................................... 54

4
[Link] diverses .................................................................................................. 54
[Link] trigonométriques .................................................................................... 54
[Link] logarithmiques ....................................................................................... 55
[Link] ..................................................................................................................... 55
[Link] ................................................................................................................ 55
[Link]......................................................................................................................... 55
18.L’OBJET STRING .............................................................................................................. 55
18.1.Généralités .................................................................................................................... 55
[Link] propriété ................................................................................................................... 55
[Link] méthodes ................................................................................................................ 56
[Link] () ................................................................................................................. 56
[Link] () .................................................................................................... 56
[Link] () ........................................................................................................ 56
[Link] () ............................................................................................................... 57
[Link] () ........................................................................................................ 57
[Link] () ............................................................................................................. 57
[Link] () .................................................................................................................. 57
[Link] ()..................................................................................................................... 58
[Link] () ..................................................................................................................... 58
[Link] () ............................................................................................................... 58
[Link] () .................................................................................................... 59
[Link] () .................................................................................................... 59
[Link] () .......................................................................................................... 59
[Link] () ............................................................................................................ 59
[Link] () ................................................................................................................. 60
[Link] () ................................................................................................................... 60
[Link] () ................................................................................................................. 60
[Link] () .................................................................................................................... 60
[Link] () ..................................................................................................................... 60
[Link] () .................................................................................................................... 61
[Link] () .................................................................................................................. 61
[Link] () ................................................................................................................. 61
[Link] () ................................................................................................................. 62
[Link] () ................................................................................................................... 62
[Link] ()............................................................................................................... 62
[Link] sur les chaînes ....................................................................................... 62
[Link] .............................................................................................................. 62
[Link]énation ......................................................................................................... 63
[Link]ères spéciaux ................................................................................................ 63
[Link]......................................................................................................................... 64
19.L’OBJET DATE ................................................................................................................. 65
19.1.Généralités .................................................................................................................... 65
[Link] méthodes ................................................................................................................ 65
[Link] .......................................................................................................................... 65
[Link] ........................................................................................................................... 65
19.2.3.L’heure.................................................................................................................... 66
[Link] concret............................................................................................................ 66
[Link]......................................................................................................................... 67
[Link] de jours ..................................................................................................... 67
[Link] GMT............................................................................................................. 67
20.L’OBJET IMAGE ............................................................................................................... 67
[Link] HTML ............................................................................................................... 67
20.2.L’objet ........................................................................................................................... 67

5
[Link] propriétés ................................................................................................................ 68
[Link] ................................................................................................................... 68
[Link] ........................................................................................................................... 68
[Link] ....................................................................................................................... 68
[Link] ............................................................................................................................. 68
[Link] ...................................................................................................................... 68
[Link] ..................................................................................................................... 69
[Link] ................................................................................................................. 69
[Link] ........................................................................................................................... 69
[Link] ................................................................................................................... 69
[Link] une image ....................................................................................................... 69
[Link] concret : cliquer pour changer d’image ......................................................... 70
[Link]......................................................................................................................... 71
[Link] PROGRAMMATION MULTI-CADRES .................................................................... 71
[Link] HTML ............................................................................................................... 71
21.2.Généralités .................................................................................................................... 71
[Link] hypertexte ............................................................................................................ 72
[Link]ès aux éléments des frames..................................................................................... 72
21.4.1.L’objet frames[] ...................................................................................................... 72
[Link] nom de la frame ................................................................................................. 72
[Link] concret............................................................................................................ 73
[Link]......................................................................................................................... 74
[Link] COOKIES ................................................................................................................... 74
[Link]ésentation ................................................................................................................... 74
[Link]éer un cookie ............................................................................................................. 75
22.3.Récupérer un cookie ..................................................................................................... 76
[Link] un cookie ........................................................................................................ 77
[Link] un cookie ..................................................................................................... 77
[Link] PROGRAMMATION OBJET ...................................................................................... 77
[Link]ésentation ................................................................................................................... 77
23.2.Déclaration d’une classe ............................................................................................... 77
[Link] de méthodes................................................................................................. 78
23.4. Exercice........................................................................................................................ 78
[Link] EXPRESSION REGULIERES ................................................................................... 79
[Link]ésentation ................................................................................................................... 79
24.2.Définition ...................................................................................................................... 79
[Link]ètres d’une expression régulière ......................................................................... 79
24.3.1.L’option .................................................................................................................. 79
[Link] pattern ................................................................................................................ 80
[Link] ................................................................................................................ 81
[Link] d’une expression régulière .......................................................................... 81
[Link] méthode de l’objet RegExp.............................................................................. 81
[Link] méthode de l’objet String ................................................................................. 82
[Link] concret ........................................................................................................ 83
[Link]......................................................................................................................... 84
[Link]ésentation ................................................................................................................... 84
[Link] fonctions du langage .............................................................................................. 84
[Link]() .................................................................................................................. 84
[Link]() .............................................................................................................. 84
[Link] () ............................................................................................................ 84
[Link] () ............................................................................................................... 85
[Link] () ................................................................................................................ 85
[Link] () .................................................................................................................. 85

6
25.3.Méthodes et propriétés des objets ................................................................................. 86
[Link] ................................................................................................................. 86
[Link] ............................................................................................................. 86
[Link]() ................................................................................................................ 87
[Link]() ............................................................................................................... 87

7
[Link]

[Link] langage Javascript

Le langage Javascript a été mis au point par Netscape en 1995. Microsoft ayant sorti
son propre langage quelques temps après, un standard a été créé, le Javascript. Actuellement,
la version du langage est le Javascript 1.5.

Ce langage est 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. Si ce n’est pas le cas, il est conseillé de
consulter un cours HTML de toute urgence. 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.

Son principal inconvénient est le fait qu’il ne dispose pas de débogueur, la détection
des erreurs en devient fastidieuse. Ensuite, il le code est accessible, puisque contenu dans la
page envoyée au navigateur.

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. Au niveau de l’éditeur de texte, je vous conseillerais un éditeur un peu plus
évolué. Le mieux serait bien entendu Dreamweaver MX1, si vous avez les moyens, bien que
ce soit surtout utile si vous faites un site web. Du côté des éditeurs gratuits, je conseillerai
Editplus22, un éditeur tous langages qui propose une coloration syntaxique. Si vous devez
prendre un autre éditeur, veillez à ce qu’il propose cette coloration syntaxique, ça éclaire le
code.

1.3.Détails techniques

Par convention, l’abréviation JS, utilisée souvent tout au long de ce cours, désigne
Javascript.
Chaque chapitre concerne un point du langage qui peut être pris comme une leçon. A
chaque fin de chapitre, je présente un exemple concret – quand c’est possible – et un ou
plusieurs exercice(s). Ces exercices sont corrigés – un lien mène au fichier HTML – dans le
dossier « solutions ».
Les cases blanches correspondent à la syntaxe, c’est-à-dire la mise en forme du
langage. Les cases grises correspondent aux exemples. Lorsque ces derniers ont un résultat
graphique, un lien mène au fichier HTML de l’exemple. Ces derniers sont dans le dossier
« Exemples »

[Link] LANGAGE

[Link] du code

Comme son nom l’indique, il s’agit d’un langage de script. 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.

8
Syntaxe :
<script language = "Javascript">code</script>

Exemple 2.1 :
<script language = "Javascript">
var mavariable = 12 ;
[Link] (typeof(mavariable)) ;
</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 ave la balise <script>. Ne pas
oublier il est préférable de placer le fichier JS dans le même dossier que la page.

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

Exemple 2.2 :
<script src = "[Link]">
</script>

[Link]é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.

Exemple 2.3 :
var mavariable = 12 ;
[Link] ( typeof(mavariable) ) ;

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.

Exemple 2.4 :
var mavariable = 12 ; //commentaire
[Link] ( typeof(mavariable) ) ;

Il est aussi possible de mettre des commentaires au milieu d’un ligne, ou sur plusieurs
lignes, en les encadrant avec « /* » et « */ »

Exemple 2.5 :
var mavariable = 12 ; /*commentaire sur
plusieurs lignes*/
[Link] ( typeof(mavariable) ) ;

[Link] STRUCTURES DE DONNEES

[Link] données constantes

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

9
• Les constantes numériques, en notation décimale ( 75,2 ) ou flottante, c’est-à-dire
scientifique (752E-1).
• 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 ne signifie « rien », « sans valeur », et qui est attribuée aux
variables non définies.

[Link] variables en JS

[Link] 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 (majuscules et
minuscules). 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éens3 : boolean
• Les objets : object
• Les fonctions : function

Nous verrons les fonctions au chapitre [Link] FONCTION, mais je vous présente la
première que vous verrez : la fonction typeof(), qui retourne le type d’une variable.

Exemple 3.1 :
var mavariable = 12 ;
[Link] (typeof(mavariable)) ;

Si la variable n’est pas affectée d’une valeur, elle recevra alors le type undefined,
comme le montre l’exemple 3.2.

Exemple 3.2 :

[Link] (typeof(mavariable)) ;

[Link] déclaration et l’affectation

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.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 ».

10
Exemple 3.4 :

var Numero = 1 ;

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

l'on lui attribue.

Exemple 3.5 :

Numero = 1 ;

3.2.3. 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
I if / implements / import / in / instanceof / int / interface
L long
N native / new / null
P package / private / protected / public
R return
S short / static / super / switch / synchronized
T this / throw / throws / transient / true / try
V var / void
W while / with
Tab. 3.1 : Noms réservés
[Link] sur les chaînes de caractères

Javascript convertit automatiquement les entiers en chaîne de caractères. Pour les

puristes, il s’agit du transtypage automatique. Il est ainsi possible de concaténer des entiers
avec des chaînes de caractères.

11
Dans la fonction d’écriture dans le document courant ( [Link]() ), les données
peuvent être séparés par des ‘,’ ou des ‘+’.

Certains caractères peuvent être insérés dans les chaînes de caractères : le retour
arrière (\b), le saut de page (\f), le saut de ligne (\n), l’entrée (\r), la tabulation (&) et
l’apostrophe (\’).

On peut insérer des codes HTML dans les chaînes de caractères. Ces dernières seront
interprétées comme de vraies balises.

Nous reverrons tout cela plus en détail dans le chapitre 16.L’OBJET STRING.

[Link] globales et variables locales

Les variables déclarées tout au début du script, en dehors et avant toutes fonctions
(voir plus loin), 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. Cependant, 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. Dans les exemples, la
valeur initiale de x sera toujours égale à 11, et celle de y sera égale à 5.

[Link] opérateurs de calcul

Signe Nom Signification Exemple Résultat

+ Plus Addition x+3 14
- moins soustraction x-3 8
multiplié
* multiplication x*2 22
par
/ divisé par division x/2 5.5
reste de la division
% modulo x%5 1
par
= affectation a la valeur x=5 5
Tab 4.1 : opérateurs de calcul

[Link] opérateurs de comparaison

Signe Nom Exemple Résultat

== Egal x == 11 true

12
Signe Nom Exemple Résultat
< 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
Tab 4.2 : opérateurs de comparaison

Ces opérateurs seront utilisés dans les boucles conditionnelles4. Le résultat s’exprime
alors en valeur booléenne.

[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é égal x *= y x=x*y 55
/= divisé égal x /= y x=x/y 2.2
Tab 4.3 : opérateurs associatifs

Ces opérateurs permettent un raccourci d’écriture, sans pour autant changer le résultat.
Ils permettent une incrémentation ou une décrémentation autre que 1.

[Link] opérateurs logiques

Signe Nom Exemple Signification

&& et (condition1) && (condition2) condition1 et condition2
|| ou (condition1) || (condition2) condition1 ou condition2
Tab 4.4 : opérateurs logiques

On utilisera ces opérateurs dans les boucles conditionnelles principalement. Chaque

condition correspondant à une expression avec un opérateur de comparaison. Ces opérateurs
fonctionnent comme un ET logique et un OU logique.

[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
Tab 4.5 : opérateurs d’incrémentation

13
5. LES FONCTIONS

5.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.

En Javascript, il existe deux types de fonctions :

• Les fonctions propres à Javascript, appelées méthodes. Elles sont associées à un objet
en particulier.
• Les fonctions que vous définissez vous-même. Ce sont celles qui nous intéressent ici.

5.2.Déclaration

Pour déclarer ou définir une fonction, on utilise le mot-clé function.

La syntaxe d'une déclaration de fonction est la suivante :

Syntaxe :
function nom_de_la_fonction (arguments) {
code des instructions
}

Le nom d’une fonction suit les mêmes règles que celui d’une variable5. Chaque nom
de fonction doit être unique dans un même script. Les parenthèses sont obligatoires même s’il
n’y a pas d’arguments, puisque Javascript reconnaît une fonction grâce à elles.

[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> pour qu ‘elles soient prises en compte par l’interpréteur avant leur
exécution dans le corps de la page <body>…</body>

5.4.L'appel d'une fonction

Syntaxe :
nom_de_la_fonction();

Il faut que la fonction aie été définie avant l’appel, étant donné que l’interpréteur lit le
script de haut en bas.
[Link] manipulant des valeurs

[Link] une valeur à une fonction

On peut passer des valeurs à une fonction. On parle alors de paramètres. Pour passer
un paramètre à une fonction, on fournit un nom d'une variable dans la déclaration de la
fonction.

Exemple 5.1 : une fonction affichant le texte dans la page à laquelle on fournit le texte à
afficher.

.
14
function Exemple(texte) { //définition avec un paramètre
[Link](texte);
}
Exemple("Salut à tous"); // appel avec un paramètre

On peut passer plusieurs paramètres à une fonction, en séparant les paramètres par des
virgules.

Syntaxe :
function nom_de_la_fonction(arg1, arg2, arg3) {
instructions
}

Exemple 5.2 :

function cube(nombre) {
y = nombre*nombre*nombre;
return y; //retour de valeur
}
x = cube(5); //appel avec paramètre
[Link](x); //résultat

[Link] une valeur

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

Exemple 5.3 :

function cube(nombre) { //Définition de la fonction

var c = nombre*nombre*nombre ;
return c; //Retour du cube du paramètre
}
var x = cube(5) ; // appel avec paramètre
[Link] (x) ; //affichage

NB : Le mot-clé return est facultatif.

[Link] locales et variables globales

Une variable déclarée dans une fonction par le mot-clé var aura une portée limitée à
cette seule fonction. On l'appelle donc variable locale et ne pourra être utilisé dans le reste du
script.

Exemple 5.4 :
function cube(nombre) {
var c = nombre*nombre*nombre ;
}

Si la variable est déclarée sans utiliser le mot var, sa portée sera globale.

15
Exemple 5.5 :

function cube(nombre) {
cube = nombre*nombre*nombre ;
}

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.

Exemple 5.6 :
var cube=1
function cube(nombre) {
var cube = nombre*nombre*nombre ;
}

6. LES STRUCTURES DE CONTROLE

[Link] structures algorithmiques

Quel que soit le langage informatique utilisé6, un programme informatique utilise 3

catégories principales d’instructions. Ce sont :
• Les instructions séquentielles.
• Les instructions alternatives, ou conditionnelles.
• Les instructions itératives, ou répétitives.

Nous verrons chacun des types de structures, en comparant l’algorithme et le code JS.
[Link] structure séquentielle

C’est une suite d’instructions exécutées dans l’ordre où elles sont écrites, l’une après
l’autre. L’exemple le plus fréquent est la fonction.

Algorithme Code JS
DEBUT {
Instruction1 Instruction1
Instruction2 Instruction2
FIN }

[Link] instructions conditionnelles

6.3.1.L’expression if … else
Il s’agit de tester une condition et d’effectuer une série d’instructions si la condition
est vraie et si elle est fausse, effectuer une autre série d’instructions.

Algorithme Code JS
SI condition If (condition) {
ALORS Instructions1 Instruction1
SINON Instructions2 }
FINSI else {
Instruction2
}

16
Tab. 6.1: Expression conditionnelle if…else
Exemple 6.1 :

x = prompt ("votre age?","age");

if ( x < 40) {
alert ('vous êtes jeune') ;
}
else {
alert ('vous êtes vieux') ;
}

Dans l’exemple 6.1, la fonction prompt() permet d’afficher une boîte de dialogue.

6.3.2.L’expression () ? :

Il s’agit d’un moyen rapide de tester une condition et de d’exécuter une instruction
selon son résultat.

Algorithme Code JS
SI condition (condition) ? instruction 1 :
ALORS Instructions1 instruction 2
SINON Instructions2
FINSI
Tab. 6.2 : Expression conditionnelle () ? :

Dans cette expression, si la condition est vérifiée, l’instruction 1 est effectuée, sinon,
l’instruction 2 est effectuée. Précisons, que toute l’expression doit se trouver sur la même
ligne.

Exemple 6.2 :

x = prompt ("votre age?","age");

age = (x < 40)? “jeune” : “vieux”;
alert ('vous êtes ' + age) ;

[Link] instructions itératives

6.4.1.L’itération for

Elle permet de répéter des instructions en s’arrêtant à un certain nombre d’itérations

(boucles).

Algorithme Code JS
POUR i = valeur initiale A i = For (val initiale ; condition ;
valeur finale incrémentation) {
REPETER instructions Instructions
FIN POUR }
Tab. 6.3: Expression iterative for

17
Exemple 6.3 :

for (i = 0; i < 10; i++) {

[Link](i + " ");
}

6.4.2.L’itération while

Elle permet de répéter des instructions tant qu’une condition est vraie.

Algorithme Code JS
TANT QUE (condition vraie) while (condition) {
REPETER instructions instructions
FIN TANT QUE }

Tab. 6.4: Expression iterative while

Exemple 6.4 :

i = 0;
while (i < 10) {
[Link](i + " ");
i++;
}

[Link] une boucle

6.5.1.L’instruction break

Elle permet de mettre fin prématurément à une instruction itérative while ou for.

Exemple 6.5 :

for (i = 0; i < 10; i++) {

if (i == 5) {
break;
}
[Link](i + “ “);
}

6.5.2.L’instruction continue

Elle permet de mettre fin à une itération et de passer à la boucle suivante.

Exemple 6.6 :

for (i = 0; i < 5; i++) {

if (i == 2) {
continue ;
}
[Link](i + ‘<br>’);
}

18
[Link]

Dans cet exercice, vous devez afficher tous les nombres pairs compris entre 0 et 20
inclus, dans l’ordre décroissant. Il ne faudra pas afficher 10 mais 100, et il ne faudra pas non
plus afficher 14.

7. LES BOITES DE MESSAGE

7.1.Généralités

Nous abordons les boîtes de dialogue, qui sont des méthodes de l’objet window, que
nous verrons plus tard, dans la partie objet du langage. Même si nous n’avons pas encore
abordé la programmation objet, il me semble important de vous donner ces boites de dialogue,
qui s’avèrent utile en JS. Il en existe 3, que nous détaillerons l’une après l’autre.

[Link]()

Nous avons déjà utilisé cette méthode précédemment, sans savoir forcément ce qui en
retournait. Il ne comporte qu’un texte informatif et un bouton « OK ».

Syntaxe :
alert (paramètres) ;

Paramètres :
• Une chaîne de caractère
• Une variable
• Un enchaînement des deux, séparés par le signe "+"

Exemple 7.1 :

x=5;
alert ('Le nombre est ' + x) ;

[Link]()

Il s’agit d’une boite d’invite, composée d’un texte, d’une zone de texte, d’un bouton
« OK » et d’un bouton « Annuler ».

Syntaxe :
variable = prompt ("texte", "valeur");

La méthode retourne la valeur du champ si le bouton « OK » est choisi dans le cas

inverse (bouton « Annuler »), la variable reçoit la valeur « NULL ».

Paramètres :
• Le texte à afficher dans la boite de message
• La valeur par défaut à afficher dans la boite d’invite.

Exemple 7.2 :

x = prompt ('Votre prénom ?','prénom') ;

alert (x) ;

19
[Link]()

Il s’agit d’une boite de confirmation, composée d’un texte, d’un bouton « OK » et

d’un bouton « Annuler ».

Syntaxe :

variable = confirm ("texte");

La méthode retourne true si on clique sur « OK », et false si on clique sur « Annuler »

Paramètre :
• Le texte à afficher dans la boite de message

Exemple 7.3 :

x = prompt ('Votre prénom ?','prénom') ;

y = confirm ('Votre prénom est bien ' + x + ‘ ?’) ;

[Link] : Confirmation et vérification

Le but est de récupérer et afficher 3 informations de l’utilisateur à l’écran. Il faut

demander à l’utilisateur son login. S’il choisit annuler, on affiche la page blanche. Ensuite, on
compare le login entré avec celui attendu : s’il est différent, on redemande le login, sinon, on
continue le traitement. On demande ensuite le password. On vérifie qu’il est correct et on
continue. S’il ne l’est pas, on redemande 2 fois ce password. S’il est toujours incorrect au 3ème
essai, on affiche un message d’erreur à l‘écran, et le traitement est fini. Enfin, on demande le
prénom de l’utilisateur, puis on demande vérification à l’internaute. Si le prénom est correct,
on l’affiche à l’écran.

Pour afficher à l’écran, utiliser la méthode [Link](), en passant la chaîne à

afficher en paramètre.

Cet exercice utilisera vos connaissances au niveau des fonctions, des variables, des
structures algorithmiques, et bien entendu des boites de dialogue.

Dans la solution, le login est « prof » et le password est « abcd ». Je suis resté
classique.

8. NOTION OBJET

Bien que ce ne soit pas le but dans ce chapitre, il me semble important de rappeler le
concept objet, notamment pour ceux qui ne le connaissent pas. Il ne s’agit pas d’un cours
magistral, mais juste d’un résumé à des fins d’utilisation en JS.

[Link] concept objet

Jusque-là, nous avons vu des variables, avec une valeur, indépendantes des autres.
Maintenant, on parlera d’objet. Un objet – en général - possède des caractéristiques et des
compétences. On peut voir ces caractéristiques et utiliser les compétences. En informatique,
un objet possède des variables et des fonctions, qui permettent de décrire son comportement.
Ces variables sont appelées propriétés et ces fonctions sont appelées méthodes. De cette
façon, on peut voir les propriétés et utiliser les méthodes.

20
[Link]éation d’un objet

Un objet est créé en utilisant une fonction spéciale de la classe, précédée du mot new.
Cette fonction est appelée constructeur, et porte le nom de la classe. Un objet est appelé
instance de la classe.

Syntaxe :
var objet = new classe ();

Exemple 8.1 :
var montableau = new Array ();

[Link]ès aux propriétés et aux méthodes

On accède aux propriétés – et aux méthodes – d’un objet en accolant l’objet et sa

propriété avec l’opérateur « . ».

Syntaxe :
[Link]été
objet.méthode()

Exemple 8.2: par extrapolation

Rémi = new Homme () ;

Ré[Link] = "bleus" ;
Ré[Link] = "bruns" ;

Exemple 8.3:

[Link] ("Hello world !");

L’objet document est intégré au langage, et sa méthode write() permet d’écrire dans la
page courante.

8.4.L’objet this

Il existe un objet très utile en JS objet : this. Même s’il sera plus utile en
programmation objet, lorsque vous créerez vos classes. Il s’agit d’un objet qui représente
l’objet en cours. Il possède alors les propriétés et les méthodes de l’objet. Etant donné son
utilité minime avant la programmation objet, je ne donnerai pas d’exemple ici.

9. LES FORMULAIRES

9.1.Généralités

[Link]ésentation

On attaque ici le gros morceau du JS. Sans les formulaires, les pages HTML ne
proposent aucune interactivité avec l’utilisateur. En effet, la page appelée est envoyée par le
serveur et le browser ne fait que l’afficher, il ne peut rien faire avec le serveur. Les champs de

21
formulaire (form) permettent l’utilisateur d’entrer des informations auxquelles la page pourra
réagir. Ces réactions seront programmées à l’avance par vous. Cela reste assez limité, puisque
l’interaction ne quitte pas la machine du client, mais on peut effectuer quelques traitements.
Mon but n’est pas de vous apprendre le HTML, je ne reviendrai donc pas sur le
fonctionnement des balises.
Autre point, j’indique ici, par commodité, les propriétés JS, dont on se servira plus
loin. Ne vous en préoccupez pas si vous ne comprenez pas de quoi il s’agit.

[Link] balise form

Chaque formulaire doit être encadré par les balises <form>…</form>. Toutes les
balises seront comprises entre ces deux-là.
Si vous travaillez avec PHP ou un autre langage, vous aurez sûrement besoin
d’envoyer les informations à un serveur. Dans ce cas, indiquez dans la balise <form> la
méthode (post ou get) et l’URL du script qui traitera l’information.

Exemple 9.1 :

<form method=’post’ action=’[Link]’>

………
</form>

Si vous désirez que les informations du formulaire vous soient envoyées par mail,
précisez ‘[Link] dans l’action.

Exemple 9.2:

<form method=’post’ action=’[Link]

………
</form>

Dans chaque cas, n’oubliez pas d’insérer un bouton submit dans votre formulaire.

9.2. Champ de texte

[Link] de texte

Il s’agit de l’élément d’entrée/sortie le plus courant en JS. Une simple ligne où

l’utilisateur peut écrire quelques mots.

Syntaxe HTML:

<input type=”text” name=”nom” value="valeur" size=x

maxlength=z>

Paramètres HTML :
• name : le nom du champ (servira lors de la programmation)
• value : la valeur que vous voulez afficher dans la ligne de texte (facultatif).
• size : la longueur de la ligne de texte. Si le texte est trop long, la ligne défilera.
• maxlength : le nombre de caractères maximum contenus dans la ligne de texte
(facultatif mais conseillé).

22
Propriétés JS :
• name : indique le nom du contrôle.
• defaultvalue : indique la valeur par défaut affichée dans la ligne de texte.
• value : indique la valeur actuellement dans la zone de texte.

Exemple 9.3 :

<form method=”post” action=”[Link]

[Link] de texte

Il s’agit de plusieurs lignes de textes. Utile quand le texte est long.

Syntaxe HTML :

<textarea name=”nom” rows=x cols=y>

texte par défaut
</textarea>
Paramètres HTML :
• name : le nom du champ (servira lors de la programmation)
• rows : le nombre de lignes affichés à l’écran. Si le texte est trop long, la zone de texte
défilera.
• cols : le nombre de colonnes affichées à l’écran.

Propriétés JS :
• name : indique le nom du contrôle.
• defaultvalue : indique la valeur par défaut affichée dans la ligne de texte.
• value : indique la valeur actuellement dans la zone de texte.

Exemple 9.4 :

<form method=”post” action=”[Link]

<textarea name=”text2” rows=5 cols=20>
zone de texte
</textarea><br>
<input type="submit"name="envoi" value="envoyer">
</form>

[Link] password

Il s’agit d’une ligne de texte dont les caractères sont cachés.

Syntaxe HTML :

<input type=”password” name=”nom” value="valeur" size=x

maxlength=z>

Paramètres HTML :
• name : le nom du champ (servira lors de la programmation)

23
• value : la valeur que vous voulez afficher dans le champ (facultatif).
• size : la longueur de la ligne de texte. Si le texte est trop long, la ligne défilera.
• maxlength : le nombre de caractères maximum contenus dans la ligne de texte
(facultatif mais conseillé).

Propriétés JS :
• name : indique le nom du contrôle.
• defaultvalue : indique la valeur par défaut affichée dans la ligne de texte.
• value : indique la valeur actuellement dans le champ password.

Exemple 9.5 :

<form method=”post” action=”[Link]

[Link] à sélectionner

[Link] radios

Il s’agit de cases à cocher à choix unique. D’une forme ronde, elle sont liées entre elles
au niveau du code JS.

Syntaxe HTML :

<input type=”radio” name=”nom” value="valeur"> texte

Paramètres HTML :
• name : le nom du champ (servira lors de la programmation) il doit être identique pour
chaque choix.
• value : la valeur que vous voulez afficher dans le champ (facultatif).
• checked : à mettre sur un seul bouton, qui sera sélectionné par défaut.

Il est nécessaire de préciser le label après le contrôle (texte)

Propriétés JS :
• name : indique le nom du contrôle.
• checked : indique si le bouton radio est coché, actuellement.
• defaultchecked : indique si le bouton radio est coché ou non par défaut.
• value : indique la valeur du bouton radio.
• index : indique le rang du bouton radio, à partit de 0.

Exemple 9.6 :

<form method=”post” action=”[Link]

<input type=”radio” name=”choix” value=”1”> choix 1<br>
<input type=”radio” name=”choix” value=”2”> choix 2<br>
<input type=”radio” name=”choix” value=”3”> choix 3<br>
<input type="submit"name="envoi" value="envoyer">
</form>

24
[Link]

Il s’agit de cases à cocher à choix multiple.

Syntaxe HTML :

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

Paramètres HTML :
• name : le nom du champ (servira lors de la programmation). Il doit être différent pour
chaque choix.
• value : la valeur que vous voulez afficher dans le champ (facultatif).
• checked : à mettre sur un (ou plusieurs) bouton, qui sera sélectionné par défaut.

Il est nécessaire de préciser le label après le contrôle (texte)

Propriétés JS :
• name : indique le nom du contrôle.
• checked : indique si la case est cochée, actuellement.
• defaultchecked : indique si la case est cochée ou non par défaut.
• value : indique la valeur de la case à cocher.

Exemple 9.7 :

<form method=”post” action=”[Link]

<input type=”checkbox” name=”choix1” value=”1”>
choix 1<br>
<input type=”checkbox” name=”choix2” value=”2”>
choix 2<br>
<input type=”checkbox” name=”choix3” value=”3”>
choix 3<br>
<input type="submit"name="envoi" value="envoyer">
</form>

[Link] de sélection

Il s’agit d’une liste déroulante dans laquelle on peut sélectionner un option.

Syntaxe HTML :

<select name=”nom” size=x>

<option value="valeur"> texte
</select>

Paramètres HTML :
• name : le nom du champ (servira lors de la programmation).
• size : le nombre d’options que vous voulez afficher à l’écran. S’il n’est pas précisé, la
liste n’affiche qu’une seule ligne.
• value : la valeur que vous voulez afficher dans le champ (facultatif).
• selected : à mettre dans une balise <option>. Cette option sera sélectionnée par défaut.
• Multiple : à mettre dans une balise <select>. Autorise la sélection de plusieurs options
dans la liste déroulante.

25
Chaque option de la liste déroulante correspond à une balise <option>. Il est nécessaire
de préciser le label après chaque option contrôle (texte).

Propriétés JS :
• name : indique le nom du contrôle.
• selected : indique si le bouton radio est sélectionné
• defaultselected : indique si le bouton radio est coché ou non par défaut.
• length : indique le nombre d‘éléments de la liste.

Exemple 9.8 :

<form method=”post” action=”[Link]

<select name=”choix” size=3>
<option value=”1”>choix 1
<option value=”2”>choix 2
<option value=”3”>choix 3
</select><br>
<input type="submit"name="envoi" value="envoyer">
</form>

Exemple 9.9 :

<form method=”post” action=”[Link]

<select name=”choix”>
<option value=”1”>choix 1
<option value=”2”>choix 2
<option value=”3”>choix 3
</select><br>
<input type="submit"name="envoi" value="envoyer">
</form>

[Link]

[Link] simple

Syntaxe HTML :

<input type=”button” name=”nom” value=”valeur”>

Paramètres HTML :
• name : le nom du champ (servira lors de la programmation).
• value : la valeur que vous voulez afficher sur le bouton.

Propriétés JS :
• name : indique le nom du contrôle.
• value : indique la valeur actuelle du bouton.
• defaultselected : indique la valeur par défaut du bouton.

Exemple 9.10 :

<form method=”post” action=”[Link]

26
[Link] reset

Il permet de remettre la valeur par défaut de tous les champs du formulaire.

Syntaxe HTML :

<input type=”reset” name=”nom” value=”valeur”>

Paramètres HTML :
• name : le nom du champ (servira lors de la programmation).
• value : la valeur que vous voulez afficher sur le bouton.

Propriétés JS :
• name : indique le nom du contrôle.
• value : indique la valeur actuelle du bouton.
• defaultselected : indique la valeur par défaut du bouton.

Exemple 9.11 :

<form method=”post” action=”[Link]

<select name=”choix” size=3>
<option value=”1”>choix 1
<option value=”2”>choix 2
<option value=”3” selected>choix 3
</select><br>
<input type="reset" name="effacer" value="effacer">
</form>

[Link] submit

Il permet d’exécuter l’action prévue dans la balise <form>, comme on l’a vu dans la
partie 6.1.2.

Syntaxe HTML :

<input type=”submit” name=”nom” value=”valeur”>

Paramètres HTML :
• name : le nom du champ (servira lors de la programmation).
• value : la valeur que vous voulez afficher sur le bouton.

Propriétés JS :
• name : indique le nom du contrôle.
• value : indique la valeur actuelle du bouton.
• defaultselected : indique la valeur par défaut du bouton.

Exemple 9.12 :

<form method=”post” action=”[Link]

<select name=”choix” size=3>
<option value=”1”>choix 1

27
<option value=”2”>choix 2
<option value=”3” selected>choix 3
</select><br>
<input type="submit" name="envoi" value="envoyer">
</form>

[Link]ôle caché

Il permet de mettre dans le script des éléments (souvent des données) qui ne seront pas
affichées par le navigateur, mais qui pourront être envoyées par mail ou à un serveur.

Syntaxe HTML :

<input type=”hidden” name=”nom” value=”valeur”>

Paramètres HTML :
• name : le nom du champ (servira lors de la programmation).
• value : la valeur qui sera contenue dans le contrôle.

Propriétés JS :
• name : indique le nom du contrôle.
• value : indique la valeur actuelle du contrôle.
• defaultselected : indique la valeur par défaut du contrôle.

Exemple 9.13 :

<form method=”post” action=”[Link]

[Link] formulaire complet

Voilà un formulaire complet, utilisant la plupart des contrôles que nous avons vu ci-
dessus. Il pourrait s’agir d’un formulaire réel, mais je l’ai inventé de toutes pièces. De
nombreux sites proposent des formulaires, rien ne vous empêche d’enregistrer la page est
d’aller fouiner pour voir leur astuces…

Exemple 9.14 :

<form method=”post” action=”[Link]”>

Inscription au stage<br>
Identité<br>
<input type="hidden" name="date" value="15/06/04">
<input type=text name=”nom” value=”Nom”> 
<input type=text name=”prénom” value=”Prénom”><br>
<input type=text name=”date” value=”Date de naissance ”><br>
Activité<br>
<select name=”Activité”>
<option value=”Collégien”>Collégien
<option value=”Lycéen”>Lycéen
<option value=”Etudiant”>Etudiant

28
<option value=”Salarié”>Salarié
<option value=”Fonctionnaire”>Fonctionnaire
<option value=”Patron”>Patron
</select><br>
Qualification(s):<br>
<input type=”checkbox” name=”choix1” value=”bafa”> BAFA<br>
<input type=”checkbox” name=”choix2” value=”bafd”> BAFD<br>
<input type=”checkbox” name=”choix3” value=”rien”> rien<br>
Semaine choisie:<br>
<input type=”radio” name=”semaine” value=”1”>
1ère<br>
<input type=”radio” name=”semaine” value=”2”>
2ème<br>
<input type=”radio” name=”semaine” value=”3”>
3ème<br>
Vos motivations :<br>
<textarea name="motivations" rows=5 cols=20></textarea><br>
<input type="submit" name="envoi" value="envoyer">
 
<input type="reset" name="effacer" value="effacer">
</form>

[Link] objet du formulaire

Nous avons vu précédemment la notion d’objet7. Maintenant que nous avons vu tous
les composants d’un formulaire, nous allons pouvoir utiliser le concept objet appliqué aux
formulaires.

Même si nous n’avons pas encore vu les objets du navigateur8, nous allons introduire
ici l’objet document. Il renvoie à la page en cours. Il contient en propriétés tous les éléments
de la page. Les attributs des balises deviennent les propriétés de l’élément objet. On y a accès
de la façon suivante :

Syntaxe :
[Link].élé[Link]été

Un exemple éclairera le propos. L’exemple 9.15 montre comment attribuer une valeur
à une ligne de texte.

Exemple 9.15:

<html>
<head>
<script language = "JavaScript">
function f() {
[Link]="voici du texte";
}
</script>
</head>
<body onLoad="f();">
7
Voir, pour ceux qui auraient oublié, le chapitre [Link] OBJET.
8
Voir pour cela le chapitre [Link] OBJETS DU NAVIGATEUR.
29
<form name="form1">
<input type="text" name="texte" value="">
</form>
</body>
</html>

Dans l’exemple 9.15, la fonction est appelée à la fin du chargement grâce au

gestionnaire d’événement9 placé dans la balise <body>.

De cette façon, on peut accéder à chaque élément de chaque formulaire de la page. Il

est important de donner un nom, à la fois au formulaire et au contrôle. Ce nom doit de
préférence être explicite, même si celui du formulaire peut rester classique, étant donné qu’il
y en a rarement plusieurs sur une seule et même page. Lorsque nous travaillerons avec les
frames, en revanche, ce nom sera important.

Cette manière de pouvoir accéder aux objets est très pratique, même si pour le
moment, elle ne semble pas très utile. Cette utilité sera mise en valeur lors du prochain
chapitre. Mais avant cela, il est souhaitable de faire un petit exercice.

[Link]

Le but de cet exercice est d’arriver à un formulaire complet et assez ergonomique. Il

faudra faire attention aux choix des contrôles et à la disposition. La solution proposée n’est
pas parfaite – loin de là – mais elle illustre à peu près ce qu’est un formulaire de qualité
correcte.

Le formulaire à créer est un formulaire d’adhésion à une association, pour l’activité

échecs. Les informations demandées sont les suivantes : nom, prénom, date de naissance,
numéro de téléphone, adresse, mail, profession (choix, dont « autres : préciser »), centres
d’intérêt (choix), niveau de jeu, motivations. Vous présenterez ce formulaire de façon assez
esthétique, mais la police et la taille de caractères ne sont pas importantes, cela dépend plutôt
du cours HTML. Bien entendu, on envoie le tout à « [Link] », par la méthode « post »
en cliquant sur un bouton.

10. LES EVENEMENTS

10.1.Généralités

[Link]ésentation

Les événements sont l’intérêt du JS en matière de programmation Web. Ils donnent

une interactivité à la page que vous consultez, ce qui n’existe pas avec le HTML, si on
excepte bien entendu le lien hypertexte. Le JS permet de réagir à certaines actions de
l’utilisateur. On nomme évènement le mot Event, et gestionnaire d’événement le mot-clé
onEvent.
[Link]

Les évènements sont indiqués dans la balise, d’un formulaire, le plus souvent. Ils
apparaissent comme un paramètre supplémentaire et suivent une syntaxe particulière.

Syntaxe :
9
Nous verrons cela dans le chapitre [Link] EVENEMENTS.
30
<balise onEvent=”code">

• balise : désigne le nom de la balise HTML qui supporte l’événement.

• onEvent : désigne le gestionnaire d’événement associé à l’événement Event.
• Le code inséré entre guillemets fait le plus souvent référence à une fonction définie
dans les balises <head>…</head>. Il peut cependant s’agir d’instructions directement.

Plusieurs gestionnaires d’évènements peuvent être placés dans la même balise.

Certaines balises n’appartenant pas à un formulaire peuvent supporter des gestionnaires
d’évènement.

Exemple 10.1 :

<a href=”[Link] onClick=”alert(‘vous avez cliqué!’);”

onMouseOver=”alert(‘Héhé’) ;”> click?</a>

[Link] clic de souris

Lorsque vous cliquez sur un élément de formulaire de la page que vous consultez.

Gestionnaire d’événement :

onClick
Exemple 10.2 :

<input type=”button” onClick=”alert(‘vous avez cliqué sur le bouton’) ;">

Résultat

Balises supportées :
<input type="button">, <input type="checkbox">, <input type="radio">, <input
type="reset">, <input type="submit">, <a href..>

[Link] chargement

[Link]

Lorsque la page que vous consultez finit de se charger.

Gestionnaire d’événement :

32
onMouseOver
Exemple 10.7 :

<a href="[Link] onMouseOver=”alert(‘Pour aller sur

[Link], cliquer ici’) ;">[Link]

Balises supportées :
<a href…>, <area href…>

[Link]

Lorsque vous sortez de la zone de survol d’un lien ou d’une zone d’image activable.

Gestionnaire d’événement :

onMouseOut

Exemple 10.8 :

<a href="[Link] onMouseOut=”alert(‘Vous ne voulez pas y

aller ?’) ;">[Link]

Balises supportées :
<a href…>, <area href…>

[Link] focus

[Link]

Lorsque vous activer un contrôle texte ou sélection.

10.10.L’utilisation de l’objet document

Avant de voir les évènements, l’intérêt de l’accès aux éléments à travers l’objet
document était discutable. Maintenant, on voit que l’on peut changer des valeurs selon des
évènements, ce qui est très intéressant. Il est aussi possible de demander confirmation, de
demander si on veut vraiment changer la valeur… Tout est permis. Cette partie ne comporte
pas d’exemple, car la partie [Link] concret en présente un assez complet.

[Link] concret

Voici un exemple – parmi tant d’autres – de ce que pourrait être un formulaire

interactif, avec tous les évènements auxquels on peut penser.

Exemple 10.15 :

<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<script language="Javascript">
var TestLog = 0; //test pour le login
function ChangeLog() {
TestLog++; //incrémente le test
//si le login a été changé plus d'une fois
if (TestLog > 1) {
alert("Vous changez de login?\n Décidez-vous!");
}
}
function VerifPass () {
// si les deux password sont différents
if ([Link] != [Link]) {
alert("Vous avez entré deux password différents !\nVérifiez les deux.");
}
}

35
function VerifMail () {
//confirmation du mail
var test = confirm ("Votre mail est bien : " + [Link] + "
?");
if (test == false) { //si l'internaute ne confirme pas
alert("N'oubliez pas de changer votre mail!");
}
}
</script>
</HEAD>
<BODY>
<form name="form1">
<center>Formulaire d'inscription sur notre site</center><br/>
Login : <input type="text" name="login" onChange="ChangeLog();"
value="login"><br/>
Password : <input type="password" name="pass1"><br/>
Password (vérification) : <input type="password" name="pass2"
onBlur="VerifPass();"><br/>
Adresse e-mail : <input type="text" name="mail" onBlur="VerifMail();"
value="@"><br/>
Vous voulez recevoir la newsletter? <input type="radio" name="news"
value="yes">Oui <input type="radio" name="news" value="no" onClick="alert('Tant
pis pour vous!')">Non<br/>
<input type="submit" name="sub" value="Envoi"> <input type="reset"
name="reset" value="Effacer">
</form>
</BODY>
</HTML>

Résultat

[Link]

[Link] bouton

L’exercice consiste à faire un bouton dont la valeur s’incrémente à chaque clic. Ce

n’est pas très compliqué.

[Link] phrase
L’exercice consiste à demander 3 informations à un utilisateur, puis de les afficher
dans une zone de texte en faisant une phrase. Il faudra demander le nom à l’aide d’une boite
de message, ainsi que l’âge et la ville avec des lignes de texte. Ensuite, en cliquant sur un
bouton, on affiche une phrase contenant les 3 informations dans un zone de texte.

11. L’OBJET ARRAY

11.1.Généralités

L’objet Array n’est rien d’autre qu’un tableau. Un tableau est en quelque sorte une
liste d’éléments indexés que l’on pourra lire – chercher les données - ou écrire – entrer les
données – à volonté.

36
[Link]éation et affectation d’un tableau

11.2.1 Création d’un tableau

On créé un tableau comme n’importe quel objet de classe. On invoque le constructeur

de classe. On indique en paramètre du constructeur le nombre maximum d’éléments (x) que
l’on souhaite entrer dans le tableau. Ce nombre est cependant facultatif, car JS prend en
compte le numéro du dernier élément entré comme taille du tableau si le ce nombre n’est pas
indiqué.

Syntaxe :
variable = new Array(x) ;

Exemple 11.1 :

var MonTableau = new Array (10) ;

11.2.2 Affectation d’un tableau

On affecte un tableau très simplement. Il suffit d’affecter une valeur (y) à la variable
avec le numéro de l’élément (i) entre crochets. Ces derniers ne sont pas présents lors de la
création mais sont indispensables lors de l’affectation. Le numéro commence à 0 et finit au
nombre maximum moins 1.

Syntaxe :

variable = new Array(x) ;

variable [i] = y;
Exemple 11.2 :

var MonTableau = new Array (2) ;

MonTableau [0] = 7 ;
MonTableau [1] = 4 ;
Evidemment, à ce rythme-là, l’affectation est longue, surtout si votre tableau compte
plus que quelques éléments. C’est pourquoi on utilise la boucle itérative for. L’exemple
suivant entre une série de nombre en ajoutant 1 à chaque fois. Il s’agit d’un exemple rapide et
simple, mais on peut imaginer faire un calcul ou demander une valeur à l’utilisateur à chaque
boucle.

Exemple 11.3 :

var MonTableau = new Array (5) ;

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

[Link]ès aux données d’un tableau

On accède aux données d’un tableau en indiquant le numéro de l’élément entre

crochets. On affecte cette valeur à une variable, par exemple. On peut aussi la rentrer comme
paramètre d’une fonction.

37
Syntaxe :

variable1 = new Array(x) ;

variable1 [i] = y ;
variable2 = variable1 [i] ;

Exemple 11.4 :

var MonTableau = new Array (2) ;

MonTableau [0] = 7 ;
var element = MonTableau [0] ;
[Link] (MonTableau [0]) ;

[Link] à 2 dimensions

Pour créer un tableau à 2 dimensions, on utilise l’astuce suivante : on déclare chaque

élément comme un nouveau tableau.

Syntaxe :

variable = new Array (x) ;

variable [i] = new Array (y) ;

Exemple 11.5 :

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.

Exemple 11.6 :

var MonTableau = new Array (5) ;

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

Avec ce système, on peut créer un tableau à 3,4 dimensions ou plus, bien que l’utilité
en soit quelque peu douteuse…

[Link]étés et méthodes

Comme tout objet, l’objet Array possède une propriété et des méthodes qui s’avèrent
assez utiles.

[Link]été

L’objet Array ne possède qu’une propriété – length – qui désigne le nombre

d‘éléments du tableau.

Syntaxe :
variable = new Array (x) ;

38
y = [Link] ;

Exemple 11.7 :

var MonTableau = new Array (2) ;

[Link] ([Link]) ;

11.5.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 11.8 :

var MonTableau = new Array (4) ;

MonTableau [0] = “Moi” ;
MonTableau [1] = “Toi” ;
MonTableau [2] = “Lui” ;
MonTableau [3] = “Elle” ;
[Link]() ;
[Link] ([Link](‘ ‘)) ;
[Link]() ;
[Link] ("<br>" + [Link](‘ ‘)) ;

[Link] concret

Le but de cet exemple est de remplir et afficher les valeurs à 0.1 près comprises entre 0
et 10 exclu. Pour cela, on utilise un tableau à deux dimensions, dont la première indique la
partie entière du nombre, et la deuxième dimension indique la partie décimale. On va d’abord
créer le tableau, puis le remplir et enfin l’afficher.

Exemple 11.9 :

39
<script language="Javascript">
var Tableau = new Array (10) ; // objet tableau
for (i = 0; i < 10; i++) { // pour chaque élément...
Tableau[i] = new Array(10); // on redéfinit un tableau
}
// remplissage du tableau
for (i = 0; i < 10; i++) { /* pour chaque élément de la première dimension*/
for (j = 0; j < 10; j++) { /* pour chaque élément de la seconde
dimension*/
Tableau[i][j] = i + "." + j; //on remplit l'élément
}
}
// affichage du tableau
for (i = 0; i < 10; i++) { /* pour chaque élément de la première dimension */
for (j = 0; j < 10; j++) { /* pour chaque élément de la seconde dimension
*/
[Link]( Tableau[i][j] + " ; " ); /*on affiche l'élément, avec
un point virgule */
}
[Link] ("<br>"); /* a chaque unité, on revient à la ligne. */
}
</script>

[Link]

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.

[Link] OBJETS DU NAVIGATEUR

12.1.Généralités

Nous avons vu les classes prédéfinies en JS. Il existe aussi plusieurs objets en JS
rattachés à la fenêtre, à la page et au navigateur. Ils sont appelés window, document et
navigator. Ce sont 3 classes distinctes - sans lien entre elle – puisque l’héritage n’existe pas
en JS. Nous étudierons chaque classe l’une après l’autre. Cependant, l’objet document fait
partie de l’objet window.

[Link]

Je présente ici l’arborescence des objets de JS. Elle comprend les 3 objets principaux
ainsi que tous les « sous-objets » contenus dans chaque objet principal.

40
navigator document
plugins [] all / layers

window frames[]

parent images[]

frames[] anchors[]

top applets[]

opener plugins[]

history links[]

location forms []

external elements []

screen

event

document

13.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.
L’objet navigator étant intégré dans le langage, il n’est pas nécessaire de créer une
instance de cette classe.

[Link] 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ées 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.

Certaines propriétés ne fonctionnent qu’avec Microsoft Internet Explorer. Veillez à

tester le type de browser avant d’exécuter le script !

41
• appMinorVersion : numéro de version mineure.
• browserLanguage : code langue du browser.
• userLanguage : code langue de l’utilisateur.
• systemLanguage : code langue du système d’exploitation.
• cpuClass : classe du processeur.
• platform : code type de plate-forme (pc, mac, linux …).
• cookieEnabled : booléen qui indique si l’utilisateur accepte les cookies.
• onLine : booléen qui indique si le poste est connecté à Internet.

Une propriété existe sous Netscape pour remplacer la propriété browserLanguage

d’Internet Explorer.

• language : code langue du browser.

[Link] méthodes de navigator

Dans cette partie, je vous cite les méthodes de navigator, mais malheureusement, je ne
suis pas en mesure de vous expliquer leur utilité. Si vous le savez, merci de me le faire savoir.

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

• javaEnabled()
• taintEnabled()

[Link] objets de navigator

L’objet navigator contient un autre objet, qui n’hérite pas de lui. Il s’agit du tableau
plugins, qui n’est reconnu que par Netscape. Il s’agit de la liste de tous les plugins installés.
Personnellement, je ne vois pas l’utilité de cet objet, mais par souci didactique, je vous le
décris.

Syntaxe :
variable = [Link]été ;

• [Link] : nombre de plugins

• plugins[i].name : nom du plugin n° i.
• plugins[i].filename : nom de l’exécutable du plugin n° i.
• plugins[i].description : description du plugin n° i.
• plugins[i].length : nombre de types de fichiers supportés par le plugin n° i.
• plugins[i][j].type : type n° j du plugin n° i.
• plugins[i][j].suffixes : Extensions des fichiers du type n° j du plugin n° i.

[Link]

Le but de l’exemple 13.1 est d’afficher les informations du navigateur, en fonction de

celui-ci. On commencera donc par tester le type de navigateur. L’exemple 13.1 n’est pas
commenté car il n’ a rien de nouveau excepté les propriétés vues ci-dessus.

Exemple 13.1 :

42
[Link] ([Link] + "<br>");
[Link] ([Link] + "<br>");
[Link] ([Link] + "<br>");
[Link] ([Link] + "<br>");
if ([Link] == "Microsoft Internet Explorer") {
[Link] ([Link] + "<br>");
[Link] ([Link] + "<br>");
[Link] ([Link] + "<br>");
[Link] ([Link] + "<br>");
[Link] ([Link] + "<br>");
[Link] ([Link] + "<br>");
[Link] ([Link] + "<br>");
[Link] ([Link] + "<br>");
}
else {
[Link] ([Link] + "<br>");
}
</script>

Ce chapitre ne comporte pas d’exercice car le contenu est assez restreint. L’exemple
13.1 devrait suffire à illustrer l’objet navigator.

14.L’OBJET WINDOW

Il s’agit – comme son nom l’indique – de la fenêtre du browser en cours d’exécution.

Tous les éléments de la fenêtre sont des propriétés ou des méthodes de window.
L’objet window étant intégré dans le langage, il n’est pas nécessaire de créer une
instance de cette classe.

[Link] 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 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.

[Link] méthodes de window

14.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.

43
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.

[Link] 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.
• 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.

[Link]

Voici, pour illustrer les liste proposée ci-dessus, deux façons e faire un chronomètre.
La première utilise la méthode setInterval() – moins connue - , ce qui économise une ligne de
code. La seconde utilise la méthode setTimeout() – plus connue - qui doit être rappelée à
chaque boucle. Le reste du code est identique. Il sert à incrémenter à chaque fois les secondes,
et permet de rendre l’affichage un peu plus agréable.

Exemple 14.1 :

<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<script language="Javascript">
var seconds = 0;
var minutes = 0;

44
var hours = 0;
function chrono () {
if (seconds == 60) {
seconds = 0;
minutes++;
}
if (minutes == 60) {
minutes = 0;
hours++;
}
h = hours;
m = minutes;
s = seconds;
if (s < 10) s = "0" + s;
if (m < 10) m = "0" + m;
if (h < 10) h = "0" + h;
[Link] = h + ":" + m + ":" + s;
seconds++;
}
</script>
</HEAD>
<BODY onLoad="[Link]('chrono();',1000)">
<form name="form1">
<center><input type="text" value="" name="chrono" size=6></center>
</form>
</BODY>
</HTML>

45
Exemple 14.2 :

<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<script language="Javascript">
var seconds = 0;
var minutes = 0;
var hours = 0;
function chrono () {
if (seconds == 60) {
seconds = 0;
minutes++;
}
if (minutes == 60) {
minutes = 0;
hours++;
}
h = hours;
m = minutes;
s = seconds;
if (s < 10) s = "0" + s;
if (m < 10) m = "0" + m;
if (h < 10) h = "0" + h;
[Link] = h + ":" + m + ":" + s;
seconds++;
[Link]('chrono()',1000);
}
</script>
</HEAD>
<BODY onLoad="chrono();">
<form name="form1">
<center><input type="text" value="" name="chrono" size=6></center>
</form>
</BODY>
</HTML>

[Link] évènements de window

On peut rattacher certains évènements à l’objet window. Ils seront placés dans la
balise <body>, grâce au gestionnaire d’événement onEvent.

Syntaxe :

• load : fin de chargement de la page.

• unLoad : déchargement de la page.
• focus : prise de focus de la fenêtre ou d’un de ses éléments.
• blur : perte de focus de la fenêtre ou d’un de ses éléments.
• resize : redimensionnement de la fenêtre.

46
Pour plus de précisions, consultez le chapitre 7, relatif aux évènements de Javascript.

[Link] 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() ;

14.4.1.L’objet frames

Il s’agit d’un tableau contenant tous les frames déclarées dans la page. Il ne possède ni
propriétés ni méthodes.

Syntaxe :
variable = [Link][i] ;

14.4.2.L’objet parent

Il s’agit de la page principale, qui contient la déclaration de toutes les frames. Il

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

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

14.4.3.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é ;

14.4.4.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é ;

47
14.4.5.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.

14.4.6.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 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 elles renvoient 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.

14.4.7.L’objet screen
Il s’agit de toutes les informations du système d’affichage de l’utilisateur. Il y a 4
propriétés rattachées à cet objet.

Syntaxe :

variable = [Link]été ;

• availHeight : hauteur en pixels de la zone utilisable pour l’affichage.

• availWidth : largeur en pixels de la zone utilisable pour l’affichage.

48
• height : hauteur de la fenêtre en pixels - contient barres de menus, d’état, de titre et de
scrolling - .
• width : largeur de la fenêtre en pixels - contient barres de menus, d’état, de titre et de
scrolling - .
• colorDepth : Contient la profondeur de couleur en nombre de bits.

14.4.8.L’objet event

Il s’agit d’un objet propre à Microsoft Internet Explorer. Il renvoie le type

d’événement qui a eu lieu.

Syntaxe :

variable = [Link]été ;

• altKey : renvoie le code du caractère frappé au clavier.

• button : renvoie le type de clic de souris effectué.

14.4.9.L’objet external

Il s’agit d’un objet propre à Microsoft Internet Explorer. Il permet d’accéder aux
propriétés du navigateur.

Syntaxe :
variable = [Link]été ;

• AddFavorite(URL,titre): Ajoute une ligne à la liste des favoris. Demande confirmation

à l’internaute.

[Link] concret

Dans l’exemple 14.1, on a voulu afficher les attributs de la fenêtre (hauteur/largeur,

place affichable) ainsi que l’URL en cours. Il n’y a pas de commentaires car les instructions
utilisées sont détaillées ci-dessus.

Exemple 14.3 :

[Link]

Le but de l’exercice est de donner à l’utilisateur la possibilité de modifier la fenêtre à

l’aide de boutons. Il pourra redimensionner et revenir à la taille initiale, la déplacer et la
remettre en position initiale, lui enlever le focus, et la fermer. Lors de la fermeture,
l’utilisateur sera averti par une boite de message.

49
15.L’OBJET DOCUMENT

Il s’agit – comme son nom l’indique – de la page en cours d’exécution. Tous les
éléments de la page sont des propriétés ou des méthodes de document.
L’objet document étant intégré dans le langage, il n’est pas nécessaire de créer une
instance de cette classe.
L’objet document fait partie de l’objet window, mais il n’est pas nécessaire de préciser
le suffixe "window."

[Link] propriétés de document

Toutes ces propriétés correspondent à des éléments de la page ouverte. Cela permet
d’uniformiser et de changer quelques détails de votre page. On les utilise grâce à la syntaxe
habituelle.

Syntaxe :

[Link]été;

• bgColor : couleur du fond.

• fgColor : couleur du texte.
• linkColor : couleur des liens ni actifs ni visités.
• alinkColor : couleurs des liens actifs.
• vlinkColor : couleurs des liens visités.
• cookie : chaîne de caractères contenant les cookie.
• lastModified : date de dernière modification du fichier source
• referrer : adresse de la page par laquelle la page en cours a été appelée.
• title : titre du document, indiqué par les balises <title>…</title>. N’est modifiable
qu’avec Microsoft Internet Explorer.
• fileSize : taille de la page en octets.
• defaultCharset : jeu de caractère du document chargé.
• mimeType : type du document chargé.
• URLUnencoded : URL complète de la page, avec les caractères spéciaux encodés.
• URL : URL de la page.
• protocol : protocole de chargement de la page.
• domain : domaine de l’URL complète de la page.

Exemple 15.1 :

50
[Link] méthodes de document

L’objet document possède de plusieurs méthodes, dont certaines que nous avons déjà
vu précédemment.

Syntaxe :

variable = document.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.

• write (‘texte’) : affiche le texte et le code HTML dans la page courante.

• getSelection () : renvoie le texte qui a été sélectionné dans la page.
• handleEvents : créé un gestionnaire d’évènement.
• captureEvents : détecte un évènement.
• open () : ouvre une nouvelle fenêtre de votre browser.
• close () : ferme le flux d’affichage externe.
• getElementById(ID) : renvoie un objet HTML en fonction de son ID. A ne pas
confondre avec le Name.
• getElementsByName(nom) : renvoie un objet HTML en fonction de son name.
• getElementsByTagName(type) : renvoie un tableau de toutes les balises HTML du
type passé en paramètre.
Exemple 15.2 :

<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<script language="Javascript">
function f() {
var tab = [Link] ("input");
var result;
for (i = 0; i < [Link]; i++) {
result = result + " " + (tab[i].value);
}
[Link] = result;
}
</script>
</HEAD>
<BODY>
<form name="form1">
<input type="text" name="1" value=" "><br/>
<input type="text" name="2" value=" "><br/>
<input type="text" name="3" value=" "><br/>
<input type="text" name="4" value=" "><br/>
<input type="text" name="5" value=" "><br/>
<input type="button" value="click!" name="click" onClick="f();"><br/>
<textarea rows=4 cols=40 name="result"></textarea>
</form>
</BODY>
</HTML>

51
[Link] évènements de document

On peut rattacher certains évènements à l’objet document.

• onClick : clic de souris sur un élément de la page.

• onDblClick : le double clic de souris.
• onKeyPress : la frappe d’une touche de clavier.

Pour plus de précisions, consultez le chapitre 7, relatif aux évènements de Javascript.

[Link] objets de document

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

Syntaxe :

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

Nous préciserons ici que tout élément de la page est en soit un objet de document. On
y accède selon la syntaxe ci-dessus. Il serait trop lourd de donner la liste des éléments, qui
sont répertoriés dans tout cours HTML digne de ce nom.

15.4.1.L’objet all

Il s’agit d’un tableau contenant tous les calques déclarés dans la page dans les balises
<div>…</div>. Il s’agit d’une particularité de Microsoft Internet Explorer. Il possède les
propriétés de la balise <div>.

Syntaxe :

[Link][“calque”].[Link]été = x ;

15.4.2.L’objet layers

C’est l ‘équivalent de l’objet all pour Netscape, pour les calques des balises <div> ou
<layer>. Il possède les propriétés de la balise <div>.

Syntaxe :

[Link][“calque”].[Link]été = x ;

15.4.3.L’objet forms

Il s’agit d’un tableau contenant tous les formulaires du document. Il possède une
propriété – elements[] – qui est un tableau de tous les éléments de formulaire.

Syntaxe :

[Link][i].elements[j] ;

52
15.4.4.L’objet anchors

Il s’agit d’un tableau contenant toutes les ancres – les balises <a> - de la page
courante. Il ne possède ni propriétés ni méthodes.

Syntaxe :

[Link][i] ;

15.4.5.L’objet images

Il s’agit d’un tableau contenant toutes les images – les balises <img> - de la page
courante. Il ne possède ni propriétés ni méthodes. Cela permet de faire des effets, par exemple
des rollovers, sur les images.

Syntaxe :

[Link][i] ;

15.4.6.L’objet applets

Il s’agit d’un tableau contenant toutes les applets java déclarés dans la page courante.
Il ne possède ni propriétés ni méthodes.

Syntaxe :

[Link][i] ;

15.4.7.L’objet plugins
Il s’agit du tableau plugins, qui n’est reconnu que par Netscape. Il s’agit de la liste de
tous les plugins installés. Il est aussi rattaché à l’objet navigator. Je ne préciserai pas une
nouvelle fois les propriétés. Pour cela, voyez la section [Link] objets de navigator.

15.4.8.L’objet frames

Il s’agit d’un tableau contenant tous les frames déclarées dans la page courante. Il ne
possède ni propriétés ni méthodes.

Syntaxe :

[Link][i] ;

[Link]

Vous devez créer un formulaire avec un texte, dans lequel on pourra entrer une couleur
dans une zone de texte et avec un click, on change soit la couleur du texte, soit la couleur du
fond.

53
[Link] OBJET DU NOYAU JAVASCRIPT

16.1.Généralités

Le langage JS n’est pas un langage orienté objet, mais il possède une partie des
concepts d’un langage objet comme le C++. Nous avons déjà vu précédemment ce concept10.
Certains de ces objets ne vous sont pas inconnus. Vous connaissez l’objet boolean. Nous
avons vu l’objet Array. Nous verrons dans ci-après les 4 autres objets intégrés au JS. Il s’agit
de l’objet Math, de l’objet String, de l’objet Date et de l’objet Image.

[Link] précisions

Certains de ces objets seront déjà définis, comme l’objet Math. L’objet String est
défini par une variable – il s’agit des chaînes de caractères – et n’a pas besoin de constructeur.
Les objets Date et Image nécessitent un constructeur, intégré au langage, mais qu’il faut
appeler selon la syntaxe habituelle. Certains objets Image existent déjà dans votre page, sans
que vous le sachiez. Il s’agit des balises <img>. Ces dernières n’ont donc pas besoin de faire
appel au constructeur.

17.L’OBJET MATH

[Link]

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) ;

[Link] diverses

Ces fonctions étant simples, je ne fournirai pas d’exemples.

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

• 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.

[Link] trigonométriques

• sin(x)
• asin(x)
• cos(x)
• acos(x)
• tan(x)
• atan(x)

54
[Link] logarithmiques

• exp(x)
• log(x)

[Link]

• [Link]
• math.LN2
• math.LN10
• math.E
• math.LOG2E
• math.LOG10E

[Link]

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).

Syntaxe :
with (math) {
code...
}
Exemple 17.1 :

with (Math) {
x = sqrt (238) ;
y = sin (x) ;
[Link](y) ;
}

[Link]

L’exercice est relativement simple. Il consiste à afficher la racine carrée de tous les x
entiers, compris dans [0 ; 20]. Le résultat doit être arrondi à l’entier.

18.L’OBJET STRING

18.1.Généralités

Un objet string est une chaîne de caractères. Il possède une propriété et 7 méthodes.
Cette 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.

[Link] propriété

Il s’agit de la longueur de la chaîne, "length".

Syntaxe :
variable1 = [Link] ;

55
variable = (“chaine”).length ;

Exemple 18.1 :

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

[Link] méthodes

[Link] ()

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.

Syntaxe :
chaine1 = [Link](x) ;
chaine1 = (“chaine”).charAt(x) ;
chaine1 = charAt(chaine2,x) ;

Exemple 18.2 :

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

[Link] ()

Cette méthode renvoie les nombre ASCII passés en paramètres sous forme de chaîne
de caractère.

Syntaxe :
[Link](i1,i2,i3)

Exemple 18.3 :

[Link]([Link](12,105,123,104)) ;

[Link] ()

Cette méthode renvoie le code ASCII du caractère présent à la position indiquée en

paramètre.

Syntaxe :
variable = [Link](position)

Exemple 18.4 :

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

56
[Link] ()

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.

Syntaxe :
variable = [Link] (chaine_partielle, x)

Exemple 18.5 :

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

[Link] ()

Syntaxe :
variable = [Link] (chaine_partielle, x)

Exemple 18.6 :

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

[Link] ()

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.

Syntaxe :
variable = [Link] (x,y)

Exemple 18.7 :

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

[Link] ()