Le Langage JavaScript

Transcription

1 T-GSI STAGE RENOVATION - HTML.Chapitre 5 - Le Langage JavaScript Sources du document : Livre d Eric Crepin Conception de site Internet Intranet ; Le consortium W3C (texte de référence HTML 4.01 du 18 décembre 1997) ; Le site ALL WEB ; Le site ALL HTML ; Magazine Compétence Micro n 9 et 16. Autres sources données à titre de bibliographie : Le site de Didier cabuzel ; Le site devparadise ; Le site WebDeveloper; Magazine Linux Pratique HS juin-juillet 2005, Développement Web. Olivier Mondet A. Les scripts Il est possible d augmenter les performances de XHTML, en ajoutant des fonctionnalités de présentation, et d interactivité. Ceci en utilisant directement au sein des documents XHTML des langages spécifiques tels que JavaScript (JS), ou VBScript (VBS). A.1. Description des scripts L utilisation d un script dans un fichier XHTML est de la forme : <!-- description d un script --> <script type="text/javascript"> <![CDATA[... contenu du script... ]]> </script> NB : La déclaration sera text/vbscript pour du VBScript. Ces scripts se placent généralement dans l en-tête du document : La normalisation XHTML impose l insertion de scripts externes placés dans un fichier à part (portant l extension.js) et déclaré dans l en-tête par la ligne : <script type="text/javascript" src="script/script.js"></script> Ch.5 - Le Langage JavaScript.doc page 1 / 37 om ( )

2 A.2. Premier exemple Affichage de texte par le biais de JavaScript : <title>(x)html avec Javascript</title> <p>ici c est le contenu de la page sans JavaScript!</p> <!--Début du script document.write("hello World!"); // Fin du script--> L intérêt de cette manipulation peut sembler obscur, et même décevant. Mais on vient de prouver qu un programme écrit en JavaScript peut interférer dans une page Web. Or, les pages HTML ne sont pas des programmes, il n y a pas de réactivité à des événements autres que ceux inscrits entre les balises. L ajout de commandes va donc permettre de connaître beaucoup plus de possibilités (déclaration de variables, structures conditionnelles, structures de contrôle ). A.3. Entrées / sorties, utilisation de variables A.3.1. Affectation <title>(x)html avec Javascript</title> <p>coucou!!</p> Ch.5 - Le Langage JavaScript.doc page 2 / 37 om ( )

3 <!--Début du script var nom; nom=prompt("veuillez entrer votre nom",""); alert("heureux de faire votre connaissance, " + nom + "!"); // Fin du script--> A.3.2. Calculs Bien évidement le JavaScript donne toutes les possibilités d un langage : Opérateur Signification Exemple + Addition a=10+c; - Soustraction c=b-1; * Multiplication u=10*3 / Division t=x/y ++ Incrément -- Décrément Exemple de calculs : <title>(x)html avec Javascript</title> Ch.5 - Le Langage JavaScript.doc page 3 / 37 om ( )

4 <!--Début du script var a, b, resultat; a=prompt("veuillez entrer un premier nombre","0"); b=prompt("veuillez entrer un second nombre","0"); resultat=a*b; document.write("le résultat de l opération est le suivant : " + resultat + "!"); // Fin du script--> Vous noterez au passage que l on a mis une valeur 0 par défaut dans la saisie. Cette valeur apparaîtra en surbrillance bleue et sera effacée dès que l on saisira un nombre. Ch.5 - Le Langage JavaScript.doc page 4 / 37 om ( )

5 A.3.3. Exemples de scripts simples (formes algorithmiques usuelles) Mot de passe (si l utilisateur entre le bon mot de passe il peut accéder à la page d accueil) : <title>(x)html avec Javascript</title> var a, b, c, motdepasse; a="tra"; b="la"; c="lere"; motdepasse=prompt("veuillez saisir le mot de passe",""); if (motdepasse==a+b+b+c) location.href="pageaccueil.html"; else alert("accès refusé! Access denied"); On aura reconnu la forme conditionnelle SI ALORS SINON - FINSI : Ch.5 - Le Langage JavaScript.doc page 5 / 37 om ( )

6 Changement de couleur de l écran (avec la commande switch) : <title>(x)html avec Javascript</title> var couleur; couleur=prompt("choisissez parmis ces couleurs : jaune, gris rouge","jaune"); switch(couleur) case "rouge" : document.bgcolor="red"; break; case "jaune" : document.bgcolor="yellow"; break; case "gris" : document.bgcolor="gray"; break; default : alert("cette couleur n existe pas!!"); On aura reconnu la forme conditionnelle SELONQUE FAIRE CAS ) - FINSELONQUE : Ch.5 - Le Langage JavaScript.doc page 6 / 37 om ( )

7 Déviation vers des pages spécifiques : <title>(x)html avec Javascript</title> var couleur; couleur=prompt("quel est votre nom d utilisateur?",""); switch(couleur) case "pierre" : location.href="pagepierre.html"; break; case "marc" : location.href="pagemarc.html"; break; case "evelyne" : location.href="pageevelyne.html"; break; case "angelique" : location.href="pageangelique.html"; break; default : alert("cette utilisateur n existe pas vous ne pouvez pas accéder aux sites!!"); location.href="pageaccueil.html"; Bien évidement on retrouve les structures itératives traditionnelles d algorithmique : for(initialisation ;condition d arrêt ;incrément/décrément) while(condition) Mot de passe version 2 (avec nombre limité d accès) : <title>(x)html avec Javascript</title> Ch.5 - Le Langage JavaScript.doc page 7 / 37 om ( )

8 var secret, motdepasse, i=0; secret="tralalalere"; while(motdepasse!= secret && i<3) motdepasse=prompt("veuillez saisir le mot de passe",""); i++ ; if (motdepasse==secret) location.href="page.html"; else alert("le mot de passe est incorrect!"); NB : i++ correspond à i=i+1. On aura reconnu la forme itérative TANTQUE FAIRE FINTANTQUE : A.4. Utilisation de fonctions JavaScript et gestionnaires d événements A.4.1. Gestion des événements Les fonctions de JavaScript permettent de lancer des actions spécifiques (plusieurs fois de suite ou plusieurs fonctions différentes) dans une même page. Pour ce faire on les associe souvent à des gestionnaires d événements. Evénement onabort onblur onclick ondblclick onchange onerror onfocus onload onmouseout onmouseover onreset onselect onsubmit onunload Se produit quand Le chargement d'une image a été interrompu. La souris quitte une zone formulaire. On clique sur un objet d un formulaire ou un lien. On double-clique sur un objet. On change une zone texte ou une sélection d'élément. Il y a une erreur de script. La souris entre dans une zone formulaire. On charge la page dans le navigateur ou un objet graphique. La souris sort d'une zone imagemap, d un objet La souris passe au-dessus d'un lien ou d'un formulaire, d un objet graphique. On vide le contenu d un formulaire. On sélectionne un élément dans un formulaire. On envoie un formulaire. On sort de la page (de la fenêtre). Ch.5 - Le Langage JavaScript.doc page 8 / 37 om ( )

9 Balises associées aux événements : Balise <A> <AREA> <BODY> <FORM> <IMG> <INPUT> avec TYPE="button" ou "checkbox" ou "radio" <INPUT> avec TYPE="text" ou <TEXTAREA> <INPUT> avec TYPE="SELECT" Evénement onclick onmouseover onmouseout onmouseover onmouseout onblur onfocus onload onunload onreset onsubmit onabort onload onerror onclick onblur onchange onfocus onselect onblur onchange onclick onfocus A.4.2. Insertion d un bouton d action et fonction JavaScript Exemple changement de couleur de la page : <title>html et JavaScript</title> <h1>page avec fonction de couleur</h1> <form> <input type="button" VALUE="Gris clair" onclick="silver()" /> </form> function silver() document.bgcolor="silver"; Ch.5 - Le Langage JavaScript.doc page 9 / 37 om ( )

10 On aura reconnu la déclaration d une fonction FONCTION FIN : A.4.3. Gestion des événements avec l ouverture/fermeture de fenêtre Déclenchement d une fonction au démarrage ou à la fermeture du document (la page devient grise dès que la page est lancée) : <title>html et JavaScript</title> <body onload="silver()"> <h1>page avec fonction de couleur</h1> function silver() document.bgcolor="silver"; Ch.5 - Le Langage JavaScript.doc page 10 / 37 om ( )

11 Un message d adieu se lance dès que l on ferme la fenêtre : <title>html et JavaScript</title> <body onunload="byebye()"> <h1>page avec fonction</h1> function byebye() alert("salut! A la prochaine!!"); A.4.4. Lancement des fonctions On peut également démarrer une fonction via un lien hypertexte : <title>html et JavaScript</title> <body"> <h1>page avec fonction</h1> <p> Si vous voulez lancer le message d adieu cliquez <a href="javascript:byebye()">ici</a> </p> function byebye() alert("salut! A la prochaine!!"); Egalement via le passage sur un objet : <title>html et JavaScript</title> <link rel="stylesheet" href="votre_style.css" type="text/css"> <body"> <h1>page avec fonction</h1> Ch.5 - Le Langage JavaScript.doc page 11 / 37 om ( )

12 <p> <img src="images/titileft.gif" onmouseover="bonjour()" alt="cuicui"> </p> function bonjour() alert("salut! Vous êtes passé sur moi!"); img border: 0px; A.5. Fonctions avec passage de paramètre Par exemple le changement d arrière plan peut se faire de la façon suivante : <title>html et JavaScript</title> <h1> Page avec fonction choix de couleur :</h1> <form> <input type="button" value="rouge" onclick="arriereplan('red')" /> <input type="button" value="jaune" onclick="arriereplan('yellow')" /> <input type="button" value="gris calir" onclick="arriereplan('silver')" /> </form> function arriereplan(couleur) document.bgcolor=couleur; Ch.5 - Le Langage JavaScript.doc page 12 / 37 om ( )

13 Commandes JavaScript inline (lancement de commandes JavaScript simples sans balises de script) : <title>html et JavaScript</title> <h1>page avec instructions inline :</h1> <form> <input type="button" value="microsoft" onclick="location.href=' /> <input type="button" value="yahoo" onclick="location.href=' /> </form On aurait pu ouvrir le lien dans une nouvelle fenêtre de cette façon avec : <input type="button" value="yahoo" onclick="window.open(' /> L objet history permet au visiteur de revenir à la page précédente (comme dans le navigateur) ou d aller à la suivante : <input type="button" value="précédent" onclick="javascript:history.back()" /> <input type="button" value="suivant" onclick="javascript:history.forward()" /> Ch.5 - Le Langage JavaScript.doc page 13 / 37 om ( )

14 B. Programmation des objets fenêtres avec JavaScript B.1. Les fenêtres pop-up On voit souvent de petites fenêtres (souvent publicitaires) qui se lancent lorsque l on visite certaines pages : <title>html et JavaScript</title> <h1>page de lancement de fenêtres</h1> <p><a href="javascript:fenetre1()">pub pour un super nouveau site</a></p> <p><a href="javascript:fenetre2()">baratin en anglais</a></p> function fenetre1() var win; win=window.open("images/titileft.gif", "Titi", "height=210, width=165, left=120, top=200"); function fenetre2() var win; win=window.open("fichiers/texte.html", "Blablabla", "height=100, width=250, left=300, top=150, resizable=yes"); win.settimeout("window.close()",20000); Ch.5 - Le Langage JavaScript.doc page 14 / 37 om ( )

15 On peut prévoir dans la fenêtre qui est affichée sa fermeture automatique au bout d un délai (à l aide de settimeout) ou avec un lien, ou avec un bouton. Soit par exemple la «fenêtre» suivante : <title>html et JavaScript</title> <h4>texte en anglais</h4> This program is produced by a member of the Association of Shareware Professionals (ASP). ASP wants to make sure that the shareware principle works for you. If you are unable to resolve a shareware-related problem with an ASP member by contacting the member directly, ASP may be able to help. The ASP Ombudsman can help you resolve a dispute or problem with an ASP member, but does not provide technical support for members' products. Please write to the ASP Ombudsman at 545 Grover Road, Muskegon, MI or send a CompuServe message via CompuServe Mail to ASP Ombudsman 70007,3536.<BR> <a href="javascript:window.close()">fermer la fenêtre</a> Soit la page qui va la lancer : <title>html et JavaScript</title> <h1>page de lancement de fenêtres</h1> <p><a href="javascript:fenetre()">lire le baratin en anglais</a></p> Soit le script qui générera la fenêtre : function fenetre() var win; win=window.open("fichiers/texte2.html", "Blablabla", "height=200, width=250, left=300, top=150, resizable=yes"); Ch.5 - Le Langage JavaScript.doc page 15 / 37 om ( )

16 L instruction avec un lien : <a HREF="javascript:window.close()">Fermer la fenêtre</a> aurait pu être remplacée par un bouton : <form> <input type="button" VALUE="Fermer" onclick="window.close()" /> </form> On peut également imaginer un menu qui s ouvre dans une fenêtre à part et qui permet de manipuler à distance d autres fenêtres : La première fenêtre va lancer ce menu : <title>html et JavaScript</title> <h1>page A</h1> Ch.5 - Le Langage JavaScript.doc page 16 / 37 om ( )

17 <title>html et JavaScript</title> <h3>choisissez votre page</h3> <a href="javascript:renvoi('exemple85.html')" />Page A</a><br /> <a href ="javascript:renvoi('pageb.html')" />Page B</a><br /> <a href ="javascript:renvoi('pagec.html')" />Page C</a><br /> <!-- script qui concerne la première page (A) --> var win; win=window.open("fichiers/menu.html", "menu_navigation", "height=160, width=220, left=200, top=50"); <!-- script qui concerne la seconde page--> var destination; function renvoi(destination) window.opener.location.href=destination; Ch.5 - Le Langage JavaScript.doc page 17 / 37 om ( )

18 B.2. Créer une fenêtre à la volée Il est également possible de créer une fenêtre XHTML avec JavaScript sans que celle-ci n ait d existence propre dans un fichier source (cf. la fenêtre avec titi qui est également dans ce cas). Exemple : une fenêtre est créée à la volée, elle est programmée pour se fermer au bout de millisecondes mais on y a tout de même ajouté un bouton pour fermer. <title>html et JavaScript</title> <h3>nous avons une autre fenêtre</h3> var win; win=window.open("", "Nom", "height=200, width=300, left=0, top=0"); win.document.write("<?xml version='1.0' encoding='utf-8'?>"); win.document.write(" PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'"); win.document.write("' win.document.write("<html xmlns=' xml:lang='fr' lang='fr'>"); win.document.write("<title>fenêtre Flash</title>"); win.document.write("<meta http-equiv='content-type' content='text/html; charset=iso ' />"); win.document.write("><h3>texte de la fenêtre créée à la volée</h3>"); win.document.write("<form><input type='button' value='fermer' onclick='window.close()' />"); win.document.write("</form>"); win.settimeout("window.close()",20000); On remarquera que la fenêtre contient bien toutes les balises pour déclarer un document XHTML. Les multiples win.document.write() servent à construire le document avec un aisance plus grande que si l on saisissait toute la structure en une seule ligne. Autre point remarquable : les guillemets contenus dans les win.document.write() sont transformés en simple quottes. Cela s explique du fait que l instruction ouvre des guillemets pour attendre le contenu à inscrire dans le document. S il y avait d autres guillemets cela signifierait une rupture dans la chaîne de caractère pour ajouter, par exemple, le contenu d une variable comme vu précédemment. Ch.5 - Le Langage JavaScript.doc page 18 / 37 om ( )

19 C. Fonctions évoluées C.1. Déviations de pages Grâce à JavaScript on peut également opérer les mêmes déviations que les balises meta (en cas de déménagement par exemple). Déviation simple : <title>déviation</title> <h1>nous avons déménagé</h1> location.href="autrepageweb.html"; Ch.5 - Le Langage JavaScript.doc page 19 / 37 om ( )

20 Déviation différée (pour laisser le temps de lire l annonce) : <title>déviation</title> <h1>nous avons déménagé</h1> settimeout("location.href= autrepageweb.html ",5000); C.2. Afficher les paramètres liés au navigateur Par exemple la détection du navigateur permet d orienter le visiteur vers des pages adaptées : <title>détection du navigateur</title> <h1>détection du navigateur</h1> var navigateur; navigateur=navigator.appname; switch(navigateur) case "Microsoft Internet Explorer": location.href="pageie.htm"; break; case "Netscape": location.href="pagenet.htm"; break; default: alert("vous ne possédez malheureusement pas le navigateur adapté à nos pages!"); Ch.5 - Le Langage JavaScript.doc page 20 / 37 om ( )

21 Pareillement on peut détecter les paramètres d affichage et les afficher : <title>détection du navigateur</title> <form> <input type= BUTTON value="informations sur votre système" onclick="info()" /> </form> function info() var hauteur, largeur, couleurs, os, nom, navigateur, langue, showwin; hauteur = screen.height; largeur = screen.width; couleurs = screen.colordepth; os = navigator.platform; nom = navigator.appname; navigateur = navigator.useragent; langue = navigator.language ; showwin=window.open("","showwin","width=520,height=300"); showwin.document.write("<?xml version='1.0' encoding='utf-8'?>"); showwin.document.write(" PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'"); showwin.document.write("' showwin.document.write("<html xmlns=' xml:lang='fr' lang='fr'>"); showwin.document.write("<title>infos</title>"); showwin.document.write("<meta http-equiv='content-type' content='text/html; charset=iso ' />"); showwin.document.write("<table border='1'>"); showwin.document.write("<tr><td>hauteur de l écran</td><td>" + hauteur + " pixels</td></tr>"); showwin.document.write("<tr><td>largeur de l écran</td><td>" + largeur + " pixels</td></tr>"); showwin.document.write("<tr><td>profondeur des couleurs</td><td>" + couleurs + " bits</td></tr>"); showwin.document.write("<tr><td>système d exploitation</td><td>" + os + "</td></tr>"); showwin.document.write("<tr><td>navigateur</td><td>" + nom +"</td></tr>"); showwin.document.write("<tr><td>dénomination exacte</td><td>" + navigateur +"</td></tr>"); showwin.document.write("<tr><td>langue (Netscape seulement)</td><td>" + langue +"</td></tr></table>"); showwin.document.write("<p><a href='javascript:window.close()'>fermer la fenêtre</a></p>"); showwin.document.write(""); showwin.document.close(); Ch.5 - Le Langage JavaScript.doc page 21 / 37 om ( )

22 Affichage dynamique de la date de la machine cliente : <title>exemple Javascript</title> <body onload="debutedate(10000)" onunload="cleartimeout(dd)"> <form name="temps2" id="temps2"> La date du jour est : <input type="text" name="date" id="date" size="18" /><br /> </form> function debutedate(delai1) var adate, date, amois; delai = delai1; adate = new Date(); date = adate.getdate(); amois = adate.getmonth()+1; if (amois == 1) date += " janvier"; else if (amois == 2) date += " février"; else if (amois == 3) date += " mars"; else if (amois == 4) date += " avril"; else if (amois == 5) date += " mai"; else if (amois == 6) date += " juin"; else if (amois == 7) date += " juillet"; else if (amois == 8) date += " août"; else if (amois == 9) date += " septembre"; else if (amois == 10) date += " octobre"; else if (amois == 11) date += " novembre"; else if (amois == 12) date += " décembre"; date += " " + adate.getyear(); date = " " + date; document.temps2.date.value = date ; dd = settimeout("debutedate(delai)",delai1) ; Ch.5 - Le Langage JavaScript.doc page 22 / 37 om ( )

23 On remarquera de quelle manière on interagit avec un formulaire (ici pour afficher la date). document.temps2.date.value = date ; Le formulaire Le document actif L élément <input /> <form name="temps2" id="temps2"> La date du jour est : <input type="text" name="date" id="date" size="18" /><br /> </form> C.3. Affichages de textes dynamiques Utilisation d une Bannière de texte : HTML fournit bien un balisage permettant la gestion des bannières déroulantes : <marquee>... </marquee> <title>exemple Javascript</title> <body onload=" Msg='Texte déroulant dans une Bannière... (à suivre)'; banniere(100);" onunload="cleartimeout(ban)"> <form name="formban" id="formban"> <input type="text" name="fbanniere" id="fbanniere" size="40" /><br /> </form> Ch.5 - Le Langage JavaScript.doc page 23 / 37 om ( )

24 var position=0, ban, delai, Msg; function banniere(delai1) delai = delai1; if (position >= Msg.length) position = 0; else if (position == 0) Msg = ' ' + Msg; while (Msg.length < 128) Msg += ' ' + Msg; document.formban.fbanniere.value = Msg.substring(position,position+Msg.length); position++; ban = settimeout("banniere(delai) ",delai1); Afficher un texte changeant : <title>texte changeant</title> <body onload="textechangeant()"> <h1>des livres qui vous changeront la vie!</h1> <form name="form1" id="form1"> <input type="text" name="champtexte" id="champtexte" size="50" /> </form> var i, message; i=0; message=new Array(); message[0]="nouveau : Livre sur Windows 3012"; message[1]="réédition : Les secrets du BTS IG"; message[2]="offre spéciale : Séminaire Simon & Garfunkel "; message[3]="best-seller : Formation rapide à Mondet 2002"; function textechangeant() document.form1.champtexte.value=message[i] if (i<message.length-1) i++; else i=0; settimeout("textechangeant()",5000); Ch.5 - Le Langage JavaScript.doc page 24 / 37 om ( )

25 Texte changeant dans la barre d état : <title>texte changeant</title> <body onload="textechangeant()"> <h1>des livres qui vous changeront la vie!</h1> var i, message; i=0; message=new Array(); message[0]="nouveau : Livre sur Windows 3012"; message[1]="réédition : Les secrets du BTS IG"; message[2]="offre spéciale : Séminaire Simon & Garfunkel"; message[3]="best-seller : Formation rapide à Mondet 2002"; function textechangeant() window.status=message[i] if (i<message.length-1) i++; else i=0; settimeout("textechangeant()",5000); Ch.5 - Le Langage JavaScript.doc page 25 / 37 om ( )

26 D. Navigation dans les menus grâce à JavaScript Il est également possible de lancer l exécution de plusieurs fonctions ou de lancer plusieurs pages avec les menus déroulants (cf. les chapitres précédents pour plus de détails sur les formulaires). D.1. Menus, effets Ici un menu déroulant avec un bouton GO : <title>bouton Go!</title> <h1>menu déroulant avec un bouton Go</h1> <form name="liste1" id="liste1"> <select size="1" name="choix" id="choix"> <option value="rien" SELECTED>Veuillez effectuer votre choix!</option> <option value ="fichiers/pagea.html">page A</option> <option value ="fichiers/pageb.html">page B</option> <option value ="fichiers/pagec.html">page C</option> <option value ="rien">------ligne de séparation-----</option> <option value ="fichiers/paged.html">page D</option> </select> <input type="button" value="go!" onclick="changer()" /> </form> function changer() var selection, page; selection=document.liste1.choix.selectedindex; page=document.liste1.choix.options[selection].value; if (page=="rien") document.liste1.reset(); return false; else location.href=page; Note : On récupère l indice du choix effectué (ici de 0 à 5) avec l instruction : selection=document.liste1.choix.selectedindex puis on récupère le contenu du choix opéré (qui est assigné avec <option value=" ") avec l instruction : page=document.liste1.choix.options[selection].value Ch.5 - Le Langage JavaScript.doc page 26 / 37 om ( )

27 D.2. Gestion des frames A partir de l exemple précédent on peut facilement imaginer les possibilités offertes par une telle interactivité avec le visiteur. On peut aussi éviter d utiliser le bouton Go et rendre actif les choix dans le menu directement avec onchange. Par exemple un menu placé en frame : Le fichier frameset nommé exemple951.html (cf. le chapitre précédant pour plus de détails sur les formulaires) : PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <title>mon super site</title> <frameset rows="120,*" border="0"> <frame src="exemple952.html" name="navi" id="navi" resizable="no" /> <frame src="fichiers/pagea.html" name="main" id="main" /> </frameset> Le fichier suivant est le fichier exemple952.html utilisé dans la barre de navigation : PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <title>navigation</title> <link rel="stylesheet" href="votre_style.css" type="text/css"> <h1>les pages de Georges</h1> <form name="liste1" id="liste1"> <select size="1" name="choix" id="choix" onchange="changer()"> <option value="rien" selected="selected">veuillez effectuer votre choix!</option> <option value="fichiers/pagea.html">page A</option> <option value="fichiers/pageb.html">page B</option> <option value="fichiers/pagec.html">page C</option> Ch.5 - Le Langage JavaScript.doc page 27 / 37 om ( )

28 <option value="rien">------ligne de séparation-----</option> <option value="fichiers/paged.html">page D</option> </select> </form> function changer() var selection, page; selection=document.liste1.choix.selectedindex; page=document.liste1.choix.options[selection].value; if (page=="rien") document.liste1.reset(); return false; else parent.main.location.href=page; body background: sylver; Ch.5 - Le Langage JavaScript.doc page 28 / 37 om ( )

29 On peut également imaginer un frameset avec lignes et colonnes (la colonne de gauche servant à la navigation, la colonne de droite divisée en deux lignes : en haut le titre, en bas les pages sélectionnées). Le fichier frameset nommé exemple961.html : PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <title>mon super site</title> <frameset cols="120,*" border="0"> <frame src="exemple962.html" name="navi" id="navi" scrolling="no" resizable="no" /> <frameset rows="110,*" border="0"> <frame src="fichiers/titresite.html" name="titre" id="titre" scrolling="no" resizable="no" /> <frame src="fichiers/pagea.html" name="main" id="main" /> </frameset> </frameset> Le fichier titresite.html comprend juste le titre du site situé en permanence dans la frame nommée titre : PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <title>titre du site</title> <link rel="stylesheet" href="votre_style.css" type="text/css"> <center> <h1>les pages de Georges</h1> </center> body background: sylver; PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <title>navigation</title> <link rel="stylesheet" href="votre_style.css" type="text/css"> <center> <img src="images/titileft.gif"><br /> <h3>choisissez</h3><br /> </center> Ch.5 - Le Langage JavaScript.doc page 29 / 37 om ( )

30 <a href="javascript:pageselect('pagea.html')">page A</a><br /> <a href="javascript:pageselect('pageb.html')">page B</a><br /> <a href="javascript:pageselect('pagec.html')">page C</a><br /> <a href="javascript:pageselect('paged.html')">page D</a><br /> var selection; function pageselect(selection) parent.main.location.href="fichiers/"+selection; body background: pink; Chacune des pages utilisées dans la section frame ont la structure suivante : Par exemple Pagea.html : PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <title>page A</title> <link rel="stylesheet" href="votre_style.css" type="text/css"> <h1>page A</h1> Ch.5 - Le Langage JavaScript.doc page 30 / 37 om ( )

31 if (parent.location.href==location.href) parent.location.href="../exemple961.html"; Le script permet d avoir le contrôle de la présentation des pages dans leur frameset d origine (ici exemple961.html). En effet on pourrait très bien ouvrir la page pagea.html - par exemple - en dehors du frameset qui la contient. Pour éviter cela on force la page à détecter elle-même si la page parente est elle-même : if (parent.location.href==location.href) dans ce cas cela veut dire qu on l a ouvert directement alors on rétabli l ordre des choses en forçant le chargement du frameset comme page parente : parent.location.href="../exemple961.html". Parfois les pages accessibles d un autre site sont incluses dans leur propre frameset. Cela peut paraître pratique certaines fois mais on empêche de cette manière de pouvoir prendre le lien vers cette page. Il est donc possible de rajouter du code JavaScript qui permet de se sortir d un frameset et occuper la fenêtre de façon autonome. if (parent.location.href!=location.href) parent.location.href=location.href ; D.3. Les commandes liées aux iframes On peut désigner les iframes en JavaScript tout comme on s adresse à la page courante ou aux frames : window.frames[nom_iframe] window.frames[nom_iframe.document] Voici un exemple de déclaration d une fonction pour charger une iframe (en pleine page) : <title>page Avec iframe</title> <h1>page Avec iframe</h1> <a href="exemple393.htm" onclick="return chargiframe('ifrm', this.href)">iframe</a> Var iframename, url function chargiframe(iframename, url) if (window.frames[iframename]) window.frames[iframename].location=url; return false; else return true; L ajout de return false permet uniquement de décrire une fonction qui ne retourne pas de valeur. Ch.5 - Le Langage JavaScript.doc page 31 / 37 om ( )

32 D.4. Les images sensitives Il est possible de changer l aspect d un lien, d un graphique lorsque l on passe dessus avec la souris. En effet on peut respecter la codification actuelle des couleurs indiquant les liens mais également recourir à des images pour changer l aspect des liens ou changer leur système d apparence. Exemple d une image sensitive. Nous avons construit deux images qui formeront un lien vers une page web. Nous avons décidé qu au moment où l on positionnera la souris sur notre image celle-ci changera d aspect : AVANT (bout1.gif) APRES (bout2.gif) <title>images sensitives</title> <h1>le menu dynamique</h1> <a href="fichiers/pagea.html" onmouseover="document.lien1.src=menu2.src" onmouseout="document.lien1.src=menu1.src"><img src="bout1.gif" name="lien1" id="lien1" /></a> var menu1 = new Image(); var menu2= new Image(); menu1.src="images/bout1.gif"; menu2.src="images/bout2.gif"; body background: darkcyan; img width: 50px; height: 25px; border: 0px; Ch.5 - Le Langage JavaScript.doc page 32 / 37 om ( )

33 Autre approche avec le code situé dans la balise img : <title>images sensitives</title> <h1>le menu dynamique</h1> <a href="fichiers/pagea.html" onmouseover="document.lien1.src='images/bout1.gif'" onmouseout="document.lien1.src='images/bout2.gif'"><img src="bout1.gif" name="lien1" id="lien1" /></a> body background: darkcyan; img width: 50px; height: 25px; border: 0px; E. Les formulaires Les formulaires permettent surtout de gérer des données en provenance des visiteurs. Soit le formulaire qui permet à un client de choisir un produit : <title>commande</title> <h1>commandez un produit!</h1> <form action="mailto:commande@lexi.fr?subject=commandeproduit" method="post" name="question" id="question" enctype="text/plain" onreset="return securite('vider')" onsubmit="return securite('expédier maintenant')"> Le produit coûte 300 EUR et les frais de port s élèvent à 45 EUR. <hr /> Je commande exactement <input type="text" size="2" maxlength="2" name="nombre" id="nombre" value="1"> unités du produit <br /> <input type="checkbox" name="express" id="express" value="oui"> Livraison express (70 EUR de supplément) <BR> Je le voudrais en <input type="radio" name="sorte" id="sorte" value="noir" checked>noir <input type="radio" name="sorte" id="sorte" value="argent">argent <input type="radio" name="sorte" id="sorte" value="or">or <hr /> Ch.5 - Le Langage JavaScript.doc page 33 / 37 om ( )

34 <br />Titre : <select name="titre" id="titre" size="1"> <option value="m.">m.</option> <option value="mme">mme</option> </select> <br />Prénom : <input type="text" name="prenom" id="prenom" /> <br />Nom : <input type ="text" name="nom" id="nom" /> <br />Numéro client : <input type ="text" name="nrclient" id="nrclient" maxlength="8" /> <br />Adresse <input type ="text" name=" " id=" " /> <p><input type ="button" value="vérifier la saisie et calculer le montant" onclick="formtest()"/> </p> <p><input type ="reset" value="vider le formulaire" /> <input type ="submit" value="envoyer les données" /></p> </form> function securite(question) var reponse; reponse=confirm("etes-vous sûrs de vouloir " + question + " le document?"); return reponse; function formtest() var prenom, nom, nrclient, , arobase, point, i, resultat; prenom=document.question.prenom.value; nom=document.question.nom.value; nrclient=document.question.nrclient.value; =document.question. .value; if (nom=="" prenom=="" nrclient=="" =="") alert("remplissez s'il vous plait tous les champs!") return false; arobase=0; point=0; for (i=0; i< .length; i++) if ( .charat(i)=="@") arobase=1; if ( .charat(i)==".") point=1; if (arobase!=1 point!=1 .length<7) alert("ce n'est pas une adresse valide!"); document.question. .focus(); document.question. .select(); return false; resultat=document.question.nombre.value*75 resultat=resultat+12 if (document.question.express.checked) resultat=resultat+20 alert("bonjour, " + prenom + " " + nom + ",\nvous devez payer "+ resultat +" EUR!"); Ch.5 - Le Langage JavaScript.doc page 34 / 37 om ( )

35 body background: lightcyan; Hr width: 420; float: left; D une part une fonction de confirmation a été créée function securite(question) et affiche un message adapté suivant la question que l on veut poser (paramètre : question) ; d autre part la vérification du contenu du formulaire (champs non vides) est effectuée par la fonction function formtest(). L instruction return permet de retourner la valeur de la réponse (true/false) à la question de la fonction securite(question) et de retourner le paramètre de validité du formulaire dans la fonction formtest(). Lorsque le return false est rencontré la fonction s arrête et le reste du code n est pas exécuté. La fonction securite(question) retourne son résultat dans l invocation faire dans les paramètres de FORM : onreset="return securite('vider')" veut dire que lorsque l on a choisi de vider le formulaire(input type="reset") alors onreset sera exécuté si la réponse à la question est positive (Ok) et recevra alors le paramètre true. Le fait de vouloir envoyer les données (input type="submit") après confirmation (onsubmit="return securite('expédier maintenant') l attribut ACTION de la commande FORM entrera en service et lancera un mail avec le contenu de la commande. Le chapitre suivant abordera de façon plus approfondie les envois de données vers les serveurs avec les pages dynamiques. Olivier Mondet Ch.5 - Le Langage JavaScript.doc page 35 / 37 om ( )

36 Annexe 1 : Instructions JavaSscript : Instruction array() charat(x) confirm() date() document.bgcolor="couleur" document.form1.champtexte.value document.liste1.choix.options[num_ choix].value document.liste1.choix.selectedindex document.cookie="nom_cookie=vale ur_cookie; expires=date_au_format_gmt" document.liste1.reset() document.nom.src Document.write("Texte") getdate() getday() getfullyear() gethours() getminutes() getmonth() getseconds() getyear() Image() Utilisation Tableau déclaré : montableau = new Array(n) avec n la longeur du tableau et montableau[0] le premier élément de ce tableau. Il est également possible de déclarer un tableau en lui affectant des valeurs montab = new Array(«cerise», «tomate», «stylo») ici un tableau de dimension 3. Livre le caractère à la x-ième position de la chaîne de caractères (le premier caractère est à la position 0). Longueur=phrase.charAt(x). Boite de dialogue de confirmation qui renvoi la valeur true si Ok est pressé, false si annuler est pressé. Objet date déclaré : madate = new Date() Permet de changer la couleur de fond d écran Assigne (ou récupère) le contenu du champ nommé champtexte du formulaire nommé form1. Par exemple document.form1.champtexte.value=»je suis le plus booo» ou variable=document.form1.champtexte.value Permet de récupérer le contenu (la valeur déclarée dans VALUE) de l option options[numéro] du menu choix dans le formulaire liste1 : contenu=document.liste1.choix.options[selection].value Permet de récupérer l indice de l élément choisi dans le menu déroulant nommé choix du formulaire nommé liste1 : num_choix=document.liste1.choix.selectedindex Place (ou lit) un cookie. Il faut lui donner une date d expiration si l on veut qu il perdure un certain temps sur l ordinateur distant : document.cookie="nomsurfeur="+nom+";expires="+date.tog MTString(); document.cookie="hobby="+hobby+";expires="+date.togmts tring(); Pour lire un cookie : Si celui est plein document.cookie!="" alors on prend le contenu avec séparation des éléments (split) avec le ; par exemple : contenu=document.cookie.split("; "); Permet de réinitialiser le formulaire nommé liste1. Permet de fixer l url de la source (src) d un élément (nommé ici nom) de la page courante. Permet d écrire dans la page web. Renseigne sur me jour du mois sous la forme d un nombre compris entre 1 et 31 : Var date; madate= new Date() ; date=madate.getdate(); Renseigne sur le jour de la semaine sous la forme d un nombre compris entre 0 et 6 (0=dimanche). Renseigne sur l année sous forme d un nombre à quatre chiffres. Informe sur les heures. Informe sur les minutes. Renseigne sur le mois sous la forme d un nombre compris entre 0 et 11 (0=janvier). Informe sur les secondes Renseigne sur l année. Objet Image déclaré de la façon suivante : Monimage = new Image(); Ch.5 - Le Langage JavaScript.doc page 36 / 37 om ( )

37 lenght Détermine la longueur d une chaîne de caractères (ou d un tableau). longueur=phrase.length. location.href="adresse url" Envoi vers une adresse Génère des nombres pseudo aléatoires : math.random()*(ba)+a math.random() (b le plus grand nombre désiré, a le plus petit nombre désiré). math.round Arrondi un nombre : math.round(1.5) est égal à 2. navigator.appname Nom du navigateur navigator.langage Langue (uniquement pour Netscape) navigator.platform Système d exploitation navigator.useragent Désignation précise du navigateur parent.nom_frame.location.href="url " Assigne une page désigné dans la location nommée nom_frame de la page parente (normalement la page frameset). parent.location.href="url" Assigne (ou Donne) l adresse de l url parente. screen.availheight Hauteur visible de l écran en pixels screen.availwidth Largeur visible de l écran en pixels screen.colordepth Profondeur en couleurs (8, 16, 32 bits) Screen.height Auteur de l écran en pixels screen.width Largeur de l écran en pixels settimeout("action", millisecondes) Permet d exécuter une action avec retardement Cette méthode convertit une chaîne de caractères en un split("; ") tableau. Le ; est le séparateur choisi ici entre les différents éléments du tableau. Spécifie l url de la source d un objet comme par exemple un src objet image dont on veut fixer la source : monimage=new image(); monimage.src="image.gif"; substring(position1, position2) Affiche les caractères entre deux positions d une phrase. La date est transformée en une chaîne de caractères togmtstring() correspondant à la norme IETF. Le 23 février 2002 deviendra : Sat, 23 feb :24 :23 UTC. tolowercase() Convertit une chaîne de caractères en minuscules. touppercase() Convertit une chaîne de caractères en majuscules. Var variable ; Déclaration d une variable variable=prompt("texte","valeur par défaut") Permet d ouvrir une boite de dialogue d entrée dont la valeur sera affectée à variable. Window.close() Fermeture d une fenêtre. window.open("adresse url") Permet d ouvrir une nouvelle fenêtre. window.frames[nom_iframe] Permet de s adresser à un iframe. Window.open("contenu", "nom", Permet d ouvrir une nouvelle fenêtre en la formatant "height=pixel, width=pixel, précisément. left=pixel, top=pixel") Window.opener.location.href="url" Cela permet de manipuler la fenêtre qui a créé (ouvert) la fenêtre appelée. window.status Texte de la ligne d état d une fenêtre Windows. Olivier Mondet Ch.5 - Le Langage JavaScript.doc page 37 / 37 om ( )