|
Ces lignes sont pour ceux qui ne veulent pas enter dans les détails du JavaScript ou pour
les débutants.
JavaScript à été développé par Netscape, repris ensuite par Internet Explorer. C'est du code que l'on ajoute dans la page HTML. Ce code est interprété par votre navigateur. Il apporte quelques améliorations dans vos présentations. Il permet, par exemple, de faire des tests sur les champs de vos formulaires, des petites animations, etc. JavaScript est supporté par Netscape depuis le version 3.x et Internet Explorer depuis la 4.x Attention : le language JavaScript est sensible à la case (aux majuscules et minuscules) ! |
<HEAD> <SCRIPT LANGUAGE="JavaScript" SRC="script.txt"> <!-- //--> </SCRIPT> </HEAD> <BODY> <script>ladate()</script> . . . . . . . . |
Dans la partie HEAD d'un fichier HTML, on peut donner référence à un fichier texte externe contenant les fonctions JavaScript. Vous pourrez ainsi disposer de vos fonctions dans toutes vos pages, sans les réécrire. Gain de temps, de place et discrétion... Remarque: L'importation d'un fichier source, ne fonctionne pas sous Netscape 3.x |
<BODY> <FORM> Nom<br> <INPUT TYPE="text" NAME="champ1" onChange="this.value = this.value.toUpperCase()"> Prénom<br> <INPUT TYPE="text" NAME="champ2" onChange="this.value = this.value.toLowerCase()"> </FORM> |
En ajoutant à votre ligne INPUT, le onChange="... selon le modèle de gauche, lors du passage au champ suivant, le contenu passera automatiquement en majuscule. En changeant le toUpperCase par toLowerCase, tout le champ passera en minuscule. |
<SCRIPT LANGUAGE="JavaScript">
<!-- début du masquage
var max = 7;
phrase = new Array(max)
phrase[0] = "Je chante sous la douche"
phrase[1] = "La vie n'est pas triste"
phrase[2] = "Je suis un clown"
phrase[3] = "J'apprends vite ce matin"
phrase[4] = "Je suis heureux de vivre"
phrase[5] = "J'aime la nature"
phrase[6] = "Je soigne mes plantes"
var nb = Math.floor(max*Math.random())
var nom = "cac0" + nb + ".jpg"
document.write
("<img src='"+nom+"' width=250 alt='"+nom+"'>")
document.write
("<br>"+ nom+"<p>")
document.write
(phrase[nb])
.......
|
Afficher de façon aléatoire une image, un texte, donnera à vos pages un aspect plus vivant. Sur la gauche, un exemple de code JavaScript pour afficher une image et un texte. Vous pouvez presser sur le bouton "actualiser" de votre browser pour découvrir les changements. |
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var control = 1;
function flash(){
if (control == 1) {
window.status="NOUVEAUTE";
control=0;
pause=1300; // en msec avec message
}
else {
window.status="";
control=1;
pause=200; // en msec sans message
}
setTimeout("flash()",pause);
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad=flash()>
. . .
. . .
|
Avec cette fonction, un texte clignote dans la barre de status. Vous pouvez changer le temps de l'affichage et de l'extinction. Introduire la fonction dans la partie HEAD. Puis dans le marqueur BODY, placez onLoad=flash() comme dans le listing ci-contre. |
<SCRIPT LANGUAGE="JavaScript">
<!-- début du masquage
date_angl = document.lastModified.substring(0,10);
date_fren = date_angl.substring(3,6) +
date_angl.substring(0,3) +
date_angl.substring(6) ;
document.write ("Dernière mise à jour le "
+ date_angl + " (en Anglais)"+"
|
Voici comment afficher la date de dernière mise à jour de votre document avec un petit script. En bas de votre page, ajoutez une fois pour toute le script ci-contre. Vous pouvez choisir le format Français ou Anglais |
<BODY onload=tty()>
<SCRIPT LANGUAGE="JavaScript">
<!-- début du masquage
var esp = " ";
var txt = "BONJOURS LES AMIS";
var letexte = esp + txt + esp;
var i = 0;
var pause = 70; //pause entre les lettres
var sens = 0;
function tty()
{
// Fonction écrite par Jean-Pierre Perroud
window.status = letexte.substring(esp.length,i);
document.affichage.texte_tty.value
= letexte.substring(esp.length,i);
if (sens == 0)
i++;
else
i--;
if (i == letexte.length+1)
sens = 1;
if (i == 0)
sens = 0;
setTimeout("tty()",pause);
}
// fin du masquage -->
</SCRIPT>
<form name="affichage">
<INPUT TYPE=text SIZE=30 NAME="texte_tty">
</form>
|
La fonction tty() est appelée avec le : <BODY onload=tty()> au démarrage de la feuille. Avec la ligne : window.status = letexte.substring(esp.length,i);
l'affichage se fait dans la fenêtre de status avec la ligne :
document.affichage.texte_tty.value l'affichage se fait dans le champ texte Vous pouvez choisir de n'afficher qu'une seule des deux possibilités, ou les deux à la fois. |
<SCRIPT LANGUAGE="JavaScript"> <!-- Ilest = new Date(); Heures = Ilest.getHours(); Minutes = Ilest.getMinutes(); Secondes = Ilest.getSeconds(); document.write(Heures+":"+Minutes+":"+Secondes); //--> </SCRIPT> |
Dans votre document vous pouvez ajouter le code de gauche. Dès le lancement du document, l'heure est saisie puis affichée. Cette heure est fixe puisque nous allons la lire qu'une seule fois. |
<HEAD>
<SCRIPT language="JavaScript">
<!--
function AccesProtege() {
self.location.href=prompt("Mot de passe :","") + ".htm";
}
-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:AccesProtege()">Pages perso</A></br>
. . .
. . .
. . .
|
Dans une page, vous pouvez introduire un mot de passe pour accéder à une page perso. Il suffit de donner le nom de la page sans l'extension .htm pour ouvrir celle-ci.
Essayez le lien ci-dessous avec comme mot de passe : jeux
On peut ajouter des tests, pour compléter ce code, mais il fonctionne déjà, car seul vous connaissez le nom de vos pages :-) |
<INPUT TYPE="button" VALUE= "Imprimer la page" onClick=print()> |
Dans votre document vous pouvez ajouter le code de gauche. Un bouton d'impression sera alors disponible sur votre page.
|
|
Jean-Pierre Perroud Switzerland Dernière mise à jour : |