Programmation Web 2 : Les Objets du Navigateur, Lecture notes of Web Application Development

Download Programmation Web 2 : Les Objets du Navigateur and more Lecture notes Web Application Development in PDF only on Docsity!

Chapitre 6 : Les objets du navigateur

I. Généralités

En JavaScript il existe aussi plusieurs objets rattachés à la fenêtre, à la page et au navigateur. Ils sont appelés window , document et navigator. Ce sont 3 classes distinctes - sans lien entre elle – puisque l‟héritage n‟existe pas en JS. Nous étudierons chaque classe l‟une après l‟autre. Cependant, l‟objet document fait partie de l‟objet window.

II. Arborescence

Je présente ici l‟arborescence des objets de JS. Elle comprend les 3 objets principaux ainsi que tous les « sous-objets » contenus dans chaque objet principal.

navigator plugins [] window parent frames[] top opener history location

III. L’objet navigator

Il s‟agit – comme son nom l‟indique – de votre navigateur, ou votre browser. Les deux principaux sont sûrement Microsoft Internet Explorer et Netscape. L‟objet navigator possède toutes les caractéristiques de votre navigateur ainsi que certaines de votre ordinateur. Cela peut s‟avérer utile pour tester la compatibilité de certains codes avec un browser. L‟objet navigator étant intégré dans le langage, il n‟est pas nécessaire de créer une instance de cette classe.

1. Les propriétés de navigator

Toutes ces propriétés ne font que donner des informations sur votre type de navigateur. Pour y accéder, on suit la syntaxe habituelle d‟un objet. Syntaxe :

Les propriétés qui suivent fonctionnent sous tous les navigateurs. Les compatibilités ne seront évoquées que pour Netscape et Internet Explorer.  appCodeName : nom de code du navigateur.  appName : nom complet du navigateur.  appVersion : numéro de version du navigateur ainsi que d‟autres informations de plate-forme.  userAgent : informations de appCodeName et de appVersion réunies. Certaines propriétés ne fonctionnent qu‟avec Microsoft Internet Explorer. Veillez à tester le type de browser avant d‟exécuter le script!  appMinorVersion : numéro de version mineure.  browserLanguage : code langue du browser.  userLanguage : code langue de l‟utilisateur.  systemLanguage : code langue du système d‟exploitation.  cpuClass : classe du processeur.  platform : code type de plate-forme (pc, mac, linux …).  cookieEnabled : booléen qui indique si l‟utilisateur accepte les cookies.  onLine : booléen qui indique si le poste est connecté à Internet. Une propriété existe sous Netscape pour remplacer la propriété browserLanguage d‟Internet Explorer.  language : code langue du browser.

2. Les méthodes de navigator

Dans cette partie, je vous cite les méthodes de navigator. Syntaxe :

 javaEnabled()  taintEnabled()

3. Les objets de navigator

L‟objet navigator contient un autre objet, qui n‟hérite pas de lui. Il s‟agit du tableau plugins, qui n‟est reconnu que par Netscape. Il s‟agit de la liste de tous les plugins installés.

variable = navigator. méthode() ;

variable = navigator. propriété ;

Certaines propriétés ne nécessitent pas de préciser le suffixe window. pour fonctionner. C‟est notamment le cas des boites de dialogue. b. Liste des méthodes  alert („texte‟) : boite de message avec un bouton unique.  prompt („texte‟, „valeur_défaut‟) : boite d‟invite avec un texte informatif et une zone de texte avec une valeur par défaut facultative.  confirm („texte‟) : boite de confirmation avec un texte informatif et deux boutons « OK » et « annuler ».  print („texte‟) : afficher le texte dans la page.  open („URL‟, „nom‟, options) : ouvre une page pop-up avec les caractéristiques données en paramètres.  close () : ferme la fenêtre.  focus () : donne le focus à la page.  blur () : enlève le focus à la page.  moveBy (x,y) : déplacement relatif du coin supérieur gauche de la fenêtre.  moveTo (x,y) : déplacement absolu du coin supérieur gauche de la fenêtre.  resizeBy (x,y) : redimensionnement relatif de la fenêtre.  resizeTo (x,y) : redimensionnement absolu de la fenêtre.  scrollBy (x,y) : scroll relatif.  scrollTo (x,y) : scroll absolu.  setTimeOut („fonction‟, temps) : déclenche une minuterie en millisecondes.  clearTimeout(„timer‟) : suspend la minuterie.  stopTimeOut („timer‟) : arrête une minuterie.  setInterval(code, délai) : exécute le code – sous forme de String - passé en paramètre à chaque fois que le délai est écoulé.  clearInterval(timer) : arrête la minuterie définie avec setInterval().  stop() : arrête le chargement de la page.  home() : ouvre la page de démarrage de l‟internaute.

3. Les évènements de window

On peut rattacher certains évènements à l‟objet window. Ils seront placés dans la balise , grâce au gestionnaire d‟événement onEvent. Syntaxe :

variable = window. méthode() ;

 load : fin de chargement de la page.  unLoad : déchargement de la page.  focus : prise de focus de la fenêtre ou d‟un de ses éléments.  blur : perte de focus de la fenêtre ou d‟un de ses éléments.  resize : redimensionnement de la fenêtre.

4. Les objets de window

L‟objet window contient plusieurs autres objets. Syntaxe :

a. L’objet frames Il s‟agit d‟un tableau contenant toutes les frames déclarées dans la page. Il ne possède ni propriétés ni méthodes. Syntaxe :

b. L’objet parent Il s‟agit de la page principale, qui contient la déclaration de toutes les frames. Il possède les mêmes attributs que l‟objet window. Syntaxe :

c. L’objet top Il s‟agit de la page de plus haut niveau. Il possède les mêmes attributs que l‟objet window. Syntaxe :

d. L’objet opener Il s‟agit de la page responsable de l‟ouverture de la page courante. Il possède les mêmes attributs que l‟objet window. Syntaxe :

e. L’objet history

variable = window.opener. méthode() ; variable = window.opener. propriété ;

variable = window.top. méthode() ; variable = window.top. propriété ;

variable = window.parent. méthode() ; variable = window.parent. propriété ;

variable = window.frames[i] ;

variable = window. objet. propriété ; variable = window. objet.méthode() ;

 availWidth : largeur en pixels de la zone utilisable pour l‟affichage.  height : hauteur de la fenêtre en pixels - contient barres de menus, d‟état, de titre et de scrolling -.  width : largeur de la fenêtre en pixels - contient barres de menus, d‟état, de titre et de scrolling -.  colorDepth : Contient la profondeur de couleur en nombre de bits. h. L’objet event Il s‟agit d‟un objet propre à Microsoft Internet Explorer. Il renvoie le type d‟événement qui a eu lieu. Syntaxe :

 altKey : renvoie le code du caractère frappé au clavier.  button : renvoie le type de clic de souris effectué. i. L’objet external Il s‟agit d‟un objet propre à Microsoft Internet Explorer. Il permet d‟accéder aux propriétés du navigateur. Syntaxe :

 AddFavorite(URL,titre): Ajoute une ligne à la liste des favoris. Demande confirmation à l‟internaute.

V. L’objet document Il s‟agit – comme son nom l‟indique – de la page en cours d‟exécution. Tous les éléments de la page sont des propriétés ou des méthodes de document. L‟objet document étant intégré dans le langage, il n‟est pas nécessaire de créer une instance de cette classe. L‟objet document fait partie de l‟objet window, mais il n‟est pas nécessaire de préciser le suffixe "window."

1. Les propriétés de document

Toutes ces propriétés correspondent à des éléments de la page ouverte. Cela permet d‟uniformiser et de changer quelques détails de votre page. On les utilise grâce à la syntaxe habituelle.

variable = window.external. propriété ;

variable = window.event. propriété ;

Syntaxe :

 bgColor : couleur du fond.  fgColor : couleur du texte.  linkColor : couleur des liens ni actifs ni visités.  alinkColor : couleurs des liens actifs.  vlinkColor : couleurs des liens visités.  cookie : chaîne de caractères contenant les cookies.  lastModified : date de dernière modification du fichier source  referrer : adresse de la page par laquelle la page en cours a été appelée.  title : titre du document, indiqué par les balises …. N‟est modifiable qu‟avec Microsoft Internet Explorer.  fileSize : taille de la page en octets.  defaultCharset : jeu de caractère du document chargé.  mimeType : type du document chargé.  URLUnencoded : URL complète de la page, avec les caractères spéciaux encodés.  URL : URL de la page.  protocol : protocole de chargement de la page.  domain : domaine de l‟URL complète de la page.

2. Les méthodes de document

L‟objet document possède plusieurs méthodes, dont certaines que nous avons déjà vu précédemment. Syntaxe :

Certaines propriétés ne nécessitent pas de préciser le suffixe window. pour fonctionner. C‟est notamment le cas des boites de dialogue.  write („texte‟) : affiche le texte et le code HTML dans la page courante.  getSelection () : renvoie le texte qui a été sélectionné dans la page.  handleEvents : créé un gestionnaire d‟évènement.  captureEvents : détecte un évènement.  open () : ouvre une nouvelle fenêtre de votre browser.  close () : ferme le flux d‟affichage externe.  getElementById(ID) : renvoie un objet HTML en fonction de son ID. A ne pas confondre avec le Name.  getElementsByName(nom) : renvoie un objet HTML en fonction de son name.

variable = document. méthode() ;

document. propriété ;

d. L’objet anchors Il s‟agit d‟un tableau contenant toutes les ancres – les balises - de la page courante. Il ne possède ni propriétés ni méthodes. Syntaxe :

e. L’objet images Il s‟agit d‟un tableau contenant toutes les images – les balises - de la page courante. Il ne possède ni propriétés ni méthodes. Cela permet de faire des effets, par exemple des rollovers, sur les images. Syntaxe :

f. L’objet applets Il s‟agit d‟un tableau contenant toutes les applets java déclarés dans la page courante. Il ne possède ni propriétés ni méthodes. Syntaxe :

g. L’objet plugins Il s‟agit du tableau plugins, qui n‟est reconnu que par Netscape. Il s‟agit de la liste de tous les plugins installés. Il est aussi rattaché à l‟objet navigator. h. L’objet frames Il s‟agit d‟un tableau contenant toutes les frames déclarés dans la page courante. Il ne possède ni propriétés ni méthodes. Syntaxe :

Exemple1 : (Créer les deux pages suivantes)

Fichier test.htm : Ceci est un test

Dans la page de départ (depart.html) : Page de départ

Exemple2 : (Fermeture automatique d’une fenêtre après x secondes) Ceci est un

document.frames[i] ;

document.applets[i] ;

document.images[i] ;

document.anchors[i] ;

test Dans la page de départ : Page de départ (sans espaces ni passage à la ligne)

Constatation: Avec ce script, sans intervention de l'utilisateur, la nouvelle fenêtre se ferme de façon automatique après 4 secondes. En cliquant sur le bouton, l'utilisateur interrompt prématurément le compteur et ferme la fenêtre. Avec ce système, on est certain que le nouvelle fenêtre sera fermée. Exemple3 : (Ouverture en cliquant sur un lien) Dans la page de départ, on a : lien de test

Exemple4 : (On passe par l'ouverture d’une nouvelle fenêtre par l'appel d'une fonction.)

Page de départ

Exemple5 : (Ouverture par un bouton )