C20.2 : Interaction avec l'utilisateur (côté client), initiation au Javascript

Gestion des événements

Changer la couleur de fond d'un div

Analyser du code

Ouvrir la page suivante et la tester : exemple n° 1.

Visualiser le code de la page et l'analyser : quels éléments du code ont permis d'ajouter de l'interactivité avec l'utilisateur ?

Appliquer

Créer une page Html avec trois boutons qui permettent chacun de mettre le fond de la page dans une couleur différente.

Changer le texte d'une balise

Analyser du code

Ouvrir la page suivante et la tester : exemple n° 2.

Visualiser le code de la page.

Appliquer

Reprendre l'application n° 1 et faire en sorte que chaque bouton permette non seulement de changer la couleur de fond de la page, mais en plus affiche cette couleur en toutes lettres.

Utiliser une zone de saisie de texte

Analyser du code

Ouvrir la page suivante et la tester : exemple n° 3.

Visualiser le code de la page.

Appliquer

Proposer une page dans laquelle l'utilisateur peut, dans une zone de texte, choisir la couleur de fond de la page.

D'autres événements

Gestion du survol d'un élément par la souris

onclick n'est pas le seul événement qui existe pour les différentes balises. On peut citer onmouseover, onmouseout.

A faire : Créer une page avec un carré, initialement rouge, qui devient bleu lorsque la souris passe dessus et redevient rouge lorsque la souris en sort.

Gestion de la saisie dans une zone de texte

Certaines balises disposent d'événements particuliers. Ainsi, les balises input, quel que soit leur type, disposent de l'événement oninput.

A faire : créer une page avec une zone de texte. La page doit afficher "Bonjour ..." au fur et à mesure que l'on écrit son prénom dans la zone de texte.

En prévision de l'activité 19.3

A faire Ouvrir la page suivante et visualiser son code : exemple n° 6.

Pour ceux qui veulent aller plus loin

Exemples

Lien sur ostralo.net : Petits exemples en JavaScript

Applicatons

Lien sur ostralo.net : Apprentissage du JavaScript