CyberZoïde

Webzine de vulgarisation des sciences et techniques.

Informatique
Sciences
Projets

membre de

Developpez.com
 

XI. Quelques éléments de JavaScript

Par Hugo ETIEVANT

  1. Pourquoi utiliser du JavaScript ?
  2. Les bases
    1. Intégration d'un script à une page
    2. Mon premier script
    3. Les variables
    4. Les fonctions
  3. Afficher la date et l'heure
  4. Rollover
  5. Contrôle des champs d'un formulaire
  6. Faire apparaître une popup

Pourquoi utiliser du JavaScript ?

Du fait de la faible interactivité des pages HTML avec l'utilisateur, il a été intégré aux pages web le langage JavaScript (dérivé du langage de programmation Java).
Ce langage permet d'intégrer de vrai petites applications, de faire des jeux... On ne s'intéressera ici qu'à des actions beaucoups plus simples mais tout aussi utiles.

Les bases

Le JavaScript est un langage interprété par le navigateur de l'internaute, il est intégré directement dans les pages HTML comme le sont lesfeuilles de style.

Intégration d'un script à une page

Vous écrivez le code javascript directement dans votre page HTML, entre les balises <body> et </body> comme suit :

<script language="javascript">
votre code javascript ici
</script>

ou encore comme cela :

<script type="text/javascript">
votre code javascript ici
</script>

ou même dîtes au navigateur d'allez chercher votre script dans un fichier à part :

<script src="mon_script.js" type="text/javascript" />

Mon premier script

Créons notre premier script. Il va afficher 'bonjour'.

<script language="javascript">
document.write('bonjour');
</script>

Décryptons un peu cet exemple. Le JavaScript est un langage objet.C'est-à-dire que les scripts manipulent des objets, qui eux-mêmes possèdent des méthodes (actions possibles avec cet objet) et des attributs (valeurs d'états).
Ici on fait appelle à la méthode write() (qui veut dire écrire) de l'objet document qui est le document (c'est-à-dire la page HTML) en cours.
A cette méthode, est passé un paramètre de valeur 'bonjour' qui est une chaîne de caractères entre quotes ''.

On remarquera que chaque instruction se termine par un point virgule ;(c'est obligatoire).

Les variables

Maintenant, compliquons un peu notre script et ajoutons une variable.

<script language="javascript">
var s;
s = 'bonjour';
document.write(s);
</script>

Ici, on remarque la présence d'un nouvel élément : la variable s à laquelle on affecte la valeur 'bonjour' grâce à l'opérateur d'affectation égal =. Avant d'utiliser cette variable, nous l'avions déclarée par l'usage du mot réservé var pour dire au module du navigateur chargé d'interpréter le JavaScript, qu'il va bientôt rencontrer la variable s.Cette déclaration préalable est facultative.

Les fonctions

Une fonction est une portion de code qui pourra être utilisée à n'importe quel moment par simple appel à son nom.

<script language="javascript">
function afficherBonjour() {
 s = 'bonjour';
 document.write(s);
}
afficherBonjour();
</script>

Ici, nous avons créé une fonction qui exécute le code de nos exemples précédents.A l'appel de la fonction, le code déclaré dans la fonction est exécuté (et seulement à ce moment là.)

Une fonction peut faire des choses incroyables : recevoir des paramètres et même retourner une valeur !

<script language="javascript">
function afficher(i) {
 if(i<=100)
  document.write(-i,'<br />');
 else
  document.write('Votre nombre : '+i,'<br />');
}
afficher(25);
afficher(125);
</script>

Notre fonction afficher affiche le nombre qu'on lui passe en paramètre. Grace à une structure alternative if else, on peut en afficher l'opposé s'il est inférieur ou égal à 100.

On découvre aussi que la fontion write() de l'objet document peut prendre plusieurs paramètres séparés par une virgule.

De plus, pour concaténer deux chaînes de caractères, on utilise l'opérateur plus +.

Afficher la date et l'heure

On souhaite afficher sur notre page la date du jour et l'heure.

<script language="javascript">
today = new Date();
document.write("Nous sommes le ",today.getDate(),"/",today.getMonth()+1,"/",today.getYear(),"<br />");
document.write("Il est ",today.getHours(),":",today.getMinutes(),":",today.getSeconds(),"<br />");
</script>

On a donc une variable today qui est un objet instance de la classe Date. Attention à la casse, JavaScript est sensible aux majuscules/minuscules. Et oui, le JavaScript est un langage orienté objet !

Notre objet today possède les méthodes suivantes : getDate(), getMonth(), getYear(), getHours(), getMinutes() qui retournent respectivement le jour, le mois (moins un), l'année, l'heure et les minutes actuelles.

A noter que les chaînes de caractères peuvent être délimitées par des simples '' ou doubles quotes "".

Affichons maintenant la date de dernière modification de la page par appel de l'attribut lastModified de l'objet document.

<script language="javascript">
document.write("Dernière mise à jour le ",document.lastModified);
</script>

Malheureusement, il nous affiche cette date au format anglophone avec le mois avant le jour, contrairement au format francophone. On va donc y remédier en allant chercher dans cette chaîne de caractère tel et tel caractère pour les mettre dans l'ordre.

<script language="javascript">
date = document.lastModified;
jour = date.charAt(3)+date.charAt(4);
mois = date.charAt(0)+date.charAt(1);
an = date.charAt(6)+date.charAt(7)+date.charAt(8)+date.charAt(9);
document.write("Dernière mise à jour le ",jour,"/",mois,"/",an);
</script>

La variable date est une chaîne de caractères puisqu'on lui affecte la date de dernière modification document.lastModified qui est elle aussi une chaîne.A ce titre, elle dispose des méthodes dues à sa classe. Dont charAt(i) qui retourne le ième caractère de la chaîne, sachant que l'indice commence à zéro.

Rollover

Le Rollover consiste à remplacer une image par une autre lorsque celle-ci est survolée par le curseur de la souris. Cela produit un effet graphique surprenant qui permet de mettre en relief des liens hypertextes.

<a href="index.php3"
  onMouseOver="document.ex1.src='../images/milieu_.gif'"
  onMouseOut="document.ex1.src='../images/milieu.gif'">
    <img src="../images/milieu.gif" width="15" height="17" border="0" name="ex1" />
</a>

A la balise de lien hypertexte a, on a rajouter les attributs onMouseOver et onMouseOut qui permettent respectivement d'exécuter du code JavaScript lorsque la souris passe sur l'image et lorsqu'elle quitte l'image.
Dans le premier cas, on modifie l'URL (attribut src pour source) de l'image portant le nom ex1 (nom donné par l'attribut namede la balise img) du document en cours document.
Et dans un second temps, on revient à l'image d'origine.

On peut aussi changer l'affichage de la barre d'état du bas de la fenêtre du navigateurdurant le survol du lien en modifiant la valeur de l'attribut status de l'objet window (attention, le return true; est indispensable):

<a href="index.php3"
  onMouseOver="
    document.ex1.src='../images/milieu_.gif';
    windows.status='Oui, ici !';
    return true;"
  onMouseOut="
    document.ex1.src='../images/milieu.gif';
    windows.status='';
    return true;">
        <img src="../images/milieu.gif" width="15" height="17" border="0" name="ex1" />
</a>

Contrôle des champs d'un formulaire

Avant qu'un formulaire vous soit envoyé par mail, il peut être intéressant d'en vérifier le contenu. Par exemple rendre obligatoire la saisie de tel ou tel champs...

<script language="javascript">
function verif_email() {
 if(document.inscription.email.value == '') {
  alert("Vous devez saisir votre adresse de messagerie électronique !");
  return false;
 }
 else
  return true;
}
</script>
<form
  action="mailto:vous@labas.fr"
  method="POST"
  enctype="text/plain"
  name="inscription"
  onSubmit="return verif_email();">
    Votre email : <input type="text" name="email" /> <input type="submit" value="Je m'abonne !" />
</form>
Votre email :

Par exemple, on vérie que la valeur (value) du champs email du formulaire inscription du document en cours n'est pas vide. S'il est vide on affiche une boite de dialogue avec la fonction alert().

A noter que la fonction verif_email() retourne un booléen qui vaut vrai true si le test est passé avec succès et faux (false) sinon. Si ce booélen est à vrai, alors le formulairesera effectivement validé.Cette fonction est invoquée à l'évènement onSubmit c'est-à-dire lors de la validation du formulaire par l'internaute.

Faire apparaître une popup

Une popup est une petite fenêtre dans barre de navigation dont il faut faire un usage modéré...

<a
  href="javascript:void(0);"
  onClick="window.open(document.location,'Mapopup','width=200,height=300');">
    Cliquez ici !
</a>
Cliquez ici !

La méthode open() de l'objet window permet d'ouvrir une nouvelle fenêtre du navigateur. Cette méthode prend trois paramètres : l'URL de la page à ouvrir, le titre que devra porter cette nouvelle fenêtre, et divers paramètres.
L'attribut location de l'objet document contient l'URL de lapage en cours.

Note : la fonction void() avec zéro comme paramètre permet au lien hypertexte a d'être désactivé.

La méthode close() de l'objet window permet de fermer la fenêtre, pratique pour fermer une popup.

 

Ce document n'est qu'une présentation succinte du JavaScript, j'espère qu'il vous aura donné envie d'approfondir le sujet.