Wikiversité

« JavaScript/Introduction au DHTML » : différence entre les versions

Navigation interactive dans l’historique
← Modification précédenteModification suivante →
Contenu supprimé Contenu ajouté
VisuelWikicode
(:Julien:) (discussion | contributions)
42 modifications
Aucun résumé des modifications
Ligne 11 :
==Présentation du DHTML==
 
Le DHTML (Dynamic Hypertext Markup Language) est apparu aux alentouralentours des années 1990. Il s'agit en fait de la possibilité de rendre une page HTML interactive et ce grâce au JavaScript. Cependant, le DHTML a un gros défaut : il n'est pas compatible partout et certains navigateurs, trop anciens, ne le reconnaissent pas.
 
==Premier code en DHTML==
Ligne 21 :
</source>
 
Comment dit dans le chapitre '''II'''; il s'agit avant tout d'une hiérarchie entre les éléments et vous allez voir qu'au fûr et à mesureforce de pratiquer le DHTML, on ne s'en rend même plus compte :)
 
==Les évènements==
Les évènements sont de loin la base du DHTML. Sans eux, le DHTML n'aurait plus aucune possibilité...
 
<u>''''''===Qu'est-ce qu'un évènement en DTHML ?''''''</u>===
 
C'est très simple : par exemple lorsque vous cliquez sur un lien, que vous fermez une fenêtre, que vous cliquez sur un bouton ou encore lorsque tout bêtement la page se charge. Toute cette liste (et elle est encore très longue) sont des évènements qu'on peut relever en JavaScript (pour ne pas dire DHTML évidemment).
 
===Traquer un évènement===
Ligne 41 :
{|border="1" align="center" cellpadding="3px" style="border: 1px solid #9c8441;"
|-
| bgcolor="#9c8441" | '''<center>EvènementÉvènement JsJS</center>'''
| bgcolor="#9c8441" | '''<center>Description</center>'''
|-
Ligne 58 :
|<code>onDblClick</code>
|Se déclenche lorsque l'utilisateur double-clique sur l'élément en question.
|-▼
|<code>onKeyUponDragDrop</code>▼
|Se déclenche lorsque l'utilisateur redimensionneglisse laet fenêtredépose actuelle(drag and drop) un objet.▼
|-
|<code>onError</code>
Ligne 67 ⟶ 70 :
|<code>onKeyDown</code>
|Se déclenche lorsque l'utilisateur appuie une touche du clavier (JavaScript 1.2).
▲|-
▲|<code>onKeyUp</code>
|Se déclenche lorsque l'utilisateur relâche une touche du clavier (JavaScript 1.2).▼
|-
|<code>onKeyPress</code>
|Se déclenche lorsque l'utilisateur maintient une touche du clavier enfoncée.
|-▼
|<code>onSelectonKeyUp</code>▼
▲|Se déclenche lorsque l'utilisateur relâche une touche du clavier (JavaScript 1.2).
|-
|<code>onLoad</code>
|Se déclenche lorsque l'utilisateur charge la page.
|-
|<code>onMouseOveronMouseDown</code>
|Se déclenche lorsque l'utilisateur survoleappuie sur un bouton de sa souris au-dessus d'un élément de la page.
|-
|<code>onMouseOut</code>
|Se déclenche lorsque l'utilisateur ne survole plus un élément de la page (JavaScript 1.1).
|-
|<code>onResizeonMouseOver</code>▼
|Se déclenche lorsque l'utilisateur séléctionnesurvole un texte dans un champélément de type text oula textareapage.▼
|-
|<code>onMouseOver</code>
|Se déclenche lorsque l'utilisateur arrête d'appuyer sur un bouton de sa souris au-dessus d'un élément de la page.
|-
|<code>onReset</code>
|Se déclenche lorsque l'utilisateur clique sur un input de type reset (réinitialisation d'un formulaire).
|-
|<code>onResize</code>
|Se déclenche lorsque l'utilisateur redimensionne la fenêtre actuelle.
|-
|<code>onSelect</code>
|Se déclenche lorsque l'utilisateur séléctionne un texte dans un champ de type text ou textarea.
|-
|<code>onSubmit</code>
Ligne 92 ⟶ 107 :
|Se déclenche lorsque l'utilisateur quitte la page actuelle.
|-
▲|<code>onSelect</code>
▲|Se déclenche lorsque l'utilisateur séléctionne un texte dans un champ de type text ou textarea.
▲|-
▲|<code>onResize</code>
▲|Se déclenche lorsque l'utilisateur redimensionne la fenêtre actuelle.
|}
 
Ligne 126 ⟶ 136 :
N'importe quel évènement peut aussi être reconnu "à la volée". C'est-à-dire directement depuis la balise <code><script></code>.
Par exemple, voici un code analogue à l'exemple précédent :
 
 
<source lang="html4strict">
Ligne 150 ⟶ 159 :
 
==Méthodes de caractérisation==
Voici trois méthodes intéressantes pour cibler un élément du [[w:Document Object Model|DOM]] dans votre page Web.
 
* <code>getElementById</code>
Ligne 157 ⟶ 166 :
 
===getElementById===
Cette méthode permet d'accéder aux propriétés d'un élément de votre page (par exemple un lien, une image ou un paragraphe) juste en fournissant l'id de celui-ci,. voyonsVoyons un exemple simple :
 
 
<source lang="html4strict">
Ligne 187 ⟶ 195 :
</source>
 
La propriété <code>innerHTML</code> vous permet d'éditer le contenu de l'élément de la page que vous avez désigné. Cependant, si vous voulez éditer un champ de texte, vous devrez utiliser directement l'attribut <code>value</code> ou encore si vous souhaitez cocher une case, vous utiliserez la directivel'attribut <code>checked</code>.
Vous pouvez absolument toutrécupérer éditerle contenu de toute balise du code HTML avec <code>getElementById</code>. Leet style,en la valeur etmodifier les attributs : style, valeur, etc. Par exemple, pour changer l'image affichée par une balise <code>img</code>, vous n'aurez qu'à utiliser :
 
<source lang="javascript">
Ligne 199 ⟶ 207 :
</source>
 
Donc si vous prenez ce code et ce que vous avez appris sur les évènements vous pouvez aisément faire un système permettant de changer une image au passage de la souris (onmouseoveronMouseOver, onmouseoutonMouseOut)...
 
===getElementsByName===
Cette méthode est semblable à getElementById bien qu'elle soit largement moins utilisée que la première. En fait, celle-ci fonctionne comme getElementById sauf qu'elle se base sur l'attribut <code>name</code> des balises au lieu de se baser sur leur <code>id</code>.
Comme plusieurs éléments de la page Web peuvent avoir la même valeur d'attribut <code>name</code>, la méthode ne retournera pas un seul élément, mais une collection d'éléments sous forme de tableau (array). Ceci même dans le cas où un seul élément porte le nom recherché (tableau avec une seule valeur).
Pour se souvenir de ce comportement, notez bien le "s" de "Elements" dans le nom de la méthode.
Récupérée de « https://fr.wikiversity.org/wiki/JavaScript/Introduction_au_DHTML »