Javascript
Javascript
Version de
Navigateurs
JavaScript
JavaScript 1.0 Netscape Navigator 2.0, Internet Explorer 3.0, Opera, Mozilla
JavaScript 1.1 Netscape Navigator 3.0, Opera, Mozilla
JavaScript 1.2 Netscape Navigator 4.0/4.05, Internet Explorer 4.0, Opera, Mozilla
JavaScript 1.3 Netscape Navigator 4.06, Internet Explorer 5.0, Opera, Mozilla
JavaScript 1.4 Netscape Navigator 6.0, Internet Explorer 6.0, Opera, Mozilla
JavaScript 1.5 Netscape Navigator 6.0, Mozilla
Il ne faut pas confondre le JavaScript et le Java. En effet contrairement au langage Java, le
code est directement écrit dans la page HTML, c'est un langage peu évolué qui ne permet
aucune confidentialité au niveau des codes (ceux-ci sont effectivement visibles).
D'autre part l'applet Java (le programme) a été préalablement compilée, et une machine
virtuelle permettant d'interpréter le pseudo-code doit être chargée en mémoire (du côté du
client) à chaque chargement de la page, d'où un important ralentissement pour les applets
Java contrairement au JavaScript.
1
JavaScript Java
Langage pseudo-compilé
Langage interprété
(chargement d'une machine virtuelle)
Code (applet) à part du document HTML,
Code intégré au HTML
appelé à partir de la page
Langage fortement typé (déclaration du type
Langage peu typé
de variable)
Liaisons dynamiques: les références des Liaisons statiques: les objets doivent exister
objets sont vérifiées au chargement au chargement (compilation)
Accessibilité du code Confidentialité du code
Sûr: ne peut pas écrire sur le disque dur Sûr: ne peut pas écrire sur le disque dur
Le JavaScript est case sensitive (en français sensible à la casse), c'est-à-dire qu'il fait une
différence entre un nom de variable contenant ou non des majuscules. Ainsi la
fonction bonjour(); n'est pas la même fonction que Bonjour();.
Enfin, comme en langage C, chaque instruction se termine par un point-virgule (;).
2
l'intérieur même des balises de script. Ainsi les anciens navigateurs ignoreront tout
simplement l'intégralité du script, tandis que les navigateurs récents l'interprèteront (comme il
se le doit) comme du JavaScript!
Voici ce que donne le script une fois "masqué" pour les anciens navigateurs :
<SCRIPT language="JavaScript">
<!--
// -->
</SCRIPT>
d'une part pour s'y retrouver lorsque, plusieurs mois après, l'on voudra revoir son
script
d'autre part par esprit d'échange pour permettre à vos visiteurs curieux de
comprendre votre script (cela n'est pas toujours désiré...)
Il ne faut pas confondre les balises de commentaires du langage HTML (destinées à
masquer le script pour certains browsers) et les caractères de commentaires JavaScript
(permettant de documenter son script)!
Pour écrire des commentaires, JavaScript utilise les conventions utilisées en langage C/C++
Un exemple de JavaScript
3
Comme généralement dans les tutoriels de JavaScript on va faire afficher une boîte de
dialogue suite au chargement d'une page HTML. Dans ce cas le script est totalement inutile
voire ennuyeux pour vos visiteurs... Cet exemple montre ce que l'abus de JavaScript peut
donner... Il faudra apprendre à se servir du JavaScript avec modération!
Voici la page HTML correspondante :
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
alert("Voici un message d\'alerte!");
// -->
</SCRIPT>
</BODY>
</HTML>
4
Grâce aux événements
Le code JavaScript peut être inséré où vous le désirez dans votre page Web, vous devez
toutefois veiller à ce que le navigateur ait entièrement chargé votre script avant d'exécuter
une instruction. En effet, lorsque le navigateur charge votre page Web, il la traite de haut en
bas, de plus vos visiteurs (souvent impatients) peuvent très bien interrompre le chargement
d'une page, auquel cas si l'appel d'une fonction se situe avant la fonction dans votre page il
est probable que cela génèrera une erreur si cette fonction n'a pas été chargée.
Ainsi, on place généralement le maximum d'éléments du script dans la balise d'en-tête (ce
sont les éléments située entre les balises <HEAD> et </HEAD>). Les événements
JavaScript seront quant à eux placés dans le corps de la page (entre les balises <BODY> et
</BODY>) comme attribut d'une commande HTML...
<SCRIPT language="JavaScript">
<!--
// -->
</SCRIPT>
L'argument de la balise <SCRIPT> décrit le langage utilisé. Il peut être "JavaScript"
"JavaScript1.1" "JavaScript1.2".
On peut ainsi (en passant un argument différent de "JavaScript") utiliser d'autres langages
de programmation que celui-ci (par exemple le VbScript).
Pour utiliser différentes versions de JavaScript tout en conservant une certaine compatibilité,
il suffit de déclarer plusieurs balises SCRIPT ayant chacune comme paramètre la version du
JavaScript correspondante.
Il est possible de mettre les codes de JavaScript en annexe dans un fichier (à partir de
Netscape 3.0 uniquement). Le code à insérer est le suivant :
5
Grâce aux événements
On appelle événement une action de l'utilisateur, comme le clic d'un des boutons de la
souris. Le code dans le cas du résultat d'un événement s'écrit :
<balise eventHandler="code JavaScript à insérer">
eventHandler représente le nom de l'événement.
Le concept de variable
Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront
être modifiées lors de l'exécution du programme.
En JavaScript, les noms de variables peuvent être aussi longs que l'on désire, mais doivent
répondre à certains critères :
6
var, void, volatile
while, with
sont également considérés comme mots réservés le nom des objets
JavaScript
Nom de variable correct Nom de variable incorrect Raison
La déclaration de variables
Le JavaScript étant très souple au niveau de l'écriture (à double-tranchant car il laisse passer
des erreurs...), la déclaration des variables peut se faire de deux façons :
soit de façon explicite, en faisant précéder la variable du mot clé var qui permet
d'indiquer de façon rigoureuse qu'il s'agit d'une variable :
var chaine= "bonjour"
soit de façon implicite, en laissant le navigateur déterminer qu'il s'agit d'une
déclaration de variable. Pour déclarer implicitement une variable, il suffit d'écrire le nom
de la variable suivie du caractère = et de la valeur à affecter :
chaine= "bonjour"
Même si une déclaration implicite est tout à fait reconnue par le navigateur, il est plus
rigoureux de déclarer les variables de façon explicite avec le mot var.
<SCRIPT language="JavaScript">
<!--
var MaVariable;
var MaVariable2 = 3;
7
MaVariable = 2;
document.write(MaVariable*MaVariable2);
// -->
</SCRIPT>
<SCRIPT language="Javascript">
<!--
var a = 12;
var b = 4;
function MultipliePar2(b) {
var a = b * 2;
return a;
}
document.write("Le double de ",b," est ",MultipliePar2(b));
document.write("La valeur de a est ",a);
// -->
</SCRIPT>
Dans l'exemple ci-dessus, la variable a est déclarée explicitement en début de script, ainsi
que dans la fonction. Voici ce qu'affiche ce script :
Le double de 4 est 8
La valeur de a est 12
Voici un autre exemple dans lequel a est déclarée implicitement dans la fonction :
<SCRIPT language="Javascript">
8
<!--
var a = 12;
var b = 4;
function MultipliePar2(b) {
a = b * 2;
return a;
}
document.write("Le double de ",b," est ",MultipliePar2(b));
document.write("La valeur de a est ",a);
// -->
</SCRIPT>
Voici ce qu'affiche ce script :
Le double de 4 est 8
La valeur de a est 8
Ces exemples montrent la nécessité de déclarer systématiquement des
nouvelles variables avec le mot clé var
Nombre entier
Un nombre entier est un nombre sans virgule, qui peut être exprimé dans différentes bases :
Base décimale: L'entier est représenté par une suite de chiffre unitaires (de 0 à 9) ne
devant pas commencer par le chiffre 0
9
Base hexadécimale: L'entier est représenté par une suite d'unités (de 0 à 9 ou de A à
F (ou a à f)) devant commencer par 0x ou 0X
Base octale: L'entier est représenté par une suite d'unités (incluant uniquement des
chiffres de 0 à 7) devant commencer par 0
Les angles dans JavaScript sont toujours exprimés en radians (lorsque l'on
utilise par exemple les méthodes trigonométriques de l'objet Math.
Nombre à virgule (float)
Un nombre à virgule flottante est un nombre à virgule, il peut toutefois être représenté de
différentes façons :
Conversions de types
Même si JavaScript gère de façon transparente les changements de type des variables, il est
parfois nécessaire de forcer la conversion du type. Ainsi JavaScript fournit deux fonctions
natives permettant de convertir le type des variables passées en paramètre :
La fonction parseInt() permet de convertir une variable passée en paramètre (soit en tant
que chaîne de caractère, soit en tant que nombre dans la base précisée en second
paramètre) et le convertit en nombre entier (en base décimale).La syntaxe de la
fonction parseInt() est la suivante :
parseInt(chaine[, base]);
Pour que la fonction parseInt() retourne un entier, la chaine passée en paramètre doit
commencer par des caractères valides c'est-à-dire les chiffres [0-9] ou le préfixe
hexadécimal 0x, et/ou les caractères +, -, E ete. Dans le cas contraire la
fonction parseInt() retournera la valeur NaN (Not a Number).
Dans les navigateurs supportant une version de JavaScript antérieure à la
version 1.1, le chiffre 0 sera renvoyé.
Si les caractères suivants ne sont pas valides, ils seront ignorés par la fonction parseInt(). Si
la chaîne passée en paramètre représente un nombre possédant une partie littérale, celle-ci
sera tronquée.
Le paramètre base est un entier facultatif permettant de préciser la base devant être utilisée
pour interpréter la chaîne. Il vaut 10 par défaut . Si le paramètre base n'est pas précisé (ou
s'il est fixé à la valeur 10), la base utilisée sera la base décimale; la base sera 16 si la chaîne
commence par 0x, elle sera 8 si la chaîne commence par 0.
Pour illustrer l'intérêt de la fonction parseInt() rien de tel qu'un exemple. Soient les
variables a et b :
var a = "123";
var b = "456";
Selon que l'on utilise la fonction parseInt() ou non, l'utilisation de l'opérateur + avec ces deux
variables donnera un résultat différent :
document.write(a+b,"<BR>"); // Affiche 123456
document.write(parseInt(a)+parseInt(b),"<BR>"); // Affiche 579
Le tableau suivant donne des exemples d'utilisation de la fonction ParseInt() :
Exemple Résultat
parseInt("128.34"); 128
parseInt("12.3E-6"); 12
parseInt("12E+6"); 12
parseInt("Bonjour"); NaN
parseInt("24Bonjour38"); 24
11
parseInt("Bonjour3824"); NaN
parseInt("AF8BEF"); NaN
parseInt("0284"); 2
parseInt("0284",8); 2
parseInt("AF8BEF",16); 11504623
parseInt("AB882F",16); 11241519
parseInt("0xAB882F"); 11241519
parseInt("0xAB882F",16); 11241519
parseInt("00100110"); 32840
parseInt("00100110",2); 38
parseInt("00100110",8); 32840
parseInt("00100110",10); 100110
parseInt("00100110",16); 1048848
parseFloat()
La fonction parseFloat() est une fonction du noyau JavaScript permettant de convertir une
variable passée en paramètre en nombre en virgule flottante (nombre avec une partie
décimale). La syntaxe de la fonctionparseFloat() est la suivante :
parseFloat(chaine);
Pour que la fonction parseFloat() retourne un flottant, la chaine passée en paramètre doit
commencer par des caractères valides c'est-à-dire les chiffres [0-9] et/ou les caractères +, -,
E et e. Dans le cas contraire la fonction parseFloat() retournera la valeur NaN (Not a
Number).
12
Dans les navigateurs supportant une version de JavaScript antérieure à la
version 1.1, le chiffre 0 sera renvoyé.
Si les caractères suivants ne sont pas valides, ils seront ignorés par la fonction parseFloat().
Si la chaîne passée en paramètre représente un nombre possédant une partie littérale, celle-
ci sera tronquée.
Le tableau suivant donne des exemples d'utilisation de la fonction parseFloat() :
Exemple Résultat
parseFloat("128.34"); 128.34
parseFloat("128,34"); 128
parseFloat("12.3E-6"); 0.0000123
parseFloat("Bonjour"); NaN
parseFloat("24.568Bonjour38"); 24.568
parseFloat("Bonjour38.24"); NaN
parseFloat("AF8BEF"); NaN
parseFloat("0284"); 284
parseFloat("0xAB882F"); 0
Un tableau, en JavaScript, est donc une variable pouvant contenir plusieurs données
indépendantes, indexées par un numéro, appelé indice. L'indice d'un tableau est ainsi
l'élément permettant d'accéder aux données qui y sont stockées.
13
Tableaux multidimensionnels
Lorsque le tableau est composé uniquement de variables, on parle de tableau monodimensionnel
(ou unidimensionnel). Voici une manière de représenter un tableau unidimensionnel :
Indice 0 1 2 3
Donnée donnée 1 donnée 2 donnée 3 donnée 4
Remarquez que le premier élément d'un tableau porte toujours l'indice 0 !
Dans un tableau à n éléments, le n ième
élément porte ainsi l'indice n-1.
Lorsqu'un tableau contient lui-même d'autres tableaux on parle alors de tableaux
multidimensionnels. Voici une représentation d'un exemple de tableau multidimensionnel :
0 1 2 3
donnée 2 (tableau) donnée 4 (tableau)
donnée 1 0 1 2 donnée 3 0 1
(variable) (variable)
donnée 1 donnée 2 donnée 3 donnée 1 donnée 2
Tableaux associatifs
Il est possible d'utiliser des indices personnalisés pour indexer les valeurs du tableau, on
parle alors de tableau associatif. JavaScript autorise en effet l'utilisation d'une chaîne ou d'un
nombre spécifique pour indexer les valeurs du tableau. Voici un exemple de représentation d'un
tableau associatif :
"Pierre
Indice "Paul" "André" "Jean-François"
"
Donnée 16 22 12 25
Création de tableau
Le langage JavaScript fournit plusieurs façons de créer un tableau :
var MonTableau = ["donnée 1", "donnée 2", "donnée 3", "donnée 4"];
var MonTableau = new Array("donnée 1", "donnée 2", "donnée 3", "donnée 4");
Ci-dessus le tableau est initialisé avec des valeurs à la création. Pour plus de rigueur, un
tableau devrait être déclaré avant que l'on lui affecte des valeurs. La déclaration d'un tableau
se fait comme suit :
14
Accès aux données
L'accès aux éléments du tableau se fait en écrivant le nom du tableau suivi de crochets
contenant l'indice de l'élément.
Affectation de valeurs
Pour créer un tableau associatif, il suffit de déclarer une variable tableau, puis d'écrire le nom
du tableau, suivi d'un nom de l'indice entre parenthèse et lui affecter une donnée grâce à
l'opérateur d'affectation :
MonTableau[0] = "Bonjour";
MonTableau["Pierre"] = 12;
MonTableau["Jean-François"] = 25;
Manipulation de tableaux
Le langage JavaScript propose l'objet Array, comportant de nombreuses méthodes
permettant de manipuler les tableaux, c'est-à-dire d'insérer, supprimer, ou extraire des
éléments dans le tableau et également de trier l’élément du tableau.
15
Il existe des caractères spéciaux à utiliser dans les chaînes pour simuler d'une part des
caractères non visuels ou pour éviter au navigateur de confondre les caractères de la chaîne
avec ceux du script, ces caractères sont précédés d'un antislash () :
b : touche de suppression
f : formulaire plein
n : retour à la ligne
r : appui sur la touche ENTREE
t : tabulation
" : guillemets doubles
' : guillemets simples
: caractère antislash
Chaîne C o m m e n t ç a m a r c h e '
Position des caractères 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
16
Une chaîne ayant n caractères aura son dernier caractère en position n-1 (ici, pour une
chaîne de 18 caractères le dernier élément est à la position 17).
Qu'appelle-t-on un événement?
Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une
interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML
gère. Grâce au JavaScript il est possible d'associer des fonctions, des méthodes à des
événements tels que le passage de la souris au-dessus d'une zone, le changement d'une
valeur, ...
onEvenement="Action_Javascript_ou_Fonction();"
Lorsqu'il est utilisé dans un lien hypertexte, par exemple, la syntaxe sera la suivante :
17
l'élément actif.
Test
Click Se produit lorsque l'utilisateur clique sur l'élément
(onClick) associé à l'événement.
18
Cet événement n'est supporté que par les versions
de JavaScript 1.2 et supérieures
abort Image
19
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text,
blur
TextArea, window
dragdrop window
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text,
focus
TextArea, window
move window
reset form
resize window
20
select text, Textarea
submit Form
unload window
window.alert("Votre Texte");
Il s'agit désormais de l'appeler à l'aide d'un événement dans l'attribut « href » d'un lien
hypertexte :
<html>
<head>
<title>Ouverture d'une boîte de dialogue lors d'un click</title>
</head>
<body>
<a href="javascript:;"
onClick="window.alert('Message d\'alerte à utiliser avec moderation');">
Cliquez ici!</a>
</body>
</html>
Analyse du script:
le gestionnaire d'événement onClick a été inséré dans la balise de lien hypertexte <A
href...
21
le seul but du script est de faire apparaître une boîte de dialogue, ainsi on ne désire
pas que le lien nous entraîne sur une autre page, il faut alors insérer "javascript:;" dans
l'attribut href pour signaler au navigateur que l'on désire rester sur la page en cours. Il ne
faut pas mettre un attribut vide au risque de révéler le contenu de votre répertoire à vos
visiteurs...
Remarquez l'emploi de \' dans la phrase "Message d'alerte a utiliser avec
moderation"
Le signe antislash (\) précédant le guillemet permet de signaler au navigateur qu'il ne faut
pas l'interpréter comme un délimiteur de chaîne mais comme un simple caractère pour
éviter qu'il génère une erreur!
Aperçu de l'effet du script:
Cliquez ici!
Il peut être agréable de jouer avec le gestionnaire OnMouseOver pour créer un menu
interactif qui se modifie au passage de la souris. On peut même ajouter le
gestionnaire OnMouseOut pour rétablir l'image originale lorsque le curseur quitte l'image
(Rappel: Son utilisation est limitée aux navigateurs supportant javascript 1.1 et
supérieur!). Ce type d'effet est appelé rollover.
Script:
<html>
<head>
<title>Modification d'une image lors du passage de la souris</title>
</head>
<body>
<a href="javascript:;"
onMouseOver="document.img_1.src='image2.gif';"
onMouseOut="document.img_1.src='image1.gif';">
<img name="img_1" src="image1.gif"> </a>
</body>
</html>
Analyse du script:
Pour pouvoir associer un événement à une image il faut que celle-ci soit considérée
comme un lien, ainsi on place la balise <img ...> entre les balises <a ...> et </a>
L'événement onMouseOut est limité aux navigateurs supportant javascript 1.1 et
supérieur
22
Aperçu de l'effet du script:
Résultat (avec x
Opérateur Dénomination Effet Exemple
valant 7)
opérateur
+ Ajoute deux valeurs x+3 10
d'addition
opérateur de
- Soustrait deux valeurs x-3 4
soustraction
opérateur de
* Multiplie deux valeurs x*3 21
multiplication
plus: opérateur de
/ Divise deux valeurs x/3 2.3333333
division
Met la valeur 3
opérateur Affecte une valeur à une
= x=3 dans la variable
d'affectation variable
x
% opérateur modulo Retourne le reste de la division x % 2 1
23
entière de l'opérande de
gauche par celle de droite
Opérateur Effet
ajoute l'opérande de gauche par l'opérande de droite et stocke le résultat dans
+=
l'opérande de gauche.
soustrait l'opérande de droite à l'opérande de gauche et stocke le résultat dans
-=
l'opérande de gauche.
multiplie l'opérande de gauche par l'opérande de droite et stocke le résultat dans
*=
l'opérande de gauche.
divise l'opérande de gauche par l'opérande de droite et stocke le résultat dans
/=
l'opérande de gauche.
calcule le reste de la division entière de l'opérande de gauche par l'opérande de
%=
droite et stocke le résultat dans l'opérande de gauche.
Un opérateur de type x++ permet de remplacer des notations lourdes telles que x=x+1 ou
bien x+=1
Résultat (avec x
Opérateur Dénomination Effet Exemple
valant 7)
==
A ne pas
RetourneTrue si X
confondre avec opérateur Compare deux valeurs
x==3 est égal à 3,
le signe d'égalité et vérifie leur égalité
sinon False
d'affectation
(=)!!
RetourneTrue si a est
Vérifie l'identité de
opérateur égal à b et est de
=== valeur et de type de a===b
d'identité même type,
deux valeurs
sinonFalse
Vérifie qu'une variable Retourne 1 si X est
opérateur de
!= est différente d'une x!=3 différent de 3, sinon
différence
valeur 0
Vérifie la non identité
de valeur et de type de
RetourneTrue si a est
deux valeurs, c'est-à-
opérateur de différent de b ou
!== dire si les deux valeurs a!==b
non identité bien est de type
n'ont pas la même
différent, sinon False
valeur ou bien sont de
types différents.
opérateur Vérifie qu'une variable RetourneTrue si X
< d'infériorité est strictement x<3 est inférieur à 3,
stricte inférieure à une valeur sinon False
Vérifie qu'une variable RetourneTrue si X
opérateur
<= est inférieure ou égale x<=3 est inférieur ou égale
d'infériorité
à une valeur à 3, sinon False
> opérateur de Vérifie qu'une variable x>3 RetourneTrue si X
supériorité est strictement est supérieur à 3,
25
supérieure à une
stricte sinonFalse
valeur
Vérifie qu'une variable RetourneTrue si X
opérateur de
>= est supérieure ou égale x>=3 est supérieur ou égal
supériorité
à une valeur à 3, sinon False
compréhension du binaire
représentation des données
Instructions arithmétiques et logiques en assembleur
Ce type d'opérateur traite ses opérandes comme des données binaires, plutçt que des
données décimales, hexadécimales ou octales. Ces opérateurs traitent ces données selon
leur représentation binaire mais retournent des valeurs numériques standards dans leur
format d'origine.
26
Les opérateurs suivants effectuent des opérations bit-à-bit, c'est-à-dire avec des bits de
même poids.
Résultat
Opérateur Dénomination Effet Syntaxe (avec x valant
7)
9 & 12
Retourne 1 si les deux bits de
& ET bit-à-bit (1001 & 8 (1000)
même poids sont à 1
1100)
Retourne 1 si l'un ou l'autre des
9 | 12 (1001
| OU bit-à-bit deux bits de même poids est à 13 (1101)
| 1100)
1 (ou les deux)
Retourne 1 si l'un des deux bits
OU bit-à-bit 9 ^ 12 (1001
^ de même poids est à 1 (mais 5 (0101)
exclusif ^ 1100)
pas les deux)
compréhension du binaire
représentation des données
Instructions arithmétiques et logiques en assembleur
Ce type d'opérateur traite ses opérandes comme des données binaires d'une longueur de 32
bits, plutçt que des données décimales, hexadécimales ou octales. Ces opérateurs traitent
ces données selon leur représentation binaire mais retournent des valeurs numériques
standards dans leur format d'origine.
Les opérateurs suivants effectuent des rotation sur les bits, c'est-à-dire qu'il décale chacun
des bits d'un nombre de bits vers la gauche ou vers la droite. La première opérande désigne
la donnée sur laquelle on va faire le décalage, la seconde désigne le nombre de bits duquel
elle va être décalée.
Les priorités
Lorsque l'on associe plusieurs opérateurs, il faut que le navigateur sache dans quel ordre les
traiter, voici donc dans l'ordre décroissant les priorités de tous les opérateurs :
28
+++++++++ + -
++++++++ < <= >= >
+++++++ == !=
++++++ ^
+++++ |
++++ && ||
+++ ' :
++ = += -= *= /= %= <<= >>= >>>= &= ^= |=
+ ,
Instruction if
L'instruction if est la structure de test la plus basique, on la retrouve dans tous les langages
(avec une syntaxe parfois différente d'un langage à l'autre...). Elle permet d'exécuter une
série d'instructions (un bloc d'instructions) si jamais une condition est réalisée.
29
Remarques:
la condition doit être entre des parenthèses
il est possible de définir plusieurs conditions à remplir avec les opérateurs ET et OU
(&& et ||)
L'instruction suivante par exemple teste si les deux conditions sont réalisées:
if ((condition1)&&(condition2))
L'instruction suivante par contre exécutera les instructions si l'une ou l'autre des deux
conditions est réalisée :
if ((condition1)||(condition2))
S'il n'y a qu'une instruction dans le bloc d'instruction, les accolades ne sont pas
nécessaires...
Les structures conditionnelles pouvant être imbriquées, il peut être utile d'indenter le
30
code pour plus de lisibilité, c'est-à-dire de décaler à l'aide d'une tabulation chaque bloc
d'instruction pour pouvoir rapidement visualiser l'imbrication des structures !
Opérateur ternaire
Il est possible de faire un test avec une structure beaucoup moins lourde grâce à la structure
suivante :
(condition) ' instruction si vrai : instruction si faux
Remarques:
la condition doit être entre des parenthèses
Lorsque la condition est vraie, l'instruction de gauche est exécutée
Lorsque la condition est fausse, l'instruction de droite est exécutée
Boucles
Les boucles sont des structures qui permettent d'exécuter plusieurs fois la même série
d'instructions jusqu'à ce qu'une condition ne soit plus réalisée...
La façon la plus commune de faire une boucle, est de créer un compteur (une variable qui
s'incrémente, c'est-à-dire qui augmente de 1 à chaque tour de boucle) et de faire arrêter la
boucle lorsque le compteur dépasse une certaine valeur.
Boucle for
L'instruction for permet d'exécuter plusieurs fois la même série d'instructions: c'est une
boucle!
Dans sa syntaxe, il suffit de préciser le nom de la variable qui sert de compteur (et
éventuellement sa valeur de départ, la condition sur la variable pour laquelle la boucle
s'arrête (basiquement une condition qui teste si la valeur du compteur dépasse une limite) et
enfin une instruction qui incrémente (ou décrémente) le compteur.
Par exemple :
31
for (i=1; i<6; i++) {
Alert(i)
}
il faudra toujours vérifier que la boucle a bien une condition de sortie (i.e le compteur
s'incrémente correctement)
une instruction Alert(i); dans votre boucle est un bon moyen pour vérifier la valeur du
compteur pas à pas!
il faut bien compter le nombre de fois que l'on veut faire exécuter la boucle:
for(i=0;i<10;i++) exécute 10 fois la boucle (i de 0 à 9)
for(i=0;i<=10;i++) exécute 11 fois la boucle (i de 0 à 10)
for(i=1;i<10;i++) exécute 9 fois la boucle (i de 1 à 9)
for(i=1;i<=10;i++) exécute 10 fois la boucle (i de 1 à 10)
Instruction while
L'instruction while représente un autre moyen d'exécuter plusieurs fois la même série
d'instructions.
Cette instruction exécute la liste d'instructions tant que (while est un mot anglais qui
signifie tant que) la condition est réalisée.
La condition de sortie pouvant être n'importe quelle structure conditionnelle, les risques
de boucle infinie (boucle dont la condition est toujours vraie) sont grands, c'est-à-dire
qu'elle risque de provoquer un plantage du navigateur!
32
Saut inconditionnel
Il peut être nécessaire de faire sauter à la boucle une ou plusieurs valeurs sans pour autant
mettre fin à celle-ci.
La syntaxe de cette expression est "continue;" (cette instruction se place dans une boucle!),
on l'associe généralement à une structure conditionnelle, sinon les lignes situées entre cette
instruction et la fin de la boucle seraient obsolètes.
Exemple: Imaginons que l'on veuille imprimer pour x allant de 1 à 10 la valeur de 1/(x-7) ... il
est évident que pour x=7 il y aura une erreur. Heureusement, grâce à l'instruction continue il
est possible de traiter cette valeur à part puis de continuer la boucle!
x=1;
while (x<=10) {
if (x == 7) {
Alert('division par 0');
continue;
}
a = 1/(x-7);
Alert(a);
x++;
}
33
Arrêt inconditionnel
A l'inverse, il peut être voulu d'arrêter prématurément la boucle, pour une autre conditon que
celle précisé dans l'en-tète de la boucle. L'instruction break permet d'arrêter une boucle
(for ou bien while). Il s'agit, tout comme continue, de l'associer à une structure conditionnelle,
sans laquelle la boucle ne ferait jamais plus d'un tour!
Dans l'exemple de tout à l'heure, par exemple si l'on ne savait pas à quel moment le
dénominateur (x-7) s'annule (bon...OK...pour des équations plus compliquées par exemple) il
serait possible de faire arrêter la boucle en cas d'annulation du dénominateur, pour éviter
une division par zéro!
for (x=1; x<=10; x++) {
a = x-7;
if (a == 0) {
Alert('division par 0');
break;
}
Alert(1/a);
}
Instruction switch...case
L'instruction switch permet de faire plusieurs tests de valeurs sur le contenu d'une même
variable. Ce branchement conditionnel simplifie beaucoup le test de plusieurs valeurs d'une
variable, car cette opération aurait été compliquée (mais possible) avec des if imbriqués. Sa
syntaxe est la suivante :
switch (Variable) {
case Valeur1:
Liste d'instructions;
break;
case Valeur2:
Liste d'instructions;
break;
case ValeurX:
Liste d'instructions;
break;
default:
Liste d'instructions;
break;
}
34
Les parenthèses qui suivent le mot clé switch indiquent une expression dont la valeur est
testée successivement par chacun des case. Lorsque l'expression testée est égale à une
des valeurs suivant uncase, la liste d'instruction qui suit celui-ci est exécuté. Le mot
clé break indique la sortie de la structure conditionnelle. Le mot clé default précède la liste
d'instructions qui sera exécutée si l'expression n'est jamais égale à une des valeurs.
Il est essentiel de terminer chaque bloc d'instruction par l'instruction break !
N'oubliez pas d'insérer des instructions break entre chaque test, ce genre d'oubli est
difficile à détecter car aucune erreur n'est signalée...
La notion de fonction
On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instructions
par simple appel de la fonction dans le corps du programme principal. Cette notion de sous-
programme est généralement appelée fonction dans les langages autres que le JavaScript
(toutefois leur syntaxe est généralement différente...). Les fonctions permettent d'exécuter
dans plusieurs parties du programme une série d'instructions, cela permet une simplicité du
code et donc une taille de programme minimale. D'autre part, une fonction peut faire appel à
elle-même, on parle alors de fonction récursive (il ne faut pas oublier dans ce cas de mettre
une condition de sortie au risque sinon de ne pas pouvoir arrêter le programme...).
JavaScript contient des fonctions prédéfinies qui peuvent s'appliquer pour un ou plusieurs
types d'objets spécifiques, on appelle ces fonctions des méthodes.
Appel de fonction
Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son nom (une fois de
plus en respectant la casse) suivie d'une parenthèse ouverte (éventuellement des
arguments) puis d'une parenthèse fermée :
Nom_De_La_Fonction();
Remarques:
le point virgule signifie la fin d'une instruction et permet au navigateur de distinguer
les différents blocs d'instructions
si jamais vous avez défini des arguments dans la déclaration de la fonction, il faudra
veiller à les inclure lors de l'appel de la fonction (le même nombre d'arguments séparés
par des virgules!)
Veillez toujours à ce qu'une fonction soit déclarée avant d'étre appelée, sachant que le
navigateur traite la page de haut en bas (Pour éviter des erreurs de ce type on déclare
généralement les fonctions dans des balises SCRIPT situées dans l'en-tête de la page,
c'est-à-dire entre les balises <HEAD> et </HEAD>)
Grâce au gestionnaire d'événement onLoad (à placer dans la balise BODY) il est possible
d'exécuter une fonction au chargement de la page, comme par exemple l'initialisation des
variables pour votre script, et/ou le test du navigateur pour savoir si celui-ci est apte à faire
fonctionner le script. Il s'utilise de la manière suivante :
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
36
function Chargement() {
alert('Bienvenue sur le site');
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Chargement();" >
</BODY>
</HTML>
function Affiche1() {
alert('Texte 1');
}
function Affiche2() {
alert('Texte2');
}
37
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Ce qui donne ceci :
Texte1
Texte2
Il existe toutefois une methode plus "classe" qui consiste à créer une fonction qui a comme
paramètre le texte à afficher :
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!--
function Affiche(Texte) {
alert(Texte);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Ce qui donne ceci :
Texte1
Texte2
Résultat: Aucune différence visuellement mais vous n'avez plus qu'une seule fonction qui
peut vous afficher n'importe quel texte...
38
Travailler sur des variables dans les fonctions
Lorsque vous manipulerez des variables dans des fonctions, il vous arrivera de constater
que la variable retrouve sa valeur d'origine dès que l'on sort de la fonction, malgré toutes les
affectations faites au sein de celle-ci ...
Cela est dû à la portée des variables, c'est-à-dire selon qu'elles ont été définies
comme variables globales ou locales.
Une variable déclarée implicitement dans la fonction (non précédée du mot-clé var)
sera globale , c'est-à-dire accessible après exécution de la fonction
Une variable déclarée explicitement (précédée du mot-clé var) sera locale , c'est-à-
dire accessible uniquement dans la fonction, toute référence à cette variable hors de la
fonction provoquera une erreur (variable inconnue)...
Le mot-clé this
Lorsque vous faîtes appel à une fonction à partir d'un objet, par exemple un formulaire, le
mot clé this fait référence à l'objet en cours et vous évite d'avoir à définir l'objet en
tapant window.objet1.objet2... ainsi lorsque l'on passe l'objet en cours en paramètre d'une
fonction, il suffit de taper nom_de_la_fonction(this)pour pouvoir manipuler cet objet à partir
de la fonction.
Pour manipuler les propriétés de l'objet il suffira de
taper this.propriete (où propriete représente bien sûr le nom de la propriété).
this.Taille = Taille;
this.Age = Age;
39
}
Grâce au mot-clé new, il va être possible de créer des instances de l'objet Arbre (c'est-à-dire
des objets possédant les propriétés de l'objet Arbre) :
Arbre1 = new Arbre("peuplier", 14, 20)
Arbre.Proprietaire.Nom
40
Dans le cas de la méthode write(), l'appel se fait comme suit :
window.document.write()
La méthode write
La méthode write() de l'objet document permet de modifier de façon dynamique le contenu
d'une page HTML. Voici la syntaxe de la méthode write() :
window.document.write(expression1, expression2, ...)
Cette méthode permet d'écrire le résultat des expressions passées en paramètre dans le
document dans lequel elle est utilisée. Il est ainsi possible d'uttiliser la méthode write() de
différentes façons :
soit en passant directement le texte en paramètres :
document.write("bonjour");
qui aura pour effet de concaténer la chaîne 'bonjour' à l'endroit où est placé le script
soit en passant le texte par l'intermédiaire d'une variable :
Chaine='bonjour';
document.write(Chaine);
Ce qui aura pour effet de concaténer la chaîne 'bonjour' (contenue dans la
variable Chaine)à l'endroit où est placé le script
soit en utilisant les deux :
Chaine='bonjour';
document.write('je vous passe le ' + Chaine);
Proprietaire.Prenom = Prenom;
}
Puis on crée une fonction qui affiche le nom du propriétaire d'un arbre ainsi que quelques
caractéristiques de celui-ci :
function AfficheInfos() {
alert(this.Proprietaire.Prenom + this.Proprietaire.Nom + 'possede un' +
this.Type);
}
Il suffit maintenant de définir l'objet Arbre comme suit :
function Arbre(Type, Taille, Age, Proprietaire, AfficheInfos) {
this.Type = Type;
this.Taille = Taille;
this.Age = Age;
this.Proprietaire = Proprietaire;
this.AfficheInfos = AfficheInfos;
}
Le fait de taper Arbre1.AfficheInfos() aura pour effet de produire un message d'alerte du
type :
René Dupont possède un tilleul
JavaScript en propose trois différentes dont l'utilisation se rapporte pour chacune à une de
celles décrites ci-dessus. Ce sont des méthodes de l'objet window.
Ces boîtes de dialogue ont une mention JavaScript, par exemple "JavaScript user prompt"
pour permettre de savoir à l'utilisateur qu'il s'agit d'une boîte d'invite de la page en cours. En
effet certains webmasters peu scrupuleux pourraient faire croire qu'il s'agit d'une boîte
windows et récupérer le mot de passe (Suite à une erreur du fournisseur d'accès veuillez
entrer votre login et votre mot de passe)...
La méthode alert()
La méthode alert() permet d'afficher dans une boîte toute simple composée d'une fenêtre et
d'un boutonOK le texte qu'on lui fournit en paramètre. Dès que cette boîte est affichée,
l'utilisateur n'a d'autre alternative que de cliquer sur le bouton OK.
Son unique paramètre est une chaîne de caractère, on peut donc lui fournir directement
cette chaîne de caractères entre guillemets, lui fournir une variable dont il affichera le
contenu, ou bien mêler les deux en concaténant les chaines grâce à l'opérateur +.
Voici sa syntaxe :
43
alert(nom_de_la_variable);
alert('Chaîne de caractères');
La méthode confirm()
La méthode confirm() est similaire à la méthode alert(), si ce n'est qu'elle permet un choix
entre "OK" et "Annuler". Lorsque l'utilisateur appuie sur "OK" la méthode renvoie la
valeur true. Elle renvoie false dans le cas contraire...
confirm('Chaîne de caractères');
La méthode prompt()
La méthode prompt est un peu plus évoluée que les deux précédentes puisqu'elle fournit un
moyen simple de récupérer une information provenant de l'utilisateur, on parle alors de boîte
d'invite. La méthode prompt()requiert deux arguments :
le texte d'invite
la chaîne de caractères par défaut dans le champ de saisie
44
Sa syntaxe est donc la suivante :
Notion d'objet
Le but de cette section n'a pas pour ambition de traîter de la programmation orientée
objet mais de donner une idée de ce qu'est un objet, concept nécessaire à la création de
scripts JavaScript.
Le JavaScript traite les éléments qui s'affichent dans votre navigateur comme des objets,
c'est-à-dire des éléments :
Cette notion semble floue pour l'instant mais voyons voir cela sur un exemple concret :
Imaginez un arbre dans un jardin comportant une branche sur laquelle se trouve un nid. On
suppose la hiérarchie d'objets est définie comme ceci :
jardin
arbre
branche
feuille
nid
largeur: 20
couleur: jaune
hauteur: 4
45
tronc
racine
salade
balançoire
trapèze
corde
nid
largeur: 15
couleur: marron
hauteur: 6
Le nid sur l'arbre est donc désigné comme suit :
jardin.arbre.branche.nid
Contrairement au nid situé sur la balançoire :
jardin.balançoire.nid
Pour changer la couleur du nid (dans l'arbre) et le peindre en vert, il suffit d'une commande
telle que la suivante :
jardin.arbre.branche.nid.couleur= vert;
Les objets en JavaScript sont représentés de cette manière à ceci près que ce n'est pas un
jardin qui est représenté sous forme d'objets mais la fenêtre du navigateur.
On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis
on descend dans la hiérarchie jusqu'à arriver à l'objet voulu.
L'objet le plus grand est l'objet fenêtre (les objets en javascript ont leur dénomination
en anglais, donc dans le cas présent window)
Dans la fenêtre s'affiche une page, c'est l'objet document
Cette page peut contenir plusieurs objets, comme des formulaires, des images, etc.
Pour accéder à un objet il est donc nécessaire de parcourir l'arborescence en partant de
l'objet le plus grand (l'objet window) vers l'objet à atteindre.
Soient le bouton (appelé checkbox) et le champ de texte suivants :
46
Le formulaire (baptisé form1 pour le distinguer des autres formulaires de la page) est
repéré par le code suivant :
window.document.forms["form1"]
Le bouton checkbox (baptisé checkbox) est repéré par le code suivant :
window.document.forms["form1"].checkbox
Le champ de texte (appelé champ_text) est repéré par le code suivant :
window.document.forms["form1"].champ_text
Le bouton checkbox a entre autre une propriété checked, qui retourne la valeur 1 si le
bouton est coché, 0 dans le cas contraire. Cliquez sur le bouton checkbox pour comprendre
ce qu'il est possible de faire grâce à ces propriétés.
Ainsi le formulaire form1 a comme code HTML :
<form name="form1">
<br><input type="checkbox" name="checkbox" onClick="ModifChamp();return
true;">
<br><input type='TEXT' name='champ_text' value='Essai du javascript'
size='24'></form>
La fonction javascript associée au bouton checkbox est la suivante :
<script language="Javascript">
<!--
function ModifChamp()
{
if (document.forms["form1"].checkbox.checked)
{
document.forms["form1"].champ_text.value='Bouton coché'
}
else
{
document.forms["form1"].champ_text.value='bouton non coché'
}
}
//-->
</script>
Le champ de texte a par exemple comme propriétés :
47
Introduction aux objets du noyau JavaScript
JavaScript fournit en standard un certain nombre d'objets proposant des propriétés et des
méthodes permettant d'effectuer simplement un grand nombre de manipulations. Ces objets
sont appelés objets du noyau JavaScript, car ils ont été standardisés par l'ECMA (European
Computer Manufacturer Association) et constituent la base du langage JavaScript.
Les objets du noyau sont indépendants du navigateur du client contrairement aux objets du
navigateur.
Nom de
Description
l'objet
L'objet Array permet de créer des tableaux. Il possède de nombreuses méthodes
Array permettant d'ajouter, de supprimer ou d'extraire des éléments d'un tableau ainsi
que de les trier.
L'objet Boolean permet de créer des valeurs booléennes, c'est-à-dire des
Boolean
éléments possédant deux états : vrai et faux.
L'objet Date permet de créer des dates et des durées. Il propose des méthodes
Date
permettant de les manipuler.
Function L'objet Function permet de définir des fonctions personnalisées.
L'objet Math permet de manipuler des fonctions mathématiques, comme par
Math
exemple les fonctions trigonométriques.
L'objet Number est un objet permettant de faire des opérations de base sur les
Number
nombres.
L'objet RegExp permet de créer des expressions régulières, c'est-à-dire des
RegExp éléments permettant de faire des opérations avancées sur les chaînes de
caractères.
L'objet String propose une grande variété de méthodes permettant de manipuler
String
des chaînes de caractères.
48
Les particularités de l'objet Array
L'objet Array est un objet du noyau JavaScript permettant de créer et de manipuler
des tableaux.
Voici la syntaxe à utiliser pour créer une variable tableau :
49
Tableau.sort() Cette méthode permet de trier les éléments d'un tableau.
Tableau.unshift(valeur1[, Cette méthode renvoie le code source qui a permis de
valeur2, ...]) créer l'objet Array.
Cette méthode renvoie la chaîne de caractères correspond
Tableau.toString()
à l'instruction qui a permis de créer l'objet Array.
Cette méthode permet dajouter un ou plusieurs élément au
Tableau.unshift()
début du tableau.
Cette méthode retourne tout simplement la valeur de
Tableau.valueOf
l'objet Array auquel elle fait référence.
50
Cette méthode retourne tout simplement la valeur de l'objet Boolean auquel elle
valueOf
fait référence.
51
Connaître la date
Les méthodes dont le nom commence par le radical get (mot anglais qui signifie récupérer)
permettent de renvoyer une partie de l'objet Date :
Méthode Description Type de valeurs retournée
52
etc.
Les deux méthodes suivantes ne permettent de travailler que sur l'heure actuelle
(objet Date()) leur syntaxe est donc figée :
Méthode Description Type de valeurs retournée
Modifier la date
Les méthodes dont le nom commence par le radical set (mot anglais qui signifie règler)
permettent de modifier une valeur :
Méthode Description Type de valeur en paramètre
53
Permet de fixer la valeur de Le paramètre est un entier (entre 0 et 23) qui
setHours(X)
l'heure correspond à l'heure
Permet de fixer la valeur des Le paramètre est un entier (entre 0 et 59) qui
setMinutes(X)
minutes correspond aux minutes
x = ('chaine de caracteres').length;
On peut donc directement passer la chaîne de caractères comme objet, en délimitant la
chaîne par des apostrophes et en plaçant le tout entre parenthèses.
La méthode traditionnelle consistant à appliquer une propriété à une variable de
type string fonctionne bien évidemment aussi.
Les méthodes de l'objet String
54
Les méthodes de l'objet string permettent de récupérer une portion d'une chaîne de
caractère, ou bien de la modifier.
Pour comprendre les méthodes suivantes, il est tout d'abord nécessaire de comprendre
comment est stockée une chaîne de caractères
Le tableau suivant décrit les méthodes de l'objet String :
Méthode description
55
Chaine.italics() Transforme le texte en italique (balise <I>)
donne 'C'
donne 'o'
donne '?'
donne ''
donne ''
Méthode indexOf()
La méthode indexOf() permet de rechercher (de gauche à droite) la position d'une sous-
chaîne dans une chaîne de caractères.
Chaine = "chaine de caractères";
Sous_Chaine = 'mar'
var Resultat = Chaine.indexOf(Sous_Chaine, 6)
donne '11'
donne '11'
donne '11'
donne '-1'
donne "-1"
donne "-1"
donne "-1"
Méthode lastIndexOf()
La méthode lastIndexOf() permet de rechercher (de droite à gauche) la position d'une sous-
chaîne dans une chaîne de caractères.
Chaine = "chaine de caractères";
58
La position indiquée en argument permet de déterminer la position du caractère à partir
duquel la recherche est effectué (vers la gauche pour cette méthode).
L'argument position doit être compris entre 0 et n-1. Si cet argument est omis la recherche
débutera à partir de la fin de la chaîne.
Lorsque la recherche est infructueuse, la méthode lastIndexOf() renvoie la valeur -1.
Voici quelques exemples :
Chaine = 'Comment ça marche?'
Sous_Chaine = 'mar'
var Resultat = Chaine.lastIndexOf(Sous_Chaine, 6)
donne '-1'
donne '11'
donne '11'
donne '11'
donne "-1"
donne "-1"
Méthode substring()
La méthode substring() permet de récupérer une sous-chaîne dans une chaîne de
caractères en précisant en paramètres les positions des caractères entre lesquels la sous-
chaîne doit être récupérée.
Chaine = "chaine de caractères";
59
Les positions indiquées en argument permettent de déterminer les position des caractère
entre lesquels la sous-chaîne doit être récupérée. Les
arguments position1 et position2 doivent être compris entre 0 et n-1.
Si l'argument position1 est plus petit que l'argument position2, la
méthode substring() retourne la sous-chaîne commençant à la position 1 et s'arrêtant au
caractère situé avant position 2
Si l'argument position1 est plus grand que l'argument position2, la
méthode substring() retourne la sous-chaîne commençant à la position 2 et s'arrêtant au
caractère situé avant position 1
Si l'argument position1 est égal à l'argument position2, la
méthode substring() retourne une chaîne vide
Voici quelques exemples :
donne 'omme'
donne ''
La méthode toUpperCase() permet de convertir toutes les lettres d'une chaîne en majuscule,
les autres caractères sont laissés tels quels.
60
donne 'COMMENT çA MARCHE?'
navigator : qui contient des informations sur le navigateur de celui qui visite la page
window : c'est l'objet où s'affiche la page, il contient donc des propriétés concernant
la fenêtre elle-même mais aussi tous les objets-enfants contenus dans celle-ci
location : contient des informations relatives à l'adresse de la page à l'écran
history: c'est l'historique, c'est-à-dire la liste de liens qui ont été visités précédemment
document : il contient les propriétés sur le contenu du document (couleur d'arrière
plan, titre, ...)
Ces objets sont largement dépendant du contenu de la page. En effet, mis à part des objets
tels quenavigator qui sont figés pour un utilisateur donné, le contenu des autres objets
variera suivant le contenu de la page, car suivant la page les objets présents dans celles-ci
(sous-objets des objets décrits précédemment) sont différents. voyons voir comment ceux-ci
sont organisés
61
Dans cette hiérarchie, les descendants d'un objet sont des propriétés de ces objets mais peuvent
aussi être des objets qui contiennent eux même des propriétés...
Voyons voir à quoi ressemble cette hérarchie :
Niveau1 Niveau2 Niveau3 Commentaire
navigator Informations sur le browser utilisé
window Gestion de la fenêtre d'affichage
parent, frames, Désignation de la sous-fenêtre
self, top
location Informations sur l'emplacement de la page
history Accès à l'historique (sites précédemment visités)
document Informations sur le contenu de la fenêtre (éléments
qui composent la page)
images Référence des images présentes dans la page
forms Référence des formulaires présents dans la page
links Référence des liens présents dans la page
62
anchors Référence des ancrages présents dans la page
Il s'agit d'un tableau qui contient les Tous les éléments de frames sont en
frames
cadres présents dans la fenêtre lecture seule
63
nombre de cadres (nombre d'éléments
length Lecture seule
du tableau frames
Il s'agit d'un message temporaire qui non, modifiable à tout moment, vous
status s'affiche dans la barre d'état du devez retournez la valeur true pour
navigateur suite à un événement l'utiliser aveconMouseOver
Les propriétés window, self, frames, top et parent permettent de naviguer dans le système
de sous-fenêtres, appelées frames.
les propriétés self et window sont les mêmes, elles permettent de désigner la page
en cours, leur seul but est d'accentuer la précision de la hiérarchie pour une meilleure
lecture du code. en effet, self.nameest plus explicite que name
les propriété top et parent permettent de remonter dans la hiérarchie pour atteindre
des fenêtre de niveau supérieur, notamment pour "sortir" des frames...
la propriété frames est un tableau qui permet de cibler un cadre spécifique faisant
partie de la fenêtre où on se trouve. Pour désigner un cadre on utilise soit la
notation window.frames[i] où i représente le numéro du cadre,
soit window.nom_du_cadre en désignant le cadre directement par le nom qu'on lui a
assigné dans la balise frameset.
64
Les méthodes alert(), confirm() et prompt()
Les méthodes alert(), confirm() et prompt() sont des méthodes qui font apparaître une boîte
de dialogue, elles sont expliquées en détail dans le chapitre Boîte de dialogue.
Les méthodes open() et close() sont bien évidemment destinées à permettre l'ouverture et la
fermeture de fenêtres. Toutefois la syntaxe de la méthode open() est longue car elle admet
un nombre important de paramètres :
La méthode open() permet d'ouvrir une fenêtre, voici sa syntaxe :
window.open("URL","nom_de_la_fenetre","options_de_la_fenetre");
Si vous utilisez cette instruction dans un lien hypertexte, veillez à remplacer les
guillemets doubles par des guillemets simples :
<A href="javascript:window.open('URL',
'nom_de_la_fenetre',
Pour les mêmes raisons, le nom de la fenêtre ne doit pas contenir de guillemets. Si cela
devait arriver, vous avez la possibilité de remplacer les guillemets doubles par leur
équivalent HTML ("), et les apostrophes par "\'" ou bien "’".
URL désigne l'url de la page qui sera affichée dans la nouvelle fenêtre, c'est-à-dire
l'emplacement physique de celle-ci.
option description
65
toolbar = yes/no Affiche ou non la barre d'outils
Ainsi, il est possible d'utiliser cette méthode avec n'importe quel gestionnaire d'événement,
directement dans le code à exécuter ou bien dans une fonction.
les options doivent être saisies les unes après les autres, séparées par des virgules,
sans espace
l'ensemble des options doit être encadré par les guillemets
Chacune des fenêtres doit cependant être fermée, il faut donc se servir de la
méthode close() qui permet de fermer une fenêtre.
La méthode close() requiert le nom de la fenêtre comme argument, il suffit donc de créer un
bouton (image, hypertexte, ou bouton de formulaire) qui permettra de fermer cette fenêtre.
Pour un lien hypertexte, le code sera :
<A href="javascript:self.close('nom_de_la_fenetre_');">
Cliquez ici pour fermer la fenêtre
</A>
Pour un bouton (image), le code sera :
<A href="javascript:self.close('nom_de_la_fenetre_');">
<img src="nom_de_l_image">
</A>
Il est bien évidemment possible d'utiliser cette procédure avec tous les gestionnaires
d'événement, en utilisant par exemple une syntaxe proche de celle-ci :
<A href="javascript:;" onMouseOver="self.close('nom_de_la_fenetre_');" >
<img src="nom_de_l_image">
</A>
66