SELFHTML/Quickbar
HTML dynamique
Les apports de Microsoft et de Netscape SELFHTML/Quickbar
HTML dynamique
Les apports de Microsoft et de Netscape
Feuilles de style CSS et ScriptsVous pouvez accéder avec HTML dynamique et selon la syntaxe Microsoft à toutes les définitions de style des différents éléments HTML. Ainsi vous pouvez modifier les éléments pendant leur affichage pratiquement à souhait. Si par exemple un titre N°2 a au début une taille de police de 14 points, vous pouvez changer celle-ci de façon dynamique en 42 points. "De façon dynamique " signifie ici: lors d'un évènement utilisateur comme un cliquement de souris sur le titre ou automatiquement à retardement, par exemple après trois secondes.
Outre la taille de police, vous pouvez également mettre de façon dynamique
une couleur d'arrière plan, un cadre autour d'un élément, laisser voyager
l'élément sur l'écran et bien plus encore. La condition préalable à ces
effets sont chez l'Explorer Internet MS les
feuilles
de style CSS. Vous devez connaître la syntaxe et les possibilités des
mentions de feuilles de style.
Vous modifiez les définitions de style d'un élément HTML en accédant à
l'élément à l'aide d'un langage script et en modifiant avec de nouvelles
mentions de feuilles de style l'apparence de l'élément. Pour cela vous devez
avoir des connaissances dans un langage script comme JavaScript.
Sans de telles connaissances, vous ne comprendrez que difficilement les
exemples suivants.
<h1 id="textechange" style="font-size:14pt">mouche du coche</h1>
<script language="JScript">
<!--
function reduit()
{
document.all.textechange.style.fontSize = "14pt";
window.setTimeout("agrandit()",1000);
}
function agrandit()
{
document.all.textechange.style.fontSize = "42pt";
window.setTimeout("reduit()",1000);
}
reduit();
//-->
</script>
|
L'exemple affiche dans un premier temps un 
titre
N°1 (<h1>...</h1>). À l'aide de l'attribut style=,
le titre se voit affecter des mentions
de feuilles de style. Dans l'exemple, la taille de police est fixée à
14 points (font-size:14pt).
L'exemple global fait en sorte que la taille du titre passe de 14 points à
42 points et inversement une fois par seconde. Pour cette modification dynamique,
un script est nécessaire. Dans l'exemple ci-dessus un passage script est
défini avec <script language="JScript">...</script>.
À l'intérieur de ce passage ont été définies deux fonctions.
La première fonction - reduit() - modifie la taille de
police du titre à 14 points, la deuxième fonction - agrandit() -
à 42 points. Après une seconde (1000 millièmes de seconde) chacune des deux
fonctions appelle l'autre. C'est ainsi qu'est obtenu l'effet de changement.
Pour comprendre la modification dynamique de la taille de police, vous devez
considérer les relations suivantes: dans le repère de titre <h1>,
un nom est affecté avec l'attribut id= - à savoir textechange.
Vous pouvez affecter ce nom librement. Il ne doit se composer que de lettres,
de chiffres et/ou de tirets de soulignement "_", et ne doit contenir
aucun espace ou caractère spécial. Dans l'exemple, le script accède avec les
instructions dans lesquelles on trouve document.all.textechange,
exactement à cet élément. Avec l' 
objet
all (document.all), tous les éléments d'un fichier HTML sont
adressés. En faisant suivre l'instruction du nom, c'est exactement l'élément
qui porte ce nom qui est adressé - dans l'exemple textechange.
Derrière suit l'objet style (style), qui est subordonné à l'objet
all. Par l'objet style, vous pouvez noter comme propriété une mention permise de feuilles de style
CSS. Ici sont à respecter les particularités des modes d'écriture des mentions de feuilles de style en JavaScript/JScript.
Tout ceci ne fonctionne pas avec Netscape (Version 4.x). Ici ne sont
abordés que les apports de l'Explorer Internet MS. Si vous préférez
commencer par les apports de Netscape, alors lisez la partie Positionnement dynamique (Netscape).
À la place d'une mention comme:
document.all.textechange.style.fontSize = "42pt";
il suffit aussi de noter la mention abrégée:
textechange.style.fontSize = "42pt";
L'assignation à l'objet All est claire, étant donné qu'un nom sans ambiguïté
(textechange) a été affecté à un élément HTML. C'est pourquoi la première
partie habituelle dans la notation objet des langages script tels JScript ou JavaScript
peut être omise.
|
Le consortium W3 n'a émis aucune règle quant au langage script qui doit être utilisé pour HTML dynamique. C'est pourquoi il règne encore ici quelque confusion.
JavaScript
est le plus utilisé et le plus connu des langages scripts. Il a été introduit
par Netscape. L'Explorer Internet MS interprète JavaScript lui aussi. Ce
faisant, il a pourtant tendance à boitiller derrière Netscape, étant donné
que Netscape possède les licences pour JavaScript et qu'il n'est pas permis à
Microsoft de développer lui-même l'étendue du langage de JavaScript. Avec une
petite ruse, Microsoft s'est libéré de cette situation désagréable: le
langage fut simplement renommé JScript. JScript, c'est JavaScript plus des
extensions de langage spécifiques à Microsoft. JScript contient une quantité d'objets
de méthodes et de propriétés qu'on ne trouve pas dans JavaScript. La plupart
de ces commandes sont conçues pour des extensions de système d'exploitation
locales qui sont nécessaires à l'Explorer Internet MS 4.x sous Windows.
Mais même l' objet
all, qui jusqu'alors n'existait pas dans le JavaScript de Netscape, en
fait partie. Et cet objet est tout à fait primordial pour HTML dynamique dans
l'Explorer Internet MS.
Outre JavaScript et JScript, l'Explorer Internet MS maîtrise encore VBScript. Ce langage est dérivé de Visual Basic (VB). Il n'a cependant pas pu jusqu'alors s'imposer sur le WWW. VBScript a une toute autre syntaxe que JavaScript et JScript. Les objets, propriétés et méthodes sont cependant, pour l'essentiel, les mêmes. Avec VBScript vous pouvez donc aussi écrire du HTML dynamique.
<p>Votre navigateur maîtrise les langages script suivants:</p>
<ul>
<script language="JavaScript">
<!--
document.write("<li>JavaScript");
//-->
</script>
<script language="JScript">
<!--
document.write("<li>JScript");
//-->
</script>
<script language="VBScript">
<!--
document.write "<li>VBScript"
//-->
</script>
</ul>
|
L'exemple ci-dessus n'est pas du HTML dynamique au sens propre du terme. Il doit démontrer en fin de compte comment vous pouvez utiliser différents langages Script et quel effet cela a sur le navigateur WWW. Dans l'exemple est définie une liste énumérative (<ul>...</ul>) en HTML. Dans cette liste sont définis trois passages script: un avec JavaScript (<script language="JavaScript">), un avec JScript (<script language="JScript">) et un avec VBScript <script language="VBScript">. Chacun de ces trois passages écrit à l'aide d'une instruction document.write (cette commande est identique pour les trois langages) un point de la liste énumérative. Étant donné qu'un navigateur WWW n'exécute que les passages scripts dont il maîtrise le langage, figurent à la fin dans la liste exactement les langages scripts que connaît le navigateur WWW utilisé.
Si vous voulez empêcher Netscape d'interprèter le passage,
marquez simplement le passage script avec "JScript". L'Explorer Internet MS 4.x
quant à lui ne prend pas mal si vous marquez un passage avec "JavaScript"
en y utilisant des objets, méthodes et propriétés qui n'existent jusque là
qu'en JScript. Si vous marquez un passage script avec "JavaScript"
et y utilisez des extensions JScript spécifiques à Microsoft comme l'objet all,
vous devez toujours faire dépendre l'exécution des instructions
correspondantes d'une requête. Lisez à ce sujet Demandes si des objets peuvent être adressés en JavaScript.
|
|
Modes d'écriture des mentions de feuilles de style en JavaScript/JScriptSi vous utilisez des mentions de feuilles de style dans des langages scripts, vous devez tenir compte de la syntaxe du langage script.
Un problème lors du mélange de feuilles de style et de JavaScript ou de
JScript, c'est que beaucoup de mentions de feuilles de style comportent des
traits d'union dans leur nom comme par exemple font-size, margin-top
ou background-color. Si avec de tels noms vous créez en JavaScript ou
en JScript une commande comme:
document.all.Montexte.style.font-size = "24pt";
vous obtiendrez un message d'erreur. La raison en est que les traits d'union ne sont
pas des caractères permis dans les noms (le trait d'union est dans ces langages
l'opérateur pour les soustractions).
Pour éviter ce problème, Microsoft a institué une règle simple. Si dans un script, une mention de feuille de style doit être lue ou modifiée, le trait d'union est omis et la première lettre du mot qui le suit est écrite en majuscules.
<script language="JScript">
<!--
var modus = 1;
function jeutexte()
{
if(modus == 1)
{
document.all.montexte.style.fontSize = "24pt";
modus = 2;
return;
}
if(modus == 2)
{
document.all.montexte.style.padding = "8pt";
document.all.montexte.style.backgroundColor = "#FFFF00";
modus = 3;
return;
}
if(modus == 3)
{
document.all.montexte.style.border = "8pt groove #FFCC33";
document.all.montexte.style.backgroundImage = "url(back.gif)";
modus = 0;
return;
}
if(modus == 0)
{
document.all.montexte.style.fontSize = "12pt";
document.all.montexte.style.padding = "0pt";
document.all.montexte.style.backgroundColor = "#FFFFFF";
document.all.montexte.style.border = "none";
document.all.montexte.style.backgroundImage = "none";
modus = 1;
return;
}
}
//-->
</script>
<p id="montexte" style="font-size:12pt; background-color:#FFFFFF; padding:0pt; border:none;
background-image:none; cursor:hand" onClick="jeutexte()">Cliquez sur ce texte</p>
|
Dans l'exemple est défini en dernier lieu un paragraphe avec avec différentes mentions de feuilles de style. Certaines d'entre elles contiennent des traits d'union comme font-size, background-color et background-image. Dans le script qui est noté au dessus du paragraphe de texte, ces mentions de feuilles de style et d'autres sont modifiées de façon dynamique. Vous pouvez reconnaître que font-size devient fontSize, background-color devient backgroundColor et background-image devient backgroundImage - conformément à la règle.
Si à l'intérieur d'un script vous voulez affecter une nouvelle valeur à une propriété de feuilles de style, vous devez d'abord adresser l'objet HTML désiré avec la propriété de style - dans l'exemple ci-dessus donc par exemple: document.all.montexte.style.fontSize. Derrière suit un signe égal pour l'affectation, et ensuite la valeur que vous voulez affecter, donc par exemple: "24pt". Cette valeur doit figurer entre guillemets aussi bien en JavaScript qu'en JScript.
Cette façon d'affecter une valeur à une mention de feuille de style se distingue de la façon dont les valeurs sont affectées lors de définitions de feuilles de style normales: là, vous notez à la place du signe égal un double point - comme dans les définitions de feuilles de style du paragraphe de texte dans l'exemple ci-dessus. Les guillemets n'y sont pas nécessaires.
Le script de l'exemple modifie le formatage du texte dans le paragraphe de
texte quand l'utilisateur clique sur le texte. À chaque fois que cet
évènement survient, la fonction
jeutexte() définie dans le script est appelée à l'aide de
l' Event-Handler onClick=.
Le script gère une variable définie globalement et nommée modus.
Selon la valeur de cette variable, différentes nouvelles mentions de feuilles
de style sont affectées au texte. La modification dynamique du paragraphe dans
le script est mise en oeuvre par la mention
id="montexte" dans le paragraphe de texte et des
commandes du type document.all.montexte.style.
|
|
L'objet allL'objet all est la clé déterminante dans l'apport de Microsoft au DHTML.
Comme le nom le laisse entendre, chaque repère HTML distinct d'un fichier HTML
peut être adressé par cet objet. L'objet all a quantité de propriétés et
méthodes qui permettent la modification dynamique d'un repère HTML. Toutes les
méthodes et propriétés ne peuvent pas être traitées ici. Voyez pour cela
la référence
objet JavaScript et faites vous une idée des propriétés et des
méthodes de l'objet all.
Nous nous contenterons ici d'un simple exemple supplémentaire pour illustrer la façon d'agir de cet objet.
<html>
<head>
<script language="JScript">
<!--
nomjour =
new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");
function afficheure()
{
var maintenant = new Date();
var jour = maintenant.getDate();
var mois = maintenant.getMonth() + 1;
var an = maintenant.getYear();
var heure = maintenant.getHours();
var minutes = maintenant.getMinutes();
var secondes = maintenant.getSeconds();
var joursem = maintenant.getDay();
var jourprec = ((jour < 10) ? "0" : "/");
var moisprec = ((mois < 10) ? "0" : "/");
var heureprec = ((heure < 10) ? "0" : "");
var Vormin = ((minutes < 10) ? ":0" : ":");
var secprec = ((secondes < 10) ? ":0" : ":");
var Datum = jourprec + jour + "/" + moisprec + mois + "/" + an;
var heures = heureprec + heure + Vormin + minutes + secprec + secondes;
document.all.temps.innerHTML = Datum + " (" + nomjour[joursem] + ")<br>" + heures;
window.setTimeout("afficheure()",1000);
}
// -->
</script>
</head>
<body bgcolor=#FFFFFF>
<p id="temps" style="font-family:Verdana; font-size:24pt;
font-weight:bold; color:#CC00CC"></p>
<script language="JScript">
<!--
window.setTimeout("afficheure()",1000);
// -->
</script>
</body>
</html>
|
L'exemple représente une horloge complète qui tourne, avec la date. Pour cela est défini un paragraphe vide avec <p>...</p>. Les mentions de feuilles de style servent à formater le paragraphe comme désiré. Bien que dans un premier temps le paragraphe ne contienne pas de texte, il servira dans le déroulement du script comme conteneur ou réservoir pour le texte affiché avec la date et l'heure.
Le script du haut recherche la date et l'heure et les formate pour un affichage propre et habituel au pays. La chaîne de caractères qui doit être affichée est finalement affectée à la propriété d'objet document.all.temps.innerHTML. temps est la référence au nom qui a été attribué avec id= lors de la définition du paragraphe. Avec la propriété d'objet innerHTML, vous pouvez remplacer de façon dynamique tout le contenu d'un élément, ici celui de l'élément <p>...</p>. Étant donné que la fonction s'appelle elle-même toutes les secondes pour l'affichage de l'heure, sera écrit chaque seconde un nouveau contenu dans le repère <p> avec l' id="temps". C'est par ce moyen qu'on a l'impression d'une horloge qui tourne.
Il y a d'autres possibilités puissantes de l'objet all. Elles sont décrites
dans la référence objet JavaScript à l'objet all.
Ici encore seulement quelques suites d'instructions typiques:
Supposons que vous ayez l'élément HTML suivant, un simple paragraphe de
texte:
<p id="letexte">Ceci est le texte d'un paragraphe de texte</p>
Ensuite vous pouvez par exemple provoquer les modifications dynamiques suivantes:
Avec document.all.letexte.innerHTML = "<b>nouveau
texte</b> dans le même paragraphe"; vous modifiez le contenu
du paragraphe de texte et pouvez même utiliser en même temps des repères
HTML pour le formatage.
Avec document.all.letexte.outerHTML = "<h1>" +
document.all.letexte.innerHTML + "</h1>";
vous transformez le paragraphe de texte en titre n° 1.
Avec document.all.letexte.className = "important";
vous affectez au paragraphe une classe de feuilles de style nommée important.
Si vous avez défini une telle classe, le paragraphe adoptera toutes les
mentions de feuilles de style définies dans la classe (Lisez aussi à ce propos
la partie définir
des sous-classes de repères HTML).
|
|
Event-Handler et l'objet EventUne condition préalable pour HTML dynamique est dans de nombreux cas
l'interaction entre l'utilisateur et le fichier HTML affiché. Le fichier
affiché peut réagir à des évènements utilisateur comme des cliquements de
souris ou touche clavier appuyée et modifier de façon dynamique les
éléments suite à ces évènements. Pour ce faire, il existe les Event-Handler
et aussi un objet Event. Toutes les méthodes et propriétés de l'objet
Event et tous les différents Event-Handler ne peuvent être traités ici.
Pour plus d'informations, voyez dans la documentation JavaScript les Event-Handler
ainsi que la référence de l'objet event,
et faites vous ainsi une idée sur les possibilités offertes. Nous nous contenterons ici d'un simple exemple
supplémentaire pour illustrer la façon d'agir.
<html>
<head>
<script language="JScript">
<!--
function SetPos()
{
document.all.sauteur.style.left = window.event.x;
document.all.sauteur.style.top = window.event.y;
}
// -->
</script>
</head>
<body bgcolor=#FFFFFF onClick="SetPos()">
<div id="sauteur" style="position:absolute; top:100px; left:100px; width:200px;
height:100px; font-size:16pt; background-color:#000066; color:#FFFF00; padding:1cm;">
Cliquez quelque part avec la souris!
</div>
</body>
</html>
|
L'exemple ci-dessus définit un passage avec <div>...</div>. Différentes mentions de feuilles de style dans le repère d'ouverture <div> font en sorte que le passage soit bien visible et positionné à l'écran de façon absolue. Si l'utilisateur clique pendant l'affichage quelque part dans la fenêtre d'affichage du navigateur, le passage défini <div> est repositionné, à savoir de telle façon que le coin en haut et à gauche du passage se trouve exactement à l'endroit ou l'utilisateur a cliqué.
Pour que cela soit possible, tout le document doit réagir immédiatement quand
l'utilisateur clique quelque part avec le souris. À cet effet est noté dans le
repère d'ouverture <body> l'Event-Handler onClick=.
À chaque cliquement de souris dans la fenêtre d'affichage la fonction
SetPos(), notée dans le passage script, est appelée. Cette fonction fixe
les nouvelles valeurs pour le coin supérieur gauche du passage <div>.
La référence en est le nom ("sauteur"), qui a été
affecté dans le repère <div> avec id=. Avec la
commande document.all.sauteur.style.left est fixée la nouvelle
position de départ à gauche, avec document.all.sauteur.style.top la
nouvelle position de départ en haut. La nouvelle valeur pour la gauche est
livrée par la propriété x de l'objet window.event, la
valeur pour le haut par la propriété y de cet objet. Le passage <div>
est ainsi repositionné.
L'objet Event détient en permanence, dans ses propriétés objet, toutes les activités significatives de l'utilisateur comme la position de la souris, les évènements clavier, les cliquements de souris, les touches souris appuyées etc. Sur un simple appel de la propriété du type window.event.[propriete], vous pouvez à tout moment capter les évènements actuels. Le captage s'obtient par la notation d' Event-Handler. Également important pour le captage: l'endroit auquel vous captez l'évènement, c'est à dire, à quel endroit vous notez l' Event-Handler. Ainsi vous pourriez aussi bien, dans l'exemple ci-dessus, noter l'Event-Handler onClick= dans le repère d'ouverture <div>. Dans ce cas, les instructions ne seraient exécutées que si le cliquement survenait dans ce passage <div>.
Un sous-objet important de l'objet Event est l'objet pour l'élément cliqué (srcElement). Ainsi vous pouvez, avec window.event.srcElement.tagName, rechercher quel repère HTML est concerné par l'évènement utilisateur actuel. Vous pouvez alors réagir en conséquence dans vos scripts.
Il n'y a pas que l' Event-Handler onClick=, mais beaucoup d'autres. Si par exemple vous notez dans le repère d'ouverture <body> l'instruction onkeydown="alert(window.event.keyCode)", sera sortie à chaque touche appuyée sa valeur de signe ASCII sous forme décimale. Car dans la propriété keyCode de l'objet Event est retenue la valeur de la touche dés qu'un utilisateur appuie sur une touche.
Microsoft propose encore une syntaxe spéciale que vous pouvez utiliser de la même façon pour l'exécution de scripts dépendant d'évènements:
<script for=document event="onkeydown()" language="JScript"> if(event.keyCode == 32) window.location.href="fichier2.htm"; </script>
Avec une telle instruction dans le repère d'ouverture du script, ce dernier n'est exécuté que si l'évènement mentionné (Event) se produit. Dans l'exemple il est fait en sorte que le navigateur saute à un autre fichier si on appuie sur la barre d'espacement (elle a le code clavier 32).
|
|
Héritage chez les Events (Event-Bubbling)Les évènements utilisateurs (Events) survenant pendant l'affichage d'une page WWW sont hérités, chez l'Explorer Internet MS, de "l'intérieur vers l'extérieur". Si l'utilisateur par exemple clique sur un texte marqué avec <b>...</b> en caractères gras situé dans un paragraphe de texte défini avec <p>...</p> le cliquement ne concerne dans un premier temps que le texte en caractères gras. Supposons que le paragraphe de texte comprenne dans son repère d'ouverture <p> un Event-Handler onClick=: celui-ci ne deviendrait pas actif, étant donné que le cliquement ne concerne que le texte marqué en caractères gras situé dans le paragraphe. Et comme le repère <b> ne contient aucun Event-Handler, le cliquement de souris passerait inaperçu, bien qu'il eût lieu dans le paragraphe qui contient l'Event-Handler correpondant à un cliquement de souris. L'effet Bubble (littéralement: effet de bulles) fait en sorte que l'évènement (le cliquement de souris) soit transmis à l'élément immédiatement supérieur dans la structure arborescente du fichier HTML. Par ce moyen, l'évènement arrive au repère <p>, qui traite l'évènement. Si le repère <p> ne contenait pas non plus d' Event-Handler onClick=, alors l'effet de bulles transmettrait l'évènement à l'élément immédiatement supérieur, donc par exemple un repère <div> dans lequel se trouverait le paragraphe de texte, ou au repère <body>. Si un Event-Handler qui réagisse au cliquement de souris n'est noté nulle part, rien ne se passe tout simplement.
<html>
<head>
<script language="JScript">
<!--
function Handle_Click()
{
document.all.Info.innerHTML = "Le passage que vous avez cliqué est marqué avec <"
+ window.event.srcElement.tagName + "> il a l'id <i>"
+ window.event.srcElement.id +
"</i>. L'évènement a été pourtant transmis au repère body.";
}
// -->
</script>
</head>
<body bgcolor=#FFFFFF onClick="Handle_Click()">
<div id="contenu">
Un peu de texte. Cliquez-y si vous voulez
<p id="Text_1">un <i id="texte_i">paragraphe de texte</i>. cliquez-y</p>
<p id="Text_2">un <u id="texte_u">autre paragraphe de texte </u>. cliquez-y</p>
<p id="Text_3">encore un <b id="texte_g">paragraphe de texte</b>. cliquez-y</p>
<p id="Text_4">un dernier <tt id="texte_tt">paragraphe</tt>. cliquez-y</p>
</div>
<p id="Info">Ici apparaissent les informations sur le cliquement</p>
</body>
</html>
|
Dans l'exemple sont définis différents textes avec des marquages HTML
différents. Chaque élément s'est vu affecter un nom (id=). Le plus
bas des paragraphe de texte avec id="Info" sert à
sortir des informations de façon dynamique sur l'élément que l'utilisateur a
cliqué. Chaque fois que l'utilisateur clique un élément, la
fonction
Handle_Click(),
définie dans un passage JavaScript de l'entête de fichier est appelée.
Chaque fois est sorti, dans le paragraphe "Info", quel
repère HTML a été cliqué et quel id lui
a été attribuée. À vrai dire, le
cliquement ne concerne que l'élément cliqué. Pourtant, aucun de ces
éléments n'a d' Event-Handler onClick= qui capte un cliquement de
souris et exécute du code de script. La raison pour laquelle le code du script
est malgré tout exécuté à chaque cliquement de souris est dûe à l'effet
de bulles. L'évènement "cliquement de souris" est à chaque fois transmis plus loin
"vers l'extérieur" - pour aboutir finalement au repère <body>,
qui contient un Event-Handler onClick=.
L'effet de bulles peut être mis hors service s'il n'est pas
souhaité. Pour cela, vous devez noter dans un passage JScript/JavaScript
l'instruction:
window.event.cancelBubble = true;
|
| |
après: |
Liaison de données (Microsoft)
|
avant: |
Généralités sur HTML dynamique
|
SELFHTML/Quickbar
HTML dynamique
Les apports de Microsoft et de Netscape
Serge François, 13405@free.fr
