« JavaScript/Introduction au DHTML » : différence entre les versions
Contenu supprimé Contenu ajouté
→getElementsByTagName : mise en page |
Dépeuplement de Catégorie:Pages utilisant des balises source obsolètes |
||
Ligne 16 :
Voici un premier code assez simple à comprendre qui permet de changer la valeur d'un champ de texte :
<
</syntaxhighlight>
Comment dit dans le chapitre '''II'''; il s'agit avant tout d'une hiérarchie entre les éléments et vous allez voir qu’à force de pratiquer DHTML, on ne s'en rend même plus compte :)
Ligne 111 :
Par exemple, si vous voulez dire bonjour au visiteur lorsque celui-ci charge une page de votre site, vous devrez procéder de la sorte :
<
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Ligne 126 :
</body>
</html>
</syntaxhighlight>
On aurait évidemment pu mettre le <code>alert</code> directement dans l'évènement sans créer une fonction.
Ligne 135 :
Par exemple, voici un code analogue à l'exemple précédent :
<
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Ligne 152 :
</body>
</html>
</syntaxhighlight>
Avec ce code, vous pouvez donc gérer vos évènements depuis le header de votre page. Cela peut être pratique pour s'y retrouver plus facilement.
Ligne 166 :
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. Voyons un exemple simple :
<
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Ligne 191 :
</body>
</html>
</syntaxhighlight>
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 l'attribut <code>checked</code>.
Vous pouvez absolument récupérer le contenu de toute balise du code HTML avec <code>getElementById</code> et en modifier les attributs : style, valeur, etc. Par exemple, pour changer l'image affichée par une balise <code>img</code>, vous n'aurez qu’à utiliser :
<
var image = document.getElementById('mon_image');
Ligne 203 :
new_image.src = './dossier_images/my_picture.jpg';
image.src = new_image.src;
</syntaxhighlight>
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 (onMouseOver, onMouseOut).
Ligne 214 :
En reprenant l'exemple précédent, on aurait :
<
// On recherche tous les éléments dont la valeur de l'attribut "name" est égale à "mes_images"
var images = document.getElementsByName('mes_images');
Ligne 223 :
new_image.src = './dossier_images/my_picture.jpg';
old_image.src = new_image.src;
</syntaxhighlight>
=== getElementsByTagName ===
Ligne 230 :
Avec le même exemple, on aurait :
<
// On recherche toutes les balises "IMG" (nota: on peut aussi écrire "img")
var images = document.getElementsByTagName('IMG');
Ligne 239 :
new_image.src = './dossier_images/my_picture.jpg';
old_image.src = new_image.src;
</syntaxhighlight>
{{Bas de page
| |||