Les evenements
Les evenements sont des actions que l'on effectue via JavaScript. Ils sont
définis dans les balises du document HTML. Un évenement est généralement
associé à une fonction que l'on exécute. Voici quelques exemples:
1. onload
1. onload: est déclanché lorsue la page se charge.
Exemple:
<html>
<head>
<script type="text/javascript">
function ShowUpPicture()
{
... code to show pictures
}
</script>
</head>
<body onload="ShowUpPicture()">
</body>
</html>
2. onclick
The evenement onclick: aura lieu lorsqu'oun objest est double-clické.
Example:
<html>
<body>
First field: <input type="text" id="field1" value="Regards .. ">
<br />
Second field: <input type="text" id="field2">
<br /><br />
<br />
<button ondblclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>
En double-clickant the boutton, le contenu du premier champ est copié sur
le deuxième.
3. onchange:
Le "onchange" evénement aura lieu lorsqu'on change le contenu du champ.
<html>
<head>
<script type="text/javascript">
function the_length(x)
{
var y = document.getElementById(x).value;
document.getElementById(x).value = y.length;
}
</script>
</head>
<body>
Entrer quelques charactères:
<input type="txt" id="word" onchange="the_length(this.id)">
</body>
</html>
Clicker à l'extérieur de la boîte pour voir la longueur du mot
entré.
4. onmouseover:
Le "onmouseover" evénement aura lieu lorsque la sourie pointe
sur un objet particulier.
Exemple:
<body>
<h3>Changing images</h3>
<a href="noscript.html"
onMouseOver="document.ThePicture.src='images/cat.jpg'"
onMouseOut="document.ThePicture.src='images/corto.gif'"
onClick="return false;">
<img src="images/corto.gif" name="ThePicture" alt="changing
pictures" border="0">
</a>
</body>
Changement des images
5. onSubmit
The onSubmit evénement est utilisé pour valider un formulaire
avant de l'envoyer.
Exemple:
<html>
<head>
<script type="text/javascript">
function verify (x)
{
the_form.word.value
var y = the_form.word.value ;
if (y % 2 !=0 ){
alert (" Enter an even nuumber .." );
}
}
</script>
</head>
<body>
<i>Enter an even number:</i> <br />
<form name="the_form" action="examples.html" onSubmit="
verify(this.name)">
<input type="txt" name="word" size="20">
<input type="submit" value="Submit">
</form>
</body>
</html>
Si les valeurs du champ de la fonction verif() return vraie,
le formulaire est envoyé; sinon la fonction retourne faux
et le formulaire est annulé.
6. onfocus
Le "onfocus" evénement aura lieu lorsqu'un objet est concerné.
Dans l'exemple suivant, la couleur du charactère entré devient
rouge.
<html>
<head>
<script type="text/javascript">
function red(x)
{
document.getElementById(x).style.color="red";
}
</script>
</head>
<body>
<b>Enter a character. On focus, its color becomes
red.</b>
<br>
<input type="text" onfocus="red(this.id)" id="word">
</body>
</html>
7. autre exemples: setInterval
<script type="text/javascript">
var nbSeconds=0;
var timeID;
function add() {
nbSeconds++;
document.this_form.times.value=nbSeconds;
}
function send() {
document.this_form.nbSeconds.value=nbSeconds;
document.this_form.submit();
}
</script>
<em>On incrémente par "mouseover". Le click recharge
la page.</em>
<a href="javascript:send()"
onMouseOver="timeID=setInterval('add()', 1000)"
onMouseOut="clearInterval(timeID)">
<img src="images/check.jpg" name="check" alt="check"
border="0">
</a>
<form name="this_form" method="post" action="Post1.php">
<input type="text" name="times" value="0">
<input type="hidden" name="nbSeconds" value="0">
</form>
On incrémente par "mouseover". Le click recharge la page..
|
