|
|
|
|
|
Index HTML - Exemples Javascript - Vbscript
| Exemples Javascript - VbScript - Index HTML |
Quelques exemples en JavaScript
Nota : n'oubliez pas d'entourer les scripts par des balises de commentaires (<!-- et //-->), ce qui a pour effet de cacher le contenu des scripts aux anciens navigateurs non compatibles avec la balise <script>.
Vous pouvez réaliser des <Copier/Coller> sur les exemples afin de les inclure dans vos documents HTML.
Suppression du soulignement
des liens
Ce style vous permeterra de supprimer les
soulignements sur vos liens.Par ailleur, le lien sera surlgnéet changera de
couleur au passage de la souris.
<STYLE type="text/css">
A:link {text-decoration: none; color: #000000; }
A:visited {text-decoration: none; color: #000000; }
A:hover { text-decoration: underline; color: #0000CC; }
</STYLE>
Appeller une feuille de
style
Cette ligne vous permet
d'appeller une feuille de style externe.
<link REL="StyleSheet" TYPE="text/css" HREF="VOTRE_FICHIER.css">
Changement d'image en passant
la souris.
A INSERER DANS LA PARTIE <HEAD> DU DOCUMENT
HTML
<script>
imageA = new
Image(); //Vous pouvez donner les dimensions dans les paranthèses image
A.src = "boutonA.gif"; imageB = new Image(); imageB.src =
"boutonB.gif";
</script>
A INSERER DANS LA PARTIE <BODY> DU DOCUMENT HTML
<a HREF="http://www.le-gaulois.com"
onMouseOver="Bouton.src = imageB.src" onMouseOut="Bouton.src =
imageA.src">
<img SRC="bouton1.gif" NAME="Bouton"
BORDER="0" WIDTH="40" HEIGHT="40">
</a>
Ouverture plein
écran
Ce script force l'ouverture d'une page en pleine ecran
<BODY>
<script> if
(parent.frames.length!=100)
window.open('http://url_de_la_page/le_fichier.html','','fullscreen,scrollbars')
</script>
</BODY>
OnBlur
Ce
gestionnaire d'événements est appelé lorsqu'un cadre (frame), une fenêtre ou un
formulaire perd le focus. Dans l'exemple suivant, un message d'alerte s'affiche
dès que l'on change de champs de texte.
<!---Le formulaire--->
<input type="text" name="textfield" onBlur="Test()">
<!---Le script--->
<script language="JavaScript">
function Test()
{ alert("Vous avez
changé de champs de texte"); }
</script>
onChange
Ce gestionnaire d'événement est appelé dès qu'un objet de
formulaire perd son focus et que sa valeur est modifiée. Très utiles pour
vérifier les champs d'un formulaire dès sa saisie. Le script suivant lance un
message d'alerte dés qu'un utilisateur a modifié la valeur des champs.
<form name=formulaire>
<input type=text name=un onChange="javascript:alert('Vous
avez changer le texte')">
<input type=text
name=deux onChange="javascript:alert('Vous avez changer le texte')">
</form>
Instruction
if
L'instruction if permet de tester une condition afin de
générer une série d'action selon que le résultat est vrai ou faux. Le script
suivant vérifie si i est égale à 1, si c'est le cas, il émet un message d'alerte
et remet i à 0.
<script language="javascript">
var i = 1; if (i==1){ alert('I vaut 1, on le remet à zero');
i=0; }
</script>
Mots résérvés
Voici une liste des mots réservés en javascript. Il ne faut donc pas les
employés lors de déclaration de variables ou fonctions (La plupart d'entre eux
sont également réservé dans d'autre langage de programmation)
Abstract Boolean Break Byte Case Catch Char Class Const Continue Debugger Default Delete Do Double Else Enum Export Extends False Final Finally Float For Function Goto If Implements Import In Instanceof Int Interface Long Native New Null Package Private Protected Public Return Short Static Super Switch Synchronized This Throw Throws Transient True Try Typeof Var Void Volatile While With
Verifier si un champ est
vide
Ce script permet de vérifier si un champs de texte est
vide ou nom. Si celui-ci est vide, un message d'erreur apparait indiquant quels
champs est(sont) vide(s) et le formulaire n'est pas soumis. Dans l'autre cas la
soumission s'effectue normallement.
<!---Le Formulaire--->.
<form name="formulaire" method="post"
action="envoi.php">
<input type="text"
name="nom">
<input type="text" name="prenom">
<input type="submit" name="Submit" value="Envoyer"
onClick="return Test()">
</form>
<!--Le script-->
<script
language="JavaScript">
function Test()
{ var Nom = document.formulaire.nom.value;
var Prenom = document.formulaire.prenom.value;
if((!Nom) || (!Prenom))
{
alerte="Il manque\n\n";
if(! Nom){ alerte =
alerte+"-Votre nom\n"; }
if(!Prenom){ alerte =
alerte+"-Votre prenom\n"; }
alert(alerte); return
false; }//fin premier if else{ return true; }
}
//fin fonction test
</script>
Tester une adresse
e-mail
Ce script permet de tester si l'adresse e-mail est
ecrite correctement, si c'est pas le cas alors un msg d'alert s'affichera et le
formulaire ne sera pas soumis, si non il y aura la soumission du formulairs
<!-- script entre les balises <head> et
</head>-->
function Email1(s)
{ var i=0; var cpt=0; var sLength = s.length;
while (i < sLength)
{ if
(s.charAt(i)=="@")
{cpt ;} i ;
}
if (cpt==1) return false;
else return true;
}
function Email2(s)
{ var sLength =
s.length;
if ((s.charAt(sLength-4)=="."
)
||
(s.charAt(sLength-3)=="."))
return false; else return
true; }
function test_email()
{
var v=document.form1.mail.value; if(Email1(v)
||Email2(v))
alert("Merci de
vérifier votre adresse e-mail !");
else
document.form1.submit();
}
<!-- Formulaire entre les balises
<body>et</body>-->
<form name="form1"
methode="" action="">
<input type="text"
name="mail">
<input type="button" name="submit"
value="Cliquer ici pour tester l'adresse e-mail" OnClick="test_email()">
</form>
Caracteres speciaux
!
Ce script permet d'empêcher la saisie des caracteres non
désirables, supposons qu'on veut seulement saisir un texte sous format numérique
voir l'exemple ci-dessous :
<!--Script -->
function
carasp(s, b)
{ var i; for (i = 0; i < s.length;
i++)
{ var c = s.charAt(i); if (b.indexOf(c) = = -1)
return false; }
return true; }
function test_carasp()
{ var
v=document.form1.text.value; if(!carasp(v,"0123456789")
alert("Merci de saisir votre text en format numérique");
else document.form1.submit();
}
<!-- Formulaire -->
<form name="form1"
action="" methode="">
<input type=text
name=text>
<input type=button name=Valider
OnClick="test_carasp()">
</form>
Détecter un
navigateur
Ce script permet de detecter le type de
navigateur du visiteur. Il permet de savoir si il s'agit d'Internet Explorer,
Netscape Navigator ou Opera.
<script language="JavaScript">
if(navigator.appName == "Microsoft Internet Explorer")
document.write("Il s'agit d'Internet Explorer <br>"); else
if(navigator.appVersion.substr(4, 1) == "[")
document.write("Il s'agit de Netscape <br>");
else document.write("Il s'agit d'Opera <br>");
</script>
Obtenir un nombre
aléatoire
Le script ci-dessous permet d'obtenir une valeur
aléatoire entre 1 et nb. Il vous suffit donc de modifier nb pour obtenir un
intervalle différent.
<Script language="javascript">
nb=5; document.write(Math.floor(Math.random() *
nb)+1);
</Script>
Mettre un texte en
minuscule
Ici vous pouvez mettre en minuscule la saisie de
votre visiteur. Le résultat apparait dans une fenetre d'alerte (que vous pouvez
modifier) et est stocké dans la variable 'nom'.
<!---Script--->
<script
language="JavaScript">
function Test()
{ nom=document.form1.test.value; nom=nom.toLowerCase();
alert(nom);
}
</script>
<!---Formulaire--->
<form
name="form1" method="post" action="">
<input
type="text" name="test">
</form>
<input type="submit" name="Submit" value="Mettre en
majuscule!" onClick="Test()">
Mettre un texte en
majuscule
Grâce à ce petit code, vous pouvez mettre
l'ensemble d'une saisie en majuscule. Dans l'exemple suivant, un message
d'alerte donne les caractères en majuscules, les caractères en majuscule est
stocké dans la variable 'nom'.
<!---Script--->
<script
language="JavaScript">
function Test()
{ nom=document.form1.test.value; nom=nom.toUpperCase();
alert(nom);
}
</script>
<!---Formulaire--->
<form
name="form1" method="post" action="">
<input
type="text" name="test">
</form>
<input type="submit" name="Submit" value="Mettre en
majuscule!" onClick="Test()">
Rollover sur un
tableau
Ce petit script permet de modifier la couleur d'une
case d'un tableau au passage de la souris. Il suffit de modifier les couleurs
définis par les fonctions "mOvr" et "mOut" dans le tag "< td >" ainsi que
l'attribut "bgcolor".
<script language="Javascript">
function mOvr(src,clrOver,clrLien)
{
src.bgColor = clrOver; }
function mOut(src,clrIn)
{ src.bgColor = clrIn;
}
</script>
<table>
<tr><td align="center" onmouseover="mOvr(this,'#FF0000');"
onmouseout="mOut(this,'#FFFFFF');" bgcolor="FFFFFF"> Essai </td>
</tr> </table>
Ouvrir et fermer une
fenêtre
Voici une métode pour ouvrir une fenêtre de type Pop
Up et la refermer par la suite.
<!---Dans le Body--->
<a href="#" onClick="Test()">Ouvrir</a>
<a
href="javascript:nom.close()">Fermer</a>
<!---Dans le head--->
<script language="JavaScript">
function Test()
{
nom=open('blank.htm','nom');
}
</script>
Exemple de script en VbScript
<script language="VBScript">
Sub OpenVBSWin
MsgBox "Cette fenetre a été
ouverte à l'aide de VBScript", _
64, _
"Exemple de Script"
End Sub
</script>