Exemples interactifs VBScript

Voici divers EXEMPLES en VBScript

[Retour Page précédente] Vous pouvez tester chaque exemple en temps réel ..Le copier/coller si vous le voulez..! Si vous l'utilisez dans vos pages..merci d'ajoutez dans vos scripts le commentaire : // mBollard(c)1998 Libre d'utilisation

Réaliser une MICRO-CALCULETTE de conversion Francs -Euro-Francs.
Réaliser et comprendre une CALCULETTE .
Faire apparaître un MESSAGE dans une zone de texte lors d'un EVENEMENT
Réaliser une ACTION après un certain temps d'ATTENTE
Afficher la DATE et l'HEURE en temps réel
Créer des BOUTONS Animés ou simuler l'ENFONCEMENT des Boutons
Changer le contenu de plusieurs FRAMES et/ou changer des IMAGES en un seul CLICK
Faire apparaître des TEXTES et/ou des IMAGES en SURVOLant des objets
PRECHARGER des IMAGES pendant les temps 'morts'
Découper une IMAGE en zones sensibles..et détecter le survol de la Souris ?

cette rubrique est en perpétuelle actualisation..!

Faire apparaître un message dans une zone de texte lors d'un évènement
Testez..!

<SCRIPT language="VBScript"><!--

sub ecrit(message)

{ document.formul.zone.value= message }

' -->

</SCRIPT>

.....

<FORM name="formul">

<INPUT type="button" value="Ecrit !"

onClick="ecrit('Ah..! Bravo ça marche ..!') ">

<INPUT type="TEXT" size=30 name="zone" >

<INPUT type="button" value="Efface!"

onClick="ecrit('') ">

</FORM>

Dans ce cas , on utilise l'évènement onClick , mais il est tout -à fait possible d'utiliser d'autres évènements.
Par exemple : onMouseOver .. en survolant un Lien ou une Image réactive.
Pour un Lien sur Image, on aurait alors :

<A HREF="#" onMouseOver="ecrit('Utilisez l'option n°2')"

onMouseOut="ecrit('')">

<IMG SRC="livre.gif"></A>

Lors du survol de cette image/lien le texte d'aide apparaît dans la zone texte..Il disparait dès que la souris s'en éloigne.
Pour approfondir ce sujet, voir l'exemple survol de cette page.. [ Retour au Menu ]

Réaliser une action après un certain temps ( temporisation )
Testez..! Dès le click sur Go , pendant 3 secondes, à chaque seconde un nouveau texte..
Le bouton Stop abrège toutes les tempos en cours.
Cet exemple illustre les méthodes JavaScript :

setTimeout()
clearTimeout()

<html>

<head>

<script language="JavaScript">

var x,xx,xxx;

function tempo()

{

x=setTimeout('document.formx.zone.value="1er temps";',1000);

xx=setTimeout('document.formx.zone.value="2ème temps";',2000);

xxx=setTimeout('document.formx.zone.value="3ème temps";',3000);

}

function stop()

{

clearTimeout(x);

clearTimeout(xx);

clearTimeout(xxx);

}

</script>

</head>

<body>

<form name="formx">

<center>

<input type="text" name="zone" size=30>

<input type="button" value="Go" onClick="tempo();">

<input type="button" value="Stop" onClick="stop();">

</center>

</form>

</body>

</html>

[ Retour au Menu ]

Afficher la DATE et l'HEURE en temps réel
Testez..!

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- debut script

var x=0,xx ,delai; // variables globales

var ladate=" "; // variable globale

function debTemps(tempo)

{

var hhmmss = " ", min, sec;

delai = tempo;

var jjmman=" ";

temps = new Date()

hhmmss += temps.getHours();

min = temps.getMinutes();

if (min < 10) hhmmss += ":0" + min;

else hhmmss += ":" + min;

sec = temps.getSeconds();

if (sec < 10) hhmmss += ":0" + sec;

else hhmmss += ":" + sec;

hhmmss = " " + hhmmss;

jjmman=temps.getDate();

if ((x % 10)==0) { ladate=debDate() ; //la fonction gèrant la date n'est appelée que tous les 10 coups!

if ( x==10) x=0;

}

else x++;

document.Time.datehore.value = ladate + " " + hhmmss;

xx = setTimeout("debTemps(delai)",tempo);

}

function debDate()
{
var adate, date, amois;
adate = new Date();
date = adate.getDate();
amois = adate.getMonth()+1; // le mois de janvier correspond à la valeur retournée 0

if (amois == 1) date += " Janvier";
else if (amois == 2) date += " Fevrier";
else if (amois == 3) date += " Mars";
else if (amois == 4) date += " Avril";
else if (amois == 5) date += " Mai";
else if (amois == 6) date += " Juin";
else if (amois == 7) date += " Juillet";
else if (amois == 8) date += " Aout";
else if (amois == 9) date += " Septembre";
else if (amois == 10) date += " Octobre";
else if (amois == 11) date += " Novembre";
else if (amois == 12) date += " Decembre";
date += " " + (1900 + adate.getYear());
date = " " + date;
return date;
}
// fin du script -->
</SCRIPT>
</HEAD>
<BODY onLoad="debTemps(1000)" onUnload="clearTimeout(xx)">
<FORM NAME="Time">
<INPUT TYPE="text" NAME="datehore" SIZE="30"><BR>
Tu peux placer cette zone de saisie où tu veux dans ta Page..
</FORM>
</BODY>
</HTML>

La Date et l'Heure apparaissent dans une zone de saisie de texte..L'Heure est remise à jour toutes les secondes et la date toutes les 10 secondes ..

[ Retour au Menu ]

Créer l'impression de l'enfoncement de Boutons ( animés ou non ).
Testez ...!

Pour exploiter cet 'effet' d'enfoncement, il est important de précharger l'image du bouton enfoncé afin qu'elle ne soit pas chargée au moment de l'appui !!
Préchargement...
En fait , ici , l'image du bouton enfoncé ( btn_e.gif) est chargée derrière le 3 ème bouton mais avec une largeur et une hauteur de 1 pixel...On ne la voit donc pas..!!
L'image 'btn_r.gif' est l'image du bouton au repos et 'btn_e.gif' celle du bouton enfoncé..!
Les 2 images doivent avoir les mêmes dimensions à l'origine.
L'image du bouton enfoncé peut-être animée.

<html>

<head>

<script language="VBScript"><!--

Sub flip(n)

for i=0 to 2

if (i==n) then

document.images[i].src="btn_e.gif" //image préchargée..

else

document.images[i].src="btn_r.gif"

end sub

'-->

</script>

</head>

<body >

<a href="#" onClick="flip(0)";><img src="btn_r.gif" border=0></a>

<a href="#" onClick="flip(1)";><img src="btn_r.gif" border=0></a>

<a href="#" onClick="flip(2)";><img src="btn_r.gif" border=0></a>

<IMG src="btn_e.gif" width=1 height=1>

</body onLoad="pre_ch();">

</html>

[ Retour au Menu ]

Réaliser une mini-calculette de conversion FRANCS-EUROS-FRANCS.
Bien entendu cette calculette sans prétention, ne servira peut-être qu'a des fins pédagogiques..!
Testez...

<html>

<head>

<script language="VBScript"><!--

Sub calcul_euro()

document.formu.zone_eu.value=document.formu.zone_fr.value/6.5

end Sub

Sub calcul_franc()

document.formu.zone_fr.value=document.formu.zone_eu.value *6.5

end Sub

Sub raz()

document.formu.zone_fr.value='';document.formu.zone_eu.value=""

end Sub

' -->

</script>

</head>

<body text=yellow>

<form name="formu">

<table width=50% bgcolor="gray">

<tr>

<td>Francs </td><td> <input type=text name=zone_fr size=30></td>

</tr>

<tr>

<td>Euros </td><td> <input type=text name=zone_eu size=30></td>

</tr>

</table>

<input type =button onclick="calcul_euro()" value="FR --> EU">

<input type =button onclick="calcul_franc()" value="EU --> FR">

<input type =button onclick="raz()" value="RESET">

</form>

</body>

</html>

[ Retour au Menu ]

Faire apparaître des Textes et/ou des Images en survolant des Objets
Testez ...! Amusez-vous à survoler les cases Options..et observez la zone de saisie et la ligne de status.

Option1

Option2

<html>

<head>

<script language="VBScript"><!--

sub survol(etat)

if (etat>0) then

document.images[0].src="theme" & etat & ".gif";

document.formu.zone.value="survol de l'OPTION n°" & etat;

self.status="Juste au-dessus de OPTION" & etat;

else

document.images[0].src="image_bid.gif"

document.formu.zone.value="Calme plat.."

self.status="Ailleurs..."

end if

end sub

' -->

</script>

</head>

<body>

<div align=center>

<img src="image_bid.gif" >

</div>

<form name="formu">
<input type="text" name="zone" size=30>
</form>
<a href="#" onMouseOver="survol(1)"
onMouseOut="survol(0)>
Option1</a>
<br><br>

<a href="#" onMouseOver="survol(2)"
onMouseOut="survol(0)">
Option2</a>
</body>
</html>

[ Retour au Menu ]

Changer le contenu de plusieurs Frames et/ou changer des Images en un seul Click.
Testez ...! A chaque Click ..

le contenu de la Frame en Haut d'écran change
le contenu de la Frame à Gauche de l'écran change
l'Image ci-dessous change.
le texte du Bouton change.

<HTML>

<head>

<script language="JavaScript"><!--

var flag=false;

function commute()

{ if (flag) { parent.fen1.location.href="ind_haut.html";

document.images[4].src="theme1.gif";flag = !flag;}

else { parent.fen1.location.href="ind_haut2.html";

document.images[4].src="theme2.gif";flag= !flag;}

}

// -->

</script>

</head>

<body>

<div align=center>

<img src="theme2.gif" width=35 height=36>

<form>

<input type="button" value="Change Tout" onClick="commute();">

</form>

</body>

</HTML>

Là, exceptionnellement le Test que vous pouvez réaliser en cliquant sur le bouton 'Change tout' est différent du listing ci-dessus mais le principe mis en évidence est identique!!
J'ai choisi de créer un Test le plus 'vivant' possible , car il fait intervenir les pages de mon site!! [ Retour au Menu ]

Francs
Euros