SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML| SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML |
Alors que l'Explorer Internet MS introduisait en 1997 un concept révolutionnaire avec des possibilités tout à fait nouvelles de l'accès dynamique à une page Web, la plupart des développeurs Web étaient encore enferrés dans l'apport JavaScript de Netscape et ne mesurèrent pas vraiment la portée su nouveau modèle. Le modèle proposait rien de moins que la modification à volonté d'éléments HTML y compris leurs propriétés de feuilles de style, leur échange, leur création. leur effacement etc... Pour cela le navigateur réagissait comme un logiciel de traitement de texte pendant le traitement. Quand des contenus étaient insérés de façon dynamique, tout ce qui suivait était repositionné automatiquement. Bien que l'on soit en droit d'attendre au fond cette possibilité dans un logiciel professionnel - si on se base sur les logiciels de traitement de texte modernes - il n'en allait pas ainsi à l'époque. Le navigateur Netscape qui dominait encore en 1997 n'était pas en mesure de faire ceci:: vraiment reconstruire complètement une page en raison de modifications dynamiques. Même les développeurs Web restèrent longtemps sans comprendre qu'il était pourtant plus simple et plus logique de modifier des éléments HTML de son choix, ainsi que leurs propriété et leurs contenus plutôt que de manipuler avec la technique de mise en page compliquée de Netscape.
Le modèle Microsoft montrait donc la voie à suivre. Mais il était spécifique à la marque, une poussée en avant de la firme dans les nouveaux mondes sans accord avec un organisme indépendant de normalisation. Microsoft se comporta à l'époque en effet, de façon incroyablement agressive et essayait de rattraper le temps perdu des années précédentes. Bill Gates avait encore déclaré pendant les deux années qui précèdent qu'Internet était négligeable et sans importance pour Microsoft. La tentative de s'attribuer seul la part du lion avec une politique commerciale agressive, ne réussit heureusement qu'en partie. Certes l'Explorer Internet conquérait mois après mois plus de parts de marché des navigateurs et est devenu entre-temps et est devenu depuis longtemps le navigateur le plus largement répandu. Pourtant la tentative de Microsoft d'imposer ses propres langages, formats et techniques de programmation, échoua. Sur ce point la communauté du Web se montra chatouilleuse. On avait reconnu que le logiciel rend avant tout dépendant quand il impose ses formats de fichiers.
Le modèle DHTML de Microsoft était donc une importante pierre posée sur la route du 
modèle DOM à recommander aujourd'hui. Le modèle DOM diffère cependant de l'apport Microsoft en ce sens qu'il n'est pas limité au seul HTML mais qu'il couvre tous les langages de marquage à repères compatibles XML. L'apport Microsoft n'a plus d'importance, si on le considère aujourd'hui, que si vous voulez créer des pages Web dynamiques qui doivent également pouvoir être représentées par l'Explorer Internet 4.x. Il est certain que la part du marché des navigateurs de ce dernier disparaît chaque jour davantage par rapport à celle des versions plus récentes qui depuis la version 5 supportent le modèle DOM, la conception Web doit néanmoins, quand c'est possible, tenir compte des versions de navigateur plus anciennes.
  |
Les langages scripts: JavaScript, JScript et VBScriptIl n'y a en fin de compte aucune directive prescrivant le langage script à utiliser pour HTML dynamique. C'est la raison pour laquelle règne ici encore quelque confusion.
JavaScript est toutefois et sans conteste le langage script le plus utilisé et le plus connu. Il a été introduit par Netscape. L'Explorer Internet MS interprète également JavaScript. Ici pourtant, il claudique toujours un peu 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.
<html><head><title>Test</title> </head><body> <p>Votre navigateur maîtrise les langages script suivants:<br> <script language="JavaScript" type="text/javascript"> <!-- document.write(<br>JavaScript"); //--> </script> <script language="JScript" type="text/jscript"> <!-- document.write(<br>JScript"); //--> </script> <script language="VBScript" type="text/vbscript"> <!-- document.write "<br>VBScript" //--> </script> </p> </body></html> |
L'exemple ci-dessus n'est pas du HTML dynamique au sens strict du terme. Il doit simplement démontrer comment mettre en œuvre différents langages script et quel en est l'effet sur le navigateur WWW. Dans l'exemple sont définis trois passages script: un avec JavaScript (<script language="JavaScript" type="text/javascript">), un avec JScript (<script language="JScript" type="text/jscript">) et un avec VBScript <script language="VBScript" type="text/vbscript">. Chacun des trois passages écrit à l'aide de la commande document.write (cette commande est la même dans les trois langages) une ligne dans le document . Étant donné qu'un navigateur n'exécute que les passages scripts dont il connaît le langage, figurent à la fin sur la page, exactement les langages script connus par 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 le 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 sur l'existence d'un objet en JavaScript.
Dans les navigateurs modernes, il suffit en principe de mentionner la propriété type=. Les navigateurs plus anciens et Opera 5.12 ont toutefois besoin impérativement de l'attribut language=, pour exclure le passage script du traitement.
|
|
L'objet allL'objet all est la pierre angulaire de l'apport DHTML de Microsoft. Comme le nom le laisse déjà entendre, il est possible d'adresser par cet objet chaque élément HTML distinct d'un fichier HTML. L'objet all a quantité de propriétés et méthodes qui permettent la modification dynamique d'un élément HTML. Toutes les méthodes et propriétés ne peuvent pas être traitées ici. Consultez pour cela la référence objet JavaScript et récapitulez les propriétés et les méthodes de l'objet all. Un autre exemple doit mettre ici en lumière la façon d'agir de cet objet.
<html>
<head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
var jour_semaine =
new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
function affichage_date_heure()
{
var maintenant = new Date();
var jour = maintenant.getDate();
var mois = maintenant.getMonth() + 1;
var an = maintenant.getYear();
var heures = maintenant.getHours();
var minutes = maintenant.getMinutes();
var secondes = maintenant.getSeconds();
var jour_sem = maintenant.getDay();
var jour_prec = ((jour < 10) ? "0" : "/");
var mois_prec = ((mois < 10) ? ".0" : "/");
var heure_prec = ((heures < 10) ? "0" : "");
var minutes_prec = ((minutes < 10) ? ":0" : ":");
var secondes_prec = ((secondes < 10) ? ":0" : ":");
var Datum = jour_prec + jour + mois_prec + mois + "." + an;
var heure = heure_prec + heures + minutes_prec + minutes + secondes_prec + secondes;
document.all.temps.innerHTML = Datum + " (" + jour_semaine[jour_sem] + ")<br>" + heure;
window.setTimeout("affichage_date_heure()",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" type="text/jscript">
<!--
window.setTimeout("affichage_date_heure()",1000);
//-->
</script>
</body>
</html>
|
L'exemple représente une horloge complète qui tourne avec affichage de la date. À cet effet est défini un paragraphe de texte vide avec <p>...</p>. Les mentions de feuilles de style CSS servent à formater le paragraphe de texte selon son gré. Quoique le paragraphe ne contienne tout d'abord aucun texte, il va servir de conteneur au cours du script 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="le_texte">Ceci est le texte d'un paragraphe de texte</p>
Ensuite vous pouvez par exemple provoquer les modifications dynamiques suivantes:
Avec document.all.le_texte.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.le_texte.outerHTML = "<h1>" + document.all.le_texte.innerHTML + "<\/h1>"; vous transformez le paragraphe de texte en titre n° 1.
Avec document.all.le_texte.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 expliquant comment définir des formats pour des classes).
|
|
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 sensiblement les éléments pendant leur affichage. 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 clic 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. .
<html><head><title>Test</title></head><body>
<h1 id="texte_changeant" style="font-size:14pt">Mouche du coche</h1>
<script language="JScript" type="text/jscript">
<!--
function diminue()
{
document.all.texte_changeant.style.fontSize = "14pt";
window.setTimeout("augmente()",1000);
}
function augmente()
{
document.all.texte_changeant.style.fontSize = "42pt";
window.setTimeout("diminue()",1000);
}
diminue();
//-->
</script>
</body></html>
|
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 propriétés de feuilles de style CSS. 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" type="text/jscript">...</script>. À l'intérieur de ce passage ont été définies deux fonctions. La première fonction - diminue() - modifie la taille de police du titre à 14 points, la deuxième fonction - augmente() - à 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 texte_changeant. 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.texte_changeant, 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 texte_changeant. Derrière suit l'objet style (style), qui est subordonné à l'objet all. (Vous trouverez des détails sur cet objet dans la référence JavaScript à l'objet style). 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 qui vont être traitées ci-après.
|
|
Façon d'écrire les propriétés CSS en JavaScript/JScriptQuand 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.mon_texte.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.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
var modus = 1;
function jeu_texte() {
if(modus == 1) {
document.all.mon_texte.style.fontSize = "24pt";
modus = 2;
return;
}
if(modus == 2) {
document.all.mon_texte.style.padding = "8pt";
document.all.mon_texte.style.backgroundColor = "#FFFF00";
modus = 3;
return;
}
if(modus == 3) {
document.all.mon_texte.style.border = "8pt groove #FFCC33";
document.all.mon_texte.style.backgroundImage = "url(back.gif)";
modus = 0;
return;
}
if(modus == 0) {
document.all.mon_texte.style.fontSize = "12pt";
document.all.mon_texte.style.padding = "0pt";
document.all.mon_texte.style.backgroundColor = "#FFFFFF";
document.all.mon_texte.style.border = "none";
document.all.mon_texte.style.backgroundImage = "none";
modus = 1;
return;
}
}
//-->
</script>
</head><body>
<p id="mon_texte" style="font-size:12pt; background-color:#FFFFFF; padding:0pt; border:none; background-image:none; cursor:hand" onClick="jeu_texte()">Cliquez sur ce texte</p>
</body></html>
|
Dans l'exemple est défini en dernier lieu un paragraphe 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.mon_texte.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 jeu_texte() définie dans le script est appelée à l'aide du gestionnaire d'événement 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="mon_texte" dans le paragraphe de texte et des commandes du type document.all.mon_texte.style.
|
|
Gestionnaire d'événement et l'objet EventUne condition préalable importante pour le 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 clics de souris, des touches pressées au clavier en modifiant des éléments de façon dynamique. Pour ce faire, il y a des gestionnaires d'événement et également un objet Event. Toutes les méthodes et propriétés de l'objet Event et tous les différents gestionnaires d'événement ne peuvent pas être traités ici. Consultez pour cela dans la documentation les gestionnaires d'événement ainsi que la référence de l'objet event et récapitulez les différentes possibilités. Un autre exemple doit mettre ici en lumière la façon d'agir de cet objet.
<html><head><title>Test</title>
<script language="JScript" type="text/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 la souris. À cet effet est noté dans le repère d'ouverture <body> le gestionnaire d'événement onClick=. À chaque clic 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 clics de souris, les touches souris appuyées etc... Sur un simple appel de la propriété du type window.event.[propriété], vous pouvez à tout moment capter les événements actuels. Le captage s'obtient par la notation de gestionnaires d'événement. Également important pour le captage: l'endroit auquel vous captez l'événement, c'est à dire, à quel endroit vous notez le gestionnaire d'événement. Ainsi vous pourriez aussi bien, dans l'exemple ci-dessus, noter le gestionnaire d'événement onClick= dans le repère d'ouverture <div>. Dans ce cas, les instructions ne seraient exécutées que si le clic 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 le gestionnaire d'événement 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" type="text/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 événements (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 clic 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 gestionnaire d'événement onClick=: celui-ci ne deviendrait pas actif, étant donné que le clic ne concerne que le texte marqué en caractères gras situé dans le paragraphe . Et comme le repère <b> ne contient aucun gestionnaire d'événement, le clic de souris passerait inaperçu, bien qu'il eût lieu dans le paragraphe qui contient le gestionnaire d'événement correspondant à un clic de souris. L'effet Bubble (littéralement: effet de bulles) fait en sorte que l'événement (le clic 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 de gestionnaire d'événementonClick=, 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 gestionnaire d'événement qui réagisse au clic de souris n'est noté nulle part, rien ne se passe tout simplement.
<html>
<head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
function Handle_Click() {
document.all.Info.innerHTML = "Le passage que vous avez cliqué est marqué avec <" + window.event.srcElement.tagName + "> et 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">
<p id="Text_1">Un <i id="text_i">paragraphe de texte</i>. Cliquez-y</p>
<p id="Text_2">Un <u id="text_u">autre paragraphe</u>. Cliquez-y</p>
<p id="Text_3">Encore un <b id="text_b">paragraphe</b>. Cliquez-y</p>
<p id="Text_4">Et un dernier <tt id="text_tt">paragraphe</tt>. Cliquez-y</p>
</div>
<p id="Info">Ici apparaissent les informations sur les clics</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 paragraphes 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 sur 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 clic ne concerne que l'élément cliqué. Pourtant, aucun de ces éléments n'a de gestionnaire d'événement onClick= qui capte un clic de souris et exécute du code de script. La raison pour laquelle le code du script est malgré tout exécuté à chaque clic de souris est dûe à l'effet de bulles. L'événement "clic de souris" est à chaque fois transmis plus loin "vers l'extérieur" - pour aboutir finalement au repère <body>, qui contient un gestionnaire d'événement 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;
|
| |
 |
L'ancien modèle DHTML de Netscape
|
 |
Le modèle DOM (DOM)
|
| SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
