Voici
divers EXEMPLES en JavaScript
[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
| Applications [ci-dessous] |
Jeux |
Réaliser une MICRO-CALCULETTE
de conversion Francs -Euro-Francs.
Réaliser et comprendre une
CALCULETTE .
Créer une FENETRE VOLANTE
et lui passer des paramètres ( message,valeurs..).
Connaître les caractéristiques du NAVIGATEUR du Client et même plus..
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..!
Si vous souhaitez que j'installe
des boutons de téléchargement pour chaque exemple, dites-le
moi..!
Faire apparaître
un message dans une zone de texte lors d'un évènement
Testez..!
<SCRIPT
language="JavaScript"><!--
function 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..!
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 !! Donc vous constaterez
qu'elle est chargée dès que la page est entièrement
chargée ( évènement onLoad ) .. pendant que le visiteur
s'extasie !!
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'image du bouton enfoncé peut-être
animée.
<html>
<head>
<script
language="JavaScript"><!--
var
ima_bt= new Image();
function
flip(n)
{
for (var i=0 ;i<=2;i++)
if (i==n) document.images[i].src=ima_bt.src;
//image préchargée..
else document.images[i].src="btn_r.gif";
}
function
pre_ch(n)
{
ima_bt.src="btn_e.gif";
} // préchargement de l'image..
//
-->
</script>
</head>
<body
>
<a
href="javascript:flip(0);"><img src="btn_r.gif" border=0></a>
<a
href="javascript:flip(1);"><img src="btn_r.gif" border=0></a>
<a
href="javascript:flip(2);"><img src="btn_r.gif" border=0></a>
</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="JavaScript"><!--
function
calcul_euro()
{
document.formu.zone_eu.value=document.formu.zone_fr.value/6.5;
}
function
calcul_franc()
{
document.formu.zone_fr.value=document.formu.zone_eu.value *6.5;
}
function
raz()
{document.formu.zone_fr.value='';document.formu.zone_eu.value='';}
//
-->
</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.
