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

8 vues88 pages

JavaScript

Ce document est un support de cours sur JavaScript, couvrant divers aspects du langage, y compris son historique, ses caractéristiques, et son utilisation dans le développement web. Il aborde des sujets tels que les variables, les types de données, les structures de contrôle, et les objets, tout en soulignant l'importance de JavaScript dans la manipulation dynamique des pages web. Le cours est destiné aux étudiants de l'Institut Universitaire de Technologie d'Amiens pour l'année académique 2002/2003.

Transféré par

theboysinthebackyard

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

Formats disponibles

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

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

8 vues88 pages

JavaScript

Transféré par

theboysinthebackyard

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

Formats disponibles

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

Vous êtes sur la page 1/ 88

JavaScript

Institut Universitaire de Technologie d’Amiens • Support de cours, 2002/2003 Cyril CAUCHOIS

Table des matières

Chapitre 1 1
1 Tour d'horizon .................................................................1
1.1 Introduction .................................................................................1
1.1.1 Historique ..........................................................................2
1.1.2 Survol rapide du langage.................................................2
1.2 Un mot sur les entrées/sorties ..................................................2
1.3 Les variables et les données .....................................................2
1.4 Les types primitifs ......................................................................3
1.4.1 Types booléen, nombre et chaîne...................................3
1.4.2 Nombres particuliers, types null et indéfini...................3
1.5 Les tableaux ................................................................................3
1.6 Commentaires et fin d’instructions ..........................................3
1.6.1 Les commentaires ............................................................3
1.6.2 Fin d’une instruction ........................................................4
1.7 Expressions et tests conditionnels ..........................................4
1.7.1 Les opérateurs numériques ............................................4
1.7.2 Les opérateurs booléens .................................................5
1.7.3 Les opérateurs sur chaînes de caractères ....................5
1.7.4 L'opérateur conditionnel..................................................5
1.7.5 Les opérateurs d'affectation............................................5
1.7.6 L' opérateur de séquencement........................................6
1.7.7 Précédence des opérateurs.............................................6
1.7.8 L’opérateur Typeof ...........................................................6
1.8 Contrôle de flux...........................................................................6
1.8.1 Les blocs d'instructions : { instruction ... instruction } 7
1.8.2 L'instruction conditionnelle : if (condition) Statement1
else Statement2...........................................................................7
1.8.3 Boucle For : for(initialisation; rebouclage;
mise_a_jour) statement..............................................................7
1.8.4 Boucle while : while(condition) statement.....................8
1.8.5 L’instruction continue ......................................................8
1.8.6 L’instruction break ...........................................................9
1.8.7 Les fonctions : function nom(paramètres){corps}........9
1.8.8 Quelques notions sur la récursivité .............................10

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript i

Table des matières

1.9 Les objets .................................................................................. 11

1.9.1 Qu’est-ce qu’un objet ? ................................................. 11
Chapitre 4 28
1.9.2 Les méthodes ................................................................. 11
1.9.3 Prototypes et constructeurs ......................................... 12 4 Les Formulaires............................................................ 28
1.9.4 L’instruction For … in … ............................................... 12 4.1 Description................................................................................ 28
1.9.5 L’instruction With … ...................................................... 13 4.2 Objets formulaires.................................................................... 29
4.2.1 Présentation des objets formulaires............................ 29
4.2.2 Nommer les éléments de formulaire............................ 30
Chapitre 2 15 4.2.3 Evénements associés aux formulaires........................ 30
4.2.4 Donner le focus à un certain élément du formulaire.. 31
2 JavaScript et les Navigateurs ......................................15 4.3 Les différents types de formulaires ....................................... 31
4.3.1 Formulaires de contrôle et de calcul ........................... 31
2.1 Ajouter du code JavaScript à un document HTML ............... 15 4.4 Envoyez vos données et oubliez les ...................................... 32
2.1.1 En utilisant la balise <SCRIPT> .................................... 16 4.4.1 Un exemple ..................................................................... 32
2.1.2 Le code dans un fichier source .................................... 17 4.5 Le « panier à provisions » ....................................................... 32
2.1.3 En utilisant les événements .......................................... 17 4.5.1 Un exemple ..................................................................... 33
2.1.4 Avec formulaire .............................................................. 17
2.1.5 Avec hypertexte.............................................................. 17
2.2 Les événements temporels : ................................................... 18
2.3 Des scripts dans des documents HTML ................................ 18
Chapitre 5 37
2.4 Les entités JavaScript.............................................................. 19
2.5 Les URL JavaScript.................................................................. 19 5 L'objet Image ................................................................ 37
2.6 Les feuilles de styles JavaScript (JSSS)................................ 20 5.1 Des images sur une page web................................................ 37
5.2 Chargement de nouvelles images .......................................... 38
5.3 Précharger des images............................................................ 38
Chapitre 3 21 5.4 Changer des images en fonction d'événement générés par
l'utilisateur ........................................................................................ 38
3 Fenêtres et Frames .......................................................21 5.5 Les imagemaps ........................................................................ 40
5.5.1 La balise MAP................................................................. 40
3.1 Les frames................................................................................. 21 5.5.2 L'attribut ISMAP ............................................................. 40
3.1.1 Un exemple ..................................................................... 23
3.2 Les fenêtres Navigateur........................................................... 23
3.2.1 Créer des fenêtres.......................................................... 23
3.2.2 Le nom d'une fenêtre ..................................................... 24
Chapitre 6 43
3.2.3 Fermeture de fenêtres.................................................... 25
3.2.4 Créer des documents à la volée ................................... 25 6 Les Layers..................................................................... 43
3.3 Les fenêtres popup .................................................................. 26 6.1 Que sont les layers ? ............................................................... 43
3.3.1 Une boite d’alerte : ......................................................... 26 6.2 Créer des layers ....................................................................... 44
3.3.2 Une boite de confirmation :........................................... 26 6.3 Layers et JavaScript ................................................................ 45
3.3.3 Une boite de saisie :....................................................... 26 6.4 Bouger des layers .................................................................... 45
3.4 L’Historique............................................................................... 27 6.5 Le clipping ................................................................................ 46
ii Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Table des matières

6.6 L'emboîtement de layers ......................................................... 47 9.3.11 Event ................................................................................66

6.7 Effets avec des layers transparents....................................... 49 9.3.12 FileUpload .......................................................................66
9.3.13 Form .................................................................................67
9.3.14 Frames .............................................................................67
Chapitre 7 51 9.3.15 Fonction...........................................................................67
9.3.16 Hidden..............................................................................68
9.3.17 History .............................................................................68
7 Le modèle d'événement JavaScript 1.2 ...................... 51 9.3.18 Image ...............................................................................68
7.1 Les nouveaux événements ..................................................... 51 9.3.19 Link...................................................................................69
7.2 L'objet Event ............................................................................. 52 9.3.20 Location...........................................................................69
7.3 La capture d'événement .......................................................... 53 9.3.21 Math..................................................................................69
9.3.22 Navigator .........................................................................69
9.3.23 Number ............................................................................70
Chapitre 8 55 9.3.24 Option ..............................................................................70
9.3.25 Password.........................................................................70
8 Drag & Drop .................................................................. 55 9.3.26 Plugin ...............................................................................70
9.3.27 Radio ................................................................................71
8.1 Qu'est-ce que le Drag & Drop ? .............................................. 55 9.3.28 Reset ................................................................................71
8.2 Les événements de la souris avec JavaScript 1.2................ 56 9.3.29 Select ...............................................................................71
8.3 MouseDown, MouseMove et MouseUp .................................. 56 9.3.30 String................................................................................72
8.4 Afficher des objets en mouvement ........................................ 57 9.3.31 Submit..............................................................................72
8.5 Lâcher des objets..................................................................... 59 9.3.32 Text...................................................................................72
8.6 Améliorations ........................................................................... 59 9.3.33 Textarea ...........................................................................73
9.3.34 Window ............................................................................73
9.4 Leurs Propriétés .......................................................................74
Chapitre 9 61 9.5 Leurs événements ....................................................................77
9.6 Leurs méthodes ........................................................................78
9 Références .................................................................... 61
9.1 Les objets de base ................................................................... 61
9.2 Les tableaux prédéfinis ........................................................... 62
9.3 Les Objets ................................................................................. 63
9.3.1 Anchor............................................................................. 63
9.3.2 Applet .............................................................................. 63
9.3.3 Area ................................................................................. 63
9.3.4 Array................................................................................ 64
9.3.5 Booléen ........................................................................... 64
9.3.6 Boutons........................................................................... 64
9.3.7 Checkbox ........................................................................ 64
9.3.8 Date ................................................................................. 65
9.3.9 document ........................................................................ 65
9.3.10 Element array ................................................................. 65
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript iii
Table des matières

iv Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript

Tour d'horizon

Chapitre 1

1 Tour d'horizon

1.1 Introduction

Sous ce nom, certes trompeur, se cache un langage qui n'a rien à voir
avec le langage Java. Certains vous diront que JavaScript c'est du light,
que Java c'est pour les pros et que JavaScript pour les débutants. En fait,
JavaScript est un langage, Java en est un autre, chacun ayant ses propres
objectifs et s'adressant tous deux à des programmeurs. Par contre, les
bases de JavaScript reposent sur un autre langage de script : ECMAScript
(bien que historiquement, ce soit l'inverse). Aujourd'hui, toutes
implémentations de JavaScript se doit de respecter la spécification de
ECMAScript (ECMA-262). Les raisons en sont simples : JavaScript
trouvera sa place aussi bien du coté des serveurs WEB, que du coté des
clients (les navigateurs). Les objectifs n'étant naturellement pas les
mêmes, il fut nécessaire de définir un noyau minimal, pouvant être utilisé
dans toutes les situations.
A l'heure actuelle, ce langage est utilisé comme complément au langage
HTML, pour tout ce qui relève du traitement dynamique, c'est-à-dire de
tout ce qui ne peut être résolu qu'au niveau du navigateur (et non du
serveur). En effet, le code JavaScript, embarqué avec le code, ne sera
traité que par le navigateur recevant le document. Il est aussi utilisé dans
un autre cadre : l'administration des serveurs (dans ce cas des possibilités
d'utiliser les entrées/sorties et les accès au WEB sont possibles).
Ainsi, grâce à JavaScript, vous pourrez changer le contenu d'une image,
selon que vous soyez dans une zone de la fenêtre du navigateur ou dans
une autre, afficher des boîtes de dialogue dans telle ou telle situation,
contrôler la validité des données d'un formulaire contrôler l'historique des
pages déjà visitées et une multitude d'autres choses.

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 1
Tour d'horizon

1.1.1 Historique <SCRIPT LANGUAGE="JavaScript">

document.write('Bonjour le monde !\n');
</SCRIPT>
JavaScript, premier langage de script sur le web (il en existe d'autres </BODY>
aujourd'hui, comme VBScript), fut développé par la société Netscape*, et </HTML>
supporté dès la version 2.0 de leur navigateur. Très vite la société
Microsoft*, l'adopta aussi (à partir de la version 3.0). Désormais, les
nouvelles versions des deux grands navigateurs, supportent toutes les 1.3 Les variables et les données
deux ce langage qui a bien évolué depuis. Toutefois, il faut faire attention :
l'interprétation ou non du langage est une option paramétrable du Vous pouvez stocker des informations dans les scripts JavaScript. En voici
navigateur (pour la suite de ce cours, vérifiez qu'elle soit bien activée). quelques exemples :

var nouvelle_valeur;
1.1.2 Survol rapide du langage. var cout = null;
var nouveau_prix = 10.95;
adresse = « 23 Petite Rue »;
Les principales caractéristiques de ce langage sont les suivantes : var resultat = ‘Resultat inconnue’;
• quelques types de base : les nombres (pas de distinctions
resultat = true;
resultat = 1.08e+23;
apparentes entre entiers et flottants), les chaînes de caractères, resultat = 0x2Fe3;
les booléens, le type référence nulle. resultat = 0377;
• langage faiblement typé : une variable peut à tout moment nom = Jimmy Zed ;
var premier = 1, second = 2, dernier = 10;
changer de type.
• syntaxe proche de celle du langage C : quasiment les mêmes La déclaration des variables se fait par le mot clé var. Le type de la
opérateurs, les mêmes instructions. variable, lui, n'importe pas : une variable peut à un instant être d'un type,
• le langage est basé sur un modèle objets rudimentaire : il n'y a pas puis à l'instant suivant être d'un autre type. Le type de la variable est
de notion de classe, pas d'héritage. déterminé par l'affectation .
• quelques objets de bases : manipulation de dates, de tableaux,
calcul mathématiques. var toto="Coucou"; // toto est de type chaîne de caractères.
• pas de possibilités d'utiliser les entrées/sorties (sauf pour le clavier var toto=10; // toto prend maintenant le type nombre.
var tata; // tata est une variable dont le type n'a
et l'écran), du moins du point de vue des clients. Pas d'accès au // pas encore été spécifié
réseau non plus, du moins du point de vue des clients.

Remarques très importantes :

1.2 Un mot sur les entrées/sorties • le langage fait la différence entre les lettres majuscules et les
lettres minuscules. En conséquence, le mot var est différent du
JavaScript s’en remet à l’hôte qui l’héberge pour tous ses besoins mot Var, ou du mot VAR. Faites donc attention en écrivant les
d’entrées/sorties. L’exemple suivant permet d’afficher la phrase « Bonjour mots clés du langage. Pour la même raison, deux variables sont
tout le monde ! » sur une seule ligne à l’écran à l’intérieur d’une page différentes si une seule des lettres diffère.
HTML : • on est pas obligé d’utiliser le mot clé var pour déclaré une variable
car la première fois qu’une variable est utilisée, si elle n’est pas
<HTML> encore déclarée, elle le devient immédiatement. Toutefois, il est
<BODY>
préférable d’utiliser le mot clé var.
Page 2 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Tour d'horizon
document.write(totaux_mensuels[a]);
document.write(totaux_mensuels.length);
document.write(totaux_mensuels);
1.4 Les types primitifs
var jours = new Array("Dim","Lun","Mar","Mer","Jeu","Ven","Sam");

Les types primitifs sont de simples blocs de construction qui servent à

Pour déclarer un tableaux, on utilise une instanciation de l’objet Array. La
l’assemblage de toutes les données en JavaScript.
première ligne déclare donc un tableau de 12 éléments. La dernière ligne
déclare un tableau de sept éléments. Comme en C, on accède au
différents éléments du tableau en faisant suivre au nom de la
1.4.1 Types booléen, nombre et chaîne variable(sans espace), l'indice de l'élément entouré par des crochets.
Notons l’existence de la possibilité de connaître à tous moments, le
Le type booléen (boolean) ne peut prendre que deux valeurs : true ou nombres d'éléments constitutifs du tableau. Soit tab une variable de nature
false. tableau. Alors l'expressions tab.length vous rend le nombres d'éléments de
Le type nombre (number) est utilisé pour tous les types de nombres. On ce dernier.
ne distingue donc pas les entiers, les réels et les octets. La syntaxe Dans un élément de tableau, on peut aussi stocker un autre tableau. Un
utilisée est celle de C. Pour les entiers, plusieurs bases sont possibles : tableau de tableau peut être considéré comme un tableau
10, 16 (0x10 ==16, 0X14 ==20) ou 8 (010 ==8, 01 ==1). Pour les réels, la multidimensionnel, qui trouve de nombreuses applications notamment en
notation exponentielle est possible. Les nombres réels suivants sont bien mathématique :
construits : 3.141592654, -32.5 et 6.25E-3.
Le type chaîne (string) est utilisé pour les chaînes de caractères. Il n’existe var matrice = new Array(2);
pas de type pour représenter un seul caractère. comme en C, une chaîne matrice[0] = new Array(2);
matrice[1] = new Array(2);
de caractères peut commencer et finir par ". Mais on peut aussi utiliser une
simple apostrophe ('). Pour déspécialiser les caractères " et ' on utilise le matrice[0][0] = 1;
caractère backslash (\). Les caractères spéciaux de C restent disponibles matrice[1][0] = 0;
(\n pour le retour chariot, \t pour une tabulation ...). Voici quelques matrice[0][1] = 0;
matrice[1][1] = 1;
exemples de chaînes correctement construites : "Essai", ">>\"<<" et 'A\tB'.

1.4.2 Nombres particuliers, types null et indéfini 1.6 Commentaires et fin d’instructions

JavaScript reconnaît trois nombres particuliers dont les valeurs Infinity, - Une fois les données stockées, il faut être capable de leur appliquer des
Infinity et NaN. De même, il existe deux types particuliers appelés Null et traitements.
Undefined.
1.6.1 Les commentaires
1.5 Les tableaux
Commenter un programme, c'est lui adjoindre des annotations non
var totaux_mensuels = new Array(12);
significatives pour son exécution. Malgré tout, ils ont une utilités certaines
totaux_mensuels[3] = 1999.95; lorsque, après quelques temps vous relisez votre programme. En effet un
totaux_mensuels[4] = 'Pas de ventes'; programme, c'est bien plus que des mots mis côte à côte : chaque mot
possède une sémantique (un sens). Il en résulte un comportement précis
var a=4;
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 3
Tour d'horizon

lors de l'exécution, et il n'est pas forcement aisé de saisir ce comportement result = 5; result = 20; // on change la valeur de result
// juste pour voir...
dès la première lecture du code source. Les commentaires sont donc là
pour vous faciliter cette tâche. Pour ce qui est de la syntaxe, vous avez result
deux possibilités héritées des langages = 19; // la valeur finale de result est 19.

if ( result == 15 )
{
. En voici une brève description. /* Cet texte ne sera pas affiché puisque result ne
vaut pas 15 */
Mettre en commentaire la fin d'une ligne Clib.puts('La valeur de result est ')
Clib.puts('encore 15')
}
Cette solution, la plus simple, consiste à placer deux fois consécutivement else
le caractère divise ('/'), souvent nommé slash. Tout ce qui suit, sur la ligne, {
/* En fait, ce texte sera affiché puisque result ne
ces deux caractères est alors considéré comme un commentaire. Faites vaut pas 15 ! */
attention à ne pas vouloir placer un commentaire alors que vous êtes en Clib.puts('La valeur de result a été ');
train de définir une chaîne de caractères : votre annotation serait alors Clib.puts('modifiée et ne vaut plus 15');
incluse dans la chaîne. }
/* fin de l’exemple */
;
var maVariable = 3 + 2 // un petit commentaire
// Pas de commentaires dans la ligne suivante
var taVariable = "toto // tata";
Mettre un commentaire sur plusieurs lignes
1.7 Expressions et tests conditionnels
Cette deuxième solution devient utile quand le commentaire à placer
devient important : il est alors difficile de le mettre sur une seule ligne. Une expression est soit une valeur (15, 16.25, mais aussi "chaîne", ...),
Pour marquez le début du commentaire, placer les deux caractères soit le contenu d'une variable, soit le résultat d'une opération. Dans les
suivants (consécutivement) '/*'. Inscrivez ensuite votre annotation, puis deux premiers cas, rien de plus n'est à rajouter. Dans le dernier cas, le
replacez les deux caractères précédent dans l'ordre inverse ('*/') pour calcul peut être assez complexe : une opération étant constituée d'un
terminer votre commentaire. opérateur qui prend en compte un certain nombre de sous-expressions
(pouvant elles-mêmes être composées). Tous ces opérateurs admettent
/************************************ un ordre de priorité assurant une évaluation correcte de l'expression.
*** Ceci est aussi un commentaire *** Cependant si vous voulez être sûr de l'ordre d'évaluation des
************************************/ composantes de cette expression, ou si vous voulez fixer un autre l'ordre,
il vous est possible des parenthèser les sous-expressions composants
l'expression globale. Nous allons donc faire un petit tour des opérateurs
1.6.2 Fin d’une instruction qui sont à votre disposition.

La fin d’une instruction est, comme en C, indiquée par un point-virgule.

Cependant, JavaScript laisse le programmeur libre d’omettre ces points- 1.7.1 Les opérateurs numériques
virgules si une instruction semble naturellement être terminée :
Les opérateurs numériques prennent deux expressions numériques et
rendent une valeur de type numérique. On y trouve l'addition (+), la
var result;
result = 15 // pour ce test, donner à result la valeur 15 soustraction (-), la multiplication (*), la division (/), et la fonction modulo
Page 4 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Tour d'horizon

(%). On trouve aussi des opérateurs qui agissent bit à bit : le ET (&), le OU opérande, une valeur de type numérique ou booléenne. Dans ce dernier
(|), le XOR (^), le décalage à gauche (<<), vers la droite (>>). On trouve cas, c'est la chaîne de caractères décrivant la valeur qui est concaténée :
aussi des opérateurs numériques acceptant uniquement comme ex "34" pour le nombre 34 ou "true" pour une valeur booléenne qui serait
opérande, une variable numérique. On trouve notamment la fonction vraie.
d'incrémentation (++) et celle de décrémentation (--) : dans les deux cas,
l'opérateur peut être soit préfixé (l'incrémentation de la variable se fait
avant l'évaluation de l'expression), soit postfixé (dans ce cas c'est un peu 1.7.4 L'opérateur conditionnel
plus fin, on évalue d'abord, l'expression globale, puis ensuite on
incrémentera la variable). Voici une expression numérique dont toutes les L'opérateur que nous allons maintenant décrire sert à retourner une
sous-expressions sont de type numérique : on remarquera l'utilisation des expression ou une autre selon qu'une troisième (servant d'expression de
parenthèses pour forcer l'ordre d'évaluation des sous-expressions. test) soit vraie ou fausse. Cet opérateur est donc ternaire (il accepte trois
opérandes, ici trois expressions). Il est donc logique d'avoir choisi deux
// une expression numérique
(b*b+9*p/q)/(4*c) caractères de séparation : '?' pour séparer la première de la seconde et ':'
pour séparer la seconde de la dernière. Pour vous éclairer un petit peu
plus, regardez les exemples qui suivent.

// Exemple 1 : si a vaut 5 alors on retourne l'expression

1.7.2 Les opérateurs booléens // de type booléen valant vrai, sinon on retourne une
// expression numérique complexe.
(a==5)?true:(a+b)*4
Une première catégorie d'opérateurs booléens permet de réaliser des
comparaisons entre deux variables (deux opérandes), de même nature : // Exemple 2 : on retourne le numéro d'une des quatre
deux nombres, deux chaînes ou deux booléens. Le résultat est alors un premières
booléen (vrai ou faux). On en dénombre six : l'opérateur d'égalité "==", // lettres de l'alphabet contenues dans la chaîne toto
(toto=="a")?1:(toto=="b")?2:(toto=="c")?3:(toto=="d")?4:false
d'inégalité "!=", d'infériorité stricte "<", d'infériorité "<=", de supériorité
stricte ">" et de supériorité ">=". Une autre catégorie d'opérateurs permet
de réaliser des opérations entre booléens : la conjonction "&&" (les deux
opérandes doivent être vraies), la disjonction "||" (une au moins, des deux
1.7.5 Les opérateurs d'affectation
opérandes, doit être vraie, sinon le résultat est faux), la négation "!" (c'est
un opérateur unaire qui effectue la négation de l'opérande, forcément de
type booléenne). Nous allons maintenant voir une série d'opérateurs infixes un peu
particuliers : ce sont les opérateurs d'affectation. En effet même si certains
// une expression booléenne dont on voit pas trop le sens langages considèrent l'affectation comme une instruction, les langages
(b==3 && c!=5) || (a==(b*b+9*p/q)/(4*c) || z<=10)
issus de C eux la perçoivent comme une expression. La principale
conséquence étant que l'affectation retourne un résultat. Ce dernier est en
fait la valeur, et donc le type, qui est affectée. Plus généralement, une
opération d'affectation recopie la valeur de l'opérande droite, et ce à un
1.7.3 Les opérateurs sur chaînes de caractères calcul près, dans la variable de l'opérande gauche (il ne peut s'agir que
d'une variable, car elle seule pourra recevoir un résultat) et retourne cette
La seule opération définie sur les chaînes de caractères est la valeur. L'opérateur le plus général est donc l'affectation classique
concaténation et elle est dénotée par le symbole +. L'opérateur résultant (symbolisée par le caractère '='). L'opérande droite est simplement
prend deux opérandes de nature chaîne de caractères et rend une chaîne recopiée dans la variable nommée par l'opérande gauche. On voit de suite
de caractères. Il est de plus possible de passer, comme seconde
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 5
Tour d'horizon

que l'on peut écrire a=b=c=10 : dans ce cas c reçoit 10, puis b reçoit le + -
<< >>
contenu de c (soit 10), puis a reçoit le contenu de b (soit toujours 10). Ce == != < <= > >=
que l'on peut trouver de plus dans les langages issus de C, ce sont les &
affectations combinées. C'est-à-dire qu'on effectue d'abord un calcul entre ^
le contenu de la variable, décrite par l'opérande gauche, et celle de droite, |
&&
puis on affecte le résultat du calcul à la variable. On a notamment les ||
opérateurs suivants : += -= *= /= %= &= |= ^= <<= >>=. Pour mieux ?:
comprendre ce qui se passe regardez les équivalences suivantes. = += -= *= /= %= <<= >>= &= ^= |=
,
a+=10 <=> a=a+10
b<<=10 <=> b=b<<10
// Vous trouverez de suite les autres équivalences.
1.7.8 L’opérateur Typeof
Dernière remarque, l'opérateur '+=' est bien entendu aussi défini sur les
chaînes de caractères. Typeof est utilisé pour identifier le type d’un élément. Etant donnée une
variable ou une expression, il renvoie une chaîne de caractères décrivant
son type :
1.7.6 L' opérateur de séquencement var a = 'n_importe_quoi';
var b;
Il peut être utile de diviser le calcul d'une expression en plusieurs sous- document.write(typeof(a)); // affiche "string"
document.write(typeof(b)); // affiche "undefined"
expressions. Mais supposons qu'on ne puisse exécuter qu'une seule document.write(typeof(c)); // affiche "undefined"
expression à l'endroit clé (par exemple la sous-expression test d'une
expression conditionnelle). Dans ce cas vous pouvez utiliser l'opérateur de
séparation d'expression. La valeur de l'expression globale est celle de
1.8 Contrôle de flux
l'évaluation de la dernière expression. Regardez l'exemple suivant.

var a; Pour ceux qui connaissent déjà les langages, cette partie risque de ne pas
var b; être des plus intéressantes (la syntaxe et la sémantique restent très
var Result = (a+=x,b=y*z,a*b==3?variable1:variable2);
similaires). Quant aux autres, ils vont pouvoir s'apercevoir que ce n'est pas
si compliqué qu'il pourrait y paraître.
La première règle : de syntaxe (que nous avons déjà évoquée) est très
simple : toute instruction se termine par un point-virgule (;), et ce même s'il
1.7.7 Précédence des opérateurs
s'agit de la dernière instruction d'un bloc (certains autres langages
permettent à ce moment là de l'omettre). Le point-virgule joue le rôle
Enfin, je pense qu'il est nécessaire de signaler qu'il n'est pas utile de d'opérateur de séquencement d'instructions.
parenthéser vos expressions à tous vents. Des règles de priorité existent : Seconde règle : toute expression est aussi une instruction. Ainsi
utilisez-les! Pour information, voici un petit tableau rappelant la priorité des l'instruction suivante est valide et calcul une valeur qui est finalement
opérateurs : ceux qui sont sur une même ligne sont de priorité identique, oubliée : "3*a+4*b;". Si vous cherchez une raison à ce choix, pensez qu'il
ceux du haut étant plus prioritaires que ceux du bas. vous faudra bien affecter des valeurs à des variables (or l'affectations est
[ ] .
! ++ -- une expression ...), et n'oubliez pas qu'un programme s'écrit avec des
* / % instructions.
Page 6 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Tour d'horizon

peuvent donc ne pas apparaître. Dans ce cas là, si la condition n'est pas
remplie, aucune action ne sera générée, et l'exécution du programme
1.8.1 Les blocs d'instructions : { instruction ... instruction } passera à l'instruction qui suit le if :

if ( x == 5 ) // premier exemple
Les blocs d'instructions sont très utiles : en effet on peut être amené à y = 6;
certains moments à faire un traitement qui nécessite plusieurs instructions.
Or la syntaxe de certaines instructions de contrôle ne permettrait pas de if ( name == "fred") // second exemple
y = 6;
faire la distinction entre ce qui rentre dans le cadre du traitement et ce qui else
succède le traitement. L'introduction des blocs d'instructions solutionne le y = 7;
problème. La syntaxe utilisée est relativement simple : on introduit un bloc
par une accolade ouvrante, on fait suivre toutes les instructions qui sont if ( x == y && a == b ) // troisième exemple
{
nécessaires (sans oublier un point-virgule à la fin de chacune d'entre elles) x++;
puis on termine le bloc par une accolade fermante. Pour la suite de ce y++;
chapitre, nous définissons un Statement (mot anglais) comme étant soit }
une instruction de base, soit un bloc d'instructions. else
{
a++;
// Ce qui suit est un bloc de trois instructions b++;
{ }
a=2*i+4; // première
for (var i=0;i<a;i++) fonction(i); // seconde (composée)
while(i>0) { fonction2(); i--; } // troisième
} 1.8.3 Boucle For : for(initialisation; rebouclage; mise_a_jour)
statement

Cette instruction sert à réaliser un traitement dit itératif, c'est-à-dire que le

1.8.2 L'instruction conditionnelle : if (condition) Statement1 else statement sera traité un certain nombre de fois. Pour réaliser cette boucle,
Statement2 l'instruction admet trois parties, ou expressions, (toutes facultatives) qui
sont l'initialisation, le rebouclage et la mise_a_jour. La première sert à
Cette instruction, qui se décompose en trois parties essentielles, permet initialiser les variables qui permettent la réalisation de la boucle : son code
de lancer un traitement selon qu'une condition soit remplie ou non. La sera donc exécuté une et une seule fois. La seconde sert à déterminer si
première partie de l'instruction, qui doit obligatoirement être parenthèsée, l'on doit encore faire un passage dans le traitement du statement ou non.
est la condition. En fonction que le résultat de cette condition soit vrai ou Bien naturellement, cette condition est réévaluée à chaque tour de boucle.
faux, un et un seul des deux Statements possibles sera lancé : le premier La dernière, mise_a_jour, permet la mise à jour des variables utilisées
si le test est vrai, le second dans l'autre cas. pour réaliser la boucle.
if (var_de_test == calcul(3)) { // Voici un petit exemple d'utilisation du for
// premier statement : c'est un petit bloc var b=0;
b++; for(var i=1;i<10;i++) {
c--; // Step 0 : on initialise i à 1
} else a+=d; // second statement // Step 1 : si i>9 alors on sort du if
// Step 2 : on ajoute i à b
// Step 3 : on incremente i d'une unité
// Step 4 : on repart en Step 1
Une petite remarque : le else et le statement qui suit sont facultatifs. Ils
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 7
Tour d'horizon
b+=i; ________________________________________
}
// la somme des 9 premiers entiers vaut : b var num = 134 - 1; // exemple 1. Trouver le plus grand
// diviseur de 134.
________________________________________ var finished = false;

var fruit = Array(3); while ( finished == false )

fruit[0] = 'pomme'; {
fruit[1] = 'poire'; if ( 134 % num == 0 )
fruit[2] = 'orange'; {
for (count=0; count <=2; count++) // affiche tous les document.write('Le plus grand diviseur de 134 est ' +
fruits. num);
document.write(fruit[count]+ ' '); finished = true;
}
var new_line = '<BR>'; num--;
for (loop1=0; loop1 < 5; loop1++) // dessine un triangle }
de T
{ num = 1; // exemple 2. Affiche tous les nombres (boucle
for (loop2=0; loop2 < loop1; loop2++) infinie).
{ while (true)
document.write('T'); {
} document.write(++num + ' ');
document.write(new_line); }
}

for (;;) // boucle indéfiniment, sans

rien faire.
;
1.8.5 L’instruction continue

1.8.4 Boucle while : while(condition) statement Cette instruction s'utilise uniquement à l'intérieur d'une structure de boucle
et permet de sortir du statement, et ce sans terminer le traitement en
Cette instruction réalise aussi une boucle. En fait, la boucle while peut être cours, et de reprendre un nouveau tour de boucle. Ceci peut être utile, par
vue comme une boucle for à laquelle on aurait enlevé les expressions exemple, pour avorter un traitement selon qu'une condition soit remplie ou
initialisation et mise_a_jour (et réciproquement). Seule l'expression dite de non. L'exemple qui suit sera peut être plus explicite que mes explications.
condition, reste utilisable. La boucle while et donc plus générale que celle
obtenue par l'instruction for. L'exemple qui suit réalise la même chose que for(var i=1;i<11;i++){
if (i==6) continue; // Si i=6 alors on ne fait pas de
l'exemple précédent afin de vous faire sentir les différentes subtilités qu'il traitement
peut y avoir entre les deux versions de la boucle en JavaScript. // mais on continue les autres étapes !!!
AppelFonction(); // On appelle une fonction
// Voici un petit exemple d'utilisation du while }
var b=0;
var i=1; // On crée un variable utile pour la boucle // il résulte que cette boucle fait seulement 9 appels à la
while(i<10) { // tant que celle-ci est inferieure à 10 // fonction, car le sixième a été oublié
b+=i; // on fait une partie du calcul
i++; // on augmente la variable de boucle d'une unité ________________________________________
}
// la somme des 9 premiers entiers vaut : b var loop = 0; // Exemple 1. Affiche les premiers multiples de
7.
Page 8 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Tour d'horizon

L'intérêt d'une telle possibilité est très simple : si votre programme a

while ( ++loop < 200 )
{
besoin, et ce à plusieurs reprises, d'une même portion de code (aux
if ( loop % 7 != 0 ) valeurs des variables près), vous allez pouvoir localiser, en un seul point
continue; du code, cette section et y faire appel, là où cela est nécessaire, avec des
document.write(loop + ' '); valeurs quelconques (elles seront alors nommées paramètres de la
}
fonction). L'avantage majeur étant que désormais vous n'aurez qu'une
seule modification à y apporter si vous avez commis une erreur (ce qui est
fort agréable).
1.8.6 L’instruction break Pour introduire une définition de fonction, on utilise le mot clé function. Le
nom que vous donnez à la fonction est très important : il sera utile lorsque
Comme l'instruction précédente, celle-ci s'utilise dans le statement d'une vous voudrez faire appel à celle-ci (il sera donc judicieux de trouver des
boucle. De même, elle permet d'interrompre le traitement en cours, mais à noms appropriés pour vos fonctions, histoire que vos programmes soient
l'inverse de la précédente, l'exécution ne se poursuit pas avec la prochaine simples à relire et à comprendre). Ensuite, il vous faut spécifier les
itération, mais directement à l'instruction qui suit celle de la boucle. Cela paramètres utilisés par la fonction. Il peut bien sûr ne pas y en avoir (dans
permet d'interrompre brutalement une boucle, si c'est nécessaire. ce cas, refermez directement la parenthèse). Sinon il vous suffit juste de
L'exemple suivant donne une autre version pour le calcul de la somme des donner les noms de ces paramètres séparés les uns des autres par une
9 premiers entiers. virgule. Faites tout de même attention : l'ordre que vous avez donné à ces
paramètres doit être respecté lorsque vous passerez les valeurs requises
var b=0;
var i=1; // On crée un variable utile pour la boucle
lors de l'appel de la fonction. Autre petite chose très utile : une fonction
while(true) { // on boucle à l'infini car toujours vrai peut rendre un résultat. Dans ce cas, la valeur d'un appel à la fonction
if (i==10) break; // si i=10 on arrête tout ! sera la valeur retournée. Pour ce faire, vous avez à votre disposition le mot
b+=i; // on fait une partie du calcul clé return. S'il n'est pas suivi d'une expression, alors il indique que
i++; // on augmente la variable de boucle d'une unité
}
l'exécution de la fonction s'arrête à sa position. Sinon, le programme
// la somme des 9 premiers entiers vaut : b s'arrête aussi, mais rend la valeur de l'expression spécifiée. Notez bien
que dans tous les cas, si un return est rencontré, l'exécution de la fonction
________________________________________ s'arrête et le programme se poursuit sur l'instruction qui suit l'appel à la
var loop = 0; // Exemple 2. Trouve le premier nombre fonction.
plus Pour y voir plus clair, regardez l'exemple qui suit. Celui-ci part de
// grand que 1000 et multiple de 99 l'hypothèse que le bout de code qui calcule la somme de nos 9 premiers
entiers est utilisé à plusieurs reprises. Vous en faites donc une fonction qui
for (loop=1000; loop < 1099; loop++)
{ ne prend aucun paramètre (toutes les données relatives à la solution du
if (loop % 99 == 0) problème sont connues d'avance).
break;
} // On définit notre fonction très utile dans le programme :
document.write(loop); function Sigma9(){
var b=0;
var i=1;
while(i<10) b+=i, i++;
1.8.7 Les fonctions : function nom(paramètres){corps} return b;
}
Comme dans tous langages informatiques dignes de ce nom, il vous est ... // Plein de lignes de codes
possible de déclarer des fonctions, et de faire des appels à celles-ci.

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 9
Tour d'horizon
// la somme des 9 premiers entiers vaut : Sigma9() for ( boucle = arguments.length-1; boucle >=0; boucle--)
somme += arguments[boucle];
return somme;
}
Considérons maintenant que l'on veuille généraliser la fonction pour qu'elle
puisse calculer la somme des i premiers entiers (ou i est une valeur que // Maintenant, servons-nous de ces fonctions
vous fixez à l'appel de la fonction selon vos besoins). Dans ce cas la
valeur i doit être passée en paramètres. Voici le code résultant. dire_bonjour();
var reponse = ajouter(5, 3);
document.write( reponse + ' ' + ajouter(10, 4) );
// Voici notre petite fonction document.write( ' ' + ajouter_tous(1, 3, 5, 7, 9) );
function Sigma(i){
var b=0; Qui produira l’affichage :
while(i>0) b+=i, i--; Bonjour. Bienvenue dans la fonction Dire_Bonjour(). 8 14 25
return b;
}
... // Plein de lignes de codes Et encore un :
// la somme des 10 premiers entiers vaut : Sigma(10)
var truc = 'dehors';
Pour information, s'il vous prenait l'idée de vouloir définir une fonction à
function magie()
l'intérieur d'une fonction, sachez que la spécification actuelle de JavaScript {
ne le permet pas. Malgré tout, l'interprète de Netscape accepte ce genre var truc = 'dedans';
de choses. Dernière petite remarque, de manière générale, les définitions document.write(truc);
de fonctions se font dans le couple de marques HTML }
<HEAD> ... </HEAD> document.write(truc); // affiche ‘dehors’
, par l'utilisation des marques magie(); // affiche ‘dedans’
<SCRIPT> ... </SCRIPT>
. Mais ceci n'est qu'une convention, vous pouvez très bien ne pas la
respecter.
1.8.8 Quelques notions sur la récursivité
Un autre exemple :
Comme tout bon langage qui se respecte, JavaScript permet de
function dire_bonjour() programmer des fonctions dites récursives. Derrière ce mot barbare se
{
document.write('Bonjour. '); cache une méthode de programmation qui, dans bien des cas, permet de
document.write('Bienvenue dans la fonction dire_bonjour(). résoudre plus simplement le problème (ceci sous-entend que vous ayez
'); bien assimilé le processus).
return;
}
On dit qu'il y a un appel récursif dans une fonction, si celle-ci se fait appel
pour calculer une sous-partie du problème. Il y a aussi récursivité si la
function ajouter(premier, second) fonction s'appelle indirectement (c'est-à-dire qu'elle fait appel à une
{ fonction qui fera, peut-être elle-aussi indirectement, appel à la fonction de
var resultat = premier + second;
return resultat; départ). Dans tous les cas, lors de l'exécution de la fonction à un niveau
} de profondeur donné d'appel, il n'y aura pas écrasement des valeurs des
variables (car le passage des paramètres se fait par recopie des valeurs).
function ajouter_tous() Pour y voir plus clair regardez le programme suivant. Je pense que vous
{
var boucle=0, somme=0; aurez deviné qu'il va faire la somme des i premiers entiers (comment avez-
Page 10 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Tour d'horizon

vous deviné ???).

chose.name = 'Une vieille chose';
chose.age = 59;
// Voici notre petite fonction
chose.hobby = 'évoluant le plus lentement possible.';
// si i vaut 1 alors la somme du premier entier vaut 1
// sinon elle vaut la somme de i + la somme des i-1 premiers
chose.chose2 = new Object;
entiers
chose.chose2.name = "une chose qui appartient à notre vieille
// Très simple et très efficace !!!
chose";
function Sigma(i){
return i==1?1:i+Sigma(i-1);
delete chose;
}

... // Plein de lignes de codes La première ligne permet de créer un objet nommé chose. Pour rendre cet
objet utile, il faut lui adjoindre des propriétés. Les lignes 3 à 5 montrent à
// la somme des 10 premiers entiers vaut : Sigma(10)
quel point il est simple de le faire :
Nom_de_variable_objet.nom_de_propriété = valeur;
// Une fonction qui calcule un factoriel !!!
function Factoriel(i){ Les objets peuvent posséder autant de propriété qu’on veut du moment
return i<=1?1:i*Factoriel(i-1);
} que l’on donne un nom différent pour chacune.

... // Plein de lignes de codes

// le factoriel de 10 vaut : Factoriel(10)

1.9.2 Les méthodes

Les habitués d’autres langages de programmation peuvent déjà être

1.9 Les objets familier des concepts de structures, d’enregistrement et de formulaires. Un
objet qui ne possède que des propriétés est comparable à ce type de
structure : ce ne sont que des données regroupées sous une même
Certains programmeurs sont plus effrayés par la notion d’objet que par désignation.
tout autre. Heureusement, les objets JavaScript sont simples à Cependant, les objets peuvent aussi posséder des méthodes, comme
comprendre. dans l’exemple suivant :

function affichage_de_bonjour_standard() {
1.9.1 Qu’est-ce qu’un objet ? document.write("Bonjour."); }

function affichage_special_du_nom()
D’une manière générale, il s’agit du regroupement d’un certain nombre de {
variables et fonctions à l’intérieur d’un ensemble organisé qui pourra document.write("Mon nom est : " + this.nom);
}
facilement être réutilisé. var chose = new Object;
Les défenseurs d’autres langages orientés objets risquent de ne pas chose.nom = "Fred";
apprécier cette définition simpliste des objets, mais comme JavaScript chose.dire_bonjour = affichage_de_bonjour_standard;
n’impose pas une grande rigueur dans l’écriture des scripts, il s’adapte chose.afficher_nom = affichage_special_du_nom;
parfaitement à la définition d’objets simples. chose.dire_bonjour();
Voici un exemple d’objet JavaScript : chose.afficher_nom();

var chose = new Object; Les deux fonctions définies dans l’exemple sont apparemment normales,
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 11
Tour d'horizon

même si la deuxième fait appel à une variable mystérieuse nommée this.

var personne1 = new Employe("Doe, John", 47);
Vers la fin du script, deux propriétés de l’objet chose référencent les var personne2 = new Employe("Doe, Jane", 45);
fonctions définies auparavant.
personne1.affiche() + document.write(" " + personne2.contact);
chose.dire_bonjour = affichage_de_bonjour_standard;
chose.afficher_nom = affichage_special_du_nom; Les variables personne1 et personne2 sont créées à partir du constructeur
d’objet Employe. En fait, un constructeur est une fonction qui permettra
Ainsi, tout à la fin du script, les propriétés de l’objet commencent à d’initialiser des propriétés et des méthodes d’un objet à l’aide de
ressembler à des fonctions : paramètre passés au constructeur lors de la création. Dans l’exemple, la
fonction constructeur nommée Employe demande deux arguments pour
chose.dire_bonjour();
chose.afficher_nom();
initialiser les propriétés nom et age de l’objet en création. La propriété
status reçoit une valeur fixe, elle aurait pu être mise en prototype.
Une méthode est simplement une fonction contenue dans un objet. On La propriété prototype associée aux fonctions spéciales constructeurs
arrive à ce résultat en utilisant l’une des propriétés de l’objet pour permet d’initialiser des propriétés et des méthodes avec des valeurs
référencer une fonction du script, de la même façon qu’une variable peut communes à tous les objets lors de leur création. Dans l’exemple
garder la trace d’un objet complet. précédent, tout objet créé avec le constructeur Employe, se verra attribué
Lorsqu’une méthode est appelée, la variable spéciale this est définie à trois propriétés (adresse, contact, job) et une méthode (affiche).
l’intérieur de la méthode. this est en fait une référence vers l’objet qui a
invoqué la méthode et permet d’accéder directement aux autres propriétés
de cet objet. 1.9.4 L’instruction For … in …
Ainsi, les objets sont réellement des regroupements de propriétés et de
méthodes. Il arrive que l’on ne connaisse pas le contenu d’un objet. Pour pouvoir
parcourir le contenu d’un objet sans pour autant le connaître, nous
disposons de l’instruction suivante :
1.9.3 Prototypes et constructeurs
for (variable in varaible_objet)
instruction ou bloc
Soit l’exemple suivant :

Page 12 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Tour d'horizon

1.9.5 L’instruction With …

Nous avons vu que chaque variable faisait partie d’un objet que nous
pourrions appeler contexte courant, objet courant ou portée courante.
Parfois, pour faciliter l’écriture d’un script, nous pouvons essayer de
changer la portée courante. L’utilisation de with le permet. Sa syntaxe est
la suivante :

with (objet)
instruction ou bloc d’instructions

Un exemple :

var nom_incroyablement_long = new Object;

nom_incroyablement_long.seule_propriete = new Object;
nom_incroyablement_long.seule_propriete.un = "A vos marques";
nom_incroyablement_long.seule_propriete.deux = "Prets";
nom_incroyablement_long.seule_propriete.trois = "Partez";

with ( nom_incroyablement_long.seule_propriete )
{
document.write( un + ', ' + deux + ', ' + trois +'!');
// A vos marques, prets, partez !
}

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 13
Tour d'horizon

Page 14 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
JavaScript et les Navigateurs

Chapitre 2

2 JavaScript et les Navigateurs

2.1 Ajouter du code JavaScript à un document HTML

JavaScript peut être implanté dans une page HTML de deux façons :
par la balise SCRIPT directement, ou en mettant le code dans un fichier
séparé, en utilisant les événements.

<SCRIPT>
var step=1;

// exemple 1.
</SCRIPT>

// exemple 2.
<SCRIPT LANGUAGE="JavaScript"> step=2; </SCRIPT>

// exemple 3.
<SCRIPT LANGUAGE="JavaScript1.1"> step=3; </SCRIPT>

// exemple 4.
<SCRIPT LANGUAGE="JavaScript1.2"> step=4; </SCRIPT>

// exemple 5.
<SCRIPT SRC="mesfonctions.js"> </SCRIPT>

</HEAD>
</HTML>

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 15
JavaScript et les Navigateurs

2.1.1 En utilisant la balise <SCRIPT> jsVersion = "1.1" else jsVersion = "1.0"

</SCRIPT>

L’exemple 1 montre qu’en fait, le langage JavaScript est le

langage par défaut des scripts. Cependant, les exemples 2, 3 et La variable jsVersion servira alors tout au long des programmes à établir
4, nous montre que JavaScript n’est pas le seul langage de un code compatible avec la version du navigateur.
script.

<SCRIPT LANGAGE="JavaScript">
Une autre astuce, pour connaître le numéro de version de JavaScript est
code donnée par le programme suivant :
</SCRIPT>
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">var v = 1.0</SCRIPT>
On le voit, le choix du langage ne se limite pas à JavaScript et reste ouvert <SCRIPT LANGUAGE="JavaScript1.1">v = 1.1</SCRIPT>
à d'autres langages comme Visual Basic, que supporte Internet Explorer. <SCRIPT LANGUAGE="JavaScript1.2">v = 1.2</SCRIPT>
Le code placé à l'intérieur d'un couple de balises SCRIPT est évalué après </HEAD><BODY><SCRIPT>
le chargement de la page. document.write(v);
</SCRIPT></BODY></HTML>
Les fonctions sont définies dans les couples de balises SCRIPT dans la
partie entête (HEAD) de la page HTML ou même dans le corps de la page,
Le couple de balises <NOSCRIPT> </NOSCRIPT> permettent d'encadrer
ce qui n'est cependant pas conseillé.
le texte qui sera affiché si JavaScript n'est pas compris par le navigateur.
La balise SCRIPT peut prendre un argument : LANGAGE="JavaScript1.1"
qui indique que le code JavaScript est de version 1.1, actuellement <HTML><BODY><SCRIPT>
compris par les versions de Netscape 3.x et supérieure et par les versions alert("Ouvrir la page JavaScript ?");
Microsoft Internet Explorer 4 et supérieures. document.location.href = 'js_top.htm';
L'argument LANGAGE="JavaScript1.2" indique que le code JAVASCRIPT </SCRIPT>
<NOSCRIPT>Offrez-vous un vrai navigateur !</NOSCRIPT>
est de version 1.2, actuellement compris par les versions de Netscape 4.x </BODY></HTML>
et supérieure.
Pour utiliser dans une page un code JavaScript à la fois compatible 1.0 et Pour cacher le contenu d’une section SCRIPT pour un navigateur ancien
1.1 il suffit de déclarer les procédures deux fois comme le montre ou non compatible, on utilise la mise en commentaire suivante :
l'exemple suivant :
<HTML>
<SCRIPT LANGUAGE="JavaScript"> <HEAD>
code <TITLE>Notre premier script</TITLE>
</SCRIPT> <SCRIPT LANGUAGE="JavaScript">
<SCRIPT LANGUAGE="JavaScript1.1"> 
<SCRIPT LANGUAGE="JavaScript1.1"> </SCRIPT>
location.replace("URL de la page HTML version 1.1") </HEAD>
code compatible 1.0 <BODY>
</SCRIPT> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<SCRIPT LANGUAGE="JavaScript"> </BODY>
if (navigator.userAgent.indexOf("3.0") != -1) </HTML>

Page 16 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
JavaScript et les Navigateurs

2.1.4 Avec formulaire

2.1.2 Le code dans un fichier source <FORM>

<INPUT VALUE=événement
événement=alert("événement")>
Comme le montre l’exemple 5 du début de chapitre, à partir de la version 3 </FORM>
de Netscape, il est possible de mettre le code des programmes JavaScript
dans un fichier annexe, en utilisant la balise SCRIPT comme suit :
2.1.5 Avec hypertexte
<SCRIPT LANGUAGE=JavaScript SRC=source.js> </SCRIPT>

<A HREF=#EX événement=alert("événement")>événement</A>

source.js peut être un fichier dans le répertoire courant ou bien une URL
pointant vers un fichier distant.
Du code inséré avant la balise </SCRIPT> ne sera exécuté que si le fichier onBlur : l'utilisateur après avoir cliqué sur une zone clique à l'extérieur de
source.js n'a pu être chargé. la zone active.
Mais cette option, outre le fait qu'elle n'est supportée que par les version 3
de Netscape nécessite que le serveur HTTP, soit configuré avec un type onClick : l'utilisateur clique sur une zone hypertexte.
MIME "application/x-JavaScript" en regard des fichiers d'extension js.
onChange : l'utilisateur après avoir cliqué sur une zone, la quitte après
avoir changé le texte.
2.1.3 En utilisant les événements
onFocus : l'utilisateur clique sur une zone.
Les événements sont les résultats d'une action de l'utilisateur, comme par
exemple un clic sur l'un des boutons de la souris. onLoad : l'utilisateur charge la page dans le navigateur
La syntaxe de ces événements est :
onMouseOver l'utilisateur passe la souris sur la zone
<balise eventHandler="code JavaScript">
onSelect : l'utilisateur sélectionne un élément d'un formulaire
où balise est le nom d'une balise et eventHandler est le nom d'un
événement. onSubmit : l'utilisateur soumet un formulaire
Par exemple, pour utiliser la fonction exemple quand un utilisateur appuie
sur un bouton, l'instruction suivante onUnload : l'utilisateur quitte la page
<INPUT TYPE=BUTTON VALUE=Essai onClick="exemple(this.form)">
Exemple :
Une fonction ou bien un code JavaScript peut être inséré comme valeur de <HTML><HEAD><SCRIPT>
l'argument exemple var cris = 0;
Bien évidemment, il est plus intéressant d'utiliser une procédure, lorsque le function crier(obj)
code employé est utilisé plusieurs fois. {
alert('Quoi ? Seulement: "' + this.value + '"\n\nPLUS FORT
Voici la liste des événements disponibles : !!');
Chaque événement est codé sous une des deux formes : cris++;
}

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 17
JavaScript et les Navigateurs
</SCRIPT></HEAD>
<BODY>
Page hurlante. Remplissez un champ, puis appuyez sur la touche
TABULATION.<BR>

<FORM NAME="crieur"> Premier cri:

<INPUT TYPE="text" NAME="un" ONCHANGE="this.value='PLUS FORT
!!!';return true;">
<BR> Deuxième cri:
<INPUT TYPE="text">
<BR> Dernier cri:
<INPUT TYPE="text" NAME="trois">
</FORM>

<SCRIPT>
document.crieur[1].onchange=crier;
document.crieur.trois.onchange=crier;
</SCRIPT></BODY></HTML>
En fait, on peut remarquer que le premier INPUT prend la valeur « PLUS
L’exemple précédent donne l’affichage suivant après le remplissage du FORT ! ! ! »dèq que l’on quitte l’objet et que son contenu à changé.
deuxieme cri : Ensuite, pour les deux autres INPUT, leur événement onChange fait que
lorsque l’on quitte l’objet après avoir changer sont contenu, une boite de
message apparaît avec comme texte le contenu de l’objet INPUT que l’on
vient de quitter :

2.2 Les événements temporels :

La fonction JavaScript setTimeout() permet d’exécuter un script au bout

d’un certain temps. L’exemple suivant montre l’utilisation de cette fonction
afin d’afficher une boit d’alerte toute les deux secondes :

L’exemple précédent donne l’affichage suivant après quelques utilisation. <HTML><HEAD><SCRIPT>

function reveiller()
{
// Essayons de réveiller l’utilisateur.
alert('Incendie, Inondation, Famine !');
setTimeout('reveiller()', 2000);
}
// 2000 millisecondes dans le futur, on réveille
setTimeout('reveiller()', 2000);
</SCRIPT></HEAD></HTML>

2.3 Des scripts dans des documents HTML

Page 18 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
JavaScript et les Navigateurs
Voici deux exemples de scripts JavaScript :

<HTML>
Ceci n’est pas très orthodoxe, mais tout à fait supporté par les navigateurs.
<HEAD> D’une manière générale, il est préférable d’utiliser les balises SCRIPT
<SCRIPT> dans la partie HEAD d’un document HTML pour toutes les déclarations.
function meteo()
{
if ( !Math.random ) // n’existe pas dans Navigator 2.0
{ 2.4 Les entités JavaScript
document.write('<PRE> -- le temps est perturbé par la
pluie --</PRE>');
} Un nom entité, en HTML, est un élément syntaxique de la forme
else if ( Math.floor((Math.random()*2)) == 0 ) &NomEntité; , qui permet de représenter des caractères difficiles à
{
document.write("<STRONG>C’est simplement symboliser. C’est ainsi que l’on représente un espace insécable par
épouvantable.</STRONG>\n"); &nbsp, le caractère « < » par &lt, et le caractère accentué « é par
} é .Les entités JavaScript sont des extensions de cette syntaxe, qui
else se présente sous la forme &{VariableJavaScript}; ou
{
document.write("<EM> C’est merveilleux ! </EM>\n"); &{ExpressionJavaScript}; .Par exemple :
}
} <HTML><HEAD>
</SCRIPT> <SCRIPT>
</HEAD> var pixels_par_unite = 25.4;
<BODY> var total_unites = 8;
<P>Prévisions météo pour la journée:</P> </SCRIPT>
<SCRIPT> </HEAD><BODY>
meteo(); // ajout de choses
spéciales
</SCRIPT>
Graphique sous forme de barre représentant le nombre d’unités :<BR>
<P>Fin des prévisions.</P>
</BODY> <HR ALIGN=LEFT SIZE=10 WIDTH="&{pixels_par_unite *
</HTML> total_unites};"><BR>

Dans cet exemple, une fonction meteo est déclarée. Ensuite, un appel à Graphique sous forme de barre représentant le nombre d’unités sous
cette fonction est fait dans le déroulement de la page HTML. forme d’un pourcentage de la largeur totale de la fenêtre du navigateur
Dans l’exemple suivant, on crée une page complète, à l’aide d’un script (100% pour 10 unités) :<BR>
JavaScript :
<HR ALIGN=LEFT SIZE=10 WIDTH="&{total_unites * 10};%">
</BODY></HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<SCRIPT>
with ( document )
{
write('<HTML><HEAD>\n');
2.5 Les URL JavaScript
write('<TITLE>Pratiquement tout en JavaScript !</TITLE>\n');
write('</HEAD><BODY>\n');
write('Qui a besoin d’HTML statique ?\n');
Les URL JavaScript fonctionne comme tout autre type d’URL, de ce fait,
write('<BR><HR></BODY></HTML>'); on précise le type de lien : javascript:script .En voici un exemple :
}
</SCRIPT> <HTML><BODY>
<SCRIPT>

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 19
JavaScript et les Navigateurs
var resultat_test = "Le résultat de votre test est : " + 23 + <LINK REL=STYLESHEET TYPE="text/JavaScript" HREF="fancystyle"
"%"; TITLE="Fancy">

function ameliore_resultat() </HEAD><BODY>

{ <P> Paragraphe aéré ! </P>
resultat_test = "Résultat parfait !"; <P><B>Paragraphe aéré agressif !</B></P>
} </BODY></HTML>

var petit = "#define x_width 1\n#define x_height 1\nstatic char L’utilisation des balises <STYLE> montre que la création de feuilles de
x_bits[] = {0x00};";
styles dans JavaScript consiste à créer des propriétés correctement
</SCRIPT> nommées et de leur affecter des valeurs réalistes. Les lettres en
majuscules P et B correspondent respectivement au marqueurs <P> et
<A HREF="javascript:resultat_test">Cliquez ici pour voir vos <B>.
résultats</A><BR>
<A HREF="javascript:ameliore_resultat()">Cliquez ici pour La balise <LINK> dans l’en-tête du document HTML a pour but d’identifier
améliorer vos résultats</A> de manière générale le relation de dépendance de ce document avec
<IMG SRC="javascript:petit" NAME='Image bitmap simple'> d’autres documents. L’une de ces dépendances possibles est une feuille
de style JavaScript, si bien que cette balise procure une alternative à
</BODY></HTML>
l’incorporation d’une feuille de styles directement dans le document.
Ainsi Il existe quelques fonctions JavaScript destinées spécifiquement aux
JSSS :
<A HREF="javascript:history.go(0)">cliquer pour rafraîchir</A>
placé dans le fichier « javascri4.htm », aura la même action <HTML><HEAD>
que : <STYLE TYPE="text/JavaScript">
<A HREF="javascri4.htm"> tags.H1.color = 'pink';
LIENHYPERTEXTE "javascr4.htm" // positionne les marges haute, droite, bas, gauche.
cliquer pour rafraîchir tags.H1.margins(1,2,3,4);
</A> tags.H1.rgb(50,50,50);
sans pour autant forcer à spécifier le nom de la page.
Ceci peut être étendu à une syntaxe du type : contextual(tags.H1, tags.B).fontStyle = "italic";
<A HREF="javascript:history.go(-1)">aller à la page
précédente</A> function changer()
{
if ( color == 'pink' ) fontStyle = "medium";
}

2.6 Les feuilles de styles JavaScript (JSSS) tags.I.apply = changer();

</STYLE></HEAD></HTML>

Exemple : La méthode margins() permet de définir les marges d’un seul coup.
La fonction contextual(), permet à un style de dépendre d’un autre. Ici, si
<HTML><HEAD>
<STYLE TYPE="text/JavaScript">
un élément <B> est imbriqué dans un élément <H1>, alors il doit être
tags.P.borderWidth = 100; affiché en italique.
tags.P.borderStyle = 'none';// sinon on a une très large Enfin, la propriété apply de la balise <I> est affecté sur le fonction
bordure changer().
tags.B.color = "red";
</STYLE>

Page 20 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Fenêtres et Frames

Chapitre 3

3 Fenêtres et Frames
Les fenêtres et frames du navigateurs sont structurés autour de l’objet
navigateur et de l’objet document.

3.1 Les frames

Chaque fenêtre possède un objet window et chaque objet window possède

deux propriétés importantes : document et frames. La propriété document
référence l’objet document correspondant à l’URL de la fenêtre. La
propriété frames est un tableau (éventuellement vide) d’objets window,
représentant les frames. Le tableau de frames a une propriété length.
Examinez les quatre documents HTML suivants :

Source HTML Affichage Propriété

length

<!-- lapin.htm : trois lapins -

->
<HTML><BODY>Lapin.</BODY></HTML 0
>

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 21
Fenêtres et Frames

Source HTML Affichage Propriété

length Dans le quatrième exemple, pour accéder au document (objet) en bas
dans la partie gauche du frame initial, le jeu de frames parent (top) de
JavaScript doit se repérer à travers la hiérarchie des objets de la façon
suivante :
<!-- vsplit.htm : deux lapins - Top.frames[1].frames[0].document ;
-> Ou alors :
<HTML><FRAMESET COLS=”*,*”> Top.lapin7.lapin1.document ;
<FRAME SRC=”lapin.htm”
NAME=”lapin1”> 2
<FRAME SRC=”lapin.htm”
NAME=”lapin2”> La structure de ces quatre fenêtres peut être illustrée ainsi :
</FRAMESET></HTML>

top

navigator Objet décrivant le navigateur

<!-- trois.htm : trois lapins -

-> frames Tableau d’objets fenêtre (un par frame)
<HTML><FRAMESET ROWS=”*,*”>
<FRAME SRC=”lapin.htm”
NAME=”lapin3”> history Objet contrôlant l’historique
<FRAMESET COLS=”*,*”> 3
<FRAME SRC=”lapin.htm”
NAME=”lapin4”> location Objet d’emplacement pour le document
<FRAME SRC=”lapin.htm” courant
NAME=”lapin5”>
</FRAMESET></FRAMESET></HTML> screen Objet écran décrivant l’affichage

script (Internet Explorer seulement)

components (Navigator 4.0 seulement)

<HTML><FRAMESET ROWS=”*,*”> embeds (Internet Explorer seulement)
<FRAME SRC=”lapin.htm”
NAME=”lapin6”> 2
<FRAME SRC=”vsplit.htm” Autres
NAME=”lapin7”> propriétés…
</FRAMESET></HTML>
Autres
méthodes…

Page 22 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Fenêtres et Frames

3.1.1 Un exemple 3.2 Les fenêtres Navigateur

L'utilisation la plus fréquente des frames est d'utiliser une d'entre elle pour Créer des nouvelles fenêtres de navigateur est un aspect important de
afficher un menu, et l'autre, pour parcourir le site. Tout d'abord, nous JavaScript. Vous pouvez aussi bien chargé un nouveau document (par
avons besoin d'un document qui crée les frames : exemple un document HTML) dans la nouvelle fenêtre ou bien vous
pouvez créer un nouveau document (à la volée). Nous commencerons par
<html>
<frameset rows="80%,20%">
regarder comment nous pouvons ouvrir une nouvelle fenêtre, charger une
<frame src="start.html" name="main"> page HTML dans cette fenêtre et enfin fermer cette fenêtre. Ensuite, nous
<frame src="menu.html" name="menu"> verrons comment créer un document à la volée.
</frameset>
</html>

3.2.1 Créer des fenêtres

La page start.html est la page d'entrée qui sera affichée dans la frame
main au commencement. La page suivante est chargée dans la frame
menu : Les fenêtres principales du navigateur sont représentées par un objet
window. La méthode open() de l’objet window permet d’ouvrir une autre
<html> fenêtre de navigateur.avec la syntaxe suivante :
<head>
<script language="JavaScript"> Nom_Variable = open(« URL », « Nom fenetre », « option=valeur,
 <html>
</script> <head>
</head> <script language="JavaScript">
<body> 
</html> </script>
</head>
Ici, vous pouvez voir différentes façons pour charger une page dans la <body>
frame main. Le premier lien utilise la fonction load(). Comme vous pouvez <form>
le constater, le navigateur exécute du JavaScript au lieu de lire une autre <input type="button" value="Ouvre une nouvelle fenêtre"
page : c'est une URL JavaScript. onClick="openWin()">
Le second lien utilise l'option target disponible en HTML. </form>
Enfin, le troisième lien remplace la page de frame par le document </body>
thrid.html. </html>

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 23
Fenêtres et Frames

La page bla.htm est chargée dans la nouvelle fenêtre grâce à la méthode scrollbars yes|no
open(). status yes|no
toolbar yes|no
Vous pouvez contrôler l'apparence de la nouvelle fenêtre. Par exemple,, width nombre en pixels
vous pouvez décider si la nouvelle fenêtre aura ou non une barre de
status, des barres d'outils ou bien encore une barre de menu. En plus, D'autres propriétés ont été rajoutées avec JavaScript 1.2 (Netscape
vous pouvez aussi spécifier la taille de la nouvelle fenêtre. Le script Navigator 4.0). Voici ces propriétés :
suivant ouvre une nouvelle fenêtre qui aura pour taille 400x300. Cette
fenêtre aura ni barre de status, ni barre d'outils, ni barre de menu.. alwaysLowered yes|no
alwaysRaised yes|no
<html>
<head> dependent yes|no
<script language="JavaScript"> hotkeys yes|no
 screenX position en pixels
</script> screenY position en pixels
</head>
<body>
titlebar yes|no
z-lock yes|no
<form>
<input type="button" value="Ouvre une nouvelle fenêtre"
onClick="openWin2()">
Avec ces propriétés, vous pouvez maintenant définir à quelle position une
</form> fenêtre doit s'ouvrir.

</body>
</html>
3.2.2 Le nom d'une fenêtre
Comme vous pouvez le constatez, nous spécifions les propriétés dans la
chaîne de caractères Comme vous avez pu le voir, nous avons utilisez trois arguments pour
"width=400,height=300,status=no,toolbar=no,menubar=no". ouvrir une fenêtre :
Remarque : vous ne devez pas utiliser d'espaces à l'intérieur de la chaîne
myWin= open("bla.htm", "displayWindow",
! "width=400,height=300,status=no,toolbar=no,menubar=no");
Voici une liste des propriétés qu'une fenêtre peut avoir :
A quoi sert le second argument ? C'est le nom de la fenêtre. En utilisant la
directories yes|no propriété TARGET, si vous connaissez le nom d'une fenêtre existante,
height nombre en pixels vous pouvez charger un document dans celle-ci avec :
location yes|no
menubar yes|no <a href="bla.html" target="displayWindow">
resizable yes|no

Page 24 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Fenêtres et Frames

Ici, vous avez besoin du nom de la fenêtre (si elle n'existe pas, une Nous arrivons maintenant à un aspect très intéressant de JavaScript :
nouvelle fenêtre sera créer avec ce code). Notez bien que myWin n'est créer des documents à la volée. Cela signifie que vous pouvez utilisez vos
pas le nom de la fenêtre, vous pouvez juste accéder à cette fenêtre en codes JavaScript pour créer de nouvelles pages HTML. Par ailleurs, vous
utilisant cette variable, qui est donc accessible qu'à l'intérieur du script où pouvez créer d'autres types de documents comme des scènes VRML, etc.
elle est défini. Le nom de la fenêtre (ici displayWindow) est un nom unique Vous pouvez créer ces documents dans une autre fenêtre, ou bien dans
qui peut être utilisé par toutes les fenêtre de navigateur existantes. une frame.
Tout d'abord, nous allons créer un document HTML qui sera affiché dans
une nouvelle fenêtre. Voici ce document :
3.2.3 Fermeture de fenêtres
<html>
<head>
Vous pouvez fermer des fenêtres en utilisant JavaScript. Pour cela vous <script language="JavaScript">
disposez de la méthode close(). Ouvrons une nouvelle fenêtre comme vu  myWin.document.write("<center><font size=+3>");
</script> myWin.document.write("Ce document HTML a été créé ");
myWin.document.write("avec l'aide de JavaScript!");
<center> myWin.document.write("</font></center>");
<form> myWin.document.write("</body></html>");
<input type=button value="Fermer la fenêtre" onClick="closeIt()">
</form> // ferme le document - (pas la fenêtre!)
</center> myWin.document.close();
}
</html>
// -->
Si vous cliquez sur le bouton de la nouvelle fenêtre, la fenêtre se ferme. </script>
</head>
Open() et close() sont des méthodes de l'objet window. Normallement, <body>
nous devrions écrire window.open() et window.close() au lieu de open() et
close(). C'est vrai, mais l'objet window est une exception, vous n'avez pas <form>
à écrire window pour appeler une méthode de l'objet window (ceci est vrai <input type=button value="A la volée" onClick="openWin3()">
</form>
uniquement pour cet objet).
</body>
</html>
3.2.4 Créer des documents à la volée
Regardons la fonction openWin3(). Vous pouvez voir que nous
commençons par ouvrir une nouvelle fenêtre. Comme vous pouvez le
constatez, le premier argument est une chaîne de carctères vide (""), ce
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 25
Fenêtres et Frames

qui signifie que l'on ne spécifie pas d'URL. Le navigateur ne va pas aller 3.3 Les fenêtres popup
chercher un document existant, JavaScript va en créer un.
Nous définissons la variable myWin. Grâce à cette variable, nous pouvons
Trois types de fenêtres popup sont utilisables par JavaScript. Elles
accéder à la nouvelle fenêtre. Notez que nous ne pouvons pas utilisez le
peuvent êtres instanciées par les méthodes de l’objet window et ont pour
nom de la fenêtre (displayWindow) pour cette tâche. Après avoir ouvert la
nom : alert, confirm et prompt.
fenêtre, nous devons ouvrir le document. Ceci est fait avec :

// ouvre document pour ajouter du code

myWin.document.open(); 3.3.1 Une boite d’alerte :

Nous appelons la méthode open() de l'objet document. Cette commande

n'ouvre pas une nouvelle fenêtre, elle prépare le document à recevoir des
données. Nous devons écrire myWin devant document.open() de façon à
ouvrir le document de la nouvelle fenêtre.
Les lignes suivantes créent le document à l'aide de la méthode write() de
l'objet document.

// crée le document
myWin.document.write("<html><head><title>A la volée");
myWin.document.write("</title></head><body>");
myWin.document.write("<center><font size=+3>"); 3.3.2 Une boite de confirmation :
myWin.document.write("Ce document HTML a été créé ");
myWin.document.write("avec l'aide de JavaScript!");
myWin.document.write("</font></center>");
myWin.document.write("</body></html>");

Comme vous pouvez le constatez, nous écrivons des tags HTML dans le
document. Nous créons du code HTML !
Une fois le document terminé, il ne nous reste plus qu'à fermer le
document. Ceci est fait à l'aide de :

// ferme le document - (pas la fenêtre!)

myWin.document.close(); 3.3.3 Une boite de saisie :

Comme je l'ai dit plus tôt, vous pouvez créer des documents à la volée
dans des frames. Si, par exemple, vous avez deux frames nommées
frame1 et frame2 at que vous vouliez créer un nouveau document dans
frame2, vous pouvez écrire le code suivant dans frame1:

parent.frame2.document.open();

parent.frame2.document.write("Ici votre code HTML");

parent.frame2.document.close();

Page 26 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Fenêtres et Frames

Un exemple :

<HTML><BODY><SCRIPT>
var accord = false, notes = ‘’;
accord = confirm('Vous aimez le chocolat?');
if ( accord )
notes = prompt("est-ce bon pour la santé ?",'Ecrivez ici');
else
notes = prompt("Mauvais ?",'Ecrivez ici');
alert(notes + '\nVous pouvez etre fier de vous.');
</SCRIPT></BODY></HTML>

La fonction confirm() renvoie un résultat booléen et la fonction prompt()

une chaîne de caractères entrée par l’utilisateur ; la fonction alert() renvoie
undefined. Les fenêtres ont toujours pour titre [Javascript Application].

3.4 L’Historique

Nous avons vu que les fenêtres et frames disposaient chacun d’un objet
document pour leur URL. Ils possèdent également un objet historique,
appelé history. Cet objet mémorise les URL de tous les documents
chargés dans cette fenêtre ou ce frame, permettant de se référer à ces
documents par la suite. L’utilisation la plus courante des historiques est
illustrée par l’exemple ci-dessous :
<A HREF=”#” ONCLICK=”window.history.go(-1)”>
Revient un pas en arrière </A>
<A HREF=”#” ONCLICK=”window.location.reload()”>
Ne va nulle part </A>
<A HREF=”#” ONCLICK=”window.location.reload(true)”>
Tourne toujours en rond, mais avec plus de rigueur </A>
<A HREF=”#” ONCLICK=”window.location.replace(url)”>
Oublie le passe</A>

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 27
Les formulaires

Chapitre 4

4 Les Formulaires

4.1 Description

JavaScript interagit avec les formulaires HTML de nombreuses manières.

Il peut :

• Créer des balises pour formulaires contenant du JavaScript, de la

même façon qu’il sait le faire pour d’autres éléments HTML,
• Agir comme un gestionnaire d’événements, par le biais d’attributs de
balises ou de propriétés d’objets hôtes,
• Lire et modifier les valeurs des éléments du formulaire,
• Dans une certaine limite, construire lui-même des éléments de
formulaires.

En allant au-delà de ces tâches simples, JavaScript apporte une réelle

plus-value aux formulaires HTML. Voici certaines fonctions de plus haut
niveau que JavaScript peut remplir :
• Valider ou corriger les entrées utilisateur,
• Exécuter des calculs ou autres traitements sur les données entrées
par l’utilisateur,
• Stocker et réacheminer les données entrées par l’utilisateur,
• Contrôler la navigation de l’utilisateur dans un formulaire d’après ses
entrées.

Toutes ces possibilités ajoutent à la fluidité de traitement des formulaires,

puisque ces tâches peuvent être effectuées au sein du navigateur, sans
échanges fastidieux sur le réseau. Sans JavaScript, la moindre vérification
nécessiterait une requête vers le serveur web, ce qui ralentirait
considérablement les choses.
Page 28 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Les formulaires

4.2 Objets formulaires 4.2.1 Présentation des objets formulaires

Les formulaires HTML font partie des documents HTML. Il est donc naturel Un document HTML pouvant contenir plusieurs formulaires, il est naturel
que les balises correspondantes soient reflétées par des propriétés de que la propriété forms, proche du sommet de la hiérarchie, soit un tableau
l’objet document dans JavaScript. et contienne une entrée pour chaque formulaire.
Chaque objet formulaire a une propriété elements, qui est un tableau.
Le diagramme ci-après illustre l’organisation des objets relatifs aux Chacun des éléments de ce tableau est l’un des contrôles du formulaire.
formulaires par rapport à ceux du document. Les contrôles du formulaires sont srockés dans le tableau en suivant
l’ordre du document HTML. Les balises <INPUT>, <BUTTON>, <TEXTAREA> et
window
<SELECT> sont stockées comme éléments du tableau forms.

Ces objets ont tous en commun les propriétés type, value, name et form :
• La propriété type permet de reconnaître, depuis JavaScript,
document quelle balise a été utilisée pour créer l’élément ;
• La propriété value contient la valeur courante du contrôle ;
• La propriété name est une reprise de l’attribut NAME de la
balise ;
forms • La propriété form fait référence au tableau forms associé au
formulaire.

forms[1] forms[1] Voici un exemple de formulaire illustrant l’accès aux éléments de formulaires et à
leurs propriétés :

<HTML><BODY><FORM NAME="patient">
Symptômes de folie. Entrez le numéro de la semaine: <INPUT
elements elements NAME="semaines" TYPE="text">
Entendez-vous des voix? <INPUT NAME="symptome" TYPE="checkbox">
Avez-vous des visions? <INPUT NAME="symptome" TYPE="checkbox">
Votre personnage préféré:
<SELECT NAME="regime">
elements[0 elements[1 elements[0 elements[1 <OPTION VALUE="napoleon"> Napoléon Bonaparte
] ] ] ] <OPTION VALUE="folamour"> Dr. Folamour
</SELECT>
<INPUT TYPE="submit" value="Soumettre la requête">
</FORM></BODY></HTML>
options
Ces propiétés sont toutes valables pour le document :

with ( top.document )
options[0] options[1] {
forms[0].name; // = 'patient'
forms[0].method; // = 'GET' (méthode par défaut)
forms[0].elements.length; // = 5

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 29
Les formulaires
forms[0].elements[0].value; // = '', L’utilisateur peut le d’un script suivront leur comportement par défaut. Voici un exemple qui
modifier.
forms[0].elements[0].onchange; // null, pas de gestionnaire.
illustre le gain en interactivité et en efficacité apporté par la gestion des
forms[0].elements[1].name; // = 'symptome' événements :
forms[0].elements[2].checked; // = 'false', l’utilisateur peut
le modifier. <HTML><HEAD><SCRIPT>
forms[0].elements[3].options.length; // = 2 function gagne()
forms[0].elements[3].options[1].value; // 'dates' {
} var reponse = "C’est la bonne reponse !\n" +
"L’homme rampe quand il est jeune, marche quand il est
adulte et utilise une canne quand il vieillit\n" +
Remarquez que la propriété value d’un éléments texte (text) ets toujours "\nSi vous rencontriez un Sphinx egyptien aujourd’hui,
une chaîne de caractères, même si, comme dans l’exemple, on demande vous seriez parfaitement en securite !";
à l’utilisateur de taper un nombre. alert(reponse);
}
</SCRIPT></HEAD>
<BODY><FORM>
4.2.2 Nommer les éléments de formulaire <H1>Devinettes</H1>
Qu’est ce qui marche à quatre pattes le matin, à deux le midi et
trois le soir ?
Si l’on dispose de plus d’un formulaire, ou si on utilise de nombreux <BR> <INPUT TYPE="radio" ONCLICK="alert('Vous semblez vous aussi
éléments de formulaires, utiliser les tableaux à indices proposés par le en pleine confusion')"> Une table en pleine confusion
langage peux s’avérer déroutant, comme le montrent les quelques lignes <BR> <INPUT TYPE="radio" ONCLICK="alert('Vous avez pris un coup
de soleil, peut-etre ?')"> Le soleil
de l’exemple précédent. Fort heureusement, il est possible d’accéder aux <BR> <INPUT TYPE="radio" ONCLICK="gagne()"> L’homme
formulaires et champs de formulaires en utilisant leurs noms. C’est </FORM></BODY></HTML>
possible car JavaScript perçoit objets et tableaux presque de la même
façon. Voici donc un exemple illustrant ce principe : Dans cet exemple simple, le gestionnaire d’événements donne à
l’utilisateur des informations supplémentaires, en fonction de sa réponse.
with ( top.document )
{
Ces informations ne pourraient être affichées par un document HTML seul.
patient.name; // inutile
patient.method; Les événements onReset et onSubmit sont les seuls à s’appliquer au
patient.elements.length; // inutile si on connait tous les noms formulaire dans son ensemble. Ils correspondent aux actions par défaut
patient.semaines.value;
patient.semaines.onchange; des balises <INPUT TYPE=« submit »> et <INPUT TYPE=« reset »>.
patient.symptome[0].name; // pour cette ligne et la suivante:
traitement spécial L’événement onClick est en général le plus utilisé. On l’emploie pour
patient.symptome[1].checked; détecter la sélection de boutons radio ou de cases à cocher, pour exécuter
patient.regime.options.length;
patient.regime.options[1].value; des actions et traitements comme ouvrir de nouvelles fenêtres, etc.
}
L’événement onChange est, lui, déclenché quand le pointeur de la souris
de l’utilisateur quitte une zone qui vient de changer de valeur.
4.2.3 Evénements associés aux formulaires
Les gestionnaires onBlur et onFocus sont activés quand l’utilisateur se
Le modèle d’événements interne à JavaScript offre le moyen le plus déplace dans un formulaire d’un champ à l’autre (ou d’un frame à l’autre)
normal et habituel pour intercepter et traiter les saisies dans un formulaire. dans une page. Leur principale utilisation est donc de contrôler la façon
Si l’utilisateur désactive JavaScript dans son navigateur, tous les éléments dont l’utilisateur navigue entre les champs.

Page 30 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Les formulaires

Les éléments de formulaires peuvent être regroupé de différentes façons

En plus de ces événements, d’autres son disponibles à partir de la version et pour différentes raisons. Il est utile de bien identifier le but général d’un
4.0 de HTML. Ces événements, tels que onMouseMove et onKeyPress formulaire, car cela permet de simplifier les techniques employées par la
sont encore peu utilisés dans les formulaires HTML. suite.

4.2.4 Donner le focus à un certain élément du formulaire 4.3.1 Formulaires de contrôle et de calcul

Avec l'aide de la méthode focus(), vous pouvez rendre vos formulaire plus Ce sont les types de formulaires les plus simples. Ils peuvent se résumer à
conviviales, plus ergonomiques. Vous pouvez définir quel élément à le un seul bouton intitulé « Fais ceci ». Une application classique consiste à
focus au commencement. Ou bien vous pouvez dire au navigateur de fournir à l’utilisateur une barre de boutons, pour faciliter sa navigation entre
donner le focus au formulaire dont les données sont incorrectes. Cela les pages d’un site. Cette utilisation des formulaires permet d’améliorer la
signifie que le navigateur positionnera le curseur dans l'élément du présentation visuelle d’un document, qui sinon ne contiendrait que du texte
formulaire de sorte que l'utilisateur n'aura pas à cliquer sur le formulaire et des liens classiques.
avant de saisir quoi que ce soit. Vous pouvez faire cela avec le morceau
de script qui suit : Une autre utilisation des formulaires consiste à utiliser l’interpréteur
JavaScript pour exécuter des traitements mathématiques ou logiques,
function setfocus() { suivant les entrées de l’utilisateur comme, par exemple, un convertisseur
document.first.text1.focus();
}
d’unité.

Ce script positionnera le focus sur le premier élément. Vous devez

spécifier le nom complet du formulaire (first) et le nom de l'élément (text1). En voici un exemple :
Si vous voulez donner le focus à cet élément lorsque la page est chargée, <html>
vous pouvez ajouter la propriété onLoad au tag <body>. Cela donne ceci : <head>
<script language="JavaScript">
<body onLoad="setfocus()"> <!-- Caché

L'élément text1 reçoit le focus et le texte contenu dans cet élément est function test2(form) {
if (form.text2.value == "" ||
sélectionné. form.text2.value.indexOf('@', 0) == -1)
alert("Adresse e-mail non valide!");
else alert("OK!");
}
4.3 Les différents types de formulaires // -->
</script>
</head>

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 31
Les formulaires
<body> 4.4.1 Un exemple
<form name="first">
Entrez votre nom :<br>
<input type="text" name="text1"> La façon la plus simple de soumettre un formulaire est par e-mail. La page
<input type="button" name="button1" value="Tester la donnée" suivante soumet le formulaire par e-mail :
onClick="test1(this.form)">
<P>
Entrez votre adresse e-mail :<br> <html>
<input type="text" name="text2"> <body bgcolor="#ffffff">
<input type="button" name="button2" value="Tester l'adresse" <form method=post action="mailto:[email protected]"
onClick="test2(this.form)"> enctype="text/plain">
</body> aimez vous cette page ?<br>
</html> <input name="choice" type="radio" value="1">Pas du tout.<br>
<input name="choice" type="radio" value="2" checked>Perte de
temps.<br>
Tout d'abord, commençons par regarder la section BODY du code HTML. <input name="choice" type="radio" value="3">Le pire site du
Nous créons deux formulaires composés chacun d'un élément texte et net.<br>
d'un bouton. Chaque bouton appelle une fonction (test1(…) ou test2(…)) <input name="submit" type="submit" value="envoyer">
</form>
avec comme argument this.form. De cette façon, nous sommes capable </body>
d'adresser le bonne éléments du formulaire (cela pourrait aussi permettre </html>
d'avoir une même fonction de test pour différents formulaires).
La fonction test1(form) teste si le contenu de l'élément nommé text1 du La propriété enctype="text/plain" est utilisée de façon à envoyer un texte
formulaire form est vide ou non. sans partie encodée. Cela rend le courrier plus lisible.
La fonction test2(form) teste si le contenu de l'élément nommé text2 du Dans cette page, il n'y pas de JavaScript, On pourrait toutefois en utilisé si
formulaire form est non vide et s'il contient un @. il y avait une vérification à effectuer.
Si vous voulez contrôler les données du formulaire avant son envoie sur le
Ces deux fonctions de test sont sommaires et mériterait d'être améliorée, réseau, vous pouvez utiliser l'événement onSubmit. Vous devez utiliser cet
mais elles illustrent bien l'utilisation de JavaScript pour effectuer un événement dans le tag <form>. Cela ressemble à ceci :
contrôle sur des données (par exemple, avant l'envoie de ces données à
un CGI). function validate() {
// contrôle si les données sont ok
// ...

4.4 Envoyez vos données et oubliez les if (inputOK) return true

else return false;
}
Les formulaires les plus courant sont utilisés pour simplement récupérer
...
des données relatives aux utilisateurs. Les données de ces formulaires <form ... onSubmit="return validate()">
sont envoyées vers un serveur et rien d’autre ne se passe : l’utilisateur ...
n’aura sans doute jamais plus d’informations sur les données qu’il a Avec ce code, le formulaire ne sera pas envoyer si les données du
saisies. De tels formulaires sont souvent des formulaires d’inscription ou formulaire ne sont pas correctes.
de demande d’information. Ils correspondent à l’utilisation d’origine de la
balise <FORM>, qui a été introduite avec le standard HTML 2.0.
4.5 Le « panier à provisions »

Page 32 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Les formulaires

Quand un formulaire sert à gérer plusieurs pages HTML, on peut alors 4.5.1 Un exemple
utiliser la technique du « panier à provisions » pour surmonter certaines
limitations de HTML. Tout d’abord, on crée le panier à provision. Ce panier sera stocké dans un
document à base de frames, l’un des frames étant utilisé pour contrôler le
Une utilisation classique du panier à provisions est de permettre à menu tandis qu’un autre servira à explorer les pages du catalogue.
l’utilisateur de choisir et de commander des objets dont la description se
trouve répartie sur plusieurs pages HTML : au fur et à mesure de la <!—catalogue.htm-->
navigation sur le site, l’utilisateur remplit son panier comme il le ferait dans <HTML>
<HEAD>
un supermarché, et le formulaire garde la mémoire des choix déjà <TITLE> Catalogue </TITLE>
effectués. Une fois sont choix fait, l’utilisateur peut d’un seul clic <SCRIPT>
commander la liste complète des articles sélectionnés. Pour se rappeler var panier = new Object;
cette liste, le formulaire a donc besoin d’un espace de stockage var length = 0;
temporaire. function achats(nom, prix, quantite)
{
Les formulaires précédents, du type « envoyer et oublier » suffiraient si ne if (quantite == 0)
se posaient pas trois problèmes : {
for (choix in panier)
• La taille du document et sa présentation : la page ne serait pas lisible {
et serait longue à charger si la liste complète des articles était faite sur if (panier[choix].nom == nom)
une seule page ; {
delete panier[choix];
• HTML ne propose aucun espace pour stocker temporairement des length--;
données : il faudrait donc que l’utilisateur commande article par }
article ; }
• HTML ne permet pas de découper un formulaire unique sur plusieurs }
else
pages différentes. {
this.nom = nom;
Avec les navigateurs récents, JavaScript vient à la rescousse du this.prix = prix;
this.quantite = quantite;
programmeur. Les traitements nécessaires sont les suivants : length++;
• Créer un espace de stockage provisoire pour le panier à provisions ; }
• Créer des formulaires dans chacune des pages du catalogues ; }
• Organiser ces formulaires pour que leurs données puissent être function eff_panier()
récupérées par le panier à provisions ; {
• Envoyer les données du panier à provisions si le client décide de length = 0;
confirmer ses achats. for (i in panier)
{
delete panier[i];
Le panier à provision sera donc un objet JavaScript disponible pour toutes }
les pages du catalogues (du site). Pour y parvenir, le meilleur moyen, voire }
</SCRIPT>
l’unique, est d’utiliser les frames. Ainsi, le panier ayant été déclaré lors du </HEAD>
chargement de la page contenant le frame de contrôle, le panier sera <FRAMESET COLS="300,*">
accessible à toutes les pages. De plus, l’utilisation des frames permettra <FRAME NAME="menu" SRC="menu.htm">
d’avoir une table des matière, un menu qui rendra le parcours du client <FRAME NAME="page" SRC="bienvenue.htm">
</FRAMESET>>
plus simple et direct.
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 33
Les formulaires
</HTML> </HTML>

La frame de contrôle sert de menu : Voici l’image de la première page qui accueille l’utilisateur :

<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT>
if (top == self)
{
self.location.href = "catalogue.htm";
}
</SCRIPT>
<CENTER>
<H1>MENU</H1>
<HR><BR><BR>
<FORM>
<INPUT TYPE="button" ONCLICK='top.page.location="fruits.htm"'
VALUE="Fruits"><BR><BR>
<INPUT TYPE="button" ONCLICK='top.page.location="legumes.htm"'
VALUE="Légumes"><BR><BR>
<INPUT TYPE="button" ONCLICK='top.page.location="graines.htm"'
VALUE="Graines"><BR><BR>
<HR><BR><BR>
<INPUT TYPE="button" ONCLICK='top.page.location="commande.htm"'
VALUE="Voir la commande">
</FORM>
</CENTER>
</BODY> Toutes les pages du catalogue suivent le même schéma. Voici la
</HTML>
première :
Notez cependant que la page teste si elle est ouverte seule, auquel cas <HTML>
elle demande à charger la page contenant les frames du catalogues. <HEAD>
La page de garde sert de présentation pour l’utilisateur : <SCRIPT>
function rappel_comm()
{
<HTML>
if (top.panier['PO'])
<HEAD>
{
</HEAD>
document.form1.t1.value = top.panier['PO'].quantite;
<BODY BGCOLOR="#FFFFFF">
}
<SCRIPT>
if (top.panier['PR'])
if (top == self)
{
{
document.form1.t2.value = top.panier['PR'].quantite;
self.location.href = "catalogue.htm";
}
}
if (top.panier['OR'])
</SCRIPT>
{
<CENTER>
document.form1.t3.value = top.panier['OR'].quantite;
<H1>Bienvenue dans ma "Virtual - boutique"</H1>
}
</CENTER>
}
</BODY>
</SCRIPT>
Page 34 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Les formulaires
</HEAD>
<BODY BGCOLOR="#FFFFFF" ONLOAD="rappel_comm()">
<SCRIPT>
if (top == self)
{
self.location.href = "catalogue.htm";
}
</SCRIPT>
<CENTER>
<H1>Les fruits du jour</H1>
<HR>
<H2>Choisissez des articles en précisant la quantité
désirée</H2>
<BR>
<TABLE>
<FORM NAME="form1">
<TR><TD><INPUT TYPE="text" NAME="t1" MAXLENGTH=2 SIZE=3
ONCHANGE="top.panier['PO'] = new top.achats('Pomme',15,
this.value)">
</TD><TD>Pomme - 15 FF le Kg<BR></TD></TR>
<TR><TD><INPUT TYPE="text" NAME="t2" MAXLENGTH=2 SIZE=3 Dans cet exemple, on identifie chacun des articles par deux lettres de
ONCHANGE="top.panier['PR'] = new top.achats('Poire',25, code (PO, PR, OR), mais on pourrait utiliser n’importe quelle autre
this.value)">
</TD><TD>Poire - 25 FF le Kg<BR></TD></TR> convention. La fonction rappel_comm() illustre comment on peut charger
<TR><TD><INPUT TYPE="text" NAME="t3" MAXLENGTH=2 SIZE=3 un nouveau frame tout en préservant les choix déjà effectués par
ONCHANGE="top.panier['OR'] = new top.achats('Orange',20, l’utilisteur. Cela permet à la page d’être abandonnée et visitée à nouveau
this.value)"> sans qu’aucune informations ne se perde.
</TD><TD>Orange - 20 FF le Kg<BR></TD></TR>
</FORM>
</TABLE> La dernière page est celle qui permet de passer commande des
</CENTER> objets du panier à provisions :
</BODY>
</HTML>
<HTML>
<HEAD>
Si l’utilisateur charge cette page, elle apparaît comme suit : </HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT>
var choix, total, totaligne;

if (self == top)
{
self.location.href = "catalogue.htm";
}
else
{
if (top.length >0)
{
document.write('<H1>Vous avez choisi les articles suivants
: </H1><BR><BR><UL>');

total = 0;
for (choix in top.panier)
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 35
Les formulaires
{
with (top.panier[choix])
{
totaligne = quantite * prix;
document.write('<LI>'+quantite); Cette page ressemblera par exemple à ceci :
document.write('Kg de '+nom);
document.write(' à '+prix);
document.write(' FF le Kg, soit: '+totaligne+'
FF,');
total += totaligne;
}
}
document.write('<FORM METHOD="POST">');
document.write('<UL><BR><BR>Le prix total de votre commande
est de '+total+' FF.<BR><BR>');
for (choix in top.panier)
{
document.write('<INPUT TYPE="hidden" NAME="'+choix+'"
VALUE="'+top.panier[choix].quantite+'">');
document.write('<INPUT TYPE="button" VALUE="Annuler la
commande"
ONCLICK=\'top.eff_panier();top.page.location.href="bienvenue.ht
m"\'>');
document.write('&nbsp&nbsp&nbsp&nbsp&nbsp');
document.write('<INPUT TYPE="submit"
VALUE="Commander">');
document.write('</FORM>');
document.write('</UL></UL>');
}
}
else
{
document.write("<H2>Faite d'abord votre choix parmis les
articles proposés.</H2>");
}
}
</SCRIPT>
</BODY>
</HTML>

Le contenu du panier à provisions est examiné deux fois :

• une fois pour que l’utilisateur puisse vérifier sa commande,
• une deuxième fois pour créer des champs cachés (qui pourraient ne
pas l’être) dans le formulaire à envoyer.

Ce formulaire consiste en une liste de paires nom/prix, qui rappellent les

codes des produits et les quantités demandées.

Page 36 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
L'objet Image

Chapitre 5

5 L'objet Image

5.1 Des images sur une page web

Maintenant nous allons jeter un coup d'œil à l'objet Image qui est
disponible depuis JavaScript 1.1 (c.-à-d. depuis Netscape Navigator 3.0).
Avec l'aide de l'objet Image vous pouvez changer des images sur une
page web. Cela nous permet de créer des animations par exemple.
En premier, voyons comment les images dans une page web peuvent être
adressées à travers JavaScript. Toutes les images sont représentées à
travers une collection. Cette collection est appelée images. C'est une
propriété du document objet. Chaque image sur une page web obtient un
nombre. La première image obtient le nombre 0, la deuxième image
obtient le nombre 1 et ainsi de suite. Donc nous pouvons adresser la
première image à travers document.images[0].
Chaque image dans un document HTML est considérée comme un objet
Image. Un objet Image a certaines propriétés qui peuvent être accédées à
travers JavaScript. Vous pouvez voir quelle dimension a une image avec
les propriétés width et height par exemple. document.images[0].width vous
donne la largeur (en pixel) de la première image sur la page web.
Si vous avez beaucoup d'images sur une page, il est difficile de tenir
compte de toutes les images en utilisant leur numéro. Donner des noms
aux images différentes résout ce problème. Si vous déclarez une image
avec ce code :

<img src="img.gif" name="myImage" width=100 height=100>

Vous pouvez l'adressez au travers de document.myImage ou

document.images["myImage"].

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 37
L'objet Image

5.2 Chargement de nouvelles images img3.gif est chargée quand la deuxième ligne de ce code est exécutée.
Comme son nom l'indique, l'image hiddenImg n'est pas affichée après que
le navigateur ait terminé de la charger. Elle est juste gardée dans la
Bien que ce soit agréable de savoir comment obtenir la dimension d'une
mémoire (ou mieux dans le cache) pour usage ultérieur. Pour afficher cette
image sur une page web, ce n'est pas ce que nous voulions savoir. Nous
image nous pouvons utiliser maintenant cette ligne:
voulons changer des images sur une page web. Pour cela, nous avons
besoin de la propriété src. Comme dans le tag <img>, la propriété src document.myImage.src= hiddenImg.src;
représente l'adresse de l'image affichée, avec JavaScript 1.1, vous pouvez
assigner de nouvelles adresses à une image déjà chargée. Le résultat est Maintenant l'image est prise du cache et est affichée immédiatement. Bien
que l'image localisée à la nouvelle adresse est chargée. sûr le navigateur a dû finir le préchargement pour être capable d'afficher
Cette nouvelle image remplace la vieille image sur la page web. Regardez une image sans délai. Donc si vous avez beaucoup d'images spécifiées
cet exemple: pour le préchargement, il peut y avoir quand même un délai si le
navigateur est occupé à télécharger toutes les autres images. Vous devez
<img src="img1.gif" name="myImage" width=100 height=100>
considérer toujours la vitesse du réseau - le téléchargement des images
ne va pas avec ce code montré ici plus vite. Nous essayons de
L'image img1.gif est chargée et prends le nom myImage. La ligne de code
commencer le téléchargement des images plus tôt - donc l'utilisateur peut
suivante remplace la vieille image img1.gif par la nouvelle img2.gif.
les voir plus tôt. Cela rend le processus entier beaucoup plus lisse.
document.myImage.src= "img2.gif";

La nouvelle image aura toujours la même taille que l'ancienne. Vous ne 5.4 Changer des images en fonction d'événement
pouvez pas changez la taille de la surface sur laquelle l'image est affichée. générés par l'utilisateur

Vous pouvez créer des effets agréables en changeant des images en

5.3 Précharger des images réaction à certains événements. Vous pouvez changer des images, par
exemple, quand le curseur de la souris est déplacé sur une certaine
Un inconvénient peut être que la nouvelle image est chargée après avoir région.
assigné une nouvelle adresse à la propriété src. Comme l'image n'est pas L'exemple suivant change l'image si le curseur est au dessus de celle-ci :
préchargée, un certain laps de temps s'écoule jusqu'à ce que la nouvelle
image soit chargée à travers le réseau. Dans certaines situations, ce n'est <a href="#"
onMouseOver="document.myImage2.src='img2.gif'"
pas important, mais souvent ces délais ne sont pas acceptables. Donc onMouseOut="document.myImage2.src='img1.gif'">
qu'est-ce que nous pouvons faire pour remédier à cela? Oui, préchargée <img src="img1.gif" name="myImage2" width=160 height=50 border=0>
l'image est la solution. Pour cela, nous allons créer un nouvel objet Image. </a>
Regardez ces lignes de code:
Ce code a quelques défauts :
hiddenImg= new Image();
hiddenImg.src= "img3.gif"; - L'utilisateur doit utiliser un navigateur JavaScript 1.1.
- La deuxième image n'est pas préchargée.
La première ligne crée un nouvel objet Image. La deuxième ligne définit - Nous devons récrire le code pour chaque image de la page.
l'adresse de l'image qui sera représentée à travers l'objet hiddenImg. Nous
avons déjà vu qu'assigner une nouvelle adresse à l'attribut src force le Nous voulons avoir un script qui peut être utilisé dans beaucoup page web
navigateur à charger l'image pointée par cette adresse. Donc l'image sans y apporter de grands changements à chaque fois.
Page 38 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
L'objet Image

Ce script sera certes plus long, mais une fois que on l'aura écrit, il sera if (browserOK) {
for (i = 0; i < objCount; i++) {
réutilisable à volonté. if (document.images[pics[i][2]] != null)
Pour réaliser un tel script, nous devons observer les deux exigences if (name != pics[i][2]) {
suivantes : // Affiche la première image
- Nombre indéterminé d'images - il ne devrait pas importer qu'il y document.images[pics[i][2]].src = pics[i][0].src;
} else {
est 10 ou 100 images utilisées // Affiche la seconde image car le curseur est au
- Ordre indéterminé des images - ce devrait être possible de dessus d'elle
changer l'ordre des images sans changer le code document.images[pics[i][2]].src = pics[i][1].src;
}
}
Le script qui suit réalise tout ceci : }
}
<html>
<head> function off(){
if (browserOK) {
<script language="JavaScript"> for (i = 0; i < objCount; i++) {
 }
</script> }

<script language="JavaScript1.1"> // Préchargement des images

// -->
</script> </script>
<head>
<script language="JavaScript">
<!-- caché
<body>
var objCount = 0; // Nombre d'images de la page web (changeante) <a href="link1.html" onMouseOver="on('link1')"
onMouseOut="off()">
function preload(name, first, second) { <img name="link1" src="link1f.gif"
// précharge les images et les stocke dans un tableau width="140" height="50" border="0"></a>
if (browserOK) {
pics[objCount] = new Array(3); <a href="link2.html" onMouseOver="on('link2')"
pics[objCount][0] = new Image(); onMouseOut="off()">
pics[objCount][0].src = first; <img name="link2" src="link2f.gif"
pics[objCount][1] = new Image(); width="140" height="50" border="0"></a>
pics[objCount][1].src = second;
pics[objCount][2] = name; <a href="link3.html" onMouseOver="on('link3')"
objCount++; onMouseOut="off()">
} <img name="link3" src="link3f.gif"
} width="140" height="50" border="0"></a>
</body>
function on(name){ </html>

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 39
L'objet Image

Ce script place toutes les images dans un tableau nommé pics. La fonction La balise MAP permet de déterminer les régions sensibles d'une image. Il
preload(), qui est appelée au début, construit ce tableau. Comme vu avez est possible de positionner l'URL javascript dans cette balise comme le
pu le remarquer, l'appel de cette fonction se fait comme suit : montre l'exemple suivant :

preload("link1", "link1f.gif", "link1t.gif"); <MAP NAME="essai">

<AREA SHAPE="RECT" COORDS="0,0,100,100"
HREF ="javascript:top.close();
Cela veut dire que le script doit charger les deux images link1f.gif et window.location=page.html">
link1t.gif. La première image est image doit être affichée quand le curseur <AREA SHAPE="RECT" COORDS="101,101,200,200"
de la souris n'est pas à l'intérieur de la région de l'image. Quand HREF="essai.html"
l'utilisateur déplace le curseur au dessus de la région de l'image, la target="javascript:alert(`chargement') ;
top.location=essai.html">
deuxième image est affichée. Avec le premier argument "link1" de l'appel à </MAP>
la fonction preload(), nous spécifions à quel objet Image de la page web
les deux images appartiennent. Si vous examinez la section <body> de Dans cet exemple, deux zones rectangulaires sont définies.
l'exemple, vous trouverez une image nommée link1. Nous utilisons le nom Il est possible aussi de définir des zones circulaire (circle) ou bien des
de l'image (et pas son nombre) pour être capable de changer l'ordre des zones polygonales (polygon).
images sans changer le script.
Les deux fonctions on() et off() sont appelées à travers les événement
onMouseOver et onMouseOut. Comme les images ne peuvent pas réagir 5.5.2 L'attribut ISMAP
aux événements MouseOver et MouseOut nous devons mettre un lien
autour des images.
Comme vous pouvez le voir, la fonction on() affiche toutes les premières L'attribut ISMAP va permettre de renvoyer les coordonnées du clique de la
images. Ceci est nécessaire car il peut arriver que plusieurs images soient souris sur l'image. En accompagnant l'attribut avec un script faisant appel
mises en valeur (l'événement MouseOut n'a pas lieu par exemple quand à la méthode search, il va être possible de récupérer les coordonnées du
l'utilisateur déplace le curseur d'une image directement à l'extérieur de la clique de la souris. Le script suivant illustre ces propos :
fenêtre). <HTML>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<SCRIPT>
str = location.search;
5.5 Les imagemaps if (str == "")
document.write("<P>Pas de coordonnées mais si vous
cliquez sur la carte ....");
Une forme particulière des "hyperimages" est ce que l'on appelle les else {
imagesmaps. Dans ce cas, on va pouvoir distinguer quelle partie de positionseparateur = str.indexOf(",");
l'image à été cliquez, et plus particulièrement effectuer telle ou telle action document.write("<P> x est " + str.substring(1,
positionseparateur ));
en fonction de la zone cliquez. Le meilleur exemple est celui d'une carte document.write(" et y est " +
géographique où l'on clique sur une ville, une région, pour avoir des str.substring(positionseparateur +1, str.length));
renseignements complémentaires. Le terme imagemap fait directement }
référence à ce type d'exemple puisque "map" signifie "carte". </SCRIPT>
<BR><BR><BR>
<A HREF="imagemap.html"><IMG ISMAP SRC="france.gif" BORDER=0
5.5.1 La balise MAP HEIGHT=638 WIDTH=568></A>
</CENTER>
</BODY>

Page 40 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
L'objet Image
</HTML>
Cette page donne l'affichage suivant : Si, l'utilisateur clique sur la ville d'Amiens, cela donne :

Pas de coordonnées mais si vous cliquez sur la carte x est 305 et y est 84

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 41
L'objet Image

Page 42 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Les layers

Chapitre 6

6 Les Layers

6.1 Que sont les layers ?

Les layers sont un nouvel aspect de Netscape Navigator 4.0. Cela autorise
le positionnement absolu d'objets comme des images. En plus, cela vous
permet de déplacer des objets sur votre page HTML. Vous pouvez aussi
cacher des objets.
Les layers peuvent être manipulées avec l'aide de JavaScript facilement.
Vous pouvez utiliser les layers seulement à partir de Netscape Navigator
4.0!

En anglais, "layer" signifie "couche".

Que sont exactement les layers? Cela peut s'expliquer tout à fait
facilement: vous prenez plusieurs feuilles de papier. Sur un papier vous
écrivez un texte. Sur un autre vous dessinez une image. Écrivez du texte
sur un troisième papier et ainsi de suite. Maintenant, mettez ces feuilles de
papier sur une table. Disons chaque papier est un layer. De cette façon, un
layer est une sorte de conteneur. Il peut contenir des objets - c.-à-d. dans
ce cas, du texte et des images.
Maintenant prenez un papier avec une image. Déplacez-le sur la table.
Regardez l'image qui suit les mouvements du papier avec soin. Si vous
déplacez le papier à droite, l'image suivra! Qu'est-ce que nous apprenons
de cette expérience fascinante? Les layers qui peuvent contenir plusieurs
objets différents - comme des images, des formes, du texte etc. - peuvent
être placé sur votre page HTML et peuvent être déplacé dessus. Si vous
déplacez un layer, tous les objets contenus dans celui-ci suivront ce
mouvement.
Les layers peuvent se recouvrir les uns les autres, comme les papiers sur
une table. Chaque layer peut avoir des parties transparentes. Mettez un

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 43
Les layers

trou dans un papier. Maintenant mettez ce papier au-dessus d'un autre

papier. Le trou est une "partie transparent" du premier papier - le contenu
du papier au-dessous est visible à travers.

6.2 Créer des layers

Pour créer un layer, nous avons besoin des tags suivants <layer> ou Le texte est affiché est dessus de l'image
<ilayer>. Vous pouvez utiliser les propriétés suivantes:
Voici le code source :
Propriétés Description
name="layerName" Le nom du layer <html>
left=xPosition La position horizontale du coin supérieur
<layer name=pic z-index=0 left=200 top=100>
gauche <img src="img.gif" width=160 height=120>
top=yPosition La position verticale du coin supérieur gauche </layer>
z-index=layerIndex Le numéro d'index en z du layer
width=layerWidth Largeur du lauer en pixel <layer name=txt z-index=1 left=200 top=100>
<font size=+4> <i> Demo de Layers </i> </font>
clip="x1_offset,y1_offset, Défini la zone du layer qui sera apparente </layer>
x2_offset,y2_offset"
above="layerName" Défini au dessus de quel layer celui ci sera </html>
visible
below="layerName" Défini au dessous de quel layer celui ci sera Comme vous pouvez le voir,, nous avons défini deux layers avec le tag
visible <layer>. Ces deux layers sont positionnés au même emplacement
Visibility=show|hide|inherit La visibilité du layer (200/100 défini avec les propriétés top et left). Tout ce qui ce trouve entre
bgcolor="rgbColor" La couleur de fond les tags <layer> et </layer> (ou bien <ilayer> et </ilayer>) appartient à ce
background="imageURL" L'image de fond layer.
Vous pouvez voir que nous avons utilisé le propriété z-index. Cela défini
Le tag <layer> est utilisée pour des layers qui peuvent être placées dans quel ordre les layers doivent apparaître. Par exemple, dans le
explicitement. Si vous ne spécifiez pas de position (avec les propriétés top programme précédent, nous disons au navigateur que le texte doit
et left) le layer sera placé dans le coin supérieur gauche de la fenêtre. apparaître au dessus de l'image. Le layer avec la valeur de z-index la plus
Le tag <ilayer> crée un layer dont la position dépend du flux du document. élevée sera affiché au dessus.

Maintenant commençons avec un exemple facile. Nous voulons créer Si on positionne le z-index à 100 pour le premier layer, le texte apparaîtra
deux layers. Dans le premier, nous avons mis une image et dans le sous l'image puisqu'il aura un z-index inférieur.
second nous avons mis un texte. Ce que nous voulons faire est afficher le
texte au-dessus de l'image.

Le teste est affiché sous l'image

Page 44 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Les layers
</ilayer>
6.3 Layers et JavaScript
<form>
Maintenant nous allons accéder aux layers à travers JavaScript. Nous <input type="button" value="Montrer/Cacher le layer"
onClick="showHide()">
allons commencer avec un exemple où l'utilisateur peut pousser un bouton </form>
pour cacher et montrer un layer.
En premier nous devons savoir comment les layers sont représentées </body>
</html>
dans JavaScript. Comme d'habitude il y a plusieurs chemins. La meilleure
chose est d'assigner un nom à chaque layer. Si nous définissons un layer
avec Le bouton appelle la fonction showHide(). Vous pouvez voir que cette
fonction accède à la propriété visibility du l'objet layer myLayer. En
<layer ... name=myLayer> assignant "show" ou "hide" à document.layers["myLayer"].visibility vous
... pouvez montrer ou cacher le layer. Il faut noter que "show" et "hide" sont
</layer> des chaînes de caractères, pas des mots réservés, c.-à-d. vous ne pouvez
pas écrire à document.layers["myLayer"].visibility = show.
nous pouvons accéder à cette couche à travers J'ai utilisé le tag <ilayer> au lieu du tag <layer> parce que je voulais mettre
document.layers["myLayer "]. le layer dans le "courant" du document.
Vous pouvez accéder aussi aux layers à travers un index. Pour accéder au
layer le plus bas vous pouvez écrire document.layers[0]. Comme pour les
images, il est préférable d'indéxer avec le nom plus avec un nombre, car si
vous déplacer vos définition de layers dans votre page, leur index
6.4 Bouger des layers
numérique peut changer.
Les propriétés left et top définissent la position du layer. Vous pouvez
Il y a plusieurs propriétés de layers qui peuvent être changées à travers assigner de nouvelles valeurs à ces propriétés pour modifier la position du
JavaScript. L'exemple suivant présente un bouton qui vous laisse cachez layer. La ligne suivante modifie la position horizontale du layer à 200 (en
et affichez un layer. pixel):

<html> document.layers["myLayer2"].left= 200;

<head>
<script language="JavaScript"> Nous allons maintenant programmer un layer mouvant - cela ressemblera
 direction = true;
</script>
</head> function move() {
<body> if (pos < 0) direction= true;
if (pos > 200) direction= false;
<ilayer name=myLayer visibility=show>
<font size=+1 color="#0000ff"><i>Ce texte est à l'intérieur d'un if (direction) pos++
layer</i></font> else pos--;

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 45
Les layers
document.layers["myLayer2"].left= pos;
}
Bien que les dimensions de l'image soit 209x264 pixels, vous ne pouvez
// --> voir qu'une petite partie de celle-ci (figure (a)).
</script> Cette partie a pour dimension 90x70 (en pixel). Les deux premières
</head> valeurs spécifiées à travers l'attribut clip (dans le tag HTML <layer> ou
<body onLoad="setInterval('move()', 20)">
<ilayer>) définissent le coin supérieur gauche de la zone de clipping. Les
<ilayer name=myLayer2 left=0> deux valeurs suivantes définissent le coin inférieur droit. La figure (b)
<font size=+1 color="#0000ff"><i>Ce texte est à l'intérieur d'un illustre ceci:
layer</i></font>
</ilayer>

</body>
</html>

Nous créons un layer appelé myLayer2. Vous pouvez voir que nous
utilisons l'événement onLoad dans le tag <body>. Nous avons besoin de
commencer le défilement du layer dès que la page est chargée. Nous
utilisons la fonction setInterval() à l'intérieur d l'événement onLoad. C'est
une nouvelle méthode de JavaScript 1.2 (c.-à-d. la version JavaScript qui
est rendue effectif dans Netscape Navigator 4.0). Cela peut être utilisé
pour appeler une fonction dans un certain intervalle du temps maintes fois.
Nous avons utilisé le setTimeout() pour ceci dans les dernières leçons.
setInterval() travaille presque de la même façon - mais vous devez
l'appeler seulement une fois.
À travers setInterval() nous appelons la fonction move() toutes les 20
millisecondes. La fonction move() positionne le layer à un certain endroit.
Comme nous appelons cette fonction indéfiniment, toutes les 20
millisecondes, nous obtenons un défilement du texte. Tout ce que nous
avons à faire dans la fonction move() est calculer la position dy layer et figure (a) figure (b)
assigner cette valeur à document.layers["myLayer2"].left.
Des choses plus intéressantes peuvent être accomplies en utilisant le
clipping avec JavaScript. Pour cela, vous pouvez changer les propriétés
6.5 Le clipping clip.left, clip.top, clip.right et clip.bottom de l'objet Layer. Assignez juste
une nouvelle valeur en pixel à une de ces propriétés et la région de
clipping changera. L'exemple suivant change la région de clipping
Vous pouvez définir quelle partie rectangulaire d'un layer sera visible. Tout
dynamiquement. L'utilisateur a l'impression l'image est construite
ce qui sera à l'extérieur de cette région ne sera pas montré. C'est ce que
lentement de l'intérieur ver s l'extérieur :
l'on appelle le clipping (la coupure). Vous pouvez utiliser la propriété clip
comme ceci : <html>
<head>
<ilayer left=0 top=0 clip="20,50,110,120">
<img src="davinci.jpg" width=209 height=264> <script language="JavaScript">
</ilayer> <!-- caché

Page 46 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Les layers

var middleX, middleY, pos;

Le bouton dans la section <body> appelle la fonction start(). En premier
nous devons calculer à quelle position nous devrions commencer - c'est le
function start() { milieu de l'image en pixel. Nous stockons les valeurs x et y dans les
// récupère la taille de l'image variables middleX et middleY. Alors la fonction show() est appelée. Cette
var width= document.layers["imgLayer"].document.davinci.width;
var height= fonction positionne la région de clipping selon les variables middleX,
document.layers["imgLayer"].document.davinci.height; middleY et pos. La variable pos est incrémenté à chaque fois que la
fonction show() est appelée. Cela veut dire la région de clipping devient
// Calcul le milieu de l'image (en pixel) plus grand chaque fois. À la fin de la fonction show() nous faisons un appel
middleX= Math.round(width/2);
middleY= Math.round(height/2); à la fonction show() avec setTimeout() - de cette façon, la fonction show()
est appelée jusqu'à ce que l'image entière soit affichée.
// Position de départ Notez que nous récupérons les dimensions de l'image au début de la
pos= 0;
fonction start() :
// C'est parti
show(); var width= document.layers["imgLayer"].document.davinci.width;
} var height= document.layers["imgLayer"].document.davinci.height;

function show() { À travers document.layers["imgLayer"] nous pouvons accéder au layer

// décrémente la taille de la zone de clipping
appelé imgLayer. Mais pourquoi est-ce que nous utilisons document après
pos+= 2; // pas de décrémentation document.layers["imgLayer"]? Et bien, chaque layer contient sa propre
document.layers["imgLayer"].clip.left= middleX- pos; page HTML, cela veut dire que chaque layer a un objet Document. Pour
document.layers["imgLayer"].clip.top= middleY- pos; accéder à l'image à l'intérieur du layer imgLayer, nous avons besoin
document.layers["imgLayer"].clip.right= middleX+ pos;
document.layers["imgLayer"].clip.bottom= middleY+ pos; d'accéder à cet objet document. Vous pouvez voir dans le code que
l'image est appelée davinci. Le reste devrait être clair.
// vérifie sur l'image est entièrement visible
if (!((pos > middleX) && (pos > middleY)))
setTimeout("show()", 20);
6.6 L'emboîtement de layers
}

// --> Nous avons déjà vu qu'un layer peut contenir plusieurs objets différents. Ils
</script> peuvent même contenir d'autres layers. Vous pouvez vous demander à
</head> quoi cela peut servir ?. Il y a plusieurs raisons pour utiliser des layers
<body> emboîtés. Nous jetterons un coup d'œil à quelques exemples qui
démontrent l'usage de layers emboîtés.
<ilayer name="imgLayer" clip="0,0,0,0"> Le premier exemple utilise un layer (appelé le parentLayer) lequel contient
<img name=davinci src="davinci.jpg" width=209 height=264>
</ilayer>
deux autres layers (layer1 et layer2).

<form> Sur la page, il y a trois boutons. Ces boutons vont démarrer ou arrêter les
<input type=button value="Début" onClick="start()"> mouvements des différents layers. Comme vous pouvez le constater,
</form>
bouger le layer parent affecte les deux autres layers. Mais bouger le layer
</body> layer1 (ou layer2) affecte seulement celui-ci. Donc, cela vous montre que
</html> l'on peut définir des groupes d'objets en utilisant les layers emboîtés.
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 47
Les layers
if (pos1 > 20) dir1= true;
Voici le code de l'exemple : document.layers["parentLayer"].layers["layer1"].top= 10 +
pos1;
<html> }
<head>
if (move2) {
<script language="JavaScript"> // layer2 bouge
<!-- caché if (dir2) pos2--
else pos2++;
// position de départ
var pos0= 0; if (pos2 < -20) dir2= false;
var pos1= -10;
var pos2= -10; if (pos2 > 20) dir2= true;

// on bouge ? document.layers["parentLayer"].layers["layer2"].top= 10 +
var move0= true; pos2;
var move1= false; }
var move2= false;
}
// quelle direction ?
var dir0= false; // -->
var dir1= false; </script>
var dir2= true; </head>

function startStop(which) { <body onLoad="setInterval('move()', 20)">

if (which == 0) move0= !move0;
if (which == 1) move1= !move1; <ilayer name=parentLayer left=100 top=0>
if (which == 2) move2= !move2; <layer name=layer1 z-index=10 left=0 top=-10>
} Ceci est le premier layer
</layer>
function move() {
<layer name=layer2 z-index=20 left=200 top=-10>
if (move0) { Ceci est le second layer
// parentLayer bouge </layer>
if (dir0) pos0--
else pos0++; <br><br>
Ceci est le layer parent
if (pos0 < -100) dir0= false;
</ilayer>
if (pos0 > 100) dir0= true;
<form>
document.layers["parentLayer"].left= 100 + pos0; <input type="button" value="Bouger/Arreter parentLayer"
} onClick="startStop(0);">
<input type="button" value="Bouger/Arreter layer1"
if (move1) { onClick="startStop(1);">
// layer1 bouge <input type="button" value="Bouger/Arreter layer2"
if (dir1) pos1-- onClick="startStop(2);">
else pos1++; </form>

if (pos1 < -20) dir1= false; </body>

</html>

Page 48 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Les layers

</head>
Vous pouvez voir que nous définissons deux layers à l'intérieur du <body onLoad="setInterval('moveNclip()', 20);">
parentLayer. Ce sont les layers emboîtées. Comment est-ce que nous
accédons à ces layers avec JavaScript? Vous pouvez voir comment cela <ilayer name="clippingLayer" z-index=0 clip="20,100,200,160"
est fait dans la fonction move() : top=0 left=0>
<ilayer name="imgLayer" top=0 left=0>
<img name=davinci src="davinci.jpg" width=209 height=264>
document.layers["parentLayer"].left= 100 + pos0; </ilayer>
... </ilayer>
document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;
... </body>
document.layers["parentLayer"].layers["layer2"].top= 10 + pos2; </html>

Pour accéder aux layers emboîtés, vous ne pouvez pas juste écrire
document.layers["layer1"] ou document.layers["layer2"] parce que les De nouveau, vous pouvez voir comment accéder aux layers emboîtés :
layers layer1 et layer2 sont à l'intérieur du layer parentLayer.
document.layers["clippingLayer"].layers["imgLayer"].top= 100 +
Nous avons vu comment définir une région de clipping. L'exemple suivant pos;
utilise une région de clipping et une image en mouvement. Ce que nous
voulons faire est que la région de clipping soit fixe - c.-à-d. qu'elle ne suit
pas le mouvement de l'image. 6.7 Effets avec des layers transparents

Voici le code : Des effets intéressants peuvent être créés avec l'aide de layers
(partiellement) transparents. Surtout les images avec des parties
<html>
<head>
transparentes peuvent créer un effet sympa. Tous les formats d'image ne
peuvent pas manier des parties transparentes. Pour le moment, le format
<script language="JavaScript"> le plus utiliser est gif89a.
<!-- caché Le format PNG supporte des parties transparentes aussi.
var pos= 0; // position de départ
var direction= false; Voici un script utilisant des images partiellement transparentes :
function moveNclip() { <html>
<head>
if (pos<-180) direction= true;
if (pos>40) direction= false; <script language="JavaScript">
<!-- hide
if (direction) pos+= 2 var pos= 0; // position de départ
else pos-= 2; var myTimer= null;

document.layers["clippingLayer"].layers["imgLayer"].top= 100 + function move() {

pos; pos+= 3; // pas d'incrémentation
document.layers["clippingLayer"].layers["imgLayer1"].top= -264
} + pos;
document.layers["clippingLayer"].layers["imgLayer2"].top= 264 -
// --> pos;
</script> if (pos< 264) myTimer= setTimeout('move()', 10)

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 49
Les layers
else myTimer= null;
}
function start() {
if (myTimer== null) {
pos= 0;
move();
}
}
// -->
</script>
</head>
<body onLoad="move()">
<form>
<input type=button value="Départ" onClick="start();">
</form>
<ilayer name="clippingLayer" z-index=0 clip="209,264" top=0
left=0>
<layer name="imgLayer1" top=-264 left=0>
<img name=davinci1 src="davinci1.gif" width=209 height=264>
</layer>
<layer name="imgLayer2" top=264 left=1>
<img name=davinci2 src="davinci2.gif" width=209 height=264>
</layer>
</ilayer>

</body>
</html>

Cet exemple utilise ces deux images (les parties grises pleines sont
transparentes):

Page 50 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Le modèle d'événement de JavaScript 1.2

Chapitre 7

7 Le modèle d'événement JavaScript 1.2

7.1 Les nouveaux événements

Il est temps de jeter un coup d'œil à un des nouveaux aspect de Netscape

Navigator 4.x: le modèle d'événements de JavaScript 1.2.

Abort Focus MouseOut Submit

Blur KeyDown MouseOver Unload
Click KeyPress MouseUp
Change KeyUp Move
DblClick Load Reset
DragDrop MouseDown Resize
Error MouseMove Select

Vous pouvez voir que quelques nouveaux événements ont été rendus
effectif. Nous allons jeter un coup d'œil à quelques-uns de ces
événements.
En premier, regardons à quoi sert l'événement Resize. Avec l'aide de cet
événement nous pouvons détecter toutes les fois que la fenêtre est
redimentionnée par l'utilisateur. Le script suivant démontre ceci :

window.onresize= message;

function message() {
alert("La fenêtre a été redimensionnée!");
}

</script>
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 51
Le modèle d'événement de JavaScript 1.2
</head> chose, vous ne devez pas écrire de parenthèses après message. Si vous
<body>
Redimensionnez la fenêtre SVP.
écrivez window.onresize = message(), le navigateur interprète le
</body> message() comme un appel à la fonction. Mais dans ce cas nous ne
</html> voulons pas appeler la fonction directement - nous voulons juste définir le
manipulateur de l'événement.
Avec la ligne :

window.onresize= message;
7.2 L'objet Event
nous définissons le "manipulateur" d'événement. Cela veut dire que la
fonction message() est appelée dès que la fenêtre est redimentionnée. Un nouvel objet Event a été ajouté à JavaScript 1.2. Il contient des
Vous n'êtes peut-être pas familier avec cette façon de définir des propriétés qui décrivent un événement. Chaque fois qu'un événement a
manipulateurs d'événement, mais cela n'a rien de nouveau. Si vous avez lieu, un objet Event est passé au manipulateur de l'événement.
un objet Buton par exemple, vous pouvez définir le manipulateur L'exemple suivant montre une image. Vous pouvez le cliquer dessus
d'événement comme ceci: quelque part. Une fenêtre d'alerte affichera les coordonnées de
l'événement de la souris.
<form name="myForm">
<input type="button" name="myButton" onClick="alert('Click event Voici le code :
occured!')">
</form>
<layer>
<a href="#" onClick="alert('x: ' + event.x + ' y: ' + event.y);
Mais vous pouvez le faire aussi comme ceci : return false;">
<img src="davinci.jpg" width=209 height=264 border=0></a>
<form name="myForm"> </layer>
<input type="button" name="myButton">
</form> Vous pouvez voir que nous utilisons onClick dans le tag <a>, comme nous
...
aurions fait avec les versions JavaScript antérieures. Ce qui est nouveau
est que nous utilisons event.x et event.y pour créer le contenu de la
<script language="JavaScript> fenêtre d'alerte.. C'est l'objet Event dont nous avons besoin pour connaître
les coordonnées de la souris.
document.myForm.myButton.onclick= message;
J'ai mis tout dans un tag<layer>. Ainsi, nous connaîtrons les coordonnées
function message() { relatif au layer, c.-à-d. dans notre cas l'image. Autrement nous aurions eu
alert('Click event occured!'); les coordonnées relatives à la fenêtre du navigateur. (return false; est
} utilisé ici afin que le navigateur ne suive pas le lien)
</script>
L'objet Event a les propriétés suivantes (nous en verrons quelques-unes
Vous pouvez penser que la deuxième alternative est un peu compliqué. dans les prochains exemples):
Donc pourquoi est-ce que nous l'utilisons dans le premier script? Le
problème est que l'objet window n'est pas défini à travers un certain tag -
donc nous devons utiliser la deuxième possibilité. Propriété Description
Deux choses importantes: En premier vous ne devez pas écrire
window.onResize - c.-à-d. vous devez utiliser des minuscule. Deuxième data Tableau d'URLs des objets lachés quand un événement
DragDrop intervient.
Page 52 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Le modèle d'événement de JavaScript 1.2

layerX Position horizontale du curseur en pixel relative au layer. En function handle(e) {

alert("L'objet window a capturé cet événement!");
combinaison avec l'événement Resize, cette propriété return true; // par exemple suivre le lien
représente la largeur de la fenêtre du navigateur.
layerY Position verticale du curseur en pixel relative au layer. En }
combinaison avec l'événement Resize, cette propriété
</script>
représente la hauteur de la fenêtre du navigateur. </head>
modifiers Chaîne spécifiant la touche - ALT_MASK, CONTROL_MASK, <body>
META_MASK or SHIFT_MASK <a href="test.html">Cliquez sur ce lien</a>
pageX Position horizontale du curseur en pixel relative à la fenêtre du </body>
</html>
navigateur.
pageY Position verticale du curseur en pixel relative à la fenêtre du
Comme vous pouvez le constatez, nous ne définissons aucun
navigateur.
manipulateur d'événement dans le tag <a>. En revanche, nous utilisons :
screenX Position horizontale du curseur en pixel relative à l'écran.
screenY Position verticale du curseur en pixel relative à l'écran. window.captureEvents(Event.CLICK);
target Chaînes représentant l'objet vers lequel est destiné
l'événement. pour capturer l'événement Click à travers l'objet window. Normalement
type Chaîne représentant le type d'événement. l'objet window ne connaît pas l'événement Click. Mais grâce à la capture
which Valeur ASCII d'un touche appuyée ou du numéro de bouton de d'événement, nous pouvons le réacheminer à l'objet window.
la souris. Notez l'écriture de Event.CLICK. CLICK doit être en majuscule. Si vous
x Synonyme de layerX. voulez capturer plusieurs événements vous devez les séparer en utilisant
y Synonyme de layerY. un | - par exemple :

window.captureEvents(Event.CLICK | Event.MOVE);
7.3 La capture d'événement
Vous pouvez voir que nous utilisons le return true; à l'intérieur de la
fonction handle() que nous avons défini comme fonction qui manie
Un aspect important est appelé la capture d'événement. Si quelqu'un, par
l'événement. Cela veut dire que le navigateur va suivre le lien après que la
exemple, clique sur un bouton, le manipulateur d'événement onClick de ce
fonction handle() est été exécutée. Si vous écrivez le return false; les
bouton est appelé. Avec l'aide de la capture d'événement vous pouvez
actions suivantes sont supprimées.
faire en sorte que votre fenêtre, document ou objet layer capture
l'événement avant qu'il soit manié par l'objet Button. De cette manière,
Si vous définissez un manipulateur d'événement onClick dans le tag <a>
votre fenêtre, document ou objet layer peuvent manier l'événement avant
que vous vous rendrez compte que ce manipulateur d'événement n'est
qu'il atteigne le sa cible.
pas appelé. Il est évident que l'objet window capture l'événement avant
Jetons un coup d'œil à un exemple pour voir cela :
qu'il arrive à l'objet link. Si vous définissez lune fonction handle()comme
<html> ceci :
<head>
<script language="JavaScript"> function handle(e) {
alert("The window object captured this event!");
window.captureEvents(Event.CLICK); window.routeEvent(e);
return true;
window.onclick= handle; }

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 53
Le modèle d'événement de JavaScript 1.2

l'ordinateur vérifie s'il y a d'autres manipulateurs d'événement définis pour

cet objet. La variable e est notre objet Event qui est passé à la fonction qui
manie l'événement.

Vous pouvez envoyer aussi directement un événement à un certain objet.

Pour cela, vous pouvez utiliser la méthode handleEvent(). Cela ressemble
à ceci :

window.captureEvents(Event.CLICK);

window.onclick= handle;

function handle(e) {
document.links[1].handleEvent(e);
}

</script>
<a href="test.html">Cliquez sur ce lien</a><br>
<a href="test.html"
onClick="alert('Manipulateur d\'événement du second
lien!');">Second lien</a>
</html>

Tous les événements Click sont envoyés au deuxième lien - même si vous
ne cliquez pas sur le lien directement!

Le script suivant démontre que votre script peut réagir pour des
événements de touches. Appuyez juste sur une touche pour voir le script
en action.

window.captureEvents(Event.KEYPRESS);

window.onkeypress= pressed;

function pressed(e) {
alert("Touche appuyée! Valeur ASCII : " + e.which);
}

</script>
Appuyez sur une touche ...
</html>

Page 54 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Drag & Drop

Chapitre 8

8 Drag & Drop

8.1 Qu'est-ce que le Drag & Drop ?

Avec l'aide du nouveau modèle d'événement de JavaScript 1.2 et des

layers, nous pouvons implémenter un Drag & Drop sur notre page web.
Pour cela, vous aurez besoin d'au moins Netscape Navigator 4.0 puisque
nous utilisons JavaScript 1.2.

Qu'est-ce que le Drag & Drop ? Quelques systèmes d'exploitation (comme

Win95/NT ou MacOS) vous laisse effacer des dossiers en vous laissant
poser des icônes sur une poubelle par exemple. Ce que vous faites est
que vous cliquez sur l'icône d'un dossier, glissez (c.-à-d. vous maintenez
le bouton de la souris en déplaçant la souris) l'icône au dessus de la
poubelle et le laissez tomber là.
Le Drag & Drop que nous voulons implémenter ici est restreint à la page
web. Donc vous ne pouvez pas utiliser ce code pour traîner des objets à
votre disque dur ou quelque chose comme ceci à l'intérieur d'une page
HTML. (Depuis Netscape Navigator 4.0 que votre script peut réagir à un
événement DragDrop appelé quand quelqu'un lâche un dossier sur votre
fenêtre du navigateur - mais ce n'est pas ce que nous allons faire ici)

JavaScript ne supporte pas directement le Drag & Drop. Cela veut dire
nous ne pouvons pas juste spécifier une propriété dragable (ou quoi que)
dans un objet image. Nous devons nous même écrire le code pour réaliser
cela. Vous verrez que ce n'est pas trop difficile.
Donc de quoi avons nous besoin? Nous avons besoin de deux choses. En
premier nous devons enregistrer certains événements de la souris, c.-à-d.
comment est-ce que nous savons quel objet sera déplacé à quelle place?
Alors nous avons besoin de réfléchir sur comment nous pouvons afficher

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 55
Drag & Drop

les objets en mouvement sur l'écran. Bien sûr nous utiliserons les layers En premier nous disons à l'objet window de capturer l'événement Click.
pour définir des objets différents et les déplacer sur l'écran. Chaque objet Pour cela, nous utilisons la méthode captureEvent(). La ligne :
est représenté par un layer.
window.onclick= displayCoords;

8.2 Les événements de la souris avec JavaScript 1.2 définit ce qui se passe quand un événement Click se produit. Il dit au
navigateur d'appeler la fonction displayCoords() comme une réaction à un
événement Click. displayCoords () est une fonction qui est définit comme
Quels événements de la souris avons nous? Nous n'avons pas ceci :
d'événement MouseDrag - mais nous pouvons accomplir celaen utilisant
les événements MouseDown, MouseMove et MouseUp. JavaScript 1.2 function displayCoords(e) {
utilise un nouveau modèle d'événement. Sans ce modèle d'événement alert("x: " + e.pageX + " y: " + e.pageY);
nous ne pourrions pas résoudre notre tâche. }
L'utilisateur pousse le bouton de la souris à l'intérieur de la fenêtre du
navigateur quelque part. Notre script doit réagir sur cet événement et Vous pouvez voir que cette fonction prend un argument (nous l'appelons
calculer quel objet (c.-à-d. layer) a été cliqué. Nous avons besoin de e). C'est l'objet Event qui est passé à la fonction displayCoords(). L'objet
connaître les coordonnées de l'événement de la souris. Event a les propriétés pageX et pageY qui représentent les coordonnées
Une autre chose importante est la capture d'événement. Si un utilisateur de la souris. La fenêtre d'alerte affiche ces valeurs.
clique sur un bouton, l'événement de la souris est envoyé à l'objet button
directement. Mais dans notre ca, nous voulons que la fenêtre manie notre
événement. Donc nous devons laissé la fenêtre capturer l'événement de la 8.3 MouseDown, MouseMove et MouseUp
souris, c.-à-d. que l'objet window obtient cet événement et peut réagir.
L'exemple suivant montre ceci. Vous pouvez cliquer à l'intérieur de la Comme je l'ai déjà dit, JavaScript n'a pas d'événement MouseDrag. Par
fenêtre du navigateur, n'importe où. Une fenêtre d'alerte affiche les conséquent nous devons utiliser les événements MouseDown,
coordonnées de la souris. MouseMove et MouseUp pour implémenter le Drag & Drop. L'exemple
Voici le code : suivant démontre l'usage de MouseMove. Les coordonnées réelles du
curseur de la souris sont affichées dans la barre de status :
<html>
<html>
<script language="JavaScript">

// -->
</script>
</script>
Les coordonnées de la souris sont affichées dans la barre de
Cliquez quelque part à l'intérieur de la fenêtre.
status.
</html>
</html>

Page 56 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Drag & Drop

Notez que vous devez écrire Event.MOUSEMOVE où MOUSEMOVE doit Vous pouvez voir que nous utilisons le signe | (ou) pour définir plusieurs
être en majuscule. Quand vous définissez quelle fonction doit être appeler événements qui seront capturés par l'objet window. Les deux prochaines
quand l'événement MouseMove se produit vous devez utiliser des lignes définissent ce qui se passe quand ces événements se produisent :
minuscules : window.onmousemove =...
window.onmousedown= startDrag;
window.onmouseup= endDrag;
Maintenant nous pouvons combiner les deux derniers exemples. Nous
voulons que les coordonnées du curseur de la souris soient affichées
quand la souris est déplacée avec le bouton appuyé. La prochaine ligne de code définit se qui se passe lorsque l'objet window
Voici le code : capte un événement MouseMove :

window.onmousemove= moveIt;
<html>

function startDrag(e) { function startDrag(e) {

window.captureEvents(Event.MOUSEMOVE); window.captureEvents(Event.MOUSEMOVE);
} }

</html>
Maintenant nous avons tous les événements nécessaire pour réaliser le
Drag & Drop. Il ne nous reste plus qu'à afficher les objets sur l'écran.
Premièrement, nous disons à l'objet window de capturer les événements
MouseDown et MouseMove :
8.4 Afficher des objets en mouvement
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 57
Drag & Drop

Nous avons vu dans les chapitres précédents que nous pouvons créer des if ((dragObj[i].left < e.pageX) &&
(dragObj[i].left + dragObj[i].clip.width > e.pageX) &&
objets en mouvement avec l'aide des layers. Tout ce que nous devons (dragObj[i].top < e.pageY) &&
faire est maintenant de connaître quel objet l'utilisateur a cliqué. Alors cet (dragObj[i].top + dragObj[i].clip.height > e.pageY)) {
objet doit suivre les mouvements de la souris. Voici le code d'un script qui hit= i;
réalise cela : dx= e.pageX- dragObj[i].left;
dy= e.pageY- dragObj[i].top;
break;
<html> }
<head> }
return hit;
<script language="JavaScript"> }
<!--

var dragObj= new Array(); // -->

var dx, dy; </script>
</head>
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP); <body onLoad="init()">
window.onmousedown= startDrag; <layer name="layer0" left=100 top=200 clip="100,100"
window.onmouseup= endDrag; bgcolor="#0000ff">
window.onmousemove= moveIt; <font size=+1>Objet 0</font>
</layer>
function startDrag(e) {
currentObj= whichObj(e); <layer name="layer1" left=300 top=200 clip="100,100"
window.captureEvents(Event.MOUSEMOVE); bgcolor="#00ff00">
} <font size=+1>Objet 1</font>
</layer>
function moveIt(e) {
if (currentObj != null) { <layer name="layer2" left=500 top=200 clip="100,100"
dragObj[currentObj].left= e.pageX - dx; bgcolor="#ff0000">
dragObj[currentObj].top= e.pageY - dy; <font size=+1>Objet 2</font>
} </layer>
}
</body>
function endDrag(e) { </html>
currentObj= null;
window.releaseEvents(Event.MOUSEMOVE);
} Vous pouvez voir que nous définissons trois layers dans la section <body>
de cette page HTML. Après que la page entière soit chargée, la fonction
function init() {
// definit le layer 'dragable'
init() est appelée en utilisant l'événement onLoad dans le tag <body> :
dragObj[0]= document.layers["layer0"];
dragObj[1]= document.layers["layer1"]; function init() {
dragObj[2]= document.layers["layer2"]; // define the 'dragable' layers
} dragObj[0]= document.layers["layer0"];
dragObj[1]= document.layers["layer1"];
function whichObj(e) { dragObj[2]= document.layers["layer2"];
}
// Verifie quel objet a été cliqué

var hit= null;

for (var i= 0; i < dragObj.length; i++) {
Page 58 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Drag & Drop

Le tableau dragObj prend tous les layers qui peuvent être déplacés par l'intérieur d'un certain rectangle. Si c'est vrai vous appelez une fonction qui
l'utilisateur. Chaque layer prend un numéro dans le tableau dragObj. Nous enregistre tous les articles pour acheter. Alors vous pourriez montrer
aurons besoin de ce numéro plus tard. l'article à l'intérieur du panier à provisions.
Vous pouvez voir que nous utilisons le même code que précédemment
pour capturer les événements de la souris : 8.6 Améliorations
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
Il y a plusieurs façons d'améliorer notre script. Pour commencer, nous
window.onmousedown= startDrag; pouvons vouloir changer l'ordre des layers dès que l'utilisateur clique sur
window.onmouseup= endDrag; un objet. Autrement, ça a une apparence un peu étrange : si vous
window.onmousemove= moveIt;
déplacez un objet, il peut disparaître derrière un autre objet. Vous pouvez
résoudre ce problème en changeant l'ordre des layers dans la fonction
La ligne suivante a été ajoutée dans la fonction startDrag() :
startDrag().
currentObj= whichObj(e); Je ne pense pas que vous serez satisfaits avec juste des éléments rouge,
vert et bleus sur votre page web. Ajoutez quelques graphiques, de la
La fonction whichObj() détermine quel objet l'utilisateur a cliqué. Elle fraîcheur et les utilisateurs se souviendront de votre page. Vous pouvez
renvoie le numéro du layer. Si aucun layer n'a été cliqué, elle renvoie la placer n'importe quoi à l'intérieur des objets layer. Ainsi placez un seul tag
valeur null. La variable currentObj stocke cette valeur. Cela veut dire que <img> si vous voulez que votre objet paraisse comme une image…
currentObj représente le numéro du layer qui est déplacé à ce moment (ou
elle vaut null si aucun layer n'est déplacé).

Dans la fonction whichObj(), nous vérifions les propriétés left, top, width et
height pour chaque layer. Avec ces valeurs, nous pouvons vérifier sur quel
objet l'utilisateur a cliqué.

8.5 Lâcher des objets

Nous avons maintenant tout ce dont nous avons besoin pour implémenter
un Drag & Drop. Avec notre script, l'utilisateur peut déplacer des objets sur
notre page web. Mais cependant, nous n'avons pas parlé du lâcher des
objets. Supposons que vous voulez créer un magasin en ligne. Vous avez
plusieurs articles qui peuvent être mis dans un panier à provisions.
L'utilisateur déplacerai ces articles au dessus du panier à provisions et les
lâcherai là. Cela veut dire nous devons enregistrer quand l'utilisateur fait
tomber un objet sur le panier à provisions - ce qui signifie qu'il veut
l'acheter.
Que devons nous changer pour implémenter cela? Nous devons vérifier à
quelle place l'objet est lâché (après un événement MouseUp) - c.-à-d.
nous devons ajouter quelque ligne de code à la fonction endDrag(). Nous
pourrions vérifier par exemple si les coordonnées de la souris sont à
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 59
Drag & Drop

Page 60 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

Chapitre 9

9 Références

9.1 Les objets de base

Dans une page HTML, un certain nombre d'objets pré-définis sont

accessibles sans que vous ayez à les créer; ce sont :

window : l'objet de plus haut niveau, c'est la fenêtre que vous voyez dans
le navigateur.
child windows : ce sont les fenêtres filles que l'on retrouve dans chacune
des frames. On verra leur appel dans les déclarations des
frames
location : c'est l'URL courante et ses propriétés
history : ce sont les URL précédemment visitées.
document : ce sont les propriétés du document courant, comme le titre,
les couleurs de fonds, les formulaires
navigator : ce sont le nom et la version du navigateur ainsi que les types
MIME et les PLUG-INS supportés par le client.

Ceci représente un avantage extrêmement intéressant : vous allez pouvoir

définir en JavaScript une nouvelle valeur pour le fond de votre document
ou définir vos formulaires de façon dynamique.

Le schéma suivant, que l'on retrouve souvent dans la littérature, illustre la

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 61
Références

hiérarchie de toutes les classes présentes dans le Navigateur :

9.2 Les tableaux prédéfinis
window
|
+ --parent, frames, self, top Les principaux objets d'une page HTML sont définis par des tableaux que
| l'on retrouve dans la liste suivante :
+ --location
|
+ --historique Tableau Description
|
+ --document anchors comprend toutes les balises <A> qui contiennent un argument
| NAME
+ --formulaire (FORM) applets comprend toutes les balises <APPLET> du document
| | arguments comprend tous les arguments d'une fonction
| éléments (text fields, textarea, checkbox, password
| radio, select, button, submit, reset) elements comprend toutes les balises <FORM> dans l'ordre de leur
+ --links définition
| embeds comprend toutes les balises <EMBED> dans l'ordre de leur
+ -- URL
définition
forms comprend toutes les balises <FORM> du document
Prenons à titre d'exemple, une forme définie de la façon suivante :
frames comprend toutes les balises <FRAME> contenant un
<FORM NAME="nom"> FRAMESET dans l'ordre de leur définition
<INPUT TYPE="text" NAME="essai" onChange="..."> ; history comprend tous l'historique du navigateur
</FORM> images comprend toutes les balises <IMG> dans l'ordre de leur
définition
La valeur du texte entré est accessible par la valeur links comprend tous les liens <AREA HREF="...">, <A HREF=""> et
document.nom.essai.value
Le formulaire dans un document est stocké dans un tableau appelé forms, les objets Link créés par la méthode linkwith the link
le premier formulaire est noté forms[0], la deuxième est forms[1] etc.. mimeTypes Comprend tous les types MIME supportés par le navigateur
Ainsi la valeur du texte entré qui était document.nom.essai.value peut être (helpers ou plug-ins)
aussi appelé document.form[0].essai.value. options comprend tous les éléments OPTION d'une balise SELECT
Ce mécanisme se répète pour tous les éléments comme les radios plugins comprend tous les plug-ins installés sur votre navigateur
boutons, les champs texte etc .. L'objet window est un objet important dans
le langage JavaScript, il permet l'ouverture et la fermeture de pages dans
un nouveau navigateur, d'émettre des fenêtres Popup ou des fenêtres de
confirmation.
A l'instar des formulaires rangés en tableau form[], les frames sont
rangées dans un tableau frames[0], ... frames[n]. Ainsi la première frame
d'une page composée est window.frame[0].

Page 62 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

9.3.2 Applet
9.3 Les Objets
Nom Définition Voir aussi
9.3.1 Anchor applet permet d'accéder aux paramètres d'une applet applet
L'applet doit être appelée avec un paramètre
MAYSCRIPT
Nom Définition Voir aussi
Syntaxe document.Applet[numero] definition
Anchor Les anchors sont les destinations (ou les signets) Link <APPLET CODE="monapplet.class" WIDTH50
des liens hypertextes HEIGHT=25
Syntaxe <A HREF="URL" NAME="Nom" TARGET="fenetre"> Définition NAME="momApp" MAYSCRIPT>
Texte </A> Tableau document.applets[] -
Tableau document.anchors[0] .. - Propriété length (nombre d'applets dans le doc) -
document.anchors[document.anchors.length - 1 ] Méthode eval – toString - valueOf -
Propriété length - Se rapporte à Document -
Méthode eval – toString - valueOf - Evénement - -
Se rapporte à Document - Exemple <SCRIPT>
Evénement - - Document.write('Ce document contient
<HTML> ',document.applets.length,' applets')
Exemple </SCRIPT>
<HEAD>
<TITLE>UNGI © Links et Anchors</TITLE> Remarque Version 1.1 -
</HEAD>

<BODY>
<SCRIPT>
window2=open("suscribe.htm","Abonnement","sc 9.3.3 Area
rollbars=yes,width=250, height=400")

function AllerFenetre(num) { Nom Définition Voir aussi

if (window2.document.anchors.length >
num) Area permet la gestion des AREA des MAPS Link
window2.location.hash=num Syntaxe Voir exemple AREA MAP
else <MAP NAME="nomImage">
alert("Erreur") <AREA>
} </MAP>
</SCRIPT> Tableau - -
Propriété hash - host – hostname – href – pathname - port - -
<B>Links et Anchors</B>
<FORM> protocol - search - target
Cliquer sur le bouton pour aller vers Méthode - -
l'URL<P> Se rapporte à document -
<INPUT TYPE="button" VALUE="Abonnement"
NAME="bouton_abonnement"
Evénement onMouseOut onMouseOver -
onClick="AllerFenetre(this.value)"> Exemple -
</FORM> Remarque Version 1.1 -
</BODY>
</HTML>
Remarque - -

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 63
Références

9.3.4 Array 9.3.6 Boutons

Nom Définition Voir
Nom Définition Voir aussi Button Bouton dans une page HTML form –
Array permet la déclaration de tableaux Link reset –
Syntaxe monTableau = new Array (taille) MAP submit
monTableau[0]= »Gilles » Syntaxe <INPUT TYPE= »button » NAME= »Nom » definition
VALUE= »texte » onClick= »appelFonction »>
Tableau - - INPUT
Propriété length – prototype - Tableau - -
Méthode join – reverse – sort - Propriété name – value – type -
concat – pop – push – shift (version 1.2) Méthode click – blur – focus (blur et focus Netscape 3) -
Se rapporte à - Se rapporte à form -
Evénement - - Evénement onClick – onBlur – onFocus -
Exemple - - Exemple <FORM><INPUT TYPE="button"
VALUE="Abonnement" NAME="bouton_abonnement"
Remarque Version 1.1 - onClick="window.open
('suscribe.htm', 'Abonnement',
'scrollbars=yes,status=yes,width=500,height=
300')">
</FORM>
Remarque Button a été ajouté comme possibilité de la balise -
9.3.5 Booléen FORM avec le champ onClick, évitant le bouton
submit
Nom Définition Voir
Boolean permet la création /l'utilisation de types booléns 9.3.7 Checkbox
Syntaxe Déclaration : objetboolen = new Boolean(value) Nom Définition Voir
Utilisation : objetbooleen.propertyName
checkbox Les boîtes à cocher permettent la sélection d’un form –
Tableau - - objet à 0 ou à 1 radio
Propriété prototype - Syntaxe <INPUT TYPE= »checkbox » NAME= »Nom » definition
Méthode eval – toString – valueOf - VALUE= »Valeur » CHECKED
INPUT
Se rapporte à - onClick= »appelFontion »>
Evénement - - Tableau - -
Exemple bNoParam = new Boolean() bZero = new - Propriété checked - defaultChecked - name - value - type -
Boolean(0) bNull = new Boolean(null) bEmptyString Méthode click – blur – focus (blur et focus Netscape 3) -
= new Boolean("") bfalse = new Boolean(false) Se rapporte à Form -
Remarque Version 1.1 - Evénement onClick – onBlur – onFocus -
Exemple <FORM><INPUT TYPE="checkbox" VALUE="aide"
NAME="aide"
onClick="alert ('faire attention aux quotes
dans l\'appel d\'alert') ">
</FORM>
Remarque La valeur onClick a été ajoutée au type checkbox -
existant

Page 64 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

9.3.8 Date 9.3.9 document

Nom Définition Voir
Nom Définition Voir document L’objet document contient les propriétés window –
date L'objet date permet d'utiliser la date et l'heure - énumérées ci-après frame
Syntaxe new Date() ,new Date("month day, year - Syntaxe <BODY BACKGROUND= »backgroundImage » definition
BGCOLOR= »backgroundColor »
hours:minutes:seconds"), new Date(year, month, TEXT= »foregroundColor »
BODY
day), new Date(year, month, day, hours, minutes, LINK= »unfollowedLinkColor »
seconds) ALINK= »activatedLinkColor »
Tableau - - VLINK= »followedLinkColor »
onLoad= »handlerText »
Propriété - - onUnload= »handlerText »>
Méthode getDate - getDay - getMinutes- getMonth - - Tableau - -
getSeconds - getTime - getTimeZoneoffset - Propriété alinkColor - anchors - bgColor - cookie - fgColor - -
getYear - parse - setDate - setHours - setMinutes - forms - lastModified - linkColor - links - location -
setMonth - setSeconds - setTime - setYear - referrer - title – vlink
toGMTString - toLocaleString - UTC – prototype Méthode clear - close - open - write -writeln - getselection -
Se rapporte à - - Se rapporte à window -
Evénement - - Evénement - -
Exemple <SCRIPT> document.write ("La couleur de fond est ",
<!-- a mettre dans l'entete Exemple
document.fgColor,
function AfficheHeure () { "<BR>La couleur du texte est
Today = new Date () ",document.bgColor)
document.write (Today.getHours() + "h" + </SCRIPT>
Today.getMinutes () )
} Remarque - -
</SCRIPT>

<SCRIPT>
<! a mettre dans le corps 9.3.10 Element array
AfficheHeure () Nom Définition Voir aussi
</SCRIPT>
Remarque Il est normal que l'heure de s'affiche pas si vous - element array les tableaux éléments permettent d'indexer les Form
imprimez le document, car le code généré par éléments d'un formulaire par ordre d'apparition
JavaScript ne s'imprime pas! (check box, text area..)
Syntaxe formName.elements[index] – -
formName.elements.length
Tableau document.anchors[0] .. -
document.anchors[document.anchors.length - 1 ]
Propriété length -
Méthode - -
Se rapporte à form -
Evénement - -
Exemple -
Remarque - -
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 65
Références

9.3.11 Event 9.3.12 FileUpload

Nom Définition Voir aussi Nom Définition Voir aussi

event L’objet event contient le dernier événement, form FileUpload l’attribut file Upload permet d’envoyer un fichier form
comme par exemple la dernière touche du clavier vers le serveur à partir du navigateur.
appuyée. Syntaxe <INPUT TYPE= »file » NAME= »fileUploadName » -
Syntaxe event. - [onBlur= »texte »]
Tableau - fileUploadName.propertyName
Propriété type - target - layerX - layerY - PageX - PageY - - fileUploadName.methodName
screenX - screenY - which - data - modifiers Tableau document.anchors[0] .. -
Méthode Abort - KeyDown - MouseUp - Blur - KeyPress - - document.anchors[document.anchors.length – 1 ]
Move - Click - KeyUp - Reset – Change – Load - Propriété name - type - value – formproperties -
Resize – DblClick - MouseDown - Select – Méthode blur - eval - focus - toString – valueOf -
DragDrop – MouseMove - Submit - Error – Se rapporte à form -
MouseOut - Unload - Focus - MouseOver Evénement onBlur – onChange - onFocus -
Se rapporte à - Exemple <FORM NAME= »form1 »>
Fichier à envoyer : <INPUT TYPE= »file »
Evénement - - NAME= »myUploadObject »>
Exemple <SCRIPT LANGUAGE= »JavaScript1.2 »> function
<P>Get properties<BR>
exemple(even) {
<INPUT TYPE= »button » VALUE= »name »
alert (« Evenement : « + even.type) ;
onClick= »alert(‘name : ‘ +
alert (« x position « + even.layerX) ;
document.form1.myUploadObject.name) »>
alert (« y position « + even.layerY) ;
<INPUT TYPE= »button » VALUE= »value »
return true ;
onClick= »alert(‘value : ‘ +
}
document.form1.myUploadObject.value) »><BR>
document.onmousedown = exemple ;
</FORM>
</SCRIPT>
Remarque Version 1.2 - Remarque FileUploadName est bien la valeur à renseigner -
pour accéder à l’objet FileUpload, ce n’est pas le
nom du fichier à envoyer. Nescape 3.0

Page 66 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

9.3.13 Form 9.3.14 Frames

Nom Définition Voir aussi Nom Définition Voir aussi

form les formulaires permettent de gérer les entrées button - frames les frames sont les sous fenêtres indépendantes window –
claviers (zones textes, boutons radio etc.) checkbox d’une page HTML document
- hidden - Syntaxe <FRAMESET ROWS= »hauteur » COLS= »largeur » definition
onLoad= »appelfonction »
password onUnload= »appelfonction »>
FRAME
- radio - <FRAME SRC= »URL » NAME= »nom »> </FRAMESET>
reset - Tableau [frameReference.]frames[index] – -
select - [frameReference.]frames.length –
submit - [windowReference.]frames[index] –
text – [windowReference.]frames.length
textarea Propriété length – parent – self – window -
Syntaxe <FORM NAME="nom" TARGET="fenetre" definition
ACTION="action" METHOD=GET | POST Méthode clearTimeout – setTimeout – blur – focus -
ENCTYPE="encodingType"
FORM Se rapporte à frame – window -
onSubmit="appelFonction"> </FORM> Evénement onBlur – onFocus -
Tableau document.forms[index]- document.forms.length - Exemple <SCRIPT>document.write ("Nb frames : " +
Propriété action - elements - encoding - length - method – - window.frames.length)</SCRIPT>
target Remarques - -
Méthode submit – reset (version 3) -
Se rapporte à document -
Evénement onSubmit – onReset - 9.3.15 Fonction
Exemple <SCRIPT>
<!-- a mettre dans la partie entete>
function testInput (){ Nom Définition Voir aussi
if (document.form1.quatrecar.value.length != Function spécifie une séquence à compiler sous la forme
4) { d'une fonction
alert("Entrez exactement 4 caractères "
+ document.form1.quatrecar.value + " n'est Syntaxe Nomfonction= new Function ([arg1, arg2, ... argn],
pas valide") corps de la fonction)>
} Tableau - -
}
</SCRIPT> Propriété arguments - array - caller - prototype -
Méthode eval – toString - valueOf -
<!-- dans le corps du texte> Se rapporte à -
<FORM NAME=form1 onSubmit="testInput()" > Evénement -
<INPUT TYPE="text" VALUE="1" SIZE=4 Exemple var setBGColor = new -
NAME=quatrecar> Function("document.bgColor='antiquewhite'")
</FORM>
Remarques Netscape 3.0 - Moins efficace qu'un appel de -
Remarque On le voit, l'événement onSubmit est un moyen - fonction non compilé.
efficace de tester les champs entrés dans un
formulaire

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 67
Références

Exemple <SCRIPT>
<--! partie a insérer dans l'en-tête
function Reload () {
9.3.16 Hidden history.go(0)
}
Nom Définition Voir aussi </SCRIPT>
hidden l’argument hidden permet de soumettre une cookie
requête de formulaire au serveur sans afficher la <INPUT TYPE="image" BORDER=0
SRC="gif/reload.gif" onClick="Reload()"
commande ainsi masquée
Syntaxe <INPUT TYPE= »hidden » NAME= »nom » definition Remarque History permet de simuler également les autres -
VALUE= »texte »>
INPUT touches de navigation de votre logiciel.
Tableau - -
Propriété name – value – type -
9.3.18 Image
Méthode eval – toString – valueOf -
Se rapporte à form - Nom Définition Voir aussi
Evénement - - Image L’objet image peut être manipulé en JavaScript images
Exemple <FORM NAME=form3> comme avec la balise
<INPUT TYPE="hidden" NAME="quelconque"
VALUE="Caché">
Syntaxe imageName = new Image([width, height]) -
<INPUT TYPE="texte" NAME="surprise"> imageName.propertyName
<INPUT TYPE="button" Value="voir champ Tableau document.image[numero|length] -
caché" NAME="bouton" Propriété border - complete - height - hspace - lowsrc - name -
onClick="document.form3.surprise.value=docum - prototype - src - vspace - width
ent.form3.quelconque.value"> Méthode eval – toString – valueOf -
</FORM> Se rapporte à document -
Remarque - - Evénement onAbort onError onLoad -
Exemple <SCRIPT>
delai = 100
Numero = 0
9.3.17 History MonImages = new Array()
Nom Définition Voir aussi for(i = 0; i < 10; i++) {
MonImages[i] = new Image()
history Permet de récupérer la liste des précédentes - MonImages[i].src = "gif/" + i + ".gif"
pages visitées par le navigateur }
Syntaxe history.propertyName - - function animate() {
document.animation.src =
history.methodName(parameters) MonImages[Numero].src
Tableau history (3) - Numero++
Propriété length - if(Numero>= 10) {
Numero = 0
Méthode back – forward – go - }
current – next – previous (Version 3) }
Se rapporte à document - </SCRIPT>
<BODY BGCOLOR="white">
Evénement - - <IMG NAME="animation" SRC="gif/0.gif""
onLoad="setTimeout('animate()', delai)">
Remarque Version 1.1 -

Page 68 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

9.3.19 Link 9.3.21 Math

Nom Définition Voir aussi
link les liens hypertextes anchor Nom Définition Voir aussi
Syntaxe <A HREF=URL NAME= »nom du signet » definition Math ensemble de fonctions et valeurs mathématiques -
TARGET= »fenetre » onClick= »appelfonction »
onMouseOver= »appelFonction »> texte</A>
URL Syntaxe Math.propertyName – -
Tableau document.anchors[index] – - Math.methodName(parameters)
document.anchors.length Tableau - -
Propriété hash - host - hostname - href - pathname - port - - Propriété E - LN2 - LN10 - LOG2E - LOG10E - PI - SQRT1_2 -
protocol - search - target – length - SQRT2
Méthode - - Méthode abs - acos - asin - atan - ceil - cos - exp - floor - log -
Se rapporte à document - - max - min - pow - random - round - sin - sqrt – tan
Evénement onClick – onMouseOver – onMouseOut - Se rapporte à - -
Exemple <!-- dans le corps du texte> Evénement - -
<A HREF=annonce.htm onMouseOver Exemple <FORM>
="alert('N\'oubliez pas de regarder les <INPUT TYPE="button" VALUE="racine"
annonces Ungi')">annonce.htrm</A> onClick="form.result.value =
Math.sqrt(form.nombre.value)">
Remarque Bien entendu, l’événement onMouseOver masque - <INPUT TYPE="text" NAME="nombre"
l’événement onClick SIZE=6><INPUT TYPE="text" NAME="result">
</FORM>
Remarque - -
9.3.20 Location
Nom Définition Voir aussi
9.3.22 Navigator
location Permet d'extraire toutes les informations relatives à -
une URL Nom Définition Voir aussi
Syntaxe [windowReference.]location.nom history – navigator information sur la version de navigateur utilisée -
location Syntaxe navigator.propertyName -
Tableau - - Tableau - -
Propriété hash - host - hostname - href - pathname - port - - Propriété appCodeName - appName - appVersion - -
protocol - search – target userAgent + mimeTypes plugins (V3)
Méthode reload – replace - Méthode javaEnabled (V1.1) -
Se rapporte à document - preference (V1.2)
Evénement - - Se rapporte à - -
Exemple <!-- dans le corps du texte> Evénement - -
<SCRIPT> <SCRIPT>
document.write("<FONT COLOR=Green>Le
Exemple
document.write ( "<FONT COLOR=green>Votre
protocole est :</FONT><BR>" + navigateur est</FONT><BR>"
window.location.protocol) + navigator.appName + navigator.appVersion )
</SCRIPT> </SCRIPT>
Remarque hash désigne le nom du signet ou de l'ancre - Remarque - -

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 69
Références

9.3.23 Number 9.3.25 Password

Nom Définition Voir aussi Nom Définition Voir aussi
Number Objet permettant de manipuler des valeurs - password champs d’un formulaire remplis avec des form – text
numériques caractères *
Syntaxe numberObjectName = new Number() - Syntaxe <INPUT TYPE= »password » NAME= »nom » -
VALUE= »texte » SIZE=nombre>
numberObjectName.propertyName
Tableau - - Tableau - -
Propriété MAX_VALUE - MIN_VALUE – NaN - - Propriété defaultValue – name – value – type -
NEGATIVE_INFINITY - POSITIVE_INFINITY Méthode focus – blur – select -
prototype Se rapporte à form -
Méthode reval – toString – valueOf - Evénement onBlur onFocus -
Exemple <FORM>
Se rapporte à document - <INPUT TYPE="password" NAME="passwd"
Evénement - - onBlur="alert('Votre mot de passe était ' +
Exemple biggestNum = Number.MAX_VALUE - this.form.passwd.value)">
</FORM>
Remarque Version 1.1 -
Remarque - -

9.3.24 Option
9.3.26 Plugin
Nom Définition Voir aussi
Nom Définition Voir aussi
option Objet d’un champs SELECT -
Plugin donne la liste des plugins installé sur le navigateur -
Syntaxe selectName.options -
Syntaxe navigator.plugins[index].propertyName -
selectName.options[index]
navigator.plugins[pluginIndex][mimeTypeIndex].mi
selectName.options.length
meTypePropertyName
Tableau - -
Tableau navigator.plugins[index] -
Propriété - -
Propriété description – filename – length - name -
Méthode - -
Méthode eval – toString – valueOf -
Se rapporte à - -
Se rapporte à navigator -
Evénement - -
<FORM Name=form4> Evénement - -
Exemple <SCRIPT>
<SELECT NAME="choix" Exemple
onChange="form4.resultat.value+=form4.choix. for (i=0; i < navigator.plugins.length; i++)
options[form4.choix.selectedIndex].value"> {
<OPTION VALUE="Aller "> Aller
<OPTION VALUE="Retour "> Retour document.writeln(navigator.plugins[i].name,
<OPTION VALUE="Séjour ">Séjour navigator.plugins[i].description,
</SELECT>
<INPUT TYPE=TEXTE SIZE=15 NAME="resultat"> navigator.plugins[i].length)
</FORM> }
</SCRIPT>
Remarque - -
Remarque Version 1.1 -

Page 70 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

9.3.27 Radio 9.3.29 Select

Nom Définition Voir aussi Nom Définition Voir aussi

Radio bouton radio dans un formulaire (choix exclusifs) form – select menu à choix multiple dans un formulaire form –
checkbox checkbox
– select – radio
Syntaxe <INPUT TYPE= « radio » NAME= "nom » VALUE= - Syntaxe <SELECT NAME= »nom » [SIZE= »integer »] -
« valeur » [CHECKED] [onClick= [MULTIPLE] [onBlur= »appelFonction »]
« handlerText »] > [onChange= »appelFonction »]
Tableau - - [onFocus= »appelFonction »]>
<OPTION VALUE= »valeur » [SELECTED]> texte
Propriété checked - defaultChecked - length - name - value + - </SELECT>
type (v3) Tableau - -
Méthode click – blur – focus - Propriété length - options - selectedIndex - defaultSelected - -
Se rapporte à form - index - selected - text - value +
Evénement onClick - type (V3)
Exemple <FORM NAME=form5>
<INPUT TYPE="text" Name="ch1" SIZE=4>
Méthode blur – focus -
<INPUT TYPE="radio" NAME="ch2" value=un Se rapporte à form – select -
onClick="this.form.ch1.value=this.value"><IN Evénement onBlur – onChange – onFocus -
PUT TYPE="radio" NAME="ch2" value=deux <FORM>
onClick="this.form.ch1.value=this.value">
Exemple
<SELECT NAME="liste" SIZE=1>
</FORM> <OPTION SELECTED VALUE="">Choisissez
Remarque - - <OPTION VALUE="index.htm">Index
<OPTION VALUE="suscribe.htm">Inscription
<OPTION VALUE="aparaitr.htm">A paraître
9.3.28 Reset </SELECT>
<INPUT TYPE="button" VALUE="Allez"
onClick="if (form.liste.selectedIndex != 0)
Nom Définition Voir aussi
reset bouton de remise à zéro dans les formulaires form – window.open(form.liste.options[form.liste.se
onSubmit lectedIndex].value, 'Abonnement',
'scrollbars=yes,status=yes,width=500,height=
Syntaxe <INPUT TYPE="reset" NAME="nom" VALUE="texte" -
300');
[onClick="handlerText"] >
else alert('Veuillez faire un choix')">
Tableau - - </FORM>
Propriété name – value - type - Remarque - -
Méthode click – blur – focus -
Se rapporte à form -
Evénement onClick – onBlur – onFocus -
Exemple <FORM>
<INPUT TYPE="Reset" onClick="alert('pas
question')">
</FORM>
Remarque - -

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 71
Références

9.3.30 String Exemple <SCRIPT>

function Calcul (form)
{
Nom Définition Voir aussi i=eval(form.op1.value) + eval(
form.op2.value)
string chaîne de caractères text – i="Résultat : " + i
textarea alert ( i)
Syntaxe chaine.propriété - chaine.méthode(paramètres) }
</SCRIPT>
Tableau - - <FORM>
Propriété length - <INPUT NAME=op1 VALUE=1>
Méthode anchor - big - blink - bold - charAt - fixed - fontcolor - <B>+</B>
<INPUT NAME=op2 VALUE=2>
- fontsize - indexOf - italics - lastIndexOf - link - <INPUT NAME=result TYPE=SUBMIT VALUE="="
small - strike - sub - substring - sup - toLowerCase onClick="Calcul(this.form)">
– toUpperCase
Se rapporte à - - </FORM>
Evénement - - Remarque - -
Exemple <FORM>
<INPUT TYPE="button" VALUE="majuscule"
onClick="form.result.value =
form.chaine.value.toUpperCase() ">
9.3.32 Text
<INPUT TYPE="text" NAME="chaine"
VALUE=gilles SIZE=6>
<INPUT TYPE="text" NAME="result" >
Nom Définition Voir aussi
</FORM> text texte entré dans un formulaire -
Remarque - - Syntaxe <INPUT TYPE="text" NAME="Nom" password
VALUE="Valeur" SIZE=integer - form -
onBlur="handlerText" onChange="handlerText" string –
onFocus="handlerText" onSelect="handlerText"> textarea
Tableau - -
9.3.31 Submit Propriété defaultValue - name - value + type (V3) -
Méthode focus – blur – select -
Nom Définition Voir aussi Se rapporte à form -
submit permet l’envoi au serveur http de la requête de Evénement onBlur – onChange – onFocus – onSelect -
formulaire Exemple <FORM NAME="farce">
Syntaxe <INPUT TYPE= »submit » NAME= »Nom » form – <INPUT TYPE="text" NAME="champ" SIZE="15"
VALUE= »Texte » onClick= »handlerText »> reset onFocus="this.value='que je tape vite!'">
</FORM>
Tableau - -
Remarque - -
Propriété name – value + type (V3) -
Méthode click + blur – focus (V3) -
Se rapporte à form -
Evénement onClick -

Page 72 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

9.3.33 Textarea 9.3.34 Window

Nom Définition Voir aussi Nom Définition Voir aussi

textarea Zone de saisie de texte sur plusieurs lignes dans - window fenêtre à l'intérieur du navigateur ou fenêtre -
un formulaire indépendante
Syntaxe <TEXTAREA NAME= »Nom » ROWS= »integer » password Syntaxe windowVar = window.open("URL", "Nom" document
COLS= »integer » textToDisplay
onBlur= »handlerText »
– form – [,"options"]) - frame
onChange= »handlerText » string – Tableau - -
onFocus= »handlerText » text Propriété defaultStatus - frames - length - name - parent - -
onSelect= »handlerText »>texte</TEXTAREA>,
self - status - top – window
Tableau - - Méthode alert - close - confirm - open - prompt - setTimeout -
Propriété - - – clearTimeout
Méthode focus - blur - select+ type (V3) - Se rapporte à - -
Se rapporte à form - Evénement onUnload -
Evénement onBlur – onChange – onFocus – onSelect - Exemple <FORM><INPUT TYPE="button" VALUE="Abonnement"
Exemple <FORM> NAME="bouton_abonnement" onClick="window.open
<TEXTAREA NAME="texte" COLS=27 ROWS=4 ('suscribe.htm', 'Abonnement',
onFocus="this.value='Cette aide est 'scrollbars=yes,status=yes,width=500,height=300
vraiment\ntrès bien faite,\ndire que je ')">
viens d\'acheter\nun bouquin complètement </FORM>
nul'"> Remarque - -
</TEXTAREA>
</FORM>
Remarque - -

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 73
Références

Nom Propriété Syntaxe Description

defaultSelected option nom.options[index].defaultSelec retoune une valeur
9.4 Leurs Propriétés ted indiquant l'état par
défaut d'un objet
sélectionable
Nom Propriété Syntaxe Description defaultStatus window windowReference.defaultStatus est le message par
action form nomdeforme.action détermine l'URL défaut affiché dans
appelée après la région de statut de
appui sur le bouton votre navigateur
Submit defaultValue hidden,pa nomdechamp.defaultValue chaîne de caractères
alinkColor document document.alinkColor détermine la ssword, indiquant la valeur
couleur des liens text, par défaut d'une
visités textarea zone texte, mot de
appCodeName navigator navigator.appCodeName donne le nom de passe ou zone texte
code du navigateur E Math Math.E Constante e (environ
(par exemple 2.718)
Mozilla pour encoding form nom.encoding chaîne spécifiant
Netscape) l'encodage MIME
appName navigator navigator.appName donne le nom du dans une forme c'est
navigateur (par à dire la valeur
exemple Netscape) ENCTYPE
appVersion navigator navigator.appVersion donne une chaîne fgColor document document.fgColor chaîne spécifiant la
de caractères couleur du texte d'un
contenant la document
version, la plate- getselection document document.getselection Renvoie le texte
forme et la langue sélectionné dans le
du navigateur navigateur
bgColor document document.bgColor donne la couleur hash link, location.hash chaîne commençant
de fond du location par le caractère # qui
document spécifie une ancre
checked checkbox, nomcheckbox.checked renvoit la valeur de dans une URL
radio nomradio[index].checked l'objet True/False host link, location.host chaîne de caractères
cookie document document.cookie permet d'accéder à location déterminant la partie
des variables host d'une URL
internes (dates
d'expiration du
cache etc )
defaultChecked checkbox, nomcheckbox.defaultChecked indique l'état par
radio nomradio[index].defaultChecked défaut de l'objet
concerné

Page 74 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

Nom Propriété Syntaxe Description Nom Propriété Syntaxe Description

Hostname link , location location.hostname chaîne de name objet objet.name window.name est le
caractères nom de la fenêtre
déterminant la partie parent window frame Parent.methodName c'est la fenêtre
hostname d'une contenant les frames
URL pathname location link location.pathname C'est la partie
href link , location Location.href chaîne de répertoire d'un URL
caractères preference navigator navigator.preference permet de connaître
déterminant l'URL ou de positionner les
index option nom.options[indexValue].ind entier représentant préférences du
ex l'index d'une option navigateur. Voir
de l'objet sélectionné éléments avancés
lastModified document document.lastModified la date de dernière de Javascript
modification d'un PI Math Math.PI le nombre PI
document (3.14159)
length frame, objet.length longueur de l'objet port location location.port le port de l'URL
history, radio, ou nombre d'objet protocol location location.protocol protocole de l'URL
select, string, (http, ftp etc..)
window, referrer document document.referrer l'URL du document
anchors, appelant le lien
elements, cliqué
forms, search location location.search chaîne commençant
frames, links, par un point
options d'interrogation et
linkColor document document.linkColor Spécifie la couleur correspondant aux
des liens informations d'une
Hypertextes requête
LN2 Math Math.LN2 Logarithme de 2
(0,693) selected options objet.options[index].selecte booléen indiquant si
LN10 Math Math.LN10 Logarithme de 10 d un objet est
(2,302) sélectionné ou non
location document document.location l'URL complet du selectedIndex selectoptions nom.selectedIndex, donne le rang de
document objet.options.selectedIndex l'objet sélectionné
LOG2E Math Math.LOG2E Logarithme base 2 dans une liste
de e (1.442) self window, self.méthodew désigne la frame
LOG10E Math Math.LOG10E Logarithme base de frame ou la fenêtre
10 de e (0,434) courante
method form nom_de_form.method spécifie la SQRT1_2 Math Math.SQRT1_2 racine carrée de
méthode 1/2 (0,707)
(POST,GET) SQRT2 Math Math.SQRT2 racine carrée de 2
utilisée pour (1,414)
envoyer un
formulaire sur un
serveur
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 75
Références

Nom Propriété Syntaxe Description

Status window fenêtre.status c'est la fenêtre
status en bas à
droite de Netscape
target form, link form.target, lien.target c'est le nom de la
,location fenêtre qui va
afficher le résultat
d'un clic sur un
URL ou un bouton
de soumission
text options nom.options[index].text texte suivant une
balise <OPTION>
dans une sélection
title document document.title c'est le titre d'un
document
top window top.propriété c'est la fenêtre de
plus haut niveau,
c'est à dire celle
initiale
userAgent navigator navigator.userAgent nom d'agent du
logiciel de
navigation
value button, objet.value valeur de l'objet
checkbox,
hidden,
password,
radio, reset,
submit, text,
textarea,
options
vlinkColor document docuement.vlinkColor couleur des liens
visité
window window window.propriété c'est la fenêtre
courante

Page 76 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

• onKeyDown : (version 1.2) se produit quand une touche du clavier est

lachée.
9.5 Leurs événements • onKeyPress : (version 1.2) se produit quand une touche du clavier a
été utilisée
• onKeyUp : (version 1.2) se produit quand une touche du clavier est
appuyée
• onBlur : se produit quand un textarea, un text ou un select perd la
main sur les entrées clavier •onMouseDown : (version 1.2) se produit quand une touche de la
souris est lachée.
• onChange : se produit quand un textarea, un text ou un select est
modifié par l'utilisateur •onMouseMove : (version 1.2) se produit quand le curseur de la souris
est bougé
• onClick : se produit quand un button, checkbox, radio, link, reset ou
un submit reçoit un click de la souris •onMouseUp : (version 1.2) se produit quand un bouton de la souris
est rélaché
• onFocus : se produit quand un textarea, un text ou un select prend la
main sur les entrées clavier •onMove : (version 1.2) se produit quand une fenêtre est dépacée
• onLoad : se produit quand le navigateur a fini de charger une fenêtre •onResize : (version 1.2) se produit quand une fenêtre subit un
ou toutes les frames d'un FRAMESET. L'événement changement de taille
• onLoad se positionne dans la balise BODY ou dans la balise
FRAMESET
• onMouseOver : se produit quand la souris passe sur un link ou un
layer (version 1.2)
• onSelect textarea, un text : se produit quand un textarea, un text ou
un text est sélectionné.
• onSubmit : se produit quand une form est soumise au serveur par
l'appui du bouton Submit.
• onUnload :se produit quand un document est quitté. L'événement
onUnload se positionne dans la balise BODY ou dans la balise
FRAMESET
• onAbort : (version 1.1) se produit quand l'utilisateur avorte le
chargment d'une image
• onError : (version 1.1) se produit quand le chargement d'une page ou
d'une image produit une erreur.
• onMouseout : (version 1.1) se produit quand la souris quitte une zone
area , un link ou un layer (version 1.2)
• onReset : (version 1.1) se produit quand on clique sur le bouton reset
d'un formulaire
• onDblClick : (version 1.2) se produit quand on produit un double click
sur la souris (ne fonctionne pas sur Macintosh ou le double clic a sa
signification propre)
• onDragDrop : (version 1.2) se produit lorsqu'on fait un glisser lacher
vers le navigateur, par exemple pour ouvrir une page HTML depuis
son disque dur.
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 77
Références

Nom Dépend de Syntaxe Description

9.6 Leurs méthodes bold string chaine.bold() positione le couple
de balises BOLD
(gras)
Nom Dépend de Syntaxe Description ceil Math Math.ceil(nombre) donne l'entier le
abs Math Math.abs(nombre) donne la valeur plus proche par
absolue d'un valeur supérieure
nombre charAt string chaîne.charAt(index) retourne le
acos Math Math.acos(nombre) Donne l'arc caractère index de
cosinus en radian la chaîne
d'un Nombre entre (commençant à 0)
-1 et 1 (0 sinon) clear document document.clear() vide de contenu de
alert window alert(message) Affiche une fenêtre la fenêtre
d'alerte et un clearTimeout frame - clearTimeout(timeoutID) détruit la
bouton OK window temporisation mise
anchor string text.anchor(nom) Crée un signet par setTimeout
dans la page click button - élément.click() simule un click sur
HTML checkbox - l'élément donné
asin Math Math.asin(nombre) Retourne l'arc- radio - reset
sinus en radian - submit
d'un Nombre close document document.close() termine l'émission
compris entre -1 et (document) des données, le
1 (0 sinon) navigateur affiche
atan Math Math.atan(nombre) Retourne l'arc alors un message
tangente en radian de fin de réception.
d'un nombre entre close (window) window windowReference.close() ferme ma fenêtre
-pi/2 et pi/2 spécifiée
back history history.back() revient d'un niveau concat array tableau1.concat(tableau2) concatène le
dans la hiérarchie tableau 2 à la
des pages lues suite du tableau 1
big string chaine.big() positionne le confirm window confirm(message) demande la
couple de balises confirmation d'une
BIG (gros action; renvoit 1 si
caractères) autour le bouton OK est
du texte sélectionné et 0 si
blink string chaine.blink() positionne le c'est le bouton
couple de balises annuler qui l'est.
BLINK (clignotant) cos Math Math.cos(nombre) Retourne le
autour du texte cosinus d'un angle
blur password - password.blur() - select.text() - Retire le focus de en Radian
select - text text.blur() - textarea.blu() l'objet sélectioné
-textarea

Page 78 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

Nom Dépend de Syntaxe Description Nom Dépend de Syntaxe Description

escape string escape(chaine) retoune en forward history history.forward() donne la page
caractères ASCII suivante dans la
des caractères hierarchie des pages
ISO Latin-1 (& lues et gardées en
devient %26) mémoire du
eval interne eval(chaine) évalue les navigateur
expressions dans getDate Date Date.getDate() Retourne le jour du
une chaîne de mois de la date
caractères et Concernée (entier
renvoie la valeur de 1 à 31)
correspondante getDay Date date.getDay() retourne le jour de la
exp Math Math.exp(nombre) retourne la valeur semaine de la date
exponentielle concernée
d'une valeur (0=dimanche)
fixed string chaine.fixed() positionne le getHours Date date.getHours() retourne l'heure de
couple de balises la journée de la date
TT (fixe) autour du concernée (0 à 23)
texte getMinutes Date date.getMinutes() retourne la minute
floor Math floor(nombre) donne l'entier le de l'heure de la date
plus proche par concernée (0 à 59)
valeur inférieure getMonth Date Date.getMonth() Retourne le mois de
focus password - objet.focus() Met le focus sur la date concernée (0
select - text l'objet concerné à 11)
- textarea getSeconds Date Date.getSeconds() Retourne la seconde
fontcolor string chaine.fontcolor(couleur) donne la couleur de la minute de la
donnée à la chaîne date concernée (0 à
de caractères 59)
concernée getTime Date Date.getTime() Retourne l'heure
(équivalent à dans la valeur
<FONT Numérique
COLOR=couleur> correspondante
) getTimezoneO Date date.getTimezoneOffset() donne la différence
fontsize string chaine.fontsize(taille) donne la taille de ffset (en minutes) entre
police donnée à la l'heure courante et
chaîne de l'heure GMT
caractères getYear Date date.getYear() donne le nombre
concernée d'années écoulées
(équivalent à depuis 1900
<FONT
size=taille>)

Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 79
Références

Nom Dépend de Syntaxe Description Nom Dépend de Syntaxe Description

go history history.go(delta | location) recherche la page number - Number (objet) Convertit un objet en
dans le cache avec un entier (par
des valeurs entières exemple une date)
positives (en avant) open - document.open(["mimeType"] ouvre un stream
ou négatives (document) ) destiné à être
(arrière) ou par leur alimenté par les
URL (location) méthodes write et
indexOf string chaine1.indexOf(chaine2,[dep retourne la position writeln. Le type du
uis]) de chaîne2 stream peut être
recherchée dans text/html, text/plain,
chaine1 à partir de image/gif,
la position depuis(-1 image/jpeg, image/x-
si pas trouvé) bitmap, plugIn
isNaN interne isNaN(valeur) sur les plates-formes open (window) window [windowVar = ouvre une nouvelle
Unix teste si la ][fenetre].open(URL, nom, fenêtre avec les
valeur est un entier options) options suivantes
italics string chaine.italics() positionne le couple (séparées par ,)
de balises I (italique) toolbar[=yes|no]|[=1|
autour du texte 0],
lastIndexOf string chaine1.lastIndexOf(chaine2, retourne la dernière location[=yes|no]|[=1
[depuis]) occurrence de |0],
chaine2 dans directories[=yes|no]|[
chaine1 à partir de =1|0],
la position depuis status[=yes|no]|[=1|0
link string texte.link(URL) crée un lien ],
hypertexte vers URL menubar[=yes|no]|[=
à partir de texte 1|0],
log Math Math.log(nombre) calcule le log de scrollbars[=yes|no]|[
nombre =1|0],
max Math max(nombre1, nombre2) retourne le resizable[=yes|no]|[=
maximum entre 1|0], width=pixels,
deux nombres height=pixels
min Math min(nombre1, nombre2) retourne le minimum parse Date Date.parse(chainedate) retourne le nombre
entre deux nombres de millisecondes
depuis le 01/01/1970

Page 80 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript
Références

(0=dimanche)
Nom Dépend de Syntaxe Description Nom Dépend de Syntaxe Description
parseFloat interne parseFloat(chaine) analyse une setHours Date Date.setHours(valeur) Positionne l'heure
chaîne de de la journée de la
caractères et date concernée (0
retourne sa valeur à 23)
virgule flottante setMinutes Date date.setMinutes(valeur) positionne la
parseInt interne parseInt(chaine [,base]) retourne la valeur minute de l'heure
entier de la chaîne de la date
de caractères dans concernée (0 à 59)
la base indiquée setMonth Date date.setMonth(valeur) positionne le mois
pop array nomdutableau.pop() supprime le de la date
dernier élément du concernée (0 à 11)
tableau et retourne setSeconds Date Date.setSeconds(valeur) positionne la
sa valeur seconde de la
Pow Math pow(base, exposant) retourne base minute de la date
puissance concernée (0 à 59)
exposant setTime Date Date.setTime(valeur) Positionne l'heure
prompt window prompt(message, affiche une fenêtre dans la valeur
[valeurpardefaut]) de saisie avec un Numérique
message et la correspondante
valeur par défaut setTimeout frame - valeur=setTimeout(expression, évalue expression
initialisée window msec) après un delai
push array nomdutableau.push(element1,.. ajoute les d'attente de
,elementn) éléments donnés msec.valeur
en argument au permet d'arrêter
tableau l'évaluation avec la
random Math Math.random() Retourne une méthode
valeur aléatoire clearTimeout
entre 0 et 1 setYear Date date.setYear(valeur) positionne le
round Math round(nombre) retourne l'entier le nombre d'années
plus proche de la écoulées depuis
valeur donnée en 1900
argument shift array nomdutableau.shift() retourne le
select password - objet.select() sélectionne la premier élément
text - zone de saisie de du tableau et
textarea l'objet supprime celui-ci
correspondant du tableau
setDate Date Date.setDate(valeur) Positionne le jour sin Math Math.sin(angle) retourne le sinus
du mois de la Date de l'angle donné
concernée (entier en radian
de 1 à 31)
setDay Date Date.setDay(valeur) positionne le jour
de la semaine de
la date concernée
Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript Page 81
Références

Nom Dépend de Syntaxe Description Nom Dépend de Syntaxe Description

small string chaine.small() positionne le toGMTString Date Chainedate.toGMTString() Convertit une date
couple de balises en chaîne de
SMALL (petites Caractères en
lettres) autour du suivant les
Texte conventions GMT
sqrt Math Math.sqrt(nombre) Retourne la racine (Mar, 01 Mar 1996
carrée de 20:00:00 GMT)
Math.sqrt(number) toLocaleString Date chainedate.toLocaleString() convertit une date
strike string chaine.strike() positionne le en chaîne de
couple de balises caractères en
STRIKE (biffé) suivant les
autour du texte conventions locales
string - string (objet) convertit un objet (03/01/96 20:00:00)
en chaîne de toLowerCase string chaine.toLowerCase() convertit la chaine
caractères ( par concernée en
exemple une date) minuscule
sub string chaine.sub() positionne le toUpperCase string chaine.toUpperCase() convertit la chaine
couple de balises concernée en
SUB(indice) autour majuscule
du texte unescape - unescape(chaine) retourne la valeur
submit form formulaire.submit() provoque la ASCII d'une valeur
soumition du donnée en Ox..
formulaire au (hexadécimal) ou en
serveur http %.. (décimale)
substring string chaine.substring(position1, retourne la chaine unshift array nomdutableau.unshift(elemen ajoute les éléments
position2) de caractères t1,..,element2) donnés en argument
commençant à la au tableau
position1 et UTC Date Date.UTC(an, mois, jour [, h] Retourne le nombre
finissant à la [, min] [, sec]) de secondes
position2 Ecoulées depuis le
sup string chaine.sup() positionne le 01/01/1970 0h0mn
couple de balises write document write(chaine [,chaine], écrit les chaines
SUP (exposant) ...[,chaine]) spécifiées dans le
autour du texte document
tan Math Math.tan(nombre) Retourne la writeln document writeln(chaine [,chaine], écrit les chaines
tangente du ...[,chaine]) spécifiées suivies
nombre Donné en d'un retour ligne
radian dans le document

Page 82 Institut Universitaire de Technologie d’Amiens • Support de cours, Année 2002/2003 • JavaScript

Vous aimerez peut-être aussi

JavaScript L Essentiel Du Code Et Des Commandes Par La Grande Bibliotheque N
Pas encore d'évaluation
JavaScript L Essentiel Du Code Et Des Commandes Par La Grande Bibliotheque N
280 pages
Cours Javascript Terminale
Pas encore d'évaluation
Cours Javascript Terminale
6 pages
Cours 3 - Javascript & AJAX
Pas encore d'évaluation
Cours 3 - Javascript & AJAX
49 pages
JavaScript COURS
Pas encore d'évaluation
JavaScript COURS
68 pages
JavaScript_L_Essentiel_du_code_et_des_commandes_par_La_grande_bibliotheque_numerique.pdf (e-book)
Pas encore d'évaluation
JavaScript_L_Essentiel_du_code_et_des_commandes_par_La_grande_bibliotheque_numerique.pdf (e-book)
280 pages
Poly-Pro-Web
Pas encore d'évaluation
Poly-Pro-Web
103 pages
Js FR PDF
Pas encore d'évaluation
Js FR PDF
56 pages
Dynamisez Vos Sites Web Avec Javascript
100% (2)
Dynamisez Vos Sites Web Avec Javascript
514 pages
Js learn
Pas encore d'évaluation
Js learn
38 pages
Screenshot 2024-05-16 at 10.05.02 PM
Pas encore d'évaluation
Screenshot 2024-05-16 at 10.05.02 PM
35 pages
COURS DE JS LES BASES
Pas encore d'évaluation
COURS DE JS LES BASES
33 pages
Yass-RSI-3
Pas encore d'évaluation
Yass-RSI-3
40 pages
SUPPORT COURS JAVASCRIPT
Pas encore d'évaluation
SUPPORT COURS JAVASCRIPT
37 pages
Programmation Web Javascript
Pas encore d'évaluation
Programmation Web Javascript
150 pages
Cours2 JS JQuery
Pas encore d'évaluation
Cours2 JS JQuery
139 pages
javascript_introduction_f
Pas encore d'évaluation
javascript_introduction_f
39 pages
hiba js
Pas encore d'évaluation
hiba js
15 pages
Programmation Web Javascript
Pas encore d'évaluation
Programmation Web Javascript
150 pages
A Decouverte Langage Javascript
Pas encore d'évaluation
A Decouverte Langage Javascript
54 pages
Course Java Script
Pas encore d'évaluation
Course Java Script
37 pages
Resume_JS_CDL
Pas encore d'évaluation
Resume_JS_CDL
11 pages
JavaScript
Pas encore d'évaluation
JavaScript
21 pages
Introduction à JavaScript
Pas encore d'évaluation
Introduction à JavaScript
5 pages
cours java script PTI2025
Pas encore d'évaluation
cours java script PTI2025
10 pages
Javascript 1
Pas encore d'évaluation
Javascript 1
62 pages
0569 Programmation Web Cote Client Avec Javascript Et Jquery
Pas encore d'évaluation
0569 Programmation Web Cote Client Avec Javascript Et Jquery
147 pages
Cours de JavaScript
Pas encore d'évaluation
Cours de JavaScript
7 pages
ch-4-javascript
Pas encore d'évaluation
ch-4-javascript
23 pages
LE JAVASCRIPT
Pas encore d'évaluation
LE JAVASCRIPT
6 pages
Développement Web Full Stack JS: Niveau 1: Orange Digital Center
100% (1)
Développement Web Full Stack JS: Niveau 1: Orange Digital Center
96 pages
Js Cours
Pas encore d'évaluation
Js Cours
29 pages
9782409016219
Pas encore d'évaluation
9782409016219
18 pages
Document sans titre (21)
Pas encore d'évaluation
Document sans titre (21)
9 pages
Cours Informatique S2 Version Complete PDF
Pas encore d'évaluation
Cours Informatique S2 Version Complete PDF
21 pages
Cours TP JavaScript 3STI
Pas encore d'évaluation
Cours TP JavaScript 3STI
13 pages
Javascript - 01
Pas encore d'évaluation
Javascript - 01
24 pages
Note Cours Js
Pas encore d'évaluation
Note Cours Js
5 pages
Cours Javascript
Pas encore d'évaluation
Cours Javascript
50 pages
File 36
Pas encore d'évaluation
File 36
3 pages
Résumé JS LBC
Pas encore d'évaluation
Résumé JS LBC
12 pages
Chapitre_5 Introduction à JavaScript
Pas encore d'évaluation
Chapitre_5 Introduction à JavaScript
5 pages
Explication Sur Le JavaScript
Pas encore d'évaluation
Explication Sur Le JavaScript
9 pages
Chapitre 3
Pas encore d'évaluation
Chapitre 3
12 pages
Chapitre n1
Pas encore d'évaluation
Chapitre n1
7 pages
Chapitre 8 - Cours de JavaScript - 2020 - 2021 (Compatibility Mode)
Pas encore d'évaluation
Chapitre 8 - Cours de JavaScript - 2020 - 2021 (Compatibility Mode)
61 pages
Le Javascript Resume
100% (2)
Le Javascript Resume
27 pages
Diu 2
Pas encore d'évaluation
Diu 2
38 pages
Chapitre2-Web Dynamique PDF
100% (1)
Chapitre2-Web Dynamique PDF
73 pages
cours algo FSBM
Pas encore d'évaluation
cours algo FSBM
78 pages
HTML JavaScript 3
Pas encore d'évaluation
HTML JavaScript 3
280 pages
Chapitre 4 Le Langage JavaScript PDF
Pas encore d'évaluation
Chapitre 4 Le Langage JavaScript PDF
9 pages
TechWeb 09-12-2014
Pas encore d'évaluation
TechWeb 09-12-2014
48 pages
Pixel-Junior 3college
Pas encore d'évaluation
Pixel-Junior 3college
56 pages
Javascript
Pas encore d'évaluation
Javascript
24 pages
Agorithmique_Parts_I_II
Pas encore d'évaluation
Agorithmique_Parts_I_II
58 pages
séance3[1]
Pas encore d'évaluation
séance3[1]
68 pages
Java Script
Pas encore d'évaluation
Java Script
4 pages
Logiciels de Simulation
Pas encore d'évaluation
Logiciels de Simulation
68 pages
Cours Visual Basic Isdr Lubao
Pas encore d'évaluation
Cours Visual Basic Isdr Lubao
73 pages
CoursJavaScript Id1783 PDF
Pas encore d'évaluation
CoursJavaScript Id1783 PDF
25 pages
GE S2 M5.3 Initiation Prog Graphique CRS Hanafi
100% (1)
GE S2 M5.3 Initiation Prog Graphique CRS Hanafi
27 pages
Cours DWM-2 2021 (Chap 1) - Intro-JS
Pas encore d'évaluation
Cours DWM-2 2021 (Chap 1) - Intro-JS
14 pages
Aide Memoire PIC
100% (1)
Aide Memoire PIC
11 pages
1 - Algorithmique PDF
100% (1)
1 - Algorithmique PDF
102 pages
3-Diagrammes D'interactions
Pas encore d'évaluation
3-Diagrammes D'interactions
33 pages
TD Programmation Embarqué 1
Pas encore d'évaluation
TD Programmation Embarqué 1
4 pages
SE COURS ++
Pas encore d'évaluation
SE COURS ++
37 pages
Exemple de Mémoire en Didactique de L'algorithmique
Pas encore d'évaluation
Exemple de Mémoire en Didactique de L'algorithmique
91 pages
INF1007 - Guide Pycharm Git Debugging
Pas encore d'évaluation
INF1007 - Guide Pycharm Git Debugging
31 pages
Conv Algo & Impl Python Nov 2021 V1.0 Version Scientifique
Pas encore d'évaluation
Conv Algo & Impl Python Nov 2021 V1.0 Version Scientifique
14 pages
Base en Python
Pas encore d'évaluation
Base en Python
40 pages
Course Content
Pas encore d'évaluation
Course Content
3 pages
PHP Course1
Pas encore d'évaluation
PHP Course1
50 pages
Multiprog 2
Pas encore d'évaluation
Multiprog 2
65 pages
Repter
Pas encore d'évaluation
Repter
8 pages
Rapport de Stage
Pas encore d'évaluation
Rapport de Stage
42 pages
Support de Cours Actualisé Structure de Données Avancées
Pas encore d'évaluation
Support de Cours Actualisé Structure de Données Avancées
58 pages
Aide 1ère A 2024
Pas encore d'évaluation
Aide 1ère A 2024
2 pages
Atelier ABAP
Pas encore d'évaluation
Atelier ABAP
94 pages
Niveau 1 - Boucles - Répéter N Fois - Exercices 5e - Kwyk
Pas encore d'évaluation
Niveau 1 - Boucles - Répéter N Fois - Exercices 5e - Kwyk
3 pages
Larp
Pas encore d'évaluation
Larp
7 pages
ALGORITHME
Pas encore d'évaluation
ALGORITHME
2 pages
Université Sultan Moulay Slimane: Examen Informatique (Compilation)
Pas encore d'évaluation
Université Sultan Moulay Slimane: Examen Informatique (Compilation)
2 pages
Atelier 1
Pas encore d'évaluation
Atelier 1
2 pages
Mon compagnon de rédaction scientifique
D'Everand
Mon compagnon de rédaction scientifique
Sylvie Jutras
Pas encore d'évaluation
SE SE DEVELOPPER COMME PROFESSIONNEL DANS LES PROFESSIONS ADRESSEES A AUTRUI
D'Everand
SE SE DEVELOPPER COMME PROFESSIONNEL DANS LES PROFESSIONS ADRESSEES A AUTRUI
Joséphine Mukamurera
Pas encore d'évaluation
La méthodologie de l'entrainement tactique du football complexe: La MET FC
D'Everand
La méthodologie de l'entrainement tactique du football complexe: La MET FC
Denis Valour
Pas encore d'évaluation
Analyse Mathématique pour l'ingénieur: Analyse Mathématique pour l'ingénieur, #1
D'Everand
Analyse Mathématique pour l'ingénieur: Analyse Mathématique pour l'ingénieur, #1
bekkai Messirdi
Pas encore d'évaluation
Robots financiers et I.A.: Aspects pratiques et éthiques
D'Everand
Robots financiers et I.A.: Aspects pratiques et éthiques
Michel Mailloux
Pas encore d'évaluation
Manuel de soutien et d'accompagnement en mathématiques: Terminale S - édition 2017
D'Everand
Manuel de soutien et d'accompagnement en mathématiques: Terminale S - édition 2017
Patrice Berrini
Pas encore d'évaluation