|
Quelques fonctions |
|
Exécuter une fonction JavaScript
Voici quelques une des solutions les plus utilisées :
OnLoad :
Si une fonction est définie dans l'en-tête, on peut l'exécuter avec Onload (Execute la fonction au chargement du document).
<HTML> <HEAD> <TITLE> Le titre </TITLE>
<SCRIPT LANGUAGE="JavaScript">
fonction fonction1(){
alert("Une petit Fonction JavaScript...");
}
</SCRIPT>
<BODY OnLoad="fonction1()">
</BODY> </HTML>
Ex: Script de l'introduction...
Utiliser le bouton gris :
<FORM>
<INPUT TYPE="button" value="Exécuter" onClick="window.alert('Pourquoi pas la Boite ?')">
</FORM>
Utiliser un lien HyperText :
Avec du Texte : Cliquez ici
<A HREF="JavaScript: Fonction()"> Cliquez ici </A>
Avec une image : <A HREF="JavaScript: Fonction()"> <IMG SRC="smiley.gif" </A>
Fonction() étant un petit programme prédéfini dans l'en-tête du document (<HEAD> </HEAD> )
|
|
Boîte de Message |
Il est possible de faire apparaître une boite de message avec la fonction : window.alert('message') <FORM>
<INPUT TYPE="button" value="Boite de message" OnClick="window.alert('Bonjour !')">
</FORM> |
|
Au passage de la souris
Cet exemple permet d'afficher un test dans la barre d'état.
<A HREF=" " OnMouseOver="window.status='Sympa pour donner des informations'; return true"> Passer la souris ici </A>
Passer la souris ici
Cet exemple permet d'ouvrir une boîte de Message au passage de la souris.
<A HREF=" " OnMouseOver="window.alert('Surprenant Non ?')"> Passer la souris ici </A>
Passer la souris ici
|
|
Retour sur la page précédente
<FORM>
<INPUT TYPE="button" VALUE=" Retour " onClick="history.back()">
</FORM> |
|
Défilement de texte |
|
Dans un document |
|
Il faut inclure ce Script dans l'en-tête :
<SCRIPT LANGUAGE="JavaScript">
var id,pause=0,position=0;
function banner() {
var i,k,speed=10,msg="Mettre ici le texte";
k=(66/msg.length)+1;
for(i=0;i<=k;i++) msg+=" "+msg;
document.defil.banner.value=msg.substring(position,position+50);
if(position++==msg.length) position=0;
id=setTimeout("banner()",1000/speed); }
</SCRIPT>
Ainsi qu'inclure dans <BODY> : <BODY ... OnLoad="banner()">
Et le formulaire dans le document :
<FORM NAME="defil">
<INPUT TYPE="text" NAME="banner" SIZE="40">
</FORM> |
|
Dans la barre d'état |
|
Il faut inclure ce Script dans l'en-tête :
<SCRIPT LANGUAGE="JavaScript">
var id,pause=0,position=0;
function banner() {
var i,k,speed=10,msg="Mettre ici le texte";
k=(66/msg.length)+1;
for(i=0;i<=k;i++) msg+=" "+msg;
window.status=msg.substring(position,position+100); if(position++==msg.length) position=0;
id=setTimeout("banner()",1000/speed); }
</SCRIPT>
Ainsi qu'inclure dans<BODY> : <BODY ... OnLoad="banner()"> |
|
Ping Pong |
|
Attention :
Cette routine a un Copyright (©) vous devez laisser les commentaires si vous l'utilisez, mais vous pouvez changer le texte qui défile...
Il faut inclure ce Script dans l'en-tête :
<SCRIPT LANGUAGE="JavaScript">
<!--
/* MjM'S JAVA CODENAME = PINGPONG
This JavaScript Code was written by MjM for Hyperchat UK
I am not responsible for any damage caused by my code.
This code can be modified as long as the Author's Name is still attached.
Email : MjM@hyperchat.co.uk
© Copyright 1996
*/
var yourwords = "* MjM's HTML & JavaScript Guide - http://hyperchat.co.uk/u/mjm/guide.htm *";
var buffer1=" ";
var buffer2=" ";
var message1=buffer1+yourwords+buffer2;
var dir = "left";
var speed = 75;
function pingpong()
{
if (dir == "left")
{
message2=message1.substring(2,message1.length)+" ";
window.status=message2;
setTimeout("pingpong();",speed);
message1=message2;
if (message1.substring(0,1) == "*") dir="right";
}
else
{
message2=" "+message1.substring(0,message1.length-2);
window.status=message2;
setTimeout("pingpong();",speed);
message1=message2;
if (message1.substring(message1.length-1,message1.length) == "*") dir="left";
}
}
// -->
</SCRIPT>
Ainsi qu'inclure dans<BODY> : <BODY ... OnLoad="pingpong()">
|
|
Scrolling |
|
Attention :
Cette routine a un Copyright (©) vous devez laisser les commentaires si vous l'utilisez, mais vous pouvez changer le texte qui défile...
Il faut inclure ce Script dans l'en-tête :
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
Copyright (C) 1996 Frequency Graphics All Rights Reserved.
Feel free to reuse or modify this code,
provided this header remains in tact
Andy Augustine 2.26.96 [www.FreqGrafx.com]
*/
function snapIn(jumpSpaces,position) {
var msg = "Bienvenue!! . . . Welcome to the Gustave Eiffel's Pages ! ! . . ."
var out = ""
if (killScroll) {return false}
for (var i=0; i<position; i++)
{out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
{out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1) {
position++
if (msg.charAt(position) == ' ')
{position++ }
jumpSpaces = 100-position
} else if (jumpSpaces > 3)
{jumpSpaces *= .75}
else
{jumpSpaces--}
if (position != msg.length) {
var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,5);
} else {
scrolling = false
return false
}
return true
}
function snapSetup() {
if (scrolling)
if (!confirm('Re-initialize snapIn?'))
return false // only way to break the function
// if its already running
killScroll = true // will cause recursive snapIn to break
scrolling = true // sets so that this function can't run twice
// without breaking the first instance
var killID = window.setTimeout('killScroll=false',6)
// now that first occurance was killed,
// reset it so that this instance can proceed
scrollID = window.setTimeout('snapIn(100,0)',10)
// make sure it waits until killScroll is reset
return true //must return true to comply with above break
}
//-------------------------------------------------------------
var scrollID = Object
var scrolling = false
var killScroll = false
//-------------------------------------------------------------
// -->
</SCRIPT>
Ainsi qu'inclure dans<BODY> : <BODY ... OnLoad="snapSetup()">
|
|
Informations |
|
Sur votre Navigateur |
|
<SCRIPT language="JavaScript">
document.write('Votre Navigateur est : ')
document.write(navigator.appName)
document.write(' ')
document.write(navigator.appCodeName),
document.write(' ')
document.write('Version ')
document.write(navigator.appVersion)
</SCRIPT>
Résultat :
Votre Navigateur est : Microsoft Internet Explorer Mozilla Version 4.0 (compatible; MSIE 5.01; Windows 98; KITV5 Wanadoo) |
|
Dernière modification du document |
|
Version chiffre |
|
<SCRIPT>
document.write("This page updated on " + document.lastModified)
</SCRIPT>
This page updated on 06/10/2001 17:04:19 |
|
Version littérale |
|
Dans ce cas, il faut inclure le code script dans l'en-tête:
<SCRIPT>
function Tableau(n) {
this.length=n;
return this; }
function DateModif() {
NomMois=new Tableau(12)
NomMois[1]="janvier"; NomMois[2]="février";
NomMois[3]="mars"; NomMois[4]="avril";
NomMois[5]="mai"; NomMois[6]="juin";
NomMois[7]="juillet"; NomMois[8]="août";
NomMois[9]="septembre"; NomMois[10]="octobre";
NomMois[11]="novembre"; NomMois[12]="décembre"
Date=new Date(document.lastModified)
var Mois=NomMois[Date.getMonth()+1]
var Annee=Date.getYear()+1900
return Date.getDate()+" "+Mois+" "+Annee }
</SCRIPT>
Dans le document on insère le Script suivant à la place voulue :
<B><SCRIPT>
document.write("Dernière modification : "+ DateModif())
</SCRIPT></B> |
|
Date et Heure |
|
En Anglais |
|
Dans ce cas, il faut inclure ce Script dans l'en-tête :
<SCRIPT LANGUAGE="JavaScript">
<-- © The JavaScript Resource Center -->
var enabled = 0;
function TOfunc() {
TO = window.setTimeout( "TOfunc()", 1000 );
var today = new Date();
var todaystring = today.toString();
var i;
var fin = "";
var offset = (50 - todaystring.length) / 2;
if(offset < 0) offset = 0;
for(i=0;i < offset;i++) fin += " ";
fin += todaystring;
document.forms[0].elements[0].value = fin;
}
</SCRIPT>
Il faut Modifier <BODY> : <BODY ... OnLoad="TOfunc()">
Dans le corps du document on insère le Script suivant à la place voulue :
<FORM>
<-- © The JavaScript Resource Center -->
<TABLE BORDER=5 CELLPADDING=1 CELLSPACING=3>
<TR><TD ALIGN=CENTER>
<INPUT TYPE="text" NAME="disp" VALUE="" SIZE=43>
</TD></TR>
</TABLE>
</FORM> |
|
En Chiffres |
|
Dans ce cas, il faut inclure ce Script dans l'en-tête :
<SCRIPT>
<!--
var timerID = null;
var timerRunning = false;
function startclock () {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
showtime();
}
function showtime () {
var localnow = new Date();
var lTime = localnow.getTime()+ (localnow.getTimezoneOffset()-60)*60;
var now = new Date(lTime);
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var days = now.getDate();
var timeValue = hours
var timeDate = now.getDate() + "-" + (now.getMonth()+1) + "-" + now.getYear()
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
document.clock.face.value = timeValue;
document.clock.date.value = timeDate;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
} // -->
</SCRIPT>
Il faut Modifier <BODY> : <BODY ... onload="startclock()">
Dans le corps du document on insère le Script suivant à la place voulue :
<FORM NAME="clock" OnSubmit="0">
<TABLE BORDER=5>
<TR><TD ALIGN=CENTER>
<B>Nous sommes le :</B>
<INPUT type="text" name="date" size=8 value="">
</TD><TD ALIGN=CENTER>
<B>Il est :</B>
<INPUT type="text" name="face" size=8 value="">
</TD></TR></TABLE></FORM> |
|
Dans barre de Statut |
|
Dans ce cas, il faut inclure ce Script dans l'en-tête :
<SCRIPT LANGUAGE="JavaScript">
function doClock() {
window.setTimeout( "doClock()", 1000 );
today = new Date();
self.status = today.toString();
}
</SCRIPT>
Il faut Modifier <BODY> : <BODY ... OnLoad="doClock()">
Le corps du document ne change pas. |
