Exemples
1. L'évenement "onload"
Dans une page:
<html>
<head>
<script src="scripts.js" type="text/javascript"></script>
</head>
<body onload="ShowUpPicture()" >
<table><tr><td>
<img src = "images/2-Mountains.jpg" name='ThisPicture' width = "300" height = "500">
</td></tr></table>
</body>
</html>
La abalise <body> comporte l'évenement "onload" pour charger
une fonction qui se trouve dans le fichier exérieur "scripts.js".
Le code source de ce fichier et le suivant:
var Speed = 1000
var Period = 2
var Pictures= new Array()
Pictures[0] = 'images/Jorf32.jpg'
Pictures[1] = 'images/Yrun22.jpg'
Pictures[2] = 'images/M-Kudi2.jpg'
var i
var ThisTime
var ThisImage = 0
var Number = Pictures.length
var ThePicture = new Array()
for (i = 0; i < Number; i++)
{
ThePicture[i] = new Image()
ThePicture[i].src = Pictures[i]
}
function ShowUpPicture()
{
if (document.all)
{
document.images.ThisPicture.style.filter="blendTrans(duration=2)"
document.images.ThisPicture.style.filter="blendTrans(duration=Period)"
document.images.ThisPicture.filters.blendTrans.Apply()
}
document.images.ThisPicture.src = ThePicture[ThisImage].src
if (document.all)
{
document.images.ThisPicture.filters.blendTrans.Play()
}
ThisImage = ThisImage + 1
if (ThisImage > (Number-1)) ThisImage = 0
ThisTime = setTimeout('ShowUpPicture()', Speed)
}
L'exécution donne:
|
2. La méthode: substring()
La méthode substring() extrait les charactères d'une chaîne entre
deux indices donnés.
La syntaxe est:
characteres.substring(debut,fin)
Le paramètre "debut est éxigé. C'est un nombre qui commence de "zéro" et
qui indique où commencer l'extraction.
Le paramètre "fin" est optionnel. C'est un nombre qui indique où
arrêter l'extraction. S'il n'est pas spécifié, la méthode extrait simplement
à partir de la fin de la chaine, c'est à dire aucune extraction n'est faite
à partir de la fin.
Dans l'expression: characteres.substring(debut,fin), le charactère de rang
"debut" est compris et le charactère de rang "fin" n'est pas compris, c,es
à dire l'extraction s'arrête au rang "fin - 1".
Exemples
Ici debut = 5 et fin n'est pas spécifié; le rang 5 correspond à u (compris);
ainsi l'éxécution donne:
ur tout le monde!
In this example we will use substring() to extract some characters from a string:
Ici debut = 5 et fin = 11; le rang 5 correspond à u (compris) le rang
11 correspond au deuxième "t" (non compris),ainsi l'éxécution donne:
ur tou
3. La méthode: setTimeout()
Selon un interval de temps spécifié, cette fonction prends son temps pour
exécuter une fonction donnée. Cette fonction est souvent attachée à un
evenement.
Exemples
En JavaScript, pour mettre du temps à exécuter un événement, on utilise deux
méthodes: setTimeout() qui execute un code dans le future; et clearTimeout()
qui arr^te ou efface le setTimeout().
setTimeout()
La syntaxe est:
var temps = setTimeout("instruction",milliseconds);
La méthode setTimeout() returne une valeur qui sera afféctée à la variable "temps".
Pour arrêter setTimeout(), on utilise l'instruction: clearTimeout(temps);.
Le premier argument "a" de setTimeout(a,b) est une instruction de type "charactère",
généralement une fonction à éxécuter. Le second argument indique combien de milliseconds
on veut exécuter l'instruction du premier argument.
Exemple 1
<html>
<head>
<script type="text/javascript">
var phrase = "C\'est le fonds qui manque le moins .. ";
function afficher()
{
document.getElementById('txt').value = phrase;
}
function clicker()
{
setTimeout("afficher()", 4000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Clickez et attendez 4 secondes"
onClick="clicker()">
<input type="text" id="txt" value = " .. " size = "40">
</form>
</body>
</html>
Lorsque le bouton "Clickez et attendez 4 secondes" est activé, le texte
sera affichée dans 7 secondes.
Exemple 2
Voici un programme qui calculera la racine carrée du nombre 2 d'une
facon successive et l'affiche chaque 2 secondes: La fonction utilisée
est récursive.
<html>
<head>
<script type="text/javascript">
var nombre = 2;
function racine()
{
document.getElementById('valeure').value = nombre;
nombre = Math.sqrt(nombre);
setTimeout("racine()",2000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Extraire la recine carrée du nombre 2" onClick="racine()">
<input type="text" id="valeure">
</form>
</body>
</html>
3. La méthode: clearTimeout()
Sa syntaxe est:
clearTimeout(la_variiable_de_setTimeout)
Exemple
Pour arrêtrer le programme ci-dessus, qui extrait les racines carrées:
- Déclarer le setTimeout dans la fonction racine():
temps = setTimeout("racine()",2000); et
- Ajouter entre les balises <head> et </head> la fonction suivante:
function arreter()
{
clearTimeout(temps);
}
4. défilement du texte
1. À gauche:
<html>
<head>
<script type="text/javascript" language="JavaScript">
var chaine = "C\'est le fonds qui manque le moins ..";
var flag = true;
function scroll_gauche() {
if (flag) {
document.defiler_gauche.textbox.value = chaine;
chaine = chaine.substring(1) + chaine.substring(0,1);
/* Chaque deux secondes, éliminer la premiere lettre de la chaine
et la placer à sa fin*/
}
setTimeout('scroll_gauche()',2000);
}
</script>
</head>
<body>
<form name="defiler_gauche" onSubmit="return false">
<input name="textbox" type="text" size="80" value="">
<input type="button" value = " --> " onClick="flag = true; scroll_gauche()">
</form>
</body>
</html>
Chaque deux secondes, éliminer la premiere lettre de la chaine s'éfface
et vient se concaténer à (se placer à la fin de) la chîne.
1. À droite:
<html>
<head>
<script type="text/javascript" language="JavaScript">
var chaine = "C\'est le fonds qui manque le moins ..";
var flag = true;
function scroll_droite() {
if (flag) {
document.defiler_droite.textbox.value = chaine;
chaine = chaine.substring(chaine.length-1,chaine.length) + chaine.substring(0,chaine.length-1);
}
/*Chaque sept-cent millisecondes, éliminer la dernière lettre de la chaine et la
placer à sa droite*/
setTimeout('scroll_droite()',700);
}
</script>
</head>
<body>
<form name="defiler_droite" onSubmit="return false">
<input name="textbox" type="TEXT" size="80" value="">
<input type="button" value=" Faire défiler à droite --> " onClick="flag = true; scroll_droite()">
Pour arrêter: <input type="button" value=" stop " onClick="flag = false">
</form>
</body>
</html>
|