Cours pdf Ajouter du code JavaScript à un document HTML – Cours et formation gratuit

(1)

Institut Universitaire de Technologie d’Amiens • Support de cours, 1999/2000 • JavaScript

JavaScript

(2)

(3)

Table Des Matières

1 - TOUR D'HORIZON ______________________________1

1.1 - Introduction ...1

1.1.1 - Historique ...1

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

1.4.1 - Types booléen, nombre et chaîne ...2

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

1.7.3 - Les opérateurs sur chaînes de caractères ...4

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

1.7.7 - Précédence des opérateurs ...5

1.7.8 - L’opérateur Typeof...6

1.8 - Contrôle de flux ...6

1.8.1 - Les blocs d'instructions : { instruction ... instruction }...6

1.8.2 - L'instruction conditionnelle : if (condition) Statement1 else Statement2 6 1.8.3 - Boucle For : for(initialisation; rebouclage; mise_a_jour) statement...7

1.8.4 - Boucle while : while(condition) statement ...7

1.8.5 - L’instruction continue ...8

1.8.6 - L’instruction break ...8

1.8.7 - Les fonctions : function nom(paramètres){corps}...8

1.8.8 - Quelques notions sur la récursivité...9

1.9 - Les objets ...10

1.9.1 - Qu’est-ce qu’un objet ? ...10

(4)

1.9.2 - Les méthodes ... 10

1.9.3 - Prototypes et constructeurs ... 11

1.9.4 - L’instruction For … in … ... 11

1.9.5 - L’instruction With …... 11

2 - JAVASCRIPT ET LES NAVIGATEURS ____________ 13

2.1 - Ajouter du code JavaScript à un document HTML ... 13

2.1.1 - En utilisant la balise <SCRIPT>... 13

2.1.2 - Le code dans un fichier source... 14

2.1.3 - En utilisant les événements... 15

2.1.4 - Avec formulaire ... 15

2.1.5 - Avec hypertexte ... 15

2.2 - Les événements temporels : ... 16

2.3 - Des scripts dans des documents HTML... 16

2.4 - Les entités JavaScript... 17

2.5 - Les URL JavaScript ... 17

2.6 - Les feuilles de styles JavaScript (JSSS) ... 17

3 - FENÊTRES ET FRAMES _______________________ 19

3.1 - Les fenêtres Navigateur ... 19

3.2 - Les fenêtres popup... 19

3.2.1 - Une boite d’alerte : ... 19

3.2.2 - Une boite de confirmation : ... 20

3.2.3 - Une boite de saisie : ... 20

3.3 - Les frames ... 20

3.4 - L’Historique... 22

4 - LES FORMULAIRES ___________________________ 23

4.1 - Description ... 23

4.2 - Objets formulaires... 23

4.2.1 - Présentation des objets formulaires ... 24

4.2.2 - Nommer les éléments de formulaire ... 25

4.2.3 - Evénements associés aux formulaires... 25

4.3 - Les différents types de formulaires...25

4.3.1 - Formulaires de contrôle et de calcul...25

4.4 - Envoyez vos données et oubliez les ...26

4.5 - Le « panier à provisions »...26

5 - NOTIONS AVANCÉES __________________________31

5.1 - Les MAP et ISMAP en JavaScript ...31

5.2 - Les cookies en JavaScript ...32

5.3 - Teinte des propriétés...32

5.4 - Les types MIME ...33

5.5 - Les Plug-Ins installés sur le navigateur ...33

5.6 - Les préférences du navigateur ...34

6 - RÉFÉRENCES ________________________________35

6.1 - Les objets de base ...35

6.2 - Les tableaux prédéfinis ...36

6.3 - Les Objets ...37

6.3.1 - Anchor ...37

6.3.2 - Applet ...37

6.3.3 - Area ...37

6.3.4 - Array...38

6.3.5 - Booléen...38

6.3.6 - Boutons...38

6.3.7 - Checkbox...38

6.3.8 - Date ...39

6.3.9 - document ...39

6.3.10 - Element array...39

6.3.11 - Event...40

6.3.12 - FileUpload ...40

6.3.13 - Form ...41

6.3.14 - Frames ...41

6.3.15 - Fonction ...41

6.3.16 - Hidden ...42

6.3.17 - History ...42

(5)

6.3.18 - Image ... 42

6.3.19 - Link ... 43

6.3.20 - Location ... 43

6.3.21 - Math ... 43

6.3.22 - Navigator ... 43

6.3.23 - Number ... 44

6.3.24 - Option ... 44

6.3.25 - Password ... 44

6.3.26 - Plugin ... 44

6.3.27 - Radio ... 45

6.3.28 - Reset... 45

6.3.29 - Select... 45

6.3.30 - String... 46

6.3.31 - Submit ... 46

6.3.32 - Text ... 46

6.3.33 - Textarea ... 47

6.3.34 - Window... 47

6.4 - Leurs Propriétés ... 48

6.5 - Leurs événements ... 51

6.6 - Leurs méthodes... 52

(6)

(7)

1 - Tour d'horizon

1.1 - Introduction

Sous ce nom, certes trompeur, se cache un langage qui n'a rien à voir avec le langage . Certains vous diront que JavaScript c'est du light, que 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.

1.1.1 - Historique

JavaScript, premier langage de script sur le web (il en existe d'autres aujourd'hui, comme VBScript), fut développé par la société Netscape^*, et 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 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 navigateur (pour la suite de ce cours, vérifiez qu'elle soit bien activée).

(8)

1.1.2 - Survol rapide du langage.

• Les principales caractéristiques de ce langage sont les suivantes :

• quelques types de base : les nombres (pas de distinctions apparentes entre entiers et flottants), les chaînes de caractères, les booléens, le type référence nulle.

• langage faiblement typé : une variable peut à tout moment changer de type.

• syntaxe proche de celle du langage C : quasiment les mêmes opérateurs, les mêmes instructions.

• le langage est basé sur un modèle objets rudimentaire : il n'y a pas de notion de classe, pas d'héritage.

• quelques objets de bases : manipulation de dates, de tableaux, calcul mathématiques.

• pas de possibilités d'utiliser les entrées/sorties (sauf pour le clavier et l'écran), du moins du point de vue des clients. Pas d'accès au réseau non plus, du moins du point de vue des clients.

1.2 - Un mot sur les entrées/sorties

JavaScript s’en remet à l’hôte qui l’héberge pour tous ses besoins d’entrées/sorties.

L’exemple suivant permet d’afficher la phrase « Bonjour tout le monde ! » sur une seule ligne à l’écran à l’intérieur d’une page HTML :

<HTML>

<BODY>

document.write('Bonjour le monde !\n');

</SCRIPT>

</BODY>

</HEAD>

1.3 - Les variables et les données

Vous pouvez stocker des informations dans les scripts JavaScript. En voici quelques exemples :

var nouvelle_valeur;

var cout = null;

var nouveau_prix = 10.95;

adresse = « 23 Petite Rue »;

var resultat = ‘Resultat inconnue’;

resultat = true;

resultat = 1.08e+23;

resultat = 0x2Fe3;

resultat = 0377;

nom = Jimmy Zed ;

var premier = 1, second = 2, dernier = 10;

La déclaration des variables se fait par le mot clé var. Le type de la variable, lui, n'importe pas : une variable peut à un instant être d'un type, puis à l'instant suivant être d'un autre type. Le type de la variable est déterminé par l'affectation .

var toto="Coucou"; // toto est de type chaîne de caractères.

var toto=10; // toto prend maintenant le type nombre.

var tata; // tata est une variable dont le type n'a // pas encore été spécifié

Remarques très importantes :

• le langage fait la différence entre les lettres majuscules et les lettres minuscules. En conséquence, le mot var et différent du mot Var, ou du mot VAR. Faites donc attention en écrivant les mots clés du langage. Pour la même raison, deux variables sont différentes si une seule des lettres diffère.

• 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 encore déclarée, elle le devient immédiatement. Toutefois, il est préférable d’utiliser le mot clé var.

1.4 - Les types primitifs

Les types primitifs sont de simples blocs de construction qui servent à l’assemblage de toutes les données en JavaScript.

1.4.1 - Types booléen, nombre et chaîne

Le type booléen (boolean) ne peut prendre que deux valeurs : true ou false.

Le type nombre (number) est utilisé pour tous les types de nombres. On ne distingue donc pas les entiers, les réels et les octets. La syntaxe utilisée est celle de C. Pour les entiers, plusieurs bases sont possibles : 10, 16 (0x10 ==16, 0X14 ==20) ou 8 (010 ==8, 01 ==1). Pour les réels, la notation exponentielle est possible. Les

(9)

nombres réels suivants sont bien 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 pas de type pour représenter un seul caractère. comme en C, une chaîne 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 caractère backslash (\). Les caractères spéciaux de C restent disponibles (\n pour le retour chariot, \t pour une tabulation ...). Voici quelques exemples de chaînes correctement construites : "Essai",

">>\"<<" et 'A\tB'.

1.4.2 - Nombres particuliers, types null et indéfini

JavaScript reconnaît trois nombres particuliers dont les valeurs Infinity, -Infinity et NaN. De même, il existe deux types particuliers appelés Null et Undefined.

1.5 - Les tableaux

var totaux_mensuels = new Array(12);

totaux_mensuels[3] = 1999.95;

totaux_mensuels[4] = 'Pas de ventes';

var a=4;

document.write(totaux_mensuels[a]);

document.write(totaux_mensuels.length);

document.write(totaux_mensuels);

var jours = new Array("Dim","Lun","Mar","Mer","Jeu","Ven","Sam");

Pour déclarer un tableaux, on utilise une instanciation de l’objet Array. La 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 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 nombres d'éléments constitutifs du tableau. Soit tab une variable de nature tableau.

Alors l'expressions tab.length vous rend le nombres d'éléments de ce dernier.

Dans un élément de tableau, on peut aussi stocker un autre tableau. Un tableau de tableau peut être considéré comme un tableau multidimensionnel, qui trouve de nombreuses applications notamment en mathématique :

var matrice = new Array(2);

matrice[0] = new Array(2);

matrice[1] = new Array(2);

matrice[0][0] = 1;

matrice[1][0] = 0;

matrice[0][1] = 0;

matrice[1][1] = 1;

1.6 - Commentaires et fin d’instructions

Une fois les données stockées, il faut être capable de leur appliquer des traitements.

1.6.1 - Les commentaires

Commenter un programme, c'est lui adjoindre des annotations non significatives pour son exécution. Malgré tout, ils ont une utilités certaines lorsque, après quelques temps vous relisez votre programme. En effet un 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 lors de l'exécution, et il n'est pas forcement aisé de saisir ce comportement 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 deux possibilités héritées des langages

. En voici une brève description.

Mettre en commentaire la fin d'une ligne

Cette solution, la plus simple, consiste à placer deux fois consécutivement le caractère divise ('/'), souvent nommé slash. Tout ce qui suit, sur la ligne, ces deux caractères est alors considéré comme un commentaire. Faites attention à ne pas vouloir placer un commentaire alors que vous êtes en train de définir une chaîne de caractères : votre annotation serait alors incluse dans la chaîne.

var maVariable = 3 + 2 // un petit commentaire // Pas de commentaires dans la ligne suivante var taVariable = "toto // tata";

Mettre un commentaire sur plusieurs lignes

Cette deuxième solution devient utile quand le commentaire à placer devient important : il est alors difficile de le mettre sur une seule ligne. Pour marquez le début du commentaire, placer les deux caractères suivants (consécutivement) '/*'.

Inscrivez ensuite votre annotation, puis replacez les deux caractères précédent dans l'ordre inverse ('*/') pour terminer votre commentaire.

/************************************

*** Ceci est aussi un commentaire ***

(10)

************************************/

1.6.2 - Fin d’une instruction

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-virgules si une instruction semble naturellement être terminée :

var result;

result = 15 // pour ce test, donner à result la valeur 15 result = 5; result = 20; // on change la valeur de result

// juste pour voir...

result

= 19; // la valeur finale de result est 19.

if ( result == 15 ) {

/* Cet texte ne sera pas affiché puisque result ne vaut pas 15 */

Clib.puts('La valeur de result est ') Clib.puts('encore 15')

} else {

/* En fait, ce texte sera affiché puisque result ne vaut pas 15 ! */

Clib.puts('La valeur de result a été ');

Clib.puts('modifiée et ne vaut plus 15');

}

/* fin de l’exemple */

;

1.7 - Expressions et tests conditionnels

Une expression est soit une valeur (15, 16.25, mais aussi "chaîne", ...), soit le contenu d'une variable, soit le résultat d'une opération. Dans les deux premiers cas, rien de plus n'est à rajouter. Dans le dernier cas, le calcul peut être assez complexe : une opération étant constituée d'un 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. 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 qui sont à votre disposition.

1.7.1 - Les opérateurs numériques

Les opérateurs numériques prennent deux expressions numériques et rendent une valeur de type numérique. On y trouve l'addition (+), la soustraction (-), la multiplication (*), la division (/), et la fonction modulo (%). On trouve aussi des opérateurs qui agissent bit à bit : le ET (&), le OU (|), le XOR (^), le décalage à gauche (<<), vers la droite (>>). On trouve aussi des opérateurs numériques acceptant uniquement comme opérande, une variable numérique. On trouve notamment la fonction 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 plus fin, on évalue d'abord, l'expression globale, puis ensuite on incrémentera la variable).

Voici une expression numérique dont toutes les sous-expressions sont de type numérique : on remarquera l'utilisation des parenthèses pour forcer l'ordre d'évaluation des sous-expressions.

// une expression numérique (b*b+9*p/q)/(4*c)

1.7.2 - Les opérateurs booléens

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 : deux nombres, deux chaînes ou deux booléens. Le résultat est alors un booléen (vrai ou faux). On en dénombre six : l'opérateur d'égalité "==", 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 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).

// une expression booléenne dont on voit pas trop le sens (b==3 && c!=5) || (a==(b*b+9*p/q)/(4*c) || z<=10)

1.7.3 - Les opérateurs sur chaînes de caractères

(11)

La seule opération définie sur les chaînes de caractères est la concaténation et elle est dénotée par le symbole +. L'opérateur résultant prend deux opérandes de nature chaîne de caractères et rend une chaîne de caractères. Il est de plus possible de passer, comme seconde opérande, une valeur de type numérique ou booléenne.

Dans ce dernier cas, c'est la chaîne de caractères décrivant la valeur qui est concaténée : ex "34" pour le nombre 34 ou "true" pour une valeur booléenne qui serait vraie.

1.7.4 - L'opérateur conditionnel

L'opérateur que nous allons maintenant décrire sert à retourner une expression ou une autre selon qu'une troisième (servant d'expression de 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 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 // de type booléen valant vrai, sinon on retourne une // expression numérique complexe.

(a==5)?true:(a+b)*4

// Exemple 2 : on retourne le numéro d'une des quatre premières

// lettres de l'alphabet contenues dans la chaîne toto (toto=="a")?1:(toto=="b")?2:(toto=="c")?3:(toto=="d")?4:false

1.7.5 - Les opérateurs d'affectation

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 langages considèrent l'affectation comme une instruction, les langages 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 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 valeur.

L'opérateur le plus général est donc l'affectation classique (symbolisée par le caractère '='). L'opérande droite est simplement recopiée dans la variable nommée par l'opérande gauche. On voit de suite 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.

Dernière remarque, l'opérateur '+=' est bien entendu aussi défini sur les chaînes de caractères.

1.7.6 - L' opérateur de séquencement

Il peut être utile de diviser le calcul d'une expression en plusieurs sous-expressions.

Mais supposons qu'on ne puisse exécuter qu'une seule 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 l'évaluation de la dernière expression. Regardez l'exemple suivant.

var a;

var b;

var Result = (a+=x,b=y*z,a*b==3?variable1:variable2);

1.7.7 - Précédence des opérateurs

Enfin, je pense qu'il est nécessaire de signaler qu'il n'est pas utile de parenthéser vos expressions à tous vents. Des règles de priorité existent : utilisez-les! Pour information, voici un petit tableau rappelant la priorité des opérateurs : ceux qui sont sur une même ligne sont de priorité identique, ceux du haut étant plus prioritaires que ceux du bas.

[ ] .

! ++ --

* / % + -

<< >>

== != < <= > >=

&

^

(12)

|

&&

||

?:

= += -= *= /= %= <<= >>= &= ^= |=

,

1.7.8 - L’opérateur Typeof

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 :

var a = 'n_importe_quoi';

var b;

document.write(typeof(a)); // affiche "string"

document.write(typeof(b)); // affiche "undefined"

document.write(typeof(c)); // affiche "undefined"

1.8 - Contrôle de flux

Pour ceux qui connaissent déjà les langages, cette partie risque de ne pas être des plus intéressantes (la syntaxe et la sémantique restent très 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 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 d'opérateur de séquencement d'instructions.

Seconde règle : toute expression est aussi une instruction. Ainsi l'instruction suivante est valide et calcul une valeur qui est finalement oubliée : "3*a+4*b;". Si vous cherchez une raison à ce choix, pensez qu'il 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.

1.8.1 - Les blocs d'instructions : { instruction ... instruction }

Les blocs d'instructions sont très utiles : en effet on peut être amené à certains moments à faire un traitement qui nécessite plusieurs instructions. Or la syntaxe de certaines instructions de contrôle ne permettrait pas de faire la distinction entre ce qui rentre dans le cadre du traitement et ce qui succède le traitement. L'introduction

des blocs d'instructions solutionne le 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 nécessaires (sans oublier un point-virgule à la fin de chacune d'entre elles) puis on termine le bloc par une accolade fermante. Pour la suite de ce chapitre, nous définissons un Statement (mot anglais) comme étant soit une instruction de base, soit un bloc d'instructions.

// Ce qui suit est un bloc de trois instructions {

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.2 - L'instruction conditionnelle : if (condition) Statement1 else Statement2

Cette instruction, qui se décompose en trois parties essentielles, permet de lancer un traitement selon qu'une condition soit remplie ou non. La première partie de l'instruction, qui doit obligatoirement être parenthèsée, est la condition. En fonction que le résultat de cette condition soit vrai ou faux, un et un seul des deux Statements possibles sera lancé : le premier si le test est vrai, le second dans l'autre cas.

if (var_de_test == calcul(3)) {

// premier statement : c'est un petit bloc b++;

c--;

} else a+=d; // second statement

Une petite remarque : le else et le statement qui suit sont facultatifs. Ils 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 passera à l'instruction qui suit le if :

if ( x == 5 ) // premier exemple

y = 6;

if ( name == "fred") // second exemple y = 6;

else y = 7;

if ( x == y && a == b ) // troisième exemple

(13)

{

x++;

y++;

} else {

a++;

b++;

}

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 statement sera traité un certain nombre de fois. Pour réaliser cette boucle, l'instruction admet trois parties, ou expressions, (toutes facultatives) qui sont l'initialisation, le rebouclage et la mise_a_jour. La première sert à initialiser les variables qui permettent la réalisation de la boucle : son code sera donc exécuté une et une seule fois. La seconde sert à déterminer si l'on doit encore faire un passage dans le traitement du statement ou non. Bien naturellement, cette condition est réévaluée à chaque tour de boucle. La dernière, mise_a_jour, permet la mise à jour des variables utilisées pour réaliser la boucle.

// Voici un petit exemple d'utilisation du for var b=0;

for(var i=1;i<10;i++) {

// Step 0 : on initialise i à 1 // 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

b+=i;

}

// la somme des 9 premiers entiers vaut : b ________________________________________

var fruit = Array(3);

fruit[0] = 'pomme';

fruit[1] = 'poire';

fruit[2] = 'orange';

for (count=0; count <=2; count++) // affiche tous les fruits.

document.write(fruit[count]+ ' ');

var new_line = '<BR>';

for (loop1=0; loop1 < 5; loop1++) // dessine un triangle de T

{

for (loop2=0; loop2 < loop1; loop2++) {

document.write('T');

}

document.write(new_line);

}

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

rien faire.

;

1.8.4 - Boucle while : while(condition) statement

Cette instruction réalise aussi une boucle. En fait, la boucle while peut être vue comme une boucle for à laquelle on aurait enlevé les expressions initialisation et mise_a_jour (et réciproquement). Seule l'expression dite de 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 l'exemple précédent afin de vous faire sentir les différentes subtilités qu'il peut y avoir entre les deux versions de la boucle en JavaScript.

// Voici un petit exemple d'utilisation du while var b=0;

var i=1; // On crée un variable utile pour la boucle while(i<10) { // tant que celle-ci est inferieure à 10 b+=i; // on fait une partie du calcul

i++; // on augmente la variable de boucle d'une unité }

var num = 134 - 1; // exemple 1. Trouver le plus grand // diviseur de 134.

var finished = false;

while ( finished == false ) {

if ( 134 % num == 0 ) {

document.write('Le plus grand diviseur de 134 est ' + num);

finished = true;

} num--;

}

num = 1; // exemple 2. Affiche tous les nombres (boucle infinie).

while (true) {

document.write(++num + ' ');

}

(14)

1.8.5 - L’instruction continue

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 cours, et de reprendre un nouveau tour de boucle. Ceci peut être utile, par exemple, pour avorter un traitement selon qu'une condition soit remplie ou non. L'exemple qui suit sera peut être plus explicite que mes explications.

for(var i=1;i<11;i++){

if (i==6) continue; // Si i=6 alors on ne fait pas de traitement // mais on continue les autres étapes !!!

AppelFonction(); // On appelle une fonction }

// il résulte que cette boucle fait seulement 9 appels à la // fonction, car le sixième a été oublié

________________________________________

var loop = 0; // Exemple 1. Affiche les premiers multiples de 7.

while ( ++loop < 200 ) {

if ( loop % 7 != 0 ) continue;

document.write(loop + ' ');

}

1.8.6 - L’instruction break

Comme l'instruction précédente, celle-ci s'utilise dans le statement d'une boucle. De même, elle permet d'interrompre le traitement en cours, mais à l'inverse de la précédente, l'exécution ne se poursuit pas avec la prochaine itération, mais directement à l'instruction qui suit celle de la boucle. Cela permet d'interrompre brutalement une boucle, si c'est nécessaire. L'exemple suivant donne une autre version pour le calcul de la somme des 9 premiers entiers.

var b=0;

var i=1; // On crée un variable utile pour la boucle while(true) { // on boucle à l'infini car toujours vrai if (i==10) break; // si i=10 on arrête tout !

b+=i; // on fait une partie du calcul

i++; // on augmente la variable de boucle d'une unité

}

var loop = 0; // Exemple 2. Trouve le premier nombre plus // grand que 1000 et multiple de 99

for (loop=1000; loop < 1099; loop++) {

if (loop % 99 == 0) break;

}

document.write(loop);

1.8.7 - Les fonctions : function nom(paramètres){corps}

Comme dans tous langages informatiques dignes de ce nom, il vous est possible de déclarer des fonctions, et de faire des appels à celles-ci. L'intérêt d'une telle possibilité est très simple : si votre programme a besoin, et ce à plusieurs reprises, d'une même portion de code (aux valeurs des variables près), vous allez pouvoir localiser, en un seul point du code, cette section et y faire appel, là où cela est nécessaire, avec des 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).

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 vous voudrez faire appel à celle-ci (il sera donc judicieux de trouver des noms appropriés pour vos fonctions, histoire que vos programmes soient simples à relire et à comprendre). Ensuite, il vous faut spécifier les paramètres utilisés par la fonction. Il peut bien sûr ne pas y en avoir (dans ce cas, refermez directement la parenthèse).

Sinon il vous suffit juste de donner les noms de ces paramètres séparés les uns des autres par une 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 lors de l'appel de la fonction. Autre petite chose très utile : une fonction peut rendre un résultat. Dans ce cas, la valeur d'un appel à la fonction sera la valeur retournée.

Pour ce faire, vous avez à votre disposition le mot clé return. S'il n'est pas suivi d'une expression, alors il indique que l'exécution de la fonction s'arrête à sa position. Sinon, le programme 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 fonction.

Pour y voir plus clair, regardez l'exemple qui suit. Celui-ci part de 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 ne prend aucun paramètre

(15)

(toutes les données relatives à la solution du problème sont connues d'avance).

// On définit notre fonction très utile dans le programme : function Sigma9(){

var b=0;

var i=1;

while(i<10) b+=i, i++;

return b;

}

... // Plein de lignes de codes

// la somme des 9 premiers entiers vaut : Sigma9()

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

// Voici notre petite fonction function Sigma(i){

var b=0;

while(i>0) b+=i, i--;

return b;

}

// la somme des 10 premiers entiers vaut : Sigma(10)

Pour information, s'il vous prenait l'idée de vouloir définir une fonction à 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 de choses. Dernière petite remarque, de manière générale, les définitions de fonctions se font dans le couple de

marques HTML <HEAD> ... </HEAD>

, par l'utilisation des marques

. Mais ceci n'est qu'une convention, vous pouvez très bien ne pas la respecter.

Un autre exemple :

function dire_bonjour() {

document.write('Bonjour. ');

document.write('Bienvenue dans la fonction dire_bonjour(). ');

return;

}

function ajouter(premier, second) {

var resultat = premier + second;

return resultat;

}

function ajouter_tous() {

var boucle=0, somme=0;

for ( boucle = arguments.length-1; boucle >=0; boucle--) somme += arguments[boucle];

return somme;

}

// Maintenant, servons-nous de ces fonctions dire_bonjour();

var reponse = ajouter(5, 3);

document.write( reponse + ' ' + ajouter(10, 4) );

document.write( ' ' + ajouter_tous(1, 3, 5, 7, 9) );

Qui produira l’affichage :

Bonjour. Bienvenue dans la fonction Dire_Bonjour(). 8 14 25 Et encore un :

var truc = 'dehors';

function magie() {

var truc = 'dedans';

document.write(truc);

}

document.write(truc); // affiche ‘dehors’

magie(); // affiche ‘dedans’

1.8.8 - Quelques notions sur la récursivité

Comme tout bon langage qui se respecte, JavaScript permet de programmer des fonctions dites récursives. Derrière ce mot barbare se cache une méthode de programmation qui, dans bien des cas, permet de résoudre plus simplement le problème (ceci sous-entend que vous ayez bien assimilé le processus).

On dit qu'il y a un appel récursif dans une fonction, si celle-ci se fait appel pour

(16)

calculer une sous-partie du problème. Il y a aussi récursivité si la fonction s'appelle indirectement (c'est-à-dire qu'elle fait appel à une fonction qui fera, peut-être elle- aussi indirectement, appel à la fonction de 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).

Pour y voir plus clair regardez le programme suivant. Je pense que vous aurez deviné qu'il va faire la somme des i premiers entiers (comment avez-vous deviné

???).

// Voici notre petite fonction

// 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 entiers // Très simple et très efficace !!!

function Sigma(i){

return i==1?1:i+Sigma(i-1);

}

// la somme des 10 premiers entiers vaut : Sigma(10)

// Une fonction qui calcule un factoriel !!!

function Factoriel(i){

return i<=1?1:i*Factoriel(i-1);

}

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

1.9 - Les objets

Certains programmeurs sont plus effrayés par la notion d’objet que par tout autre.

Heureusement, les objets JavaScript sont simples à comprendre.

1.9.1 - Qu’est-ce qu’un objet ?

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 facilement être réutilisé.

Les défenseurs d’autres langages orientés objets risquent de ne pas apprécier cette définition simpliste des objets, mais comme JavaScript n’impose pas une grande rigueur dans l’écriture des scripts, il s’adapte parfaitement à la définition d’objets

simples.

Voici un exemple d’objet JavaScript : var chose = new Object;

chose.name = 'Une vieille chose';

chose.age = 59;

chose.hobby = 'évoluant le plus lentement possible.';

chose.chose2 = new Object;

chose.chose2.name = "une chose qui appartient à notre vieille chose";

delete chose;

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 à quel point il est simple de le faire :

Nom_de_variable_objet.nom_de_propriété = valeur;

Les objets peuvent posséder autant de propriété qu’on veut du moment que l’on est un nom différent pour chacune.

1.9.2 - Les méthodes

Les habitués d’autres langages de programmation peuvent déjà être 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 désignation.

Cependant, les objets peuvent aussi posséder des méthodes, comme dans l’exemple suivant :

function affichage_de_bonjour_standard() { document.write("Bonjour."); }

function affichage_special_du_nom() {

document.write("Mon nom est : " + this.nom);

}

var chose = new Object;

chose.nom = "Fred";

chose.dire_bonjour = affichage_de_bonjour_standard;

chose.afficher_nom = affichage_special_du_nom;

chose.dire_bonjour();

chose.afficher_nom();

Les deux fonctions définies dans l’exemple sont apparemment normales, même si

(17)

la deuxième fait appel à une variable mystérieuse nommée this. Vers la fin du script, deux propriétés de l’objet chose référencent les fonctions définies auparavant.

chose.dire_bonjour = affichage_de_bonjour_standard;

chose.afficher_nom = affichage_special_du_nom;

Ainsi, tout à la fin du script, les propriétés de l’objet commencent à ressembler à des fonctions :

chose.dire_bonjour();

chose.afficher_nom();

Une méthode est simplement une fonction contenue dans un objet. On arrive à ce résultat en utilisant l’une des propriétés de l’objet pour référencer une fonction du script, de la même façon qu’une variable peut garder la trace d’un objet complet.

Lorsqu’une méthode est appelée, la variable spéciale this est définie à 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.

Ainsi, les objets sont réellement des regroupements de propriétés et de méthodes.

1.9.3 - Prototypes et constructeurs

Soit l’exemple suivant : function afficher() {

document.write(this.nom);

}

function Employe(nom, age) {

this.nom = nom;

this.age = age;

this.status = 'Plein temps';

}

Employe.prototype.adresse = 'JS Industries, Station St.';

Employe.prototype.contact = '012 345 6789';

Employe.prototype.job = "Semble indispensable";

Employe.prototype.affiche = afficher;

var personne1 = new Employe("Doe, John", 47);

var personne2 = new Employe("Doe, Jane", 45);

personne1.affiche() + document.write(" " + personne2.contact);

Les variables personne1 et personne2 sont créées à partir du constructeur d’objet Employe. En fait, un constructeur est une fonction qui permettra d’initialiser des propriétés et des méthodes d’un objet à l’aide de paramètre passés au constructeur lors de la création. Dans l’exemple, la fonction constructeur nommée Employe demande deux arguments pour 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.

La propriété prototype associée aux fonctions spéciales constructeurs permet d’initialiser des propriétés et des méthodes avec des valeurs communes à tous les objets lors de leur création. Dans l’exemple précédent, tout objet créé avec le constructeur Employe, se verra attribué trois propriétés (adresse, contact, job) et une méthode (affiche).

1.9.4 - L’instruction For … in …

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 :

for (variable in varaible_objet) instruction ou bloc

Un exemple :

for (prop in objet_quelconque) {

if (typeof(objet_quelconque[prop])== « chaine ») document.write(« Propriété : »+prop+« Valeur : »

+objet_quelconque[prop]) ; }

Cet exemple parcours toutes les propriétés d’un objet quelconque et affiche uniquement les propriétés contenant une valeur de type chaîne.

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 :

(18)

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 ! }

(19)

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.

<HTML>

<HEAD>

var step=1;

// exemple 1.

</SCRIPT>

// exemple 2.

// exemple 3.

// exemple 4.

// exemple 5.

</HEAD>

</HTML>

2.1.1 - En utilisant la balise <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 4, nous montre que JavaScript n’est pas le seul langage de script.

code

</SCRIPT>

On le voit, le choix du langage ne se limite pas à JavaScript et reste ouvert à d'autres langages comme Visual Basic, que supporte Internet Explorer.

Le code placé à l'intérieur d'un couple de balises SCRIPT est évalué après le

(20)

chargement de la page.

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, ce qui n'est cependant pas conseillé.

La balise SCRIPT peut prendre un argument : LANGAGE="JavaScript1.1" qui indique que le code JavaScript est de version 1.1, actuellement compris par les versions de Netscape 3.x et supérieure et par les versions Microsoft Internet Explorer 4 et supérieures.

L'argument LANGAGE="JavaScript1.2" indique que le code JAVASCRIPT est de version 1.2, actuellement compris par les versions de Netscape 4.x et supérieure.

Pour utiliser dans une page un code JavaScript à la fois compatible 1.0 et 1.1 il suffit de déclarer les procédures deux fois comme le montre l'exemple suivant :

code

</SCRIPT>

</SCRIPT>

Ceci peut être obtenu également par l'astuce suivante

location.replace("URL de la page HTML version 1.1") code compatible 1.0

</SCRIPT>

Ceci peut se décliner par des variantes du style

if (navigator.userAgent.indexOf("3.0") != -1) jsVersion = "1.1" else jsVersion = "1.0"

</SCRIPT>

La variable jsVersion servira alors tout au long des programmes à établir un code compatible avec la version du navigateur.

Une autre astuce, pour connaître le numéro de version de JavaScript est donnée par le programme suivant :

</HEAD><BODY><SCRIPT>

document.write(v);

</SCRIPT></BODY></HTML>

Le couple de balises <NOSCRIPT> </NOSCRIPT> permettent d'encadrer le texte qui sera affiché si JavaScript n'est pas compris par le navigateur.

alert("Ouvrir la page JavaScript ?");

document.location.href = 'js_top.htm';

</SCRIPT>

<NOSCRIPT>Offrez-vous un vrai navigateur !</NOSCRIPT>

</BODY></HTML>

Pour cacher le contenu d’une section SCRIPT pour un navigateur ancien ou non compatible, on utilise la mise en commentaire suivante :

<HTML>

<HEAD>

<TITLE>Notre premier script</TITLE>

<!--masque le script aux navigateurs anciens

// Nous n’avons pas de fonctions ou de variables à déclarer, // mais il aurait fallu les placer ici...

// fin du masque destiné aux navigateurs anciens -->

</SCRIPT>

</HEAD>

<BODY>

<!--masque le script aux navigateurs anciens document.write('Bonjour le monde !<BR>');

// fin du masque destiné aux navigateurs anciens -->

</SCRIPT>

</BODY>

</HTML>

2.1.2 - Le code dans un fichier source

Comme le montre l’exemple 5 du début de chapitre, à partir de la version 3 de Netscape, il est possible de mettre le code des programmes JavaScript dans un fichier annexe, en utilisant la balise SCRIPT comme suit :

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 source.js n'a pu être chargé.

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 MIME

"application/x-JavaScript" en regard des fichiers d'extension js.

(21)

2.1.3 - En utilisant les événements

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.

La syntaxe de ces événements est :

où balise est le nom d'une balise et eventHandler est le nom d'un événement.

Par exemple, pour utiliser la fonction exemple quand un utilisateur appuie sur un bouton, l'instruction suivante

Une fonction ou bien un code JavaScript peut être inséré comme valeur de l'argument exemple

Bien évidemment, il est plus intéressant d'utiliser une procédure, lorsque le code employé est utilisé plusieurs fois.

Voici la liste des événements disponibles :

Chaque événement est codé sous une des deux formes :

2.1.4 - Avec formulaire

<FORM>

<INPUT VALUE=événement

événement=alert("événement")>

</FORM>

2.1.5 - Avec hypertexte

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

onBlur : l'utilisateur après avoir cliqué sur une zone clique à l'extérieur de la zone active.

onClick : l'utilisateur clique sur une zone hypertexte.

onChange : l'utilisateur après avoir cliqué sur une zone, la quitte après avoir changé le texte.

onFocus : l'utilisateur clique sur une zone.

onLoad : l'utilisateur charge la page dans le navigateur onMouseOver l'utilisateur passe la souris sur la zone onSelect : l'utilisateur sélectionne un élément d'un formulaire onSubmit : l'utilisateur soumet un formulaire

onUnload : l'utilisateur quitte la page Exemple :

var cris = 0;

function crier(obj) {

alert('Quoi ? Seulement: "' + this.value + '"\n\nPLUS FORT !!');

cris++;

}

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

<BR> Dernier cri:

</FORM>

document.crieur[1].onchange=crier;

document.crieur.trois.onchange=crier;

L’exemple précédent donne l’affichage suivant après le remplissage du deuxieme cri :

(22)

L’exemple précédent donne l’affichage suivant après quelques utilisation.

En fait, on peut remarquer que le premier INPUT prend la valeur « PLUS FORT ! ! ! »dèq que l’on quitte l’objet et que son contenu à changé.

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 :

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

Voici deux exemples de scripts JavaScript :

<HTML>

<HEAD>

function meteo() {

if ( !Math.random ) // n’existe pas dans Navigator 2.0

{

document.write('<PRE> -- le temps est perturbé par la pluie --</PRE>');

}

else if ( Math.floor((Math.random()*2)) == 0 ) {

document.write("<STRONG>C’est simplement épouvantable.</STRONG>\n");

} else {

document.write("<EM> C’est merveilleux ! </EM>\n");

} } </SCRIPT>

</HEAD>

<BODY>

<P>Prévisions météo pour la journée:</P>

meteo(); // ajout de choses spéciales

</SCRIPT>

<P>Fin des prévisions.</P>

</BODY>

</HTML>

Dans cet exemple, une fonction meteo est déclarée. Ensuite, un appel à cette fonction est fait dans le déroulement de la page HTML.

Dans l’exemple suivant, on crée une page complète, à l’aide d’un script JavaScript :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

with ( document ) {

write('<HTML><HEAD>\n');

(23)

write('<TITLE>Pratiquement tout en JavaScript !</TITLE>\n');

write('</HEAD><BODY>\n');

write('Qui a besoin d’HTML statique ?\n');

write('<BR><HR></BODY></HTML>');

}

</SCRIPT>

Ceci n’est pas très orthodoxe, mais tout à fait supporté par les navigateurs. D’une manière générale, il est préférable d’utiliser les balises SCRIPT dans la partie HEAD d’un document HTML pour toutes les déclarations.

2.4 - Les entités JavaScript

Un nom entité, en HTML, est un élément syntaxique de la forme &NomEntité; , qui permet de représenter des caractères difficiles à symboliser. C’est ainsi que l’on représente un espace insécable par &nbsp, le caractère « < » par &lt, et le caractère accentué « é

par é .Les entités JavaScript sont des extensions de cette syntaxe, qui se présente sous la forme &{VariableJavaScript}; ou &{ExpressionJavaScript}; .Par exemple :

var pixels_par_unite = 25.4;

var total_unites = 8;

</SCRIPT>

</HEAD><BODY>

Graphique sous forme de barre représentant le nombre d’unités :<BR>

Graphique sous forme de barre représentant le nombre d’unités sous forme d’un pourcentage de la largeur totale de la fenêtre du navigateur (100% pour 10 unités) :<BR>

</BODY></HTML>

2.5 - Les URL JavaScript

Les URL JavaScript fonctionne comme tout autre type d’URL, de ce fait, on

précise le type de lien : javascript:script .En voici un exemple :

var resultat_test = "Le résultat de votre test est : " + 23 + "%";

function ameliore_resultat() {

resultat_test = "Résultat parfait !";

}

var petit = "#define x_width 1\n#define x_height 1\nstatic char x_bits[] = {0x00};";

</SCRIPT>

<A HREF="javascript:resultat_test">Cliquez ici pour voir vos résultats</A><BR>

<A HREF="javascript:ameliore_resultat()">Cliquez ici pour améliorer vos résultats</A>

</BODY></HTML>

Ainsi

<A HREF="javascript:history.go(0)">cliquer pour rafraîchir</A>

placé dans le fichier « javascri4.htm », aura la même action que :

LIENHYPERTEXTE "javascr4.htm"

cliquer pour rafraîchir

</A>

sans pour autant forcer à spécifier le nom de la page.

Ceci peut être étendu à une syntaxe du type :

<A HREF="javascript:history.go(-1)">aller à la page précédente</A>

2.6 - Les feuilles de styles JavaScript (JSSS)

Exemple :

tags.P.borderWidth = 100;

tags.P.borderStyle = 'none';// sinon on a une très large bordure tags.B.color = "red";

</STYLE>

<LINK REL=STYLESHEET TYPE="text/JavaScript" HREF="fancystyle"

TITLE="Fancy">

(24)

</HEAD><BODY>

<P> Paragraphe aéré ! </P>

<P><B>Paragraphe aéré agressif !</B></P>

</BODY></HTML>

L’utilisation des balises <STYLE> montre que la création de feuilles de styles dans JavaScript consiste à créer des propriétés correctement nommées et de leur affecter des valeurs réalistes. Les lettres en majuscules P et B correspondent respectivement au marqueurs <P> et <B>.

La balise <LINK> dans l’en-tête du document HTML a pour but d’identifier de manière générale le relation de dépendance de ce document avec d’autres documents. L’une de ces dépendances possibles est une feuille de style JavaScript, si bien que cette balise procure une alternative à l’incorporation d’une feuille de styles directement dans le document.

Il existe quelques fonctions JavaScript destinées spécifiquement aux JSSS :

tags.H1.color = 'pink';

// positionne les marges haute, droite, bas, gauche.

tags.H1.margins(1,2,3,4);

tags.H1.rgb(50,50,50);

contextual(tags.H1, tags.B).fontStyle = "italic";

function changer() {

if ( color == 'pink' ) fontStyle = "medium";

}

tags.I.apply = changer();

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

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 un élément <B> est imbriqué dans un élément <H1>, alors il doit être affiché en italique.

Enfin, la propriété apply de la balise <I> est affecté sur le fonction changer().

(25)

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 fenêtres Navigateur

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 fenêtre de navigateur.avec la syntaxe suivante :

Nom_Variable = open(« URL », « Nom fenetre », « option=valeur, option=valeur… ») ;

3.2 - Les fenêtres popup

Trois types de fenêtres popup sont utilisables par JavaScript. Elles peuvent êtres instanciées par les méthodes de l’objet window et ont pour nom : alert, confirm et prompt.

3.2.1 - Une boite d’alerte :

(26)

3.2.2 - Une boite de confirmation :

3.2.3 - Une boite de saisie :

Un exemple :

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

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

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

</FRAMESET></HTML>

2