"Objets" en JavaScript Avec les objets COM de Visual Basic et les (vrais) objets Java, encore une autre notion d'objet informatique... Les objets de Javascript sont en fait des "tableaux associatifs" (c-à-d. des tableaux indexés par des chaînes), avec une une syntaxe pointée (y compris l'instruction with, absente en Java) pour les utiliser et une primitive new pour les créer. Comme les "vrais" objets ils ont des propriétés (champs = données) et des comportements (méthodes = procédures) propriétés et comportements sont traités de la même façon car en Javascript les fonctions sont des données! Mais il n'y a ni classes, ni héritage... Objets Constantine 2005 J-F. Perrot 1
"Objets" prédéfinis en JavaScript La notation pointée permet de manipuler aisément une grande quantité d'objets dont le type est prédéfini : String, Date, etc. Dans le jargon (le "métalangage") employé pour parler de JavaScript, on dit "l'objet String", " l'objet Date", etc. (et même de "l'objet Math"!!!). Il vaudrait certes mieux parler de classes, mais il n'y a pas de classes en JavaScript... On préfère donc dire "n'importe quoi"! Exemple : les chaînes de caractères sont des "objets" "abc".length --> 3 // length est une "propriété" "abc".toupper() --> "ABC" // toupper est une "méthode" "abc".toupper().length --> 3 Objets Constantine 2005 J-F. Perrot 2
<html> <head> <title> Essai de date </title> </head> <body> <p>debut</p> <p> <script type="text/javascript"> var aujourdhui = new Date(); var lequantieme = aujourdhui.getdate(); var lejourdelasemaine = aujourdhui.getday(); var lemois = aujourdhui.getmonth(); var lannee = aujourdhui.getfullyear(); var lheure = aujourdhui.gethours(); var laminute = aujourdhui.getminutes(); var laseconde = aujourdhui.getseconds(); Les Dates en JavaScript date.html document.write("<h3> Nous sommes le jour : " + lequantieme); document.write(" du mois : " + lemois); document.write(" de l\'année : " + lannee + ".<br /> />"); document.write("ce jour est un : " + lejourdelasemaine + ".<br /> />"); document.write("il est : " + lheure + " heures "); document.write(laminute + " minutes " + laseconde + " secondes </h3>"); document.write("<h1>bonne Année, Heureux Siècle, Excellent _ Millénaire </h1>"); </script> </p><p>fin</p> </body></html> Objets Constantine 2005 J-F. Perrot 3
Une Date particulière Objets Constantine 2005 J-F. Perrot 4
Constantes & fonctions "mathématiques" Comme en Java, un certain nombr />e de constantes (p.ex. PI) et de fonctions à caractère "mathématique" sont regroupées en un "module" appelé Math. Par analogie avec Java, on emploie la notation pointée " Math.xxx" pour les désigner : Math.abs(-5) --> 5 ; Math.max(5, 7) --> 7 ; Math.PI --> 3.1416... ; Math.random() -->??? Puisqu'il n'y a pas de classes en JavaScript, on ne peut pas parler comme en Java de la classe Math et de ses attributs et méthodes de classe (alias static members). On est donc amené pour expliquer cette notation à proférer une monstruosité : the Math Object... que je préfère ne pas traduire en français! Objets Constantine 2005 J-F. Perrot 5
Objets "fenêtres" vs. objets "documents" JavaScript distingue dans le fonctionnement d'une page ce qui concerne son cadre (la fenêtre : dimensions, position, bordures, affichage de différents attributs, outils et autres) ce qui concerne son contenu (le document : ce qui est affiché dans la page). Ces deux ordres de préoccupations sont pris en compte par deux genres d'objets : les fenêtres (Window) et les Documents. La difficulté est de savoir exactement à qui on doit s'adresser pour réaliser telle ou telle tâche... Objets Constantine 2005 J-F. Perrot 6
La fenêtre comme "objet fondamental" (1) L'espace des noms L'unité fondamentale dans le modèle-objet de JavaScript est la fenêtre du navigateur, représentée par un "objet Window". (1) Toutes les entités JavaScript lui appartiennent (on dit qu'il définit l'espace des noms - name space) Toutes les fonctions (standard comme alert, confirm, etc. ou définies par l'utilisateur) sont en fait des méthodes de l'objet Window où elles sont déclarées. Toutes les variables globales sont en fait des propriétés de l'objet Window où elles sont déclarées. Il s'ensuit que deux fonctions ou deux variables globales différentes pourront porter le même nom, à condition d'être déclarées dans des fenêtres différentes. Objets Constantine 2005 J-F. Perrot 7
La fenêtre comme "objet fondamental" (2) La hiérarchie de composition (2) La fenêtre est la racine de l'arbre d'objets représentant la page : p. ex. elle détient comme propriété l'objet document... esquisse de cet arbre : La fenêtre Window navigator history location document forms[ ] anchors[ ] links[ ] images[ ] applets[ ] elements[ ] Button Checkbox Hidden Password Radio Reset Select Submit Text textarea options[ ] Pour chaque objet o dans la page, il y a un chemin unique de la fenêtre à o. Objets Constantine 2005 J-F. Perrot 8
Questions de désignation : contexte Tout fragment de code JavaScript s'exécute dans le contexte d'un objet. tous les objets dont les noms sont connus dans ce contexte peuvent être désignés directement : ainsi par exemple : alert("bla bla") Exemple : soit un handler d'un objet Button, élément d'un formulaire : la place du bouton dans l'arbre des objets de la page est La fenêtre document form button dans le handler, on peut donc utiliser les noms définis dans la fenêtre, dans le document, dans le formulaire qui contient le bouton, et enfin dans le bouton lui-même. Objets Constantine 2005 J-F. Perrot 9
Ex. Désignations <html> <head> <script type="text/javascript"> var vb = "la value de ce bouton est : " var frc = "le formulaire contient " var elts = " elements\n" var dc = "le document contient " var frs = " formulaires\n" var tlf = "la taille de la fenêtre est : " var pxs = " pixels" </script></head> <body> <form> <p> <textarea name="aff" rows=5 cols=50> </textarea></p> <input type="button" value="pour voir" onclick = "Aff.value=vb+value+'\n'+frc+elements.length+elts+dc+ forms.length+frs+tlf+innerheight+' x '+innerwidth+pxs"> </form> </body> </html> Designation.html La fenêtre document form button Objets Constantine 2005 J-F. Perrot 10
Questions de désignation : ambiguïté? Quid si le même nom est défini à deux niveaux différents? l'évolution du système tend à éliminer ces situations C'est la désignation la plus locale qui prime, mais il vaut mieux lever l'ambiguïté, en désignant explicitement l'objet visé l'objet Window représentant la fenêtre active est accessible par la propriété implicite window, aussi appelée self dans notre exemple, les noms complets seraient : window.document.forms[0].elements[1].value window.document.forms[0].elements.length window.document.forms.length window.innerheight window.innerwidth Objets Constantine 2005 J-F. Perrot 11
Deux fonctionnalités des objets Window (il y en a bien d'autres!) La status line gérée à travers deux propriétés status (déjà vu) pour messages transitoires defaultstatus pour messages permanents La gestion du temps : settimeout(unechaînedecode, undélai) exécute l'action spécifiée par la chaîne unechaînedecode après undélai compté en millisecondes : settimeout("alert('avez-vous fini?')", 5000) SetTimeout.html Objets Constantine 2005 J-F. Perrot 12
Exemple : une horloge <html> <head> <script type="text/javascript"> function showtime(){ var now = new Date() var hours = now.gethours() var minutes = now.getminutes() var seconds = now.getseconds() var timevalue = "" + ((hours > 12)? hours - 12 : hours) timevalue += ((minutes < 10)? ":0" : ":") + minutes timevalue += ((seconds < 10)? ":0" : ":") + seconds timevalue += (hours >= 12)? " P.M." : " A.M." document.clock.face.value = timevalue defaultstatus = timevalue settimeout("showtime()",1000) } </script> </head> Showtime.html <body onload="showtime()"> <form name="clock"> <input type="text" name="face" size="15" /> </form> </body> </html> Objets Constantine 2005 J-F. Perrot 13
Fenêtres : ouverture et fermeture Les objets Window possèdent (entre autres) une méthode open() et une méthode close() les objets Document aussi, avec des significations différentes! Il faut donc préciser... window.close() ferme la fenêtre courante settimeout("window.close()", 5000) window.open()ouvre une nouvelle fenêtre!!! il lui faut comme arguments une URL où trouver un document à y charger (éventuellt. vide) un nom désignant la fenêtre en question (voir plus loin) différentes caractéristiques optionnelles renvoie comme résultat un pointeur sur la fenêtre créée. Objets Constantine 2005 J-F. Perrot 14