Le langage Javascript pour le web et application au DHTML

Présentation au sujet: "Le langage Javascript pour le web et application au DHTML"— Transcription de la présentation:

1 Le langage Javascript pour le web et application au DHTML
Calques et Styles en DHTML 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

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 <div>, et les attributs id et style avec, si l'on souhaite gérer son positionnement dynamiquement, la propriété de position absolue ou relative, : <div id="identificateurID" style="position:absolute;…">…</div> <div id="lId" class="laClasse">…<div> Dans ce dernier cas, une classe aura été définie par la balise <style> … </style>: <style> .laClasse{ position:absolute; … } </style> Sous MIE, ce calque appartient à la collection de tous les objets all[ ], et peut être accédé grâce à son identificateur (valeur de l’attribut 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 lObj2=document.getElementById(leNom); Référence par l'identificateur Référence par une variable

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 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 Le langage Javascript pour le web et application au DHTML
Calques et Styles en DHTML 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

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 <DIV>, aussi bien pour du texte que du code HTML. Soit un calque: <div id="leDiv" style="position:absolute;…">…</div> 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='<table width="300"><tr><td><span style="color:blue;text-decoration:line-through">cellule 1</span></td><td>cellule 2</td></tr></table>' 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 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 1er 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 lObj=document.layers['compteur']; alert(lObj); }
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'); Solution function comptage() { compte++; codeHTML="Vous avez déjà cliquez "+compte+" fois"; if ( NS4 ) { lObj.document.write(codeHTML); lObj.document.close() } else { lObj.innerHTML=codeHTML; Code JS <body onload="init()"> <div id="compteur" style="position:absolute;top:50px">vous avez cliquez 0 fois</div> <form name="leForm"> <input type="button" value="click!" onclick="comptage()"> </form> </body> Code HTML 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...

9 Le langage Javascript pour le web et application au DHTML
Calques et Styles en DHTML 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

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 <balise>…</balise>, sous MIE et Netscape 6, elle ne permet d'écrire un contenu HTML que pour certaines balise! En l'occurrence, pour les balises <table>…</table> et <tr>…</tr>, 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 <td>…</td> où la propriété innerHTML peut être lue et écrite. Rappel de la structure HTML d'un tableau: <table id="laTableID" width="600" cellpadding="0" cellspacing="0" border="1"> <col width="150"><col width="100"><col width="350"> <caption valign="top">Liste des numéros de téléphone</caption> <thead> <tr id="entete"><th>Nom</th><th>Prénom</th><th>Téléphone</th></tr> </thead> <tbody id="mainID"> <tr><td>Christoffel</td><td>Eric</td><td> </td></tr> </tbody> </table> Se documenter sur les balises: (msdn.microsoft.com/library) table thead tbody tfoot caption col colgroup tr td th

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 <tbody> 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. Se documenter sur les collections et méthodes du Table Object Model sur le site msdn.microsoft.com/library 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

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]) <SCRIPT LANGUAGE="JavaScript"> <!-- lesEmployes = new Array(); lesEmployes[0]=new employe("Faerber","Richard"," "); lesEmployes[1]=new employe("Christoffel","Eric"," "); function employe(leNom,lePrenom,leTelephone) { this.nom = leNom; this.prenom = lePrenom; this.telephone = leTelephone; } 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); nbEmploye=lesEmployes.length; for ( var i=0; i<nbEmploye; i++ ) { laLigne=document.all['mainID'].insertRow(); laCell=laLigne.insertCell(); laCell.innerHTML=lesEmployes[i].nom; laLigne.insertCell().innerHTML=lesEmployes[i].prenom; laLigne.insertCell().innerHTML=lesEmployes[i].telephone; } //--> </SCRIPT>

13 Le langage Javascript pour le web et application au DHTML
Calques et Styles en DHTML 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

14 L'objet style du calque version MIE et Netscape 6, propriétés
Il est illusoire de vouloir gérer dynamiquement les styles sous Netscape 4.7, sauf à réécrire le contenu de calques par la méthode document.write(), suivie de document.close(). Sous MIE et Netscape 6, cela devient un jeu d'enfant! Pour un objet d'indentificateur donné, lID par ex., l'objet style est une propriété de l'objet: document.all['lID'] ou document.getElementById('lID'), suivant le navigateur. Une propriété de style est lue ou écrite suivant: laValeur=document.all['lID'].style.propriété; document.all['lID'].style.propriété="valeur de la propriété"; laValeur=document.getElementById['lID'].style.propriété; document. getElementById['lID'].style.propriété="valeur de la propriété"; Pour une gestion dynamique du style de mise en forme du texte (taille police, choix police, alignement etc…), il n'est pas obligatoire d'avoir un style de position absolu ou relatif! Distinguons les étapes d'écriture et de lecture dynamique des styles. la valeur est une chaîne de texte! Ecriture de la propriété de style Aucune ambiguïté, soit un calque défini par les attributs class ou style: <style> .laClasse{color:red;}</style> <div id="lID" class="laClasse">le texte</div> ou <div id="lID" style="color:red">le texte</div> Toute propriété peut être écrite: document.getElementById('lID').style.color="blue"; document.getElementById('lID').style.backgroundColor="yellow";

15 Lecture de la propriété de style
Considérons un calque <div>. Il faut distinguer 2 cas, suivant que le style ait été déclaré a) par l'attribut style de la balise HTML <div>, ou b) via une class par l'attribut class. Dans ce dernier cas, la class est définie dans l'entête du document par une balise HTML <style>…</style>. Cas a) <div id="lID" style="color:red">le texte</div> la lecture d'une propriété de style retournera une valeur, uniquement si la propriété est explicitement citée dans l'attribut style: laValeur=document.getElementById('lID').style.color; // retournera red laValeur=document.getElementById('lID').style.backgroundColor; // ne retourne rien! En revanche, l'objet currentStyle (objet en lecture seule), retourne une valeur dans tous les cas, sous MIE uniquement! laValeur=document.getElementById('lID').currentStyle.color; // retourne red laValeur=document.getElementById('lID').currentStyle.backgroundColor; // retourne transparent Cas b) <style> .laClasse{color:red;}</style> <div id="lID" class="laClasse">le texte</div> la lecture d'une propriété de style ne retourne aucune valeur: laValeur=document.getElementById('lID').style.color; // ne retourne rien! laValeur=document.getElementById('lID').style.backgroundColor; // ne retourne rien! A nouveau, l'objet currentStyle, retourne une valeur dans tous les cas, sous MIE uniquement! laValeur=document.getElementById('lID').currentStyle.color; // retourne red laValeur=document.getElementById('lID').currentStyle.backgroundColor; // retourne transparent

16 Propriété de l'objet Style
Correspondance entre les propriétés de style définies dans une balise HTML et les propriétés de l'objet Style en javascript Syntaxe dans une balise HTML: <balise id="nom_objet" attribut1="valeur1" ... style="propriété1:valeur1;…"> Propriétés de style Propriété de l'objet Style Syntaxe javascript: document.all['nom_objet'].style.propriété="texte fixant la propriété" document.getElementById('nom_objet'). style.propriété="texte fixant la propriété"

17 L'objet style du calque version MIE et Netscape 6, exercices
Par défaut, les liens hypertextes sont de couleur bleue et soulignés, ce qui peut ne pas correspondre à la charte graphique du site! Il est alors nécessaire de forcer un style dans la balise HTML <a href…>…</a>, en précisant, entre autres, les propriétés color et text-decoration. Soit par ex. une définition de style dans le code HTML: <style > .leLienOut{ color:green; text-decoration:none; } .leLienOver{ color:red; </style> Le lien dans la partie BODY du document HTML a été défini ainsi: <a href="#" onmouseover="lien('leLien',true)" onmouseout="lien('leLien',false)" class="leLienOut" id="leLien">texte du lien</a> Un identificateur est défini pour le lien. La classe 'leLienOut' force un nouveau style pour le lien. De plus, afin de distinguer le lien, nous détectons les événements 'souris au-dessus' et 'souris en dehors', événements auxquels sont associés la fonction lien(identificateur, booléen), d'argument l'identificateur du lien et un booléen true/false suivant le cas souris au-dessus ou en-dehors. Problème: écrire la fonction qui permet de modifier dynamiquement le style du lien de leLienOut à leLienOver, est inversement: accéder l'objet. Lequel? quelle propriété permet de changer de style, de class? style du lien dans le cas souris en-dehors style du lien dans le cas souris au-dessus

18 Solution réception des arguments d'appels function lien(lID,over) { if(document.getElementById){ // test des navigateurs MIE 5.x et N6 lObj2=document.getElementById(lID); (over) ? lObj2.className="leLienOver" : lObj2.className="leLienOut" } // fin test if } // fin fonction Niveau Expert: a) s'affranchir du passage en argument de l'identificateur de l'objet, et dans la fonction de la recherche de l'objet par la méthode getElementById(). Développer une solution avec l'objet this. Discuter l'intérêt de cette dernière solution. b) sous MIE 5.x, on se propose, plutôt que d'appeler une nouvelle class, de changer dynamiquement la propriété color (ou tout autre) de cette class. Afin de proposer une solution, rechercher les propriétés et informations sur les collections styleSheets[ ], rules[ ] et finalement l'objet style et ses propriétés. Combiner ces objets dans une hiérarchie adéquate. c) trouver une solution comparable sous N6 (il n'est pas sûr qu'elle existe!) d) il semblerait qu'il n'existe aucune solution simple et utile/efficace sous Netscape 4.x, en effet Netscape 4.x ne supporte pas les feuilles de style dynamiques. Mais sait-on jamais… qu'un expert… e) étudier la propriété cssText de l'objet style sous MIE. Se documenter sur internet, fichier d'aide, puis programmer un exemple. g) Proposer une solution uniquement basée sur les feuilles de style, sans javascript et DHTML!

19

20

21

22