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 ajouter 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 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) !

Index :.

Scripte dans un fichier externe
Majuscule et minuscules
Générer un nombre aléatoire
Satus clignotant
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


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


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

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


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.


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


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.


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.


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

Pages perso

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


Impression d'un document :.



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