TP1 Evénements JavaScript

Exercice 1 : événement onBlur

<html>
<head>  
<script language="JavaScript">
   function lireprenom(str) {
   alert("bonjour, "+ str+"!");
   }
  </script>
</head>

<body>
Entrez votre prénom :
<form>
  <input type="text" name="exo1"  value="" 
  onBlur="lireprenom(this.value)">
</form>
</body>
</html>

L'événement onBlur (="sur sortie du focus") est déclenché lors de la validation (ou par action sur la touche TAB ou en cliquant en dehors du champ).
La fonction lireprenom() est alors appelée.
Son paramètre this.value prendra la valeur tapée dans le champ.
Remarque :this désigne l'objet courant; ici, this est facultatif.
Expliquez ce qu'affichera cette page.

Pour vérifier, écrivez votre prénom :

Exercice 2 : événement onLoad sur le chargement d'un document

Revoir si nécessaire l'exemple III du cours d'introduction et ce paragraphe concernant les objets Date
Le programme exo-heure.html affiche le jour et l'heure au moment du chargement ducorps du document qui le contient.
On utilisera donc le gestionnaire d'événement onLoad qui appelle la fonction dateheure() ... à écrire.
Compléter en ajoutant un bouton dont l'activation provoquera une mise à l'heure.

Voici l'affichage souhaité

Exercice 3 : événements onClick sur des boutons radio et onChange sur une liste déroulante

L'utilisateur choisit la couleur de fond de la fenêtre du navigateur entre plusieurs couleurs proposées, par exemple :

Rouge

Vert
Bleu
Au hasard

Des boutons radio sont liés à ces choix de couleur. Par défaut la couleur de fond du document est rouge.
Un changement de bouton sélectionné doit provoquer immédiatement le changement de couleur associée au bouton. Utiliser la propriété bgColor de l'objet document et lui affecter une couleur,
par exemple document.bgColor = "red";

On pourra ensuite d'effectuer le même changement de couleur d'une seconde façon, en sélectionnant la couleur dans une liste de sélection.

Exercice 4 : événements onClick sur un bouton et onChange sur une ligne de texte

Reprendre cet exercice table de multiplication.
On saisira le nombre N dans un champ de texte nommé "nombre" (prendre 7 comme valeur par défaut).
L'événement onClick du bouton, tout comme l'événement onChange du champ de texte doit provoquer l'exécution de la fonction table_mult(N).
La table de multiplication sera affichée dans une zone de texte multiligne, nommée "resultat".

Voici un exemple de réalisation :

Table de multiplication par N

Exercice 5 : événements onMouseOver et URL JavaScript: sur un hyperlien

Quand l'utilisateur passe la souris sur un hyperlien (peu importe sa nature, texte ou image, et son effet) il doit faire afficher un message qui l'invite à cliquer sur le lien.
Ce texte disparait quand la souris quitte le lien.
Quand il clique sur le lien, une boite de message alert() apparait.

Voici un exemple de réalisation

Exercice 6 : événement onChange sur un champ de texte

Ecrire un programme JS pour contrôler la saisie d'un composant texte, qui doit contenir une adresse e-mail. La chaine doit être de la forme chaine1@chaine2