Chapitre 10 Des exemples de scripts...

10.1 Date et Dernière mise à jour...

Voici le script que j'utilise sur ma homepage. Il affiche la date avec l'heure ainsi que la date et l'heure de la dernière modification du fichier html en cours. Ces deux fonctionnalités peuvent tout à fait être séparées l'une de l'autre.

function MakeArray(n){
this.length=n; return this
}

function AfficheDate () {
date=""; jour="";
mois=""; annee="";
heures=""; minutes="";
HeureActuelle="";

nom_mois=new MakeArray(12);
nom_mois[1]="janvier"
nom_mois[2]="février"
nom_mois[3]="mars"
nom_mois[4]="avril"
nom_mois[5]="mai"
nom_mois[6]="juin"
nom_mois[7]="juillet"
nom_mois[8]="août"
nom_mois[9]="septembre"
nom_mois[10]="octobre"
nom_mois[11]="novembre"
nom_mois[12]="décembre"

nom_jour=new MakeArray(7);
nom_jour[1]="dimanche"
nom_jour[2]="lundi"
nom_jour[3]="mardi"
nom_jour[4]="mercredi"
nom_jour[5]="jeudi"
nom_jour[6]="vendredi"
nom_jour[7]="samedi"

Today = new Date ();
ltime = new Date(document.lastModified);
var lm = ltime.getMinutes();
date=Today.getDate();
jour=nom_jour[Today.getDay()+1];
mois=nom_mois[Today.getMonth()+1];
annee=1900+Today.getYear();
heures = Today.getHours();
minutes = Today.getMinutes();
HeureActuelle = (heures) + ((minutes<10)?"h0":"h") + minutes
var ltext =nom_jour[ltime.getDay()+1]+" "+ltime.getDate()+" "+nom_mois[ltime.getMonth()+1]+" "+ltime.getYear()+" à "+ltime.getHours()+"h";
ltext += ((lm < 10) ? "0" : "")+lm;

document.write ("Nous sommes le "+jour +" "+date + " "+mois +" "+annee + ". Il est " + HeureActuelle + ". <BR>");
document.write ("La dernière mise à jour a été faite le " + ltext +"."); }

Le résultat de ce script est, en y ajoutant quelques verifications:

10.2 Détection du navigateur...

Ce script permet de déterminer votre navigateur ainsi que sa version.

function browserID() {
var name = navigator.appName ;
var version = navigator.appVersion;

if (name == 'Netscape') {
name = 'Netscape Navigator';
version = navigator.appVersion.substring(0,5);
if (version=="4.5 [") {version="4.5"}
ID = 'Vous utilisez ' + name + ' ' + version; }

else { if (name == 'Microsoft Internet Explorer') {
id = version.indexOf('MSIE');
version = version.substring(id+5,id+9);
if (version=="5.0;") {version="5.0"}
ID = 'Vous utilisez ' + name + ' ' + version ; }

else { name = ' '; version = ' '; ID = ' '; } }

return ID; }

On obtient alors :

10.3 Une boite d'alerte personnalisée

10.4 Un texte avec un dégradé de couleurs :

var hexa = "0123465789ABCDEF";

function DecToHexa(DecNb) {
x = Math.floor(DecNb / 16);
h = hexa.charAt(x);
x = DecNb % 16;
h += hexa.charAt(x);
return h; }

function Degrade(dr,dg,db,fr,fg,fb,texte) {
steps = texte.length;
cr = dr; cg = dg; cb = db;
sr = (fr - dr) / steps; sg = (fg - dg) / steps; sb = (fb - db) / steps;
for (var x = 0; x <= steps; x++) {
document.write('<FONT COLOR="#' + DecToHexa(cr) + DecToHexa(cg) + DecToHexa(cb) + '">');
document.write(texte.charAt(x));
document.write('</FONT>');
cr += sr; cg += sg; cb += sb; }
}

Les résultat est coloré :

10.5 Controle de formulaire

10.6 Pour sortir des frames...

Mettre cette fonction dans le "onLoad" du "BODY" :

function sortir_frames() {
if (self!=top) top.location.href=self.location.href;
}

10.7 Pour charger plusieurs frames d'un seul click...

<A HREF="p1.htm" TARGET="cadre1"
onClick="parent.cadre2.location='p2.htm'; parent.cadre3.location='p3.htm';">Votre lien</A>

10.8 Lien hypertexte avec évènement OnMouseOver...

function stat(txt) {
window.status = txt; setTimeout("erase()",1500);
}
function erase() {
window.status="";
}

Premier exemple : Index
<A HREF="index.html" onMouseOver="stat('Page principale');return true">Index</A>

Deuxième exemple : Index
<A HREF="index.html" onMouseOver="window.status='Page principale';return true" onMouseOut="window.status='';return true">Index</A>

10.9 Menu avec différents choix...

function sendIt(fileName) {
if (fileName != "") { location.href=fileName }
}

<FORM>
<SELECT name="chooseFile" size="1" onchange="sendIt(this.options[selectedIndex].value)">
<OPTION value selected="selected">Quick Link </OPTION>
<OPTION value="home.asp">Homepage</OPTION>
<OPTION value="divers_html.html">HTML</OPTION>
</FORM>

Ce qui donne finalement: