La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1 Plan: Le calque version MIE et Netscape 6 Ecriture dynamique des calques Ecriture dynamique d'un tableau L'objet style du calque version MIE et Netscape.

Présentations similaires


Présentation au sujet: "1 Plan: Le calque version MIE et Netscape 6 Ecriture dynamique des calques Ecriture dynamique d'un tableau L'objet style du calque version MIE et Netscape."— Transcription de la présentation:

1 1 Plan: Le calque version MIE et Netscape 6 Ecriture dynamique des calques Ecriture dynamique d'un tableau L'objet style du calque version MIE et Netscape 6 E. Christoffel MCF, ULP Calques et Styles en DHTML Le langage Javascript pour le web et application au DHTML

2 2 Le calque version MIE et Netscape 6, Balise HTML Les calques sont définis de façon unique sous Netscape 6 et MIE par la balise, et les attributs id et style avec, si l'on souhaite gérer son positionnement dynamiquement, la propriété de position absolue ou relative, : … Dans ce dernier cas, une classe aura été définie par la balise … :.laClasse{ position:absolute; … } Sous MIE, ce calque appartient à la collection de tous les objets all[ ], et peut être accédé grâce à son identificateur (valeur de lattribut id): var lObj1=document.all['identificateurID']; var leNom="lID"; var lObj2=document.all[leNom]; Une méthode, commune à MIE 5.x et Netscape 6, permet d'accéder également au calque à partir de son identificateur: var lObj1=document.getElementById('identificateurID'); var leNom="lID"; var lObj2=document.getElementById(leNom); Référence par l'identificateur Référence par une variable

3 3 Le calque version MIE et Netscape 6, propriétés, méthodes et événements Pour tout calque (ou presque tout objet ayant un identificateur), des propriétés sont lues ou écrites, des méthodes sont appliquées, des événements sont détectés: lObj.propriété lObj.méthode() où la définition de lObj dépend du navigateur: lObj=document.all['nomCalque']; // pour MIE4.x et MIE 5.x lObj=document.getElementById('nomCalque'); // pour N6 et MIE 5.x

4 4 Exercice: créer un document HTML contenant un calque avec un style de positionnement absolu défini via une classe au chargement de la page, exécuter une fonction debut() dans le code javascript, tester le type de navigateur dans la fonction debut(), tester l'ensemble des propriétés de l'objet calque, en fonction du type du navigateur sous MIE, sonder la propriété parentElement, identifier la balise HTML correspondante, puis rechercher pour cette dernière l'élément parent…

5 5 Plan: Le calque version MIE et Netscape 6 Ecriture dynamique des calques Ecriture dynamique d'un tableau L'objet style du calque version MIE et Netscape 6 E. Christoffel MCF, ULP Calques et Styles en DHTML Le langage Javascript pour le web et application au DHTML

6 6 Ecriture dynamique des calques: les méthodes en fonction des navigateurs Il est possible de ré-écrire le contenu des calques, aussi bien sous MIE, que sous Netscape 4.x et Netscape 6. En effet d'une part, l'objet layer (la collection d'objet layers[ ]) est considéré comme un document en soi, est possède donc toutes les propriétés de l'objet document, et notamment les méthodes write() et close(). Ce sont ces méthodes qui seront utilisés pour la modification dynamique du contenu d'un calque défini par la balise, aussi bien pour du texte que du code HTML. Soit un calque: … La seule contrainte est que, sous Netscape 4.x, le calque ait la propriété de style position:absolute ou position:relative! On écrira le code HTML dans une variable chaîne de texte, qui sera appliqué au calque par la méthode write(): var leCodeHTML; leCodeHTML=' cellule 1 cellule 2 ' document.layers['leDiv'].document.write(leCodeHTML); document.layers['leDiv'].document.close(); En conclusion, en prévision d'une modification dynamique d'un calque, celui-ci devra avoir un style avec positionnement relatif ou absolu, et la hiérarchie d'accès devra être maîtrisée (cas de calques imbriqués).

7 7 D'autre part sous MIE et Netscape 6, les calques s'accèdent directement soit par la collection d'objets all[ ] (MIE 4.x et MIE 5.x), soir par la méthode getElementById( ) (MIE 5.x et Netscape 6), sans se préoccuper de la hiérarchie (ou niveau d'imbrication des calques)! La propriété innerHTML, en lecture/écriture, permet d'extraire le code HTML d'un calque, ou de le ré-écrire. L'exemple précédent devient: document.all['leDiv'].innerHTML=leCodeHTML; // pour MIE 4.x et MIE 5.x document.getElementById('leDiv').innerHTML= leCodeHTML; // pour Netscape 6 et MIE 5.x Exercice : étudier les propriétés innerText, outerHTML et outerText, sous MIE uniquement. Réaliser un compteur qui affiche le nombre de click sur un bouton de formulaire, suivant le modèle: fig. : Etat initial fig. 2: Etat après un 1 er click Règles de conception: appeler une fonction init( ) au chargement du document sous MIE et N6, réaliser un calque d'identificateur compteur, avec la remarque de l'état initial (fig. 1) dans un formulaire, insérer un bouton avec le gestionnaire dévénement onclick pointant sur une fonction nommée comptage( ) détecter le type de navigateur et initialiser le compteur compte à 0 programmer la fonction init( ) pour récupérer l'objet calque programmer la fonction comptage( ), à savoir incrémentation du compteur réécriture du code HTML du calque dans une variable (fig. 2) écriture dynamique du calque comment modifier ce script pour le rendre compatible NS4? HTML JS

8 8 Développements possibles: Grâce aux propriétés visibility et innerHTML (ou document.write( )), on peut: s'affranchir des fenêtres de type alert(), s'affranchir d'ouverture de fenêtres annexes du navigateur (window.open(…)) pour l'affichage 'à la volée' de page HTML générée dynamiquement créer un petit site uniquement dans une seule page HTML créer des zones d'aide, ou info-bulle ré-écriture de calques pour la modification dynamique de style sous Netscape 4.x etc... Solution Code JS vous avez cliquez 0 fois Code HTML var IE4=(document.all && !document.getElementById)? true : false var IE5=(document.all && document.getElementById)? true : false var NS4=(document.layers)? true : false var N6=(!document.all && document.getElementById)? true : false var lObj; var compte=0; function init() { if ( NS4 ) { lObj=document.layers['compteur']; alert(lObj); } else if ( IE4 || IE5 ) { lObj=document.all['compteur']; } else { lObj=document.getElementById('compteur'); } function comptage() { compte++; codeHTML="Vous avez déjà cliquez "+compte+" fois"; if ( NS4 ) { lObj.document.write(codeHTML); lObj.document.close() } else { lObj.innerHTML=codeHTML; }

9 9 Plan: Le calque version MIE et Netscape 6 Ecriture dynamique des calques Ecriture dynamique d'un tableau L'objet style du calque version MIE et Netscape 6 E. Christoffel MCF, ULP Calques et Styles en DHTML Le langage Javascript pour le web et application au DHTML

10 10 Ecriture dynamique des tableaux (MIE uniquement): limites de la prorpiété innerHTML Si la propriété innerHTML permet de lire le contenu HTML situé entre les balises …, sous MIE et Netscape 6, elle ne permet d'écrire un contenu HTML que pour certaines balise! En l'occurrence, pour les balises … et …, la propriété innerHTML ne peut être que lue, et non écrite, en raison de la structure complexe d'un tableau HTML: un tableau contient des lignes, où ces dernières contiennent des cellules. Il n'y a que la cellule du tableau … où la propriété innerHTML peut être lue et écrite. Rappel de la structure HTML d'un tableau: Liste des numéros de téléphone Nom Prénom Téléphone Christoffel Eric Se documenter sur les balises: (msdn.microsoft.com/library) table thead tbody tfoot caption col colgroup tr td th

11 11 Le Table Object Model: création et manipulation du contenu d'une table Le Table Object Model (à comparer au Document Object Model, plus général qui répertorie tous les objets dans la fenêtre du navigateur) contient des méthodes et des collections, afin de créer et manipuler le contenu d'un tableau HTML. Les collections: Les principales collections sont rows et cells, qui sont des objets Array sous javascript, et contiennent une référence vers chaque ligne du tableau HTML, et chaque cellule d'une ligne du tableau HTML, respectivement. La syntaxe est la suivante: document.all['tableID'].rows.length document.all['tableID'].rows[0].cells.length document.all['ligneID'].cells.length Exemple (d'après le code HTML de la diapositive précédente): alert(document.all['laTableID'].rows.length); alert(document.all['laTableID'].rows[0].cells.length); alert(document.all['enteteID'].cells.length); Les méthodes: insertRow() et deleteRow() permettent d'insérer ou de supprimer des lignes, uniquement dans le corps d'un tableau HTML, à savoir dans la balise d'un tableau, déjà déclarée dans le code HTML. insertCell() et deleteCell() permettent d'insérer ou de supprimer des cellules dans une ligne de tableau, déclarée dans le code HTML ou créée par la méthode insertRow(). Pour une cellule ainsi créée, la propriété innerHTML permet maintenant d'y écrire du code HTML. Lecture du nombre de ligne d'un tableau Lecture du nombre de cellule d'une ligne donnée Accès directe à une ligne via l'identificateur Se documenter sur les collections et méthodes du Table Object Model sur le site msdn.microsoft.com/library

12 12 Exercices d'application des méthodes insertRow() et insertCell() Du tableau HTML créé précédemment: lire le nombre de ligne lire le nombre de cellule d'une ligne donnée, par différent accès (identificateur du tableau, d'une ligne) Effacer la ligne de données (contenant déjà un nom, prénom et numéro de téléphone) Créer une source de données employé, à l'aide d'un constructeur d'objets personnalisés. Array javascript des employés: lesEmployes, dont chaque élément est un objet personnalisé employe, de propriétés nom, prénom et telephone. Créer une nouvelle ligne du tableau HTML pour chaque employé, contenant trois cellules, et y écrire les données correspondantes Agir sur les propriétés des cellules (align, bgcolor, class et style [voir chapitre suivant]) function init() { alert(document.all['laTableID'].rows.length); alert(document.all['laTableID'].rows[0].cells.length); alert(document.all['enteteID'].cells.length); document.all['laTableID'].deleteRow(1); alert(document.all['laTableID'].rows.length); nbEmploye=lesEmployes.length; for ( var i=0; i

Présentations similaires


Annonces Google