Le langage JavaScript (suite) Walid Belkhir Université de Provence belkhir/

Transcription

1 Le langage JavaScript (suite) Walid Belkhir Université de Provence belkhir/ 1 / 43

2 Plan 1 Les objets du navigateur 2 2 / 43

3 Les objets du navigateur Les objets instanciés automatiquement lors du démarrage du navigateur : pour accéder à des informations concernant le navigateur client, les documents HTML, l écran La classe Navigator : une seule instance (un seul objet navigator) propriétés : nom, version, plugins installés,... La classe Window une instance par fenêtre et cadre du document HTML. accès aux objets créés par des balises HTML La classe Screen une seul instance (objet screen) propriétés : largeur, hauteur,... 3 / 43

4 La hiérarchie des objets du navigateur 4 / 43

5 La hiérarchie des objets du navigateur Dans cette hiérarchie, les descendants d un objets sont des propriétés, mais peuvent aussi être des objets qui contiennent eux même des propriétés. Comment accéder à un objet? = parcourir la hiérarchie du navigateur en partant de la racine (i.e. l objet window) : window.objet1.objet2.objet3... ex. window.parent.cadre gauche.form1.nom.value=4 5 / 43

6 La hiérarchie des objets du navigateur Dans cette hiérarchie, les descendants d un objets sont des propriétés, mais peuvent aussi être des objets qui contiennent eux même des propriétés. Comment accéder à un objet? = parcourir la hiérarchie du navigateur en partant de la racine (i.e. l objet window) : window.objet1.objet2.objet3... ex. window.parent.cadre gauche.form1.nom.value=4 6 / 43

7 L objet Navigator navigator.appname : Opera nom du navigateur navigator.appversion : 9.64 (Macintosh ; PPC Mac OS X infos sur la plate forme d exécution. navigateur.language : fr langue. navigator.platform : MacPPC type de machine navigator.useragent : Opera/9.64 (Macintosh ; PPC Mac OS X ; U ; fr) : infos générales envoyées au serveur HTTP à chaque requête du navigateur. navigator.plugins : [object PluginArray] tableau des plug-ins installés dans le navigateur var p= navigator.plugins[0].name ; document.write(navigator.plugins[p].description) ; 7 / 43

8 L objet screen screen.height, screen.width screen.availheight nombre de pixels disponible verticalement screen.availwidth pareil horizontalement screen.pixeldepth nombre de bits utilisés pour coder la couleur screen.colordepth nombre de couleurs disponibles 8 / 43

9 La classe Window Un objet window est crée pour chaque fenêtre ou cadre (zone) ouverte par le navigateur Propriétés de base : 1 window.history : un tableau des URL visitées (dans la zone) 2 window.location : l URL de la zone 3 window.document : tous les objets de la zone 9 / 43

10 La classe Window Pour accéder aux objets contenu dans (l objet) window : référence immédiate à l objet window : window.document.bgcolor= green ; référence à un objet window d une autre zone à l aide d une propriété : window.top.cadre gauche.document.bgcolor= green ; window.parent.frames[0].document.bgcolor= green ; référence à un objet window d une autre zone à l aide d une variable : var Ma Fenetre=window.open( cv.html ) ; Ma Fenetre.document.bgcolor= green ; 10 / 43

11 Propriétés principales de window document : voir après history : historique de la page location : infos sur l URL external : accès à certaines propriétés du navigateur, de les modifier (ex : page d accueil,...) frame[] : accès aux cadres parent, top : parent est un objet de type window qui pointe sur la fenêtre qui encapsule dans des frames la fenêtre en cours. si la page en cours n est pas inclue dans un jeu de frames, l appel à parent est identique à window. status : le texte à afficher dans la barre d état closed : (booléen) si la zone est fermée opener : retourne l objet window qui a ouvert cette fenêtre avec la méthode open() 11 / 43

12 Propriétés principales de window document : voir après history : historique de la page location : infos sur l URL external : accès à certaines propriétés du navigateur, de les modifier (ex : page d accueil,...) frame[] : accès aux cadres parent, top : parent est un objet de type window qui pointe sur la fenêtre qui encapsule dans des frames la fenêtre en cours. si la page en cours n est pas inclue dans un jeu de frames, l appel à parent est identique à window. status : le texte à afficher dans la barre d état closed : (booléen) si la zone est fermée opener : retourne l objet window qui a ouvert cette fenêtre avec la méthode open() 12 / 43

13 Méthodes principales de window open() : MaFen = window.open(url,nom zone,options) options booléennes (yes/no) : fullscreen, menubar, toolbars, resizable) options en pixels : top, left, height, width close() : alert : focus() : rendre la zone active blur : rendre la zone inactive prompt() : chaine=window.prompt(message,valeur) Ouvre une fenêtre composée d un message et d un champs de saisie ; retourne la valeur saisie confirm() : bool=window.confirm(message) ; ouvre une fenêtre avec message, bouton OK et Annuler et retourne true (sur OK) ou false (sur Annuler) 13 / 43

14 Méthode principale de window back() : window.back() ; renvoie sur la page précédente forward() : window.forward() ; renvoie sur la page suivante home() : window.home() ; : renvoie sur la page d accueil du navigateur find() : window.find(chaine) recherche la chaîne dans la zone print() : permet de lancer l impression du document courant moveby(), moveto() : déplacement de la zone window.moveby(dx,dy) ; dx vers la droite, dy vers la bas window.moveto(x,y) ; (x, y) coin supérieur gauche scrollby(), scrollto() : défilement de la zone window.scrollby(dx,dy) ; dx vers la droite, dy vers la bas window.scrollto(x,y) ; le point (x, y) du document est affiché dans le coin supérieur gauche de la fenêtre 14 / 43

15 Méthodes principales de window settimeout() et cleartimeout() Syntaxe : timeoutid=window.settimeout(codejs, msec) ; Le code codejs après un délai de msec unités de temps (à partir de quel moment?) settimeout n arrête pas l exécution du script principal pendant ce délai Ex : <input type= button name= clickme value= Click me and wait! onclick= settimeout( alert( Surprise! ), 5000) ; /> Syntaxe : window.cleartimeout(timeoutid) annule l effet de settimeout (avant l expiration du délai) 15 / 43

16 Méthodes principales de window settimeout() et cleartimeout() Syntaxe : timeoutid=window.settimeout(codejs, msec) ; Le code codejs après un délai de msec unités de temps (à partir de quel moment?) settimeout n arrête pas l exécution du script principal pendant ce délai Ex : <input type= button name= clickme value= Click me and wait! onclick= settimeout( alert( Surprise! ), 5000) ; /> Syntaxe : window.cleartimeout(timeoutid) annule l effet de settimeout (avant l expiration du délai) 16 / 43

17 Méthodes principales de window settimeout() et cleartimeout() Syntaxe : timeoutid=window.settimeout(codejs, msec) ; Le code codejs après un délai de msec unités de temps (à partir de quel moment?) settimeout n arrête pas l exécution du script principal pendant ce délai Ex : <input type= button name= clickme value= Click me and wait! onclick= settimeout( alert( Surprise! ), 5000) ; /> Syntaxe : window.cleartimeout(timeoutid) annule l effet de settimeout (avant l expiration du délai) 17 / 43

18 Méthodes principales de window settimeout() et cleartimeout() Syntaxe : timeoutid=window.settimeout(codejs, msec) ; Le code codejs après un délai de msec unités de temps (à partir de quel moment?) settimeout n arrête pas l exécution du script principal pendant ce délai Ex : <input type= button name= clickme value= Click me and wait! onclick= settimeout( alert( Surprise! ), 5000) ; /> Syntaxe : window.cleartimeout(timeoutid) annule l effet de settimeout (avant l expiration du délai) 18 / 43

19 Méthodes principales de window settimeout() et cleartimeout() Syntaxe : timeoutid=window.settimeout(codejs, msec) ; Le code codejs après un délai de msec unités de temps (à partir de quel moment?) settimeout n arrête pas l exécution du script principal pendant ce délai Ex : <input type= button name= clickme value= Click me and wait! onclick= settimeout( alert( Surprise! ), 5000) ; /> Syntaxe : window.cleartimeout(timeoutid) annule l effet de settimeout (avant l expiration du délai) 19 / 43

20 Méthodes principales de window setinterval() et clearinterval() Syntaxe : intervalid=window.setinterval(codejs, msec) ; exécution périodique du script codejs, période=msec Syntaxe : window.clearinterval(intervalid) ; annule l effet de setinterval ceci n interrompe pas le script en cours d exécution 20 / 43

21 Méthodes principales de window setinterval() et clearinterval() Syntaxe : intervalid=window.setinterval(codejs, msec) ; exécution périodique du script codejs, période=msec Syntaxe : window.clearinterval(intervalid) ; annule l effet de setinterval ceci n interrompe pas le script en cours d exécution 21 / 43

22 Méthodes principales de window setinterval() et clearinterval() Syntaxe : intervalid=window.setinterval(codejs, msec) ; exécution périodique du script codejs, période=msec Syntaxe : window.clearinterval(intervalid) ; annule l effet de setinterval ceci n interrompe pas le script en cours d exécution 22 / 43

23 <html> <head> <script language= javascript > var t=null ; function afficher{ var now= new Date() ; var hrs=now.gethours() ; var min=now.getminutes() ; var sec=now.getseconds() ; document.heur.h.value=hrs ; document.heur.m.value=min ; document.heur.s.value=sec ;} function start(){t=setinterval( afficher(),100) ;} function stop(){clearinterval(t) ;} function restart(){window.location.reload() ;} </script></head> <body onload= start() ; > <form name= heur > <input type= text name= h > <input type= text name= m > <input type= text name= s > <input type= button value= STOP onclick= stop() ; > <input type= button value= RESUME onclick= restart() ; > </form></body> </html> 23 / 43

24 Les événements associés à window onfocus : exécuter du code JS quand la fenêtre devient active <BODY onfocus= pgm JS > window.onfocus= f // f est une fonction onblur : pareil onerror : exécute une fonction quand une erreur se produit dans le code JS : window.onerror= f // f est une fonction Autre : onload, onmove, onresize 24 / 43

25 La propriété history de window window.history = un objet qui pertmet d avancer ou de reculer dans l historique du navigateur (associé à la zone) Méthodes : back(), forward(), go(int) window.history.back() ; window.history.go(4) ; retourne 4 documents en avant window.history.go(-4) ; retourne 4 documents en arrière window.history.go(0 ;?? Ex. <a href= javascript :window.history.go(-1) > Retour </a> 25 / 43

26 La propriété location de window window.location = un objet contenant les infos sur l URL de la zone Méthodes : reload(), replace(url) window.location.reload() ; recharge le document courant window.location.replace(url) ; replace le document courant par celui dont l URL est donné en paramètre Propriétés window.location.href : l URL window.location.hash : partie de l URL située après # window.location.host : nom du serveur et du port window.location.hostname : nom du serveur window.location.port : numéro du port sur le serveur 26 / 43

27 La propriété document de window document.title document.bgcolor : couleur du fond document.fgcolor : couleur du texte document.linkcolor : couleur des liens document.vlinkcolor : couleur des liens visités document.alinkcolor : couleur des liens activés document.url : adresse du document document.referrer : URL du document précédent document.lastmodified : date de dernière modification 27 / 43

28 La propriété document de window forms[] : tableau des formulaires elements[] : tableau des composants du formulaire images[] : tableau des images links[] : tableau des liens hypertextes et image cliquable anchors[] : tableau des lien interne embeds : tableau des objet inséré <EMBED SRC=... > all[] : tous les éléments HTML du document (ordre?) 28 / 43

29 La propriété document de window Méthodes principales : write(ch) : affiche la chaîne open() : crée un nouveau document (vide l ancien) (ne pas confondre avec window.open()) getselection() : retourne la chaîne sélectionnée dans le document 29 / 43

30 <html> <head> <SCRIPT language= javascript > var MaFen=null ; function ouvrir(){ var options= width=300,height=30 ; mafen= window.open(, MaFenetre,options) ; mafen.document.open() ; mafen.document.write( Un exemple ) ; function fermer(){ mafen.close() ;} </script> </head> <body> <A href= onmouseover= ouvrir() ; onmouseout= fermer() ; > Ici</A> </body> </html> 30 / 43

31 Plan 1 Les objets du navigateur 2 31 / 43

32 C est quoi? des fichiers texte que le navigateur crée (dans le disque dure du client) pour stocker des informations A quoi ça sert? éviter de retaper les même informations (ex. le formulaire les affiche d emblée en tenants en compte vos derniers passages : le navigateur les lit sur votre disque dure, dans le cookie ) fournir des éléments statistique aux serveur : nombre de visites du site par le client. propager un code d accès : éviter une authentification lors de chaque requête 32 / 43

33 C est quoi? des fichiers texte que le navigateur crée (dans le disque dure du client) pour stocker des informations A quoi ça sert? éviter de retaper les même informations (ex. le formulaire les affiche d emblée en tenants en compte vos derniers passages : le navigateur les lit sur votre disque dure, dans le cookie ) fournir des éléments statistique aux serveur : nombre de visites du site par le client. propager un code d accès : éviter une authentification lors de chaque requête 33 / 43

34 Les Propriétés des Cookies 1 Nom : nécessaire pour identifier le cookie 2 Valeur : pourra être récupérée par le site 3 Date d expiration : si rien n est spécifié alors le cookie sera détruit après son utilisation. 4 Nom du Domaine : qui a déposé le cookie 5 Chemin : où le cookie est actif si on veut que les cookies soient envoyés seulement aux pages contenues dans le répertoire Mon Rep, alors on met le chemin à /Mon Rep Ps. seulement le Nom et la Valeur sont obligatoires. 34 / 43

35 document.cookie Les cookies peuvent être crées, lus et écrasés Les cookies sont accessibles à l aide de la propriété document.cookie On peut traiter document.cookie comme une chaîne de caractères 35 / 43

36 Gestion des cookies (1) création : document.cookie = Moncookie1=testcookie ; expires=thu, 2 Sep :04 :11 UTC ; path=/ ; rajout d un autre cookie : document.cookie = Moncookie2=testcookie ; expires=thu, 2 Sep :04 :11 UTC ; path=/ ; réinitialisation document.cookie = Moncookie1=autre test ; expires=fri, 5 Sep :00 :09 UTC ; path=/ ; suppression : mettre la date d expiration avant aujourd hui 36 / 43

37 Gestion des cookies (1) création : document.cookie = Moncookie1=testcookie ; expires=thu, 2 Sep :04 :11 UTC ; path=/ ; rajout d un autre cookie : document.cookie = Moncookie2=testcookie ; expires=thu, 2 Sep :04 :11 UTC ; path=/ ; réinitialisation document.cookie = Moncookie1=autre test ; expires=fri, 5 Sep :00 :09 UTC ; path=/ ; suppression : mettre la date d expiration avant aujourd hui 37 / 43

38 Gestion des cookies (1) création : document.cookie = Moncookie1=testcookie ; expires=thu, 2 Sep :04 :11 UTC ; path=/ ; rajout d un autre cookie : document.cookie = Moncookie2=testcookie ; expires=thu, 2 Sep :04 :11 UTC ; path=/ ; réinitialisation document.cookie = Moncookie1=autre test ; expires=fri, 5 Sep :00 :09 UTC ; path=/ ; suppression : mettre la date d expiration avant aujourd hui 38 / 43

39 Gestion des cookies (1) création : document.cookie = Moncookie1=testcookie ; expires=thu, 2 Sep :04 :11 UTC ; path=/ ; rajout d un autre cookie : document.cookie = Moncookie2=testcookie ; expires=thu, 2 Sep :04 :11 UTC ; path=/ ; réinitialisation document.cookie = Moncookie1=autre test ; expires=fri, 5 Sep :00 :09 UTC ; path=/ ; suppression : mettre la date d expiration avant aujourd hui 39 / 43

40 Un exemple <script language= JavaScript > function setcook(nom,valeur) { document.cookie = nom + = + valeur ; } function setcook2(nom,valeur,jours) { var expdate = new Date() ; expdate.settime(expdate.gettime() + (jours * 24 * 3600 * 1000)) ; document.cookie = nom + = + valeur + ;expires= + expdate.togmtstring() ; } function delcook(nom) { setcook2(nom,,-1) } </script> 40 / 43

41 Un exemple <script language= JavaScript > function setcook(nom,valeur) { document.cookie = nom + = + valeur ; } function setcook2(nom,valeur,jours) { var expdate = new Date() ; expdate.settime(expdate.gettime() + (jours * 24 * 3600 * 1000)) ; document.cookie = nom + = + valeur + ;expires= + expdate.togmtstring() ; } function delcook(nom) { setcook2(nom,,-1) } </script> 41 / 43

42 Un exemple <script language= JavaScript > function setcook(nom,valeur) { document.cookie = nom + = + valeur ; } function setcook2(nom,valeur,jours) { var expdate = new Date() ; expdate.settime(expdate.gettime() + (jours * 24 * 3600 * 1000)) ; document.cookie = nom + = + valeur + ;expires= + expdate.togmtstring() ; } function delcook(nom) { setcook2(nom,,-1) } </script> 42 / 43

43 Lecture d un cookie <SCRIPT LANGUAGE= JAVASCRIPT > function GetCookie () { var cookvalue = ; var cookname = ; //position de = dans le cookie var egal= document.cookie.indexof( = ) ; cookname = document.cookie.substring ( 0, egal ) ; //on prend la sous-chaine comprise entre le = et le ; donc sa valeur cookvalue = document.cookie.substring ( egal + 1 ) ; //affiche le nom du cookie document.write ( <br>cookname vaut : <b> + cookname + </b> ) ; //affiche la valeur du cookie document.write ( <br>cookvalue vaut : <b> + cookvalue + </b> ) ; } </SCRIPT> 43 / 43