Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Je vois que vous vous accrochez... C'est bien, mais il va falloir tenir encore un peu. Après, promis, on commence à faire un peu de pratique.
Nous allons voir ici ce qui va nous permettre de dire à votre navigateur : "quand il se passe ça, tu fais ça". Je vais commencer aussi à vous expliquer comment nous allons procéder pour retrouver notre chemin dans un fichier XHTML.
Nous allons parler ici des événements javascript qui nous permettent de rendre nos pages dynamiques.
Tout d'abord, un peu de syntaxe. Ces événements sont donc des attributs à placer dans des balises XHTML. Ils se présentent sous cette forme :
Code : HTML1 | <balise onEvenement="javascript:fonction()">Blabla</balise>
|
ou
Code : HTML1 | <balise onEvenement="javascript:fonction()" />
|
Décryptons ce code. Vous remarquerez qu'il y a un petit "
on" devant
Evenement. Ça vient tout simplement de l'anglais, et on pourrait le traduire par "Quand".
Evenement indique le type d'événement que l'on veut.
Vient ensuite la valeur de l'attribut. "
javascript:" indique à votre navigateur que vous allez appeler une fonction javascript et vous l'aurez deviné,
fonction est le nom de la fonction que vous désirez appeler.
Voilà : les présentations sont faites. Je vais maintenant vous faire une liste des principaux événements utilisables, ainsi que leur signification.
- Click : cet événement est déclenché quand on clique sur quelque chose.
Code : onClick
- Load : cet événement est déclenché au lancement de la page.
Code : onLoad
- Unload : cet événement est déclenché lors de la fermeture de la page.
Code : onUnload
- MouseOver : cet événement est déclenché lorsque la souris passe par dessus l'élément.
Code : onMouseOver
- MouseOut : cet événement est déclenché lorsque la souris quitte un élément.
Code : onMouseOut
- Focus : cet événement est déclenché lorsque l'on donne le focus à un élément.
Code : onFocus
- Blur : cet événement est déclenché lorsqu'on enlève le focus à un élément.
Code : onBlur
- Change : cet événement est déclenché lorsque le focus est retiré d'un élément et que le contenu à changé.
Code : onChange
- Select : cet événement est déclenché lorsque l'utilisateur sélectionne du texte dans une zone de texte.
Code : onSelect
- Submit : cet événement est déclenché lorsque qu'un utilisateur envoie un formulaire.
Code : onSubmit
Voilà pour les principaux événements de javascript. Mais il en existe bien d'autres, notamment concernant les clics de souris, les pressions de touches sur le clavier...
Sachez qu'avec les principaux navigateurs, ces événements s'appliquent à beaucoup de balises. Vous pouvez mettre par exemple un
onMouseOver sur un élément paragraphe.
Je vais aller assez vite sur cette partie, parce que l'on reverra ça plus tard en programmant.
Je vais donc vous rafraîchir la mémoire deux secondes avec ce qu'on a vu dans le premier chapitre. Vous vous souvenez de l'arbre que j'ai fait ? Eh bien c'est grâce à cette structure que l'on va pouvoir se promener dans le document.
Tout d'abord, rappelez-vous les cours de M@teo21, avec les
id et les
class que vous avez utilisé pour mettre en forme votre page. Il vous a dit que les
id sur une page étaient uniques. Et ce n'est pas pour rien que ceux qui ont créé le XHTML l'ont voulu. C'était pour permettre l'identification (
id) à coup sûr d'un élément dans une page.
Nous venons donc de trouver la première méthode pour retrouver un élément dans notre page. C'est une méthode-clé, et elle est vraiment utile.
Mais si on n'utilise que cette méthode, ne risque-t-on pas de se retrouver avec des
id un peu partout sur notre page ?
Eh bien non. Tout simplement parce qu'on n'utilisera pas uniquement les
id. En effet, il existe deux autres méthodes pour se promener sur notre page. Je vais vous donner celle que j'utilise le plus, après l'id : je vous parlerai rapidement de la dernière, qui peut beaucoup servir dans certains cas.
La seconde méthode est de se promener de parent à enfant, ou d'enfant à parent. Reprenons notre exemple :
Imaginons que je me place sur body. Je peux dire à javascript "va sur le premier enfant" par exemple.
Le premier enfant ? Et comment sait-il lequel est le premier ?
Ha ! J'ai dû omettre de vous préciser qu'en plus d'avoir une structure bien ordonnée, le XHTML donnait un ordre à tous les enfants.
En effet, le premier élément ajouté à une balise est le premier enfant, et ainsi de suite.
Ce qui facilite drôlement le problème, quand notre page XHTML est bien structuré et qu'on connaît sa structure. On peut donc descendre, remonter dans l'arbre comme on veut.
Enfin la troisième méthode c'est de récupérer tous les éléments d'un même type (h3, p, a, div, etc.) qui se trouvent sous un certain noeud. Ensuite, on peut lui dire : "
va te positionner sur la troisième occurrence" de cet élément.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
479 Zéros connectés |
8 requêtes |
0.0955s (0.0839s)
