Cours Javascript

132
Le Javascript – en 25 leçons - Version 1.0 © 23/06/2004 Professor Maddy 1 LE JAVASCRIPT - en 25 chapitres - par Professor Maddy

Transcript of Cours Javascript

Page 1: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 1

LE JAVASCRIPT

- en 25 chapitres -

par Professor Maddy

Page 2: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 2

SOMMAIRE

INTRODUCTION 61.GENERALITES

1.1.Le langage Javascript1.2.Côté pratique1.3.Détails techniques

7777

2.LE LANGAGE2.1.Incorporation du code2.2.Spécificités du langage

888

3.LES STRUCTURES DE DONNEES3.1.Les données constantes3.2.Les variables en JS

101010

4. LES OPERATEURS4.1.Les opérateurs de calcul4.2.Les opérateurs de comparaison4.3.Les opérateurs associatifs4.4.Les opérateurs logiques4.5.Les opérateurs d'incrémentation

141414151515

5. LES FONCTIONS5.1.Définition5.2.Déclaration5.3.Les fonctions dans l’en-tête5.4.L'appel d'une fonction5.5.Fonctions manipulant des valeurs5.6.Variables locales et variables globales

16161616161718

6. LES STRUCTURES DE CONTROLE6.1.Les structures algorithmiques6.2.La structure séquentielle6.3.Les instructions conditionnelles6.4.Les instructions itératives6.5.Interrompre une boucle6.6.Exercice

19191919212222

7. LES BOITES DE MESSAGE7.1.Généralités7.2.Alert()7.3.Prompt()7.4.Confirm()7.5.Exercice : Confirmation et vérification

232323232424

8. NOTION OBJET8.1.Le concept objet8.2.Création d’un objet8.3.Accès aux propriétés et aux méthodes8.4.L’objet this

2626262627

Page 3: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 3

9. LES FORMULAIRES9.1.Généralités9.2. Champ de texte9.3.Cases à sélectionner9.4.Liste de sélection9.5.Bouton9.6.Contrôle caché9.7.Un formulaire complet9.8.Les objet du formulaire9.9.Exercice

28282931333436383940

10. LES EVENEMENTS10.1.Généralités10.2.Le clic de souris10.3.Le chargement10.4.Le passage de la souris10.5.Le focus10.6.Les changements10.7.La sélection10.8.L’envoi10.9.Le reset10.10.L’utilisation de l’objet document10.11.Exemple concret10.12.Exercice

41414242444546464747474849

11. L’OBJET ARRAY11.1.Généralités11.2.Création et affectation d’un tableau11.3.Accès aux données d’un tableau11.4.Tableau à 2 dimensions11.5.Propriétés et méthodes11.6.Exemple concret11.7.Exercice

5050505151525454

12.LES OBJETS DU NAVIGATEUR12.1.Généralités12.2.Arborescence

555555

13.L’OBJET NAVIGATOR13.1.Les propriétés de navigator13.2.Les méthodes de navigator13.3.Les objets de navigator13.4.Exemple

5656575758

14.L’OBJET WINDOW14.1.Les propriétés de window14.2.Les méthodes de window14.3.Les évènements de window14.4.Les objets de window14.5.Exemple concret14.6.Exercice

59595962636666

Page 4: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 4

15.L’OBJET DOCUMENT15.1.Les propriétés de document15.2.Les méthodes de document15.3.Les évènements de document15.4.Les objets de document15.5.Exercice

676768696972

16.LES OBJET DU NOYAU JAVASCRIPT16.1.Généralités16.2.Quelques précisions

737373

17.L’OBJET MATH17.1.Fonctions17.2.Constantes17.3.Simplification17.4.Exercice

7474757575

18.L’OBJET STRING18.1.Généralités18.2.La propriété18.3.Les méthodes18.4.Manipulations sur les chaînes18.5.Exercice

767676768587

19.L’OBJET DATE19.1.Généralités19.2.Les méthodes19.3.Exemple concret19.4.Exercice

8888889091

20.L’OBJET IMAGE20.1.Rappel HTML20.2.L’objet20.3.Les propriétés20.4.Afficher une image20.5.Exemple concret : cliquer pour changer d’image20.6.Exercice

92929292959697

21.LA PROGRAMMATION MULTI-CADRES21.1.Rappel HTML21.2.Généralités21.3.Liens hypertexte21.4.Accès aux éléments des frames21.5.Exemple concret21.6.Exercice

9898989899

100101

22.LES COOKIES22.1.Présentation22.2.Créer un cookie22.3.Récupérer un cookie22.4.Modifier un cookie22.5.Supprimer un cookie

102102102103104105

Page 5: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 5

23.LA PROGRAMMATION OBJET23.1.Présentation23.2.Déclaration d’une classe23.3.Utilisation de méthodes23.4. Exercice

106106106107108

24.LES EXPRESSION REGULIERES24.1.Présentation24.2.Définition24.3.Paramètres d’une expression régulière24.4.Utilisation d’une expression régulière24.5.Exemple concret24.6.Exercice

109109109110113114115

25.FONCTIONS ET PROPRIETES25.1.Présentation25.2.Les fonctions du langage25.3.Méthodes et propriétés des objets25.4.Exercice

116116116118120

CONCLUSION 121AUTEUR

DESCRIPTIONCOORDONNEES

122122122

REMERCIEMENTS 123

Page 6: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 6

INTRODUCTION

Que dire à propos de ce cours ? Voilà une bien grande question...à laquelle je ne peuxpas répondre. Je pourrais parler de son contenu, mais à quoi bon ? Vous allez le lire – enfin jel’espère – dans quelques instants. Je pourrais parler de moi, mais ce n’est pas intéressant...Un problème insoluble se présente donc à moi.

Ce cours s’adresse à tout programmeur, du débutant ayant soif d’apprendre àl’expert ayant besoin de se remémorer quelque détail, en passant par le programmeur quisouhaite découvrir un langage ou se perfectionner... Son but n’est pas de former quelqu’unau Javascript, car ce serait se vanter. Non, son but est de donner des bases, que leprogrammeur averti saura compléter par d’autres lectures.

Il – le cours - n’a pas vocation à être exhaustif. Je dirai plutôt qu’il est évolutif, c’est-à-dire qu’il n’existe que pour être amélioré. Je compte bien entendu l’enrichir au fur et àmesure. A ce propos, je vous serai reconnaissant de m’adresser vos suggestions, critiques,compléments, et autres aides.

Je ne m’engage pas à fournir un cours parfait. Il peut – et il doit – y avoir des erreurs.Je ne prétends pas posséder le cours sans fautes. Je suis tout ouïe à vos critiques etcorrections. Même si vous êtes content de ce cours – mon vœu le plus cher – donnez-moivotre avis, cela me permettra d’améliorer encore ce cours.

Enfin, si vous rencontrez un problème, si vous ne comprenez pas un point, n’hésitezpas à piocher dans la liste des liens que je vous fournit, et même, si un passage ne voussemble pas clair, écrivez-moi. Mes coordonnées figurent à la fin du document. Cependant,n’abusez pas de ce service, je ne suis pas une aide en ligne, j’ai aussi une vie professionnelle– voir la partie AUTEUR, pour ceux que cela intéresse – et je ne peux passer mon temps àrépondre à vos questions. Si la réponse se fait attendre, patientez encore. Peut-être n’ai-jepas le temps ou peut-être n’ai-je pas encore trouvé la solution…

Dernier point : si vous souhaitez réutiliser ce cours, ce n’est pas un problème. Je vousdemande cependant de bien vouloir me contacter, car je souhaite savoir ce qu’il devient.Sachez que cela me flatterait.

Merci d’avoir lu cette introduction. Je vous souhaite une bonne lecture et bienvenuedans l’univers de Javascript !

Page 7: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 7

1.GENERALITES

1.1.Le langage Javascript

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

Ce langage est interprété, c’est-à-dire qu’il n’est pas compilé en langage machineavant exécution, comme le Java ou le C++. Le Javascript est intégré au code HTML, il vousfaudra donc des bases assez solides en HTML. Si ce n’est pas le cas, il est conseillé deconsulter un cours HTML de toute urgence. Il s’agit, a priori, du premier langage de scriptcréé pour le web. Il permet d’exécuter des commandes du côté utilisateur, donc au niveaudu navigateur et non du serveur -comme le PHP - .

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

1.2.Côté pratique

Pour programmer en Javascript, il vous faut un navigateur web assez récent et unéditeur de texte, le bloc-notes de Windows est suffisant. Une connexion Internet estsouhaitable. Au niveau de l’éditeur de texte, je vous conseillerait un éditeur un peu plusévolué. Le mieux serait bien entendu Dreamweaver MX3, si vous avez les moyens, bien quece soit surtout utile si vous faites un site web. Du côté des éditeurs gratuits, je conseilleraiEditplus24, un éditeur tous langages qui propose une coloration syntaxique. Si vous devezprendre un autre éditeur, veillez à ce qu’il propose cette coloration syntaxique, ça éclaire lecode.

1.3.Détails techniques

Par convention, l’abréviation JS, utilisée souvent tout au long de ce cours, désigneJavascript.

Chaque chapitre concerne un point du langage qui peut être pris comme une leçon.A chaque fin de chapitre, je présente un exemple concret – quand c’est possible – et un ouplusieurs exercice(s). Ces exercices sont corrigés – un lien mène au fichier HTML – dans ledossier « solutions ».

Les cases blanches correspondent à la syntaxe, c’est-à-dire la mise en forme dulangage. Les cases grises correspondent aux exemples. Lorsque ces derniers ont un résultat

1 Pour plus de précisions, voir le site http://www.commentcamarche.net.2 Ne fonctionne qu’avec Nestcape Navigator6.X et Internet Explorer 6.X3 Edité par Macromédia4 Edité par ES-Computing, à télécharger sur http://www.telecharger.com.

Page 8: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 8

graphique, un lien mène au fichier HTML de l’exemple. Ces derniers sont dans le dossier« Exemples »

Page 9: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 9

2.LE LANGAGE

2.1.Incorporation du code

Comme son nom l’indique, il s’agit d’un langage de script. Le code s’intègre doncdans la page HTML avec les balises <script>. Il existe deux façons d’intégrer votre code.La première consiste à le placer entre les balises, tout simplement.

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

Exemple 2.1 :<script language = "Javascript">var mavariable = 12 ;document.write (typeof(mavariable)) ;</script>

Il est aussi possible de placer votre code dans un fichier Javascript, comportantl’extension « .js ». Ensuite, il faut l’insérer dans la page HTML ave la balise <script>. Nepas oublier il est préférable de placer le fichier JS dans la même dossier que la page.

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

Exemple 2.2 :<script src = "date.js"></script>

2.2.Spécificités du langage

La première chose qu’il faut noter en Javascript, comme dans le C, est que chaqueinstruction se termine par un point-virgule ‘;’. Il est possible de mettre plusieurs instructionssur le même ligne, puisque l’interpréteur ignore les sauts de lignes. Vous pouvez aussiinsérer des blancs où vous voulez – excepté dans des noms de variables ou dans desexpressions – cela ne change pas le code.

Exemple 2.3 :var mavariable = 12 ;document.write ( typeof(mavariable) ) ;

Page 10: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 10

Il est utile de commenter son code. Cela se fait à l’aide de ‘//’, tout le texte suivant ledouble slash jusqu’à la fin de la ligne est ignoré par l’interpréteur.

Exemple 2.4 :var mavariable = 12 ; //commentairedocument.write ( typeof(mavariable) ) ;

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

Exemple 2.5 :var mavariable = 12 ; /*commentaire surplusieurs lignes*/document.write ( typeof(mavariable) ) ;

Page 11: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 11

3.LES STRUCTURES DE DONNEES

3.1.Les données constantes

Le JS fournit quatre types de constantes déjà définies : Les constantes numériques, en notation décimale ( 75,2 ) ou flottante, c’est-à-dire

scientifique (752E-1). Les constantes booléennes : true et false. Les chaînes de caractères, encadrées de guillemets ou de d’apostrophes (‘’). La constante null qui signifie « rien », « sans valeur », et qui est attribuée au variables

non définies.

3.2.Les variables en JS

3.2.1.Les types de variable

Un nom de variable doit commencer par une lettre (alphabet ASCII) ou le signe « _ »et se composer de lettres, de chiffres et des caractères « _ » et « $ » (à l'exclusion du blanc).Le nombre de caractères n'est pas précisé. Javascript est sensible à la casse (majuscules etminuscules). Cela signifie que « MaVariable » n’est pas équivalent à « mavariable ».

Il existe 5 types de variables en Javascript : Les nombres : number Les chaînes de caractères : string Les booléens5 : boolean Les objets : object Les fonctions : function

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

Exemple 3.1 :

var mavariable = 12 ;document.write (typeof(mavariable)) ;

Résultat

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

5 Variable ne pouvant avoir que deux valeur : true (1) et false (0).

Page 12: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 12

Exemple 3.2 :

document.write (typeof(mavariable)) ;

Résultat

3.2.2.La déclaration et l’affectation

On distinguera ici la déclaration et l’affectation. La première consiste à donner unnom à la variable alors que la seconde consiste à donner une valeur à la variable. Ladifférence est qu’une variable peut-être affectée d’une valeur plusieurs fois alors qu’elle nepeut être définie qu’une seule fois. L’exemple suivant illustre une définition sans affectation.

Exemple 3.3 :

var Numero;

Dans les exemples qui suivent, par facilité, j’ai regroupé l’affectation avec ladéclaration. Les variables peuvent être déclarées de deux façons :

De façon explicite, avec le mot-clé « var ».

Exemple 3.4 :

var Numero = 1 ;

De façon implicite. On écrit directement le nom de la variable suivi de la valeur quel'on lui attribue.

Exemple 3.5 :

Numero = 1 ;

Page 13: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 13

3.2.3.Les noms réservés

Les mots de la liste ci-après ne peuvent être utilisés pour des noms de fonctions et devariables. Certains de ces mots sont des mots clés Javascript, d'autres ont été réservéspar Netscape pour un futur usage éventuel.

Lettre Mot-clé

A abstract

B boolean / break / byte

C case / catch / char / class / const / continue

D default / do / double

E else / extends

F false / final / finally / float / for / function

G goto

I if / implements / import / in / instanceof / int / interface

L long

N native / new / null

P package / private / protected / public

R return

S short / static / super / switch / synchronized

T this / throw / throws / transient / true / try

V var / void

W while / with

Tab. 3.1 : Noms réservés

3.2.4.Manipulations sur les chaînes de caractères

Javascript convertit automatiquement les entiers en chaîne de caractères. Pour lespuristes, il s’agit du transtypage automatique. Il est ainsi possible de concaténer desentiers avec des chaînes de caractères.

Dans la fonction d’écriture dans le document courant ( document.write() ), lesdonnées peuvent être séparés par des ‘,’ ou des ‘+’.

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

Page 14: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 14

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

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

3.2.5.Variables globales et variables locales

Les variables déclarées tout au début du script, en dehors et avant toutes fonctions(voir plus loin), seront toujours globales, qu'elles soient déclarées avec var ou de façoncontextuelle. On pourra donc les exploiter partout dans le script.

Dans une fonction, une variable déclarée par le mot clé var aura une portée limitée àcette seule fonction. On ne pourra donc pas l'exploiter ailleurs dans le script. D'où son nomde locale. Par contre, toujours dans une fonction, si la variable est déclaréecontextuellement (sans utiliser le mot var), sa portée sera globale.

Page 15: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 15

4. LES OPERATEURSComme tout langage informatique, JS possède des opérateurs pour effectuer les

calculs. Leur présentation est rapide, surtout pour les plus simples. Dans les exemples, lavaleur initiale de x sera toujours égale à 11, et celle de y sera égale à 5.

4.1.Les opérateurs de calcul

Signe Nom Signification Exemple Résultat

+ plus addition x + 3 14

- moins soustraction x - 3 8

* multiplié par multiplication x * 2 22

/ divisé par division x / 2 5.5

% modulo reste de la division par x % 5 1

= affectation a la valeur x = 5 5

Tab 4.1 : opérateurs de calcul

4.2.Les opérateurs de comparaison

Signe Nom Exemple Résultat

== Egal x == 11 true

< Inférieur x < 11 false

<= Inférieur ou égal x <= 11 true

> Supérieur x > 11 false

>= Supérieur ou égal x >= 11 true

!= Différent x != 11 false

Tab 4.2 : opérateurs de comparaison

Ces opérateur seront utilisés dans les boucles conditionnelles6. Le résultat s’exprimealors en valeur booléenne.

6 Voir pour cela le chapitre 6.STRUCTURES DE CONTROLE

Page 16: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 16

4.3.Les opérateurs associatifs

Signe Description Exemple Signification Résultat

+= plus égal x += y x = x + y 16

-= moins égal x -= y x = x - y 6

*= multiplié égal x *= y x = x * y 55

/= divisé égal x /= y x = x / y 2.2

Tab 4.3 : opérateurs associatifs

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

4.4.Les opérateurs logiques

Signe Nom Exemple Signification

&& et (condition1) && (condition2) condition1 et condition2

|| ou (condition1) || (condition2) condition1 ou condition2

Tab 4.4 : opérateurs logiques

On utilisera ces opérateurs dans les boucles conditionnelles principalement. Chaquecondition correspondant à une expression avec un opérateur de comparaison. Cesopérateurs fonctionnent comme un ET logique et un OU logique7.

4.5.Les opérateurs d'incrémentation

Signe Description Exemple Signification Résultat

x++ incrémentation y = x++ y = x + 1 6

x-- décrémentation y= x-- y = x - 1 4

Tab 4.5 : opérateurs d’incrémentation

7 Il s’agit d’un OU non exclusif, pour les puristes.

Page 17: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 17

5. LES FONCTIONS

5.1.Définition

C’est un groupe d’instruction prédéfini et exécuté lorsqu’il est appelé et que l’on peutappeler plusieurs fois.

En Javascript, il existe deux types de fonctions : les fonctions propres à Javascript, appelées méthodes8. Elles sont associées à un

objet en particulier. les fonctions que vous définissez vous-même. Ce sont celles qui nous intéressent ici.

5.2.Déclaration

Pour déclarer ou définir une fonction, on utilise le mot-clé function.La syntaxe d'une déclaration de fonction est la suivante :

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

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

5.3.Les fonctions dans l’en-tête

Il est plus prudent de placer les déclarations de fonctions dans l’en-tête<head>…</head> pour qu ‘elles soient prises en compte par l’interpréteur avant leurexécution dans le corps de la page <body>…</body>

5.4.L'appel d'une fonction

Syntaxe :nom_de_la_fonction();

Il faut que la fonction aie été définie avant l’appel, étant donné que l’interpréteur litle script de haut en bas.

8 Ces fonctions particulières seront l’objet d’une sous-partie du chapitre 8.NOTION OBJET.9 voir Chapitre 1.STRUCTURES DE DONNEES.

Page 18: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 18

5.5.Fonctions manipulant des valeurs

5.5.1.Passer une valeur à une fonction

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

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

function Exemple(texte) { //définition avec un paramètredocument.write(texte);}Exemple("Salut à tous"); // appel avec un paramètre

Résultat

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

Syntaxe :

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

Exemple 5.2 :

function cube(nombre) {y = nombre*nombre*nombre;return y; //retour de valeur}

x = cube(5); //appel avec paramètredocument.write(x); //résultat

Résultat

5.5.2.Retourner une valeur

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

Page 19: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 19

Exemple 5.3 :

function cube(nombre) { //Définition de la fonctionvar c = nombre*nombre*nombre ;return c; //Retour du cube du paramètre}var x = cube(5) ; // appel avec paramètredocument.write (x) ; //affichage

NB : Le mot-clé return est facultatif.

5.6.Variables locales et variables globales

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

Exemple 5.4 :

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

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

Exemple 5.5 :

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

Les variables déclarées tout au début du script, en dehors et avant toutes fonctions,seront toujours globales, qu'elles soient déclarées avec var ou de façon contextuelle.

Exemple 5.6 :

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

Page 20: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 20

6. LES STRUCTURES DE CONTROLE

6.1.Les structures algorithmiques

Quelque soit le langage informatique utilisé10, un programme informatique utilise 3catégories principales d’instructions. Ce sont : les instructions séquentielles. les instructions alternatives, ou conditionnelles. les instructions itératives, ou répétitives.

Nous verrons chacun des types de structures, en comparant l’algorithme et le codeJS.

6.2.La structure séquentielle

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

Algorithme Code JSDEBUTInstruction1Instruction2FIN

{Instruction1Instruction2}

6.3.Les instructions conditionnelles

6.3.1.L’expression if … else

Il s’agit de tester une condition et d’effectuer une série d’instructions si la conditionest vraie et si elle est fausse, effectuer une autre série d’instructions.

Algorithme Code JSSI conditionALORS Instructions1SINON Instructions2FINSI

If (condition) {Instruction1}

else {Instruction2}

10 Ce chapitre, excepté pour quelques expressions, est valables pour de nombreux langages, notamment leC++.

Page 21: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 21

Tab. 6.1 : Expression conditionnelle if…else

Exemple 6.1 :

x = prompt ("votre age?","age");if ( x < 40) {

alert ('vous êtes jeune') ;}

else {alert ('vous êtes vieux') ;}

Résultat

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

6.3.2.L’expression () ? :

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

Algorithme Code JSSI conditionALORS Instructions1SINON Instructions2FINSI

(condition) ?instruction 1 :instruction 2

Tab. 6.2 : Expression conditionnelle () ? :

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

Exemple 6.2 :

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

Résultat

Page 22: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 22

6.4.Les instructions itératives

6.4.1.L’itération for

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

Algorithme Code JSPOUR i = valeurinitiale A i = valeurfinaleREPETER instructionsFIN POUR

For (val initiale ;condition ;incrémentation) {Instructions}

Tab. 6.3 : Expression itérative for

Exemple 6.3 :

for (i = 0; i < 10; i++) {document.write(i + " ");}

Résultat

6.4.2.L’itération while

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

Algorithme Code JSTANT QUE (conditionvraie)REPETER instructionsFIN TANT QUE

while (condition) {instructions}

Tab. 6.4 : Expression itérative while

Exemple 6.4 :

i = 0;while (i < 10) {document.write(i + " ");i++;}

Résultat

Page 23: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 23

6.5.Interrompre une boucle

6.5.1.L’instruction break

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

Exemple 6.5 :

for (i = 0; i < 10; i++) {if (i == 5) {break;}document.write(i + “ “);

}

Résultat

6.5.2.L’instruction continue

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

Exemple 6.6 :

for (i = 0; i < 5; i++) {if (i == 2) {continue ;}document.write(i + ‘<br>’);

}

Résultat

6.6.Exercice

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

Solution

Page 24: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 24

7. LES BOITES DE MESSAGE

7.1.Généralités

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

7.2.Alert()

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

Syntaxe :alert (paramètres) ;

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

Exemple 7.1 :

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

Résultat

7.3.Prompt()

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

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

La méthode retourne la valeur du champ si le bouton « OK » est choisi dans le casinverse (bouton « Annuler »), la variable reçoit la valeur « NULL ».

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

Page 25: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 25

La valeur par défaut à afficher dans la boite d’invite.

Exemple 7.2 :

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

Résultat

7.4.Confirm()

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

Syntaxe :

variable = confirm ("texte");

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

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

Exemple 7.3 :

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

Résultat

7.5.Exercice : Confirmation et vérification

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

Pour afficher à l’écran, utiliser la méthode document.write(), en passant la chaîne àafficher en paramètre.

Page 26: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 26

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

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

Solution

Page 27: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 27

8. NOTION OBJET

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

8.1.Le concept objet

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

8.2.Création d’un objet

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

Syntaxe :var objet = new classe ();

Exemple 8.1 :var montableau = new Array ();

8.3.Accès aux propriétés et aux méthodes

On accède aux propriétés – et aux méthodes – d’un objet en accolant l’objet et sapropriété avec l’opérateur « . ».

Syntaxe :objet.propriétéobjet.méthode()

Exemple 8.2: par extrapolation

Rémi = new Homme () ;Rémi.yeux = "bleus" ;Rémi.cheveux = "bruns" ;

Page 28: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 28

Exemple 8.3:

document.write ("Hello world !");

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

8.4.L’objet thisIl existe un objet très utile en JS objet : this. Même s’il sera plus utile en

programmation objet, lorsque vous créerez vos classes. Il s’agit d’un objet qui représentel’objet en cours. Il possède alors les propriétés et les méthodes de l’objet. Etant donné sonutilité minime avant la programmation objet, je ne donnerai pas d’exemple ici.

Page 29: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 29

9. LES FORMULAIRES

9.1.Généralités

9.1.1.Présentation

On attaque ici le gros morceau du JS. Sans les formulaires, les pages HTML neproposent aucune interactivité avec l’utilisateur. En effet, la page appelée est envoyée par leserveur et le browser ne fait que l’afficher, il ne peut rien faire avec le serveur. Les champsde formulaire (form) permettent l’utilisateur d’entrer des informations auxquelles la pagepourra réagir. Ces réactions seront programmées à l’avance par vous. Cela reste assezlimité, puisque l’interaction ne quitte pas la machine du client, mais on peut effectuerquelques traitements. Mon but n’est pas de vous apprendre le HTML, je ne reviendrai doncpas sur le fonctionnement des balises.

Autre point, j’indique ici, par commodité, les propriétés JS, dont on se servira plusloin. Ne vous en préoccupez pas si vous ne comprenez pas de quoi il s’agit.

9.1.2.La balise form

Chaque formulaire doit être encadré par les balises <form>…</form>. Toutes lesbalises seront comprises entre ces deux-là.

Si vous travaillez avec PHP ou un autre langage, vous aurez sûrement besoind’envoyer les informations à un serveur. Dans ce cas, indiquez dans la balise <form> laméthode (post ou get) et l’URL du script qui traitera l’information.

Exemple 9.1 :

<form method=’post’ action=’traitement.php’>………</form>

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

Exemple 9.2 :

<form method=’post’ action=’mailto:e-mail’>………</form>

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

Page 30: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 30

9.2. Champ de texte

9.2.1.Ligne de texte

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

Syntaxe HTML :

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

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

(facultatif mais conseillé).

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

Exemple 9.3 :

<form method=”post” action=”mailto:[email protected]”><input type=”text” name=”text1” size=20maxlength=40><br><input type="submit"name="envoi"value="envoyer"></form>

Résultat

9.2.2.Zone de texte

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

Syntaxe HTML :

<textarea name=”nom” rows=x cols=y>texte par défaut</textarea>

Page 31: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 31

Paramètres HTML : name : le nom du champ (servira lors de la programmation) rows : le nombre de lignes affichés à l’écran. Si le texte est trop long, la zone de texte

défilera. cols : le nombre de colonnes affichées à l’écran.

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

Exemple 9.4 :

<form method=”post”action=”mailto:[email protected]”><textarea name=”text2” rows=5 cols=20>zone de texte</textarea><br><input type="submit"name="envoi"value="envoyer"></form>

Résultat

9.2.3.Champ password

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

Syntaxe HTML :

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

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

(facultatif mais conseillé).

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

Page 32: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 32

Exemple 9.5 :

<form method=”post” action=”mailto:[email protected]”><input type=”password” value=”password”name=”text1” size=20 maxlength=40><br><input type="submit"name="envoi"value="envoyer"></form>

Résultat

9.3.Cases à sélectionner

9.3.1.Boutons radios

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

Syntaxe HTML :

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

Paramètres HTML : name : le nom du champ (servira lors de la programmation) il doit être identique

pour chaque choix. value : la valeur que vous voulez afficher dans le champ (facultatif). checked : à mettre sur un seul bouton, qui sera sélectionné par défaut.

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

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

Page 33: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 33

Exemple 9.6 :

<form method=”post” action=”mailto:[email protected]”><input type=”radio” name=”choix” value=”1”>choix 1<br><input type=”radio” name=”choix” value=”2”>choix 2<br><input type=”radio” name=”choix” value=”3”>choix 3<br><input type="submit"name="envoi"value="envoyer"></form>

Résultat

9.3.2.Checkbox

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

Syntaxe HTML :

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

Paramètres HTML : name : le nom du champ (servira lors de la programmation). Il doit être différent

pour chaque choix. value : la valeur que vous voulez afficher dans le champ (facultatif). checked : à mettre sur un (ou plusieurs) bouton, qui sera sélectionné par défaut.

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

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

Page 34: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 34

Exemple 9.7 :

<form method=”post” action=”mailto:[email protected]”><input type=”checkbox” name=”choix1” value=”1”>choix 1<br><input type=”checkbox” name=”choix2” value=”2”>choix 2<br><input type=”checkbox” name=”choix3” value=”3”>choix 3<br><input type="submit"name="envoi"value="envoyer"></form>

Résultat

9.4.Liste de sélection

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

Syntaxe HTML :

<select name=”nom” size=x><option value="valeur"> texte</select>

Paramètres HTML : name : le nom du champ (servira lors de la programmation). size : le nombre d’options que vous voulez afficher à l’écran. S’il n’est pas précisé, la

liste n’affiche qu’une seule ligne. value : la valeur que vous voulez afficher dans le champ (facultatif). selected : à mettre dans une balise <option>. Cette option sera sélectionnée par

défaut. Multiple : à mettre dans une balise <select>. Autorise la sélection de plusieurs

options dans la liste déroulante.

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

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

Page 35: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 35

Exemple 9.8 :

<form method=”post” action=”mailto:[email protected]”><select name=”choix” size=3><option value=”1”>choix 1<option value=”2”>choix 2<option value=”3”>choix 3</select><br><input type="submit"name="envoi"value="envoyer"></form>

Résultat

Exemple 9.9 :

<form method=”post” action=”mailto:[email protected]”><select name=”choix”><option value=”1”>choix 1<option value=”2”>choix 2<option value=”3”>choix 3</select><br><input type="submit"name="envoi"value="envoyer"></form>

Résultat

9.5.Bouton

9.5.1.Bouton simple

Syntaxe HTML :

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

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

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

Page 36: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 36

Exemple 9.10 :

<form method=”post” action=”mailto:[email protected]”><input type="button"name="click"value="Cliquez"></form>

Résultat

9.5.2.Bouton reset

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

Syntaxe HTML :

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

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

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

Exemple 9.11 :

<form method=”post” action=”mailto:[email protected]”><select name=”choix” size=3><option value=”1”>choix 1<option value=”2”>choix 2<option value=”3” selected>choix 3</select><br><input type="reset" name="effacer"value="effacer"></form>

Résultat

9.5.3.Bouton submit

Page 37: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 37

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

Syntaxe HTML :

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

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

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

Exemple 9.12 :

<form method=”post” action=”mailto:[email protected]”><select name=”choix” size=3><option value=”1”>choix 1<option value=”2”>choix 2<option value=”3” selected>choix 3</select><br><input type="submit" name="envoi"value="envoyer"></form>

Résultat

9.6.Contrôle caché

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

Syntaxe HTML :

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

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

Propriétés JS : name : indique le nom du contrôle.

Page 38: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 38

value : indique la valeur actuelle du contrôle. defaultselected : indique la valeur par défaut du contrôle.

Exemple 9.13 :

<form method=”post” action=”mailto:[email protected]”><input type="hidden" name="date"value="30/06/2004"><input type=”button” name=”click” value=”Vouspouvez cliquez!”></form>

Résultat

Page 39: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 39

9.7.Un formulaire complet

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

Exemple 9.14 :

<form method=”post” action=”traitement.php”>Inscription au stage<br>Identité<br><input type="hidden" name="date" value="15/06/04"><input type=text name=”nom” value=”Nom”>&nbsp;<input type=text name=”prénom” value=”Prénom”><br><input type=text name=”date” value=”Date denaissance ”><br>Activité<br><select name=”Activité”><option value=”Collégien”>Collégien<option value=”Lycéen”>Lycéen<option value=”Etudiant”>Etudiant<option value=”Salarié”>Salarié<option value=”Fonctionnaire”>Fonctionnaire<option value=”Patron”>Patron</select><br>Qualification(s):<br><input type=”checkbox” name=”choix1” value=”bafa”>BAFA<br><input type=”checkbox” name=”choix2” value=”bafd”>BAFD<br><input type=”checkbox” name=”choix3” value=”rien”>rien<br>Semaine choisie:<br><input type=”radio” name=”semaine” value=”1”>1ère<br><input type=”radio” name=”semaine” value=”2”>2ème<br><input type=”radio” name=”semaine” value=”3”>3ème<br>Vos motivations :<br><textarea name="motivations" rows=5cols=20></textarea><br><input type="submit" name="envoi" value="envoyer">&nbsp;<input type="reset" name="effacer" value="effacer"></form>

Résultat

Page 40: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 40

9.8.Les objet du formulaire

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

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

Syntaxe :document.formulaire.élément.propriété

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

Exemple 9.15 :

<html><head><script language = "Javascript">function f() {

document.form1.texte.value="voici du texte";}

</script></head><body onLoad="f();"><form name="form1"><input type="text" name="texte" value=""></form></body></html>

Résultat

Dans l’exemple 9.15, la fonction est appelée à la fin du chargement grâce augestionnaire d’événement13 placé dans la balise <body>.

De cette façon, on peut accéder à chaque élément de chaque formulaire de la page.Il est important de donner un nom, à la fois au formulaire et au contrôle. Ce nom doit depréférence être explicite, même si celui du formulaire peut rester classique, étant donné

11 Voir, pour ceux qui auraient oublié, le chapitre 8.NOTION OBJET.12 Voir pour cela le chapitre 12.LES OBJETS DU NAVIGATEUR.13 Nous verrons cela dans le chapitre 10.LES EVENEMENTS.

Page 41: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 41

qu’il y en a rarement plusieurs sur une seule et même page. Lorsque nous travaillerons avecles frames, en revanche, ce nom sera important.

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

9.9.Exercice

Le but de cet exercice est d’arriver à un formulaire complet et assez ergonomique. Ilfaudra faire attention aux choix des contrôles et à la disposition. La solution proposée n’estpas parfaite – loin de là – mais elle illustre à peu près ce qu’est un formulaire de qualitécorrecte.

Le formulaire à créer est un formulaire d’adhésion à une association, pour l’activitééchecs. Les informations demandées sont les suivantes : nom, prénom, date de naissance,numéro de téléphone, adresse, mail, profession (choix, dont « autres : préciser »), centresd’intérêt (choix), niveau de jeu, motivations. Vous présenterez ce formulaire de façon assezesthétique, mais la police et la taille de caractères ne sont pas importantes, cela dépendplutôt du cours HTML. Bien entendu, on envoie le tout à « traitement.php », par laméthode « post » en cliquant sur un bouton.

Solution

Page 42: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 42

10. LES EVENEMENTS

10.1.Généralités

10.1.1.Présentation

Les événement sont l’intérêt du JS en matière de programmation Web. Il donnentune interactivité à la page que vous consultez, ce qui n’existe pas avec le HTML, si onexcepte bien entendu le lien hypertexte. Le JS permet de réagir à certaines actions del’utilisateur. On nomme évènement le mot Event, et gestionnaire d’événement le mot-cléonEvent.

10.1.2.Fonctionnement

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

Syntaxe :

<balise onEvent=”code">

balise : désigne le nom de la balise HTML qui supporte l’événement. onEvent : désigne le gestionnaire d’événement associé à l’événement Event. Le code inséré entre guillemets fait le plus souvent référence à une fonction définie

dans les balises <head>…</head>. Il peut cependant s’agir d’instructionsdirectement.

Plusieurs gestionnaires d’évènements peuvent être placés dans la même balise.Certaines balises n’appartenant pas à un formulaire peuvent supporter des gestionnairesd’évènement.

Exemple 10.1 :

<a href=”http://www.google.fr” onClick=”alert(‘vousavez cliqué!’);” onMouseOver=”alert(‘Héhé’) ;”>click?</a>

Résultat

Page 43: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 43

10.2.Le clic de souris

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

Gestionnaire d’événement :

onClick

Exemple 10.2 :

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

Résultat

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

10.3.Le chargement

10.3.1.Load

Lorsque la page que vous consultez finit de se charger.

Gestionnaire d’événement :

onLoad

Exemple 10.3 :

<body onLoad=”alert(‘la page est chargée !’) ;">

Résultat

Balises supportées :<body>, <frameset>

Page 44: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 44

10.3.2.UnLoad

Lorsque vous quittez un document ou une page web.

Gestionnaire d’événement :

onUnLoad

Exemple 10.4 :

<body onUnLoad=”alert(‘Vous quittez la page !’) ;">

Résultat

Balises supportées :<body>, <frameset>

10.3.3.Error

Lorsque le chargement d’une page ou d’un image s’interrompt en erreur.

Gestionnaire d’événement :

onError

Exemple 10.5 :

<img src="pix.gif" onError=”alert(‘Erreur dechargement !’) ;">

Balises supportées :<body>, <frameset>, <img>

10.3.4.Abort

Lorsque vous interrompez le chargement d’une image.

Gestionnaire d’événement :

onAbort

Exemple 10.6 :

Page 45: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 45

<img src="pix.gif" onAbort=”alert(‘Vous avezinterrompu le chargement de l’image !’) ;">

Balises supportées :<img>

10.4.Le passage de la souris

10.4.1.MouseOver

Lorsque vous survolez un lien ou une zone d’image activable. Un zone d’imageactivable est une partie d’image qui a été transformée en lien. Je ne reviendrai pas sur cesujet, ce n’est pas l’objet de ce cours.

Gestionnaire d’événement :

onMouseOver

Exemple 10.7 :

<a href="http://www.google.fr"onMouseOver=”alert(‘Pour aller sur google.fr,cliquer ici’) ;">http://www.google.fr</a>

Résultat

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

10.4.2.MouseOut

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

Gestionnaire d’événement :

onMouseOut

Exemple 10.8 :

<a href="http://www.google.fr"onMouseOut=”alert(‘Vous ne voulez pas yaller ?’) ;">http://www.google.fr</a>

Page 46: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 46

Résultat

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

10.5.Le focus

10.5.1.Focus

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

Gestionnaire d’événement :

onFocus

Exemple 10.9 :

<input type="text" value="votre nom" name=”nom”onFocus=”alert(‘Ecrivez votre nom ici’) ;">

Résultat

Balises supportées :<input type="text">, <select>, <textarea>, <input type="password">

10.5.2.Blur

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

Gestionnaire d’événement :

onBlur

Exemple 10.10 :

<input type="text" value="votre nom" name=”nom”onBlur=”alert(‘Vous n\’avez rien oublié ?’) ;">

Résultat

Balises supportées :

Page 47: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 47

<input type="text">, <select>, <textarea>, <input type="password">

Page 48: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 48

10.6.Les changements

Lorsque la valeur d’un texte ou d’une option change dans un formulaire. Si vouscliquez dans la zone de texte mais que vous ne touchez pas au texte, rien ne se produit.

Gestionnaire d’événement :

onChange

Exemple 10.11 :

<input type="text" value="votre nom" name=”nom”onChange=”alert(‘Vous avez changé votre nom ??’) ;">

Résultat

Balises supportées :<input type="text">, <select>, <textarea>, <input type="password">

10.7.La sélection

Lorsque vous sélectionnez du texte dans un champ de texte.

Gestionnaire d’événement :

onSelect

Exemple 10.12 :

<input type="text" value="votre nom" name=”nom”onSelect=”alert(‘Vous avez sélectionné unchamp’) ;">

Résultat

Balises supportées :<input type="text">, <textarea>

Page 49: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 49

10.8.L’envoi

Lorsque vous cliquez sur un bouton « submit » d’un formulaire de type « post » ou« get ».

Gestionnaire d’événement :

onSubmit

Exemple 10.13 :

<input type="submit" value="Envoyer" name=”envoi”onSubmit=”alert(‘C’est parti !’) ;">

Résultat

Balises supportées :<input type="submit">

10.9.Le reset

Lorsque vous sélectionnez un champ de texte.

Gestionnaire d’événement :

onReset

Exemple 10.14 :

<input type="reset" value="Effacer" name=”effacer”onSubmit=”alert(‘On efface tout !’) ;">

Résultat

Balises supportées :<input type="reset">

10.10.L’utilisation de l’objet document

Avant de voir les évènements, l’intérêt de l’accès au éléments à travers l’objetdocument était discutable. Maintenant, on voit que l’on peut changer des valeurs selon desévènements, ce qui est très intéressant. Il est aussi possible de demander confirmation, de

Page 50: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 50

demander si on veut vraiment changer la valeur… Tout est permis. Cette partie ne comportepas d’exemple, car la partie 10.11.Exemple concret en présente un assez complet.

10.11.Exemple concret

Voici un exemple – parmi tant d’autres – de ce que pourrait être un formulaireinteractif, avec tous les évènements auxquels on peut penser.

Exemple 10.15 :

<HTML><HEAD><TITLE>New Document</TITLE><script language="Javascript">var TestLog = 0; //test pour le loginfunction ChangeLog() {

TestLog++; //incrémente le test//si le login a été changé plus d'une foisif (TestLog > 1) {

alert("Vous changez de login?\n Décidez-vous!");}

}function VerifPass () {

// si les deux password sont différentsif (document.form1.pass1.value != document.form1.pass2.value) {

alert("Vous avez entré deux password différents !\nVérifiezles deux.");

}}

function VerifMail () {//confirmation du mailvar test = confirm ("Votre mail est bien : " +document.form1.mail.value + " ?");if (test == false) { //si l'internaute ne confirme pas

alert("N'oubliez pas de changer votre mail!");}

}</script></HEAD><BODY><form name="form1">

<center>Formulaire d'inscription sur notre site</center><br/>Login : <input type="text" name="login" onChange="ChangeLog();"

value="login"><br/>Password : <input type="password" name="pass1"><br/>Password (vérification) : <input type="password" name="pass2"

onBlur="VerifPass();"><br/>Adresse e-mail : <input type="text" name="mail"

onBlur="VerifMail();" value="@"><br/>Vous voulez recevoir la newsletter? <input type="radio"

name="news" value="yes">Oui <input type="radio" name="news" value="no"onClick="alert('Tant pis pour vous!')">Non<br/>

<input type="submit" name="sub" value="Envoi"> <inputtype="reset" name="reset" value="Effacer"></form></BODY></HTML>

Page 51: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 51

Résultat

10.12.Exercice

10.12.1.Le bouton

L’exercice consiste à faire un bouton dont la valeur s’incrémente à chaque clic. Cen’est pas très compliqué.

Solution

10.12.2.La phrase

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

Solution

Page 52: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 52

11. L’OBJET ARRAY

11.1.Généralités

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

11.2.Création et affectation d’un tableau

11.2.1 Création d’un tableau

On créé un tableau comme n’importe quel objet de classe. On invoque leconstructeur de classe. On indique en paramètre du constructeur le nombre maximumd’éléments (x) que l’on souhaite entrer dans le tableau. Ce nombre est cependant facultatif,car JS prend en compte le numéro du dernier élément entré comme taille du tableau si le cenombre n’est pas indiqué.

Syntaxe :

variable = new Array(x) ;

Exemple 11.1 :

var MonTableau = new Array (10) ;

11.2.2 Affectation d’un tableau

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

Syntaxe :

variable = new Array(x) ;variable [i] = y;

Exemple 11.2 :

var MonTableau = new Array (2) ;

Page 53: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 53

MonTableau [0] = 7 ;MonTableau [1] = 4 ;

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

Exemple 11.3 :

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

Résultat

11.3.Accès aux données d’un tableau

On accède aux données d’un tableau en indiquant le numéro de l’élément entrecrochets. On affecte cette valeur à une variable, par exemple. On peut aussi la rentrercomme paramètre d’une fonction.

Syntaxe :

variable1 = new Array(x) ;variable1 [i] = y ;

variable2 = variable1 [i] ;

Exemple 11.4 :

var MonTableau = new Array (2) ;MonTableau [0] = 7 ;var element = MonTableau [0] ;document.write (MonTableau [0]) ;

Résultat

11.4.Tableau à 2 dimensions

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

Page 54: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 54

Syntaxe :

variable = new Array (x) ;variable [i] = new Array (y) ;

Exemple 11.5 :

var MonTableau = new Array (2) ;MonTableau [0] = new Array (7) ;

Il est bien entendu plus rapide d’utiliser une instruction itérative pour créer cetableau à 2 dimensions.

Exemple 11.6 :

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

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

11.5.Propriétés et méthodes

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

11.5.1.Propriété

L’objet Array ne possède qu’une propriété – length – qui désigne le nombred‘éléments du tableau.

Syntaxe :variable = new Array (x) ;

y = variable.length ;

Exemple 11.7 :

var MonTableau = new Array (2) ;document.write (MonTableau.length) ;

Page 55: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 55

Résultat

Page 56: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 56

11.5.2.Méthodes

L’objet Array possède plusieurs méthodes qui permettent de manier les éléments dutableau.

Syntaxe :

tableau.méthode() ;

join (séparateur) : regroupe tous les éléments du tableau en une seulechaîne. Chaque élément est séparé par un séparateur. Ci celui-ci n’est pas précisé, cesera une virgule.

reverse () : inverse l’ordre des éléments sans les trier. sort () : Renvoie les éléments par ordre alphabétique, s’ils sont de même nature. concat(tableau) : concatène le tableau passé en paramètre avec celui de la

méthode. pop() : supprime le dernier élément du tableau. push(élément1,…) : ajoute l(es) élément(s) passé(s) en paramètre à la fin du tableau. shift() : supprime le premier élément du tableau. slice(début,fin) : renvoie les éléments contenus entre la position supérieure

ou égale à début et inférieure à fin. splice(début, nombre, éléments) : supprime les éléments à partir de la

position début et sur nombre de position. Les éléments sont remplacés par ceuxfournis en paramètre (facultatif).

unshift(élément1,…) : ajoute l(es) élément(s) passé(s) en paramètre au débutdu tableau.

Exemple 11.8 :

var MonTableau = new Array (4) ;MonTableau [0] = “Moi” ;MonTableau [1] = “Toi” ;MonTableau [2] = “Lui” ;MonTableau [3] = “Elle” ;MonTableau.reverse() ;document.write (MonTableau.join(‘ ‘)) ;MonTableau.sort() ;document.write ("<br>" + MonTableau.join(‘ ‘)) ;

Résultat

Page 57: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 57

11.6.Exemple concret

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

Exemple 11.9 :

<script language="Javascript">var Tableau = new Array (10) ; // objet tableaufor (i = 0; i < 10; i++) { // pour chaque élément...

Tableau[i] = new Array(10); // on redéfinit un tableau}

// remplissage du tableaufor (i = 0; i < 10; i++) { /* pour chaque élément de la premièredimension*/

for (j = 0; j < 10; j++) { /* pour chaque élément de laseconde dimension*/

Tableau[i][j] = i + "." + j; //on remplit l'élément}

}// affichage du tableaufor (i = 0; i < 10; i++) { /* pour chaque élément de la premièredimension */

for (j = 0; j < 10; j++) { /* pour chaque élément de laseconde dimension */

document.write( Tableau[i][j] + " ; " ); /*on affichel'élément, avec un point virgule */

}document.write ("<br>"); /* a chaque unité, on revient à la

ligne. */}

</script>

Résultat

11.7.Exercice

Le but de l’exercice est d’afficher les entiers compris entre 1 et 10 inclus dans l’ordredécroissant. Vous utiliserez pour cela un tableau de 10 éléments.

Solution

Page 58: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 58

12.LES OBJETS DU NAVIGATEUR

12.1.Généralités

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

12.2.Arborescence

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

navigator

plugins []

window

parent

frames[]

top

opener

history

location

external

screen

event

document

document

all / layers

frames[]

images[]

anchors[]

applets[]

plugins[]

links[]

forms []

elements []

Page 59: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 59

Page 60: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 60

13.L’OBJET NAVIGATOR

Il s’agit – comme son nom l’indique – de votre navigateur, ou votre browser. Les deuxprincipaux sont sûrement Microsoft Internet Explorer et Netscape. L’objet navigatorpossède toutes les caractéristiques de votre navigateur ainsi que certaines de votreordinateur. Cela peut s’avérer utile pour tester la compatibilité de certains codes avec unbrowser.

L’objet navigator étant intégré dans le langage, il n’est pas nécessaire de créerune instance de cette classe.

13.1.Les propriétés de navigatorToutes ces propriétés ne font que donner des informations sur votre type de

navigateur. Pour y accéder, on suit la syntaxe habituelle d’un objet.

Syntaxe :

variable = navigator.propriété ;

Les propriétés qui suivent fonctionnent sous tous les navigateurs. Les compatibilité neseront évoqués que pour Netscape et Internet Explorer.

appCodeName : nom de code du navigateur. appName : nom complet du navigateur. appVersion : numéro de version du navigateur ainsi que d’autres informations de

plate-forme. userAgent : informations de appCodeName et de appVersion réunies.

Certaines propriétés ne fonctionnent qu’avec Microsoft Internet Explorer. Veillez àtester le type de browser avant d’exécuter le script !

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

Page 61: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 61

Une propriété existe sous Netscape pour remplacer la propriété browserLanguaged’Internet Explorer.

language : code langue du browser.

13.2.Les méthodes de navigatorDans cette partie, je vous cite les méthodes de navigator, mais

malheureusement, je ne suis pas en mesure de vous expliquer leur utilité. Si vous le savez,merci de me le faire savoir.

Syntaxe :

variable = navigator.méthode() ;

javaEnabled() taintEnabled()

13.3.Les objets de navigatorL’objet navigator contient un autre objet, qui n’hérite pas de lui. Il s’agit du tableau

plugins, qui n’est reconnu que par Netscape. Il s’agit de la liste de tous les pluginsinstallés. Personnellement, je ne vois pas l’utilité de cet objet, mais par souci didactique, jevous le décris.

Syntaxe :

variable = navigator.plugin.propriété ;

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

Page 62: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 62

13.4.Exemple

Le but de l’exemple 13.1 est d’afficher les informations du navigateur, en fonction decelui-ci. On commencera donc par tester le type de navigateur. L’exemple 13.1 n’est pascommenté car il n’ a rien de nouveau excepté les propriétés vues ci-dessus.

Exemple 13.1 :

<script language="Javascript">document.write (navigator.appCodeName + "<br>");document.write (navigator.appName + "<br>");document.write (navigator.appVersion + "<br>");document.write (navigator.userAgent + "<br>");if (navigator.appName == "Microsoft Internet Explorer") {

document.write (navigator.appMinorVersion + "<br>");document.write (navigator.browserLanguage + "<br>");document.write (navigator.userLanguage + "<br>");document.write (navigator.systemLanguage + "<br>");document.write (navigator.cpuClass + "<br>");document.write (navigator.platform + "<br>");document.write (navigator.cookieEnabled + "<br>");document.write (navigator.onLine + "<br>");}

else {document.write (navigator.language + "<br>");}

</script>

Résultat

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

Page 63: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 63

14.L’OBJET WINDOW

Il s’agit – comme son nom l’indique – de la fenêtre du browser en cours d’exécution.Tous les éléments de la fenêtre sont des propriétés ou des méthodes de window.

L’objet window étant intégré dans le langage, il n’est pas nécessaire de créer uneinstance de cette classe.

14.1.Les propriétés de windowToutes ces propriétés correspondent à des éléments de la fenêtre ouverte. Elles

permettent de changer quelques détails sympathiques dans le visuel d’une page web. Poury accéder, on suit la syntaxe habituelle d’un objet.

Syntaxe :

window.propriété;

defaultStatus : le texte par défaut affiché dans la barre d’état. status : le texte à afficher dans la barre d’état, prioritaire par rapport à

defaultStatus. name : le nom de la fenêtre screenTop : ordonnée du point supérieur gauche de la fenêtre. screenLeft : abscisse du point supérieur gauche de la fenêtre. closed : booléen indiquant si la fenêtre est fermée.

14.2.Les méthodes de window14.2.1.Généralités

L’objet window possède de nombreuses méthodes, dont certaines que nous avonsdéjà vu précédemment – les boîtes de dialogue -, et qui peuvent offrir quelques atouts àvotre page web. La plupart renvoient une valeur à la variable qui appelle la fonction.

Syntaxe :

variable = window.méthode();

Certaines propriétés ne nécessitent pas de préciser le suffixe window. pourfonctionner. C’est notamment le cas des boites de dialogue.

Page 64: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 64

14.2.2.Liste des méthodes

alert (‘texte’) : boite de message avec un bouton unique. prompt (‘texte’, ‘valeur_défaut’) : boite d’invite avec un texte

informatif et une zone de texte avec une valeur par défaut facultative. confirm (‘texte’) : boite de confirmation avec un texte informatif et deux

boutons « OK » et « annuler ». print (‘texte’) : afficher le texte dans la page. open (‘URL’, ‘nom’, options) : ouvre une page pop-up avec les

caractéristiques données en paramètres. close () : ferme la fenêtre. focus () : donne le focus à la page. blur () : enlève le focus à la page. moveBy (x,y) : déplacement relatif du coin supérieur gauche de la fenêtre. moveTo (x,y) : déplacement absolu du coin supérieur gauche de la fenêtre. resizeBy (x,y) : redimensionnement relatif de la fenêtre. resizeTo (x,y) : redimensionnement absolu de la fenêtre. scrollBy (x,y) : scroll relatif. scrollTo (x,y) : scroll absolu. setTimeOut (‘fonction’, temps) : déclenche une minuterie en

millisecondes. clearTimeout(‘timer’) : suspend la minuterie. stopTimeOut (‘timer’) : arrête une minuterie. setInterval(code, délai) : exécute le code – sous forme de String - passé

en paramètre à chaque fois que le délai est écoulé. clearInterval(timer) : arrête la minuterie définie avec setInterval(). stop() : arrête le chargement de la page. home() : ouvre la page de démarrage de l’internaute.

14.2.3.Exemples

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

Page 65: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 65

Exemple 14.1 :

<HTML><HEAD><TITLE>New Document</TITLE><script language="Javascript">var seconds = 0;var minutes = 0;var hours = 0;function chrono () {

if (seconds == 60) {seconds = 0;minutes++;}

if (minutes == 60) {minutes = 0;hours++;}

h = hours;m = minutes;s = seconds;if (s < 10) s = "0" + s;if (m < 10) m = "0" + m;if (h < 10) h = "0" + h;document.form1.chrono.value = h + ":" + m + ":" + s;seconds++;}

</script></HEAD><BODY onLoad="window.setInterval('chrono();',1000)"><form name="form1"><center><input type="text" value="" name="chrono" size=6></center></form></BODY></HTML>

Résultat

Page 66: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 66

Exemple 14.2 :

<HTML><HEAD><TITLE>New Document</TITLE><script language="Javascript">var seconds = 0;var minutes = 0;var hours = 0;function chrono () {

if (seconds == 60) {seconds = 0;minutes++;}

if (minutes == 60) {minutes = 0;hours++;}

h = hours;m = minutes;s = seconds;if (s < 10) s = "0" + s;if (m < 10) m = "0" + m;if (h < 10) h = "0" + h;document.form1.chrono.value = h + ":" + m + ":" + s;seconds++;window.setTimeout('chrono()',1000);}

</script></HEAD><BODY onLoad="chrono();"><form name="form1"><center><input type="text" value="" name="chrono" size=6></center></form></BODY></HTML>

Résultat

14.3.Les évènements de windowOn peut rattacher certains évènements à l’objet window. Il seront placés dans la

balise <body>, grâce au gestionnaire d’événement onEvent.

Syntaxe :

<body onEvent=”code”>

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

Page 67: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 67

resize : redimensionnement de la fenêtre.

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

14.4.Les objets de windowL’objet window contient plusieurs autres objets assez réduits que je présente dans

cette partie.

Syntaxe :

variable = window.objet.propriété ;variable = window.objet.méthode() ;

14.4.1.L’objet frames

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

Syntaxe :

variable = window.frames[i] ;

14.4.2.L’objet parent

Il s’agit de la page principale, qui contient la déclaration de toutes les frames. Ilpossède les mêmes attributs que l’objet window.

Syntaxe :

variable = window.parent.méthode() ;variable = window.parent.propriété ;

14.4.3.L’objet top

Il s’agit de la page de plus haut niveau. Il possède les mêmes attributs que l’objetwindow.

Syntaxe :

variable = window.top.méthode() ;variable = window.top.propriété ;

Page 68: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 68

14.4.4.L’objet opener

Il s’agit de la page responsable de l’ouverture de la page courante. Il possède lesmêmes attributs que l’objet window.

Syntaxe :

variable = window.opener.méthode() ;variable = window.opener.propriété ;

14.4.5.L’objet history

Il s’agit de l’historique des pages consultées. Il possède une propriété et 3 méthodes.Voici la propriété et les méthodes de cet objet, qui se déclarent selon la syntaxe objet.

Syntaxe :

variable = window.history.méthode() ;variable = window.history.propriété ;

length : le nombre d’entrées de l’historique. back () : permet de retourner à la page précédente. forward () : permet d’aller à la page suivante. go (numéro) : permet d’aller à la page du numéro passé en paramètre.

14.4.6.L’objet locationIl s’agit de toutes les informations contenues dans l’URL de la page en cours. Voici la

propriété et les méthodes de cet objet, qui se déclarent selon la syntaxe objet. L’objetwindow.location renvoie l’URL complète de la page en cours.

Syntaxe :

variable = window.location.méthode() ;variable = window.location.propriété ;

Les propriétés suivantes renvoient des informations plus précises concernant l’URL.Je ne précise pas à quoi elle renvoient exactement car ce n’est pas très utile dans ce cours.

Page 69: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 69

hash host hostName pathName href port protocole search : renvoie la partie de l’URL située après le « ? ».

Il existe deux propriétés de l’objet window.location, qui concernent toutes deux lerechargement de la page.

reload () : recharge la page. Ne fonctionne pas sous tous les navigateurs. replace (page) : recharge la page en cours sans modifier l’historique.

14.4.7.L’objet screen

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

Syntaxe :

variable = window.screen.propriété ;

availHeight : hauteur en pixels de la zone utilisable pour l’affichage. availWidth : largeur en pixels de la zone utilisable pour l’affichage. height : hauteur de la fenêtre en pixels - contient barres de menus, d’état, de titre

et de scrolling - . width : largeur de la fenêtre en pixels - contient barres de menus, d’état, de titre et

de scrolling - . colorDepth : Contient la profondeur de couleur en nombre de bits.

14.4.8.L’objet event

Il s’agit d’un objet propre à Microsoft Internet Explorer. Il renvoie le typed’événement qui a eu lieu.

Syntaxe :

variable = window.event.propriété ;

Page 70: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 70

Page 71: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 71

altKey : renvoie le code du caractère frappé au clavier. button : renvoie le type de clic de souris effectué.

14.4.9.L’objet external

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

Syntaxe :

variable = window.external.propriété ;

AddFavorite(URL,titre): Ajoute une ligne à la liste des favoris. Demandeconfirmation à l’internaute.

14.5.Exemple concret

Dans l’exemple 14.1, on a voulu afficher les attributs de la fenêtre (hauteur/largeur,place affichable) ainsi que l’URL en cours. Il n’y a pas de commentaires car les instructionsutilisées sont détaillées ci-dessus.

Exemple 14.3 :

<script language="Javascript">document.write (window.location + "<br>");document.write (window.screen.availHeight + "<br>");document.write (window.screen.availWidth + "<br>");document.write (window.screen.height + "<br>");document.write (window.screen.width + "<br>");</script>

Résultat

14.6.Exercice

Le but de l’exercice est de donner à l’utilisateur la possibilité de modifier la fenêtre àl’aide de boutons. Il pourra redimensionner et revenir à la taille initiale, la déplacer et laremettre en position initiale, lui enlever le focus, et la fermer. Lors de la fermeture,l’utilisateur sera averti par une boite de message.

Solution

Page 72: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 72

Page 73: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 73

15.L’OBJET DOCUMENT

Il s’agit – comme son nom l’indique – de la page en cours d’exécution. Tous leséléments de la page sont des propriétés ou des méthodes de document.

L’objet document étant intégré dans le langage, il n’est pas nécessaire de créer uneinstance de cette classe.

L’objet document fait partie de l’objet window, mais il n’est pas nécessaire depréciser le suffixe "window."

15.1.Les propriétés de documentToutes ces propriétés correspondent à des éléments de la page ouverte. Cela permet

d’uniformiser et de changer quelques détails de votre page. On les utilise grâce à la syntaxehabituelle.

Syntaxe :

document.propriété;

bgColor : couleur du fond. fgColor : couleur du texte. linkColor : couleur des liens ni actifs ni visités. alinkColor : couleurs des liens actifs. vlinkColor : couleurs des liens visités. cookie : chaîne de caractères contenant les cookie. lastModified : date de dernière modification du fichier source referrer : adresse de la page par laquelle la page en cours a été appelée. title : titre du document, indiqué par les balises <title>…</title>. N’est

modifiable qu’avec Microsoft Internet Explorer. fileSize : taille de la page en octets. defaultCharset : jeu de caractère du document chargé. mimeType : type du document chargé. URLUnencoded : URL complète de la page, avec les caractères spéciaux encodés. URL : URL de la page. protocol : protocole de chargement de la page. domain : domaine de l’URL complète de la page.

Page 74: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 74

Exemple 15.1 :

<script language="Javascript">document.write ("Taille du fichier : " + document.fileSize + "<br>");document.write ("Type mime : " + document.mimeType + "<br>");document.write ("Jeu de caractères : " + document.defaultCharset +"<br>");document.write ("URL décodée : " + document.URLUnencoded + "<br>");document.write ("URL : " + document.URL + "<br>");document.write ("Protocole : " + document.protocol + "<br>");document.write ("Dernière modification : " + document.lastModified +"<br>");</script>

Résultat

15.2.Les méthodes de documentL’objet document possède de plusieurs méthodes, dont certaines que nous avons

déjà vu précédemment.

Syntaxe :

variable = document.méthode();

Certaines propriétés ne nécessitent pas de préciser le suffixe window. pourfonctionner. C’est notamment le cas des boites de dialogue.

write (‘texte’) : affiche le texte et le code HTML dans la page courante. getSelection () : renvoie le texte qui a été sélectionné dans la page. handleEvents : créé un gestionnaire d’évènement. captureEvents : détecte un évènement. open () : ouvre une nouvelle fenêtre de votre browser. close () : ferme le flux d’affichage externe. getElementById(ID) : renvoie un objet HTML en fonction de son ID. A ne pas

confondre avec le Name. getElementsByName(nom) : renvoie un objet HTML en fonction de son name. getElementsByTagName(type) : renvoie un tableau de toutes les balises

HTML du type passé en paramètre.

Page 75: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 75

Exemple 15.2 :

<HTML><HEAD><TITLE>New Document</TITLE><script language="Javascript">function f() {

var tab = document.getElementsByTagName ("input");var result;for (i = 0; i < tab.length; i++) {

result = result + " " + (tab[i].value);}

document.form1.result.value = result;}

</script></HEAD><BODY><form name="form1"><input type="text" name="1" value=" "><br/><input type="text" name="2" value=" "><br/><input type="text" name="3" value=" "><br/><input type="text" name="4" value=" "><br/><input type="text" name="5" value=" "><br/><input type="button" value="click!" name="click" onClick="f();"><br/><textarea rows=4 cols=40 name="result"></textarea></form></BODY></HTML>

Résultat

15.3.Les évènements de documentOn peut rattacher certains évènements à l’objet document.

onClick : clic de souris sur un élément de la page. onDblClick : le double clic de souris. onKeyPress : la frappe d’une touche de clavier.

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

15.4.Les objets de documentL’objet document contient plusieurs autres objets assez réduits que je présente

dans cette partie.

Page 76: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 76

Syntaxe :

variable = document.objet.propriété ;variable = document.objet.méthode() ;

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

15.4.1.L’objet all

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

Syntaxe :

document.all[“calque”].style.propriété = x ;

15.4.2.L’objet layers

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

Syntaxe :

document.layers[“calque”].style.propriété = x ;

15.4.3.L’objet forms

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

Syntaxe :

document.forms[i].elements[j] ;

15.4.4.L’objet anchors

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

Page 77: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 77

Syntaxe :

document.anchors[i] ;

15.4.5.L’objet images

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

Syntaxe :

document.images[i] ;

15.4.6.L’objet appletsIl s’agit d’un tableau contenant toutes les applets java déclarés dans la page

courante. Il ne possède ni propriétés ni méthodes.

Syntaxe :

document.applets[i] ;

15.4.7.L’objet pluginsIl s’agit du tableau plugins, qui n’est reconnu que par Netscape. Il s’agit de la liste

de tous les plugins installés. Il est aussi rattaché à l’objet navigator. Je ne préciserai pasune nouvelle fois les propriétés. Pour cela, voyez la section 16.3.Les objets de navigator.

15.4.8.L’objet frames

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

Syntaxe :

document.frames[i] ;

Page 78: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 78

15.5.Exercice

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

Solution

Page 79: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 79

16.LES OBJET DU NOYAU JAVASCRIPT

16.1.Généralités

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

16.2.Quelques précisions

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

14 Pour les étourdis, il s’agit du chapitre 8.NOTION OBJET

Page 80: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 80

17.L’OBJET MATH

17.1.Fonctions

Les fonctions mathématiques usuelles ont été transcrites en langage JS à traversl’objet Math. La plupart des fonctions s’utilisent selon la même syntaxe.

Syntaxe :var1 = math.fonction(paramètres) ;

17.1.1.Fonctions diverses

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

abs(x) : renvoie la valeur absolue de x. ceil(x) : renvoie l’entier supérieur à x. floor(x) : renvoie l’entier inférieur à x. round(x) : renvoie l’entier le plus proche de x. max(x,y) : renvoie le plus grand nombre entre x et y. min(x,y) : renvoie le plus petit nombre entre x et y. pow(x,y) : renvoie le nombre x à la puissance y. random(x,y) : renvoie un nombre aléatoire entre 0 et 1. sqrt(y) : renvoie la racine carrée de x.

17.1.2.Fonctions trigonométriques

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

17.1.3.Fonctions logarithmiques

exp(x) log(x)

Page 81: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 81

17.2.Constantes

math.PI math.LN2 math.LN10 math.E math.LOG2E math.LOG10E

17.3.Simplification

Si vous utilisez beaucoup l’objet math, l’écriture deviendra vite pénible. Il estpossible de ne pas avoir à écrire le mot "math" à chaque fois. Il suffit d’encadrer la zone decode par des accolades et l’expression with(math).

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

Exemple 17.1 :

with (Math) {x = sqrt (238) ;y = sin (x) ;document.write(y) ;}

Résultat

17.4.Exercice

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

Solution

Page 82: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 82

18.L’OBJET STRING

18.1.Généralités

Un objet string est une chaîne de caractères. Il possède une propriété et 7méthodes. Cet classe permet la manipulation des caractères qui s’avère très utile en JS. Ilest à préciser que l’objet string ne se construit pas comme les autres objets. Une chaînede caractère est en soi un objet string.

18.2.La propriété

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

Syntaxe :variable1 = variable2.length ;variable = (“chaine”).length ;

Exemple 18.1 :

x = "Mon château" ;y = x.length ;document.write(y) ;

Résultat

18.3.Les méthodes

18.3.1.CharAt ()

Cette méthode renvoie le caractère situé à la position x fournie en paramètre. Lenuméro de la position est compris entre 0 et la longueur de la chaîne –1.

Syntaxe :chaine1 = chaine2.charAt(x) ;

chaine1 = (“chaine”).charAt(x) ;chaine1 = charAt(chaine2,x) ;

Page 83: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 83

Exemple 18.2 :

x = "Mon Château" ;y = x.charAt(4) ;document.write(y) ;

Résultat

18.3.2.FromCharCode ()

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

Syntaxe :chaine.fromCharCode(i1,i2,i3)

Exemple 18.3 :

document.write(y.formCharCode(12,105,123,104)) ;

Résultat

18.3.3.CharCodeAt ()

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

Syntaxe :variable = chaine1.charCodeAt(position)

Exemple 18.4 :

y = "[email protected]";document.write(y.charCodeAt(6)) ;

Résultat

18.3.4.IndexOf ()

Cette méthode renvoie la première position d’une chaîne partielle dans une autrechaîne en partant de gauche, à partir de la position x indiquée en paramètre. Si elle n’est pas

Page 84: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 84

présente, la méthode renvoie –1. Le numéro de la position est compris entre 0 et la longueurde la chaîne –1.

Syntaxe :variable = chaine.indexOf(chaine_partielle, x)

Exemple 18.5 :

x = "maman" ;y = x.indexOf("ma",0) ;document.write(y) ;

Résultat

18.3.5.LastIndexOf ()

Cette méthode renvoie la première position d’une chaîne partielle dans une autrechaîne en partant de gauche, à partir de la position x indiquée en paramètre. Si elle n’est pasprésente, la méthode renvoie –1. Le numéro de la position est compris entre 0 et la longueurde la chaîne –1.

Syntaxe :variable = chaine.lastIndexOf

(chaine_partielle, x)

Exemple 18.6 :

x = "maman" ;y = x.lastIndexOf("ma",4) ;document.write(y) ;

Résultat

18.3.6.Substring ()

Cette méthode renvoie la sous-chaîne comprise entre les positions x et y indiquéesen paramètres, dans la chaîne principale.

Syntaxe :variable = chaine.substring (x,y)

Exemple 18.7 :

Page 85: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 85

x = "maman" ;y = x.substring(1,3) ;document.write(y) ;

Résultat

18.3.7.Substr ()

Cette méthode renvoie le texte une sous-chaîne de la String de la méthode, à partirdu début et sur n caractères..

Syntaxe :variable = chaine1.substr(début, n)

Exemple 18.8 :

y = "[email protected]";document.write(y.substr(5,2)) ;

Résultat

18.3.8.Slice ()

Equivalent à substring(). La fin est facultative.

Syntaxe :variable = chaine.slice(début, fin)

Exemple 18.9 :

y = "[email protected]";document.write(y.slice(7)) ;

Résultat

18.3.9.Split ()

Cette méthode renvoie un tableau de sous-chaînes découpées selon le séparateurpassé en paramètres.

Syntaxe :variable = chaine.split(séparateur)

Exemple 18.10 :

Page 86: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 86

x = "[email protected]" ;y = x.split("@") ;document.write(y[0] + "<br>" + y[1]) ;

Résultat

18.3.10.Concat ()

Cette méthode renvoie la concaténation de la chaîne passée en paramètre avec cellede la méthode.

Syntaxe :variable = chaine1.concat(chaine2)

Exemple 18.11 :

x = "Ecrivez-moi à " ;y = "[email protected]";z = x.concat(y) ;document.write(z) ;

Résultat

18.3.11.ToLowerCase ()

Cette méthode renvoie la chaîne avec tous les caractères en minuscules

Syntaxe :variable = chaine.toLowerCase()

Exemple 18.12 :

x = "MAMAN" ;y = x.toLowerCase() ;document.write(y) ;

Résultat

18.3.12.ToUpperCase ()

Cette méthode renvoie la chaîne avec tous les caractères en majuscules

Page 87: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 87

Syntaxe :variable = chaine.toUpperCase()

Page 88: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 88

Exemple 18.13 :

x = "Maman" ;y = x.toUpperCase() ;document.write(y) ;

Résultat

18.3.13.FontColor ()

Cette méthode renvoie le texte de l’objet en y ajoutant les balises <fontcolor=couleur>…</font>.

Syntaxe :variable = chaine1.fontColor(couleur)

Exemple 18.14 :

y = "[email protected]";document.write(y.fontColor("blue")) ;document.write(y.fontColor("red")) ;

Résultat

18.3.14.FontSize ()

Cette méthode renvoie le texte de l’objet en y ajoutant les balises <fontsize=taille>…</font>.

Syntaxe :variable = chaine1.fontSize(taille)

Exemple 18.15 :

y = "[email protected]";document.write(y.fontSize("16")) ;document.write(y.fontSize("8")) ;

Résultat

18.3.15.Fixed ()

Page 89: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 89

Cette méthode renvoie le texte de l’objet en y ajoutant les balises <pre>…</pre>.

Syntaxe :variable = chaine1.fixed()

Exemple 18.16 :

y = "[email protected]";document.write(y.fixed()) ;

Résultat

18.3.16.Bold ()

Cette méthode renvoie le texte de l’objet en y ajoutant les balises <b>…</b>.

Syntaxe :variable = chaine1.bold()

Exemple 18.17 :

y = "[email protected]";document.write(y.bold()) ;

Résultat

18.3.17.Strike ()

Cette méthode renvoie le texte de l’objet barré.

Syntaxe :variable = chaine1.strike()

Exemple 18.18 :

y = "[email protected]";document.write(y.strike()) ;

Résultat

18.3.18.Sub ()

Page 90: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 90

Cette méthode renvoie le texte de l’objet en y ajoutant les balises <sub>…</sub>.

Syntaxe :variable = chaine1.sub()

Exemple 18.19 :

y = "[email protected]";document.write(y.sub()) ;

Résultat

18.3.19.Big ()

Cette méthode renvoie le texte de l’objet en y ajoutant les balises <big>…</big>.

Syntaxe :variable = chaine1.big()

Exemple 18.20 :

y = "[email protected]";document.write(y.big()) ;

Résultat

18.3.20.Sup ()

Cette méthode renvoie le texte de l’objet en y ajoutant les balises <sup>…</sup>.

Syntaxe :variable = chaine.sup()

Exemple 18.21 :

y = "[email protected]";document.write(y.sup()) ;

Résultat

Page 91: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 91

18.3.21.Blink ()

Cette méthode renvoie le texte de l’objet en y ajoutant les balises<blink>…</blink>. Ne fonctionne que sous Netscape

Syntaxe :variable = chaine.blink()

Exemple 18.22 :

y = "[email protected]";document.write(y.blink()) ;

Résultat

18.2.22.Small ()

Cette méthode renvoie le texte de l’objet en y ajoutant les balises<small>…</small>.

Syntaxe :variable = chaine.small()

Exemple 18.23 :

y = "[email protected]";document.write(y.small()) ;

Résultat

18.3.23.Italics ()

Cette méthode renvoie le texte de l’objet en y ajoutant les balises <i>…</i>.

Syntaxe :variable = chaine.italics()

Exemple 18.24 :

y = "[email protected]";document.write(y.italics()) ;

Résultat

Page 92: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 92

18.3.24.Link ()

Cette méthode renvoie le texte de l’objet en y ajoutant les balises <a href=URL>…</a>.

Syntaxe :variable = chaine1.link(URL)

Exemple 18.25 :

y = "[email protected]";document.write(y.link("http://www.google.fr")) ;

Résultat

18.3.25.Anchor ()

Cette méthode crée un ancre,et renvoie le texte de l’objet en y ajoutant les balises<a name=ancre >…</a>.

Syntaxe :variable = chaine1.anchor(ancre)

Exemple 18.26 :

y = "[email protected]"document.write(y.anchor("ancre")) ;

Résultat

18.4.Manipulations sur les chaînes

La manipulation des chaînes demande certaines connaissances syntaxiques. Cesdernières ont déjà été précisées dans le chapitre Structures de données, mais elles doiventêtre détaillées. Elles concernent l’affectation, la concaténation, et les caractères spéciaux.

18.4.1.Affectation

Page 93: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 93

Les chaînes de caractères se présentent sous deux formes. Elles sont soientencadrées de quotes ‘’, soient encadrées de guillemets " ". On affecte les chaînes à leurvariables comme toute variable.

Exemple 18.27 :

x = "Maman" ;y = ‘Maman’ ;

Dans l’exemple 12.8, les chaînes x et y sont équivalentes. Elles contiennent la mêmedonnée.

18.4.2.Concaténation

Il est possible d’ajouter des chaînes – de les mettre à la suite l’une de l’autre – grâce àl’opérateur « + ».

Exemple 18.28 :

x = "Maman" ;y = ‘Papa’ ;z = x + " " + y ;document.write (z);

Résultat

Dans les fonctions, comme la méthode write(), il est possible d’ajouter ces chaînes àl’aide de l’opérateur « + » ou « , ».

Exemple 18.29 :

x = "Maman" ;y = ‘Papa’ ;document.write (x + " " + y);document.write (x , " " , y);

Résultat

Page 94: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 94

18.4.3.Caractères spéciaux

Certains caractères permettent de faire un effet dans l’affichage, d’autres doiventêtre précédés du caractère « \ ». Ils sont répertoriés dans le tableau suivant.

Caractère Affichage

\b touche de suppression

\f formulaire plein

\n retour à la ligne

\r appui sur la touche ENTREE

\t tabulation

\" guillemets

\' apostrophes

\\ caractère antislash

Tab. 12.1 : Caractères spéciaux

Les autres caractères spéciaux – si on peut les appeler ainsi – sont les balises HTML.En effet, celles-ci peuvent être insérées dans les chaînes de caractère, et seront interprétéescomme des balises par le navigateur lors de l’écriture avec la méthodedocument.write().

Exemple 18.30 :

x = "Maman" ;y = ‘Papa’ ;document.write (x + "<br>" + y);

Résultat

18.5.Exercice

Dans cet exercice, vous devez créer un formulaire avec un bouton et une zone detexte. L’internaute entre une série de mots séparés par des espaces. Ensuite, on récupèreces mots, et on les sépare par des virgules. Enfin, on les affiche à l’écran avecdocument.write().

Solution

Page 95: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 95

19.L’OBJET DATE

19.1.Généralités

La date et l’heure sont regroupées en JS dans la classe Date. On créé alors unevariable Date grâce au constructeur.

Syntaxe :variable =new Date()

La date et l’heure en JS ne commencent qu’à partir du 1er janvier 1970, 0h 0min 0s.Toute référence à une date antérieure donnera un résultat aléatoire. Je ne mets pasd’exemple à chaque méthode, je ferai un exemple général et concret à la fin du chapitre.

19.2.Les méthodes

19.2.1.Get

Une fois notre variable Date créée, il faut lui donner les informations sur la date etl’heure actuelle. Les fonctions suivantes remplissent la variable – qui est une chaîne – Dateavec les données courantes. Elles utilisent toutes la même syntaxe, ce sont des méthodesobjet.

Syntaxe :

variable1 =new Date()variable2 = variable1.getInfo();

getYear() : Retourne les 2 derniers chiffres de l’année. Il faudra donc rajouter lepréfixe "20".

getFullYear() : Retourne la date sur 4 chiffres. getMonth() : Retourne le mois sous la forme d’un entier compris entre 0 et 11. getDate() : Retourne le jour du mois sous forme d’un entier compris entre 1 et 31. getDay() : Retourne le jour de la semaine sous forme d’un entier compris entre 0

et 6. getHours() : Retourne l’heure sous forme d’un entier compris entre 0 et 23. getMinutes() : Retourne les minutes sous forme d’un entier compris entre 0 et

59. getSeconds() : Retourne les secondes sous forme d’un entier compris entre 0 et

59. getMilliseconds() : retourne les millisecondes de la date. A ne pas confondre

avec getTime().

Page 96: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 96

19.2.2.Set

Il est aussi possible de remplir la variable Date avec nos propres données. Lesfonctions suivantes remplissent la variable – qui est une chaîne – Date avec les données quevous voulez. Elles utilisent toujours la même syntaxe, ce sont des méthodes objet.

Syntaxe :

variable1 = new Date()variable2 = variable1.setInfo();

setYear() : Assigne les 2 derniers chiffres de l’année, sous forme d’un entiersupérieur à 1900.

setYear() : Assigne l’année sur 4 chiffres. setMonth() : Assigne le mois sous la forme d’un entier compris entre 0 et 11. setDate() : Assigne le jour du mois sous forme d’un entier compris entre 1 et 31. setDay() : Assigne le jour de la semaine sous forme d’un entier compris entre 0 et

6. setHours() : Assigne l’heure sous forme d’un entier compris entre 0 et 23. setMinutes() : Assigne les minutes sous forme d’un entier compris entre 0 et 59. setSeconds() : Assigne les secondes sous forme d’un entier compris entre 0 et

59. setMilliseconds() : assigne les millisecondes de la date. A ne pas confondre

avec setTime().

19.2.3.L’heure

L’heure est très utile en JS, elle possède donc plusieurs méthode utiles. La syntaxeest toujours la même.

Syntaxe :variable1 =new Date()

variable2 = variable1.méthode();

Page 97: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 97

getTime() : Renvoie l’heure courante sous forme d’un entier représentant lenombre de millisecondes depuis le 1er janvier 1970 00h 00min 00s.

getTimezoneOffset() : Renvoie la différence entre l’heure locale et l’heureGMT sous forme d’un entier en minutes.

setTime() : Assigne l’heure courante sous forme d’un entier représentant lenombre de millisecondes depuis le 1er janvier 1970 00h 00min 00s.

toGMTString() : Renvoie la valeur actuelle de la variable Date en heure GMT. toLocaleString() : Renvoie la valeur actuelle de l’heure de la variable Date.

C’est plus rapide que de combiner getHours(), getMinutes(), et getSeconds().

19.3.Exemple concret

Le but de cet exemple est d’afficher une horloge dans une ligne de texte. Pour cela,on utilise la méthode window.setTimeout(), qui rappelle la fonction d’affichage touteles secondes.

Exemple 19.1 :

<HTML><HEAD><script language="Javascript">function GetTime () { //la fonction que l’on doit appeler

var time = new Date (); // objet Date()var hours = time.getHours(); //on récupère les heuresvar min = time.getMinutes(); //on récupère les minutesvar sec = time.getSeconds(); //on récupère les secondesif (hours < 10) hours = "0" + hours; //on rajoute un 0if (min < 10) min = "0" + min; //si le chiffre estif (sec < 10) sec = "0" + sec; //inférieur à 10// affichage de l’heure dans une zone de textedocument.time.heure.value = hours + ":" + min + ":" + sec;window.setTimeout('GetTime()',1000); /* le timer rappelle la

fonction toutes les secondes */}

</script></HEAD><BODY onLoad="GetTime();"><form name="time">Voici l'heure :<!-- la zone de texte qui sert à l’affichage --><center><input type="text" name="heure" value="" size=6></center></form></BODY></HTML>

Résultat

Page 98: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 98

19.4.Exercice

19.4.1.Nombre de jours

Le but de l’exercice est de calculer le nombre de jours écoulés depuis l’an 2000.

Solution

19.4.2.Heure GMT

Cet exercice consiste à donner l’heure GMT de deux façons différentes.

Solution

Page 99: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 99

20.L’OBJET IMAGE

20.1.Rappel HTML

Il semble utile de rappeler que la balise <img> possède de nombreux attributs dontcertains qu’il est conseillé de déclarer en Javascript. Ci-dessous, la liste de ces attributs.

src : URL, souvent relative, de l’image. name : nom de l’image dans la page, très important en JS. width : largeur de l’image affichée. height : hauteur de l’image affichée. align : alignement de l’image par rapport au texte.

Il est important de rajouter qu’une image peut servir d’ancre pour un lien hypertexte,c’est-à-dire être placée entre les balises <a href>…</a>. Cela permet certaines astucesd’affichage.

20.2.L’objet

La classe Image correspond à la balise HTML <img>. Son emploi est assez difficile etce cours ne décrira pas en détail toutes ses facettes. Il permet de manipuler les images defaçon dynamique, ce qui est impossible avec le HTML. On rappellera que les images sontstockées dans le tableau images[] de l’objet document.

Grâce à un objet Image, on peut précharger une image et la stocker en cache,contrairement au HTML. L’image ne sera cependant pas affichée. Elle le sera à l’aide de labalise <img>.

Un objet Image est appelé selon la syntaxe objet habituelle, avec le constructeurImage(). L’objet possède alors les propriétés de la balise HTML <img>, dont la liste figuredans 20.3.Les propriétés.

20.3.Les propriétés

20.3.1.Syntaxe

Un objet Image possède plusieurs propriétés, que l’on peut assimiler aux attributs dela balise <img>.

Syntaxe :variable = new Image();variable.propriété = x ;

var2 = variable.propriété ;

Page 100: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 100

20.3.2.Src

Il s’agit de l’URL absolue ou relative le l’image. Elle peut être modifiée. Cela permetde charger en cache l’image lors du chargement de la page.

Exemple 20.1 :<img src="0.gif" name="image1"onMouseOver="document.image1.src='2.gif';"onMouseOut="document.image1.src='0.gif';">

Résultat

20.3.3.Name

C’est le nom défini par l’attribut name="…" de la balise <img>. A ne pas confondreavec l’ID. Permet de trouver l’image dans le tableau document.images[].

Exemple 20.2 :<img src="0.gif" name="image1"onMouseOver="alert('Adresse de l\'image : ' +document.images['image1'].src);">

Résultat

20.3.4.Id

C’est l’ID défini par l’attribut id="…" de la balise <img>. A ne pas confondre avec lenom. Permet de retrouver l’image grâce à la méthode document.getElementById().

Exemple 20.3 :<img src="0.gif" name="image1"onMouseOver="alert('Adresse de l\'image : ' +document.getElementById('image1').src);">

Résultat

20.3.5.Width

Il s’agit de la largeur de l’image. Elle contient la valeur de l’attribut width de la balise<img>. Si cet attribut n’est pas précisé, elle contient la largeur réelle de l’image. Ne peutêtre modifiée.

Page 101: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 101

Exemple 20.4 :<img src="0.gif" name="image1"onMouseOver="alert('Largeur de l\'image : ' +document.getElementById('image1').width);">

Résultat

20.3.6.Height

Il s’agit de la hauteur de l’image. Elle contient la valeur de l’attribut height de labalise <img>. Si cet attribut n’est pas précisé, elle contient la hauteur réelle de l’image. Nepeut être modifiée.

Exemple 20.5 :<img src="0.gif" name="image1"onMouseOver="alert('Hauteur de l\'image : ' +document.getElementById('image1').height);">

Résultat

20.3.7.Complete

C’est un booléen qui indique si le chargement de l’image est terminé. Renvoie true sile chargement est achevé et false dans le cas contraire.

Exemple 20.6 :<img src="0.gif" name="image1"onMouseOver="alert(‘chargement complété ? ' +document.getElementById('image1').complete);">

Résultat

20.3.8.Alt

Elle contient le texte qui affiché avant la chargement de l’image et en info-bullelorsqu’elle est survolée. Contient la valeur de l’attribut alt="…" de la balise <img>. Ne peutêtre modifiée.

Page 102: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 102

Exemple 20.7 :<img src="0.gif" name="image1" alt="Image"onMouseOut="alert(‘alt : ' +document.getElementById('image1').alt);">

Résultat

20.3.9.FileSize

Elle contient la taille en octets de l’image. N’est accessible que lorsque lechargement est terminé, d’où l’utilité de la propriété complete.

Exemple 20.8 :<img src="0.gif" name="image1" alt="Image"onMouseOver="alert(‘Octets : ' +document.getElementById('image1').fileSize);">

Résultat

20.4.Afficher une image

Il suffit de prendre l’élément <img> voulu dans la page et de changer sa propriété.Cet élément est assimilé à un objet Image, faisant partie de l’objet document.

Exemple 20.9 :document.image1.src = ‘img2.jpg’ ;

Dans ce cas précis, l’image change et img2.jpg est affiché dans le champ image1.L’intérêt de créer un objet Image reste donc discutable, puisqu’on ne l’utilise pas…

L’objet image permet de stocker l’image en cache au moment du chargement de lapage. Il ne reste plus qu’à trouver le moyen de l’afficher… De plus, on peut créer un tableaud’objets Image, ce qui nous facilitera les manipulations ensuite.

Page 103: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 103

Exemple 20.10 :

<html><head><script language="Javascript">var tab = new Array (4) ; //tableaufor (i = 0; i < 4; i++) {//remplissage d’images

tab[i] = new Image();tab[i].src = i + ".gif";}

function f() { //fonction d’affichagefor (i = 0; i < 4; i++) {

document.images[i].src = tab[i].src ;}

}</script></head><body><img name="img0"><br/><img name="img1"><br/><img name="img2"><br/><img name="img3"><br/><input type="button" name="click" value="Afficher lesimages" onClick="f();"> <!—appel des l’affichage--></body></html>

Résultat

L’exemple 14.3 permet de charger 5 images et des les afficher dans 5 balises <img>différentes grâce au tableau images[].

20.5.Exemple concret : cliquer pour changer d’image

Ici, le but est de créer une page avec une image et un bouton. Lorsque l’on clique surle bouton, l’image change. On a au total 4 images différentes. On utilise un tableau d’objetsImage, une balise <img>, une balise <input>, et une fonction. Lorsque les 4 images ontdéfilé, on recommence à la première. Pour cela, on utilise un compteur.

Page 104: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 104

Exemple 20.11 :

<HTML><HEAD><TITLE>New Document</TITLE><script language="Javascript">//création d'un tableau de 4 élémentsvar tab_images = new Array(4);for (i = 0; i < tab_images.length; i++) { // pour chaque élément

tab_images[i] = new Image(); /*on crée un objet Imageet on lui donne un fichier à charger */tab_images[i].src = i + ".gif";

}var nb = 0; //on initialise un compteur

function changer() { // la fonction qui sera appelée.nb++; //incrémenter le compteur

if (nb == tab_images.length) { //si on est 4nb = 0; //on remet à 0 le compteur}

//affichage de l'imagewindow.document.image.src = tab_images[nb].src; }

</script></HEAD><!-- la fonction est appelée au chargement de la page --><BODY onload="changer();"><img src="" name="image"><br><!-- la balise <img> --><input type="button" name="bouton" value="cliquez"onClick="changer();"> <!-- le bouton avec l'évènement --></BODY></HTML>

Résultat

20.6.Exercice

Ici, le but est aussi de créer une page avec une image. Lorsque passe la souris surl’image, l’image change. Quand on « ressort » de l’image, l’image de base revient. 4 imagesdifférentes s’afficheront en un cycle.

Solution

Page 105: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 105

21.LA PROGRAMMATION MULTI-CADRES15

21.1.Rappel HTML

Les frames sont un élément du langage HTML. Il s’agit du partage de la fenêtre enplusieurs cadres où l’on pourra afficher différentes pages HTML. Les frames se déclarentdans le fichier principal avec la balise <frameset> suivie de plusieurs balises <frame>.Il n’y a alors pas de balise <body> dans la page principale. Pour plus de précisions,consulter un cour HTML.

21.2.Généralités

Les frames ne sont pas très utilisées en JS, mais il est important de savoir quelquesdétails en cas d’utilisation de frames au niveau HTML. Il est important, lorsque le JS estutilisé, de préciser le nom de la frame dans la balise <frame>.

Exemple 21.1 :

<frame src="fichier.htm" name="cadre1">

Ce nom ne paraît pas très utile en HTML, mais il prend toute son importance en JS. Ilsera utilisé dans deux cas : la cible des liens ainsi que pour accéder à un élément d’une autreframe de la page.

21.3.Liens hypertexte

Lorsque de l’utilisation des frames, il peut s’avérer utile d’afficher une page dans uneframe différente de celle où se trouve le lien. C’est là où intervient l’attribut target de labalise <a href…>. Il permet d’indiquer la frame où l’on veut que la page appelée s’affiche.

Syntaxe :

<a href="lien" target=”frame”>texte</a>

La référence indiquée dans l’attribut target peut être de deux types. Dans un premiercas, il s’agit du nom de la frame déclarée dans la page principale, cas où il faut savoir cenom. Sinon, si on fait référence au cadre parent, on indiquera « _parent », et si on faitréférence à la fenêtre complète, on indiquera « _top ».

15 Par programmation multi-cadres, j’entend la programmation avec frames.

Page 106: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 106

Exemple 21.2 :

<a href="lien1.htm" target=”frame1”>cliquez ici</a><a href="lien2.htm" target=”_parent”>ou ici</a>

21.4.Accès aux éléments des frames

Lorsque de l’utilisation des frames, il est souvent nécessaire en JS d’accéder auxéléments des autres frames. L’objet window – que nous avons vu précédemment – nousfournit de quoi le faire. Il contient l’objet parent, qui possède les mêmes propriétés quelui.

21.4.1.L’objet frames[]

La première façon d’accéder aux éléments d’une autre frame se fait bien sûr par letableau frames[] – propriété de parent – dont le numéro des frames est attribué dansl’ordre de déclaration de celles-ci. On accède ensuite à chaque élément de la frame ainsiqu’à ses propriétés et méthodes.

Syntaxe :

parent.frames[i].objet.propriétéparent.frames[i].objet.méthode()

Exemple 21.3 :

Parent.frames[1].form1.action = "get";

Exemple 21.4 :

parent.frames[1].form1.button1.value = "Click";

Dans l’exemple 20.4, on accède à la valeur du bouton appelé « Button1 » duformulaire nommé « form1 ».

21.4.2.Le nom de la frame

L’autre façon d’accéder aux éléments d’une frame est d’utiliser son nom. Ce seraalors un objet de parent. Il faut donc prendre soin à donner un nom aux frames lors de leur

Page 107: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 107

déclaration. On accède ensuite à chaque élément de la frame ainsi qu’à ses propriétés etméthodes.

Syntaxe :

parent.nom.objet.propriétéparent.nom.objet.méthode()

Exemple 21.5 :

parent.frame1.form1.action = "get";

Exemple 21.6 :

parent.frame1.form1.button1.value = "Click";

21.5.Exemple concret

L’exemple 21.7 permet de faire un compteur de secondes impair sur une frame etpair sur l’autre.

Exemple 21.7 :

Exemple 21.7.1.htm<HTML><HEAD><TITLE>New Document</TITLE><script language="Javascript"></script></HEAD><body><form name="form1"><center><input type="text" name="out1"value="00:00:00"></center></form></body></HTML>

Exemple 21.7.2.htm<HTML><HEAD><TITLE>New Document</TITLE><script language="Javascript"></script></HEAD><body><form name="form2">

Page 108: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 108

<center><input type="text" name="out2"value="00:00:00"></center></form></body></HTML>

Exemple 21.7.htm<HTML><HEAD><TITLE>New Document</TITLE><script language="Javascript">var sec = 0;var min = 0;var hrs = 0;var test = 1;function f() {

sec++;if (sec == 60) {

sec = 0;min++;}

if (min == 60) {min = 0;hrs++;}

h = hrs;m = min;s = sec;if (h < 10) h = "0" + h;if (m < 10) m = "0" + m;if (s < 10) s = "0" + s;if (test == 1) {

parent.frame1.form1.out1.value = h + ":" + m + ":"+ s;

test = 2;}

else if (test == 2) {parent.frame2.form2.out2.value = h + ":" + m + ":"

+ s;test = 1;}

window.setTimeout('f();',1000);}

</script></HEAD><frameset cols="50%,50%" onLoad="f();">

<frame src="exemple 21.7.1.htm" name="frame1"><frame src="exemple 21.7.2.htm" name="frame2">

</frameset></HTML>

Résultat

21.6.Exercice

Votre exercice comporte 2 frames, avec chacune un bouton. Chaque clic sur unbouton incrémente la valeur de l’autre bouton.

Page 109: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 109

Solution

Page 110: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 110

22.LES COOKIES

22.1.Présentation

En JS, il est possible de travailler avec les cookies. Etant donné l’absence de gestiond’écriture/lecture de fichier, les cookies sont le seul moyen de stocker des informationspermanentes sur la machine de l’utilisateur. Ces dernières pourront être récupérées plustard et réutilisées. Cela permet de compter le nombre de visites de l’internaute, de créer uneliste de préférence de navigation sur le site, de conserver le login et le password afin de seconnecter directement à un compte… Les applications des cookies sont nombreuses.

Le seul risque de cette méthode est la suppression ou le refus des cookies parl’utilisateur16.

Le cookie en lui-même se présente sous la forme d’une chaîne de caractère quicontient des informations concaténées : l’information que l’on veut conserver, la dated’expiration, l’auteur – path -, le nom de domaine, la sécurisation.

22.2.Créer un cookie

On crée un cookie avec l’objet cookie de l’objet document. Il s’agit d’une chaînede caractère dans laquelle on indique les informations que l’on veut.

Syntaxe :document.cookie = "informations"

Dans les informations, il y a tout d’abord la chaîne que l’on souhaite conserver.Ensuite, on met la date d’expiration, le path, le nome de domaine, et – si besoin – la fait quele cookie soit protégé. Seuls les deux premiers champs sont obligatoires.

Syntaxe :

document.cookie = "variable = contenu ; expires = date ;path = nom ; domain = domaine ; secure = true/false" ;

Il semble utile de décrire chaque champ indiqué ci-dessus. Si la chaîne est mal écrite,le cookie ne sera pas utilisable, et deviendra par conséquent inutile.

16 Cette option est disponible dans les menus de votre navigateur. Pour Internet explorer, ce la se situe dans lemenu Outils | Options Internet , onglet Sécurité, dans la rubrique Personnaliser le niveau.

Page 111: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 111

Le champ information : il s’agit de ce que vous voulez stocker dans le cookie. Il fautdéfinir un nom à la variable et lui affecter une valeur, un contenu. Comme on peut levoir ci-dessus, les champs sont séparés par des points-virgule, il ne faut donc pasinsérer des « ; » dans le contenu.

expires : contient la date d’expiration, à laquelle le cookie sera détruit. La valeur esten secondes. Le plus simple consiste à utiliser un objet Date.

path : le chemin de la page qui a créé le cookie. domain : le domaine de la page qui a créé le cookie. secure : booléen qui indique si le cookie doit utiliser le protocole HTTP (false) ou le

protocole sécurisé HTTPS (true).

Exemple 22.1 :

document.cookie = "visite=1; expires=31/12/2004;path=le-vatican.com/index.php; secure=true";

Dans l’exemple 9.1, il s’agit d’un cookie créé par lepape, qui expire le 31/12/2004,auquel on peut accéder uniquement par un échange sécurisé, et qui compte le nombre devisites.

22.3.Récupérer un cookie

La récupération d’un cookie est plus complexe, mais elle est essentielle, car sinon lecookie est inutile. Le but est de trouver le type d’information que l’on cherche, et ensuite delire la valeur. La maîtrise de la classe String est obligatoire pour ce genre d’exercice. Cettepartie explique pas à pas la manière pour récupérer un cookie. On commence par mettretous les cookies dans une variable.

Syntaxe :variable = document.cookie ;

Ensuite, on cherche le nom de la « variable » dans la chaîne du cookie. Ensuite, onrécupère ce qui est situé entre le signe « = » et le « ; ». Cela semble simple, mais il faututiliser les méthode des objets String et utiliser des instructions logiques. Ci-dessous,l’exemple 9.2 montre en détail comment récupérer un cookie.

Page 112: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 112

Exemple 22.2 :

//création du cookiedocument.cookie = "visite=1;expires=31/12/2004";//variable à trouvervar variable_a_trouver = "visite" ;//on rajoute le signe =variable_a_trouver = variable_a_trouver + "=" ;//on récupère le cookievar chaine = document.cookie ; var longueur = variable_a_trouver.length ;//on récupère la longueur à trouvervar resultat ;//si le cookie n’est pas vide, on commence à chercher.if (chaine.lenght > 0) {

//on cherche la position du début de la variablevar debut = chaine.indexOf(chaine_a_trouver,0);//si on a trouvé cette position, on continueif (debut >=0) {

var fin ;/* on rajoute la longueur de la variable, pour arriver au débutdu contenu */debut = debut + longueur ;//on cherche la fin du contenu, c’est-à-dire le premier « ; »fin = chaine.indexOf(";", debut) ;//si on trouve la position du point-virguleif (fin>=0) {

//on récupère la chaine située entre le “=” et le “;”resultat = unescape(chaine.substring(debut,fin) ;}

// si il n’y a pas de “;”, c’est que c’est la fin de la chaîneelse {

/* on récupère la chaine située après le “=” la fin de lachaîne */resultat = unescape(chaine.substring(debut,chaine.length) ;}

}

}

Cet exemple n’est qu’une manière parmi d’autres. On peut imaginer quantités defaçons, mais celle-ci est sûrement la plus simple. Cela peut d’ailleurs constituer uneexercice.

22.4.Modifier un cookie

Modifier un cookie est aussi simple que de le créer. En réalité, il suffit de le recréeravec un contenu différent et une date actualisée.

Page 113: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 113

22.5.Supprimer un cookie

Pour supprimer un cookie, il faut tout simplement le recréer, avec la même valeurpour éviter de se compliquer les choses, et lui donner une date d’expiration passée. Sinon, ilsuffit d’attendre sa date d‘expiration, ce qui n’est pas toujours satisfaisant.

Page 114: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 114

23.LA PROGRAMMATION OBJET

23.1.Présentation

Bien que le Javascript ne soit pas un langage orienté objet, il donne la possibilité decréer ses propres objets. Ce chapitre s’adresse à des programmeurs possédant un niveaucorrect17 car la programmation objet est un point assez difficile.

Les programmeurs C++ seront étonnés de voir que les classes JS sont très simplifiéescomparées à celles du C++. Elles ne demandent pas une définition complète de la classe,mais il suffit de déclarer la fonction constructeur.

23.2.Déclaration d’une classe

Contrairement au C++ - qui demande une déclaration détaillée – déclarer une classeen JS se fait simplement en déclarant la fonction constructeur de classe. On déclare àl’intérieur les propriétés à l’aide de l’objet this. On retrouve l’objet this découvertprécédemment. Comme on l’a vu, il désigne l’objet en cours.

Syntaxe :function nom_classe ( paramètres ) {this.propriété = paramètre1 ;}

On déclare l’objet avec la syntaxe habituelle et le mot-clé new. Le nome de la classeest en général le type d’objet avec une majuscule.

Exemple 23.1 :

function Eleve (Age,Sexe,Ville) {this.age = Age ;this.sexe = Sexe ;this.ville = Ville ;}

var Laurent = new Eleve(17,’M’,‘Grenoble’) ;

17 Il convient de préciser que ce terme n’est en aucun cas péjoratif. Il signifie simplement qu’il est nécessaire debien maîtriser tous les chapitres précédent avant de se lance dans la programmation objet.

Page 115: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 115

23.3.Utilisation de méthodes

Il est bien entendu possible de déclarer et utiliser des méthodes. Pour cela, il fautdéclarer une fonction indépendante de la classe. Ensuite, on déclare la fonction à l’intérieurdu constructeur, en l’affectant à une méthode. Il faut faire attention lors de cettedéclaration, car il ne faut pas mettre les parenthèses des fonctions18 !

Syntaxe :function nom_classe () {

this.méthode = fonction ;}

Exemple 23.2 :

function Eleve (Nom,Age) {this.age = Age ;this.nom = Nom ;this.affich = affich_infos;}

function affich_infos () {document.write (this.nom + " a " + this.age + "ans.");}

var Laurent = new Eleve(17, ‘Laurent’) ;Laurent.affich() ;

Résultat

Il est possible de simplifier l’écriture lorsqu’il y a beaucoup de propriétés, grâce àl’utilisation de with (objet) { }. Cela ne fonctionne qu’à l’intérieur des méthodes, etnon dans le constructeur.

18 Même si cela semble contradictoire, ceci est important. On ne peut faire des égalités de fonctions.

Page 116: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 116

Exemple 23.3 :

function Eleve (Nom,Age) {age = Age ;nom = Nom ;affich = affich_infos;}

function affich_infos () {with (this) {

document.write (nom + " a " + age + " ans.");}

}var Laurent = new Eleve(17, ‘Laurent’) ;Laurent.affich() ;

Résultat

23.4. Exercice

Dans cet exercice, le but est de demander 3 informations à l’utilisateur (nom, age,ville) à l’aide d’une boite de dialogue. On regroupe ces informations à l’aide d’un objet –d’une classe crée auparavant – puis on utilise une méthode pour l’affichage dans une zonede texte.

Solution

Page 117: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 117

24.LES EXPRESSION REGULIERES

24.1.Présentation

Ce chapitre s’adresse à des programmeurs avertis, qui voudront bâtir un sitedynamique d’un aspect assez évolué. Les expressions régulières sont assez compliquées àcomprendre, et leur utilisation demande une connaissance sans failles de l’objet String.

24.2.Définition

Les expressions régulières existent dans la plupart des langages de programmation,mais sont peu connues du fait de leur complexité. Elles permettent de réaliser destraitements sur les chaînes de caractères. Ces traitements sont de l’ordre de la recherche decaractères, de l’extraction de sous-chaînes… beaucoup d’autres traitements existent qu’ilrevient à vous d’imaginer et de créer. En réalité, une expression régulière possède un motif,qui est une suite de caractères ordonnés selon un ordre, un nombre d’apparitions, une non-apparition…

Une expression régulière est avant tout un objet RegExp. Comme tout objet, il sedéclare ainsi :

Syntaxe :var reg = RegExp (pattern, option);

Comme vous l’avez sûrement remarqué, pour la première fois, il faut fournir desparamètres au constructeur. Ces paramètres concernent l’expression régulière que vousutilisez. Le pattern est le motif de l’expression. L’option est une chaîne de caractères, qui –comme son nom l’indique – contient les options de l’expression régulière. Nous allons voirleur constitution ci-après.

Il existe aussi une autre façon de déclarer une expression régulière. Elle est moinsutilisée et surtout moins claire.

Syntaxe :var reg = /pattern/option;

Les deux notations sont absolument équivalentes mais la première est plus explicite,donc conseillée.

Page 118: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 118

24.3.Paramètres d’une expression régulière

Les exemples sont regroupés dans le 24.3.3.Exemples car ils se doivent de contenirles deux paramètres.

24.3.1.L’option

La chaîne option peut prendre 4 valeurs. La première est la chaîne vide "", qui signifiel’absence d’option. Les 3 autres valeurs sont détaillées ci-dessous.

"g" : la recherche est globale – sur toute la chaîne -. "i" : ne pas tenir compte de casse – majuscules/minuscules- . "gi" : les deux options réunies

24.3.2.Le pattern

Cette partie est la plus délicate. Le pattern est assez complexe et sa compréhensionpeut être difficile. Il faut savoir que le pattern correspond aux caractères que vous cherchez– pour une raison ou une autre – dans une chaîne.

La chaîne pattern est extensible à l’infini. Le choix de ce qu’elle contient vousappartient. Il s’agit du motif de la chaîne, c’est-à-dire des caractères que vous choisirezd’inclure ou d’exclure de votre recherche. Cette chaîne pattern contient des caractèresspéciaux concaténés. Ces caractères spéciaux concernent le motif lui-même, le caractère àrechercher, le nombre d’occurrences, le groupe de caractères cherché… Leur liste se trouvedans le Tab.24.1.

Page 119: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 119

Motif Signification

^ Début du pattern – de la chaîne.

$ Fin du pattern. Interdit tout caractère après.

. N’importe quel caractère.

a | b Caractère a OU b.

* Caractère précédent présent 0 à x fois.

+ Caractère précédent présent 1 à x fois.

? Caractère précédent présent 0 à 1 fois.

{x} Caractère précédent présent x fois.

{x,} Caractère précédent présent au moins x fois.

{x,y} Caractère précédent présent au entre x et y fois.

[abc] Groupe de caractères : n’importe lequel contenu entre les crochets.

[a-z] N’importe quel caractère alphabétique.

[^a-z] Aucun caractères alphabétique.

\\ Caractère « \ ».

\d Tous les chiffres – équivalent de [0-9] - .

\D Aucun chiffre – équivalent de [^0-9] -.

\b Limites des mots (espace, tab, …).

\s Tous les caractères d’espacements – équivalent de [\v\r\n\t\f] -.

\S Aucun caractère d’espacements – équivalent de [^\v\r\n\t\f] -.

\w Tous les caractères alphanumériques dont « _ » – équivalent de [A-Za-z0-9_] -.

\W Aucun caractère alphanumérique – équivalent de [^A-Za-z0-9_] -.

Tab.24.1 : Motifs des expressions régulières.

Les différents motifs ne sont pas séparés. On les mets les uns à la suite des autres,sans espacements.

Il est à préciser que l’on peut très bien mettre une variable ou un mot entreguillemets - sans mise en forme avec ^ $ - comme argument pattern.

Page 120: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 120

24.3.3.Exemples

Voici différents exemples de déclaration d’objet RegExp. Ces exemples ne sont pastrès complexes, ils donnent simplement une idée de la construction des motifs. Le patternest plus détaillé que les options qui ne sont pas très importantes. Chaque exemple estcommenté, pour bien comprendre le but du motif.

Exemple 24.1 :

var exp = new RegExp("^[A-Za-z0-9]{4,}$","i") ;

L’exemple 24.1 présente la recherche d’une chaîne de au moins 4 caractèresalphanumériques. [A-Za-z0-9] désigne les caractères alphanumériques, et {4,}désigne 4 fois ou plus. Les caractères sont au chois majuscules ou minuscules.

Exemple 24.2 :

var exp = /^[A-Za-z0-9]{4,}$/i ;

L’exemple 24.2 est équivalent à l’exemple 24.1, mais il utilise l’autre notation.

Exemple 24.3 :

var exp = new RegExp (“^[A-Za-z0-9]+[A-Za-z0-9\.\-_]*@[A-Za-z0-9\-_]+\.[A-Za-z0-9\.\-_]{1,}$”,””);

L’exemple 24.2 présente la vérification d’une adresse e-mail. Elle doit commencerpar au moins un caractère alphanumérique : [A-Za-z0-9]+ . Ensuite elle peut comporterautant de caractères alphanumériques que l’on veut, plus le point, le tiret et l’underscore :[A-Za-z0-9\.\-_]*. Tout cela doit être suivi d’un @ : @. Ensuite, il peut y avoirn’importe quel nombre de caractères alphanumériques, plus le point, le tiret etl’underscore : [A-Za-z0-9\-_]+. Cela doit être suivi d’un point : \.. Ce dernier doit être suivi d’au moins deux caractères alphanumériques dont le point et letiret : [A-Za-z0-9\.\-_]{1,} . Il n’y a aucune option.

Ces exemples ne traitent que de la création de l’objet RegExp. Ce dernier est bienentendu inutile si on ne l’utilise pas ensuite. C’est le sujet de la partie suivante.

Page 121: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 121

24.4.Utilisation d’une expression régulière

24.4.1.Les méthode de l’objet RegExp

Il existe trois méthodes de l’objet RegExp : test(), exec() et compile(). Elless’utilisent selon la syntaxe objet habituelle. La première prend en paramètre la chaîne àtester selon le motif de l’expression régulière. Elle renvoie un booléen qui indique si lachaîne correspond au motif ou non. La deuxième méthode prend aussi la chaîne à tester enparamètre. Elle renvoie un tableau des occurrences du motif à tester. La dernière permet demodifier le motif de l’expression régulière, sans en créer un nouveau.

Exemple 24.3 :

adresse = prompt ("Votre mail ?","[email protected]") ;var exp = new RegExp (“^[A-Za-z0-9]+[A-Za-z0-9\.\-_]*@[A-Za-z0-9\-_]+\.[A-Za-z0-9\.\-_]{1,}$”,””);document.write ( exp.test(adresse) );

L’exemple 24.3 propose de tester la correction de votre mail. On retrouve le motif del’exemple 24.2. La méthode test() est appliquée à l’adresse e-mail. Le reste vous est – oudevrait vous être – familier.

24.4.2.Les méthode de l’objet String

Les méthodes de l’objet String vont aussi aider à la manipulation des expressionsrégulières. Nous introduirons ici 3 nouvelles méthodes de l’objet String19. A ces troisméthodes, nous rajouterons la plupart des méthodes String.

search() : trouver les occurrences répondant aux critères du motif. replace () : trouver remplacer les occurrences répondant aux critères du motif. match() : trouver les occurrences répondant aux critères du motif.

Ces trois méthodes prennent en paramètre un objet RegExp. Voici la syntaxecorrespondante ci-après.

Syntaxe :var reg = RegExp (pattern, option);

chaîne.méthode(reg);

Il est à noter que la méthode split() possède une syntaxe similaire. De plus, il estpossible d’indiquer simplement le motif, avec la notation peu utilisée des slash, commeparamètre.

19 Elles n’ont pas été introduites précédemment du fait de leur inutilité en dehors des expressions régulières.

Page 122: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 122

Syntaxe :chaîne.méthode(/pattern/option);

Les méthodes split() et match() renvoient chacune un tableau de toutes lesoccurrences trouvées.

Exemple 24.4 :

var nom = prompt('Votre nom?\nMettez les accents…','nom') ;nom = nom.replace (/[éèêë]/g,"e") ;nom = nom.replace (/[àäâ]/g,"a") ;nom = nom.replace (/[üûù]/g,"u") ;nom = nom.replace (/[òöô]/g,"o") ;nom = nom.replace (/[ìïî]/g,"i") ;alert(nom) ;

Résultat

L’exemple 24.4 propose de supprimer les accents d’une chaîne. On remplace toutsimplement les lettres accentuées par la lettre sans accent.

24.5.Exemple concret

Ci-dessous est proposé un exemple dans lequel vous entrez une suite de motsséparés par des caractères de ponctuation. En cliquant sur un bouton, la liste de tous lesnoms est affichée. De plus, deux méthodes sont proposées. Cet exemple vous montre aussicomment intégrer le traitement au code avec une fonction.

Page 123: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 123

Exemple 24.5 :

<HTML><HEAD><TITLE>New Document</TITLE><script language="Javascript">function TraitBySplit() {

var chaine = document.form1.input.value; //récupération de la chainevar exp = new RegExp ('[.,;:/!? ]',"g"); //motif avec la ponctuationtab = chaine.split(exp); //séparation de la chainevar result = "Voici les noms :"; //affichagefor (i = 0 ; i < tab.length ; i++) {

result = result + "\n" + tab[i] ;}

document.form1.output.value = result;}function TraitByMatch() {

var chaine = document.form1.input.value;//récupération de la chaine//motif avec les lettresvar exp = new RegExp ('[A-Za-zìïîòöôüûùàäâéèêë]+',"g");tab = chaine.match(exp); //séparation de la chainevar result = "Voici les noms :"; //affichagefor (i = 0 ; i < tab.length ; i++) {

result = result + "\n" + tab[i] ;}

document.form1.output.value = result;}</script></HEAD><BODY><center><form name="form1"><textarea name="input" rows=5 cols=50>Entrez une suite de noms séparésindifféremment par les signes de ponctuation .,;:/!? etespace</textarea><br/><input type="button" name="match" value="Avec match()"onClick="TraitByMatch();">&nbsp;<input type="button" name="split" value="Avec split()"onClick="TraitBySplit();"><br/><textarea name="output" rows=5 cols=50>Résultat</textarea><br/></form></center></BODY></HTML>

Résultat

24.6.Exercice

Faites un formulaire avec 3 lignes de texte et un bouton. Dans les lignes de texte,l’internaute entre son adresse, code postal et ville. En cliquant sur le bouton, on teste leurvalidité.

Solution

Page 124: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 124

25.FONCTIONS ET PROPRIÉTÉS

25.1.Présentation

Ce chapitre présente – un peu tardivement – les fonctions intégrées au langage, etne dépendant d’aucun objet. On verra aussi les méthodes et propriétés que l’on peutassocier à tous les objets. Ce chapitre arrive – j’en conviens – un peu tard, car j’avais omis cesujet dans mon plan. Je le rajoute donc ici.

25.2.Les fonctions du langage

25.2.1.Escape()

Cette fonction encode les caractères spéciaux d’une chaîne, selon le code %xx, etretourne cette chaîne encodée.

Syntaxe :

chaine1 = escape (chaine2)

Exemple 25.1 :

var chaine = "Voici des caractères spéciaux !" ;document.write( escape(chaine) ) ;

Résultat

25.2.2.Unescape()

Cette fonction décode les caractères spéciaux codé par escape(), et retournecette chaîne encodée.

Syntaxe :

chaine1 = escape (chaine2)

Exemple 25.2 :

var chaine = "Voici des caractères spéciaux !" ;var chaine2 = escape(chaine) ;document.write( unescape(chaine2) ) ;

Page 125: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 125

Résultat

25.2.3.ParseFloat ()

Cette fonction convertit une chaîne passée en paramètre en nombre décimal.Renvoie NaN si la conversion est impossible.

Syntaxe :

decimal = parseFloat (chaine)

Exemple 25.3 :

var chaine = "Voici des caractères spéciaux !" ;var chaine2 = "35.7" ;document.write( parseFloat(chaine) + "<br/>" ) ;document.write( parseFloat(chaine2) ) ;

Résultat

25.2.4.ParseInt ()

Cette fonction convertit une chaîne passée en paramètre en nombre entier. RenvoieNaN si la conversion est impossible. Le paramètre facultatif base permet de faire uneconversion en une autre base que décimale.

Syntaxe :

decimal = parseInt (chaine, base)

Exemple 25.4 :

var chaine = "35.7" ;document.write( parseInt(chaine) + "<br/>" ) ;document.write( parseInt(chaine, 8) ) ;

Résultat

25.2.5.IsFinite ()

Cette fonction renvoie true si le nombre est fini, sinon, elle renvoie false.

Page 126: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 126

Syntaxe :

booleen = isFinite (nombre)

Exemple 25.5 :

var chaine = "35.7" ;var chaine2 = "Math";document.write( isFinite(chaine) + "<br/>") ;document.write( isFinite(chaine2) ) ;

Résultat

25.2.6.IsNaN ()

Cette fonction renvoie true si la chaîne n’est pas un nombre, sinon, elle renvoie false.

Syntaxe :

booleen = isNaN (chaine)

Exemple 25.6 :

var chaine = "35.7" ;var chaine2 = "Math";document.write( isNaN(chaine) + "<br/>") ;document.write( isNaN(chaine2) ) ;

Résultat

25.3.Méthodes et propriétés des objets

Les objets de Javascript ou que vous avez créés possèdent deux propriétés et deuxméthodes en commun. Elles permettent de manipuler ces objets et de connaître certainesde leur caractéristiques.

25.3.1.Prototype

Cette propriété permet de rajouter une propriété ou une méthode à un objet déjàexistant, que vous avez créé ou qui existe dans JS. On l’utilise selon la syntaxe suivante :

Syntaxe :

classe.prototype.nom = valeur ;

Page 127: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 127

L’exemple 25.7 rajoute une propriété et une méthode à l’objet Array.

Page 128: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 128

Exemple 25.7 :

var tab = new Array(5);for (i = 0; i < 5; i++) tab[i] = i+1;

Array.prototype.comment = null; // on rajoute un commentairetab.comment = "Tableau de 5 chiffres";

function FirstElement () { /* fonction retournant le premierélément */

return this[0];}

Array.prototype.firstElement = FirstElement;document.write (tab.comment + " : premier élément : " +tab.firstElement());

Résultat

25.3.2.Constructor

Cette propriété renvoie le constructeur de l’objet.

Syntaxe :

variable = objet.constructor ;

Exemple 25.8 :

var tab = new Array(5);var s = "string";var d = new Date ()var e = new RegExp();document.write ("Constructeur Array : " + tab.constructor + "<br/>");document.write ("Constructeur String : " + s.constructor + "<br/>");document.write ("Constructeur Date : " + d.constructor + "<br/>");document.write ("Constructeur RegExp : " + e.constructor + "<br/>");

Résultat

25.3.3.ValueOf()

Cette méthode renvoie tout simplement la valeur de l’objet.

Syntaxe :

variable = objet.valueOf ;

Page 129: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 129

Exemple 25.9 :

var tab = new Array(5);for (i = 0; i < 5; i++) tab[i] = i + 1;var s = "string";document.write ("Valeur du Tableau : " + tab.valueOf() + "<br/>");document.write ("Valeur de la Chaîne : " + s.valueOf() + "<br/>");

Résultat

25.3.4.ToString()

Cette méthode retourne la description de l’objet.

Syntaxe :

variable = objet.toString ;

Exemple 25.9 :

var tab = new Array(5);for (i = 0; i < 5; i++) tab[i] = i + 1;var s = "string";document.write ("Description du Tableau : " + tab.toString() + "<br/>");document.write ("Description de la Chaîne : " + s.toString() + "<br/>");

Résultat

25.4.Exercice

Dans cet exercice, vous devez rajouter 3 méthodes à la classe String. La premièrerenverra une chaîne avec la valeur et le constructeur. La seconde renverra la chaîne codée.Et la dernière renverra le dernier caractère de la chaîne.

Solution

Page 130: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 130

CONCLUSION

Et voilà ce cours est déjà terminé ! J’espère qu’il vous a plu et qu’il vous a apporté ceque vous souhaitiez. J’attends avec impatience vos commentaires. N’hésitez pas à critiquermon travail.

Pour ceux qui ont découvert le Javascript, j’espère que ce langage vous a conquis etque vous l’utiliserez à l’avenir. N’oubliez pas qu’il peut s’avérer utile, même en dehors de laprogrammation Internet.

Merci encore et bonne programmation. Pour ceux qui souhaitent me joindre, allezvoir la rubrique suivante.

Page 131: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 131

AUTEUR

DESCRIPTION

Pour ceux que ça intéresse, voici un petit descriptif de ma personne. Je m’appelleMichaël, j’ai 17ans, je vis près de Grenoble. Je suis en 1ère S, et je vais passer en Terminale.J’ai découvert la programmation l’an dernier grâce à mon professeur de ISI20 - je le remercie,d’ailleurs - et depuis, je ne peux plus m’en passer. Je programme en HTML/Javascript biensûr, mais aussi en PHP et en C++.

COORDONNEES

Pour ceux qui souhaitent me joindre, mon adresse e-mail est [email protected] certains veulent me parler par l’intermédiaire de MSN Messenger, mon contact [email protected]. Voilà.

20 Initiation aux Sciences de l’Ingénieur.

Page 132: Cours Javascript

Le Javascript – en 25 leçons - Version 1.0

© 23/06/2004 Professor Maddy 132

REMERCIEMENTS

Je remercie tous mes amis qui m’ont aidé à progresser en programmation,notamment Arnaud et Dimitri. Je remercie Philippe et M.Allardin pour m’avoir donné goût àce passe-temps.

Je remercie tous les sites que j’ai consultés pour apprendre le Javascript, dontwww.commentcamarche.com, www.toutjavascript.com, et tant d’autres.

Je remercie mon bon vieux Pentium II et ses 450MHz qui m’on permis de réaliser laplus grande partie de ce cours. Mille mercis à Aiwa, pour avoir construit la chaîne Hi-Fi quim’accompagne. Merci aussi aux Red Hot Chili Peppers qui ont réalisés les chansons quim’ont accompagnées tout au long de ce cours.

Merci à Microsoft, pour le nombre de redémarrage suite à un plantage de Windows.Merci à ES-Computing pour avoir créé EditPlus2, logiciel qui m’a permis de faire tous lesexemples de ce cours.