Le langage Javascript pour le web
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

Plan: PowerPoint PPT Presentation


  • 97 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

Plan:

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Plan

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


Plan

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 leNom="lID";

var lObj2=document.getElementById(leNom);

Référence par l'identificateur

Référence par une variable


Plan

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


Plan

  • 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…


Plan

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


Plan

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).


Plan

  • 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. 2: Etat après un 1er click

fig. : Etat initial

  • 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


Plan

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...


Plan

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


Plan

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>03.90.24.06.35</td></tr>

</tbody>

</table>

Se documenter sur les balises:(msdn.microsoft.com/library)

tablethead

tbody

tfoot

caption

col

colgroup

tr

td

th


Plan

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


Plan

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","03.90.24.57.68");

lesEmployes[1]=new employe("Christoffel","Eric","03.90.24.06.35");

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);

alert(document.all['laTableID'].rows.length);

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>


Plan

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


Plan

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";


Plan

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


Plan

Correspondance entre les propriétés de style définies dans une balise HTMLet 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é"


Plan

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;

  • text-decoration:none;

  • }

  • </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


Plan

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!


  • Login