Javascript
Applications
© The scientific sentence. 2010
|
Autres evenements
Autres evenements
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 chaî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>
|
  |
|
