Javascript Partie2

Technologie et programmation
web
Evènements
 Les gestionnaires d'événements sont associés à des objets, et leur
code s'insèrent dans la balise de ceux-ci...
2
Evènements
3
Evènements
4
Association des événements aux objets
 Chaque événement ne peut pas être associé à n'importe quel objet. Il
est évident par exemple qu'un événement OnChange ne pourra pas
s'appliquer à un lien hypertexte.
 Voici un tableau récapitulant les objets auxquels peuvent être
associés chaque événement :
5
Association des événements aux objets
6
Evènements: exemples
 Le langage JavaScript offre la possibilité d'utiliser plusieurs événements.

 onClickSe produit lorsque l'utilisateur clique sur un élément de la page Web.
Exemple
<html> <head><title>Exemple2</title> <script language= "javascript"> function

affiche(){ alert("Ce message ne s’affiche que lorsque vous avez cliqué sur le bouton
");}
</script></head> <body> <form name="f1"> <input type="button" name="evenement"

value="cliquer ici" onclick="affiche()"> </form> </body></html>
 onChange: Se produit lorsque l'utilisateur modifie le contenu d'un élément d'un

formulaire.
Exemple
7
Evènements
 onFocus: Se produit lorsque l'utilisateur donne le focus à un
élément d'un formulaire, c'est-à-dire que cet élément est sélectionné
comme étant l'élément actif.
Exemple
 onBlur: Se produit lorsque l'élément perd le focus, c'est-à-dire que

l'utilisateur clique hors d'un élément d'un formulaire, celui-ci n'est
alors plus sélectionné comme étant l'élément actif.
Exemple
8
Evènements
 onKeyup: Se produit lorsque l'utilisateur relâche une touche de son
clavier préalablement enfoncée.
Exemple
 onLoad /onUnLoad : L'événement onLoad survient lorsque la page a

fini de se charger.
 A l'inverse, onUnLoad survient lorsque l'utilisateur quitte la page.
 Les événements onLoad et onUnload sont utilisés sous forme
d'attributs de la balise
<BODY> ou <FRAMESET>.
 Exemple
9
Formulaires
 Champ de texte et Zone de Texte
 Pour lire le contenu d'un champ de texte nom on écrit, par exemple :

 var nom;
nom = document.f1.nom.value;
 Pour affecter une valeur à un champ de texte nom on écrit, par

exemple :
 document.f1.nom.value = ‘tounsi';
10
Exemple :
<html> <head>
<title>zone de saisie</title>
<script language="JavaScript">
nombre
function afficher()
{ var n =document.f2.nombre.value;
document.f2.résultat.value = n*n; }
</script>
</head> <body>
résultat
<h2>Carré d'un nombre</h2>
<form name="f2">
L'entier donné : <input name="nombre" type="text" value=""> <br>
<input name="bouton" onclick="afficher()" type="button" value="Calculer
le carré"><br>
L'entier résultat : <input name="résultat" type="text" value="">
</form> </body> </html>
11
Boutons Radio
 Pour tester si un bouton radio est coché ou non utiliser la
propriété :
 if (document.f3.civ[0].checked) {
//
alert('Bouton radio 1 coché.');
}
 Pour déterminer le nombre de boutons radios ayant un même nom

utiliser la propriété :
 alert(document.f3.civ.length);
 Pour déterminer la valeur d'un bouton radio utiliser la propriété :

 alert(document.f3.civ[0].value); //
12
Exemple :
 Test boutons radios
13
Corrigé
<Html>
<script> function test01()
{ if (document.f3.civ[0].checked)
{ alert('Bouton radio 1 coché.'); }
else if (document.f3.civ[1].checked)
{ alert('Bouton radio 2 coché.'); }
else
{ alert('Aucun bouton radio coché'); } }
function test02()
{}
</script>
14
Corrigé
<form name="f3">
<h4> <strong>Test </strong>boutons radios</h4>
<p>
<strong>Civilité: </strong>
<input name="civ" type="radio" value="C"> Célibataire
<input name="civ" type="radio" value="M"> Marié(e) </p>
<p><input onClick="test01()" type="button" value="propriété checked"> </p>
<p><input onClick="test02()" type="button" value="propriété length"> </p>
<p><input onClick="test03()" type="button" value="propriété value">
</p>
</form> </body> </html>
15
Application:
Afficher l'exemple : Nombre de solutions réelles
Rendu
16
Corrigé :
 <html> <head> <title>Bouton radio</title>
 <script language="JavaScript">
 function choisir()
 { if (document.f3.choix[0].checked)
 { alert("Il y a : " + document.f3.choix[0].value+" solutions"); }
 else if (document.f3.choix[1].checked)
 { alert("Il y a :" + document.f3.choix[1].value+" solution"); }
 else if (document.f3.choix[2].checked)
 { alert("Il y a : " + document.f3.choix[2].value+" solution"); }
 else { alert("Veuillez faire un choix."); } }
 </script> </head>
 <body> <h3>Le signe du descriminant d'une équation de second
degré</h3>
 <form name="f3">
 <input name="choix" type="radio" value="2">Strictement positif<br>
 <input name="choix" type="radio" value="1">Nul<br>
 <input name="choix" type="radio" value="0">Strictement Négatif<br> <input
name="but" onclick="choisir()" type="button" value="Le nombre des
solutions
17
réelles?"> </form> </body> </html>
Cases à cocher
 Pour tester si une case à cocher est cochée utiliser la
propriété : checked
 if (document.f4.lang1.checked) {
alert("L'Arabe est la langue du Coran.");
}
 Pour déterminer la valeur associée à une case à cocher utiliser la
propriété : value
 if (document.f4.lang1.checked) {
alert(document.f4.lang1.value);
}
18
Corrigé :
19
Corrigé
 <body> <h4>Test cases à cocher</h4>
 <form name="f4">
 <p> <strong>Votre langue préférée :</strong>
 <input name="lang1" type="checkbox" value="Arabe"> Arabe
 <input name="lang2" type="checkbox" value="Français"> Français
<input name="lang3" type="checkbox" value="Anglais"> Anglais
<input name="lang4" type="checkbox" value="Espagnol"> Espagnol
</p>
 <p><input onClick="test11()" type="button" value="propriété
checked"></p>
 <p><input onClick="test12()" type="button" value="propriété
value"></p>
 </form>
 </body>
 </html>
20
Application:
 Afficher l'exemple : Nombres premiers
21
Liste de Choix
 Pour déterminer l'indice de l'élément sélectionné utiliser :
 alert("Vous avez sélectionné l'option numéro : " +
document.f5.cl.selectedIndex);
 Pour déterminer la valeur associé à un élément d'une liste de choix
utiliser :
 valeur = document.f5.cl.options[index].value; // index : indice de
l'élément
 Pour déterminer le texte d'une option dans une liste de choix
utiliser :
 texte = document.f5.cl.options[index].text; // index : indice de
l'élément
22
Exemple:
 Test liste de choix
23

Javascript Partie2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Javascript Partie2

Transféré par

Droits d'auteur :

Formats disponibles

Technologie et programmation

 Le langage JavaScript offre la possibilité d'utiliser plusieurs événements.

<html> <head><title>Exemple2</title> <script language= "javascript"> function

</script></head> <body> <form name="f1"> <input type="button" name="evenement"

 onChange: Se produit lorsque l'utilisateur modifie le contenu d'un élément d'un

 onBlur: Se produit lorsque l'élément perd le focus, c'est-à-dire que

 onLoad /onUnLoad : L'événement onLoad survient lorsque la page a

 Pour lire le contenu d'un champ de texte nom on écrit, par exemple :

 Pour affecter une valeur à un champ de texte nom on écrit, par

 Pour déterminer le nombre de boutons radios ayant un même nom

 Pour déterminer la valeur d'un bouton radio utiliser la propriété :

Vous aimerez peut-être aussi