0% ont trouvé ce document utile (0 vote)
15 vues66 pages

Javascript

Le JavaScript est un langage de script intégré dans les documents HTML, permettant d'exécuter des commandes côté client. Développé par Netscape en 1995, il est souvent confondu avec Java, bien qu'il soit un langage interprété et sensible à la casse. Les scripts JavaScript peuvent être insérés dans une page HTML et sont utilisés pour améliorer l'interactivité des sites web.

Transféré par

Dassie Talla Ivan
Copyright
© © All Rights Reserved
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 DOC, PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
15 vues66 pages

Javascript

Le JavaScript est un langage de script intégré dans les documents HTML, permettant d'exécuter des commandes côté client. Développé par Netscape en 1995, il est souvent confondu avec Java, bien qu'il soit un langage interprété et sensible à la casse. Les scripts JavaScript peuvent être insérés dans une page HTML et sont utilisés pour améliorer l'interactivité des sites web.

Transféré par

Dassie Talla Ivan
Copyright
© © All Rights Reserved
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 DOC, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 66

Qu'est-ce que le JavaScript?

Le JavaScript est un langage de script incorporé dans un document HTML. Historiquement


il s'agit même du premier langage de script pour le Web. Ce langage est un langage de
programmation qui permet d'apporter des améliorations au langage HTML en permettant
d'exécuter des commandes du côté client, c'est-à-dire au niveau du navigateur et non du
serveur web.
Ainsi le langage JavaScript est fortement dépendant du navigateur appelant la page web
dans laquelle le script est incorporé, mais en contrepartie il ne nécessite pas de compilateur,
contrairement au langage Java, avec lequel il a longtemps été confondu.
JavaScript a été mis au point par Netscape en 1995. A l'origine, il se nommait Live Script et
était destiné à fournir un langage de script simple au navigateur Netscape Navigator 2. Il a à
l'époque longtemps été critiqué pour son manque de sécurité, son développement peu
poussé et l'absence de messages d'erreur explicites rendant dure son utilisation. Le 4
décembre 1995, suite à une association avec le constructeur Sun, Netscape rebaptise son
langage JavaScript (un clin d'œil au langage Java développé par Sun). A la même époque,
Microsoft mit au point le langage Jscript, un langage de script très similaire. Ainsi, pour éviter
des dérives de part et d'autre, un standard a été défini pour normaliser les langages de
script, il s'agit de l'ECMA 262, créé par l'organisation du même nom (ECMA, European
Computer Manufactures Association).
Les navigateurs et le 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 (;).

A quoi ressemble un script?


Un script est une portion de code qui vient s'insérer dans une page HTML. Le code du script
n'est toutefois pas visible dans la fenêtre du navigateur car il est compris entre des balises
(ou tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage
JavaScript.
Les balises annonçant un code JavaScript sont les suivantes :
<SCRIPT language="JavaScript">

Placez ici le code de votre script


</SCRIPT>

Masquage du script pour les anciens browsers


Ce code est ainsi invisible du point de vue du navigateur c'est-à-dire que ce dernier n'affiche
pas dans sa fenêtre le code JavaScript. Toutefois, d'anciens navigateurs, créés avant
l'arrivée du JavaScript, ne connaissent pas ces balises et donc les ignorent...
Le code de votre JavaScript risque donc de s'afficher sur votre belle page web et venir
gâcher votre travail. L'astuce consiste donc à ajouter des balises de commentaires à

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">

<!--

Placez ici le code de votre script

// -->

</SCRIPT>

Ajouter des commentaires dans votre code


Comme dans tout langage de programmation, il est bon d'ajouter des commentaires dans un
de ses scripts

 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++

 Pour mettre en commentaires toute une ligne on utilise le double slash :


// Tous les caractères derrière le // sont ignorés
 Pour mettre en commentaire une partie du texte (éventuellement sur plusieurs lignes)
on utilise le /* et le */ :
 /* Toutes les lignes comprises entre ces repères
 sont ignorées par l'interpréteur
de code */
Il faut veiller à ne pas imbriquer des commentaires, au risque de provoquer une erreur
lors de l'exécution du code!

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>

<TITLE> Voici une page contenant du JavaScript</TITLE>

</HEAD>

<BODY>

<SCRIPT language="Javascript">

<!--
alert("Voici un message d\'alerte!");

// -->

</SCRIPT>

</BODY>

</HTML>

A quel emplacement insérer le JavaScript dans votre page


HTML
Il existe plusieurs façons d'inclure du JavaScript dans une page HTML :

 Grâce à la balise <SCRIPT>


 En mettant le code dans un fichier

4
 Grâce aux événements

Dans la balise script

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">

<!--

Placez ici le code de votre script

// -->

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

Dans un fichier externe

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 :

<SCRIPT LANGUAGE="JavaScript" SRC="url/fichier.js"> </SCRIPT>


Où url/fichier.js correspond au chemin d'accès au fichier contenant le code en JavaScript,
sachant que si celui-ci n'existe pas le navigateur exécutera le code inséré entre les 2 balises.

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 :

 un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un


"_"
 un nom de variables peut comporter des lettres, des chiffres et les caractères _ et &
(les espaces ne sont pas autorisés!)
 Les noms de variables ne peuvent pas être les noms suivants (qui sont des noms
réservés) :
 abstract
 boolean break byte
 case catch char class const continue
 debugger default delete do double
 else export extends
 false final finally float for function
 goto
 if, implements, import, in, infinity, instanceof, int, interface
 label, long
 native, new, null
 package, private, protected, public
 return
 short, static, super, switch, synchronized
 this, throw, throws, transient, true, try, typeof

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

Variable Nom de Variable comporte des espaces

Nom_De_Variable 123Nom_De_Variable commence par un chiffre

nom_de_variable [email protected] caractère spécial @

nom_de_variable_123 Nom-de-variable signe - interdit

_707 transient nom réservé

Les noms de variables sont sensibles à la casse (le JavaScript fait la


différence entre un nom en majuscule et un nom en minuscules), il faut
donc veiller à utiliser des noms comportant la même casse!

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.

Voici un exemple dans lequel deux variables sont déclarées :

<SCRIPT language="JavaScript">
<!--
var MaVariable;
var MaVariable2 = 3;

7
MaVariable = 2;
document.write(MaVariable*MaVariable2);
// -->
</SCRIPT>

Portée (visibilité) des variables


Selon l'endroit où une variable est déclarée, celle-ci pourra être accessible (visible) de
partout dans le script ou bien uniquement dans une portion confinée du code, on parle de
« portée » d'une variable.
Lorsqu'une variable est déclarée sans le mot clé var, c'est-à-dire de façon implicite, elle est
accessible de partout dans le script (n'importe quelle fonction du script peut faire appel à
cette variable). On parle alors de variable globale
La portée d'une variable déclarée de façon explicite (précédée du mot-clé var), dépend de
l'endroit où elle est déclarée.
 Une variable déclarée au début du script, avant toute fonction, sera globale. Elle peut
être utilisée n'importe où dans le script .
 Une variable déclarée explicitement dans une fonction aura une portée limitée à cette
seule fonction, c'est-à-dire qu'elle est inutilisable ailleurs. On parle alors de « variable
locale ».
Voici deux exemples permettant de l'illustrer :

<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

Les types de données dans les variables


En JavaScript il n'est pas nécessaire de déclarer le type des variables, contrairement à des
langages évolués tels que le langage C ou le Java pour lesquels il faut préciser s'il s'agit
d'entier (int), de nombre à virgule flottante (float) ou de caractères (char).
En fait, le JavaScript n'autorise la manipulation que de 4 types de données :

 des nombres: entiers ou à virgules


 des chaînes de caractères (string): une suite de caractères
 des booléens: des variables permettant de vérifier une condition. Les booléens
peuvent prendre deux états :
 true : si le résultat est vrai ;
 false : lors d'un résultat faux.
 des variables de type null: un mot caractéristique pour indiquer que la variable ne
contient aucune donnée.

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 :

 un entier décimal: 895


 un nombre comportant un point (et non une virgule): 845.32
 une fraction: 27/11
 un nombre exponentiel, c'est-à-dire un nombre (éventuellement à virgule) suivi de la
lettre e (ou E), puis d'un entier correspondant à la puissance de 10 (signé ou non, c'est-à-
dire précédé d'un + ou d'un -)
 var a = 2.75e-2;
 var b = 35.8E+10;
var c = .25e-2;
Chaîne de caractères (string)
Une chaîne de caractère est, comme son nom l'indique, une suite de caractères. Les
chaînes de caractères sont traitées en détail dans l'article consacré à ce sujet. Voici deux
façons dont une variable peut être déclarée pour être interprétée comme une chaîne de
caractère :
var a = "Bonjour";
var b = 'Au revoir !';
Booléens (booleans)
Un booléen est une variable spéciale servant à évaluer une condition, il peut donc posséder
deux valeurs :

 Vrai (en anglais True) : représenté par la valeur 1


 Faux (en anglais False) : représenté par la valeur 0

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 :

 parseInt() permet de convertir une variable en nombre


 parseFloat() permet de convertir une variable en nombre décimal
10
parseInt()

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

Introduction à la notion de tableau


Les variables de JavaScript ne permettent de stocker qu'une seule donnée à la fois. Or,
étant donné qu'il est souvent utile de manipuler de nombreuses données, le concept de
variable se révèle parfois insuffisant, car il devient difficile de gérer un grand nombre de
variables distinctes.

Pour y remédier JavaScript propose une structure de données permettant de stocker


l'ensemble de ces données dans une "variable commune" : le tableau.

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 :

var MonTableau = new Array();

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.

var MonTableau = ["Teebo",


"Eaulive",
"Asevere",
"Kalamit",
"Serge",
"Chat_Teigne",
"BmV"];

document.write("Le 4ième élément du tableau est "+MonTableau[3]);

// Affichera "Le 4ième élément du tableau est Kalamit"

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.

Qu'est-ce qu'une chaîne de caractère


Une chaîne de caractère est, comme son nom l'indique, une suite de caractères. On la
représente par la suite de caractères encadrée par des guillemets simples (') ou doubles ("),
sachant que les deux types de guillemets ne peuvent être mélangés pour une même chaîne,
ce qui signifie que les guillemets, dans une chaîne de caractères, existent par paire.

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

Ainsi, si on veut stocker la chaine suivante dans la variable Titre :

Qu'y a-t-il dans "c:windows"

Il faudra écrire cette chaîne de la manière suivante dans le code JavaScript :


Titre = "Qu'y a-t-il dans "c:windows"";

il est également possible de délimiter la chaîne à l'aide de guillemets simples de la façon


suivante :

Titre = 'Qu'y a-t'il dans "c:windows"';

L'architecture d'une chaîne de caractères


Une chaîne de caractère est en fait d'un tableau constitué de n caractères (n est donc le
nombre de caractères), on note 0 la position du premier caractère (celui à l'extrême gauche),
puis on les compte de gauche à droite en incrémentant ce nombre :

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

Manipuler des chaînes de caractères


Pour manipuler les chaînes de caractères, le langage JavaScript propose l'objet String,
comportant de nombreuses méthodes permettant de créer des chaînes de caractères, et les
manipuler c'est-à-dire en extraire des sous-chaînes, en modifier la casse, en modifier le
style, ...

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

Ce sont les gestionnaires d'événements qui permettent d'associer une action à un


événement. La syntaxe d'un gestionnaire d'événement est la suivante :

onEvenement="Action_Javascript_ou_Fonction();"
Lorsqu'il est utilisé dans un lien hypertexte, par exemple, la syntaxe sera la suivante :

<A href="URL" "onEvenement='Action_Javascript_ou_Fonction();'">Lien</a>


Les gestionnaires d'événements sont associés à des objets, et leur code s'insèrent dans la
balise de ceux-ci...

Liste des événements


Evénement Description Test Effet

Abort Cet événement a lieu lorsque l'utilisateur interrompt


(onAbort) le chargement de l'image

Blur Se produit lorsque l'élément perd le focus, c'est-à-


(onBlur) dire que l'utilisateur clique hors de cet élément,
celui-ci n'est alors plus sélectionné comme étant

17
l'élément actif.

Change Se produit lorsque l'utilisateur modifie le contenu


(onChange) d'un champ de données.

Test
Click Se produit lorsque l'utilisateur clique sur l'élément
(onClick) associé à l'événement.

Se produit lorsque l'utilisateur double-clique sur Test


l'élément associé à l'événement (un lien hypertexte
dblclick
ou un élément de formulaire). Cet événement n'est
(onDblclick)
supporté que par les versions de JavaScript 1.2 et
supérieures

Se produit lorsque l'utilisateur effectue unglisser-


dragdrop déposer sur la fenêtre du navigateur.
(onDragdrop) Cet événement n'est supporté que par les versions
de JavaScript 1.2 et supérieures

Se déclenche lorsqu'une erreur apparaît durant le


error
chargement de la page.
(onError)
Cet événement fait partie du JavaScript 1.1.

Se produit lorsque l'utilisateur donne le focus à un


Focus
élément, c'est-à-dire que cet élément est sélectionné
(onFocus)
comme étant l'élément actif

Se produit lorsque l'utilisateur appuie sur une touche


keydown de son clavier.
(onKeydown) Cet événement n'est supporté que par les versions
de JavaScript 1.2 et supérieures

Se produit lorsque l'utilisateur maintient une touche


keypress de son clavier enfoncée.
(onKeypress) Cet événement n'est supporté que par les versions
de JavaScript 1.2 et supérieures

keyup Se produit lorsque l'utilisateur relâche une touche de


(onKeypress) son clavier préalablement enfoncée.

18
Cet événement n'est supporté que par les versions
de JavaScript 1.2 et supérieures

Load Se produit lorsque le navigateur de l'utilisateur


(onLoad) charge la page en cours

MouseOver Se produit lorsque l'utilisateur positionne le curseur


Test
(onMouseOver) de la souris au-dessus d'un élément

Se produit lorsque le curseur de la souris quitte un


MouseOut
élément. Test
(onMouseOut)
Cet événement fait partie du JavaScript 1.1.

Reset Se produit lorsque l'utilisateur efface les données


(onReset) d'un formulaire à l'aide du bouton Reset.

Resize Se produit lorsque l'utilisateur redimensionne la


(onResize) fenêtre du navigateur

Se produit lorsque l'utilisateur sélectionne un texte


Select
(ou une partie d'un texte) dans un champ de type
(onSelect)
"text" ou "textarea"

Se produit lorsque l'utilisateur clique sur le bouton


Submit
de soumission d'un formulaire (le bouton qui permet
(onSubmit)
d'envoyer le formulaire)

Unload Se produit lorsque le navigateur de l'utilisateur quitte


(onUnload) la page en cours

Association des événements aux objets


Chaque événement ne peut pas être associé à n'importe quel objet. Il est évident par
exemple qu'un événement OnChange ne pourra pas s'appliquer à un lien hypertexte. Voici un
tableau récapitulant les objets auxquels peuvent être associés chaque événement :
Evénement
Objets concernés
s

abort Image

19
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text,
blur
TextArea, window

change FileUpload, Select, Submit, Text, TextArea

click Button, document, Checkbox, Link, Radio, Reset, Select, Submit

dblclick document, Link

dragdrop window

error Image, window

Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text,
focus
TextArea, window

keydown document, Image, Link, TextArea

keypress document, Image, Link, TextArea

keyup document, Image, Link, TextArea

load Image, Layer, window

mousedown Button, document, Link

mousemove Aucun spécifiquement

mouseout Layer, Link

mouseover Area, Layer, Link

mouseup Button, document, Link

move window

reset form

resize window

20
select text, Textarea

submit Form

unload window

Quelques exemples d'événements


Le mieux pour apprendre à se servir des événements est de s'entraîner à écrire de petits
codes...
Pour vous inspirer, pensez à regarder les fichiers sources de certaines pages web, mais
pensez toujours à respecter les auteurs des codes en ne faisant pas un copier-coller de leurs
scripts sans leur accord (il est généralement de bon ton de citer la source du javascript que
l'on récupère...).

Ouverture d'une boîte de dialogue lors d'un click

Le code correspondant à une boîte de dialogue est très simple :

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!

Modification d'une image lors du survol d'un lien par le pointeur de la


souris

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:

Qu'est-ce qu'un opérateur'


Les opérateurs sont des symboles qui permettent de manipuler des variables, c'est-à-dire
effectuer des opérations, les évaluer, ...
On distingue plusieurs types d'opérateurs :
1. Les opérateurs de calcul
2. Les opérateurs d'affectation
3. Les opérateurs d'incrémentation
4. Les opérateurs de comparaison
5. Les opérateurs logiques (booléens)
6. (Les opérateurs bit-à-bit)
7. (Les opérateurs de rotation de bit)
8. Opérateurs de manipulation de chaînes de caractères
9. Les priorités

Les opérateurs de calcul


Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une variable

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

Les opérateurs d'affectation


Ces opérateurs permettent de simplifier des opérations telles que ajouter une valeur dans
une variable et stocker le résultat dans la variable. Une telle opérations s'écrirait
habituellement de la façon suivante par exemple: x=x+2
Avec les opérateurs d'assignation il est possible d'écrire cette opération sous la forme
suivante: x+=2
Ainsi, si la valeur de x était 7 avant opération, elle sera de 9 après...

Les opérateurs de ce type sont les suivants :

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.

Les opérateurs d'incrémentation


Ce type d'opérateur permet de facilement augmenter ou diminuer d'une unité une variable.
Ces opérateurs sont très utiles pour des structures telles que des boucles, qui ont besoin
d'un compteur (variable qui augmente de un en un).

Un opérateur de type x++ permet de remplacer des notations lourdes telles que x=x+1 ou
bien x+=1

Opérateur Dénomination Effet Syntaxe Résultat (avec x


24
valant 7)
Augmente d'une unité la
++ Incrémentation x++ 8
variable
Diminue d'une unité la
-- Décrémentation x-- 6
variable

Les opérateurs de comparaison

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

Les opérateurs logiques (booléens)


Ce type d'opérateur permet de vérifier si plusieurs conditions sont vraies :

Opérateur Dénomination Effet Syntaxe


Vérifie qu'une des conditions
|| OU logique ((expression1)||(expression2))
est réalisée
Vérifie que toutes les
&& ET logique ((expression1)&&(expression2))
conditions sont réalisées
Inverse l'état d'une variable
booléenne (retourne la valeur
! NON logique (!condition)
1 si la variable vaut 0, 0 si
elle vaut 1)

(Les opérateurs bit-à-bit)


Si vous ne comprenez pas ces opérateurs cela n'est pas important, vous n'en aurez
probablement pas l'utilité. Pour ceux qui voudraient comprendre, rendez- vous aux chapitres
suivants :

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

(Les opérateurs de rotation de bit)


Si vous ne comprenez pas ces opérateurs cela n'est pas important, vous n'en aurez
probablement pas l'utilité. Pour ceux qui voudraient comprendre, rendez- vous aux chapitres
suivants :

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

Opérateur Dénomination Effet Syntaxe Résultat


27
(avec x
valant 7)
Décale les bits vers la gauche
(multiplie par 2 à chaque 6 << 1
<< Rotation à gauche décalage). Les zéros qui sortent à (0110 << 12 (1100)
gauche sont perdus, tandis que 1)
des zéros sont insérés à droite
Décale les bits vers la droite
(divise par 2 à chaque décalage).
Rotation à droite 6 >> 1
Les zéros qui sortent à droite sont
>> avec conservation (0110 >> 3 (0011)
perdus, tandis que le bit non-nul
du signe 1)
de poids plus fort est recopié à
gauche
Décale les bits vers la droite
Rotation à droite (divise par 2 à chaque décalage). 6 >>> 1
>>> avec remplissage Les zéros qui sortent à droite sont (0110 3 (0011)
de zéros perdus, tandis que des zéros sont >>> 1)
insérés à gauche

Opérateurs de manipulation de chaînes de caractères


L'opérateur '+' lorsqu'il est utilisé avec des [jscarac.php3 chaînes de caractères] permet de
les concaténer, c'est-à-dire de joindre bout-à-bout les deux chaînes de caractères :

Ainsi var='a'+'b' est équivalent à var='ab'.


var1='a'
var=var1+'b' -> var='ab'

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 :

Priorité des opérateurs


++++++++++++ () []
+++++++++++ -- ++ ! ~ -
++++++++++ * / %

28
+++++++++ + -
++++++++ < <= >= >
+++++++ == !=
++++++ ^
+++++ |
++++ && ||
+++ ' :
++ = += -= *= /= %= <<= >>= >>>= &= ^= |=
+ ,

Qu'est-ce qu'une structure conditionnelle'


On appelle structure conditonnelle les instructions qui permettent de tester si une condition
est vraie ou non, ce qui permet notamment de donner de l'interactivité à vos scripts :
1. Instruction if
2. Instruction if ... else
3. Opérateur ternaire
4. Boucles
1. Boucle for
2. Instruction while
3. Saut inconditionnel
4. Arrêt inconditionnel
5. Instruction switch...case

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.

La syntaxe de cette expression est la suivante :


if (condition réalisée) {
liste d'instructions
}

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

if (x==2) document.write("X vaut 2");

Instruction if ... else


L'instruction if dans sa forme basique ne permet de tester qu'une condition, or la plupart du
temps on aimerait pouvoir choisir les instructions à exécuter en cas de non réalisation de
la condition...
L'expression if ... else permet d'exécuter une autre série d'instruction en cas de non-
réalisation de la condition.

La syntaxe de cette expression est la suivante :


if (condition réalisée) {
//liste d'instructions
}
else {
//autre série d'instructions
}

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.

La syntaxe de cette expression est la suivante :


for (compteur; condition; modification du compteur) {
liste d'instructions
}

Par exemple :
31
for (i=1; i<6; i++) {
Alert(i)
}

Cette boucle affiche 5 fois la valeur de i, c'est-à-dire 1,2,3,4,5


Elle commence à i=1, vérifie que i est bien inférieur à 6, etc... jusqu'à atteindre la valeur i=6,
pour laquelle la condition ne sera plus réalisée, la boucle s'interrompra et le programme
continuera son cours.

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

La syntaxe de cette expression est la suivante :


while (condition réalisée) {
liste 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++;
}

Il y avait une erreur dans ce script... peut-être ne l'avez-vous pas vue :


Lorsque x est égal à 7, le compteur ne s'incrémente plus, il reste constamment à la valeur 7,
il aurait fallu écrire :
x=1;
while (x<=10) {
if (x == 7) {
Alert('division par 0');
x++;
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.

La déclaration d'une fonction


Avant d'être utilisée, une fonction doit être définie car pour l'appeler dans le corps du
programme il faut que le navigateur la connaisse, c'est-à-dire qu'il connaisse son nom, ses
arguments et les instructions qu'elle contient. La définition d'une fonction s'appelle
"déclaration". La déclaration d'une fonction se fait grâce au mot clé function selon la syntaxe
suivante :
function Nom_De_La_Fonction(argument1, argument2, ...) {
liste d'instructions
}
Remarques:
 le mot clé function est suivi du nom que l'on donne à la fonction
 le nom de la fonction suit les mêmes règles que les noms de variables :
 le nom doit commencer par une lettre
35
 un nom de fonction peut comporter des lettres, des chiffres et les
caractères _ et & (les espaces ne sont pas autorisés!)
 le nom de la fonction, comme celui des variables est sensible à la casse
(différenciation entre les minuscules et majuscules)
 Les arguments sont facultatifs, mais s'il n'y a pas d'arguments, les parenthèses
doivent rester présentes
 Il ne faut pas oublier de refermer les accolades
 Le nombre d'accolades ouvertes (fonction, boucles et autres structures) doit être égal
au nombre d'accolades fermées!
 La même chose s'applique pour les parenthèses, les crochets ou les guillemets!
Une fois cette étape franchie, votre fonction ne s'exécutera pas tant que l'on ne fait pas
appel à elle quelque part dans la page!

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

Code JavaScript qui ne sert absolument à rien si ce n'est déranger vos


visiteurs...

</BODY>
</HTML>

Les paramètres d'une fonction


Il est possible de passer des paramètres à une fonction, c'est-à-dire lui fournir une valeur ou
le nom d'une variable afin que la fonction puisse effectuer des opérations sur ces paramètres
ou bien grâce à ces paramètres.
Lorsque vous passez plusieurs paramètres à une fonction il faut les séparer par des virgules,
aussi bien dans la déclaration que dans l'appel et il faudra veiller à bien passer le bon
nombre de paramètres lors de l'appel au risque sinon de créer une erreur dans votre
JavaScript...
Imaginons que l'on veuille créer une page Web qui affiche une boîte de dialogue (les boîtes
de dialogues sont à éviter dans vos pages car elles sont énervantes, mais c'est toutefois une
manière simple d'apprendre le JavaScript) qui affiche un texte différent selon le lien sur
lequel on appuie.
La méthode de base consiste à faire une fonction pour chaque texte à afficher :
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!--

function Affiche1() {
alert('Texte 1');
}
function Affiche2() {
alert('Texte2');
}

37
//-->
</SCRIPT>
</HEAD>
<BODY>

<A href="javascript:;" onClick="Affiche1();">Texte1</A>


<A href="javascript:;" onClick="Affiche2();">Texte2</A>

</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>

<A href="javascript:;" onClick="Affiche('Texte1');">Texte1</A>


<A href="javascript:;" onClick="Affiche('Texte2');">Texte2</A>

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

Définir des objets avec les fonctions


Les navigateurs ont leurs propres objets avec leur propriétés respectives. Il est toutefois
possible de créer ses propres objets avec les propriétés qu'on leur définit.
Imaginons que l'on veuille par exemple créer un objet arbre avec ses propriétés :
 type
 taille
 age
Il est possible de créer l'objet Arbre en créant une fonction dont le nom est Arbre et qui
définit les propriétés de l'objet en cours grâce au mot-clé this, en passant en paramètre
chacune des propriétés :
function Arbre(Type, Taille, Age) {
this.Type = Type;

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)

On peut ainsi créer autant d'instances que l'on désire...


Il est de plus possible d'ajouter un objet existant en tant que propriété d'un autre objet.
Imaginons que vous créiez un objet proprietaire :

function Proprietaire(Nom, Prenom) {


this.Nom = Nom;
this.Prenom = Prenom;
}
Définissons maintenant l'objet Arbre comme suit :
function Arbre(Type, Taille, Age, Proprietaire) {
this.Type = Type;
this.Taille = Taille;
this.Age = Age;
this.Proprietaire = Proprietaire;
}
Il est alors possible de trouver le nom du propriétaire d'un arbre :

Arbre.Proprietaire.Nom

Ainsi que de le modifier si jamais le propriétaire change :


Arbre1.Proprietaire.Nom = 'Dupont';
Arbre1.Proprietaire.Prenom = 'René';

Qu'appelle-t-on une méthode?


Une méthode est une fonction associée à un objet, c'est-à-dire une action que l'on peut faire
exécuter à un objet. Les méthodes des objets du navigateur sont des fonctions définies à
l'avance par les normes HTML, on ne peut donc pas les modifier, il est toutefois possible de
créer une méthode personnelle pour un objet que l'on a créé soi-même. Prenons par
exemple une page HTML, elle est composée d'un objet appelédocument.
L'objet document a par exemple la méthode write() qui lui est associée et qui permet de
modifier le contenu de la page HTML en affichant du texte. Une méthode s'appelle un peu
comme une propriété, c'est-à-dire de la manière suivante :
window.objet1.objet2.methode()

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

Ce qui aura pour effet de concaténer la chaîne 'bonjour' (contenue dans la


variable Chaine) à la suite de la chaîne de caractère 'je vous passe le' dans la page
HTML
 soit en insérant directement une expression, qui sera évaluée dans un premier temps
et dont le résultat sera ensuite affiché:
 Chaine='La racine carrée de 2 vaut : ';

document.write(Chaine+Math.sqrt(2));
Il est notamment possible d'utiliser des balises HTML à l'intérieur même de la
méthode write :
document.write('<font color="#FF0000">Bonjour</font>');
La méthode writeln
La méthode writeln() fonctionne exactement comme la méthode write() à la seule différence
qu'elle ajoute un retour chariot à la fin de la chaîne.
Or un retour chariot (en HTML) est ignoré par le navigateur (Rappel: un retour à la ligne se
fait avec la balise <BR>). Cette méthode n'a donc un avantage que lorsqu'elle est utilisée
41
dans des éléments HTML sensibles aux retours à la ligne, par exemple entre les balises
<PRE> et </PRE> qui formattent le texte comme dans un fichier texte (et qui prend donc en
compte les retours à la ligne).

Définir une méthode pour un objet


Il est possible de définir une méthode pour un type d'objet que l'on a créé en incluant une
fonction en tant que propriété d'un objet. Reprenons l'exemple de l'arbre :
On définit tout d'abord un propriétaire :

function Proprietaire(Nom, Prenom) {


Proprietaire.Nom = Nom;

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

Car la méthode AfficheInfos() est appliquée à l'objet Arbre1.


42
Qu'est-ce qu'une boîte de dialogue?
Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un événement, et
qui permet

 Soit d'avertir l'utilisateur


 Soit le confronter à un choix
 Soit lui demander de compléter un champ pour récupérer une information
Ce type de boîte est à utiliser avec parcimonie car elle oblige une action de la part de
l'utilisateur, et est à terme très énervante... Les boîtes de dialogues sont toutefois un moyen
simple de débugger (repérer les erreurs), en affichant à un point donné une fenêtre
contenant la valeur d'une variable.

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

alert('Chaîne de caractères' + nom_de_la_variable);


La chaîne de caractère peut (et doit dans certains cas) contenir des caractères marqués d'un
antislash (\). Par exemple, si vous voulez écrire :
Message d'alerte :
Au feu!!
Il faudra écrire le script suivant :

alert('Message d\'alerte \nAu feu!!');


Test

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

Elle admet comme alert() un seul paramètre: une chaîne de caractères...


Sa syntaxe est :

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 :

prompt('Posez ici votre question','chaîne par défaut');


Cette boîte d'invite retourne la valeur de la chaîne saisie par l'utilisateur, elle retourne la
valeur null si jamais aucun texte n'est saisi...

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 :

 classés selon une hiérarchie pour pouvoir les désigner précisément ;


 auxquels des propriétés sont associées.

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.

Les objets du navigateur


JavaScript divise la page du navigateur en objets, afin de permettre d'accèder à n'importe
lequel d'entre-eux et de pouvoir les manipuler par l'intermédiaire de leurs propriétés.

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 :

 name: le nom du champ de texte


 value: le texte contenu dans le champ
 size: la taille du champ de texte
L'appui sur les boutons suivants permet de modifier la
propriétéwindow.document.forms["form2"].champ_text.value, c'est-à-dire le texte
associé au champ de texte nommé « champ_text » dans le formulaire ci-dessous
nommé form2)

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.

Présentation des objets du noyau JavaScript


Voici la liste des objets du noyau JavaScript :

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 :

var x = new Array(element1[, element2, ...]);


Si aucun élément n'est précisé en paramètre, le tableau est vide à la création. Dans le cas
contraire, il sera initialisé avec les valeurs des éléments passés en paramètres.
Les propriétés de l'objet Array
L'objet Array possède deux propriétés caractéristiques: les propriétés input et length.
Le tableau suivant décrit les propriétés de l'objet Array.
Propriété description
constructor Cette propriété contient le constructeur de l'objet Array.
Cette propriété permet de faire une recherche dans le tableau à l'aide d'une
input
expression régulière
length Cette propriété contient le nombre d'éléments du tableau.
prototype Cette propriété permet d'ajouter des propriétés personnalisées à l'objet.

Les méthodes standards de l'objet Array


Le tableau suivant décrit les méthodes de l'objet Array.
Méthode description
Cette méthode permet de concaténer plusieurs tableaux,
concat(tab1, tab2[, tab3, ...]) c'est-à-dire de créer un tableau à partir des différents
tableaux passés en paramètre.
Cette méthode renvoie une chaîne de caractères contenant
join(tableau) ouTableau.join()
tous les éléments du tableau.
Cette méthode supprime le dernier élément du tableau et
pop(tableau) ouTableau.pop()
retourne sa valeur.
Tableau.push(valeur1[,
Cette méthode ajoute un ou plusieurs éléments au tableau.
valeur2, ...])
Tableau.reverse() Cette méthode inverse l'ordre des éléments du tableau.
Tableau.shift() Cette méthode supprime le premier élément du tableau.
Cette méthode renvoie un tableau contenant une partie
Tableau.slice()
(extraction) des éléments d'un tableau.
Tableau.splice() Cette méthode ajoute/retire des éléments d'un 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.

Les particularités de l'objet Boolean


L'objet Boolean est un objet du noyau JavaScript permettant de créer et de manipuler des
valeurs de type booléennes.

Voici la syntaxe à utiliser pour créer une variable booléenne :

var x = new Boolean(expression);


Le paramètre peut-être soit une valeur (True ou False) soit une expression, auquel cas celle-
ci est évaluée en tant que valeur booléenne. Lorsqu'aucune valeur n'est passée, ou la
valeur 0, ou une chaîne de caractères vide, ou null, ou undefined ou bien NaN, la valeur de
l'objet est initialisée à False. Dans tous les autres cas, l'objet Boolean possédera la
valeur True.
Les propriétés de l'objet Boolean
Le tableau suivant décrit les propriétés de l'objet Boolean.
Propriété description
constructor Cette propriété contient le constructor l'objet Boolean.
prototype Cette propriété permet d'ajouter des propriétés personnalisées à l'objet.

Les méthodes standards de l'objet Boolean


Le tableau suivant décrit les méthodes de l'objet Boolean.
Méthode description
toSource() Cette méthode renvoie le code source qui a permis de créer l'objet Boolean.
Cette méthode renvoie la chaîne de caractères correspond à l'instruction qui a
toString()
permis de créer l'objet Boolean.

50
Cette méthode retourne tout simplement la valeur de l'objet Boolean auquel elle
valueOf
fait référence.

Les particularités de l'objet Date


L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la
gestion du temps. Il s'agit d'un objet inclus de façon native dans JavaScript, et que l'on peut
toujours utiliser.
La syntaxe pour créer un objet-date peut être une des suivantes :

1. Nom_de_l_objet = new Date()


cette syntaxe permet de stocker la date et l'heure actuelle
2. Nom_de_l_objet = new Date("jour, mois date année
heures:minutes:secondes")
les paramètres sont une chaîne de caractère suivant scrupuleusement la notation ci-dessus
3. Nom_de_l_objet = new Date(année, mois, jour)
les paramètres sont trois entiers séparés par des virgules.
Les paramètres omis sont mis à zéro par défaut
4. Nom_de_l_objet = new Date(année, mois, jour, heures, minutes, secondes[,
millisecondes])
les paramètres sont six entiers séparés par des virgules.
Les paramètres omis sont mis à zéro par défaut
Les dates en JavaScript sont stockées de la même manière que dans le langage Java, c'est-
à-dire qu'il s'agit du nombre de millisecondes depuis le 1 er janvier 1970. Ainsi, toute date
antérieure au 1er janvier 1970 fournira une valeur erronée.
Avec les versions de JavaScript inférieures à la version 1.3, pour manipuler des dates
antérieures à "l'année zéro" il vous sera nécessaire de créer un objet date spécifique.
A partir de la version 1.3, il est possible de manipuler des dates de plus ou mois 100 000 000
de jours par rapport au premier janvier 1970.
Les méthodes de l'objet Date
La date est stockée dans une variable sous la forme d'une chaîne qui contient le jour, le
mois, l'année, l'heure, les minutes, et les secondes. Il est donc difficile d'accéder à un seul
élément d'un objet date avec les fonctions de manipulation de chaînes de caractères, étant
donné que chacun des éléments peut avoir une taille variable. Heureusement, les méthodes
de l'objet Date fournissent un moyen simple d'accéder à un seul élément, ou bien de le
modifier.
Leur syntaxe est la suivante :
Objet_Date.Methode()

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

Permet de récupérer la valeur du L'objet retourné est un entier (entre 1 et


getDate()
jour du mois 31) qui correspond au jour du mois :

L'objet retourné est un entier qui


Permet de récupérer la valeur du
correspond au jour de la semaine :
getDay() jour de la semaine pour la date
spécifiée  0: dimanche
 1: lundi ...

Permet de récupérer la valeur de


L'objet retourné est un entier qui
getFullYear() l'anné sur 4 chiffres pour la date
correspond à l'année (XXXX) : 2011
passée en paramètre

Permet de récupérer la valeur de L'objet retourné est un entier (entre 0 et


getHours()
l'heure 23) qui correspond à l'objet Date.

L'objet retourné est un entier (entre 0 et


Permet de récupérer le nombre
getMilliseconds() 999) qui correspond aux millisecondes de
de millisecondes
l'objet passé en paramètre.

L'objet retourné est un entier (entre 0 et


Permet de récupérer la valeur
getMinutes() 59) qui correspond aux minutes de l'objet
des minutes
Date.

L'objet retourné est un entier (entre 0 et


Permet de récupérer le numéro 11) qui correspond au mois :
getMonth()
du mois
 0: janvier
 1: février ...

L'objet retourné est un entier (entre 0 et


Permet de récupérer le nombre
getSeconds() 59) qui correspond aux secondes de l'objet
de secondes
passé en paramètre.

getTime() Permet de récupérer le nombre L'objet retourné est un entier. Cette


de millisecondes depuis le méthode est très utile pour convertir des
1erjanvier 1970 dates, soustraire ou ajouter deux dates,

52
etc.

Retourne la différence entre


L'objet retourné est un entier, il représente
getTimezoneOffset() l'heure locale et l'heure GMT
le nombre de minutes de décalage
(Greenwich Mean Time)

Permet de récupérer la valeur de


L'objet retourné est un entier qui
getYear() l'anné sur 2 chiffres pour l'objet
correspond à l'anné (XX) :
Date.

Modifier le format de la date

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

L'objet retourné est une chaîne de caractère


Permet de convertir une date en une
toGMTString() du type :
chaîne de caractères au format GMT
Wed, 28 Jul 1999 15:15:20 GMT

L'objet retourné est une chaîne de caractère


Permet de convertir une date en une dont la syntaxe dépend du système, par
toLocaleString()
chaîne de carctères au format local exemple :
28/07/99 15:15:20

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

Permet de fixer la valeur du Le paramètre est un entier (entre 1 et 31) qui


setDate(X)
jour du mois correspond au jour du mois

Le paramètre est un entier qui correspond au jour de


Permet de fixer la valeur du la semaine :
setDay(X)
jour de la semaine
 0: dimanche
 1: lundi ...

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

Le paramètre est un entier (entre 0 et 11) qui


Permet de fixer le numéro correspond au mois :
setMonth(X)
du mois
 0: janvier
 1: février ...

Le paramètre est un entier représentant le nombre de


setTime(X) Permet d'assigner la date
millisecondes depuis le 1er janvier 1970

Les particularités de l'objet String


string est un mot anglais qui signifie "chaîne", il s'agit en fait de chaîne de caractères.
L'objet String est un objet qui contient un certain nombre de propriétés et de méthodes
permettant la manipulation de chaînes de caractères.
Les propriétés de l'objet String
L'objet string a une seule propriété : la propriété length qui permet de retourner la longueur
d'une chaîne de caractères. Cette propriété est très utile car lorsque l'on traite une chaîne de
caractères on aime généralement savoir à quel moment s'arrêter.
La syntaxe de la propriété length est la suivante :
x = nom_de_la_chaine.length;

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

Chaine.anchor("nom_a_donner"); Transforme le texte Chaine en ancrage HTML.

Chaine.big() Augmente la taille de la police.

Chaine.blink() Transforme la chaîne en texte clignotant.

Chaine.bold() Met le texte en gras (balise <B>).

Chaine.charAt(position) Retourne le caractère situé à la position donnée en paramètre

Renvoie le code Unicode du caractère situé à la position


Chaine.charCodeAt(position)
donnée en paramètre

Permet de concaténer les chaînes passées en paramètre, c'est-


concat(chaîne1, chaîne2[, ...])
à-dire de les joindre bout à bout.

Transforme la Chaine en caractères de police fixe (balise


Chaine.fixed()
<TT>)

Modifie la couleur du texte (admet comme argument la


Chaine.fontcolor(couleur)
couleur en hexadécimal ou en valeur littérale)

Modifie la taille de la police, en afectant la valeur passée en


Chaine.fontsize(Size)
paramètre

Chaine.fromCharCode(code1[, Renvoie une chaîne de caractères composée de caractères


code2, ..]) correspondant au(x) code(s) Unicode donné(s) en paramètre.

Retourne la position d'une sous-chaîne (lettre ou groupe de


Chaine.indexOf(sous-chaîne, lettres) dans une chaîne de caractère, en effectuant la
position) recherche de gauche à droite, à partir de la position spécifiée
en paramètre.

55
Chaine.italics() Transforme le texte en italique (balise <I>)

La méthode est similaire à indexOf(), à la différence que la


recherche se fait de droite à gauche :
Chaine.lastIndexOf(sous-chaîne, Retourne la position d'une sous-chaîne (lettre ou groupe de
position) lettres) dans une chaîne de caractère, en effectuant la
recherche de droite à gauche, à partir de la position spécifiée
en paramètre.

Chaine.link(URL) Transforme le texte en hypertexte (balise <A href>)

Chaine.small() Diminue la taille de la police

Chaine.strike() Transforme le texte en texte barré (balise <strike>)

Chaine.sub() Transforme le texte en indice (balise <sub>)

La méthode retourne une sous-chaîne commençant à l'index


Chaine.substr(position1, longueur) dont la position est donnée en argument et de la longueur
donnée en paramètre.

La méthode retourne la sous-chaîne (lettre ou groupe de


Chaine.substring(position1,
lettres) comprise entre les positions 1 et 2 données en
position2)
paramètre.

Chaine.sup() Transforme le texte en exposant (balise <sup>).

Chaine.toLowerCase() Convertit tous les caractères d'une chaîne en minuscule.

Chaine.toSource() Renvoie le code source de création de l'objet.

Chaine.toUpperCase() Convertit tous les caractères d'une chaîne en majuscule.

Chaine.valueOf() Renvoie la valeur de l'objet String.

Exemples d'utilisation des méthodes de l'objet String


Méthode charAt()
Il existe deux syntaxe pour la méthode charAt()
 Chaine = "chaine de caractères";

56
 Resultat = Chaine.charAt(position);
 Resultat = charAt("chaine de caractères", position);
Le paramètre position est un entier qui représente la position du caractère à récupérer, il doit
être compris entre O et n-1 (où n représente la longueur de la chaîne). Dans le cas contraire
(le paramètre positionnégatif ou supérieur ou égal à la longueur) charAt() renvoie une chaîne
de longueur nulle.

Voici quelques exemples :

var Chaine = 'Comment ça marche?';


 var Resultat = charAt(Chaine,0);

donne 'C'

 var Resultat = charAt("Comment ça marche?", 1);

donne 'o'

 var Resultat = Chaine.charAt(17);

donne '?'

 var Resultat = ("Comment ça marche?").charAt(18);

donne ''

 var Resultat = charAt(Chaine, -1);

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

SousChaine = "sous-chaîne de caractères";

Resultat = Chaine.indexOf(SousChaine, position);


La position indiquée en argument permet de déterminer la position du caractère à partir
duquel la recherche est effectué. L'argument position doit être compris entre 0 et n-1. Si cet
argument est omis la recherche débutera à la position 0.
Lorsque la recherche est infructueuse, la méthode indexOf() renvoie la valeur -1.
Voici quelques exemples :
57
Chaine = 'Comment ça marche?'

Sous_Chaine = 'mar'
 var Resultat = Chaine.indexOf(Sous_Chaine, 6)

donne '11'

 var Resultat = Chaine.indexOf(Sous_Chaine)

donne '11'

 var Resultat = Chaine.indexOf(Sous_Chaine, 11)

donne '11'

 var Resultat = Chaine.indexOf(Sous_Chaine, 12)

donne '-1'

 var Resultat = Chaine.indexOf(Sous_Chaine, -1)

donne "-1"

 var Resultat = Chaine.indexOf(Sous_Chaine, 15)

donne "-1"

 var Resultat = Chaine.indexOf(Sous_Chaine, 19)

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

SousChaine = "sous-chaîne de caractères";

Resultat = Chaine.lastIndexOf(SousChaine, position);

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'

 var Resultat = Chaine.lastIndexOf(Sous_Chaine)

donne '11'

 var Resultat = Chaine.lastIndexOf(Sous_Chaine, 11)

donne '11'

 var Resultat = Chaine.lastIndexOf(Sous_Chaine, 12)

donne '11'

 var Resultat = Chaine.lastIndexOf(Sous_Chaine, -1)

donne "-1"

 var Resultat = Chaine.lastIndexOf(Sous_Chaine, 19)

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

Resultat = Chaine.substring(position1, position2);

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 :

var Chaine = 'Comment ça marche?';


 var Resultat = Chaine.substring(1,5);

donne 'omme'

 var Resultat = Chaine.substring(6,6);

donne ''

 var Resultat = Chaine.substring(8,2);

donne 'mment '

Méthodes toLowerCase() et toUpperCase()


La méthode toLowerCase() permet de convertir toutes les lettres d'une chaîne en minuscule,
les autres caractères sont laissés tels quels.
Voici quelques exemples :

var Chaine = 'Comment ça Marche?';


 var Resultat = Chaine.toLowerCase();

donne 'comment ça marche?'

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.

Voici quelques exemples :


var Chaine = 'Comment ça Marche?';
 var Resultat = Chaine.toUpperCase();

60
donne 'COMMENT çA MARCHE?'

Présentation des objets du navigateur


Lorsque vous ouvrez une page Web, le navigateur crée des objets prédéfinis correspondant
à la page Web, à l'état du navigateur, et peuvent donner beaucoup d'informations qui vous
seront utiles.

Les objets de base du navigateur sont les suivants :

 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

Les objets du navigateur sont classés hiérarchiquement


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

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

Comment accéder à un objet?


Pour accéder à un objet du navigateur, il faut parcourir la hiérarchie du navigateur, en
partant du sommet (l'objet window), puis en parcourant tous les maillons jusqu'à atteindre
l'objet désiré. La syntaxe estwindow.objet1.objet2.objet3.objet_vise (ici il y a trois objets
intermédiaire objet1 objet2 objet3 mais ce nombre peut varier de 0 à un très grand nombre
d'objets, suivant l'imbrication de vos objets dans la page...).
Pour lire ou modifier le contenu d'une propriété de l'objet visé il suffit de rajouter un point,
puis le nom de la propriété. Certaines propriétés sont modifiables, c'est-à-dire que
dynamiquement il est possible modifier un élément (du texte, une image, ...). Certaines
propriétés sont par contre en lecture seule, c'est-à-dire qu'elles permettent uniquement de
récupérer des informations mais qu'il est impossible de les modifier...

Les particularités de l'objet window


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

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


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

Les propriétés de l'objet window


propriété description lecture seule

Il s'agit du message qui s'affiche par


defaultStatus non, modifiable à tout moment
défaut dans la barre d'état du navigateur

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

nom de la fenêtre dans laquelle on se


name Lecture seule
trouve

Il s'agit de la fenêtre qui englobe celle


parent dans laquelle on se trouve (si il y en a Lecture seule, contient des propriétés
une..)

Synonyme de la fenêtre actuelle


self Lecture seule, contient des propriétés
(redondance ou précision?)

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

Il s'agit de la fenêtre de plus haut niveau,


top celle qui contient tous les cadres Lecture seule, contient des propriétés
(frames)

window Il s'agit de la fenêtre actuelle... Lecture seule, contient des propriétés

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.

Les méthodes de l'objet window


L'objet window possède des méthodes relatives à l'ouverture et à la fermeture des fenêtres.

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

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',

'options_de_la_fenetre')">Lien vers URL</A>

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 (&quot;), et les apostrophes par "\'" ou bien "&#146;".

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.

Les options de la fenêtre sont les suivantes:

option description

directories = yes/no Affiche ou non les boutons de navigation

location = yes/no Affiche ou non la barre d'adresse

menubar = yes/no Affiche ou non la barre de menu (fichier, edition, ...)

resizable = yes/no Définit si la taille de la fenêtre est modifiable ou non

scrollbars = yes/no Affiche ou non les ascenceurs (barres de défilement)

status = yes/no Affiche ou non la barre d'état

65
toolbar = yes/no Affiche ou non la barre d'outils

width = largeur (en pixels) Définit la largeur

height = hauteur (en pixels) Définit la hauteur

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

Vous aimerez peut-être aussi