Le Web Dynamique avec JavaScript

Transcription

1 Le Web Dynamique avec JavaScript Concepts et Syntaxe 1

2 Intérêt Présentation de JavaScript Contrôle du contenu et de l apparence de pages Web Contrôle de fonctionnalités du Navigateur Internet Gestion du contenu d une page Web Gestion d interactions avec l utilisateur Liens avec les applets Java Manipulation et gestion d images Lecture et écriture de Cookies Autres fonctionnalités intéressantes 2

3 Utilisation Contexte d utilisation JavaScript(JS) s utilise dans le contexte du Web principalement au travers d un navigateur Internet JS permet l exécution de code informatique intégré à des pages Web JS est un des outils permettant de développer du «Web Dynamique» Contexte technique JS n est pas simple, et nécessite une relative bonne connaissance des techniques de programmation JS est un Langage de troisième génération cousin de Java, du langage C ou du Basic en terme de forme de programmation 3

4 Réel intérêt Étroite liaison avec les navigateurs Internet Contrôle du contenu et de l apparence de page Web write() faire apparaître un texte supplémentaire dynamiquement Construction d une page dynamiquement à partir de rien Contrôle de fonctionnalités du Navigateur Internet Affichage de message par boite de dialogue ou dans la barre de status Saisie de données simples Ouverture et gestion de l affichage d URL dans des fenêtres du navigateur 4

5 Réel intérêt Étroite liaison avec les navigateurs Internet Gestion du contenu d une page Web Accès à la liste des liens hypertextes, images, applets Java,... d une page Accès à l ensemble des contrôles boutons, zone de saisie,... d une page Gestion d interactions avec l utilisateur Gestions d actions liées à des événements utilisateur: déplacement de la souris sur un contrôle, validation d une saisie, d un Submit sur un formulaire... 5

6 Exemple 6

7 Présentation Javascript Langage de script incorporé dans le HTML Historiquement, premier langage de script pour le Web Apporte des améliorations au HTML Qualités HTML permet d'écrire JavaScript permet de programmer, c'est-à-dire de gérer l'information Disponible sur les navigateurs actuels et gratuit Défauts Interprété et donc lent 7

8 Introduction A quoi ressemble un script? C est une portion de code qui vient s'insérer dans une page HTML Le code du script n'est toutefois pas visible dans la fenêtre du navigateur car il est compris entre des balises (ou tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage JavaScript Balises annonçant le code Javascript : <SCRIPT language="javascript"> Placez ici le code de votre script </SCRIPT> 8

9 Introduction Où placer ce code? partout, mais de préférence organisé : <html> <head> <script language="javascript"> Déclarations + initialisations de paramètres fonctions; </script> </head> <body> <script language="javascript">  </script> </body> </html> 9

10 Exemple Sans fonctions : simple.html <html> <head><title>programme Out2</title> </head> <body> <script language="javascript">  </script> </body> </html> 10

11 Exemple plus complet variable-visibilite.html <head> <script language="javascript"> var x = new String('abc'); alert(x); function commencer() { var x = new Number(123); x++; alert(x); } function suivre() { var x = new Boolean(false); alert(x); } </script> </head> <body> <script language="javascript"> commencer(); suivre(); </script> </body> 11

12 Variables et types Déclaration <script language="javascript"> var date; // Déclaration sans affectation var compteur=0; // Déclaration avec affectation toto='coucou'; // Déclaration implicite par affectation var prem, second; // variables séparées par des virgules Déclaration typée monnombre = new Number(); // Déclaration typée sans affectation e = new Number( ); // Déclaration typée avec affectation var machaine = new String(); // var toto = new Boolean(true); // </script> 12

13 Tableau Array : tableau.html Le type des éléments : nombres, chaînes, booléens,... La dimension 1, 2, ou 3,... : tab(7) ; tab(x,y) ; tab(a,b,c) ;... Les indices : souvent des nombres entiers <script language=javascript> // Tableau de chaînes, de dimension 1, indicé de 0 à 6 : Jour=new Array(7); Jour[0]='Dimanche' ; Jour[1]='Lundi' ; Jour[2]='Mardi' ;... Jour[6]='Samedi' ; // En énumérant les éléments : jour=new Array('dimanche','lundi','mardi',...,'vendredi','samedi'); </script> document.write(jour[1], ' ', jour[0]); affiche : Lundi dimanche 13

14 Opérateurs Arithmétiques classique De comparaison Test d égalité : ==, différent :!= Logiques Ou :, ET : && Affectation arithmétique addition : +=, multiplication *=, division /= 14

15 Conditionnelles Choix simple : conditionnelle.html if (condition booléenne) {Instructions à exécuter si "oui";} else {Instructions à exécuter si "non";} Choix multiple : choix-multiple.html switch(x) { case 1 : instructions 1; break; case 2 : instructions 2; break;... case n : instructions 3; break; default : instructions 4; break; }; 15

16 Itération For : iteration.html for (valeur de départ ; contrôle pour sortie ; progression ) { Instructions à itérer } Exemple for (i=1;i<=5;i++) { Instructions à répéter; } While While(condition) { Suite d instructions; } Exemple : i=0; while(i<=10) { Suite d instructions; i++; } 16

17 Fonctions Syntaxe function mafonction(x, toto) {... instructions;... return valeur du résultat; } Exemple <script language="javascript"> function VolCylindre(r,h) { pi= ; return pi*r*r*h; } document.write(volcylindre(1,2)); </script> 17

18 Fonctions prédéfinies Mathématiques function lancer(n) { for (i=1, suite='' ; i<=n ; i++ ) { de=math.ceil(6*math.random()) // arrondi à l entier sup suite=suite + de.tostring() + '. ' // création d une chaîne de caractères } Date : date.html var aujourd_hui = new Date(); document.write(aujourd_hui.getdate()+' / '); String 18

19 Javascript Programmation objet F. GEOFFROY 19

20 Les objets Description Javascript divise la page du navigateur en objets, afin de permettre d'accéder à n'importe lequel d'entre-eux et de pouvoir les manipuler par l'intermédiaire de leurs propriétés On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu L'objet le plus grand est l'objet fenêtre : window Dans la fenêtre s'affiche une page, c'est l'objet document Cette page peut contenir plusieurs objets, comme des formulaires, des images, etc. 20

21 Les objets Les objets de base navigator : contient des informations sur le navigateur de celui qui visite la page window : objet où s'affiche la page, il contient donc des propriétés concernant la fenêtre elle-même mais aussi tous les objets-enfants contenus dans celle-ci location : contient des informations relatives à l'adresse de la page à l'écran history: c'est l'historique, c'est-à-dire la liste de liens qui ont été visités précédemment document : contient les propriétés sur le contenu du document (couleur d'arrière plan, titre,...) 21

22 Hiérarchie des objets 22

23 Navigator Propriétés a plusieurs propriétés concernant votre navigateur appname : connaître le nom : Netscape, IE, Mozilla appversion : connaître la version language : FR, AN platform : windows, Linux Pour le savoir : exécuter : <script language="javascript"> document.write(navigator.propriété); </script> 23

24 Navigator a plusieurs méthodes javaenabled() : permet de vérifier si le navigateur du client est configuré pour exécuter des applets Java Exemple d utilisation de Navigator : Nom = navigator.appname; if (Nom == 'Netscape') { placer ici les instructions à exécuter s'il s'agit de Netscape Navigator 4 ou supérieur } if (Nom == 'Microsoft Internet Explorer') { placer ici les instructions à exécuter s'il s'agit de Microsoft Internet Explorer 4 ou supérieur } 24

25 L objet Window Définition est l'objet par excellence dans Javascript, car il est le parent de chaque objet qui compose la page web il contient donc : l'objet document : la page en elle-même l'objet location : le lieu de stockage de la page l'objet history : les pages visitées précédemment l'objet frames : les cadres (division de la fenêtre en sousfenêtres) 25

26 L objet Window Exemple : window.open(" e_la_fenetre"); Options : menubar = yes/no : affiche ou non la barre de menu (fichier, edition,...) resizable = yes/no : définit si la taille de la fenêtre est modifiable ou non scrollbars = yes/no : affiche ou non les ascenceurs (barres de défilement) Exemple : <A href="javascript:self.close('nom_de_la_fenetre_');"> Cliquez ici pour fermer la fenêtre </A> 26

27 L objet Window Propriétés : frames[] : tableau de cadres contenus length : nombre de cadres (nombre d'éléments du tableau frames name : nom de la fenêtre dans laquelle on se trouve parent : fenêtre qui englobe celle dans laquelle on se trouve Méthodes appliquées dessus : alert(), confirm() et prompt() : font apparaître une boîte de dialogue open(), et close() : permettent l'ouverture et la fermeture de fenêtres Exemple : window.open(" e_la_fenetre"); 27

28 L objet document Élément majeur, permet de récupérer des informations d'un formulaire, créer des calques et les déplacer, écrire du texte... Propriétés : document.fgcolor permet de récupérer et de changer la couleur du texte de votre page HTML document.fgcolor = "#993333"; document.bgcolor permet de récupérer et de changer la couleur de fond de votre page HTML document.lastmodified permet de savoir quand la page html a été modifiée 28

29 L objet document Propriétés (suite) : document.linkcolor permet de récupérer et de changer la couleur des liens de votre page HTML document.location permet de récupérer et changer l'url de votre page HTML, ce qui revient à charger une autre page HTML document.location = "URL/monDoc.HTML"; document.write() permet d'écrire dans votre page HTML document.images[ ] permet de récupérer et changer les images de votre page HTML document.forms[ ] permet de récupérer et changer les informations de votre formulaire 29

30 L objet document Rappel : création de formulaires Autant qu on veut entre <form> </form> Options ou éléments Zone de texte : 2 possibilités <input type="text" name="nom" size="20"> <textarea name="impressions" rows="5" cols="30"> </textarea> Case à cocher <input type= "chekbox" name="nom" size="20"> Bouton radio < input type= "radio" name="sexe" value="femme"> 30

31 L objet document Rappel : création de formulaires Sélection <select name="continent"> <option>afrique < option >Amérique < option >Asie> < option >Europe < option >Océanie</select> 31

32 L objet document Le champ «text» : a par exemple comme propriétés : name : le nom du champ de texte value: le texte contenu dans le champ size: la taille du champ de texte 32

33 L objet document Le champ form : propriétés : action () Définit l'url où le formulaire sera envoyé elements Tableau représentant les éléments du formulaire length Nombre d'éléments à l'intérieur du formulaire method Définit le type d'envoi du formulaire (get ou post) name Définit le nom du formulaire target Définit la page (fenêtre ou frame) de réponse parent Indique une fenêtre d'un cadre (frame) 33

34 L objet document Le champ form : action () <html> <head><title>test</title> <script type="text/javascript">  </script> </head> <body> <form name="formulaire_test" action="mailto:toi-meme@cheztoi.com" onsubmit="return confirmation()"> <input type="text" size="40" name="saisie"> <input type="submit" value="envoyer"> </form> </body></html> 34

35 L objet document Exemple Il s agit d accéder au champ : case cochée pour modifier le contenu du texte : case cochée ou case non cochée : Code du formulaire <form name="form1"> <br> <input type="checkbox" name="checkbox" onclick="modifchamp();return true;"> <br> <input type="text" name="champ_text" value='essai du javascript' size='24'> </form> 35

36 L objet document Pour modifier le champ : objet-form1.html On utilise la fonction javascript associée au bouton checkbox suivante : <script language="javascript"> function ModifChamp() { if (document.forms["form1"].checkbox.checked) { document.forms["form1"].champ_text.value='bouton coché' } else { document.forms["form1"].champ_text.value='bouton non coché' } } </script> 36

37 L objet document Autre exemple : moyenne-notes.html Afficher la note d une élève dans une matière et calculer sa moyenne 37

38 L objet document Autre exemple : cacher-montrer.html Cacher montrer une image 38

39 L objet document Le champ form : length : sauvegarde le nombre de formulaires définis dans un fichier <body> <form name="formulaire_test" action="mailto:toi-meme@cheztoi.com"> <input type="hidden" value="daniel"> <input type="submit" value="daniel"> </form> <form name="formulaire_test" action="mailto:toi-meme@cheztoi.com"> <input type="hidden" value="antoine"> <input type="submit" value="antoine"> </form> <script type="text/javascript">  </script> </body> 39

40 L objet document Le champ form : method : Sauvegarde la valeur qui figure lors de la définition du formulaire dans l'attribut method= - en principe, "get" ou "post". <body> function Methode() { if(document.formulaire_test.action.indexof("@") > 0) document.formulaire_test.method = "post"; else document.formulaire_test.method = "get"; return true; } <form name="formulaire_test" action="mailto:toimeme@cheztoi.com" onsubmit="return Methode()"> <input type="text" size="40" name="saisie"> <input type="submit" value="envoyer"> </form> 40

41 L objet document Le champ form : name : Sauvegarde le nom d un formulaire <html> <head><title>test</title> </head> <body> <form name="formulaire_test" action="mailto:toi-meme@cheztoi.com"> <input type="text" size="40" name="saisie"> <input type="submit" value="envoyer"> </form> <script type="text/javascript">  </script> </body> </html> 41

42 L objet document Le champ form : target : Précise la cible (cadre) dans laquelle l affichage sera fait : <html> <head><title>test</title> <script type="text/javascript">  </script> </head> <body> <form name="formulaire_test" action="fichier.htm" onsubmit="return cible()"> <input type="text" size="40" name="saisie"> <input type="submit" value="envoyer"> </form> </body> </html> 42

43 L objet document Le champ form : submit() : Envoi du formulaire : JavaScript lance un compte à rebours avec la méthode settimeout(). Après millièmes de secondes, donc après une minute, la fonction on_y_va() est appelée. Celle-ci envoie le formulaire avec submit() <html> <head><title>test</title></head> <body> <form name="formulaire_test" action="/cgi-bin/estime.pl" method="get"> <input type="text" size="40" name="champ1"><br> <input type="text" size="40" name="champ2"><br> </form> <script type="text/javascript">  </script> </body></html> 43

44 L objet document Le champ form : elements : Propriétés : checked (coché) defaultchecked (coché par défaut) defaultvalue (valeur entrée par défaut) form (nom du formulaire) name (nom de l'élément) type (type de l'élément) value (valeur/contenu de l'élément) Méthodes : blur() (quitter l'élément) click() (cliquer sur l'élément) focus() (positionner sur l'élément) handleevent() ((traiter l'événement) select() (sélectionner du texte) 44

45 L objet document Checked : Exemple : Sauvegarde si oui ou non une case à cocher ou une case d'option est activée. Les valeurs possibles sont true ou 1 ou false ou 0. <script type="text/javascript">  </script> </head><body> <form name="formulaire_test" action=""> <input type="radio" name="mode" value="avec"> avec cadres <input type="radio" name="mode" value="sans"> sans cadres <br> <input type="button" value="lancer" onclick="ensuite()"> </form> </body> </html> 45

46 L objet document defaultvalue : Sauvegarde le texte par défaut d'un champ de saisie <html><head><title>test</title> </head> <body> <form name="formulaire_test" action=""> uri: <input size="40" name="uri" value=" <input type="button" value="vas-y" onclick="window.location.href=document.formulaire_test.uri.value"> </form> <script type="text/javascript">  </script> </body> </html> 46

47 Javascript Gestion d événements F. GEOFFROY 47

48 Interaction Appel de fonction à la demande : au clic <a href="... "> objet à cliquer... </a> Normalement : le href permet d ouvrir une page web ou d aller à un autre endroit du document Pour l utiliser pour appeler une fonction de réaction : On écrit : javascript + : + fonction fonction pré-définie javascript:alert("incrémenter veut dire augmenter") fonction personnelle javascript:surface-rectangle(x,y) attention au " de href : à l intérieur, on met des côtes <a href="javascript:alert('incrémenter veut dire augmenter')">(aide?)</a> 48

49 Appel de fonction dans href Exemple <html> <head><title>test</title> <script type="text/javascript"> <! function montrer() { alert(window.location.hash); } //--> </script> </head> <body> <a href="#a2">atteindre a2. Veuillez cliquer d'abord ici</a> <p> <a name="a2" href="javascript:montrer()">ici a2 - Cliquez ensuite ici</a> </body> </html> 49

50 Appel de fonction dans href Autre exemple <html> <head><title>test</title> <script type="text/javascript"> <! function souhait() { var cible = window.prompt("votre URI souhaitée:",""); window.location.href = cible; } //--> </script> </head> <body> <a href="javascript:souhait()">lien souhaité</a> </body> </html> 50

51 Les évènements Présentation Les événement sont l intérêt du JS en matière de programmation Web Ils donnent une interactivité à la page que vous consultez, ce qui n existe pas avec le HTML, si on excepte bien entendu le lien hypertexte Le JS permet de réagir à certaines actions de l utilisateur On nomme évènement le mot Event, et gestionnaire d événement le mot-clé onevent 51

52 Les évènements Fonctionnement Les évènements sont indiqués dans la balise d un formulaire, le plus souvent Ils apparaissent comme un paramètre supplémentaire et suivent une syntaxe particulière Syntaxe : <balise onevent="code"> balise : nom de la balise HTML qui supporte l événement onevent : gestionnaire d événement associé à l événement Event Code : fait le plus souvent référence à une fonction définie dans les balises <head> </head>. Il peut cependant s agir d instructions directement 52

53 Les évènements Fonctionnement Plusieurs gestionnaires d évènements peuvent être placés dans la même balise Certaines balises n appartenant pas à un formulaire peuvent supporter des gestionnaires d événement Exemple <a href=" onclick="alert( vous avez cliqué! );"> click?</a> Prévient du click puis la page 53

54 Les évènements Le clic de souris Gestionnaire d événement onclick Exemple : <input type="button" onclick="alert( vous avez cliqué sur le bouton ) ;"> Balises supportées : <input type="button"> <input type="checkbox"> <input type="radio"> <input type="reset"> <input type="submit"> <a href..> 54

55 Les évènements Le chargement Gestionnaire d événement onload Exemple : <body onload="alert( la page est chargée! ) ;"> Balises supportées : <body> <frameset> Effets : Au chargement, réaliser tel événement 55

56 Les évènements Error Gestionnaire d événement onerror Exemple : <img src="pix.gif" onerror="alert( Erreur de chargement! ) ;"> Balises supportées : <body> <frameset> <img> Effets : Prévient l erreur au chargement 56

57 Les évènements Abort Gestionnaire d événement onabort Exemple : <img src="pix.gif" onabort= alert( Vous avez interrompu le chargement de l image! ) ;"> Balises supportées : <img> Effets : Prévient l erreur au chargement 57

58 Les évènements Le passage de la souris Gestionnaire d événement onmouseover Exemples : <div style="width:50; height:50; background:lightsteelblue;" onmouseover="alert('le curseur entre dans la zone bleue');"></div> <div> <P onmouseover="this.style.color='red'" onmouseout="this.style.color='black'"> Move the mouse pointer over this text, then move it elsewhere in the document.</div> <a href=" onmouseover="alert('pour aller sur google.fr, cliquer ici');"> href=" onmouseover="alert( Pour aller sur google.fr, cliquer ici ) ;"> Balises supportées : Presque toutes Effets : Prévient quand on survole la cible : zone, texte, lien 58

59 Les évènements L éloignement de la souris Gestionnaire d événement onmouseout Exemples : <a href=" onmouseout= alert( Vous ne voulez pas y aller? ) ;"> Balises supportées : Presque toutes Effets : Prévient quand on s éloigne de la cible 59

60 Les évènements Le focus Gestionnaire d événement onfocus Exemples : <input type="text" value="votre nom" name= nom onfocus="alert( Ecrivez votre nom ici ) ;"> Balises supportées : <input type="text"> <select> <textarea> <input type="password"> Effets : Écrit le message quand on clique sur la zone d entrée du texte 60

61 Les évènements Le blur Gestionnaire d événement onblur Exemples : <input type="text" value="votre nom" name="nom" onblur="alert( Vous n\ avez rien oublié? ) ;"> Balises supportées : <input type="text"> <select> <textarea> <input type="password"> Effets : Avertit à la fin du remplissage dans la zone d écriture, si on n a rien oublié 61

62 Les évènements Les changements : choix-form.html Gestionnaire d événement onchange Exemples : <input type="text" value="votre nom" name="nom" onchange="alert( Vous avez changé votre nom?? ) ;"> Balises supportées : <input type="text"> <select> <textarea> <input type="password"> Effets : Avertit du changement par rapport à ce qu il y avait d écrit dans la zone d écriture 62

63 Les évènements La sélection Gestionnaire d événement onselect Exemples : <input type="text" value="votre nom" name= "nom" onselect="alert( Vous avez sélectionné un champ ) ;"> Balises supportées : <input type="text"> <textarea> Effets : Avertit de la sélection d un champ 63

64 Les évènements L envoi Gestionnaire d événement onsubmit Exemple : <input type="submit" value="envoyer" name="envoi" onsubmit="alert( C est parti! ) ;"> Balises supportées : <input type="submit"> Effets : Avertit de la sélection d un champ 64

65 Les évènements Le reset Gestionnaire d événement onreset Exemple : <input type="reset" value="effacer" name= effacer onsubmit= alert( On efface tout! ) ;"> Balises supportées : <input type="reset"> Effets : En appuyant sur le bouton effacer, il remet dans la zone de texte : votre nom 65

66 La commande InnerHTML Rôle Permet de changer le contenu d une balise Le HTML contenu entre les balises <DIV> peut être changé de manière dynamique Par exemple : <div id=divexample> Hello World </div> Tout le HTML entre <DIV> et </DIV> peut être remplacé dynamiquement en utilisant le code Javascript : <script language="javascript"> document.getelementbyid('divexample').innerhtml="good Afternoon"; </script> De cette manière, il peut être changé dans n importe quel code HTML valide 66

67 La commande InnerHTML Exemple : TD1-JavaScript/innerHTML.html 67

68 Applications Memory : memory/memory.html Tableau Formulaire 68

69 L E M E M O R y L E F O R M U L A I R E <body> document.write('<table border="0" align="center">'); for (i=1 ;i<(nbc/4)+1 ;i++){ document.write('<tr>'); for (t=1 ;t<5 ; t++){ cpt++; document.write('<td><a href="#" onclick="change_im('+(cpt)+')"><img src="'+non_im+'0.gif" width="99" height="99" border="0"></a></td>'); } document.write('</tr>'); } document.write('</table><p> </p>'+ '<form name="form1">'+ <table width="520" border="0" align="center" bgcolor="#99ffff">'+'<tr><td width="200" align="center">'+'nombre de coups '+'<input name="result" type="text" id="result2" size="5">'+'</td><td width="100" align="center">'+'<input type="button" name="submit" onclick="window.location=\'memory.html\'" value="rejouer">'+'</td><td align="center">'+'<input type="button" name="submit" onclick="window.location=\'index.html\'" value="quiter">'+'</td></tr><tr>'+ '<td colspan="3">le but du jeu est de retourner '+'les cartes 2 par 2, afin de trouver les cartes identiques</td>'+ '</tr></table> </form>'); </body> 69

70 for (i=1 ;i<nb ;i++) { nb_aleatoire(nbc); tirage[i]= nombre; for (t=1 ; t<i ;t++){ if (tirage[t]==nombre){i=i-1;} } } Permet de ranger dans tirage des valeurs différentes entre 1 et 11 for (i=1 ;i<nb ;i++) { if (tirage[i]>divs) nbtire=tirage[i]-divs; else nbtire=tirage[i]; place[i]=nbtire; } Convertit les valeurs en base 6 : on retranche à toute valeur supérieure à 6, la valeur 6, de manière à disposer de couples de valeurs identiques (utiles pour le jeu) 70

71 function change_im(nbim) { // if (place[nbim]!=0) { if (nbim==nbim2) nbim=0; else{ if (nbim==nbim3) nbim=0; else{ if (choixim==3){ if (val1==val2) { efface(nbim2);efface(nbim3);gain++;} else { no_efface(nbim2);no_efface(nbim3);} choixim=1;nbim3=0 } if (choixim==1) {nbim2=nbim;val1=place[nbim];choix++;} if (choixim==2) {nbim3=nbim;val2=place[nbim];} choixim++; } } document.images[nbim-1].src = non_im+place[nbim]+".gif"; if (choixim==3){ if (gain==divs-1) { settimeout("efface(nbim2);efface(nbim3);document.images[1].src = 'gagne.gif';",500);gain++; } } document.form1.result.value = choix } } 71

72 Applications Puzzle : puzzle/puzzle.html On clique sur une case puis sur une autre pour indiquer où on veut déplacer la première On peut voir le puzzle rassemblé 72