Pour écrire des scripts Javascript, vous devez utiliser votre éditeur HTML en mode Source ou HTML et non en mode Normal.

Transcription

1 Premier script à faire soi même Il faut bien débuter un jour, alors allons y! Avec un script simplissime : alert("c'est mon 1er script"); Ce qui a pour effet d afficher un message d alerte : Votre éditeur HTML Pour écrire des scripts Javascript, vous devez utiliser votre éditeur HTML en mode Source ou HTML et non en mode Normal. Vous pouvez copier coller directement les codes de cette page dans votre éditeur HTML en mode HTML. Le script 1. Créez une page HTML vide. 2. Avant la balise </HEAD>, écrivez les balises d ouverture et de fermeture d un script Javascript : <script language="javascript"> <! Debut script // Fin script > </script> Les commentaires <! et // > sont indispensables afin que les navigateurs ne supportant pas Javascript ne retournent pas une erreur ("Debut script" et "Fin script" sont optionnels). 3. Intégrer votre instruction dans le script : <script language="javascript"> <! Debut script alert("c'est mon 1er script"); // Fin script > </script> Voici à quoi doit ressembler votre page HTML : <html> <head>

2 <title>mon 1er script</title> <script language="javascript"> <! Debut script alert("c'est mon 1er script"); // Fin script > </script> </head> <body> </body> </html> 4. Afficher votre page dans un navigateur Voilà, vous voilà un de plus dans le monde de Javascript! Ecrire dans la page HTML On va continuer dans la même veine, mais avec quelques difficultés. document.write("c'est mon 2ème script"); Ce qui a pour effet d écrire dans la page Web : «C est mon 2ème script» document.write simple Voici votre page Web avec le script : <html> <head> <title>mon 2ème script</title> <script language="javascript"> <! Debut script document.write("c'est mon 2ème script");

3 // Fin script > </script> </head> <body> </body> </html> Afficher la dans un navigateur et vous aurez une ligne simple qui affiche «C est mon 2ème script» Intégrer des balises HTML Vous pouvez intégrer des balises HTML dans votre texte, ce qui vous permet de choisir la police, la couleur, de centrer... 1er essai Choisissons la police Arial en gras, une couleur bleue et de centrer le tout. Notre instruction document.write devient : document.write("<center><font color="#0000ff"><b>c'est mon 2ème script</b></font></center>"); face="arial" (tout est sur la même ligne, mais pour des raisons d affichage la ligne est coupée) Essayez d intégrer cette instruction à la place de la précédente, ça donne une erreur : ( Pourquoi? document.write (comme alert, d ailleurs) a comme argument une chaîne de caractères délimitée par des guillemets ("). Si vous rajoutez d autres guillemets ("), Javascript ne comprend plus où commence et où finit la chaîne. Comment faire? Remplacer les guillemets (") à l intérieur de la chaîne par des apostrophes ( ) : document.write("<center><font color='#0000ff'><b>c'est mon 2ème script</b></font></center>"); face='arial' Et là, ça marche! Ca donne la même chose que l image en haut. Guillemets et apostrophes sont interchangeables document.write('<center><font color="#0000ff"><b>c'est mon 2ème script</b></font></center>'); face="arial" On a interverti guillemets (") et apostrophes ( ) et en théorie le résultat devrait être le même. En théorie, seulement, car il y a un problème avec l apostrophe de "C est". Pour remédier à ça on doit remplacer par \ :

4 document.write('<center><font color="#0000ff"><b>c\'est mon 2ème script</b></font></center>'); face="arial" Et là, on obtient le résultat précédent. De même, on aurait pu écrire : document.write("<center><font color=\"#0000ff\"><b>c'est mon 2ème script</b></font></center>"); face=\"arial\" Règle usuelle pour les chaînes de caractères On utilise en général la 1ère forme : document.write("<center><font color='#0000ff'><b>c'est mon 2ème script</b></font></center>"); face='arial' Soit des guillemets (") pour délimiter la chaîne et des apostrophes ( ) à l intérieur, surtout à cause des nombreuses apostrophes ( ) du français. Mais sachez que les deux sont interchangeables. Aperçu de la page définitive : <html> <head> <title>mon 2ème script</title> <script language="javascript"> <! Debut script document.write("<center><font face='arial' color='#0000ff'><b>c'est mon 1er script</b></font></center>"); // Fin script > </script> </head> <body> </body> </html> Comment modifier une image au passage de la souris On va continuer par quelque chose de très demandé, le survol d image (ou rollover en anglais) ou comment modifier l aspect d une image au passage de la souris. C est très simple! Mais on va quand même y consacrer 2 leçons. Les images d origine On va commencer par placer les 3 images par défaut dans notre page. C est du HTML pur et vous pouvez faire ça en mode normal dans votre éditeur HTML : <img border="0" src="images/bleu_p.gif" width="38" height="20"> <img border="0" src="images/rouge_p.gif" width="38" height="20"> <img border="0" src="images/vert_p.gif" width="38" height="20">

5 Ce qui donne l aspect des 3 boutons ci dessus (sans le survol) Avant de continuer ; vous devez avoir créé les autres images, celles qui seront visibles lorsque la souris passera dessus. Voici l ensemble des images que vous pouvez copier coller si vous n en avez pas d autres sous la main... Copiez ces images ou celles de votre choix dans un sous répertoire "images". (images par défaut) Les objets images (images de survol) Une page HTML est constituée d objets (voir la page "Objets d une page HTML"). Chaque fois que vous ajoutez une image à votre page, il se crée un objet image supplémentaire. Ainsi lorsque vous écrivez en HTML : <img border="0" src="images/bleu_p.gif" width="38" height="20"> vous créez un objet image ayant les propriétés suivantes : bordure = 0 (border="0") source = "images/bleu_p.gif" (le fichier image) largeur = 38 (width="38") hauteur = 20 (height="20") Il existe encore d autres propriétés qui n ont pas été initialisées, mais on verra ça plus loin. Changer le fichier source de l image Comme vous l avez écrit, le fichier image associé à l image "image1" est "images/bleu_p.gif", c est ce que veut dire : <img name="image1" src="images/bleu_p.gif"> Si on change le src (le source) : <img name="image1" src="images/bleu_a.gif"> on aura la même image, mais en creux : C est le principe du survol. Mais pour que ça fonctionne en passant la souris, il faut indiquer quel événement déclenchera ce survol. Les événements onmouseover et onmouseout [1]

6 Il existe 2 événements : onmouseover (réagit au passage de la souris sur un objet) et onmouseout (réagit lorsque la souris quitte un objet). Lorsqu on écrit onmouseover="this.src = 'images/bleu_a.gif'" cela a pour effet d afficher l image "bleu_a.gif" lorsque la souris passe sur l image Et : onmouseout="this.src = 'images/bleu_p.gif'" a pour effet de réafficher l image "bleu_p.gif" lorsque la souris quitte l image. this Ca signifie «ceci» en anglais, et désigne l objet en cours. Si vous écrivez l instruction précédente telle quelle, le navigateur pensera que «this» représente la page, et ne fera rien, car l objet «document» (la page) n a pas d attribut «src». Par contre, ici «this» est dans l objet image, et «this.src» désigne le fichier source de cet objet image : <img src="images/bleu_p.gif" border="0" width="38" height="20" onmouseover="this.src='images/bleu_a.gif'" onmouseout="this.src='images/bleu_p.gif'"> donnera ceci : Le code complet pour les 3 boutons Ce code est à écrire en l état dans votre page HTML (donc pas dans un script Javascript) : <img src="images/bleu_p.gif" border="0" width="38" height="20" onmouseover="this.src='images/bleu_a.gif'" onmouseout="this.src='images/bleu_p.gif'"> <img src="images/rouge_p.gif" border="0" width="38" height="20" onmouseover="this.src='images/rouge_a.gif'" onmouseout="this.src='images/rouge_p.gif'"> <img src="images/vert_p.gif" border="0" width="38" height="20" onmouseover="this.src='images/vert_a.gif'" onmouseout="this.src='images/vert_p.gif'"> ce qui donne : Ca ne fonctionne pas avec Netscape 4 Ce code fonctionne sous Internet Explorer 4/5/6+, sous Netscape 6/7+, sous Mozilla 1+, mais pas sous Netscape 4 ou Internet explorer 3. On verra comment faire, dans le prochain article.

7 Netscape 4 n accepte pas d événement onmouseover ou onmouseout dans les images. Donc on va faire autrement. Et les versions 3 de Netscape et d Internet Explorer n acceptent pas d objets image, donc de toute façon, le survol ne fonctionnera jamais avec ces navigateurs, qui se font de plus en plus rares. Notes : [1] Ces événements font partie non de Javascript, mais du DOM (Document Object Model), qui, contrairement à Javascript, n est pas sensible à la casse. Ce qui veut dire que vous pouvez écrire «onmouseover» ou «OnMouseOver» ou «ONMOUSEOVER», vous obtiendrez le même résultat. Comment réaliser un survol d image avec la compatibilité Netscape 4 Netscape 4 n accepte pas les événements onmouseover et onmouseout dans les objets image. Par contre, ils fonctionnent dans un lien. On va créer une fonction Javascript, qui marchera pour toutes les images à survol, quelque soit la version du navigateur (les versions 3 de IE et Netscape ne verront pas ce survol, et les images seront fixes). Toujours nos 3 boutons : onmouseover et onmouseout dans un lien Ces événements seront intégrés dans le lien <a href=...>...</a>, au lieu de les mettre dans l image. Mais le code this.src =... ne fonctionnera plus, puisque ici «this» représente le lien et un lien n a pas d attribut «src». Il faut indiquer à la page quel objet va avoir son source modifier. Pour ça il faut donner un nom aux images. Nommer les images Pour nommer les images, on utilise l attribut «name», attribut qu on verra aussi dans toutes sortes d objets. <img name="image1" src="images/bleu_p.gif" border="0" width="38" height="20"> Et pour modifier son source, on écrira : document.images["image1"].src = "images/bleu_p.gif"; où document.images est la collection des images de la page, et document.images["image1"] représente l objet image du bouton bleu. Fonction de survol On va créer une fonction Javascript spéciale, qui modifiera le source de tout objet image : <script language="javascript"> <! var rep = "images/"; function survol(objet, Fichier) { if (!document.images) {

8 document.images[objet].src = rep + Fichier; // > </script> La fonction sera appelée ainsi : survol("image1", "bleu_a.gif"); L argument «Objet» est le nom de l objet image, celui qui est indiqué par l attribut «name» de l image. Et «Fichier» est le fichier source à changer. La variable «rep» est le répertoire des images. L instruction if (!document.images) { permet de ne rien faire, pour les navigateurs ne supportant pas les objets images. Le code de l image Donc dans notre page HTML, on écrire notre image bleue ainsi : <a href="#" onmouseover="survol('image1', 'bleu_a.gif')" onmouseout="survol('image1', 'bleu_p.gif')"> <img name="image1" border="0" src="../images/bleu_p.gif" width="38" height="20"></a> Le code complet <html> <head> <title></title> <script language="javascript"> <! var rep = "images/"; function survol(objet, Fichier) { if (!document.images) { document.images[objet].src = rep + Fichier; // > </script> </head> <body> <a href="#" onmouseover="survol('image1', 'bleu_a.gif')" onmouseout="survol('image1', 'bleu_p.gif')"> <img name="image1" border="0" src="images/bleu_p.gif" width="38" height="20"></a> <a href="#" onmouseover="survol('image2', 'rouge_a.gif')" onmouseout="survol('image2', 'rouge_p.gif')"> <img name="image2" border="0" src="images/rouge_p.gif" width="38" height="20"></a> <a href="#" onmouseover="survol('image3', 'vert_a.gif')" onmouseout="survol('image3', 'vert_p.gif')"> <img name="image3" border="0" src="images/vert_p.gif" width="38" height="20"></a> </body> </html> Ce qui donnera :

9 Lire le contenu d un champ texte de formulaire Page HTML et objets Une page HTML est constituée d objets : le contenu de la page (qui correspond à ce qui se trouve entre les balises et, les images, un formulaire, une case texte dans un formulaire, etc... Javascript sait manipuler tout ça à condition de leur donner un nom, de façon à ce qu il sache sur quel objet il doit agir. Lire le contenu d une boîte de texte Voici un exemple : Indiquez votre nom : Indiquez votre nom : Indiquez votre nom, puis cliquez sur OK. Une boîte d alerte indique le texte que vous avez saisi dans la boîte de texte. Voici le script : <form method="post" name="formulaire"> <p>indiquez votre nom :<br> <input type="text" name="nom" size="40"> <input type="button" value="ok" onclick="alert('texte saisi : ' + document.formulaire.nom.value)"></p> </form> Nommer les objets Le formulaire Son nom est «formulaire». On fait référence à ce formulaire en écrivant : document.formulaire ou document["formulaire"] Exemple : connaître le nom du formulaire : document.formulaire.name; // donnera «formulaire» La boîte de texte Son nom est "nom". On lui fait référence ainsi : document.formulaire.nom

10 car c est un objet inclus dans le formulaire. Exemple : lire sa valeur : document.formulaire.nom.value; «value» est une propriété des boîtes texte de formulaire. Le bouton «OK» On n a pas besoin de son nom mais on lui a associé un événement. Les événements Chaque fois que vous bougez la souris, que vous cliquez quelque part dans la page, que vous modifiez la taille de la fenêtre.. un événement est déclenché. Chaque objet supporte un certain nombre d événements. Les boutons déclenchent un événement "onclick" lorsqu on clique dessus. Si on "associe" une fonction particulière à un événement, on déclenche cette fonction lorsque l événement se produit. Exemples d événements : onmove : mouvement de la souris onmouseover : passage de la souris sur un objet onmouseout : la souris quitte un objet onclick : on a cliqué sur un objet onchange : la valeur d un objet a été changée onfocus : un objet a le "focus" (le curseur est sur l objet) [1] Pour associer une fonction à un événement, il suffit d écrire : onevenement="la_fonction()"; Tout simplement. Dans notre cas, on a associé la fonction «alert» (fonction prédéfinie du langage Javascript qui affiche une boîte d alerte). Si on écrit dans la balise du bouton OK : onclick="alert( Vous avez cliqué sur le bouton )" ; le message «Vous avez cliqué sur le bouton» s affichera à chaque fois que vous cliquez sur le bouton. Maintenant, pour indiquer le contenu de la boîte de texte "nom" dans le message d alerte : onclick="alert(document.test1.nom.value)"; Notes : [1] les événements sont des objets du DOM (Document Object Model), insensible à la casse, contrairement à Javascript. Donc on peut «onclick» ou «OnClick» ou «ONCLICK», le résultat sera le même. Lire et écrire le contenu d une boîte texte de formulaire

11 On va lire le contenu d une boîte de texte et l écrire dans une autre boîte de texte Exemple Indiquez votre nom ici, pluis cliquez sur OK Boîte texte «nom» : Boîte texte «resultat» Voilà le travail! Voici le script : <form method="post" name="formulaire"> <p>boîte texte «nom» :<br> <input type="text" name="nom" size="40"></p> <p>boîte texte «resultat»<br> <input type="text" name="resultat" size="40"> <input type="button" value="ok" onclick="document.formulaire.resultat.value = document.formulaire.nom.value"></p> </form> Affecter une valeur à une boîte de texte C est facile : document.formulaire.resultat.value = "voici le résultat"; a pour effet d afficher «voici le résultat» dans la 2ème boîte de texte Maintenant, affecter la valeur d une boîte de texte à une autre : document.formulaire.resultat.value = document.formulaire.nom.value; Il suffit ensuite d associer cette action à l événement onclick du bouton OK, et ça donne onclick = "document.formulaire.resultat.value = document.formulaire.nom.value"; Petits calculs entre éléments de formulaire Multiplier 2 boîtes de texte On va multiplier le contenu de 2 boîtes de texte, et donner le résultat dans une troisième : Indiquez 2 chiffres, un dans chaque case de cette ligne : x

12 Voilà le résultat de la multiplication! Voici le script : <form method="post" name="formulaire"> <p>indiquez 2 chiffres, un dans chaque case de cette ligne :<br> <input type="text" name="chiffre1" size="40"> x <input type="text" name="chiffre2" size="40"></p> <p>voilà le résultat de la multiplication!<br> <input type="text" name="resultat" size="40"> <input type="button" value="ok" onclick="document.formulaire.resultat.value = document.formulaire.chiffre1.value * document.formulaire.chiffre2.value"></p> </form> Calcul Si vous avez lu les 2 leçons précédentes, l expression onclick="document.formulaire.resultat.value = document.formulaire.chiffre1.value + document.formulaire.chiffre2.value"; ne doit pas vous surprendre ; seulement au lieu d affecter une simple valeur à une boîte de texte, on lui affecte la somme de la valeur de 2 boîtes de texte. Division d une boîte de texte par une valeur Voici un exemple pour convertir des Francs en Euros Indiquez une valeur (en Francs) n indiquez que des chiffres : Voici la valeur convertie en euros : Bon, ça ne donne pas un résultat très élégant, mais c est le principe qui compte. script 1 <form name="formulaire1" method="post"> <p>indiquez une valeur (en Francs) n'indiquez que des chiffres :<br> <input type="text" name="francs" size="20"> <input type="button" value="ok" onclick="document.formulaire1.euros.value = document.formulaire1.francs.value / "></p> <p>voici la valeur convertie en euros :<br> <input type="text" name="euros" size="20"></p> </form> On a le même principe qu auparavant, mais on divise la valeur de la boîte francs par (le taux de conversion de francs en euros) document.formulaire1.euros.value = document.formulaire1.francs.value / ; script 2

13 On va utiliser une fonction de conversion, qui pourra éventuellement servir à d autres cases. <script language="javascript"> <! function conversion(valeur) { return valeur / ; // > </script> </head> <body> <form name="formulaire1" method="post"> <p>indiquez une valeur (en Francs) n'indiquez que des chiffres :<br> <input type="text" name="francs" size="20"> <input type="button" value="ok" onclick="document.formulaire1.euros.value = conversion(document.formulaire1.francs.value)"></p> <p>voici la valeur convertie en euros :<br> <input type="text" name="euros" size="20"></p> </form> Cette fonction ne fait que multiplier une valeur par et retourne le résultat. document.formulaire1.euros.value = conversion(document.formulaire1.francs.value); a pour effet d affecter à la boîte de texte "euros" le résultat de la conversion de la valeur de la boîte francs, c est à dire sa division par Calculs avec sélection dans une liste Sélection de l opérateur par une liste On indique les 2 opérandes de l opération (les 2 nombres). Lorsqu on sélectionne l opération, le résultat s affiche directement dans la boîte résultat : Indiquez 2 chiffres : Voilà le résultat de l opération Choisissez l opération : addition soustraction multiplication division Voici le script : <script language="javascript"> <! function operation(val1, val2, operateur) { switch (operateur) { case 0 : return parseint(val1) + parseint(val2); break; case 1 : return val1 val2; break; case 2 : return val1 * val2; break; case 3 : if (val2!= 0) return val1 / val2; else return "division par 0";

14 // > </script> </head> <body> <form method="post" name="test5"> <table border="0" cellpadding="3" cellspacing="0" width="100%"> <tr> <td width="55%" valign="top">indiquez 2 chiffres :<br> <input type="text" name="chiffre1" size="10"> <input type="text" name="chiffre2" size="10"> <p>voilà le résultat de l'opération<br> <input type="text" name="resultat" size="20"> </td> <td width="45%" valign="top">choisissez l'opération :<br> <select size="4" onchange="document.test5.resultat.value = operation(document.test5.chiffre1.value, document.test5.chiffre2.value, this.selectedindex)"> <option>addition</option> <option>soustraction</option> <option>multiplication</option> <option>division</option> </select> </td> </tr> </table> </form> Choix de l opération dans la boîte de liste La boîte de liste est un objet <SELECT>, dans lequel on a une liste d options (<OPTION>). L événement «onchange» se déclenche lorsqu on sélectionne une option de cette liste. De plus, la propriété selectedindex indique quelle option a été sélectionnée (0 pour la 1ère, 1 pour la 2ème, etc.). En associant l instruction onchange="document.formulaire.resultat.value = une valeur" on déclenche l affichage d une valeur dans la boîte de texte «resultat». Fonction operation() Elle a 3 arguments : val1 et val2 qui sont les valeurs transmises et operateur qui est le numéro de l opérateur (0, 1, 2 ou 3). L événement onchange lui transmet comme valeurs : document.formulaire.chiffre1.value pour val1, document.formulaire.chiffre2.value pour val2 this.selectedindex pour operateur selectedindex vaut 0 si on choisit l addition, 1 si on choisit la soustration, etc.

15 Que signifie ce this? On a vu ça dans la première leçon. On aurait pu remplacer this par document.formulaire.nom_liste (si on avait donné «nom_liste» comme nom à la boîte de liste), et on aurait écrit document.formulaire.nom_liste.selectedindex. Comme l instruction «onchange...» se trouve justement à l intérieur de la balise <SELECT>, on peut utiliser this (pour faire plus court) qui indique l objet en cours. Les différentes parties d une page HTML Délimiteurs HTML La page est délimitée par les balises <HTML> et </HTML> En tête Limité par les balises <HEAD> et </HEAD>, cet en tête recevra la plupart de vos scripts, des fichiers.js ou des feuilles de styles inclus. Corps de la page Il est délimité par les balises <BODY> et </BODY> et contient tout votre code HTML ainsi que les scripts qui s exécutent dans ce code. Dans quelle partie de la page HTML doit on écrire son script? Réponse : là où c est nécessaire... Mais un principe de base : si votre script écrit dans la page (document.write() ), mettre le script à l endroit de la page où il doit écrire ; sinon l installer dans l en tête (avant la balise </HEAD>) de la page Dans la page, mais où? Voici un exemple :

16 <HTML> avant la balise </HEAD> <HEAD> <SCRIPT LANGUAGE="Javascript">// script lu à l'ouverture de la page <! début de script /* cette fonction sera lue et définie en début de page, mais elle ne sera exécutée que lorsqu'on l'appelera (en appuyant le bouton, voir plus bas) */ function camarche() { alert("oui, ça marche!"); // ligne exécutée en début de page document.write("<font color='#ff0000'>la page commence à s'ouvrir (texte écrit avant la balise </HEAD></font>"); > // fin de script </SCRIPT> </HEAD> dans la balise <BODY> <! la fonction appelée par onload est exécutée au chargement de la page > <! et celle appelée par onunload est exécutée lorsqu'on quitte la page > <BODY onload="camarche()" onunload="alert('salut et à la prochaine')"> dans le corps de la page <! un formulaire > <FORM> <INPUT TYPE=button VALUE="est ce que ça marche?" onclick="camarche()"> <! la fonction camarche() ne sera exécutée qu'en appuyant sur le bouton > <! on aurait pu aussi bien se passer de la fonction camarche() et écrire onclick="alert('oui, ça marche!')" > </FORM> <p>texte HTML dans la page</p> <SCRIPT LANGUAGE="Javascript"> // script lu en fin de chargement de la page <! début de script document.write("<font color='#ff0000'>texte écrit en milieu de page</font>"); > // fin de script </SCRIPT> </BODY> après la balise </BODY> <SCRIPT LANGUAGE="Javascript"> // script lu en fin de chargement de la page <! début de script document.write("<font color='#ff0000'>la page est chargée (texte écrit après la balise </BODY></font>"); > // fin de script </SCRIPT> </HTML>

17 voir l exemple On a utilisé un script dans le corps de la page (<INPUT TYPE=...>). Ce script est déclenché par un bouton, donc il ne sera utilisé qu à ce moment là. Mais ce script fait appel à une fonction, qu on a définie au début de la page. C est une bonne méthode de définir les fonctions en tête de page : une fonction n est exécutée que si elle est appelée. Le script défini dans le corps de la page sera exécuté au moment de sa lecture par le navigateur. Généralement, on peut dire qu on place dans le corps de la page les scripts qui doivent écrire à cet endroit précis, les autres scripts devant être placés avant la balise </HEAD> Enfin, le dernier script est situé en fin de page, car il se déclenchera dès que la page est finie de charger. Dans un fichier.js séparé On peut également écrire son code Javascript dans un fichier séparé de la page qui l utilise. C est très utile lorsqu on appelle les mêmes fonctions dans plusieurs pages de son site. Syntaxe Le fichier séparé est un fichier Javascript, d extension.js, et qui ne contient que le code Javascript (définition de variables, de fonctions...), sans aucune balise HTML. On peut tout à fait écrire un fichier.js avec un éditeur texte comme le bloc notes de Windows. Il suffit de sauvegarder son fichier avec l extension.js au lieu de.txt. Voici comment on appelle un fichier séparé dans sa page HTML : <SCRIPT LANGUAGE="JavaScript" SRC="votre_fichier_javascript.js"></SCRIPT> On peut le placer n importe où, comme précédemment, mais de préférence avant la balise </HEAD> Évidemment, les appels aux fonctions définies dans ce fichier séparé devront se faire dans la page HTML. On peut également avoir le fichier séparé dans un autre répertoire : <SCRIPT LANGUAGE="JavaScript" SRC="mon_rep/votre_fichier_javascript.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="../mon_rep/votre_fichier_javascript.js"></SCRIPT> Tous les navigateurs ne reconnaissent pas les fichiers.js séparés Jusqu aux versions Netscape 3.04 et Internet Explorer 3.02 la définition d un fichier.js séparé n est pas reconnue ; certaines versions de Netscape 3.04 et Internet Explorer 3.02 le reconnaissent, pas d autres... Après ces versions, pas de problème. Peut on utiliser plusieurs fichiers.js séparés? Oui :

18 <SCRIPT LANGUAGE="JavaScript" SRC="votre_fichier_javascript1.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="votre_fichier_javascript2.js"></SCRIPT> On peut aussi utiliser des fichiers.txt Vous pouvez aussi écrire vos scripts dans des fichiers.txt. Ca peut être utile si vous n avez pas d éditeur HTML pouvant sauvegarder vois fichiers en.js. Un exemple de fichier.js // commentaire var une_variable = "ma variable"; function ma_fonction1() { document.write("<h3>salut</h3>"); function ma_fonction2() { $chaine = "<center>salut</center>"; document.write(chaine); Donc, rien d autre dans ce fichier que du code Javascript. Pas d en tête quelconque comme en HTML. On peut écrire des balises HTML mais dans un document.write() ou dans des variables qui doivent être affichées par un document.write(). 3 remarques en passant On a vu 2 méthodes de sortie : alert("un message") qui affiche un message d avertissement et document.write("un texte") qui écrit dans la page en cours (mais uniquement au chargement de la page). Les commentaires HTML et les commentaires Javascript : <! ce texte est un commentaire HTML > // ce texte est un commentaire Javascript, à ne mettre que dans un script /* ce texte est encore un commentaire Javascript qu'on peut écrire sur plusieurs lignes, à ne mettre que dans un script */ A quoi servent les lignes <! début de script et > // fin de script? Elles permettent aux navigateurs ne reconnaissant pas le javascript d ignorer le script (comme si c était un commentaire) et de ne pas retourner d erreur. De plus Netscape 4 renvoie une erreur Javascript si ces 2 signes de commentaires sont absents. Les objets prédéfinis utilisés par le langage Javascript L organisation en objets Le document HTML ou la page c est la même chose. En Javascript on l appelle «document».

19 Le principe des objets (formulaires, images, liens, etc...) du document est la hiérarchisation. On peut comparer ça aux poupées russes. Le document a un formulaire appelé «nom_formulaire». Ce formulaire a un champ (case) texte appelé «Nom» (dans lequel vous devez taper votre nom). Ce champ «Nom» a une propriété «value», qui est votre nom quand vous l aurez saisi. Donc, en Javascript, la valeur de ce champ s écrira : document.nom_formulaire.nom.value Le point «.» sert de symbole de «filiation» entre objets et sous objets ou propriétés. de la même manière : document.title vous donne le titre de la page (qui se trouve dans <TITLE>titre de la page</title>) document.nom_formulaire.name donnera «nom_formulaire», car c est le nom du formulaire document.screen.width donnera la largeur de votre écran Les collections Le document possède une collection «images». Ce sont toutes les images de la page. Par exemple les champs d un formulaire ne font pas partie des "elements" de la page, mais ils font partie des "elements" du formulaire. document.images[0] est la première image de la page, document.images[1] est la deuxième, etc. En plus de la collection «images», il y a des collections comme «links» qui sont tous les liens hypertextes, «forms» représente tous les formulaires, etc. Exemple : document.forms[0].name donnera «nomformulaire» De même les formulaires possèdent une collection «elements», qui sont tous les objets d un formulaire, champs texte, boutons, cases à cocher, etc. Autre exemple de collection, si vous avez une série de boutons radio (boutons ronds parmi lesquels un seul ne peut être coché) appelés "boutonsronds", pour savoir lequel a été coché, il vous faudra utiliser la formule document.formulaire.boutonsronds[i].checked ("i" étant un indice de recherche). Les méthodes En programmation objet, cela signifie les fonctions qui sont intégrées à un objet. Le document possède des méthodes, ainsi que les objets du document. On utilise toujours le point "." pour lier une méthode à son objet :

20 Les objets hors page Exemple : le très courant document.write() qui écrit dans la page ou document.nomformulaire.submit() qui envoie le formulaire. Les parenthèses sont indispensables, même s il n ya rien dedans. Cela indique à Javascript qu il s agit d une fonction. Dans une page HTML, il faut parfois s occuper de se qui se passe en dehors... Par exemple, l objet window caractérise la fenêtre du navigateur, différente de la page. Si vous avez des cadres dans votre fenêtre, chaque cadre contiendra une page (un document), et tous les cadres seront inclus dans la fenêtre (window). Vous pouvez ouvrir une autre fenêtre avec window.open(), et la refermer avec window.close(). L objet location caractérise l adresse Internet (l URL) de votre page, mais il ne fait pas partie du document. location.href représente l URL de la page ouverte. Si vous voulez charger la page "page2.htm", vous écrivez location.href = "page2.htm Pour revenir aux cadres : les cadres sont définis dans une "page de cadres", dans laquelle vous avez les balises Les objets utilisateur Vous pouvez vous aussi créer des objets à l intérieur de la page et leur ajouter des propriétés et des méthodes, en utilisant le même principe. Les types de données de base du langage Javascript et les tableaux Les types de base en Javascript page_chargee = true; // vrai en anglais x = 1; y = x + page_chargee; // donnera y = 2 texte = "2 v'là les flics!"; alerte = y + texte; // donnera alerte = "22 v'là les flics!" Voilà une horreur selon les «spécialistes» qui ont connu d autres langages, mais bon, c est possible en Javascript. On dit que Javascript est un langage à typage faible, c est à dire qu on peut affecter à peu près n importe quoi à une variable. On distingue quand même 3 types de données de base : les booléens qui ne prennent que 2 valeurs «vrai» ou «faux» (true / false) les numériques, comme le nom l indique les chaînes de caractères Exemples : document.nom_formulaire.checkbox1.checked = true; a pour effet de cocher le bouton appelé «checkbox1» du formulaire «nom_formulaire» (false aurait l effet inverse)

21 var pi = ; affecte la valeur à la variable «pi» var nombre_jours = 365; affecte la valeur 365 à «nombre_jours» (le tiret est interdit dans le nom des variables, il faut utiliser le caractère de soulignement «_») var monnom = "Bernard Martin Rabaud"; (on peut mettre n importe quel caractère sauf quelques exceptions dans une chaîne de caractères) var vide = ""; c est une chaîne de caractère vide, très utile... var tonnom = "je m'appelle 'Tania', et toi?"; var tonnom1 = 'je m\'appelle "Tania", et toi?'; on peut mettre aussi une chaîne de caractères entre aopstrophes, dans ce cas les guillemets font partie de la chaîne, mais si on laisse l apostrophe de «m appelle» telle que, Javascript croira que la chaîne est je m et inquera une erreur car il ne comprendra pas ce qui suit. C est pour cette raison qu il faut placer un «\» avant. var tonnom2 = "je m'appelle \"Tania\", et toi?"; on a conservé les guillemets autour de "Tania", mais en les faisant précéder d un «\» var fichier = "c:\\images\\image.gif"; lorsqu on doit utiliser un antislash «\» dans la chaîne, il faut en mettre 2. Les tableaux Les tableaux sont des séries de données, généralement du même type (booléens, numériques ou chaînes de caractères), indicées de 0 jusqu à ce qu on veut. Peut on créer un tableau à 2 dimensions? Non. Du moins pas directement. Il faut créer un tableau de tableaux. Pour créer un tableau, on utilise la fonction new et la donnée Array : var tableau1 = new Array(); var tableau2 = new Array(10); Dans le 1er tableau, le nombre d éléments du tableau n est pas défini, dans le second il y a 10 éléments. Contrairement au C, les valeurs à stocker dans le tableau ne sont pas définies à l avance. On peut aussi copier un tableau à partir d un autre : var tableau3 = tableau2 C est une copie "dynamique" : c est à dire que si tableau2 est modifié, tableau3 le sera aussi automatiquement. var tableau4 = eval(tableau2.tosource()); Ici c est une copie "statique" : après la copie, les modifications ultérieures de tableau2 n ont plus aucune influence sur tableau4.

22 On accède aux éléments du tableau de cette manière tableau1[0] ou tableau2[3]. Le premier élément de tableau1 est tableau1[0] et le dernier élément de tableau2 sera tableau[9] et non pas tableau2[10]. On peut donc affecter des valeurs aux tableaux : tableau1[0] = 15; tableau1[1] = "javascript"; tableau1[2] = 3.5; Oui, on peut affecter des valeurs de différents types à un tableau. Ce n est pas recommandé, car on ne sait plus très bien à quoi correspondent tel ou tel tableau, mais c est possible. On peut également créer un tableau en lui affectant directement des valeurs : var jours = new Array("lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"); Tableau à 2 dimensions Pour créer un tableau à 2 dimensions (plus de 2, c est très rare), on crée un simple tableau. Puis on crée un tableau pour chaque élement. var tableau = new Array(); tableau[0] = new Array("valeur01", "valeur02",...); tableau[1] = new Array("valeur11", "valeur12",...); etc. Pour accéder à un élément du tableau à 2 dimensions : var valeur = tableau[1][1]; // donne "valeur12" Exemple : le tableau des visites de votre site par mois et par année. var visites = new Array(12); // pour les 12 mois de l'année visites[0] = new Array(); // tableau des visites du mois de janvier visites[1] = new Array(); // tableau des visites du mois de février visites[0][0] = 1000; // nombre de visites du mois de janvier pour la 1ère année visites[0][1] = 1250; // nombre de visites du mois de janvier pour la 2ème année visites[1][0] = 900; // nombre de visites du mois de février pour la 1ère année Les instructions conditionnelles «if... else...», «while»... Il y en a de 4 sortes : le if et if...else («si» et «si...sinon») les boucles l instruction switch les instructions de continuation ou de rupture If et if...else Voici des exemples

23 si la boîte de texte "Nom" du formulaire "NomFormulaire" est vide, on envoie un message d alerte if (document.nomformulaire.nom.value == "") // condition toujours entre () alert("vous avez oublié de donner votre nom"); si le navigateur du visiteur supporte les objets images (Netscape 4+ et Internet Explorer 4+), on appelle la fonction changerimages(), sinon on envoit un message d alerte if (document.images) changerimage(); else alert("votre navigateur ne peut visualiser le changement d'images"); si l adresse e mail saisie dans la boîte de texte " " du formulaire "NomFormulaire" en contient pas de "@", on envoit un message d alerte et on remet le curseur dans la boîte . Lorsque if (ou else) contient plusieurs instructions il faut mettre des accolades. if (document.nomformulaire. .value.indexof("@") == 1) { alert("votre adresse e mail n'est pas valide); document.nomformulaire. .focus(); Forme raccourcie Dans certains cas où la condition est relativement simple, on peut utiliser ce raccourci : Cette fonction rajoute un "0" avant un nombre s il est < 10, utile pour indiquer une date, du style 01/01/2000 function ajoute0si (nombre) { if (nombre < 10) var resultat = "0" + nombre; else var resultat = nombre; return resultat; On peut écrire plus simplement : function ajoute0si (nombre) { var resultat = (nombre < 10)? "0" + nombre : nombre; return resultat; La syntaxe est : (condition)? résultat si condition vraie : résultat si condition fausse Les boucles Il y a l instruction «for» («pour») et l instruction «while» («tant que»)

24 L instruction «for» sert lorsqu on veut parcourir totalement une série comme un tableau, tous les éléments d un document ou d un tableau L instruction «while» sert lorsqu on parcourt une série mais que l on veut sortir si l un des éléments de la série satisfait à une condition. Boucle for Cette boucle parcourt tous les éléments du tableau "tableau" sauf le dernier et a pour effet de supprimer le 1er élément et de déplacer tout le tableau d un indice for (i=0;i<tableau.length 1;i++) tableau[i] = tableau[i+1]; Comme avec "if", s il y a plusieurs instructions dans la boucle "for", il faut les encadrer par des accolades Boucle for...in Une autre boucle «for» : la boucle «for in». Elle permet de parcourir les éléments d un objet. C est en particulier, la seule façon de parcourir un tableau dont les éléments ne sont pas indicés, mais indiqués par des valeurs alphabétiques. Exemple : var age = new Array(); age["julie"] = 14; age["nicolas"] = 15; for (var i in age) alert("l'âge de " + i + " est " + age[i]); Cette boucle, pas souvent utilisée, peut fréquemment remplacer une boucle for (var i=0 ;i<fin ;i++). Boucle while Cette instruction parcourt un tableau "Prenoms" contenant des prénoms classés dans l ordre alphabétique à la recherche du prénom "Tania" : si elle le trouve la boucle s arrête var i = 0; while (Prenoms[i]!= "Tania") // "!=" veut dire différent de i++; // "i++" signifie "i = i + 1" En fait cette boucle peut tourner indéfiniment si le prénom "Tania" n est pas trouvé ; il faut écrire : var i = 0; while ((Prenoms[i]!= "Tania") && (i < Prenoms.length)) i++; Noter le "&&" qui signifie ET dans une condition Noter aussi les doubles () On peut écrire encore plus simplement : var i = 0; while ((Prenoms[i]!= "Tania") && (i++ < Prenoms.length))

25 car "i" est incrémenté (augmenté de 1) après la condition Boucle do...while Il existe aussi l instruction «do... while», qui est similaire à «while», mais on teste la condition à la fin de la boucle, au lieu de la tester au début. Exemple précédent : var i = 1; do { i++; while ((Prenoms[i]!= "Tania") && (i < Prenoms.length)); Attention les boucles sont dangereuses! Si, d une manière ou d une autre, votre boucle risque de boucler sans fin, vous allez planter votre machine et éventuellement celle de vos visiteurs. L instruction «switch» Très utile lorsqu on doit traiter les différentes valeurs d une même donnée. Exemple : Cette fonction effectue la conversion en francs les valeurs de conversion ne sont pas garanties! function conversion (somme, monnaie) { if (monnaie == "euros") somme *= 6.57; else if (monnaie == "dollars") somme *= 6.80; else if (monnaie == "marks") somme *= 3.35; else if (monnaie == "livres") somme *= 9.50; else; return somme; Utilisation de "switch" : function conversion (somme, monnaie) { switch (monnaie) { case "euros" : somme *= 6.57; break; case "dollars" : somme *= 6.80; break; case "marks" : somme *= 3.35; break; case "livres" : somme *= 9.50; break; default : somme = somme; return somme;

26 La forme avec switch n est pas nécessairement plus courte, mais elle est plus claire. La partie "default" sert lorsqu aucune valeur ne correspond aux valeurs précédentes : elle est facultative. L instruction break à la fin de chaque case est indispensable. Mais on peut l omettre dans certains cas. Voici un exemple, qui indique comment accéder à un objet identifié par son id en fonction du navigateur : function accesobjet(id, nav) { switch (nav) { case "nn4" : var obj = document.layers[id]; break; case "ie4" : var obj = document.all[id]; break; case "gecko" : case "ie6" : var obj = document.getelementbyid(id); Si le navigateur est "nn4", on exécute le premier case, si c est "ie4" on exécute le second. Si c est "gecko", comme on n a pas de break, on passe au 4e case et on l exécute. Si c est "ie6" on exécute directement le 4e case. Notez qu on n a pas besoin de break au dernier case. Les instructions de continuation et de rupture break L instruction break permet de sortir d une boucle. On vient de la voir dans l instruction switch. Voici un exemple d une boucle de recherche d un nom dans un tableau de noms : var listenoms = {"Marie", "Nicolas", "Gwenaël", "Pierre", "Julie"; var continuer = true; var i = 0; while (continuer) { if (nom == listenoms[i]) continuer = false; else if (i < listenoms.length 1) i++; else continuer = false; if (i < listenoms.length) var trouve = true; else var trouve = false; et en utilisant "break" : var i = 0; while (i < listenoms.length) { if (nom == listenoms[i]) break; else i++; if (i < listenoms.length) var trouve = true; else var trouve = false; Si le nom est égal à listenoms[i], l instruction break permet de sortir de la boucle. L utilisation de break permet un code plus succinct et plus rapide, car on économise la variable "continuer" et le test de cette variable à chaque boucle.

27 Notez que la numérotation d un tableau commence à 0, et que le dernier élément vaut 4 ici, alors que listenoms.length vaut 5 (5 éléments). continue L instruction continue retourne directement au début de la prochaine boucle. Son utilisation est plus rare. Elle a l effet inverse de break. Comme exemple, on va reprendre notre liste de noms et ajouter "Jean " seulement devant "Pierre". var i = 0; for (i=0;i<listenoms.length;i++) { if (listenoms[i]!= "Pierre") continue; listenoms[i] = "Jean " + listenoms[i]; continue permet de retourner directement à la boucle suivante, sans exécuter l instruction qui suit. return l instruction return, dans une fonction : permet de sortir (prématurément ou pas) de la fonction Voici le même exemple que précédemment, dans une fonction : var listenoms = {"Marie", "Nicolas", "Gwenaël", "Pierre", "Julie"; function recherche(nom) { var i = 0; while (true) { if (nom == listenoms[i]) return true; else i++; return false; Le premier return sort directement de la fonction, en retournant la constante true (vrai). Le second return retourne la constante false (faux), puisqu on n a pas trouvé l argument «nom» dans la boucle while Portée des variables en Javascript Une variable javascript peut avoir une portée globale, elle est alors disponible dans la page en cours, ou une portée locale, elle n est disponible que dans la fonction qui l a déclarée. Voici un petit script où on trouve 2 déclarations d une variable x : <script language="javascript"> <! var x = 10; // variable globale function increment(argument) { // variable locale redéfinie var x = argument + 1;

28 return x; x = increment(x); // variable globale // > </script> L identificateur x représente en fait 2 variables différentes : Une variable globale qui vaut 10 au début du script et vaut 11 à la fin, Une variable locale dans la fonction increment qui vaut argument + 1. C est une variable locale, car elle a été redéfinie par le mot clé var. L instruction x = increment(x) ; commence par affecter la valeur de la variable globale x (10) à l argument de la fonction. Puis cet argument est augmenté de 1 pour être affecté à la variable locale x, qui vaut donc 11. Cette valeur est retournée par la fonction et affectée à la variable globale x. Dans cette autre version, on travaille directement avec la variable globale : <script language="javascript"> <! var x = 10; // variable globale function increment(argument) { // variable globale x = argument + 1; increment(x); // > </script> On n a pas de redéfinition de la variable x dans increment, donc il s agit de la variable globale. On n a pas besoin de return, puisque x est modifié "globalement" (pour tout le script). Et donc faire simplement increment(x) ; suffit pour modifier la variable. Variables globales Ce sont des variables définies dans le corps du script, en général tout au début. En dehors de toute fonction. On peut ensuite les utiliser dans tout le script, même à l intérieur des fonctions. Leur valeur évolue au cours du déroulement du script. <html> <head> <script language="javascript"> <! var x = 10; // variable globale x = x + 1; // > </script> </head> <body> <script language="javascript">

29 <! // cette instruction doit afficher "x = 11" alert("x = " + x); // toujours notre même variable globale // > </script> </body> </html> Ce code montre qu une variable globale est également valide dans toute la page, même définie à l intérieur de balises <script> différentes. Evidemment, une fois la page fermée, la variable est perdue. Variables locales Elles sont définies dans une fonction. Elles ne sont valables qu à l intérieur de cette fonction, elles sont détruites ensuite. Leur valeur n est plus disponible en dehors. Si une variable, dans une fonction porte le même nom qu une variable globale et est créée avec var, alors elle est considérée comme une nouvelle variable locale. C est le cas dans le tout premier exemple. Si une variable dans une fonction porte le même nom qu une variable globale et n est pas créée avec var, alors il s agit toujours de la même variable globale (2e exemple). Contrairement au C, une variable définie au sein d un bloc (zone de code entre 2 accolades ) n est pas une variable locale. Autre exemple Dans la fonction : y définie avec var est une variable locale qui n a rien à voir avec le y défini plus haut. par contre x est toujours la même variable globale définie au début, et x vaut = 20 Après la fonction : x vaut maintenant 20 y vaut toujours 100 <script language="javascript"> <! var x = 10; // variable globale var y = 100; // variable globale function ajoute10() { var y = 10; // variable locale x = x + y; // variable globale x ajoute10(); alert(x); alert(y); // variable globale // > </script>

30 Généralement, on ne s amuse pas à redéfinir une variable locale de même nom qu une variable globale. C est une source de confusion. Par contre, il est préférable, si possible, d utiliser des variables locales qui sont détruites après utilisation, plutôt que des variables globales qui restent en mémoire tant que la page est affichée. Fonctions, arguments et appels de fonction C est un élément très important, car il y en a dans pratiquement tout script. La syntaxe function une_fonction(argument1, argument2...) { // corps de la fonction Une fonction peut ne pas avoir d arguments, mais on laisse les parenthèses vides. Ceux qui viennent du Basic seront un peu désarçonnés au départ : sub une_fonction donne en Javascript (la syntaxe vient de celle du C) : function une_fonction() {... Les arguments Les arguments, situés dans les parenthèses à la suite du nom de la fonction, permettent au script de transmettre des variables à la fonction. Voici un exemple // Exemple 1 var nombre = 10; var carre = 0; function carre_de (x) { return x*x; carre = carre_de(nombre); nombre = carre_de(2); document.write("carré = " + carre); // donnera "carré = 100" document.write("nombre = " + nombre); // donnera nombre = 4 Dans cet exemple x est un argument de la fonction carre_de(). On peut appeler cette fonction en utilisant n importe quelle variable numérique ou un nombre comme carre_de(2). La fonction utilise l instruction return qui lui permet de retourner une valeur (une fonction ne peut retourner qu une valeur). // Exemple 2

31 var nombre = 10; var carre = 0; function carre_de (x) { x = x*x; carre = carre_de(nombre); document.write("carré = " + carre); // donnera "carré = 0" Dans ce 2ème exemple, la fonction fait un calcul interne. Si on écrivait l instruction alert("x = " + x) ; à l intérieur de la fonction, on afficherait "x = 100", mais la fonction ne retourne aucune valeur. Comme x n est pas défini à l extérieur de la fonction, si on écrivait cette instruction à l extérieur, on aurait une erreur Javascript "x est inconnu". // Exemple 3 var nombre = 10; var carre = 0; function carre_de () { carre = nombre*nombre; carre_de(); document.write("carré = " + carre); // donnera "carré = 100" Dans ce 3ème exemple, on utilise ce qu on appelle une "variable globale". Ce type de variable est définie à l extérieur de la fonction, mais celle ci peut les utiliser et les modifications seront valides pour l extérieur de cette fonction. Une fonction peut avoir comme arguments des variables booléennes, numériques, chaînes de caractère, des tableaux, des objets. Valeur de retour Une fonction peut retourner une valeur. Elle utilise pour cela le mot clé return, comme dans l exemple 1. La fonction peut donc être appelée ainsi : var valeur = fonction(arguments); où valeur prend la valeur de retour de la fonction. Une valeur de retour peut être évidemment une chaîne de caractère, un nombre, mais aussi un tableau, ou un objet. function jour_daujoudhui() { return new Date(); var jour = jour_daujoudhui(); jour sera un objet Date() à la date du jour. Retourner plus d une valeur

32 Malheureusement une fonction ne peut retourner qu une seule valeur. C es parfois génant, si par exemple on veut retourner des coordonnées x et y. Il suffit alors de retourner un tableau ou un objet. Exemple : function lirecoordonnees() { var xcoord = 0; var ycoord = 100; var coords = new Array(xcoord, ycoord); return coords; var position = lirecoordonnees(); var x = position[0]; var y = position[1]; La fonction lirecoordonnees retourne un tableau. Voici le même exemple en retournant un objet : function lirecoordonnees() { var xcoord = 0; var ycoord = 100; var coords = {x:xcoord, y:ycoord); return coords; var position = lirecoordonnees(); var x = position.x; var y = position.y; L instruction {x:xcoord, y:ycoord) est un façon rapide de créer un objet en Javascript (on utilise des accolades et non des parenthèses). En Javascript les arguments sont passés par valeur... et non par référence (pour ceux qui viennent du C ou du C++). Ca veut dire si un argument est modifié au sein de la fonction, cette modification n a aucun effet à l extérieur de celleci. C est la valeur de la variable qui est transmise à la fonction, mais pas la variable ellemême. Exemple : var nombre = 2; document.write("avant la fonction produit() nombre = " + nombre + "<br>"); function produit (nombre) { nombre = nombre * 10; document.write("dans la fonction produit() nombre = " + nombre + "<br>"); return nombre; document.write("après la fonction produit() nombre = " + nombre"); Ca donne :

Montrer encore