Les variables peuvent être déclarées avec le mot var. Il est possible d'indiquer leur type ou de les initialiser.
On trouve les types :
Exemples de déclarations :
var l=new Boolean(true);
var n=new Number(-5.25);
var s=new String("Quelques mots en passant.");
var a=new Array("chat","chien","cheval","chou");
Le type d'une variable étant déterminé par son contenu, ces déclarations peuvent se réduire à :
var l=true;
var n=-5.25;
var s="Quelques mots en passant.";
var a=["chat","chien","cheval","chou"];
JavaScript fournit les opérateurs classiques.
Une fonction est une suite d'instructions à laquelle on attribue un nom. Elle peut utiliser des paramètres et renvoyer un résultat.
Les fonctions sont déclarées par le mot function suivi par les paramètres entre parenthèses, puis la suite d'instructions associée entre accolades. Le mot return permet d'indiquer la valeur renvoyée par la fonction. Par exemple, pour calculer la moyenne de 4 nombres :
function moyenne(a,b,c,d) {
s=a+b+c+d;
return s/4;
}
Une fonction peut appeler d'autres fonctions, ou même s'appeler soi-même.
Le déroulement séquentiel des instructions peut être modifié grâce aux structures de contrôle.
if (condition) {instruction1};
else {instruction2}
switch (variable) {
case val1 :
instruction_1;
break;
case val2 :
instruction_2;
break;
....
default : instruction_n;
}
for (expinit; condition; progression) {instruction}
somme=0;
for (n=1; n<=10; n++) {somme=somme+n};
while (condition) {instruction};
do {instruction} while (condition);
Il est possible d'insérer du JavaScript à peu près n'importe où dans un document HTML, que ce soit dans l'entête ou dans le corps du document.
Un script JavaScript est introduit par la balise <SCRIPT> complétée
par l'attribut LANGUAGE indiquant que l'on utilise JAVASCRIPT.
Exemple :
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
Le script peut contenir :
Ce premier script se contente de nous dire bonjour.
<HTML>
<HEAD>
<TITLE>Essai de JavaScript</TITLE>
</HEAD>
<BODY>
<P>Bonjour de HTML.</P>
<SCRIPT LANGUAGE="JavaScript">
window.document.write('<P><B>Bonjour de JavaScript.</B></P>');
</SCRIPT>
</BODY>
</HTML>
Le document affiche deux lignes, la première vient de HTML, la seconde
est écrite par le script.
Celui-ci ne contient qu'une commande qui est un appel à une
méthode de l'objet document de la fenêtre. Cette méthode,
la méthode write, permet d'écrire directement du code
HTML dans le document. Elle accepte donc comme arguments des chaînes
de caractères représentant ce code.
Note : chaque commande se termine par un point-virgule.
JAVASCRIPT est un langage de programmation orienté objets.
Les objets sont des structures logiques regroupant d'une part des propriétés
(qui ressemblent aux variables des autres langages) et d'autre part des
méthodes (qui ressemblent aux procédures ou aux fonctions
des autres langages). Chaque objet est donc caractérisé par
un certain nombre de propriétés et de méthodes.
Il peut représenter :
Les objets que nous utiliserons sont déjà définis par JavaScript, mais il est possible d'en créer soi-même.
Utilisons l'objet Date pour que notre document affiche la date courante.
<SCRIPT LANGUAGE="JavaScript">
var d=new Date;
window.document.write('<P><B>Bonjour de JavaScript.</B></P>');
window.document.write('<P>Date du jour : ',d,'</P>');
</SCRIPT>
Nous avons commencé par créer une variable contenant l'objet, qui est initialisé avec la date courante. Nous l'avons ensuite affichée avec la méthode write vue précédemment. Ce qui est apparu contient en plus de la date, des renseignements sur le jour et l'heure. Pour extraire le numéro du jour, le numéro du mois et le numéro de l'année, nous utiliserons des méthodes spécifiques de l'objet Date. On obtient :
<SCRIPT LANGUAGE="JavaScript">
var d=new Date;
window.document.write('<P><B>Bonjour de JavaScript.</B></P>');
window.document.write('<P>Date du jour : ',d,'</P>');
var j=d.getDate();
if (j<10) {j='0'+j};
var m=d.getMonth()+1;
if (m<10) {m='0'+m};
var a=d.getFullYear();
window.document.write('<P>Date : ',j,'/',m,'/',a,'</P>');
</SCRIPT>
Remarques :
Pour pouvoir utiliser la technique d'affichage de la date vue précédemment, nous allons créer une fonction réalisant ce travail. Cette fonction utilisera un argument qui sera un objet Date. On pourra la déclarer dans l'entête du document et l'utiliser dans le corps.
<HTML>
<HEAD>
<TITLE>Essai JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function afficheDate(unedate) {
var j=unedate.getDate();
if (j<10) {j='0'+j};
var m=unedate.getMonth()+1;
if (m<10) {m='0'+m};
var a=unedate.getFullYear();
window.document.write(j,'/',m,'/',a);
}
</SCRIPT>
</HEAD>
<BODY>
<P>Bonjour de HTML</P>
Nous sommes le
<SCRIPT LANGUAGE="JavaScript">
var d=new Date;
afficheDate(d);
</SCRIPT>
.
</BODY>
</HTML>
Les scripts JavaScript peuvent être enregistrées dans un fichier externe d'extension .js. On utilise alors l'attribut SRC de la balise SCRIPT. On obtient alors :
<SCRIPT LANGUAGE="JavaScript" SRC="fichier.js">
</SCRIPT>
Les mêmes fonctions peuvent alors être utilisées par des documents HTML différents.
L'exécution des fonctions JavaScript peut être déclenchées par certains évènements. L'association fonction/évènement se fait en utilisant certains attributs spécifiques des balises.
Le chargement d'un document déclenche l'évènement OnLoad, sa fermeture déclenche l'évènement OnUnLoad. On peut associer une fonction JavaScript à ces évènements dans la balise BODY.
Par exemple, pour qu'une fenêtre de message dise 'Bonjour', au moment du chargement du document, on écrira :
<BODY ONLOAD="alert('Bonjour !')" ONUNLOAD="alert('Au revoir !')">
Le passage du pointeur de la souris sur un lien hypertexte génère un évènement OnMouseOver. Sa sortie génère un évènement OnMouseOut. On peut associer une fonction JavaScript à ces évènements dans la balise A.
Par exemple, pour qu'une image associée à un lien réagisse au passage de la souris en faisant apparaître un bord, on écrira :
<A HREF="lien.htm"
ONMOUSEOVER="document.images['ima'].border=2"
ONMOUSEOUT="document.images['ima'].border=0">
<IMG SRC="image.gif" NAME="ima" BORDER=0>
</A>
Cliquer sur un bouton contenu dans un formulaire génère un évènement OnClick. On associe cet évènement à une fonction JavaScript dans la balise INPUT.
Par exemple, pour que l'appui sur un bouton Test provoque l'affichage d'un message, on écrira :
<INPUT TYPE="BUTTON" ONCLICK="alert('Vous avez cliqué.')">
Changer l'élément sélectionné d'une liste génère l'évènement OnChange. On associe cet évènement à une fonction JavaScript dans la balise SELECT.
Par exemple, pour changer la couleur de fond du document à partir d'une liste de couleurs, on écrira :
<SELECT SIZE=3 NAME=choix
onChange="document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="aquamarine">aquamarine</OPTION>
<OPTION VALUE="cadetblue">cadetblue</OPTION>
<OPTION VALUE="chocolate">chocolate</OPTION>
<OPTION VALUE="darkgoldenrod">darkgoldenrod</OPTION>
<OPTION VALUE="darkkhaki">darkkakhi</OPTION>
</SELECT>
On peut installer une minuterie grâce à la méthode setInterval déclenche une action répétitive périodique. Sa forme générale est :
id=setInterval(action,periode,[arg1,[arg2....]]);
avec :
On peut arrêter la répétition de l'action en faisant appel à la méthode clearInterval avec l'identificateur de minuterie comme argument.
Exemple : créer une horloge.
<HTML>
<HEAD>
<TITLE>Horloge</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var t=null;
var heure="";
function Heure() {
var d=new Date;
var h=d.getHours();
var m=d.getUTCMinutes();
var s=d.getUTCSeconds();
heure="";
if (h<10) {heure="0"};
heure=heure+h+":";
if (m<10) {heure=heure+"0"};
heure=heure+m+":";
if (s<10) {heure=heure+"0"};
heure=heure+s;
document.horloge.cadran.value=heure;
}
function Depart() {
Heure();
t=setInterval("Heure()",1000);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="Depart()">
Mon horloge :
<FORM NAME="horloge">
<INPUT NAME="cadran" TYPE="text" Size=8 READONLY>
</FORM>
</BODY>
</HTML>
La méthode setTimeout() permet de provoquer l'exécution d'une fonction JavaScript après un certain délai. Sa forme générale est :
id=setTimeout(action,delai[,arg1[,arg2.....]]);
avec :
On peut empêcher le déclenchement de l'action en faisant appel à la méthode clearTimeout avec l'identificateur de minuterie comme argument.
On peut, par exemple, utiliser la méthode setTimeout dans des questionnaires où le temps de réponse est limité.
Votre mission, si vous l'acceptez, consistera à réaliser un QCM de 5 questions avec un temps de réponse limité à 10 secondes par question. Un score final devra être affiché après la dernière question.
La page devra contenir deux cadres :
Vous devrez ainsi créer 8 fichiers :