JavaScript
Ces lignes sont pour ceux qui ne veulent pas enter dans les détails du JavaScript ou pour les débutants.
Quelques petits trucs et fonctions pour vous simplifier la vie. Vous pourrez ainsi ajouer tout simplement du JavaScript dans vos pages HTML en reprenant ces exemples par un simple "copier coller".

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 annimations, etc.

JavaScript est supporté par Netscape depuis le version 3.x et Internet Explorer depuis la 4.x

Attention : le language JavaScript est sensible aux majuscules et minuscules !

Index

Scripte dans un fichier externe
Majuscule et minuscules
Générer un nombre aléatoire
Satus clignotant
 Passage de la souris
Date de mise à jour
Texte télétype
Afficher l'heure
 Print du document
Un mot de passe
Fin du document

Les fonctions JavaScript dans un fichier externe 


<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

Haut de la page

Imposer majuscule ou minuscule dans un formulaire 


<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.

FORMULAIRE exemple

Nom

Prénom
Haut de la page

Générer un nombre aléatoire 


<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 JacaScript pour afficher une image et un texte.

Vous pouvez presser sur le bouton "actualiser" de votre browser pour découvrir les changements.

Haut de la page

Faire clignoter un message dans la barre de status 

<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.

Haut de la page

Passage de la souris sur ... 

// Pour Nestscape seule posibilité
// valable aussi pour IE 4.x

<A HREF="#liens"
onMouseOver="window.status='LIENS';
return true">Les liens</A>


// Seulement pour IE 4.x

<IMG SRC="haut.gif" border="0"
onMouseOver="window.status='TEXTE';
return true">
Avec Netscape 3.x et plus

onMouseOver fonctionne seulement avec des références sur du texte.

Exemple : Début de la page et Les liens

Avec IE 4.x

Lorsque votre souris passe sur un objet de type champ, zone d'un tableau, bouton, image, vous pouvez afficher dans la barre de status par exemple, un texte explicatif.

Essayer de passer sans cliquer sur la fèche, liens ou le listing ci-contre.

Remarque:
N'est pas encore utilisable sur le Web, il faudra attendre les prochaines versions de nos browsers.

Date de mise à jour de votre document 


<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)"+"
");
    document.write ("Dernière mise à jour le "
    + date_fren + " (En français)");


// fin du masquage -->
</SCRIPT>
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
Haut de la page

Texte télétype dans une fenêtre 


<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
désactivé dans cet exemple

avec la ligne :

document.affichage.texte_tty.value
= letexte.substring(esp.length,i);

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.
Haut de la page

Affiche l'heure dans un document 


<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.

Haut de la page

Un mot de passe 


<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 ouvrie celle-ci.

Essayez le lien ci-dessous avec comme mot de passe : jeux
Pressez sur page "précédante" de votre browser pour revenir ici.

On peut ajouter des tests, pour compléter ce code, mais il fonctionne déjà, car seul vous connaissez le nom de vos pages :-)

Haut de la page

Impression d'un document 



<INPUT TYPE="button" VALUE= "Imprimer la page" onClick=print()>
Dans votre document vous pouvez ajouter le code de gauche.

Un boutton d'impression sera alors disponible sur votre page.

Haut de la page

[Home Page][Programmation]
Jean-Pierre Perroud
Switzerland
Dernière mise à jour le 27 janvier 2007