La classe WINDOW de JS

Transcription

1 La classe WINDOW de JS Classe au sommet de la hiérarchie On peut omettre le préfixe window. Pour le document courant Obligatoire si l'utilisateur crée sa propre classe

2 La classe WINDOW de JS Propriétés simples: defaultstatus : représente le message par défaut qui sera affiché dans la barre de statut <body onload="defaultstatus='bonjour à tous'"> status : message affiché dans la barre de statut de la fenêtre length : représente le nombre de cadres dans la fenêtre parente (0 sinon). name : représente le nom de la fenêtre opener : spécifie le nom de la fenêtre parent, qui l'a créée dynamiquement, avec open() parent : est le nom de la frame où se trouve éventuellement la fenêtre

3 La classe WINDOW de JS Propriétés simples: self : synonyme pour le nom de la fenêtre et fait référence à la fenêtre courante top : fait référence à la fenêtre principale du navigateur window : synonyme pour la fenêtre courante closed : booléen qui indique si la fenêtre a été fermée utilisation : if (! fen.closed) fen.close();

4 La classe WINDOW de JS Propriétés objets: Ces propriétés sont en fait elle-même des objets dotées de propriétés et de méthodes : document : c'est le document HTML étudié history : liste des documents chargés dans la fenêtre (simule l'action des boutons suivant et précédent) history.back() : document précédent history.forward() : le suivant history.go(n) : recharge le document situé à n étapes du présent document

5 La classe WINDOW de JS Propriétés objets: location location.href : chaine contenant l'url location.hash : partie de l'url après # (lien interne) location.host : nom serveur et port location.protocol : http, ftp, javascript,.. location.reload() : recharge le document courant = history.go(0) location.replace(url) : remplace le document courant frames[] est un tableau représentant tous les cadres dans une fenêtre. Les fenêtres-cadres peuvent être nommées au moment de leur définition par un nom, sinon on peut les référencer par frames[index]

6 La classe WINDOW de JS Méthodes de gestion d'objets fenêtres Possibilité d'ouvrir de nouvelles fenêtres avec les méthodes open() et close() nomfenetre =open("url","nom_fenetre", "options"); "URL" est l'adresse du document à charger dans la nouvelle fenêtre "nom_fenetre" est le nom de la fenêtre, à donner à l'attribut TARGET des balises <FORM> ou <A> "options" est une liste d'éléments optionnels qui précisent l'aspect de la fenêtre On utilise ensuite nomfenetre pour faire référence à un objet ou une propriété de la nouvelle fenêtre Par exemple, pour écrire dans le composant message du formulaire formu situé dans le document de la fenêtre fen, créée par fen=open(...), on écrit : fen.document.formu.message.value= "...";

7 La classe WINDOW de JS Paramètres de la partie OPTIONS : barre d'outils : toolbar[=yes no] [=1 0] url visible : location[=yes no] [=1 0] répertoire? directories[=yes no] [=1 0] barre d'état : status[=yes no] [=1 0] barre de menu : menubar[=yes no] [=1 0] barre de défilement : scrollbars[=yes no] [=1 0] Redimensionnement : resizable[=yes no] [=1 0] visibilité permanente? alwaysraised[=yes no] [=1 0] fermée avec la fen. parente : dependant[=yes no] [=1 0] height= dimension en pixels width= dimension en pixels positionnement X : screenx = nb pixels positionnement Y : screeny = nb pixels

8 La classe WINDOW de JS Autres méthodes de window : alert(), prompt() et confirm() : boites de dialogue méthodes focus(), blur() qui active ou désactive la fenêtre moveby(dx, dy)) déplace la fenêtre par translation et moveto(x,y) déplace le coin (gauche, haut) au point (x, y) resizeby(dl, dh) et resizeto(l, h) jouent des rôles analogues, quant à la taille de la fenêtre les méthodes de temporisation settimeout() et cleartimeout()

9 Exemple : La classe WINDOW de JS <SCRIPT> var hauteur=200; // hauteur de la fenêtre à créer var largeur=500; options="width="+largeur+",height="+hauteur+"toolbar=yes, directories=no, menubar=no,scrollbars=yes,status=yes"; function OuvrirFenetre1() { fen1 =open("","nouvelle_fenetre",options); } </SCRIPT> <body><form> Pour créer une fenêtre "enfant", cliquer sur ce bouton : <INPUT type =Button value="nouvelle fenetre 1" onclick="ouvrirfenetre1()"> <INPUT type =Button value="fermer" onclick="fen1.close()"> </form></body>

10 La classe document de JS La hiérarchie de la classe document : Un document HTML peut contenir diverses balises d'insertion d'images, de formulaires, d'hyperliens, etc.. qui sont autant d'objet du point de vue du navigateur JS les classe dans des tableaux d'objets au fur et a mesure, dans l'ordre de leur apparition. Chaque objet peut posséder des propriétés et des méthodes Par exemple, soit le 1er formulaire déclaré par <FORM NAME="formu"> On peut le nommer aussi bien par document.formu que par document.forms[0] images[2] est la 3ème image insérée, avec une balise <IMG SRC=..> Autre exemple : Soit un champ de texte nommé lycee. Il a été défini dans le formulaire nommé formu par : <INPUT type="text" name="lycee" value="" size=15> Pour changer le texte : document.formu.lycee.value="j-feyder";

11 La classe document de JS Les différents tableaux accessibles : anchors[] tableau des liens internes <A NAME=...> applets[] tableau des applets <APPLET CODE=...> embeds[] tableau des objets ins r s <EMBED SRC=..> forms[] tableau des formulaires <FORM elements[] tableau des composants du formulaire <INPUT..>, <SELECT..>,.. images[] tableau des images <IMG SRC=...> links[] tableau des liens hypertextes <A HREF=...>

12 La classe document de JS Principales propriétés : Titre du document : document.title = Cours JavaScript Couleur du texte : document.fgcolor = # Couleur du fond : document.bgcolor = #f1f1f1 Couleur de liens : document.linkcolor = #0000a0 Couleur de liens visités : document.vlinkcolor = #cc3366 Couleur de liens activés : document.alinkcolor = #cc3366 Adresse du document : document.url = Date de dernière modification : document.lastmodified = 11/26/ :26:10 Le cookie du document : document.cookie = Méthode : write(ch) : permet l'écriture dans le document

13 Traitements des images en JS Rappels HTML la balise <IMG NAME=.. SRC="URL" WIDTH=.. HEIGHT=.. ALIGN=..> URL est l'adresse internet (en général relative) du fichier image à charger (.gif ou.jpg) l'alignement de l'image par rapport au texte voisin est rêglé par l'attribut align une image peut servir d'ancre pour un hyperlien le navigateur classe les images insérées dans le document dans un tableau images[]

14 Traitements des images en JS L'objet Image : Il fait partie des objets (ou plutôt des classes d'objets) prédéfinies du langage (à partir de la version 1.2). Contrairement à l'usage de la balise IMG, on peut précharger l'image et la stocker en cache (mémoire+disque) dans un objet de type Image, avant de l'afficher. Contructeur Image() : Il s'agit d'une fonction spéciale sans paramêtre qui sert à créer un objet var monimage = new Image() Propriétés : Elles correspondent aux attributs de la balise <IMG> name, src, lowsrc, height, width, border, hspace, vspace..

15 Traitements des images en JS Propriétés : La propriété la plus importante, src permet de charger le fichier image à partir d'une URL et de le stocker dans l'objet var monimage = new Image(); monimage.src = "moi.jpg"; Mais l'image n'est pas affichée. Elle pourra l'être dans une balise <IMG> <IMG SRC=...> De plus, malheureusement, les propriétés height et width ne sont pas modifiables

16 Gérer les cookies en JS Pourquoi les cookies? On peut définir les cookies comme la "mémoire du WEB" Seule façon de s'affranchir de l'impossibilité d'écrire sur le disque du navigateur client (JS ne possède pas d'instructions d'entrées-sorties fichiers) Le mécanisme de pose de "cookies" a été imaginé pour permettre au moins à un serveur de retrouver certains résultats de sa consultation précédente du client Pour cela, le serveur écrit sur le disque client quelques informations qu'il pourra chercher et réexaminer lors d'une prochaine visite du même "client" Ces renseignements sont stockés sous forme de chaîne de caractères, dans un seul fichier au format texte, appelé cookies.txt Ils restent stockés, à l'insu de l'utilisateur client le plus souvent pendant toute leur durée de vie, le "risque" dans ce dispositif étant l'effacement du fichier cookies.txt

17 Gérer les cookies en JS Enregistrement d'un cookie : Durant la session Web, chaque cookie est conservé en mémoire, il y a écriture sur le disque à la fermeture du navigateur. L'écriture s'effectue sur instruction du serveur utilisant la directive HTTP suivante (incluse dans l'en-tête) nom=valeur; [expires =date; path= chemin-client; domain= nomdomaine; secure] Seul le 1er champ, le nom identifiant le cookie et sa valeur (chaîne de caractères stockée) sont obligatoires date : la date d'expiration, au delà de laquelle le cookie sera supprimé du fichier chemin : nom du répertoire serveur nom-domaine : nom du domaine Internet dans lequel le cookie peut être traité, les autres serveurs devant l'ignorer secure : le cookie ne peut être consulté qu'au cours d'un échange sécurisé (type https)

18 Gérer les cookies en JS Suppression d'un cookie : La méthode la plus simple consiste à le réenregistrer en lui attribuant une date d'expiration dépassée Exemple : <SCRIPT LANGUAGE="JavaScript"> // la date est dépassée! var date = new Date(1999,0,1); function EffacerCookie() { //nom est le nom du cookie document.cookie = "CompterPassageCoursCookie=" + ";expires=" + date.togmtstring(); } </SCRIPT>

19 XML : introduction

20 Structure d'un document XML But XML : simplicité de déclaration la validation de la structure grande souplesse syntaxique du SGML la simplicité d'écriture du HTML

21 Structure d'un document XML Exemple :  <?xml version="1.0" encoding="iso "?>  <biblio>  <livre>  <titre>les Misérables</titre> <auteur>victor Hugo</auteur> <nb_tomes>3</nb_tomes> </livre> <livre> <titre>l'assomoir</titre> <auteur>émile Zola</auteur> </livre> <livre lang="en"> <titre>david Copperfield</titre> <auteur>charles Dickens</auteur> <nb_tomes>3</nb_tomes> </livre> </biblio>

22 Structure d'un document XML Prologue <?xml version="1.1" encoding="iso " standalone="yes"?> version : version du XML utilisée dans le document encoding : le jeu de codage de caractères utilisé standalone : dépendance par rapport à une DTD (yes=pas de DTD) Déclaration de type de document (DTD) <!DOCTYPE biblio SYSTEM "biblio.dtd"> Définit l'ensemble des éléments utilisables dans le document Les commentaires Comme en HTML

23 Structure d'un document XML L'arbre d'éléments Un document XML peut se représenter sous la forme d'une arborescence d'éléments. Cette arborescence comporte une racine (unique), des branches et des feuilles Élément racine : L'élément-racine (en anglais : document element) est la base du document XML. Il est unique et englobe tous les autres éléments. Il s'ouvre juste après le prologue, et se ferme à la toute fin du document Les éléments : Les éléments forment la structure même du document : ce sont les branches et les feuilles de l'arborescence. Ils peuvent contenir du texte, ou bien d'autres éléments, qui sont alors appelés "éléments enfants", l'élément contenant étant quant à lui appelé logiquement "élément parent"

24 Structure d'un document XML Les attributs : Tous les éléments peuvent contenir un ou plusieurs attributs. Chaque élément ne peut contenir qu'une fois le même attribut. Un attribut est composé d'un nom et d'une valeur. Il ne peut être présent que dans la balise ouvrante de l'élément <instrument type="vent">trompette</instrument> Les entités : Il existe deux sortes d'entités, définissables et définies. Elles peuvent être analysables ou non, internes ou externes. La déclaration des entités s'effectue au sein de la DTD. Elles peuvent être utilisées aussi bien dans la DTD que dans le document XML Certains caractères ayant un sens précis en XML, il est nécessaire de leur trouver un remplaçant lorsque l'on a besoin de les insérer dans un document. On a recours dans ce cas à des entités prédéfinies. Ces entités sont :

25 Structure d'un document XML Certains caractères ayant un sens précis en XML, il est nécessaire de leur trouver un remplaçant lorsque l'on a besoin de les insérer dans un document. On a recours dans ce cas à des entités prédéfinies. Ces entités sont : & : & < : < > : > " : " ' : &aquot; Pour les caractères accentués : &#n (n = code iso 10646) Pour le é -> é

26 Structure d'un document XML Les sections CDATA : Une section CDATA est une section pouvant contenir toute sorte de chaîne de caractères. Une section CDATA permet de définir un bloc de caractères ne devant pas être analysés par le processeur XML. Ceci permet entre autres de garder dans un bloc de texte un exemple de code à afficher tel quel. Exemple : <![CDATA[Une balise commence par un < et se termine par un >.]]>

27 Structure d'un document XML Règles de composition : Un certain nombre de règles de base doivent être respectées : 1. Un nom d'élément ne peut commencer par un chiffre. Si le nom n'est composé que d'un seul caractère, ce doit être une lettre comprise entre "a" et "z" pour les minuscules, "A" et "Z" pour les majuscules. S'il est composé d'au moins deux caractères, le premier peut être "_" ou ":". Le nom peut ensuite être composé de lettres, chiffres, tirets, tirets bas et deux points. La syntaxe XML est sensible à la casse 2. Toutes les balises portant un contenu non vide doivent être fermées. La balise de début, la balise de terminaison et le contenu entre deux sont globalement appelés élément ; 3. Les balises n'ayant pas de contenu doivent se terminer par /> (voir la balise <img.../> ci-dessus) ; 4. Les noms d'attributs sont en minuscules ; 5. Les valeurs d'attributs doivent être entre guillemets ; Possibilité de règles plus strictes au moyen d'une DTD