Liste de  cours javascript

JavaScript cours complet avec exercices pour apprendre le langage de script


Télécharger



JavaScript cours complet avec exercices pour apprendre le langage de script

Javascript est un langage de scripts incorporé aux balises Html qui permet d'améliorer la présentation et l'interactivité des pages Web.

Javascript est donc une extension du code Html des pages Web. Les scripts, qui s'ajoutent ici aux balises Html, peuvent en quelque sorte être comparés aux macros d'un traitement de texte.


n: justify;">Ces scripts vont être gérés et exécutés par le browser lui-même sans devoir faire appel aux ressources du serveur. Ces instructions seront donc traitées en direct et surtout sans retard par le navigateur.

Javascript a été initialement développé par Netscape et s'appelait alors LiveScript. Adopté à la fin de l'année 1995, par la firme Sun (qui a aussi développé Java), il prit alors son nom de Javascript.

Javascript n'est donc pas propre aux navigateurs de Netscape (bien que cette firme en soit un fervent défenseur). Microsoft l'a d'ailleurs aussi adopté à partir de son Internet Explorer 3. On le retrouve, de façon améliorée, dans Explorer 4.

Les versions de Javascript se sont succédées avec les différentes versions de Netscape : Javascript pour Netscape 2, Javascript 1.1 pour Netscape 3 et Javascript 1.2 pour Netscape 4. Ce qui n'est pas sans poser certains problèmes de compatibilité, selon le browser utilisé, des pages comportant du code Javascript. Mais consolons nous en constatant qu'avec MSIE 3.0 ou 4.0 et la famille Netscape, une très large majorité d'internautes pourra lire les pages comprenant du Javascript.

L'avenir de Javascript est entre les mains des deux grands navigateurs du Web et en partie lié à la guerre que se livrent Microsoft et Netscape. On s'accorde à prédire un avenir prometteur à ce langage surtout de par son indépendance vis à vis des ressources du serveur.

...

Pour accéder à un objet (vous l'avez peut-être déjà deviné), il faudra donner le chemin complet de l'objet en allant du contenant le plus extérieur à l'objet à l'objet référencé.

Soit par exemple pour le bouton radio "semaine" : (window).document.form.radio[0].

Nous avons mis l'objet window entre parenthèses car comme il occupe la première place dans la hiérarchie, il est repris par défaut par Javascript et devient donc facultatif.

Et enfin pour les puristes, Javascript n'est pas à proprement parler un langage orienté objet tel que C++ ou Java. On dira plutôt que Javascript est un langage basé sur les objets.

3.2 LES PROPRIETES DES OBJETS

Une propriété est un attribut, une caractéristique, une description de l'objet. Par exemple, l'objet volant d'une voiture a comme propriétés qu'il peut être en bois ou en cuir. L'objet livre a comme propriétés son auteur, sa maison d'édition, son titre, son numéro ISBN, etc.

De même les objets Javascript ont des propriétés personnalisées. Dans le cas des boutons radio, une de ses propriétés est, par exemple, sa sélection ou sa non-sélection (checked en anglais).

En Javascript, pour accéder aux propriétés, on utilise la syntaxe :

nom_de_l'objet.nom_de_la_propriété

Dans le cas du bouton radio "semaine", pour tester la propriété de sélection, on écrira

document.form.radio[0].checked

CHAPITRE 4 : VOS OUTILS POUR LE JAVASCRIPT

Pour apprendre et exploiter le Javascript, il vous faut :

  1. un browser qui reconnaît le Javascript.
  2. une solide connaissance du Html
  3. un simple éditeur de texte

4.1 UN BROWSER COMPATIBLE JAVASCRIPT

Uniquement Netscape et Microsoft vous proposent des navigateurs Javascript "enabled". Pour Microsoft à partir de MSIE Explorer 3.0 et Netscape à partir de Netscape Navigator 2.0.

Par contre, il faut être attentif aux versions de Javascript exploitées par ces browers.

Il faut bien admettre que Javascript est plutôt l'affaire de Netscape et que vous courrez au devant d'une collection d'ennuis en utilisant Explorer 3 pour le Javascript.

4.2 UN SOLIDE BAGAGE EN HTML

Comme le code du Javascript vient s'ajouter au "code" du langage Html, une connaissance approfondie des balises ou tags Html est souhaitable sinon indispensable. Ainsi les utilisateurs d'éditeurs Html "whsiwyg" ou autres "publishers" Html risquent de devoir retourner à leurs chères études.

4.3 UN BON EDITEUR DE TEXTE

Une page Html n'est que du texte. Le code Javascript n'est lui aussi que du texte. Quoi de plus simple qu'un éditeur de ... texte comme le Notepad de Windows pour inclure votre Javascript dans votre page Html. Un éditeur Html de la première génération (un bon vieil éditeur qui fait encore apparaître les balises), comme HTML Notepad, fait également bien l'affaire.

CHAPITRE 5 : LE JAVASCRIPT MINIMUM

5.1 LA BALISE <SCRIPT>

De ce qui précède, vous savez déjà que votre script vient s'ajouter à votre page Web.

Le langage Html utilise des tags ou balises pour "dire" au browser d'afficher une portion de texte en gras, en italique, etc.

Dans la logique du langage Html, il faut donc signaler au browser par une balise, que ce qui suit est un script et que c'est du Javascript (et non du VBScript). C'est la balise

<SCRIPT LANGUAGE="Javascript">.

De même, il faudra informer le browser de la fin du script.

C'est la balise

 </SCRIPT>.

5.2 LES COMMENTAIRES

Il vous sera peut-être utile d'inclure des commentaires personnels dans vos codes Javascript. C'est même vivement recommandé comme pour tous les langages de programmation (mais qui le fait vraiment ?).

Javascript utilise les conventions utilisées en C et C++ soit

// commentaire

Tout ce qui est écrit entre le // et la fin de la ligne sera ignoré.

Il sera aussi possible d'inclure des commentaires sur plusieurs lignes avec le code

/* commentaire */

sur plusieurs lignes

Ne confondez pas les commentaires Javascript et les commentaires Html (pour rappel <!-- ...-->).

5.3 MASQUER LE SCRIPT POUR LES ANCIENS BROWSERS

Les browsers qui ne comprennent pas le Javascript (et il y en a encore) ignorent la balise <script> et vont essayer d'afficher le code du script sans pouvoir l'exécuter. Pour éviter l'affichage peu esthétique de ses inscriptions cabalistiques, on utilisera les balises de commentaire du langage Html <!-- ... -->.

Votre premier Javasript ressemblera à ceci :

<SCRIPT LANGUAGE="javascript">

<!-- Masquer le script pour les anciens browsers

...

programme Javascript

...

// Cesser de masquer le script -->

</SCRIPT>

5.4 OU INCLURE LE CODE EN JAVASCRIPT ?

Le principe est simple. Il suffit de respecter les deux principes suivants :

- n'importe où.

- mais là où il le faut.

Le browser traite votre page Html de haut en bas (y compris vos ajoutes en Javascript). Par conséquent, toute instruction ne pourra être exécutée que si le browser possède à ce moment précis tous les éléments nécessaires à son exécution. Ceux-ci doivent donc être déclarés avant ou au plus tard lors de l'instruction.

Pour s'assurer que le programme script est chargé dans la page et prêt à fonctionner à toute intervention de votre visiteur (il y a des impatients) on prendra l'habitude de déclarer systématiquement (lorsque cela sera possible) un maximum d'éléments dans les balises d'en-tête soit entre <HEAD> et </HEAD> et avant la balise <BODY>. Ce sera le cas par exemple pour les fonctions.

Rien n'interdit de mettre plusieurs scripts dans une même page Html.

5.5 UNE PREMIERE INSTRUCTION JAVASCRIPT

Sans vraiment entrer dans les détails, voyons une première instruction Javascript (en fait une méthode de l'objet window) soit l'instruction alert().

alert("votre texte");

Cette instruction affiche un message (dans le cas présent votre texte entre les guillemets) dans une boite de dialogue pourvue d'un bouton OK. Pour continuer dans la page, le lecteur devra cliquer ce bouton.

Vous remarquerez des points-virgules à la fin de chaque instruction Javascript (ce qui n'est pas sans rappeler le C et le C++).

...

+7.6 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çon contextuelle. 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 nom de locale. Par contre, toujours dans une fonction, si la variable est déclarée contextuellement (sans utiliser le mot var), sa portée sera globale.

Nous reviendrons sur tout ceci dans l'étude des fonctions.

CHAPITRE 8 : LES OPERATEURS

Les variables, c'est bien mais encore faut-il pouvoir les manipuler ou les évaluer. Voyons (et ce n'est peut-être pas le chapitre le plus marrant de ce tutorial) les différents opérateurs mis à notre disposition par Javascript.

8.1 LES OPERATEURS DE CALCUL

Dans les exemples, la valeur initiale de x sera toujours égale à 11.

...

Important. On confond souvent le = et le == (deux signes =). Le = est un opérateur d'attribution de valeur tandis que le == est un opérateur de comparaison. Cette confusion est une source classique d'erreur de programmation.

8.3 LES OPERATEURS ASSOCIATIFS

On appelle ainsi les opérateurs qui réalisent un calcul dans lequel une variable intervient des deux côtés du signe = (ce sont donc en quelque sorte également des opérateurs d'attribution).

Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5.

...

CHAPITRE 9 : LES FONCTIONS

9.1 DEFINITION

Une fonction est un groupe de ligne(s) de code de programmation destiné à exécuter une tâche bien spécifique et que l'on pourra, si besoin est, utiliser à plusieurs reprises. De plus, l'usage des fonctions améliorera grandement la lisibilité de votre script.

En Javascript, il existe deux types de fonctions :

  • les fonctions propres à Javascript. On les appelle des "méthodes". Elles sont associées à un objet bien particulier comme c'était le cas de la méthode Alert() avec l'objet window.
  • les fonctions écrites par vous-même pour les besoins de votre script. C'est à celles-là que nous nous intéressons maintenant.

9.2 DECLARATION DES FONCTIONS

Pour déclarer ou définir une fonction, on utilise le mot (réservé) function.

La syntaxe d'une déclaration de fonction est la suivante :

function nom_de_la_fonction(arguments)

{

... code des instructions ...

}

Le nom de la fonction suit les mêmes règles que celles qui régissent le nom de variables (nombre de caractères indéfini, commencer par une lettre, peuvent inclure des chiffres...). Pour rappel, Javascript est sensible à la case. Ainsi fonction() ne sera pas égal à Fonction(). En outre, Tous les noms des fonctions dans un script doivent être uniques.

La mention des arguments est facultative mais dans ce cas les parenthèses doivent rester. C'est d'ailleurs grâce à ces parenthèses que l'interpréteur Javascript distingue les variables des fonctions. Nous reviendrons plus en détail sur les arguments et autres paramètres dans la partie Javascript avancé.

Lorsque une accolade est ouverte, elle doit impérativement, sous peine de message d'erreur, être refermée. Prenez la bonne habitude de fermer directement vos accolades et d'écrire votre code entre elles.

Le fait de définir une fonction n'entraîne pas l'exécution des commandes qui la composent. Ce n'est que lors de l'appel de la fonction que le code de programme est exécuté.

9.3 L'APPEL D'UNE FONCTION

L'appel d'une fonction se fait le plus simplement du monde par le nom de la fonction (avec les parenthèses).

Soit par exemple nom_de_la_fonction();

Il faudra veiller en toute logique (car l'interpréteur lit votre script de haut vers le bas) à ce que votre fonction soit bien définie avant d'être appelée.

9.4 LES FONCTIONS DANS <HEAD>...</HEAD>

Il est donc prudent ou judicieux de placer toutes les déclarations de fonction dans l'en-tête de votre page c.-à-d .dans la balise <HEAD> ...</HEAD>. Vous serez ainsi assuré que vos fonctions seront déjà prises en compte par l'interpréteur avant qu'elles soient appelées dans le <BODY>.

9.5 EXEMPLE

Dans cet exemple, on définit dans les balises HEAD, une fonction appelée message() qui affiche le texte "Bienvenue à ma page". cette fonction sera appelée au chargement de la page voir onLoad=.... dans le tag <BODY>.

...

On peut passer des valeurs ou paramètres aux fonctions Javascript. La valeur ainsi passée sera utilisée par la fonction.

Pour passer un paramètre à une fonction, on fournit un nom d'une variable dans la déclaration de la fonction.

Un exemple un peu simplet pour comprendre. J'écris une fonction qui affiche une boite d'alerte dont le texte peut changer.

Dans la déclaration de la fonction, on écrit :

function Exemple(Texte)

{

alert(texte);

}

Le nom de la variable est Texte et est définie comme un paramètre de la fonction.

Dans l'appel de la fonction, on lui fournit le texte :

Exemple("Salut à tous");

+9.7 PASSER PLUSIEURS VALEURS A UNE FONCTION

On peut passer plusieurs paramètres à une fonction. Comme c'est souvent le cas en Javascript, on sépare les paramètres par des virgules.

function nom_de_la_fonction(arg1, arg2, arg3)

{

... code des instructions ...

}

Notre premier exemple devient pour la déclaration de fonction :

function Exemplebis(Texte1, Texte2){...}

et pour l'appel de la fonction :

Exemplebis("Salut à tous", "Signé Luc")

+9.8 RETOURNER UNE VALEUR

Le principe est simple (la pratique parfois moins). Pour renvoyer un résultat, il suffit d'écrire le mot clé return suivi de l'expression à renvoyer. Notez qu'il ne faut pas entourer l'expression de parenthèses. Par exemple :

function cube(nombre)

{

var cube = nombre*nombre*nombre

return cube;

}

Précisons que l'instruction return est facultative et qu'on peut trouver plusieurs return dans une même fonction.

Pour exploiter cette valeur de la variable retournée par la fonction, on utilise une formulation du type document.write(cube(5)).

+9.9 VARIABLES LOCALES ET VARIABLES GLOBALES

Avec les fonctions, le bon usage des variables locales et globales prend toute son importance.

Une variable déclarée dans une fonction 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. On l'appelle donc variable locale.

function cube(nombre)

{

var cube = nombre*nombre*nombre

}

Ainsi la variable cube dans cet exemple est une variable locale. Si vous y faites référence ailleurs dans le script, cette variable sera inconnue pour l'interpréteur Javascript (message d'erreur).

Si la variable est déclarée contextuellement (sans utiliser le mot var), sa portée sera globale -- et pour être tout à fait précis, une fois que la fonction aura été exécutée--.

function cube(nombre)

{

cube = nombre*nombre*nombre

}

La variable cube déclarée contextuellement sera ici une variable globale.

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.

<SCRIPT LANGUAGE="javascript">

var cube=1

function cube(nombre)

{

var cube = nombre*nombre*nombre

}

</SCRIPT>

La variable cube sera bien globale.

Pour la facilité de gestion des variables, on ne peut que conseiller de les déclarer en début de script (comme dans la plupart des langages de programmation). Cette habitude vous met à l'abri de certaines complications.

CHAPITRE 10 : LES EVENEMENTS

10.1 GENERALITES

Avec les événements et surtout leur gestion, nous abordons le côté "magique" de Javascript.

En Html classique, il y a un événement que vous connaissez bien. C'est le clic de la souris sur un lien pour vous transporter sur une autre page Web. Hélas, c'est à peu près le seul. Heureusement, Javascript va en ajouter une bonne dizaine, pour votre plus grand plaisir.

Les événements Javascript, associés aux fonctions, aux méthodes et aux formulaires, ouvrent grand la porte pour une réelle interactivité de vos pages.

...

10.3.4 onmouseOver et onmouseOut

L'événement onmouseOver se produit lorsque le pointeur de la souris passe au dessus (sans cliquer) d'un lien ou d'une image. Cet événement est fort pratique pour, par exemple, afficher des explications soit dans la barre de statut soit avec une petite fenêtre genre infobulle.

L'événement onmouseOut, généralement associé à un onmouseOver, se produit lorsque le pointeur quitte la zone sensible (lien ou image).

Notons qui si onmouseOver est du Javascript 1.0, onmouseOut est du Javascript 1.1.

En clair, onmouseOut ne fonctionne pas avec Netscape 2.0 et Explorer 3.0.

10.3.5 onFocus

L'événement onFocus survient lorsqu'un champ de saisie a le focus c.-à-d. quand son emplacement est prêt à recevoir ce que l'utilisateur à l'intention de taper au clavier. C'est souvent la conséquence d'un clic de souris ou de l'usage de la touche "Tab".

10.3.6 onBlur

L'événement onBlur a lieu lorsqu'un champ de formulaire perd le focus. Cela se produit quand l'utilisateur ayant terminé la saisie qu'il effectuait dans une case, clique en dehors du champ ou utilise la touche "Tab" pour passer à un champ. Cet événement sera souvent utilisé pour vérifier la saisie d'un formulaire.

Le code est :

<FORM>

<INPUT TYPE=text onBlur="alert('Ceci est un Blur')">

</FORM>

10.3.7 onchange

Cet événement s'apparente à l'événement onBlur mais avec une petite différence. Non seulement la case du formulaire doit avoir perdu le focus mais aussi son contenu doit avoir été modifié par l'utilisateur.

10.3.8 onselect

Cet événement se produit lorsque l'utilisateur a sélectionné (mis en surbrillance ou en vidéo inverse) tout ou partie d'une zone de texte dans une zone de type text ou textarea.

+10.4 GESTIONNAIRES D'EVENEMENT DISPONIBLES EN JAVASCRIPT

Il nous semble utile dans cette partie "avancée" de présenter la liste des objets auxquels correspondent des gestionnaires d'événement bien déterminés.

+10.5 LA SYNTAXE DE ONMOUSEOVER

Le code du gestionnaire d'événement onmouseOver s'ajoute aux balises de lien :

<A HREF="" onmouseOver="action()">lien</A>

Ainsi, lorsque l'utilisateur passe avec sa souris sur le lien, la fonction action() est appelée. L'attribut HREF est indispensable. Il peut contenir l'adresse d'une page Web si vous souhaitez que le lien soit actif ou simplement des guillemets si aucun lien actif n'est prévu. Nous reviendrons ci-après sur certains désagréments du codage HREF="".

Voici un exemple. Par le survol du lien "message important", une fenêtre d'alerte s'ouvre.

Le code est :

<BODY>

...

<A HREF="" onmouseOver="alert('Coucou')">message important</A>

</BODY>

ou si vous préférez utiliser les balises <HEAD>

+10.6 LA SYNTAXE DE ONMOUSEOUT

Tout à fait similaire à onmouseOver, sauf que l'événement se produit lorsque le pointeur de la souris quitte le lien ou la zone sensible.

Au risque de nous répéter, si onmouseOver est du Javascript 1.0 et sera donc reconnu par tous les browsers, onmouseOut est du Javascript 1.1 et ne sera reconnu que par Netscape 3.0 et plus et Explorer 4.0 et plus (et pas par Netscape 2.0 et Explorer 3.0)

On peut imaginer le code suivant :

<A HREF="" onmouseOver="alert('Coucou')" onmouseOut="alert('Au revoir')">message important</A>

Les puristes devront donc prévoir une version différente selon les versions Javascript.

+10.7 PROBLEME! ET SI ON CLIQUE QUAND MEME...

Vous avez codé votre instruction onmouseOver avec le lien fictif <A HREF=""... >, vous avez même prévu un petit texte, demandant gentiment à l'utilisateur de ne pas cliquer sur le lien et comme de bien entendu celui-ci clique quand même.

Horreur, le browser affiche alors l'entièreté des répertoires de sa machine ou de votre site). Ce qui est un résultat non désiré et pour le moins imprévu.

Pour éviter cela, prenez l'habitude de mettre l'adresse de la page encours ou plus simplement le signe # (pour un ancrage) entre les guillemets de HREF. Ainsi, si le lecteur clique quand même sur le lien, au pire, la page encours sera simplement rechargée et sans perte de temps car elle est déjà dans le cache du navigateur.

Prenez donc l'habitude de mettre le code suivant

<A HREF="#" onmouseOver="action()"> lien </A>.

 ...

Compléter toujours en Javascript les attributs width=x height=y de vos images.

Il n'y a pas d'exemple ici pour la compatibilité avec les lecteurs utilisant explorer 3.0 en effet, non seulement onmouseOut mais aussi image[] est du Javascript 1.1.

+10.9 L'IMAGE INVISIBLE

Ce changement d'image ne vous donne-t-il pas des idées?... Petit futé! Et oui, on peut prévoir une image invisible de la même couleur que l'arrière plan (même transparente). On la place avec malice sur le chemin de la souris de l'utilisateur et son survol peut ,à l'insu de l'utilisateur, déclencher un feu d'artifice d'actions de votre choix. Magique le Javascript ?

CHAPITRE 11 : LES CONDITIONS

11.1 SI MAMAN SI ..." OU L'EXPRESSION IF

A un moment ou à un autre de la programmation, on aura besoin de tester une condition. Ce qui permettra d'exécuter ou non une série d'instructions.

Dans sa formulation la plus simple, l'expression if se présente comme suit

if (condition vraie)

{

une ou plusieurs instructions;

}

Ainsi, si la condition est vérifiée, les instructions s'exécutent. Si elle ne l'est pas, les instructions ne s'exécutent pas et le programme passe à la commande suivant l'accolade de fermeture.

De façon un peu plus évoluée, il y a l'expression if...else

if (condition vraie) {

instructions1;

}

else {

instructions2;

}

Si la condition est vérifiée (true), le bloc d'instructions 1 s'exécute. Si elle ne l'est pas (false), le bloc d'instructions 2 s'exécute.

Dans le cas où il n'y a qu'une instruction, les accolades sont facultatives.

Grâce aux opérateurs logiques "et" et "ou", l'expression de test pourra tester une association de conditions. Ainsi if ((condition1) && (condition2)), testera si la condition 1 et la condition 2 est réalisée. Et if ((condition1) || (condition2)), testera si une au moins des  conditions est vérifiée.

Pour être complet (et pour ceux qui aiment les écritures concises), il y a aussi :

(expression) ? instruction a : instruction b

Si l'expression entre parenthèse est vraie, l'instruction a est exécutée.Si l'expression entre parenthèses retourne faux, c'est l'instruction b qui est exécutée.

11.2 L'EXPRESSION FOR

L'expression for permet d'exécuter un bloc d'instructions un certain nombre de fois en fonction de la réalisation d'un certain critère. Sa syntaxe est :

         for (valeur initiale ; condition ; progression) {

         instructions;

         }

Prenons un exemple concret :

         for (i=0, i<10, i++) {

         document.write(i + "<BR>")

         }

Au premier passage, la variable i, étant initialisée à 0, vaut bien entendu 0. Elle est bien inférieure à 10. Elle est donc incrémentée d'une unité par l'opérateur d'incrémentation i++  (i vaut alors 2) et les instructions s'exécutent.

A la fin de l'exécution des instructions, on revient au compteur. La variable i (qui vaut 2) est encore toujours inférieure à 10. Elle est augmentée de 1 et les instructions sont à nouveau exécutées.  Ainsi de suite jusqu'à ce que i vaille 10. La variable i ne remplit plus la condition i<10. La boucle s'interrompt et le programme continue après l'accolade de fermeture.

+11.3 WHILE

L'instruction while permet d'exécuter une instruction (ou un groupe d'instructions) un certain  nombre de fois.

         while (condition vraie){

         continuer à faire quelque chose

         }

Aussi longtemps que la condition est vérifiée, Javascript continue à exécuter les instructions  entre les accolades. Une fois que la condition n'est plus vérifiée, la boucle est interrompue et on continue le script. Prenons un exemple.

         compt=1;

         while (compt<5) {

         document.write ("ligne : " + compt + "<BR>");

         compt++;

         }

         document.write("fin de la boucle");

Voyons comment fonctionne cet exemple. D'abord la variable qui nous servira de compteur  compt est initialisée à 1. La boucle while démarre donc avec la valeur 1 qui est inférieure à 5. La condition est vérifiée. On exécute les instructions des accolades. D'abord, "ligne : 1" est  affichée et ensuite le compteur est incrémenté de 1 et prend donc la valeur 2. La condition est  encore vérifiée. Les instructions entre les accolades sont exécutées. Et ce jusqu'à l'affichage de la ligne 4. Là, le compteur après l'incrémentation vaut 5. La condition n'étant plus vérifiée,     on continue dans le script et c'est alors fin de boucle qui est affiché.

Attention ! Avec ce système de boucle, le risque existe (si la condition est toujours vérifiée),  de faire boucler indéfiniment l'instruction. Ce qui à la longue fait misérablement planter le browser !

Ce qui donnerait à l'écran :

ligne : 1

ligne : 2

ligne : 3

ligne : 4

fin de la boucle

+11.4 BREAK

L'instruction break permet d'interrompre prématurément une boucle for ou while.

Pour illustrer ceci, reprenons notre exemple :

         compt=1;

         while (compt<5) {

         if (compt == 4)

         break;

         document.write ("ligne : " + compt + "<BR>");

         compt++;

         }

         document.write("fin de la boucle");

Le fonctionnement est semblable à l'exemple précédent sauf lorsque le compteur vaut 4. A ce moment, par le break, on sort de la boucle et "fin de boucle" est affiché.

Ce qui donnerait à l'écran :

         ligne : 1

         ligne : 2

         ligne : 3

         fin de la boucle

+11.5 CONTINUE

L'instruction continue permet de sauter une instruction dans une boucle for ou while et de continuer ensuite le bouclage (sans sortir de celui-ci comme le fait break).

Reprenons notre exemple ;

compt=1;

while (compt<5) {

if (compt == 3){

compt++

continue;}

document.write ("ligne : " + compt + "<BR>");

compt++;

}

document.write("fin de la boucle");

Ici, la boucle démarre. Lorsque le compteur vaut 3, par l'instruction continue, on saute l'instruction document.write (ligne : 3 n'est pas affichée) et on continue la boucle.  Notons qu'on a dû ajouter compt++ avant continue; pour éviter un bouclage infini et un  plantage du navigateur (compt restant à 3).

Ce qui fait à l'écran :

ligne : 1

ligne : 2

ligne : 4

fin de la boucle

CHAPITRE 12 : LES FORMULAIRES

12.1 GENERALITES

Avec Javascript, les formulaires Html prennent une toute autre dimension. N'oublions pas qu'en Javascript, on peut accéder à chaque élément d'un formulaire pour, par exemple, y aller lire ou écrire une valeur, noter un choix auquel on pourra associer un gestionnaire d'événement... Tous ces éléments renforceront grandement les capacités interactives de vos pages.

Mettons au point le vocabulaire que nous utiliserons. Un formulaire est l'élément Html déclaré par les balises <FORM></FORM>. Un formulaire contient un ou plusieurs éléments que nous appellerons des contrôles (widgets). Ces contrôles sont notés par exemple par la balise <INPUT TYPE= ...>.

12.2 DECLARATION D'UN FORMULAIRE

La déclaration d'un formulaire se fait par les balises <FORM> et </FORM>. Il faut noter qu'en Javascript, l'attribut NAME="nom_du_formulaire" a toute son importance pour désigner le chemin complet des éléments. En outre, les attributs ACTION et METHOD sont facultatifs pour autant que vous ne faites pas appel au serveur.

Une erreur classique en Javascript est, emporté par son élan, d'oublier de déclarer la fin du formulaire </FORM> après avoir incorporé un contrôle.

12.3 LE CONTROLE LIGNE DE TEXTE

La zone de texte est l'élément d'entrée/sortie par excellence de Javascript. La syntaxe Html est <INPUT TYPE="text" NAME="nom" SIZE=x MAXLENGTH=y> pour un champ de saisie d'une seule ligne, de longueur x et de longueur maximale de y.

6