Java Script

Premier script à faire soi‐même
Il faut bien débuter un jour, alors allons‐y ! Avec un script simplissime :
alert("C'est mon 1er script");
Ce qui a pour effet d’afficher un message d’alerte :
Votre éditeur HTML

Pour écrire des scripts Javascript, vous devez utiliser votre éditeur HTML en mode Source ou
HTML et non en mode Normal.
Vous pouvez copier‐coller directement les codes de cette page dans votre éditeur HTML en
mode HTML.
Le script
1. Créez une page HTML vide.
2. Avant la balise </HEAD>, écrivez les balises d’ouverture et de fermeture d’un script
Javascript :
<script language="JavaScript">
<! Debut script
// Fin script >
</script>
Les commentaires <! et // > sont indispensables afin que les navigateurs ne supportant
pas Javascript ne retournent pas une erreur ("Debut script" et "Fin script" sont optionnels).
3. Intégrer votre instruction dans le script :
<! Debut script
// Fin script >
</script>
Voici à quoi doit ressembler votre page HTML :
<html>
<head>
<title>mon 1er script</title>
<! Debut script
// Fin script >
</script>
</head>
<body>
</body>
</html>
4. Afficher votre page dans un navigateur
Voilà, vous voilà un de plus dans le monde de Javascript !
Ecrire dans la page HTML
On va continuer dans la même veine, mais avec quelques difficultés.
document.write("C'est mon 2ème script");
Ce qui a pour effet d’écrire dans la page Web : « C’est mon 2ème script »
document.write simple
Voici votre page Web avec le script :
<html>
<head>
<title>mon 2ème script</title>
<! Debut script
document.write("C'est mon 2ème script");
// Fin script >
</script>
</head>
<body>
</body>
</html>
Afficher‐la dans un navigateur et vous aurez une ligne simple qui affiche « C’est mon 2ème
script »
Intégrer des balises HTML

Vous pouvez intégrer des balises HTML dans votre texte, ce qui vous permet de choisir la
police, la couleur, de centrer...
1er essai
Choisissons la police Arial en gras, une couleur bleue et de centrer le tout. Notre instruction
document.write devient :
document.write("<center><font face="Arial"
color="#0000ff"><b>C'est mon 2ème script</b></font></center>");
(tout est sur la même ligne, mais pour des raisons d’affichage la ligne est coupée)
Essayez d’intégrer cette instruction à la place de la précédente, ça donne une erreur :‐(
Pourquoi ?
document.write (comme alert, d’ailleurs) a comme argument une chaîne de caractères

délimitée par des guillemets ("). Si vous rajoutez d’autres guillemets ("), Javascript ne
comprend plus où commence et où finit la chaîne.
Comment faire ?
Remplacer les guillemets (") à l’intérieur de la chaîne par des apostrophes (’) :
document.write("<center><font face='Arial'
color='#0000ff'><b>C'est mon 2ème script</b></font></center>");
Et là, ça marche ! Ca donne la même chose que l’image en haut.
Guillemets et apostrophes sont interchangeables
document.write('<center><font face="Arial"
color="#0000ff"><b>C'est mon 2ème script</b></font></center>');
On a interverti guillemets (") et apostrophes (’) et ‐ en théorie ‐ le résultat devrait être le

même.
En théorie, seulement, car il y a un problème avec l’apostrophe de "C’est". Pour remédier à

ça on doit remplacer ’ par \’ :
document.write('<center><font face="Arial"
color="#0000ff"><b>C\'est mon 2ème script</b></font></center>');
Et là, on obtient le résultat précédent.
De même, on aurait pu écrire :
document.write("<center><font face=\"Arial\"
color=\"#0000ff\"><b>C'est mon 2ème script</b></font></center>");
Règle usuelle pour les chaînes de caractères
On utilise en général la 1ère forme :
color='#0000ff'><b>C'est mon 2ème script</b></font></center>");
Soit des guillemets (") pour délimiter la chaîne et des apostrophes (’) à l’intérieur, surtout à
cause des nombreuses apostrophes (’) du français. Mais sachez que les deux sont
interchangeables.
Aperçu de la page définitive :

<html>
<head>
<title>mon 2ème script</title>
<! Debut script
color='#0000ff'><b>C'est mon 1er script</b></font></center>");
// Fin script >
</script>
</head>
<body>
</body>
</html>
Comment modifier une image au passage de la souris
On va continuer par quelque chose de très demandé, le survol d’image (ou rollover en
anglais) ou comment modifier l’aspect d’une image au passage de la souris. C’est très
simple ! Mais on va quand même y consacrer 2 leçons.
Les images d’origine

On va commencer par placer les 3 images par défaut dans notre page. C’est du HTML pur et
vous pouvez faire ça en mode normal dans votre éditeur HTML :
<img border="0" src="images/bleu_p.gif" width="38" height="20">
<img border="0" src="images/rouge_p.gif" width="38" height="20">
<img border="0" src="images/vert_p.gif" width="38" height="20">
Ce qui donne l’aspect des 3 boutons ci‐dessus (sans le survol)
Avant de continuer ; vous devez avoir créé les autres images, celles qui seront visibles lorsque
la souris passera dessus. Voici l’ensemble des images que vous pouvez copier‐coller si vous
n’en avez pas d’autres sous la main... Copiez ces images ou celles de votre choix dans un
sous‐répertoire "images".
(images par défaut)
(images de survol)
Les objets‐images
Une page HTML est constituée d’objets (voir la page "Objets d’une page HTML"). Chaque fois
que vous ajoutez une image à votre page, il se crée un objet‐image supplémentaire.
Ainsi lorsque vous écrivez en HTML :
<img border="0" src="images/bleu_p.gif" width="38" height="20">
vous créez un objet image ayant les propriétés suivantes :

bordure = 0 (border="0")
source = "images/bleu_p.gif" (le fichier image)
largeur = 38 (width="38")
hauteur = 20 (height="20")
Il existe encore d’autres propriétés qui n’ont pas été initialisées, mais on verra ça plus loin.
Changer le fichier source de l’image
Comme vous l’avez écrit, le fichier‐image associé à l’image "image1" est "images/bleu_p.gif",
c’est ce que veut dire :
<img name="image1" src="images/bleu_p.gif">
Si on change le src (le source) :
<img name="image1" src="images/bleu_a.gif">
on aura la même image, mais en creux :
C’est le principe du survol. Mais pour que ça fonctionne en passant la souris, il faut indiquer
quel événement déclenchera ce survol.
Les événements
onMouseOver et onMouseOut [1]

Il existe 2 événements : onMouseOver (réagit au passage de la souris sur un objet) et
onMouseOut (réagit lorsque la souris quitte un objet).
Lorsqu’on écrit
onMouseOver="this.src = 'images/bleu_a.gif'"
cela a pour effet d’afficher l’image "bleu_a.gif" lorsque la souris passe sur l’image
Et :
onMouseOut="this.src = 'images/bleu_p.gif'"
a pour effet de réafficher l’image "bleu_p.gif" lorsque la souris quitte l’image.
this
Ca signifie « ceci » en anglais, et désigne l’objet en cours.
Si vous écrivez l’instruction précédente telle quelle, le navigateur pensera que « this »
représente la page, et ne fera rien, car l’objet « document » (la page) n’a pas d’attribut
« src ».
Par contre, ici « this » est dans l’objet image, et « this.src » désigne le fichier source de cet
objet image :
<img src="images/bleu_p.gif" border="0" width="38" height="20"

onMouseover="this.src='images/bleu_a.gif'"
onMouseout="this.src='images/bleu_p.gif'">
donnera ceci :
Le code complet pour les 3 boutons
Ce code est à écrire en l’état dans votre page HTML (donc pas dans un script Javascript) :
<img src="images/bleu_p.gif" border="0" width="38" height="20"
onMouseover="this.src='images/bleu_a.gif'"
onMouseout="this.src='images/bleu_p.gif'">
<img src="images/rouge_p.gif" border="0" width="38" height="20"
onMouseover="this.src='images/rouge_a.gif'"
onMouseout="this.src='images/rouge_p.gif'">
<img src="images/vert_p.gif" border="0" width="38" height="20"
onMouseover="this.src='images/vert_a.gif'"
onMouseout="this.src='images/vert_p.gif'">
ce qui donne :
Ca ne fonctionne pas avec Netscape 4
Ce code fonctionne sous Internet Explorer 4/5/6+, sous Netscape 6/7+, sous Mozilla 1+, mais
pas sous Netscape 4 ou Internet explorer 3. On verra comment faire, dans le prochain article.
Netscape 4 n’accepte pas d’événement onMouseOver ou onMouseOut dans les images. Donc
on va faire autrement. Et les versions 3 de Netscape et d’Internet Explorer n’acceptent pas
d’objets image, donc de toute façon, le survol ne fonctionnera jamais avec ces navigateurs,
qui se font de plus en plus rares.
Notes :
[1] Ces événements font partie non de Javascript, mais du DOM (Document Object Model), qui,
contrairement à Javascript, n’est pas sensible à la casse. Ce qui veut dire que vous pouvez écrire
« onmouseover » ou « OnMouseOver » ou « ONMOUSEOVER », vous obtiendrez le même résultat.
Comment réaliser un survol d’image avec la compatibilité Netscape 4
Netscape 4 n’accepte pas les événements onMouseOver et onMouseOut dans les objets image.
Par contre, ils fonctionnent dans un lien. On va créer une fonction Javascript, qui marchera
pour toutes les images à survol, quelque soit la version du navigateur (les versions 3 de IE et
Netscape ne verront pas ce survol, et les images seront fixes).
Toujours nos 3 boutons :
onMouseOver et onMouseOut dans un lien
Ces événements seront intégrés dans le lien <a href=...>...</a>, au lieu de les mettre dans
l’image. Mais le code this.src = ... ne fonctionnera plus, puisque ici « this » représente le
lien et un lien n’a pas d’attribut « src ».
Il faut indiquer à la page quel objet va avoir son source modifier. Pour ça il faut donner un
nom aux images.
Nommer les images
Pour nommer les images, on utilise l’attribut « name », attribut qu’on verra aussi dans toutes
sortes d’objets.
<img name="image1" src="images/bleu_p.gif" border="0" width="38" height="20">
Et pour modifier son source, on écrira :
document.images["image1"].src = "images/bleu_p.gif";
où document.images est la collection des images de la page, et document.images["image1"]

représente l’objet image du bouton bleu.
Fonction de survol
On va créer une fonction Javascript spéciale, qui modifiera le source de tout objet image :
<!
var rep = "images/";
function survol(Objet, Fichier) {
if (!document.images) {}
document.images[Objet].src = rep + Fichier;
}
//>
</script>
La fonction sera appelée ainsi :
survol("image1", "bleu_a.gif");
L’argument « Objet » est le nom de l’objet image, celui qui est indiqué par l’attribut
« name » de l’image. Et « Fichier » est le fichier source à changer.
La variable « rep » est le répertoire des images.
L’instruction if (!document.images) {} permet de ne rien faire, pour les navigateurs ne

supportant pas les objets images.
Le code de l’image
Donc dans notre page HTML, on écrire notre image bleue ainsi :
<a href="#" onMouseOver="survol('image1', 'bleu_a.gif')"
onMouseOut="survol('image1', 'bleu_p.gif')">
<img name="image1" border="0" src="../images/bleu_p.gif" width="38"
height="20"></a>
Le code complet
<html>
<head>
<title></title>
<!
var rep = "images/";
function survol(Objet, Fichier) {
if (!document.images) {}
document.images[Objet].src = rep + Fichier;
}
//>
</script>
</head>
<body>
<a href="#" onMouseOver="survol('image1', 'bleu_a.gif')"
onMouseOut="survol('image1', 'bleu_p.gif')">
<img name="image1" border="0" src="images/bleu_p.gif" width="38" height="20"></a>
<a href="#" onMouseOver="survol('image2', 'rouge_a.gif')"
onMouseOut="survol('image2', 'rouge_p.gif')">
<img name="image2" border="0" src="images/rouge_p.gif" width="38" height="20"></a>
<a href="#" onMouseOver="survol('image3', 'vert_a.gif')"
onMouseOut="survol('image3', 'vert_p.gif')">
<img name="image3" border="0" src="images/vert_p.gif" width="38" height="20"></a>
</body>
</html>
Ce qui donnera :
Lire le contenu d’un champ texte de formulaire
Page HTML et objets

Une page HTML est constituée d’objets : le contenu de la page (qui correspond à ce qui se
trouve entre les balises et , les images, un formulaire, une case texte dans un formulaire,
etc...
Javascript sait manipuler tout ça à condition de leur donner un nom, de façon à ce qu’il sache
sur quel objet il doit agir.
Lire le contenu d’une boîte de texte

Voici un exemple :
Indiquez votre nom :
Indiquez votre nom :
Indiquez votre nom, puis cliquez sur OK. Une boîte d’alerte indique le texte que vous avez
saisi dans la boîte de texte.
Voici le script :
<form method="POST" name="formulaire">
<p>Indiquez votre nom :<br>
<input type="text" name="nom" size="40">
<input type="button" value="OK" onClick="alert('Texte saisi : ' +
document.formulaire.nom.value)"></p>
</form>
Nommer les objets
Le formulaire
Son nom est « formulaire ». On fait référence à ce formulaire en écrivant :
document.formulaire ou document["formulaire"]
Exemple : connaître le nom du formulaire :
document.formulaire.name; // donnera « formulaire »
La boîte de texte
Son nom est "nom". On lui fait référence ainsi :
document.formulaire.nom
car c’est un objet inclus dans le formulaire.
Exemple : lire sa valeur :
document.formulaire.nom.value;
« value » est une propriété des boîtes texte de formulaire.
Le bouton « OK »
On n’a pas besoin de son nom mais on lui a associé un événement.
Les événements
Chaque fois que vous bougez la souris, que vous cliquez quelque part dans la page, que vous
modifiez la taille de la fenêtre.. un événement est déclenché.
Chaque objet supporte un certain nombre d’événements. Les boutons déclenchent un

événement "onClick" lorsqu’on clique dessus. Si on "associe" une fonction particulière à un
événement, on déclenche cette fonction lorsque l’événement se produit.
Exemples d’événements :
onMove : mouvement de la souris

onMouseover : passage de la souris sur un objet
onMouseout : la souris quitte un objet
onClick : on a cliqué sur un objet
onChange : la valeur d’un objet a été changée
onFocus : un objet a le "focus" (le curseur est sur l’objet) [1]
Pour associer une fonction à un événement, il suffit d’écrire :
onEvenement="la_fonction()";
Tout simplement.
Dans notre cas, on a associé la fonction « alert » (fonction prédéfinie du langage Javascript
qui affiche une boîte d’alerte). Si on écrit dans la balise du bouton OK :
onClick="alert(’Vous avez cliqué sur le bouton’)" ;
le message « Vous avez cliqué sur le bouton » s’affichera à chaque fois que vous cliquez sur le
bouton.
Maintenant, pour indiquer le contenu de la boîte de texte "nom" dans le message d’alerte :
onClick="alert(document.test1.nom.value)";
Notes :
[1] les événements sont des objets du DOM (Document Object Model), insensible à la casse,
contrairement à Javascript. Donc on peut « onclick » ou « OnClick » ou « ONCLICK », le résultat sera le
même.
Lire et écrire le contenu d’une boîte texte de formulaire

On va lire le contenu d’une boîte de texte et l’écrire dans une autre boîte de texte
Exemple
Indiquez votre nom ici, pluis cliquez sur OK
Boîte texte « nom » :
Boîte texte « resultat »
Voilà le travail !
Voici le script :
<p>Boîte texte « nom » :<br>
<input type="text" name="nom" size="40"></p>
<p>Boîte texte « resultat »<br>
<input type="text" name="resultat" size="40">
<input type="button" value="OK" onClick="document.formulaire.resultat.value =
document.formulaire.nom.value"></p>
</form>
Affecter une valeur à une boîte de texte
C’est facile :
document.formulaire.resultat.value = "voici le résultat";
a pour effet d’afficher « voici le résultat » dans la 2ème boîte de texte
Maintenant, affecter la valeur d’une boîte de texte à une autre :
document.formulaire.resultat.value = document.formulaire.nom.value;
Il suffit ensuite d’associer cette action à l’événement onClick du bouton OK, et ça donne
onClick = "document.formulaire.resultat.value = document.formulaire.nom.value";
Petits calculs entre éléments de formulaire
Multiplier 2 boîtes de texte
On va multiplier le contenu de 2 boîtes de texte, et donner le résultat dans une troisième :
Indiquez 2 chiffres, un dans chaque case de cette ligne :

x
Voilà le résultat de la multiplication !
Voici le script :
<p>Indiquez 2 chiffres, un dans chaque case de cette ligne :<br>
<input type="text" name="chiffre1" size="40"> x
<input type="text" name="chiffre2" size="40"></p>
<p>Voilà le résultat de la multiplication !<br>
<input type="button" value="OK"
onClick="document.formulaire.resultat.value = document.formulaire.chiffre1.value *
document.formulaire.chiffre2.value"></p>
</form>
Calcul
Si vous avez lu les 2 leçons précédentes, l’expression
onClick="document.formulaire.resultat.value =
document.formulaire.chiffre1.value + document.formulaire.chiffre2.value";
ne doit pas vous surprendre ; seulement au lieu d’affecter une simple valeur à une boîte de
texte, on lui affecte la somme de la valeur de 2 boîtes de texte.
Division d’une boîte de texte par une valeur
Voici un exemple pour convertir des Francs en Euros
Indiquez une valeur (en Francs) ‐ n’indiquez que des chiffres :
Voici la valeur convertie en euros :
Bon, ça ne donne pas un résultat très élégant, mais c’est le principe qui compte.
script 1
<form name="formulaire1" method="POST">
<p>Indiquez une valeur (en Francs) n'indiquez que des chiffres :<br>
<input type="text" name="francs" size="20">
<input type="button" value="OK" onClick="document.formulaire1.euros.value =
document.formulaire1.francs.value / 40.3399"></p>
<p>Voici la valeur convertie en euros :<br>
<input type="text" name="euros" size="20"></p>
</form>
On a le même principe qu’auparavant, mais on divise la valeur de la boîte francs par 6.55957
(le taux de conversion de francs en euros)
document.formulaire1.euros.value = document.formulaire1.francs.value / 6.55957;
script 2
On va utiliser une fonction de conversion, qui pourra éventuellement servir à d’autres cases.
<!
function conversion(valeur) {
return valeur / 40.3399;
}
//>
</script>
</head>
<body>
<form name="formulaire1" method="POST">
<p>Indiquez une valeur (en Francs) n'indiquez que des chiffres :<br>
<input type="text" name="francs" size="20">
<input type="button" value="OK"
onClick="document.formulaire1.euros.value =
conversion(document.formulaire1.francs.value)"></p>
<p>Voici la valeur convertie en euros :<br>
<input type="text" name="euros" size="20"></p>
</form>
Cette fonction ne fait que multiplier une valeur par 40.3399 et retourne le résultat.
document.formulaire1.euros.value = conversion(document.formulaire1.francs.value);
a pour effet d’affecter à la boîte de texte "euros" le résultat de la conversion de la valeur de

la boîte francs, c’est‐à‐dire sa division par 40.3399
Calculs avec sélection dans une liste
Sélection de l’opérateur par une liste

On indique les 2 opérandes de l’opération (les 2 nombres). Lorsqu’on sélectionne l’opération,
le résultat s’affiche directement dans la boîte résultat :
Indiquez 2 chiffres : Choisissez l’opération :

addition
soustraction
multiplication
Voilà le résultat de l’opération division
Voici le script :
<!
function operation(val1, val2, operateur) {
switch (operateur) {
case 0 : return parseInt(val1) + parseInt(val2); break;
case 1 : return val1 val2; break;
case 2 : return val1 * val2; break;
case 3 : if (val2 != 0) return val1 / val2;
else return "division par 0";
}
}
//>
</script>
</head>
<body>
<form method="POST" name="test5">
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tr>
<td width="55%" valign="top">Indiquez 2 chiffres :<br>
<input type="text" name="chiffre1" size="10">
<input type="text" name="chiffre2" size="10">
<p>Voilà le résultat de l'opération<br>
</td>
<td width="45%" valign="top">Choisissez l'opération :<br>
<select size="4" onChange="document.test5.resultat.value =
operation(document.test5.chiffre1.value,
document.test5.chiffre2.value, this.selectedIndex)">
<option>addition</option>
<option>soustraction</option>
<option>multiplication</option>
<option>division</option>
</select>
</td>
</tr>
</table>
</form>
Choix de l’opération dans la boîte de liste
La boîte de liste est un objet <SELECT>, dans lequel on a une liste d’options (<OPTION>).
L’événement « onChange » se déclenche lorsqu’on sélectionne une option de cette liste. De

plus, la propriété selectedIndex indique quelle option a été sélectionnée (0 pour la 1ère, 1
pour la 2ème, etc.).
En associant l’instruction
onChange="document.formulaire.resultat.value = une valeur"
on déclenche l’affichage d’une valeur dans la boîte de texte « resultat ».
Fonction operation()
Elle a 3 arguments : val1 et val2 qui sont les valeurs transmises et operateur qui est le
numéro de l’opérateur (0, 1, 2 ou 3).
L’événement onChange lui transmet comme valeurs :
document.formulaire.chiffre1.value pour val1,

document.formulaire.chiffre2.value pour val2
this.selectedIndex pour operateur
selectedIndex vaut 0 si on choisit l’addition, 1 si on choisit la soustration, etc.

Que signifie ce this ? On a vu ça dans la première leçon. On aurait pu remplacer this par
document.formulaire.nom_liste (si on avait donné « nom_liste » comme nom à la boîte de
liste), et on aurait écrit document.formulaire.nom_liste.selectedIndex.
Comme l’instruction « onChange... » se trouve justement à l’intérieur de la balise <SELECT>,

on peut utiliser this (pour faire plus court) qui indique l’objet en cours.
Les différentes parties d’une page HTML
Délimiteurs HTML
La page est délimitée par les balises <HTML> et </HTML>
En‐tête
Limité par les balises <HEAD> et </HEAD>, cet en‐tête recevra la plupart de vos scripts, des
fichiers .js ou des feuilles de styles inclus.
Corps de la page
Il est délimité par les balises <BODY> et </BODY> et contient tout votre code HTML ainsi que
les scripts qui s’exécutent dans ce code.
Dans quelle partie de la page HTML doit‐on écrire son script ?
Réponse : là où c’est nécessaire...
Mais un principe de base :
si votre script écrit dans la page (document.write() ), mettre le script à l’endroit de la

page où il doit écrire ;
sinon l’installer dans l’en‐tête (avant la balise </HEAD>) de la page
Dans la page, mais où ?

Voici un exemple :
<HTML>
avant la balise </HEAD>
<HEAD>
<SCRIPT LANGUAGE="Javascript">// script lu à l'ouverture de la page
<! début de script
/* cette fonction sera lue et définie en début de page, mais elle ne sera
exécutée que lorsqu'on l'appelera (en appuyant le bouton, voir plus bas) */
function camarche() {
alert("oui, ça marche!");
}
// ligne exécutée en début de page
document.write("<font color='#FF0000'>la page commence à s'ouvrir (texte écrit
avant la balise </HEAD></font>");
> // fin de script
</SCRIPT>
</HEAD>
dans la balise <BODY>
<! la fonction appelée par onLoad est exécutée au chargement de la page >
<! et celle appelée par onUnload est exécutée lorsqu'on quitte la page >
<BODY onLoad="camarche()" onUnload="alert('salut et à la prochaine')">
dans le corps de la page
<! un formulaire >
<FORM>
<INPUT TYPE=button VALUE="estce que ça marche?" onClick="camarche()">
<! la fonction camarche() ne sera exécutée qu'en appuyant sur le bouton >
<! on aurait pu aussi bien se passer de la fonction camarche()
et écrire onClick="alert('oui, ça marche!')" >
</FORM>
<p>Texte HTML dans la page</p>
<SCRIPT LANGUAGE="Javascript"> // script lu en fin de chargement de la page
<! début de script
document.write("<font color='#FF0000'>texte écrit en milieu de page</font>");
> // fin de script
</SCRIPT>
</BODY>
après la balise </BODY>
<SCRIPT LANGUAGE="Javascript"> // script lu en fin de chargement de la page
<! début de script
document.write("<font color='#FF0000'>la page est chargée (texte écrit après la
balise </BODY></font>");
> // fin de script
</SCRIPT>
</HTML>
voir l’exemple
On a utilisé un script dans le corps de la page (<INPUT TYPE=...>). Ce script est déclenché

par un bouton, donc il ne sera utilisé qu’à ce moment‐là.
Mais ce script fait appel à une fonction, qu’on a définie au début de la page. C’est une bonne
méthode de définir les fonctions en tête de page : une fonction n’est exécutée que si elle est
appelée.
Le script défini dans le corps de la page sera exécuté au moment de sa lecture par le
navigateur. Généralement, on peut dire qu’on place dans le corps de la page les scripts qui
doivent écrire à cet endroit précis, les autres scripts devant être placés avant la balise
</HEAD>
Enfin, le dernier script est situé en fin de page, car il se déclenchera dès que la page est finie
de charger.
Dans un fichier .js séparé

On peut également écrire son code Javascript dans un fichier séparé de la page qui l’utilise.
C’est très utile lorsqu’on appelle les mêmes fonctions dans plusieurs pages de son site.
Syntaxe
Le fichier séparé est un fichier Javascript, d’extension .js, et qui ne contient que le code
Javascript (définition de variables, de fonctions...), sans aucune balise HTML. On peut tout à
fait écrire un fichier .js avec un éditeur texte comme le bloc‐notes de Windows. Il suffit de
sauvegarder son fichier avec l’extension .js au lieu de .txt.
Voici comment on appelle un fichier séparé dans sa page HTML :
<SCRIPT LANGUAGE="JavaScript" SRC="votre_fichier_javascript.js"></SCRIPT>
On peut le placer n’importe où, comme précédemment, mais de préférence avant la balise
</HEAD>
Évidemment, les appels aux fonctions définies dans ce fichier séparé devront se faire dans la
page HTML.
On peut également avoir le fichier séparé dans un autre répertoire :
<SCRIPT LANGUAGE="JavaScript" SRC="mon_rep/votre_fichier_javascript.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript"
SRC="../mon_rep/votre_fichier_javascript.js"></SCRIPT>
Tous les navigateurs ne reconnaissent pas les fichiers .js séparés
Jusqu’aux versions Netscape 3.04 et Internet Explorer 3.02 la définition d’un fichier .js
séparé n’est pas reconnue ; certaines versions de Netscape 3.04 et Internet Explorer 3.02 le
reconnaissent, pas d’autres... Après ces versions, pas de problème.
Peut‐on utiliser plusieurs fichiers .js séparés ?
Oui :
<SCRIPT LANGUAGE="JavaScript" SRC="votre_fichier_javascript1.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="votre_fichier_javascript2.js"></SCRIPT>
On peut aussi utiliser des fichiers .txt
Vous pouvez aussi écrire vos scripts dans des fichiers .txt. Ca peut être utile si vous n’avez
pas d’éditeur HTML pouvant sauvegarder vois fichiers en .js.
Un exemple de fichier .js
// commentaire
var une_variable = "ma variable";
function ma_fonction1() {
document.write("<h3>Salut</h3>");
}
function ma_fonction2() {
$chaine = "<center>Salut</center>";
document.write(chaine);
}
Donc, rien d’autre dans ce fichier que du code Javascript. Pas d’en‐tête quelconque comme
en HTML. On peut écrire des balises HTML mais dans un document.write() ou dans des
variables qui doivent être affichées par un document.write().
3 remarques en passant
On a vu 2 méthodes de sortie :
alert("un message") qui affiche un message d’avertissement et document.write("un

texte") qui écrit dans la page en cours (mais uniquement au chargement de la page).
Les commentaires HTML et les commentaires Javascript :
<! ce texte est un commentaire HTML >
// ce texte est un commentaire Javascript, à ne mettre que dans un script
/* ce texte est encore un commentaire Javascript
qu'on peut écrire sur plusieurs lignes, à ne mettre que dans un script */
A quoi servent les lignes <! début de script et > // fin de script ?
Elles permettent aux navigateurs ne reconnaissant pas le javascript d’ignorer le script

(comme si c’était un commentaire) et de ne pas retourner d’erreur.
De plus Netscape 4 renvoie une erreur Javascript si ces 2 signes de commentaires sont
absents.
Les objets prédéfinis utilisés par le langage Javascript
L’organisation en objets
Le document HTML ou la page c’est la même chose. En Javascript on l’appelle « document ».
Le principe des objets (formulaires, images, liens, etc...) du document est
la hiérarchisation. On peut comparer ça aux poupées russes.
Le document a un formulaire appelé « nom_formulaire ». Ce formulaire a un

champ (case) texte appelé « Nom » (dans lequel vous devez taper votre nom). Ce champ
« Nom » a une propriété « value », qui est votre nom quand vous l’aurez saisi.
Donc, en Javascript, la valeur de ce champ s’écrira :
document.nom_formulaire.Nom.value
Le point « . » sert de symbole de « filiation » entre objets et sous‐objets ou propriétés.
de la même manière :
document.title vous donne le titre de la page (qui se trouve dans <TITLE>titre de la

page</TITLE>)
document.nom_formulaire.name donnera « nom_formulaire », car c’est le nom du
formulaire
document.screen.width donnera la largeur de votre écran
Les collections
Le document possède une collection « images ». Ce sont toutes les images de la page. Par
exemple les champs d’un formulaire ne font pas partie des "elements" de la page, mais ils
font partie des "elements" du formulaire.
document.images[0] est la première image de la page,

document.images[1] est la deuxième, etc.
En plus de la collection « images », il y a des collections comme « links » qui sont tous les
liens hypertextes, « forms » représente tous les formulaires, etc.
Exemple :
document.forms[0].name donnera « nomFormulaire »
De même les formulaires possèdent une collection « elements », qui sont tous les objets d’un
formulaire, champs texte, boutons, cases à cocher, etc.
Autre exemple de collection, si vous avez une série de boutons radio (boutons ronds parmi
lesquels un seul ne peut être coché) appelés "boutonsronds", pour savoir lequel a été coché, il
vous faudra utiliser la formule document.Formulaire.boutonsronds[i].checked ("i" étant un
indice de recherche).
Les méthodes
En programmation objet, cela signifie les fonctions qui sont intégrées à un objet.
Le document possède des méthodes, ainsi que les objets du document. On utilise toujours le
point "." pour lier une méthode à son objet :
Exemple : le très courant document.write() qui écrit dans la page ou
document.nomFormulaire.submit() qui envoie le formulaire. Les
parenthèses sont indispensables, même s’il n’ya rien dedans. Cela indique à
Javascript qu’il s’agit d’une fonction.
Les objets hors page

Dans une page HTML, il faut parfois s’occuper de se qui se passe en dehors...
Par exemple, l’objet window caractérise la fenêtre du navigateur, différente de la page. Si

vous avez des cadres dans votre fenêtre, chaque cadre contiendra une page (un document),
et tous les cadres seront inclus dans la fenêtre (window).
Vous pouvez ouvrir une autre fenêtre avec window.open(), et la refermer avec
window.close().
L’objet location caractérise l’adresse Internet (l’URL) de votre page, mais il ne fait pas
partie du document. location.href représente l’URL de la page ouverte. Si vous voulez
charger la page "page2.htm", vous écrivez
location.href = "page2.htm
Pour revenir aux cadres : les cadres sont définis dans une "page de cadres", dans laquelle vous
avez les balises
Les objets utilisateur

Vous pouvez vous aussi créer des objets à l’intérieur de la page et leur ajouter des propriétés
et des méthodes, en utilisant le même principe.
Les types de données de base du langage Javascript et les tableaux
Les types de base en Javascript
page_chargee = true; // vrai en anglais
x = 1;
y = x + page_chargee; // donnera y = 2
texte = "2 v'là les flics!";
alerte = y + texte; // donnera alerte = "22 v'là les flics!"
Voilà une horreur selon les « spécialistes » qui ont connu d’autres langages, mais bon, c’est
possible en Javascript. On dit que Javascript est un langage à typage faible, c’est à dire
qu’on peut affecter à peu près n’importe quoi à une variable.
On distingue quand même 3 types de données de base :
les booléens qui ne prennent que 2 valeurs « vrai » ou « faux » (true / false)
les numériques, comme le nom l’indique
les chaînes de caractères
Exemples :
document.nom_formulaire.checkbox1.checked = true; a pour effet de cocher le bouton

appelé « checkbox1 » du formulaire « nom_formulaire » (false aurait l’effet inverse)
var pi = 3.1416; affecte la valeur 3.1416 à la variable « pi »
var nombre_jours = 365; affecte la valeur 365 à « nombre_jours » (le tiret « ‐ » est

interdit dans le nom des variables, il faut utiliser le caractère de soulignement « _ »)
var monNom = "Bernard MartinRabaud"; (on peut mettre n’importe quel caractère ‐ sauf

quelques exceptions ‐ dans une chaîne de caractères)
var vide = ""; c’est une chaîne de caractère vide, très utile...
var tonNom = "je m'appelle 'Tania', et toi?";
var tonNom1 = 'je m\'appelle "Tania", et toi?'; on peut mettre aussi une chaîne de

caractères entre aopstrophes, dans ce cas les guillemets font partie de la chaîne, mais si on
laisse l’apostrophe de « m’appelle » telle que, Javascript croira que la chaîne est ’je m’ et
inquera une erreur car il ne comprendra pas ce qui suit. C’est pour cette raison qu’il faut
placer un « \ » avant.
var tonNom2 = "je m'appelle \"Tania\", et toi?"; on a conservé les guillemets autour

de "Tania", mais en les faisant précéder d’un « \ »
var fichier = "c:\\images\\image.gif"; lorsqu’on doit utiliser un antislash « \ » dans la

chaîne, il faut en mettre 2.
Les tableaux
Les tableaux sont des séries de données, généralement du même type (booléens, numériques
ou chaînes de caractères), indicées de 0 jusqu’à ce qu’on veut.
Peut‐on créer un tableau à 2 dimensions ? Non. Du moins pas directement. Il faut créer un
tableau de tableaux.
Pour créer un tableau, on utilise la fonction new et la donnée Array :
var tableau1 = new Array();
var tableau2 = new Array(10);
Dans le 1er tableau, le nombre d’éléments du tableau n’est pas défini, dans le second il y a
10 éléments. Contrairement au C, les valeurs à stocker dans le tableau ne sont pas définies à
l’avance.
On peut aussi copier un tableau à partir d’un autre :
var tableau3 = tableau2
C’est une copie "dynamique" : c’est‐à‐dire que si tableau2 est modifié, tableau3 le sera aussi
automatiquement.
var tableau4 = eval(tableau2.toSource());
Ici c’est une copie "statique" : après la copie, les modifications ultérieures de tableau2 n’ont
plus aucune influence sur tableau4.
On accède aux éléments du tableau de cette manière tableau1[0] ou tableau2[3]. Le premier
élément de tableau1 est tableau1[0] et le dernier élément de tableau2 sera tableau[9] et non
pas tableau2[10].
On peut donc affecter des valeurs aux tableaux :
tableau1[0] = 15;
tableau1[1] = "javascript";
tableau1[2] = 3.5;
Oui, on peut affecter des valeurs de différents types à un tableau. Ce n’est pas recommandé,
car on ne sait plus très bien à quoi correspondent tel ou tel tableau, mais c’est possible.
On peut également créer un tableau en lui affectant directement des valeurs :
var jours = new Array("lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi",
"dimanche");
Tableau à 2 dimensions
Pour créer un tableau à 2 dimensions (plus de 2, c’est très rare), on crée un simple tableau.
Puis on crée un tableau pour chaque élement.
var tableau = new Array();
tableau[0] = new Array("valeur01", "valeur02", ...);
tableau[1] = new Array("valeur11", "valeur12", ...);
etc.
Pour accéder à un élément du tableau à 2 dimensions :
var valeur = tableau[1][1]; // donne "valeur12"
Exemple : le tableau des visites de votre site par mois et par année.
var visites = new Array(12); // pour les 12 mois de l'année
visites[0] = new Array(); // tableau des visites du mois de janvier
visites[1] = new Array(); // tableau des visites du mois de février
visites[0][0] = 1000; // nombre de visites du mois de janvier pour la
1ère année
visites[0][1] = 1250; // nombre de visites du mois de janvier pour la
2ème année
visites[1][0] = 900; // nombre de visites du mois de février pour la
1ère année
Les instructions conditionnelles « if ... else ... », « while »...
Il y en a de 4 sortes :
le if et if...else (« si » et « si...sinon »)
les boucles
l’instruction switch
les instructions de continuation ou de rupture
If et if...else
Voici des exemples
si la boîte de texte "Nom" du formulaire "NomFormulaire" est vide,
on envoie un message d’alerte
if (document.NomFormulaire.Nom.value == "")
// condition toujours entre ()
alert("Vous avez oublié de donner votre nom");
si le navigateur du visiteur supporte les objets images (Netscape 4+ et Internet Explorer 4+),
on appelle la fonction changerImages(),
sinon on envoit un message d’alerte
if (document.images)
changerImage();
else
alert("Votre navigateur ne peut visualiser le changement d'images");
si l’adresse e‐mail saisie dans la boîte de texte "Email" du formulaire "NomFormulaire" en

contient pas de "@",
on envoit un message d’alerte et on remet le curseur dans la boîte Email.
Lorsque if (ou else) contient plusieurs instructions il faut mettre des accolades .
if (document.NomFormulaire.Email.value.indexOf("@") == 1) {
alert("Votre adresse email n'est pas valide);
document.NomFormulaire.Email.focus();
}
Forme raccourcie
Dans certains cas où la condition est relativement simple, on peut utiliser ce raccourci :
Cette fonction rajoute un "0" avant un nombre s’il est < 10,
utile pour indiquer une date, du style 01/01/2000
function ajoute0si (nombre) {
if (nombre < 10)
var resultat = "0" + nombre;
else
var resultat = nombre;
return resultat;
}
On peut écrire plus simplement :
function ajoute0si (nombre) {
var resultat = (nombre < 10) ? "0" + nombre : nombre;
return resultat;
}
La syntaxe est :
(condition) ? résultat si condition vraie : résultat si condition fausse
Les boucles
Il y a l’instruction « for » (« pour ») et l’instruction « while » (« tant que »)
L’instruction « for » sert lorsqu’on veut parcourir totalement une série comme un tableau,
tous les éléments d’un document ou d’un tableau
L’instruction « while » sert lorsqu’on parcourt une série mais que l’on veut sortir si l’un des
éléments de la série satisfait à une condition.
Boucle for
Cette boucle parcourt tous les éléments du tableau "tableau" sauf le dernier et a pour effet
de supprimer le 1er élément et de déplacer tout le tableau d’un indice
for (i=0;i<tableau.length1;i++)
tableau[i] = tableau[i+1];
Comme avec "if", s’il y a plusieurs instructions dans la boucle "for", il faut les encadrer par
des accolades
Boucle for...in
Une autre boucle « for » : la boucle « for in ». Elle permet de parcourir les éléments d’un
objet. C’est en particulier, la seule façon de parcourir un tableau dont les éléments ne sont
pas indicés, mais indiqués par des valeurs alphabétiques.
Exemple :
var age = new Array();
age["julie"] = 14;
age["nicolas"] = 15;
for (var i in age)
alert("l'âge de " + i + " est " + age[i]);
Cette boucle, pas souvent utilisée, peut fréquemment remplacer une boucle for (var
i=0 ;i<fin ;i++).
Boucle while
Cette instruction parcourt un tableau "Prenoms" contenant des prénoms classés dans l’ordre
alphabétique à la recherche du prénom "Tania" : si elle le trouve la boucle s’arrête
var i = 0;
while (Prenoms[i] != "Tania") // "!=" veut dire différent de
i++; // "i++" signifie "i = i + 1"
En fait cette boucle peut tourner indéfiniment si le prénom "Tania" n’est pas trouvé ; il faut
écrire :
var i = 0;
while ((Prenoms[i] != "Tania") && (i < Prenoms.length))
i++;
Noter le "&&" qui signifie ET dans une condition

Noter aussi les doubles ()
On peut écrire encore plus simplement :
var i = 0;
while ((Prenoms[i] != "Tania") && (i++ < Prenoms.length))
car "i" est incrémenté (augmenté de 1) après la condition
Boucle do...while
Il existe aussi l’instruction « do ... while », qui est similaire à « while », mais on teste la
condition à la fin de la boucle, au lieu de la tester au début.
Exemple précédent :
var i = 1;
do {
i++;
}
while ((Prenoms[i] != "Tania") && (i < Prenoms.length));
Attention les boucles sont dangereuses !
Si, d’une manière ou d’une autre, votre boucle risque de boucler sans fin, vous allez planter
votre machine et éventuellement celle de vos visiteurs.
L’instruction « switch »
Très utile lorsqu’on doit traiter les différentes valeurs d’une même donnée.
Exemple :
Cette fonction effectue la conversion en francs les valeurs de conversion ne sont pas
garanties !
function conversion (somme, monnaie) {
if (monnaie == "euros")
somme *= 6.57;
else if (monnaie == "dollars")
somme *= 6.80;
else if (monnaie == "marks")
somme *= 3.35;
else if (monnaie == "livres")
somme *= 9.50;
else;
return somme;
}
Utilisation de "switch" :
function conversion (somme, monnaie) {
switch (monnaie) {
case "euros" : somme *= 6.57;
break;
case "dollars" : somme *= 6.80;
break;
case "marks" : somme *= 3.35;
break;
case "livres" : somme *= 9.50;
break;
default : somme = somme;
}
return somme;
}
La forme avec switch n’est pas nécessairement plus courte, mais elle est plus claire. La
partie "default" sert lorsqu’aucune valeur ne correspond aux valeurs précédentes : elle est
facultative.
L’instruction break à la fin de chaque case est indispensable. Mais on peut l’omettre dans
certains cas. Voici un exemple, qui indique comment accéder à un objet identifié par son id
en fonction du navigateur :
function accesObjet(id, nav) {
switch (nav) {
case "nn4" : var obj = document.layers[id]; break;
case "ie4" : var obj = document.all[id]; break;
case "gecko" :
case "ie6" : var obj = document.getElementById(id);
}
}
Si le navigateur est "nn4", on exécute le premier case, si c’est "ie4" on exécute le second. Si
c’est "gecko", comme on n’a pas de break, on passe au 4e case et on l’exécute. Si c’est "ie6"
on exécute directement le 4e case. Notez qu’on n’a pas besoin de break au dernier case.
Les instructions de continuation et de rupture

break
L’instruction break permet de sortir d’une boucle. On vient de la voir dans l’instruction
switch.
Voici un exemple d’une boucle de recherche d’un nom dans un tableau de noms :
var listeNoms = {"Marie", "Nicolas", "Gwenaël", "Pierre", "Julie"};
var continuer = true;
var i = 0;
while (continuer) {
if (nom == listeNoms[i]) continuer = false;
else if (i < listeNoms.length 1) i++;
else continuer = false;
}
if (i < listeNoms.length) var trouve = true;
else var trouve = false;
et en utilisant "break" :
var i = 0;
while (i < listeNoms.length) {
if (nom == listeNoms[i]) break;
else i++;
}
if (i < listeNoms.length) var trouve = true;
else var trouve = false;
Si le nom est égal à listeNoms[i], l’instruction break permet de sortir de la boucle.
L’utilisation de break permet un code plus succinct et plus rapide, car on économise la
variable "continuer" et le test de cette variable à chaque boucle.
Notez que la numérotation d’un tableau commence à 0, et que le dernier élément vaut 4 ici,
alors que listeNoms.length vaut 5 (5 éléments).
continue
L’instruction continue retourne directement au début de la prochaine boucle. Son utilisation

est plus rare. Elle a l’effet inverse de break.
Comme exemple, on va reprendre notre liste de noms et ajouter "Jean‐" seulement devant
"Pierre".
var i = 0;
for (i=0;i<listeNoms.length;i++) {
if (listeNoms[i] != "Pierre") continue;
listeNoms[i] = "Jean" + listeNoms[i];
}
continue permet de retourner directement à la boucle suivante, sans exécuter l’instruction

qui suit.
return
l’instruction return, dans une fonction : permet de sortir (prématurément ou pas) de la

fonction
Voici le même exemple que précédemment, dans une fonction :
var listeNoms = {"Marie", "Nicolas", "Gwenaël", "Pierre", "Julie"};
function recherche(nom) {
var i = 0;
while (true) {
if (nom == listeNoms[i]) return true;
else i++;
}
return false;
}
Le premier return sort directement de la fonction, en retournant la constante true (vrai).
Le second return retourne la constante false (faux), puisqu’on n’a pas trouvé l’argument
« nom » dans la boucle while
Portée des variables en Javascript
Une variable javascript peut avoir une portée globale, elle est alors disponible dans la page
en cours, ou une portée locale, elle n’est disponible que dans la fonction qui l’a déclarée.
Voici un petit script où on trouve 2 déclarations d’une variable x :
<script language="Javascript">
<!
var x = 10; // variable globale
function increment(argument) {
// variable locale redéfinie
var x = argument + 1;
return x;
}
x = increment(x); // variable globale
// >
</script>
L’identificateur x représente en fait 2 variables différentes :

Une variable globale qui vaut 10 au début du script et vaut 11 à la fin,
Une variable locale dans la fonction increment qui vaut argument + 1. C’est une variable
locale, car elle a été redéfinie par le mot‐clé var.
L’instruction x = increment(x) ; commence par affecter la valeur de la variable globale x

(10) à l’argument de la fonction. Puis cet argument est augmenté de 1 pour être affecté à la
variable locale x, qui vaut donc 11. Cette valeur est retournée par la fonction et affectée à la
variable globale x.
Dans cette autre version, on travaille directement avec la variable globale :
<!
function increment(argument) {
// variable globale
x = argument + 1;
}
increment(x);
// >
</script>
On n’a pas de redéfinition de la variable x dans increment, donc il s’agit de la variable

globale. On n’a pas besoin de return, puisque x est modifié "globalement" (pour tout le
script). Et donc faire simplement increment(x) ; suffit pour modifier la variable.
Variables globales
Ce sont des variables définies dans le corps du script, en général tout au début. En dehors de
toute fonction.
On peut ensuite les utiliser dans tout le script, même à l’intérieur des fonctions. Leur valeur
évolue au cours du déroulement du script.
<html>
<head>
<!
x = x + 1;
// >
</script>
</head>
<body>
<!
// cette instruction doit afficher "x = 11"
alert("x = " + x); // toujours notre même variable globale
// >
</script>
</body>
</html>
Ce code montre qu’une variable globale est également valide dans toute la page, même
définie à l’intérieur de balises <script> différentes. Evidemment, une fois la page fermée, la
variable est perdue.
Variables locales
Elles sont définies dans une fonction.
Elles ne sont valables qu’à l’intérieur de cette fonction, elles sont détruites ensuite. Leur
valeur n’est plus disponible en dehors.
Si une variable, dans une fonction porte le même nom qu’une variable globale et est créée
avec var, alors elle est considérée comme une nouvelle variable locale. C’est le cas dans le
tout premier exemple.
Si une variable dans une fonction porte le même nom qu’une variable globale et n’est pas
créée avec var, alors il s’agit toujours de la même variable globale (2e exemple).
Contrairement au C, une variable définie au sein d’un bloc (zone de code entre 2 accolades )
n’est pas une variable locale.
Autre exemple
Dans la fonction :
y définie avec var est une variable locale qui n’a rien à voir avec le y défini plus haut.
par contre x est toujours la même variable globale définie au début, et x vaut 10 + 10 = 20
Après la fonction :
x vaut maintenant 20
y vaut toujours 100
<!
var y = 100; // variable globale
function ajoute10() {
var y = 10; // variable locale
x = x + y; // variable globale x
}
ajoute10();
alert(x);
alert(y); // variable globale
// >
</script>
Généralement, on ne s’amuse pas à redéfinir une variable locale de même nom qu’une
variable globale. C’est une source de confusion.
Par contre, il est préférable, si possible, d’utiliser des variables locales qui sont détruites
après utilisation, plutôt que des variables globales qui restent en mémoire tant que la page
est affichée.
Fonctions, arguments et appels de fonction
C’est un élément très important, car il y en a dans pratiquement tout script.
La syntaxe
function une_fonction(argument1, argument2...)
{
// corps de la fonction
}
Une fonction peut ne pas avoir d’arguments, mais on laisse les parenthèses vides.
Ceux qui viennent du Basic seront un peu désarçonnés au départ :
sub une_fonction
donne en Javascript (la syntaxe vient de celle du C) :
function une_fonction() {
....
}
Les arguments
Les arguments, situés dans les parenthèses à la suite du nom de la fonction, permettent au
script de transmettre des variables à la fonction.
Voici un exemple
// Exemple 1
var nombre = 10;
var carre = 0;
function carre_de (x) {
return x*x;
}
carre = carre_de(nombre);
nombre = carre_de(2);
document.write("carré = " + carre); // donnera "carré = 100"
document.write("nombre = " + nombre); // donnera nombre = 4
Dans cet exemple x est un argument de la fonction carre_de(). On peut appeler cette
fonction en utilisant n’importe quelle variable numérique ou un nombre comme
carre_de(2). La fonction utilise l’instruction return qui lui permet de retourner une valeur
(une fonction ne peut retourner qu’une valeur).
// Exemple 2
var nombre = 10;
var carre = 0;
function carre_de (x) {
x = x*x;
}
Dans ce 2ème exemple, la fonction fait un calcul interne. Si on écrivait l’instruction

alert("x = " + x) ; à l’intérieur de la fonction, on afficherait "x = 100", mais la fonction
ne retourne aucune valeur. Comme x n’est pas défini à l’extérieur de la fonction, si on
écrivait cette instruction à l’extérieur, on aurait une erreur Javascript "x est inconnu".
// Exemple 3
var nombre = 10;
var carre = 0;
function carre_de () {
carre = nombre*nombre;
}
carre_de();
Dans ce 3ème exemple, on utilise ce qu’on appelle une "variable globale". Ce type de variable
est définie à l’extérieur de la fonction, mais celle‐ci peut les utiliser et les modifications
seront valides pour l’extérieur de cette fonction.
Une fonction peut avoir comme arguments des variables booléennes, numériques, chaînes de
caractère, des tableaux, des objets.
Valeur de retour
Une fonction peut retourner une valeur. Elle utilise pour cela le mot‐clé return, comme dans
l’exemple 1. La fonction peut donc être appelée ainsi :
var valeur = fonction(arguments);
où valeur prend la valeur de retour de la fonction.
Une valeur de retour peut être évidemment une chaîne de caractère, un nombre, mais aussi
un tableau, ou un objet.
function jour_daujoudhui() {
return new Date();
}
var jour = jour_daujoudhui();
jour sera un objet Date() à la date du jour.
Retourner plus d’une valeur

Malheureusement une fonction ne peut retourner qu’une seule valeur. C’es parfois génant, si
par exemple on veut retourner des coordonnées x et y. Il suffit alors de retourner un tableau
ou un objet. Exemple :
function lireCoordonnees() {
var xcoord = 0;
var ycoord = 100;
var coords = new Array(xcoord, ycoord);
return coords;
}
var position = lireCoordonnees();
var x = position[0];
var y = position[1];
La fonction lireCoordonnees retourne un tableau. Voici le même exemple en retournant un

objet :
function lireCoordonnees() {
var xcoord = 0;
var ycoord = 100;
var coords = {x:xcoord, y:ycoord);
return coords;
}
var position = lireCoordonnees();
var x = position.x;
var y = position.y;
L’instruction {x:xcoord, y:ycoord) est un façon rapide de créer un objet en Javascript (on

utilise des accolades et non des parenthèses).
En Javascript les arguments sont passés par valeur

... et non par référence (pour ceux qui viennent du C ou du C++). Ca veut dire si un argument
est modifié au sein de la fonction, cette modification n’a aucun effet à l’extérieur de celle‐
ci. C’est la valeur de la variable qui est transmise à la fonction, mais pas la variable elle‐
même.
Exemple :
var nombre = 2;
document.write("Avant la fonction produit() nombre = " + nombre + "<br>");
function produit (nombre) {
nombre = nombre * 10;
document.write("Dans la fonction produit() nombre = " + nombre + "<br>");
return nombre;
}
document.write("Après la fonction produit() nombre = " + nombre");
Ca donne :
Avant la fonction produit() nombre = 2
Dans la fonction produit() nombre = 20
Après la fonction produit() nombre = 2
Si vous voulez modifier par fonction une variable :

soit vous retournez une valeur, comme le 1er exemple carre = carre_de(nombre);
soit il faut en faire une variable globale
Mais vous ne pouvez retourner qu’une seule variable
Les objets
Il en va autrement pour les objets et pour les tableaux en particulier, dont les modifications
au sein d’une fonction sont conservées en dehors de celle‐ci.
var tab = Array(0, 1, 2);
function incremente(tableau) {
for (var i=0:i<tableau.length;i++) tableau[i]++;
}
incremente(tab);
document.write("tab = " + tab.join());
affichera : tab = {1,2,3}
Nombre variable d’arguments

En Javascript une fonction a un nombre fixe d’arguments. Mais dans certaines situations, on
ignore à l’avance combien il y en aura. Voici un exemple :
Cette fonction déclare les enfants d’un parent : celui‐ci est le 1er argument,
les enfants viennent ensuite, mais on ignore combien ils sont.
Le but de cette fonction est de créer une "classe" famille, d’où le mot‐clé this
function famille () {
// nom_de_fonction.arguments est un tableau contenant les arguments de la
fonction
var args = famille.arguments;
this.nombre_enfants = args.length 1; // args.length est le nombre d'arguments
this.parent = args[0]; // le premier argument est le parent
// on crée un tableau où on mettra tous les enfants
this.enfants = new Array();
// une boucle parcourt les arguments contenus dans "args" (à partir
// du second 1 jusqu'au dernier) pour ajouter les enfants au tableau
for (var i=1;i<args.length;i++)
this.enfants[i1] = args[i];
}
var Martin = new famille("Olivier", "Nicolas", "Gaëlle", "Quentin", "Charlotte",
"Chloé");
var Scholz = new famille("Sabine", "Anja", "Elise");
document.write(Martin.parent + " a " + Martin.nombre.enfants + " enfants");
// donnera : "Olivier a 5 enfants"
document.write(Scholz.parent + " a " + Scholz.nombre.enfants + " enfants");
// donnera : "Sabine a 2 enfants"
document.write("L'ainé de " + Martin.parent + " est " + Martin.enfants[0]);
// donne "L'ainé de Olivier est Nicolas"
Valeur par défaut
Pour ceux qui connaissent PHP, Javascript ne permet pas d’affecter une valeur par défaut à
un argument. Il faut utiliser le même système du nombre variable d’arguments. Voici un
exemple :
<?php
function ajouter($x, $valeur=1) {
$x += $valeur;
return $x;
}
$x = 10;
echo "\$x = " . ajouter($x, 10); // écrit "$x = 20"
echo "\$x = " . ajouter($x); // écrit "$x = 11"
?>
Equivalent Javascript :
function ajouter(x) {
if (arguments.length == 2) var valeur = arguments[1];
else var valeur = 1;
x += valeur;
return x;
}
var x = 10;
alert("x = " + ajouter(x, 10)); // affiche "x = 20"
alert("x = " + ajouter(x)); // affiche "x = 11"
Dans la fonction ajouter, si on a 2 arguments, la variable valeur prend la valeur de cet

argument, sinon valeur prend la valeur 1 par défaut.
Appels de fonctions
L’appel de fonction se fait comme dans l’exemple :
ou carre_de(nombre) ; si la fonction ne retourne aucune valeur
Une fonction peut en appeler une autre.
Mais pour qu’une fonction soit appelée, il faut qu’elle soit définie, c’est‐à‐dire écrite, avant
d’être appelée.
Ici, la fonction "calculeTVA" appelle la fonction "monetaire"
// cette fonction formatte un nombre au format monétaire
function monetaire (x) {
var cents = Math.round(x*100) Math.floor(x)*100;
if (cents < 10) cents = "0" + cents;
x = Math.floor(x) + "," + cents + " €";
return x;
}
function calculeTVA (somme, tauxTVA) {
return monetaire(somme * tauxTVA);
}
La récursivité
Une fonction peut éventuellement s’appeler elle‐même, ce qui est une exception à ce qui
vient d’êtrre écrit... C’est ce qu’on appelle la "récursivité", à manipuler avec précautions.
L’utilisation principale de la récursivité est la manipulation de données structurées en

"arbre" : très employé dans les recherches. Mais voici l’exemple classique de la factorielle :
factorielle(1) = 1, factorielle(2) = 2*1 = 2, factorielle(3) = 3 * factorielle(2) = 3*2 = 6, etc.
function factorielle(n) {
if (n > 1)
return n * factorielle(n1);
else return 1;
}
Voici comment cela fonctionne, avec factorielle(4) :
n instruction
4 appel de factorielle(3);
1 return 1;
2 return 2 * factorielle(1); // = 2 * 1 = 2
La fonction appelle successivement factorielle(4) jusqu’à factorielle(1), puis les appels

remontent de factorielle(1) à factorielle(4).
Souvent la forme récursive est 3 à 4 fois plus courte que la forme non récursive (ce qui n’est
pas le cas ici), mais le problème est l’appel de la même fonction en cascade, ce qui bouffe de
la mémoire... Si vous avez une grosse fonction récursive ou une fonction récursive qui
manipule de gros données, vous risquez un « dépassement de pile » (ou « stack overflow »),
car les fonctions (récursives ou pas) sont placées en mémoire dans une pile au moment de
leur appel, et retirées de la pile dès qu’elles ont terminé. Et ici dans le cas des factorielles,
lorsque n = 1 ; on aurait 4 fonctions factorielle() empilées.
Les fonctions prédéfinies

Javascript possède un certain nombre de fonctions prédéfinies dont le nombre enfle à mesure
de la sortie de nouvelles versions du langage.
Les fonctions Objet.méthode()
Ces fonctions sont généralement liées à un objet (document, fenêtre, formulaire, bouton...)
et elles doivent être écrites derrière l’objet. Ex :
document.write('écrit un texte dans la page');
qui est la fonction "write" utilisée uniquement avec l’objet "document" (la page en cours).
Du fait que ces fonctions sont liées ou plutôt intégrées à un objet, on les appelle des
"méthodes" (terminologie orientée‐objet).
Vous trouverez toutes les méthodes Javascript dans la référence du langage sur le site de
Netscape (en anglais) :
http://developer.netscape.com/docs/manuals/js/client/jsguide/index.htm
Les méthodes qui s’écrivent indépendamment d’un objet
Quelques méthodes ne sont pas liées à un objet (on devrait dire alors "fonctions") :
escape(), unescape(), eval(), taint() et untaint(). et doivent être écrites seules.
D’autres méthodes sont liées à la fenêtre en cours :
alert(), prompt(), confirm() et peuvent également être écrites seules :
alert("ce message est affiché sur la fenêtre; cliquez OK pour le refermer");
Les méthodes de l’objet Math
Enfin, une série de méthodes est liée à l’objet Math qui n’est pas un objet "palpable" comme
une fenêtre ou un bouton. Ce sont toutes les méthodes de calcul :
Math.sin(), Math.cos(), Math.floor(), Math.round()....
Cet objet Math possède aussi des propriétés, par exemple Math.PI qui vaut 3.14159...
Créer ses propres objets en Javascript
Javascript met à votre disposition une panoplie d’objets qui sont, en fait, basés sur les
constituants d’une page HTML : document, image, browser... Vous apprendrez à les
connaître.
Il est également possible de créer ses propres objets. AMHA, c’est là l’intérêt principal du
langage. Et c’est le propos de cette modeste page...
Pourquoi créer des objets ?
Ils permettent de créer des entités indépendantes :
modifiables sans pour autant toucher au reste du script

réutilisables telles quelles dans d’autres scripts
Exemple
Je veux gérer des articles que je désire vendre en ligne. Ces articles serviront dans un script
permettant au visiteur de trouver de l’information et de visualiser une photo de cet article,
et dans un autre script lui permettant de les commander.
Définition de l’objet
Voici la fonction qui crée une "classe" d’articles. Le mot réservé "this" indique que les
propriétés "nom", "libelle"... appartiennent à l’objet en cours.
function typeArticle(nom, libelle, prix, tauxTVA, image, description) {
this.nom = nom;
this.libelle = libelle;
this.prix = prix;
this.tauxTVA = TauxTVA[tauxTVA];
this.image = "images/" + image + ".gif";
this.descro = "articles/" + description + ".htm";
}
Ajouter des méthodes à l’objet
Voici quelques "méthodes" (fonctions liées à un objet) :
function calculeTVA(valeur) {
return valeur * this.tauxTVA;
}
function montantHT(quantite) {
return quantite * this.prix;
}
function montantTTC(quantite) {
var valeur = this.montantHT(quantite);
return valeur + this.calculeTVA(valeur);
}
function description() {
location.href = this.descro;
}
function afficheArticle() {
document.write(this.nom + unescape("%09") + this.libelle +
unescape("%09") + this.prix + " FF");
}
unescape("%09") permet d’écrire un car de tabulation (TAB)
On remarquera qu’on peut appeler d’autres fonctions ou méthodes liées à typeArticle en les
faisant précéder de "this". De même les propriétés de typeArticle sont aussi précédées de
"this".
Mais ces fonctions ne sont pas liées à typeArticles. Il faut déclarer ensuite :
typeArticle.prototype.calculeTVA = calculeTVA;
typeArticle.prototype.montantHT = montantHT;
typeArticle.prototype.montantTTC = montantTTC;
typeArticle.prototype.description = description;
typeArticle.prototype.affiche = afficheArticle;
Quelques observations :
Il n’est pas indispensable de donner le même nom que la fonction d’origine

Il ne faut pas mettre de () aux fonctions.
Voilà, les 5 fonctions sont maintenant réellement des méthodes de typeArticle

Une collection d’objets
L’intérêt des objets est de pouvoir traiter des ensembles d’objets. On utilise pour ça un
tableau :
var Articles = new Array();
function creeArticle(nom, libelle, prix, tauxTVA, image, description) {
Articles[Articles.length] = new typeArticle(nom, libelle, prix, tauxTVA, image,
description);
}
creeArticle("véloenfant", "vélo pour enfant", 1000, 2, "enfant", "enfant");
creeArticle("vélodame", "vélo pour dame", 1500, 2, "dame", "dame");
creeArticle("vélohomme", "vélo pour homme", 1500, 2, "homme", "homme");
function listeArticles() {
var i = 0;
for (i=0;i<Articles.length;i++)
Articles[i].affiche();
}
function factureTTC() {
var i, total = 0;
var args = factureTTC.arguments;
for (i=0;i<args.length;i++)
total += Articles[i].montantTTC(args[i]);
}
La fonction creeArticles :
elle utilise la propriété length de tout tableau = le nombre d’éléments qu’il contient. dans
chaque élément de ce tableau Articles, on crée un objet typeArticle Ensuite, on appelle
creeArticle pour créer autant d’objets typeArticle qu’on veut. Ces objets sont ajoutés au
tableau de l’indice 0 à 2 (ici).
La fonction listeArticles :
parcourt tout le tableau Articles et pour chaque élément affiche les infos de cet article en
faisant appel à la méthode "affiche" de typeArticle, puisque chaque élément du tableau est
un objet typeArticle.
La fonction factureTTC :
Elle est un peu plus complexe, quoique sur le même principe. Elle s’utilise ainsi :
factureTTC(0, 1)
où les arguments sont les quantités commandées : soit ici 0 vélo homme, 1 vélo femme, 0
vélo enfant.
Ca revient au même d’écrire
factureTTC(0, 1, 0)
mais pas d’écrire :
factureTTC(1)
car on penserait que c’est un vélo homme qui a été commandé.
On utilise pour cela une fonction à nombre variable d’arguments : voir pour cela le tutoriel
précédent.
Intérêt des objets
Espérons que ce rapide survol des objets vous donnera une idée de la technique.
L’intérêt de cette technique est de séparer les entités. Tout ce qui concerne les articles est
implémenté dans la classe typeArticle et ses méthodes. Ensuite, on peut faire appel aux
méthodes de la classe sans s’occuper de ce qu’il y a dedans.
Un exemple un peu plus spectaculaire des objets se trouve dans les scripts avec les boules qui
rebondissent ou qui entrent en collision : il suffit d’implémenter le comportement de l’objet
boule, ensuite on peut créer autant de boules qu’on veut, chacune vit sa propre vie
indépendamment des autres et en intéraction avec les autres.
La programmation objet en Javascript
Javascript n’est pas vraiment un langage objet, comme C++ ou Java, et même PHP. Mais les
fonctionnalités objets de ce langage permettent de créer des simili‐classes, des méthodes et
même d’utiliser l’héritage.
Bref historique de la programmation
Le code au kilomètre...
Au début, on écrivait son code ligne par ligne, avec des renvois à un numéro de ligne. Les
programmes étaient heureusement courts, mais dès qu’ils se sont allongés, c’était illisible.
La programmation fonctionnelle
On a eu idée de créer des fonctions, qui permettaient de ne pas écrire plusieurs fois les
mêmes sections de code, et surtout de concentrer des actions du programme dans de petites
unités.
La programmation orientée‐objet (POO)
On s’est aperçu que notre mode de pensée fonctionne par objets : un stylo qui permet
d’écrire, qui a telle couleur, une feuille de papier qui contient tel texte ou qui est vide... Un
objet est constitué de propriétés (la couleur, la marque du stylo) et de méthodes, c’est‐à‐
dire, les fonctions qui décrivent le comportement de l’objet ou les actions qu’on peut lui
faire faire (écrire avec un stylo, remplir sa recharge, le ranger...).
Les avantages de la POO

un code plus clair à lire et et plus facile à modifier
réutilisation des classes pour d’autres scripts
Définitions
On va commencer par quelques définitions pour ceux qui ne connaissent rien à la POO
(programmation orientée objet).
Classe
Une classe décrit un catégorie d’objets, comme des personnes ou des voitures... La classe
contient des propriétés inhérentes à l’objet décrit, plus des méthodes ou fonctions qui
définissent le comportement de l’objet.
On a souvent tendance à confondre classe et objet. La classe est un concept, elle décrit
l’objet, tandis que l’objet est un élément concret. On verra avec les exemples.
En Javascript, la classe n’existe pas en temps que définition. Dans les véritables langages
objets, on définit une classe et ses objets ainsi :
class MaClasse {
propriete1;
propriete2;
// constructeur de la classe
function MaClasse() {
...
}
function methode1() {
...
}
}
fin de la classe
monObjet = new MaClasse(); // création de l'objet monObjet
On verra comment on fait en Javascript
Objet
Une fois la classe définie, on peut créer des objets sur le modèle de cette classe. Le langage
crée alors une copie de la classe (avec les propriétés et les méthodes) pour chaque objet
créé.
Propriété
Une propriété est une variable qui décrit un aspect de la classe. Ainsi document.title décrit
la propriété « titre » du document (la page).
Méthode
Une méthode n’est rien d’autre qu’une fonction incluse dans une classe. Ainsi
document.write() est une méthode de la classe document, alors que new() (qui permet de
créer un objet à partir d’une classe) est une fonction du langage, donc rattachée à aucun
objet.
Constructeur
Un constructeur est une méthode spéciale, qui est appelée à chaque fois qu’on crée un objet
avec la fonction new().
Javascript n’a pas de type « classe », mais il le remplace par un constructeur. Et c’est le
constructeur qui décrit la classe. En fait, constructeur et création de classe est mélangé.
Destructeur
Un destructeur est une fonction qui permet de supprimer un objet. Il n’est pas possible d’en
créer un en Javascript : le destructeur par défaut est appelé par la fonction delete(objet)
Héritage
Dans certains cas, on peut définir une hiérarchie d’objets, des plus simples aux plus
complexes. On a une classe de base, qui contient le minimum de propriétés et de méthodes.
Puis des classes dérivées, contenant des propriétés et des méthodes plus spécialisées. Ces
classes dérivées peuvent hériter alors des propriétés et des méthodes de la classe de base,
sans les redéfinir.
Le mécanisme d’héritage de Javascript est assez sommaire, mais il a le mérite d’exister.
Créer une classe et des objets en Javascript
On veut gérer un parc de voitures. Voici comment on peut s’y prendre (les voitures sont
définies plutôt sommairement pour l’exemple).
Définition de la classe
Constructeur
function clVoiture(la_marque, le_modele, le_numero, kilometrage, le_prix) {
this.marque = la_marque;
this.modele = le_modele;
this.numero = le_numero;
this.km = kilometrage;
this.prix = le_prix;
}
« marque », « modele », « annee », « km » et « prix » sont les propriétés de la classe

clVoiture. L’opérateur « this » indique que ces variables sont des variables rattachées à
clVoiture.
Les noms des paramètres (« la_marque », etc. sont différents des noms des propriétés, pour
montrer que ce sont 2 choses différentes. Mais on aurait pu donner les mêmes noms,
Javascript sachant quels sont les paramètres et quelles sont les propriétés :
function clVoiture(marque, modele, numero, km, prix) {
this.marque = marque;
this.modele = modele;
this.numero = numero;
this.km = km;
this.prix = prix;
}
On a dit (page précédente) que Javascript n’a pas de type classe. En effet, et cette fonction
clVoiture n’est pas une classe, mais le constructeur de la classe clVoiture. Javascript n’a
besoin que du constructeur pour créer une classe.
On peut mettre du code dans le constructeur, par exemple, indiquer directement le prix en
euros :
this.km = km;
this.prix = prix + " €";
}
Instancier des objets

Voilà un terme qui vous paraît peut‐être étranger... On dit aussi créer une « instance » de
classe, c’est‐à‐dire créer un objet réel, à partir de la définition du constructeur. On utilise
pour ça l’opérateur new constructeur(params).
Pour créer des voitures :
var voiture1 = new clVoiture("Renault", "Safrane", "1245 AAA 34", 25000, 10000);
var voiture2 = new clVoiture("Opel", "Vectra", "7894 XS 30", 40000, 8000);
Assigner un objet à une variable ou à un argument de fonction
C’est facile :
var ma_voiture = voiture1;
ma_voiture.modele; // donnera "Safrane"
Passer un objet en tant qu’argument de fonction, idem :
function modele_de_voiture(voiture) {
return voiture.modele;
}
modele_de_voiture(voiture1); // donnera "Safrane"
Autre façon de créer des objets

Il existe une autre manière de créer des objets, sans passer par un constructeur. C’est plus
simple, mais on verra plus tard que c’est plus limité, car on ne peut pas leur rattacher de
méthode.
var voiture1 = {marque:"Renault", modele:"Safrane", numero:"1245 AAA 34", km:25000,
prix:10000};
var voiture2 = {marque:"Opel", modele:"Vectra", numero:"7894 XS 30", km:40000,
prix:8000};
Attention : ce sont des accolades { } et non plus des parenthèses ( ).
Accès aux objets et à leurs propriétés

On utilise la « syntaxe à points » comme pour les objets prédéfinis :
document.write(voiture1.numero); // écira "1245 AAA 34"
document.write(voiture2.marque); // écrira "Opel"
Unicité des propriétés

Supposons qu’on veuille aussi définir une classe clClient, avec un numéro, un nom et un
numéro de téléphone (la notation clXXX est une notation personnelle conforme à la notation
hongroise)
function clClient(numero, nom, tel) {
this.nom = nom;
this.tel = tel;
}
var client1 = new clClient("1245", "Pierre Sachard", "0412345678");
document.write(client1.numero); // donnera "12345"
document.write(voiture1.numero); // donnera "1234 AAA 34"
Javascript ne confond pas les 2 numéros, sachant bien que le 1er appartient à client1 de la
classe clClient et le 2e à voiture1 de la classe clVoiture.
Les tableaux d’objets

Le principal intérêt des classes est de créer une structure (la classe ou le constructeur de
classe pour Javascript) et d’instancier une série d’objets à partir de cette classe. D’où
l’utilisation presque systématique de tableaux d’objets.
Voici une façon de faire que j’utilise couramment :
var t_voitures = new Array();
function voiture(marque, modele, numero, km, prix) {
t_voitures[t_voitures.length] = new clVoiture(marque, modele, numero, km, prix);
}
voiture("Renault", "Safrane", "1245 AAA 34", 25000, 10000);
voiture("Opel", "Vectra", "7894 XS 30", 40000, 8000);
On crée ainsi un tableau de 2 objets clVoiture. Et par exemple pour afficher un listing de
toutes les voitures :
function listing_voitures() {
for (var i=0;i<t_voitures.length;i++)
document.write(t_voitures[i].affiche());
}
Définir le comportement des ses objets avec des méthodes
En POO, il existe en gros 2 sortes de méthodes, les méthodes privées, qui sont appelées au
sein de la classe et inacessibles en dehors et les méthodes d’interface ou publiques, qu’on
peut appeler du dehors de la classe.
En Javascript tout est public, propriétés et méthodes. Mais pour avoir vraiment des objets
indépendants, il est préférable de ne pas accéder directement aux propriétés des objets, et
d’utiliser des méthodes pour cela.
Les 3 manières de créer des méthodes
On va créer une méthode qui affiche les infos d’une voiture, pour l’utiliser dans un listing. On
va l’appeler simplement affiche().
Définition dans le constructeur
this.km = km;
this.prix = prix;
this.affiche = clVoiture_affiche;
}
function clVoiture_affiche() {
return this.marque + " " + this.modele + " " + this.numero + " " + this.km + " kms
" + this.prix + " €<br>";
}
Remarques :
dans la définition this.affiche = clVoiture_affiche;, on n’indique pas de (),

dans la définition de la fonction clVoiture_affiche(), on fait référence aux propriétés de
l’objet en utilisant l’opérateur « this », parce que cette fonction est une méthode.
Appel de la méthode
On utilise la même notation que pour les propriétés :
document.write(voiture1.affiche()); // écrira "Renault Safrane 1245 AAA 34 25000

kms 10000 €"
Utilisation de la propriété « prototype »
this.km = km;
this.prix = prix;
}
function clVoiture_affiche() {
}
clVoiture.prototype.affiche = clVoiture_affiche;
Remarques :
le résultat est exactement le même que dans la définition précédente : on crée une
méthode affiche(), mais la définition est faite à l’extérieur du constructeur, grâce à la
propriété « prototype »,
dans le prototype : à gauche du signe « = » le nom de la méthode, à droite le nom de la
fonction correspondante,
cette façon de faire est la plus souple, car on peut définir le prototype n’importe où dans le
script.
Définition de la méthode directement dans le prototype
this.km = km;
this.prix = prix;
}
clVoiture.prototype.affiche = new function() {
}
Remarques :
cette façon de faire est plus simple que la précédente, puisqu’on ne crée plus de fonction
clVoiture_affiche(),
cependant, il faut écrire la méthode avant le code qui l’appellera, contrairement à la façon
précédente qui permet plus de liberté à ce niveau‐là,
les 2 dernières façons de créer des méthodes sont les seules utitlisables, si on veut ajouter
de nouvelles méthodes à des objets Javascript prédédinis.
String
Bibliothèque de méthodes additionnelles à l’objet String (chaînes de caractères)
alphanumer ique
Détermine si une chaîne de caractères est alphanumérique
Cette méthode retourne "true" si la chaîne ne contient aucun caractère non alphanumérique,
sinon elle retourne "false". L’espace et les caractères « ’ » (apostrophe) et « » (tiret) sont
acceptés comme caractères alphabétiques.
Syntaxe : chaine.alphanumerique();
Exemple :
var chaine = "Les 2 fenêtres d'à côté";
if (chaine.alphanumerique()) alert(chaine + "est alphanumérique");
else alert(chaine + "n'est pas alphanumérique");
var chaîne = "15 €";
if (chaine.alphanumerique()) alert(chaine + "est alphanumérique");
else alert(chaine + "n'est pas alphanumérique");
Donnera "Les 2 fenêtres d’à côté est alphanumérique"
et "15 € n’est pas alphanumérique"
String.prototype.alphanumerique = function() {
re = /^[\s09AZazéèêëàâäçîïôöùûüÉÈÊËÀÂÄÎÏÔÖÙÛÜ\']+$/;
if (this.search(re) != 1) return true;
else return false;
}
Compatibilité Netscape 4
Cette méthode n’est pas compatible Netscape 4. En effet, la fonction search() (ainsi que
match()) avec des caractères accentués provoque un plantage de cette version de Netscape (ce
qui n’est pas le cas avec les versions suivantes).
Voici un correctif qui fonctionne avec tout navigateur :
String.prototype.est_alphanum = function() {
re = /^[\s09AZa
z&eacute;&egrave;&ecirc;&euml;&agrave;&acirc;&auml;&ccedil;&icirc;
&iuml;&ocirc;&ouml;&ugrave;&ucirc;&uuml;&Eacute;&Egrave;&Ecirc;&Euml;&Agrav
e;
&Acirc;&Auml;&Icirc;&Iuml;&Ocirc;&Ouml;&Ugrave;&Ucirc;&Uuml;\']+$/;
if (this.search(re) != 1) return true;
else return false;
}
(tous les codes doivent être sur la même ligne, ici le passage à la ligne a été fait pour la
lecture)
Il est nécessaire que la chaîne à analyser soit aussi codée en caractères équivalents HTML. Et
pour que votre éditeur HTML affiche ces caractères en équivalents HTML, il doit être en
codage 7 bits, c’estàdire enlever la directive META : <meta httpequiv="ContentType"
content="text/html; charset=iso88591"> (qui normalement dispense de ce codage).
bin_en_decimal
convertit une chaine binaire en nombre décimal
La solution la plus simple pour convertir une chaîne binaire en décimal est :
var decimal = parseInt(chaine, 2);
Exemple :
var chaine = "0101";
parseInt(chaine, 2); // donne 5
Cette méthode permet d’utiliser des valeurs signées. Elle convertit une chaîne de caractères
sous la forme binaire (ex. : "0101" = 5) en nombre décimal.
Elle prend un argument optionnel "signed", "vrai" si le nombre est signé, "faux" s’il ne l’est
pas ou si l’argument est omis. Par exemple "1111" vaut 15 si le nombre est non signé ou 1
s’il l’est.
Syntaxe
chaine.bin_en_decimal([signed]);
Exemples
chaine.bin_en_decimal(); // donnera 5
chaine.bin_en_decimal(true); // donnera encore 5
chaine.bin_en_decimal(); // donnera 15
chaine.bin_en_decimal(true); // donnera 1
Code
String.prototype.bin_en_decimal = function() {
if ((arguments.length) && arguments[0]) signed = true;
else signed = false;
var chaine = this;
var nombre = 0;
for (var i=0;i<chaine.length;i++) nombre = nombre * 2 +
parseInt(chaine.charAt(i));
if (signed) return 1 ~nombre;
else return nombre;
}
ch_r epeter
répète une chaîne
Retourne une chaîne de caractères constituée de « nombre » fois la « souschaîne »
syntaxe : var chaine = ch_repeter(sous_chaine, nombre);
exemple : var chaine = ch_repeter("_|", 20);
donnera "_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|_|"
function ch_repeter(sous_chaine, nombre) {
var ch = "";
for (var i=0;i<nombre;i++) ch += sous_chaine;
return ch;
}
contient_car s
fonctionne comme indexOf, mais avec plusieurs caractères
Cette méthode indique si une chaîne de caractères contient un des caractères en argument.
Mais contrairement à indexOf, la méthode ne retourne que "true", si un des caractères a été
trouvé, et "false" sinon.
Syntaxe : chaine.contient_cars(cars);
Exemples :
var chaine = "l'abatjour";
chaine.contient_cars("'"); // retourne "true"
chaine.contient_cars("x"); // retourne "true" (puisque la chaîne contient
"")
chaine.contient_cars("xyz"); // retourne "false"
String.prototype.contient_cars = function(cars) {
for (var i=0;i < cars.length;i++) {
if (this.indexOf(cars.charAt(i)) != 1) return true;
}
return false;
}
contr oler _taille
détermine si la longueur d’une chaîne est comprise entre min et max
Cette méthode retourne « vrai » si la longueur de chaîne de caractères est comprise entre les

valeurs « min » et « max » en argument, et si la chaîne n’est pas vide. Si l’argument « max »
est omis, ou s’il est nul, la chaîne n’aura pas de limite maximum.
Cette méthode pourra être utile pour contrôler les champs texte d’un formulaire.
Syntaxe : chaine.controler_taille(min[, max]);
Exemples sur
var chaine = "Ceci est un commentaire de 40 caractères";
if (chaine.controler_taille(10, 50)); // retourne vrai, car la taille de la
chaîne est comprise entre 10 et 50 caractères
if (chaine.controler_taille(10); // retourne vrai, car la chaine a plus de
10 caractères
if (chaine.controler_taille(0, 50); // retourne vrai, car la chaine a moins
de 50 caractères
if (chaine.controler_taille(10, 30); // retourne faux, car la chaine a plus
de 30 caractères
String.prototype.controler_taille = function(min) {
if (this.length < min) return false;
else {
if (arguments.length == 2) return this.length <= arguments[1];
else return true;
}
}
dr oite
retourne les derniers caractères d’une chaîne
Si l’argument "nombre" est nul ou n’est pas un nombre, la méthode retourne la chaîne en
entier.
Si l’argument "nombre" est positif, la méthode retourne les "nombre" derniers caractères de la
chaîne (si "nombre" est plus grand que la longueur de la chaîne, c’est toute la chaîne qui est
retournée).
Si l’argument "nombre" est négatif, la méthode retourne la chaîne amputée des "nombre"
premiers caractères (si "nombre" est plus grand, en valeur absolue, que la longueur de la
chaîne, une chaîne vide retournée).
Syntaxe : chaine.droite(nombre);
Exemples avec
var chaine = "abcdefghij"; // 10 caractères
machaine = chaine.droite(2); // donne machaine = "ij"
machaine = chaine.droite(8); // donne aussi machaine = "ij"
machaine = chaine.droite(20); // donne machaine = "abcdefghij"
machaine = chaine.droite(20); // donne machaine = ""
machaine = chaine.droite("2"); // donne machaine = "abcdefghij" ("2" n'est
pas un nombre)
String.prototype.droite = function(nombre) {
if (!nombre || isNaN(nombre)) return this;
else if (nombre >= 0) {
if (nombre >= this.length) return this;
else return this.substring(this.lengthnombre, this.length);
}
else if (Math.abs(nombre) >= this.length) return "";
else return this.substring(this.length+nombre);
}
email_valide
fonction vérifiant si une adresse email est valide
Retourne "true" si l’adresse email est valide, "false" sinon. Ne vérifie pas si l’adresse est
réelle.
syntaxe : email_valide(adresse);
exemple :
adresse = "untel@domaine.fr";
if (email_valide(adresse)) alert("Votre adresse email est valide");
else alert("Votre adresse email est erronée);
function email_valide(adresse) {
return (adresse.search("^[_az09]+(\.[_az09]+)*@[az09]+([\.][az0
9]+)+$") != 1);
}
gauche
retourne les premiers caractères de la chaîne
Si l’argument "nombre" est nul ou n’est pas un nombre, la méthode retourne la chaîne en
entier.
Si l’argument "nombre" est positif, la méthode retourne les "nombre" premiers caractères de
la chaîne (si "nombre" est plus grand que la longueur de la chaîne, c’est toute la chaîne qui est
retournée).
Si l’argument "nombre" est négatif, la méthode retourne la chaîne amputée des "nombre"
derniers caractères (si "nombre" est plus grand, en valeur absolue, que la longueur de la
chaîne, une chaîne vide retournée).
Syntaxe : chaine.gauche(nombre);
Exemples avec
var chaine = "abcdefghij"; // 10 caractères
machaine = chaine.gauche(2); // donne machaine = "ab"
machaine = chaine.gauche(8); // donne aussi machaine = "ab"
machaine = chaine.gauche(20); // donne machaine = "abcdefghij"
machaine = chaine.gauche(20); // donne machaine = ""
machaine = chaine.gauche("2"); // donne machaine = "abcdefghij" ("2" n'est
pas un nombre)
String.prototype.gauche = function(nombre) {
if (!nombre || isNaN(nombre)) return this;
else if (nombre >= 0) {
if (nombre >= this.length) return this;
else return this.substr(0, nombre);
}
else if (Math.abs(nombre) >= this.length) return "";
else return this.substr(0, this.length+nombre);
}
hexa_en_decimal
traduit un nombre héxadécimal en décimal
La solution la plus simple pour convertir une chaîne hexadécimale en décimal est :
var decimal = parseInt(chaine, 16);
Exemple :
var chaine = "FC";
parseInt(chaine, 16); // donne 252
Cette méthode permet d’utiliser des valeurs signées. Elle convertit la chaîne hexadécimale et
retourne un nombre décimal. Si l’argument optionnel "signed" est "true", la chaîne est
considérée comme une valeur signée (utile pour les nombres négatifs), sinon si "signed" est
"false" ou omis la chaine est considérée comme une valeur non signée.
Syntaxe
chaine2 = chaine1.hexa_en_decimal([signed]);
Exemples
chaine1 = "FC";
chaine2 = chaine1.hexa_en_decimal(); // chaine2 = "252"
chaine1 = "FFFFFF04";
chaine2 = chaine1.hexa_en_decimal(); // chaine2 = "4294967044"
chaine1 = "FFFFFF04";
chaine2 = chaine1.hexa_en_decimal(true); // chaine2 = "252"
Code
String.prototype.hexa_en_decimal = function() {
var nombre = eval("0x" + this);
if ((arguments.length) && arguments[0]) {
if (!(this.charAt(0) < "8")) {
var compl = 1;
for (var i=0;i<this.length;i++) compl <<= 4;
nombre |= compl;
}
}
return nombre;
}
Un peu d’explications sur ce code "tordu" :
if ((arguments.length) && arguments[0]) prend en compte l’argument "signed" s’il
est donné "true" : dans ce cas on considère le nombre comme signé
if (!(this.charAt(0) < "8")) : si le nombre à décoder est "FF04", le script comprend
"0000FF04" (65284), alors que vous attendez 252, c’estàdire "FFFFFF04"
dans les 3 instructions qui suivent, on crée le nombre 1 ("FFFFFFFF") qu’on décale
d’autant de chiffres hexadécimaux que de chiffres dans la chaîne fournie ("FF04"), ce qui
donnera "FFFF0000", puis on fait un OU entre ce dernier nombre et "0000FF04", ce qui
donne "FFFFFF04" ou plutôt 0xFFFFFF04
http_get_var s
récupère les informations transmise dans l’URL et les retourne dans un tableau
Retourne un tableau contenant les valeurs des variables transmises par l’URL, en particulier
dans le cas de l’envoi d’un formulaire par la méthode GET. Retourne null si l’URL ne
contient aucune variable.
syntaxe : var tableau = http_get_vars();
exemple 1 : "http://www.mondomaine.fr/mapage.htm?debut=50&nombre=10"
var tab = http_get_vars(); donnera tab["debut"] = 50 et tab["nombre"] = 10
exemple 2 : "http://www.mondomaine.fr/mapage.htm?50&10"
var tab = http_get_vars(); donnera tab[0] = 50 et tab[1] = 10
function http_get_vars() {
if (location.search) {
var params = location.search.substring(1);
if (params.indexOf("&") != 1) var variables = params.split("&");
else var variables = params.split("%26");
var get_vars = new Array();
for (var i in variables) {
var pos = variables[i].indexOf("=");
if (pos != 1)
get_vars[trim(variables[i].substring(0, pos))] =
trim(variables[i].substring(pos+1));
else get_vars[i] = trim(variables[i]);
}
return get_vars;
}
else return null;
}
Cette fonction utilise la fonction trim() implémentée plus loin dans cette page.
inter cale_car
intercale dans une chaîne un caractère tous les x caractères
Cette méthode retourne une chaîne dans laquelle on a intercalé un caractère (ou une chaîne) à
intervale fixe.
Syntaxe : chaine.intercale_car(car, intervale);
Exemple :
var hexa = "11000000";
hexa.intercale_car(" ", 4); retournera "1100 0000"
Code
String.prototype.intercale_car = function(car, intervale) {
var chaine = "";
for (var i=0;i<this.length;i+=intervale) {
chaine += (i ? car : "") + this.substr(i, intervale);
}
return chaine;
}
multi_decoupe
découpe une chaîne de caractères comme split() mais avec plusieurs séparateurs
La méthode split(séparateur) permet de découper une chaîne en tronçons séparés par un
séparateur. Elle retourne le tableau constitué de ces tronçons.
La méthode multidecoupe() fait la même chose, mais avec plusieurs séparateurs possibles.
Un exemple :
var chaine = "c'estàdire";
var tableau = chaine.multidecoupe("'");
// donne ["c", "est", "à", "dire"]
Attention, le tableau peut contenir des valeurs vides.
Exemple :
var chaine = "c'estàdire";
var tableau = chaine.multidecoupe("'à");
// donnera ["c", "est", "", "", "dire"]
puisqu’il n’y a rien entre "" et "à" et entre "à" et "".
L’ordre des séparateurs est indifférent. Le résultat sera le même si on écrit chaine.multi
decoupe("'").
Syntaxe : chaine.multi_decoupe(separateurs);
String.prototype.decoupe_multiple = function(sepas) {
var sepa = sepas.charAt(0);
var tab = this.split(sepa);
if (sepas.length == 1) return tab;
else {
var result = new Array();
for (var i=0;i<tab.length;i++)
result =
result.concat(tab[i].decoupe_multiple(sepas.substring(1)));
return result;
}
}
numer ique
Indique si une chaîne est numérique et retourne sa valeur numérique
Cette méthode vérifie qu’une chaîne est numérique, si c’est le cas retourne cette valeur, sinon
retourne faux.
Elle utilise isNaN, mais contrairement à cette fonction la virgule décimale est acceptée, et si
des caractères alphabétiques suivent les chiffres, ils sont supprimés.
Syntaxe : var valeur = chaine.numerique();
Exemples :
var chaine = "1.5"; chaine.numerique(); // donne "1.5"
var chaine = "1,5"; chaine.numerique(); // donne "1.5"
var chaine = "1.5E+2"; chaine.numerique(); // donne "1.5E+2"
var chaine = "1.5 €"; chaine.numerique(); // donne "1.5"
var chaine = ",5 €"; chaine.numerique(); // donne "0.5"
var chaine = "$1.5"; chaine.numerique(); // donne "false"
var chaine = "blabla"; chaine.numerique(); // donne "false"
var chaine = "10blabla"; chaine.numerique(); // donne "10"
String.prototype.numerique = function() {
if (isNaN(this)) {
var mot = this.replace(",", ".");
if (isNaN(mot)) {
var mot = parseFloat(mot);
if (isNaN(mot)) return false;
else return mot;
}
else return mot;
}
else return this;
}
sans_accents
Supprime les caractères accentués d’une chaîne de caractères
Il est parfois utile de supprimer les caractères accentués d’une chaîne et de les remplacer par
les caractères non accentués correspondants.
Cette fonction retourne la chaîne de caractères sans accents :
Syntaxe : chaine = chaine.sans_accents();
Exemple :
var chaine = "La fenêtre d'à côté";
alert(chaine.sans_accents());
affichera : "La fenetre d’a cote" ;
Malheureusement cette fonction fait (massivement) appel aux expressions régulières, ce qui
n’est pas trop recommandé, car lourd, mais j’ai testé d’autres méthodes qui se sont révélées
moins rapides que celle présentée ici.
String.prototype.sans_accents = function() {
var ch = this.replace(/é|è|ê|ë/g, "e");
ch = ch.replace(/à|â|ä/g, "a");
ch = ch.replace(/ç/g, "c");
ch = ch.replace(/î|ï/g, "i");
ch = ch.replace(/ô|ö/g, "o");
ch = ch.replace(/ù|û|ü/g, "u");
ch = ch.replace(/À|Â|Ä|Å/g, "A");
ch = ch.replace(/Ç/g, "C");
ch = ch.replace(/É|È|Ê|Ë/g, "E");
ch = ch.replace(/Ô|Ö/g, "O");
ch = ch.replace(/Ù|Û|Ü/g, "U");
return ch;
}
tel_formate
reformate un numéro de téléphone fourni sous différents formats
Cette fonction accepte en argument un numéro de téléphone sous forme de chaîne de
caractères, et retourne une chaine.
Elle accepte 2 arguments facultatifs :
le séparateur entre chiffres (espace si cet argument est omis)
le format territorial, si l’argument est "0" (numéro commençant par un "0") ou le format
international, si l’argument est "1" (numéro commençant par "(33)") ; si l’argument est omis
le numéro est laissé tel qu’il est saisi.
Syntaxe
var numero = tel_formate(numero_saisi[, sepa, mode]);
Exemples
Les formats acceptés sont les mêmes que ceux de la fonction tel_valide() cidessous
tel_formate("0123456789"); // donne "01 23 45 67 89"
tel_formate("123456789"); // donne "" (numéro non valide, il manque un
chiffre)
tel_formate("(33)123456789"); // donne "(33)1 23 45 67 89"
tel_formate("0123456789"); // donne "01 23 45 67 89"
tel_formate("0123456789", ""); // donne "0123456789"
tel_formate("01 23 45 67 89", ""); // donne "0123456789"
tel_formate("0123456789", "", 0); // donne "0123456789"
tel_formate("01 23 45 67 89", "", 1); // donne "(33)123456789"
tel_formate("(33)1 23 45 67 89", "", 0); // donne "0123456789"
Code
function tel_formate(chaine) {
var indefini;
if (arguments.length > 1) {
var sepa = arguments[1];
if (arguments.length > 2) var mode = parseInt(arguments[2]);
else mode = indefini;
}
else sepa = " ";
var tab = chaine.match("^([$]33[$]|0)([09])[ |\.|]?([09]{2})[ |\.|
]?([09]{2})[ |\.|]?([09])[ |\.|]?([09])[ |\.|]?([09]{2})$");
if (tab) {
if (mode != indefini) {
if ((mode>0) && (tab[1] == "0")) tab[1] = "(33)";
else if ((mode==0) && (tab[1] == "(33)")) tab[1] = "0";
}
return tab[1] + tab[2] + sepa + tab[3] + sepa + tab[4] + sepa + tab[5]
+ tab[6] + sepa + tab[7];
}
else return "";
}
tel_valide
détermine si un numéro de téléphone en France est valide
Cette méthode retourne "true" si le numéro de téléphone est valide, "false" sinon. Elle reçoit
comme argument un numéro de téléphone sous forme de chaîne de caractères.
Syntaxe
tel_valide(numero);
Formats acceptés
"0123456789"
"01 23 45 67 89"
"0123456789"
"01.23.45.67.89"
"01 23 456 789" ou avec les séparateurs : "", "."
"0123 456 789" ou avec les séparateurs : "", "."
ou les mêmes avec "(33)" à la place du "0"
Code
function tel_valide(chaine) {
if (chaine.search("^([$]33[$]|0)[09][ |\.|]?[09]{2}[ |\.|]?[0
9]{2}[ |\.|]?[09][ |\.|]?[09][ |\.|]?[09]{2}$") != 1)
return true;
else return false;
}
tr im, ltrim et r trim
Supprime les espaces au début et à la fin d’une chaîne
trim supprime les espaces au début et en fin de la chaîne
ltrim supprime les espaces au début de la chaîne
rtrim supprime les espaces en fin de la chaîne.
Ces 3 fonctions retournent une nouvelle chaîne de caractères.
syntaxe : chaine2 = trim(chaine1);
exemple : chaine2 = trim(" salut à tous ! "); // chaine2 = "salut à
tous!"
La première instruction permet de transformer les codes spéciaux "%XX" en leur caractère
équivalent, par exemple "%20" en " " (espace). Vous pouvez la supprimer, si vous n’en avez
pas besoin.
function trim (chaine) {
chaine = unescape(chaine);
return chaine.replace(/(^\s*)|(\s*$)/g, "");
}
function ltrim (chaine) {
return chaine.replace(/(^\s*)/, "");
}
function rtrim (chaine) {
return chaine.replace(/(\s*$)/, "");
}
typeOf
propriété de l’objet String, qui détermine si une variable est de type String (chaîne de
caractères)
C’est très simple : cette propriété retourne "String", si c’est une chaîne de caractères. La
même chose avec les autres types de variables permettra de déterminer quel est le type de
variable, au cas où une fonction admet plusieurs types.
Syntaxe : chaine.typeOf;
Exemple :
var chaine = "ma chaîne";
alert("Cette variable est du type " + chaine.typeOf);
// retourne "Cette variable est du type String"
String.prototype.typeOf = "String";
Ar ray
Bibliothèque de méthodes additionnelles de l’objet Array (tableau)
afficher
méthode d’affichage simple d’un tableau
Cette méthode retourne une chaîne de caractère contenant l’affichage du tableau sur
"colonnes" nombre de colonnes.
syntaxe : var chaine = tableau.afficher(colonnes);
exemple :
var tableau = new Array("val0, "val1"...);
document.write(tableau.afficher(10)); // affiche le tableau sur 10 colonnes
Array.prototype.<<b>>afficher<</b>> = function(colonnes) {
var texte = "<table width='100%' border='1'>";
var i = 0;
for (var i=0;i<this.length;i+=colonnes) {
var tab = this.slice(i, parseInt(i+colonnes1));
texte += "<tr><td>" + tab.join("</td><td>") + "</td></tr>";
}
texte += "</table>";
return texte;
}
afficher _multi
affichage rapide d’un tableau bidimensionnel
La quasitotalité des tableaux multidimensionnels sont bidimensionnels : voici une méthode
rapide pour les afficher.
Syntaxe : tableau.afficher_multi(tag_table);
L’argument tag_table est la balise "<table>" avec les attributs que vous désirez y mettre.
Voici un exemple :
var tableau = new Array();
tableau[0] = new Array(2, 5, 78, 45);
document.write(tableau.afficher_multi("<table cellspacing='0'
border='1'>"));
affichera :
2 5 78 45
9 15 98 67
20 32 99 88
Array.prototype.<<b>>afficher_multi = function(tag_table) {
var chaine = this.join("</td></tr><tr><td>");
chaine = chaine.replace(/,/g, "</td><td>");
return tag_table + "<tr><td>" + chaine + "</td></tr></table>";
}
contient
détermine si le tableau contient une valeur
C’est la même fonction que « in_array() » en PHP, mais qui n’existe pas en Javascript.
Voici 2 façons de faire : une simple et une complexe...
La première
Syntaxe : tab.contient(valeur); retourne "vrai" si "tab" contient "valeur", "faux" sinon.
Array.prototype.contient = function(valeur) {
for (var i in this) {
if (this[i] == valeur) return true;
}
return false;
}
La seconde
syntaxe :
tab.en_chaine();
tab.contient(valeur);
Cette seconde méthode, bien qu’un peu plus complexe, est beaucoup plus rapide que la 1ère
(12 fois selon mes tests), car elle utilise la méthode indexOf des chaînes de caractères , au lieu
de faire une boucle.
Cela nécessite de transformer d’abord le tableau en chaîne : c’est ce que fait la méthode
enChaine(). Si vous avez plusieurs recherches à faire, cette transformation ne doit être faite
qu’une seule fois.
// création d'une propriété "chaine" de l'objet Array, qui contiendra le
tableau en forme de chaîne, chaque élément séparé par un "|"
Array.prototype.chaine = "";
// fonction qui transforme le tableau en chaîne et affecte cette chaîne à
la propriété "chaine" cidessus
Array.prototype.en_chaine = function() {
this.chaine = "|" + this.join("|") + "|";
}
// méthode "contient" qui fait la recherche
Array.prototype.contient = function(valeur) {
if (this.chaine.indexOf("|" + valeur + "|") == 1) return false;
else return true;
}
is_ar r ay
fonction permettant de vérifier si une variable est de type Array
Ce n’est pas une méthode de l’objet Array, puisqu’elle doit s’appliquer à toute variable.
Elle teste si la variable est un tableau, puis retourne true, si c’est le cas ou false dans le cas
contraire.
Cette fonction utilise la méthode toSource() commune à tous les objets Javascript. Puis elle
vérifie si la chaîne générée par toSource() est de type "[element1, element2, ...]". Il est
impossible de confondre avec une chaîne de caractères qui aurait la même allure, car
chaine.toSource() fait précéder la valeur de "String()"
Syntaxe : if (is_array(variable))
function is_array(variable) {
var source = variable.toSource();
return (source.search(/^\[([^,]*,)+[^,]*\]/) != 1);
}
r echer cher
recherche basique d’une valeur dans un tableau quelconque
Cette méthode de recherche fonctionne sur n’importe quel tableau à une dimension. Elle
retourne « vrai » si elle a trouvé la valeur en argument, « faux » sinon.
Syntaxe : tableau.rechercher(valeur);
Exemple :
var tableau = new Array("un", "deux", "trois");
tableau.rechercher("deux"); // retourne "true"
Array.prototype.rechercher = function(valeur) {
var i = 0;
while (i < this.length) {
if (this[i] == valeur) break;
else i++;
}
if (i == this.length) return false;
else return true;
}
Cette méthode est la première d’une série de 4 méthodes de recherche, qui sont détaillées dans
l’article sur la recherche dans les tableaux.
r echer cher _comp
méthode de recherche dans un tableau quelconque mais trié
Cette méthode permet de faire une recherche dans un tableau quelconque, mais trié. La
comparaison pour la recherche se fait à l’aide d’une fonction de comparaison analogue à la
fonction de comparaison de la méthode sort(). Ce qui permet de l’utiliser pour des tableaux
complexes, comme des tableaux multidimensionnels ou des tableaux d’objets (voir exemple
dans l’article dans les tableaux). Mais il y a 2 différences :
le nom de fonction de comparaison doit s’écrire entre guillemets dans l’argument,
la fonction de comparaison prend 2 arguments : le 1er est un élément du tableau, le 2ème la
valeur à comparer.
Comme pour la méthode sort(), cette fonction de comparaison est facultative. Dans ce cas,
la méthode recherche_comp est identique à la méthode recherche_en_ordre.
Syntaxe : tableau.rechercher_comp(valeur[, "fonction_de_comparaison"]);
Exemple :
var tableau = new Array(12, 25, 46, 74);
function comparer_num(a, valeur) {
return a valeur;
}
tableau.rechercher_comp(25, "comparer_num"); //donne "true"
Array.prototype.rechercher_comp = function(valeur) {
var fcomp = "";
if (arguments.length == 2) fcomp = arguments[1];
if (fcomp) fcomp += "(this[i], valeur)";
var i = 0;
var trouve = false;
while (!trouve && (i < this.length)) {
if (this[i] == valeur) trouve = true;
else if (fcomp) {
if (eval(fcomp) > 0) break;
else i++;
}
else {
if (this[i] > valeur) break;
else i++;
}
}
return trouve;
}
r echer cher _dicho
recherche dichotomique dans un tableau trié
Cette méthode est beaucoup plus rapide que les méthodes de recherche standard, mais il faut
que le tableau soit trié. Voici 2 versions : la 1ère sans fonction de comparaison, la 2e avec une
fonction de comparaison.
Dans les 2 cas, si la méthode a trouvé la valeur elle retourne son indice dans le tableau. Si elle
ne l’a pas trouvée, elle retourne 1.
Syntaxe : var indice = tableau.rechercher_dicho(valeur);
Array.prototype.rechercher_dicho = function(valeur) {
var debut = 0; // début du tableau
var fin = this.length 1; // fin du tableau
var milieu = 0;
while (!trouve) {
milieu = Math.floor((debut + fin ) / 2);
if (this[milieu] == valeur) trouve = true;
else if (fin debut <= 1) break;
else if (this[milieu] > valeur) fin = milieu;
else debut = milieu;
}
if (trouve) return milieu;
else return 1;
}
De la même façon que la méthode de recherche recherche_comp, on utilise ici une fonction
de comparaison.
Syntaxe : var indice = tableau.rechercher_dicho(valeur,
"fonction_de_comparaison");
Array.prototype.rechercher_dicho = function(valeur, fcomp) {
fcomp += "(this[milieu], valeur)";
var debut = 0; // début du tableau
var fin = this.length 1; // fin du tableau
var milieu = 0;
while (!trouve) {
milieu = Math.floor((debut + fin ) / 2);
if (this[milieu] == valeur) trouve = true;
else if (fin debut <= 1) break;
else if (eval(fcomp) > 0) fin = milieu;
else debut = milieu;
}
if (trouve) return milieu;
else return 1;
}
r echer cher _en_or dr e
recherche dans un tableau trié en ordre alphabétique croissant
Cette méthode est plus rapide que la méthode de recherche basique, mais plus restreinte,
puisqu’elle ne fonctionne que sur les tableaux triés en ordre alphabétique croissant.
Syntaxe : tableau.rechercher_en_ordre(valeur);
Exemple :
var tableau = new Array("ananas", "banane", "châtaigne");
tableau.rechercher_en_ordre("mangue"); // retourne "false"
Array.prototype.rechercher_en_ordre = function(valeur) {
var i = 0;
while (!trouve && (i < this.length)) {
if (this[i] == valeur) trouve = true;
else if (this[i] > valeur) break;
else i++;
}
return trouve;
}
tr i_num
trie un tableau dans l’ordre numérique
Retourne un tableau de nombres triés par ordre numérique. Il existe une méthode de tri
sort(), mais par défaut elle trie dans l’ordre alphabétique, par exemple 1, 15, 18, 2, 26, 4,
44... au lieu de 1, 2, 4, 15, 18, 26, 44.... Heureusement, cette méthode accepte une fonction de
tri en argument, qui permet de trier comme on le désire.
Syntaxe : var tab2 = tab1.tri_num();
Exemples :
var tableau = new Array{52, 7, 12, 20};
tableau = tableau.sort(); // donne {12, 20, 52, 7}
tableau = tableau.tri_num(); // donne {7, 12, 20, 52}
tableau = tableau.reverse(); // donnera ensuite {52, 20, 12, 7}
// fonction de comparaison utilisée par sort()
function compare_num(a, b) {
return a b;
}
Array.prototype.tri_num = function() {
this.sort(compare_num);
}
var _dump
affichage du tableau pour test
Il existe en PHP une fonction var_dump() bien pratique pour afficher un tableau, au cours du
développement d’un script.
Le résultat de cette fonction n’est pas présentable dans un site, mais cela permet de vérifier la
structure d’un tableau sur lequel vous travaillez.
Array.prototype.var_dump = function() {
if (arguments.length) var indent = arguments[0];
else var indent = " "; // indentation des éléments du tableau
html = "a{";
var i = 0;
for (var elt in this) {
var typeelt = typeof this[elt];
if (typeelt == "function") continue;
html += i ? ", " : "";
if (typeelt == "object") html += "\n" + indent + "[" + elt + "]:" +
this[elt].var_dump(indent + indent);
else {
html += "[" + elt + "]:";
if (typeelt == "string") html += "\"" + this[elt] + "\"";
else html += this[elt];
}
i++;
}
html += "}";
return html;
}
Voici un exemple :
var tab0 = new Array("a", "b", "c");
var tab10 = new Array("d", "e");
var tab11 = new Array("f", "g");
var tab12 = new Array("h", "i");
var tab1 = new Array(tab10, tab11, tab12);
var tab2 = new Array("j", "k", "l");
var tab = new Array(tab0, tab1, tab2);
document.write(tab.var_dump());
Donnera :
a{ [0]:a{[0]:"a", [1]:"b", [2]:"c"}, [1]:a{ [0]:a{[0]:"d", [1]:"e"},
[1]:a{[0]:"f", [1]:"g"}, [2]:a{[0]:"h", [1]:"i"}}, [2]:a{[0]:"j", [1]:"k",
[2]:"l"}}
Et entre 2 balises <pre> et </pre> :
a{
[0]:a{[0]:"a", [1]:"b", [2]:"c"},
[1]:a{
[0]:a{[0]:"d", [1]:"e"},
[1]:a{[0]:"f", [1]:"g"},
[2]:a{[0]:"h", [1]:"i"}},
[2]:a{[0]:"j", [1]:"k", [2]:"l"}}
vider
vide un tableau
Cette méthode peut être parfois nécessaire, pour être sûr qu’un tableau, qu’on a déjà utilisé,
est vide.
Syntaxe : mon_tableau.vider();
Array.prototype.vider = function() {
this.splice(0, this.length);
Date
Méthodes et fonctions additionnelles pour l’objet Date
Variables globales utilisées dans les méthodes
var H24 = 24*60*60*1000; // un jour en millisecondes
var tmois = new Array("janvier", "février", "mars", "avril", "mai", "juin",
"juillet", "août", "septembre", "octobre", "novembre", "décembre");
var tsemaine = new Array("lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche");
afficher
affiche l’objet date au format "JJ/MM/AAAA"
Retourne une chaîne affichant l’objet date au format "JJ/MM/AAAA". Le séparateur est
indiqué en argument. Si aucun séparateur n’est indiqué, c’est le slash "/" qui est utilisé.
syntaxe : chaine = madate.afficher([separateur]);
exemples :
madate = new Date(2003, 0, 1); // Jour de l'An 2003
madate.afficher(); // donnera "01/01/2003"
madate.afficher(""); // donnera "01012003"
Date.prototype.afficher = function() {
var sepa = "/";
if (arguments.length) sepa = arguments[0];
return formate2(this.getDate()) + sepa + formate2(eval(this.getMonth() +
1)) + sepa + this.getFullYear();
}
// rajoute un "0" devant un nombre s'il est < 10
function formate2(nombre) {
return (nombre < 10) ? "0" + nombre : nombre;
}
ch_date_valide
contrôle si une date est valide
Fonction vérifiant si une date est valide. Les mêmes formats que la fonction ch_en_date sont
acceptés.
syntaxe : ch_date_valide(chaine);
exemple : ch_date_valide("25/12/2002");
// vérifie seulement le format de la date
function ch_date_valide(chaine) {
re = /^(\d\d?)(\/||\.)(\d\d?)(\/||\.)(\d\d)(\d\d)?$/;
return (chaine.search(re) != 1);
}
Autre implémentation : vérifie si la date existe vraiment. Par exemple, si vous saisissez
"29/02/2003", Javascript va traduire "01/03/2003". Dans ce cas, la fonction retourne "false".
Si la variable "pivot" vaut 30, par exemple, les années indiquées sur 2 chiffres inférieures à
30 sont comptées dans le 21e siècle (+2000), les autres dans le 20e siècle (+1900). Vous
pouvez modifier cette variable selon vos besoins (pivot=100 : toutes les dates seront au 21e
siècle).
function ch_date_valide(chaine) {
var pivot = 30;
ctl = /^(\d\d?)(\/||\.)(\d\d?)(\/||\.)(\d\d)(\d\d)?$/;
var tab = chaine.match(ctl);
if (!tab) return false;
else {
if ((tab.length == 6) || (!tab[6]))
tab[5] = ((tab[5] < pivot) ? 2000 : 1900) + parseInt(tab[5]);
else tab[5] = parseInt(tab[5].concat(tab[6]));
var unedate = new Date(tab[5], parseInt(tab[3])1, tab[1]);
return ((unedate.getFullYear() == tab[5]) && (unedate.getMonth() ==
tab[3]1) && (unedate.getDate() == tab[1]));
}
}
ch_en_date
convertit une chaîne en objet date
Fonction convertissant une chaîne de la forme "JJ/MM/AAAA" en objet date. La chaine peut
être de la forme "J[J].M[M].AA[AA]" ou "J[J]/M[M]/AA[AA]" ou "J[J]M[M]AA[AA]" (les
parties entre [] sont optionnelles).
Si la variable "pivot" vaut 30, par exemple, les années indiquées sur 2 chiffres inférieures à
30 sont comptées dans le 21e siècle (+2000), les autres dans le 20e siècle (+1900). Vous
pouvez modifier cette variable selon vos besoins (pivot=100 : toutes les dates seront au 21e
siècle).
syntaxe : madate = ch_en_date(chaine);
exemple : madate = ch_en_date("25/12/02") ;
function ch_en_date(chaine) {
var pivot = 30;
ctl = /^(\d\d?)(\/||\.)(\d\d?)(\/||\.)(\d\d)(\d\d)?$/;
var tab = ctl.exec(chaine);
if ((tab.length > 6) && (tab[6])) tab[5] += tab[6];
else tab[5] = (tab[5] < pivot) ? "20" : "19") + tab[5];
var unedate = new Date(tab[5], tab[3]1, tab[1]);
return unedate;
}
dans_inter valle
détermine si l’objet date est compris entre 2 dates
Méthode retournant "true" si l’objet date est compris entre la date de "debut" et la date de
"fin", "false" sinon. "debut" et "fin" sont aussi des objets Date.
syntaxe : madate.dans_intervalle(debut, fin);
Date.prototype.dans_intervalle = function(debut, fin) {
return ((this.getTime() >= debut.getTime()) && (this.getTime() <=
fin.getTime()));
}
date
affiche la date de l’objet date selon un format libre
Cette méthode est analogue à la fonction date() du PHP, mais elle ne fonctionne qu’avec la
date et non l’heure.
Elle retourne une chaîne de caractères, en fonction du format indiqué. A l’aide du format, la
méthode transforme les variables suivantes ainsi :
"J" : jour du mois ("JJ" jour affiché sur 2 chiffres)
"JS" : jour de la semaine ("JJJS" jour de la semaine abrégé à 3 caractères)
"M" : mois en chiffres ("MM" mois affiché sur 2 chiffres)
"ML" : mois en lettres ("MMML" mois abrégé sur 3 caractères, sauf juin et juillet qui sont
sur 4)
"AAAA" : année ("AA" sur 2 chiffres, "AAAA" sur 4 chiffres)
Les autres caractères du format sont transcrits tels quels.
Syntaxe : madate.date(format);
Exemples avec le 14 juillet 2003 :
var FetNat = new Date(2003, 6, 14); attention : en JS janvier = 0,....,
décembre = 11
FetNat.date("J/M/AA"); // donnera "14/7/03"
FetNat.date("AAAAMMJJ"); // donnera "20030714" (format date MySql)
FetNat.date("JS J ML AAAA"); // donnera "lundi 14 juillet 2003"
FetNat.date("JJJS J MMML AAAA"); // donnera "lun 14 juil 2003"
FetNat.date("J ML"); // donnera "14 juillet"
FetNat.date("MMML AAAA"); // donnera "juil 2003"
FetNat.date("Le J ML AAAA tombe un JS"); // donnera "Le 14 juillet 2003
tombe un lundi"
FetNat.date("Je suis né en ML"); // donnera "14e suis né en juillet" (le
"J" de "Je" est pris pour un jour)
écrire plutôt : "Je suis né en " + FetNat.date("ML");
FetNat.date("Aujourd'hui nous sommes le XXX"); // donnera "" (rien)
// pour un affichage complet avec l'heure utiliser la méthode heure() plus
loin :
FetNat.date("JJ/MM/AAAA) + " " + FetNat.heure("HH:MM"); // donnera
"14/07/2003 10:12"
// fonction utilisée par la méthode sort()
function compare_num(a, b) {
return a b;
}
Date.prototype.date = function(format) {
var texte = "";
// recherche un "j" en début de format (jour de la semaine)
// recherche ensuite les chaînes "LS" (jour de la semaine), "J" (jour du
mois),
// "M" (mois en chiffres), "ML" (mois en lettres) et "A" (année), qui
peuvent être dans un ordre quelconque
var posJS = format.indexOf("JS");
var posJ = format.indexOf("J");
if ((posJ != 1) && (posJ == posJS)) posJ = format.indexOf("J", posJS+1);
var posML = format.indexOf("ML");
var posM = format.indexOf("M");
if ((posM != 1) && (posM == posML)) posM = format.indexOf("M", posML+1);
var posA = format.indexOf("AA");
var tpos = new Array(posJS, posJ, posM, posML, posA);
// on met les positions de ces chaînes dans un tableau, qu'on trie et
qu'on purge des valeurs 1 (chaînes absentes)
tpos.sort(compare_num);
var i = 0;
while (i < tpos.length) {
if (tpos[i] == 1) tpos.shift();
else break;
}
// puis on traite les chaînes "JS", "J", "M", "ML" ou "AA" dans l'ordre du
format
i = 0;
var pos = 0;
while (i < tpos.length) {
pos1 = tpos[i];
// on écrit la chaîne se trouvent avant la chaîne "JS", "J", "M", "ML"
ou "AA"
texte += format.substring(pos, pos1);
pos = pos1 + 1;
if (pos1 == posJS) {
if (format.indexOf("JJJS") == 1) {
texte += tsemaine[this.quel_jour()];
pos++;
}
else {
texte += tsemaine[this.quel_jour()].substr(0, 3);
pos += 3;
}
}
if (pos1 == posJ) {
if (format.indexOf("JJ") == 1) texte += (this.getDate() == 1) ? "1er"
: this.getDate();
else {
texte += formate2(this.getDate());
pos++;
}
}
else if (pos1 == posM) {
if (format.indexOf("MM") == 1) texte += parseInt(this.getMonth() +
1);
else {
texte += formate2(parseInt(this.getMonth() + 1));
pos++;
}
}
else if (pos1 == posML) {
if (format.indexOf("MMML") == 1) {
texte += tmois[this.getMonth()];
pos++;
}
else {
texte += mois_court(this.getMonth());
pos+=3;
}
}
else if (pos1 == posA) {
if (format.indexOf("AAAA") == 1) {
texte += this.getFullYear().toString().substring(2);
pos++;
}
else {
texte += this.getFullYear();
pos+=3;
}
}
i++;
}
return texte;
}
// affiche le mois sur 3 lettres, sauf pour juin (5) et juillet(6) qui sont
affichés sur 4 lettres
function mois_court(num_mois) {
if ((num_mois < 5) && (num_mois > 6)) return tmois.substr(0, 3);
else return tmois.substr(0, 4);
}
// retourne 0 pour un lundi, 1 pour mardi... 6 pour dimanche
Date.prototype.quel_jour = function() {
return this.getDay() ? (this.getDay()1) : 6;
}
Les tableaux tsemaine et tmois sont en haut dessus.
Number
Bibliothèque de méthodes additionnelles à l’objet Number (nombres)
ar r ondir
arrondit un nombre avec un nombre de décimales donné
Cette fonction arrondit un nombre en fonction du nombre de décimales indiqué. Si le nombre
de décimales indiqué est négatif, le nombre est arrondi à la puissance de 10.
Si le signe décimal est la virgule, le point décimal sera remplacé par la virgule. Ce signe
décimal est indiqué par cette instruction :
Number.prototype.signe_decimal = ",";
(à mettre en début de code, mais pas dans la fonction)
Syntaxe : arrondir(nombre, decimales);
Exemples :
arrondir(15.3, 2); // > 15.30
arrondir(15, 2); //> 15.00
arrondir(15.001, 2); // > 15.00
arrondir(1.5, 0); // > 2
arrondir(0.009, 2); // > 0.01
arrondir(112.1, 2); // > 100
arrondir(15, 2); //> 15,00 si nombre.signe_decimal = ","
function arrondir(nombre, decimales) {
if (isNaN(nombre)) return "";
if (decimales == 0) {
var n = Math.round(nombre);
return n.toString();
}
else if (decimales > 0) {
if (document.all) var undefined; // Netscape 4 ne connaît pas la
constante "undefined"
var p10 = Math.pow(10, decimales);
var n = Math.round(nombre * p10);
n = n.toString();
var point = n.length decimales;
if (point >= 0) n = n.substring(0, point) + "." + n.substring(point);
else n = "0." + formater(n, decimales);
}
else {
var p10 = Math.pow(10, decimales);
var n = Math.round(nombre / p10) * p10;
n = n.toString();
}
if (nombre.signe_decimal == undefined) return n;
else return n.replace(".", nombre.signe_decimal);
}
binair e
convertit un nombre décimal en binaire
Cette méthode retourne une chaîne de caractères représentant le nombre en binaire (base 2).
Syntaxe : nombre.binaire([taille, mode]) ;
La méthode admet 2 arguments optionnels :
la taille, c’estàdire le nombre de bits affichés, éventuellement complétés à gauche par des
0
le mode qui peut être "unsigned" pour les valeurs non signées (toujours positives), "signed"
pour les valeurs signées (positives ou négatives) ou "auto" (valeur par défaut) : le script met
automatiquement "signed" si le nombre est négatif.
Exemples :
var x = 6;
x.binaire(); // donnera "101"
x.binaire(4); // donnera "0101"
var x = 6;
x.binaire(); // donnera "11111111111111111111111111111010"
x.binaire(8); // donnera "11111010"
Number.prototype.binaire = function() {
if (isNaN(this)) return null;
// pour l'instruction suivante, voir min_max_int() plus bas
if ((this > Number.MAXINT) || (this < Number.MININT)) return null;
if (arguments.length) var lim = parseInt(arguments[0]);
else var lim = 0;
var tab_bin = new Array("0", "1");
var result = "";
var nombre = this;
var i = 0;
while (nombre) {
if (lim && (lim == i++)) break;
result = tab_bin[(nombre & 1)] + result;
nombre >>>= 1;
}
if (lim) {
while (result.length < lim) result = "0" + result;
}
return result;
}
ecar t_type
calcule l’écarttype d’une série de nombres
Cette fonction retourne un nombre, qui est l’écarttype des nombres fournis en arguments.
L’écarttype est utilisé en statistiques et représente la racine carrée de la variance. En clair, si
la série de nombres est proche de la moyenne, l’écarttype sera faible, si au contraire les
nombres s’écartent de la moyenne, l’écarttype sera élevé.
Les valeurs non numériques seront ignorées (le calcul se fera entre les valeurs numériques).
Les arguments peuvent être sous 2 formes possibles :
une liste de nombre,
ou un tableau de nombres
Syntaxe : ecart_type(nombre1, nombre2....);
ou ecart_type(tableau_de_nombres);
Exemples :
ecart_type(1, 2, 3); // > 0.81649658
var tableau = new Array(1, 2, 3);
ecart_type(tableau); // > 0.81649658
ecart_type("1 €", "2 €", "€ 3") // donnera 0.5 ("€ 3" sera ignoré, car
considéré comme non numérique)
function ecart_type() {
if (arguments.length == 1) {
var arg = arguments[0];
if ((typeof(arg) == "string") || (typeof(arg) == "number")) return 0;
}
else arg = arguments;
var quant = arg.length;
var n = 0;
var n2 = 0;
for (var i=0;i<quant;i++) {
if (!isNaN(arg[i])) {
var val = parseFloat(arg[i]);
n += val;
n2 += val * val;
}
}
return Math.sqrt(n2/quant n*n/quant/quant);
}
for mater
rajoute des zéros devant un nombre s’il n’a pas la taille requise
Cette fonction retourne une chaîne de caractères, en rajoutant des zéros devant le nombre, si
taille est inférieure à la taille indiquée en argument.
Syntaxe : formater(nombre, taille);
Exemples :
formater(12, 3); // donne "012"
formater(12, 1); // donne "12"
formater("xxx", 1); // donne "" ("xxx" n'étant pas un nombre)
formater("12", 3); // donne "012" ("12" étant un nombre sous forme de
chaîne)
function formater(nombre, taille) {
if (isNaN(nombre)) return "";
var chaine = nombre.toString();
while (chaine.length < taille) chaine = "0" + chaine;
return chaine;
}
hexa
transforme un nombre décimal en hexadécimal
Cette méthode fonctionne avec un nombre, sinon elle retourne null. Elle retourne une chaîne
de caractères hexadécimale.
Syntaxe
nombre.hexa([longueur]);
l’argument longueur est optionnel et permet de rajouter des zéros devant la valeur
hexadécimale, pour compléter à la longueur voulue.
Exemples
var x = 10;
var hexa = x.hexa(); // donnera hexa = "A";
var hexa = x.hexa(2); // donnera hexa = "0A";
var x = 10;
var hexa = x.hexa(); // donnera hexa = "FFFFFFF6";
var hexa = x.hexa(2); // donnera hexa = "F6";
Code
Number.prototype.hexa = function() {
// elle vérifie que le nombre est dans les limites acceptées par votre
système,
// (elle est inutile, si ce risque est nul)
if (arguments.length) var lim = parseInt(arguments[0]);
else var lim = 0;
var ch_hexa = "0123456789ABCDEF";
var result = "";
var nombre = this;
var i = 0;
while (nombre) {
if (lim && (lim == i++)) break;
result = ch_hexa.charAt(nombre & 15) + result;
nombre >>= 4;
}
if (lim) {
while (result.length < lim) result = "0" + result;
}
return result;
}
int_log2
partie entière du logarithme à base 2 d’un nombre
Dans certains calculs (par exemple la profondeur d’un arbre binaire), il est utile de connaître
la partie entière du logarithme à base 2. Cette méthode ajoutée à l’objet Number retourne cette
partie entière sous forme de nombre.
On utilise ici l’opérateur bit à bit >>> qui est moins gourmand en ressources et plus rapide que

le calcul Math.floor(Math.log(N) / Math.LOG2E).
Syntaxe
nombre.int_log2();
Exemples
var x = 7;
x.int_log2(); // donnera 2
1024.int_log2(); // donnera 10
Code
Number.prototype.int_log2 = function() {
var nombre = this;
var i = 0;
while (nombre) {
nombre >>>= 1;
i++;
}
return i1;
}
min_max_int
définit l’entier mximum autorisé par le système
Cette méthode permet de définir les valeurs entières maximum et minimum autorisées par le
système. Evidemment, ça dépend du système, mais sur un système 32 bits ces valeurs seront
2147483647 et 2147483648, soit 2 31 1 et 2 31 ou 0x7FFFFFFF et 0x80000000 (en
hexadécimal).
Certaines méthodes de cette biblio font appel à ces valeurs (Number.MAXINT et
Number.MININT) pour éviter de planter le navigateur. Mais si vous êtes certains ne pas
dépasser ces limites, vous pouvez supprimer la ligne de ce contrôle dans chacune de ces
méthodes.
Number.prototype.MAXINT;
Number.prototype.MININT;
Number.prototype.min_max_int = function() {
var min = 1;
this.MAXINT = min >>> 1;
this.MININT = ~this.MAX_INT;
}
Number.min_max_int();
Les 2 premières instructions déclarent les 2 nouvelles propriétés MAXINT et MININT de l’objet

Number.
La méthode min_max_int() définit ces propriétés.
Enfin, il faut appeler la méthode pour pouvoir utiliser ces propriétés MAXINT et MININT, de
cette manière :
if ((valeur > Number.MAXINT) || (valeur < Number.MININT)) return null;
monétair e
arrondit un nombre à 2 décimales et ajoute le signe monétaire
Cette fonction retourne une chaîne arrondissant le nombre à 2 décimales, suivie du signe
monétaire fourni en argument. Elle utilise la fonction "arrondir" (plus haut).
Syntaxe : monetaire(nombre, monnaie);
Exemples :
monetaire(12.5, "€"); // > "12.50 €"
monetaire(1.158, "$"); // > "1.16 $"
function monetaire(nombre, monnaie) {
nombre = arrondir(nombre, 2);
return nombre + " " + monnaie;
}
moyenne
calcule la moyenne d’une série de nombres
Cette fonction retourne un nombre, qui est la moyenne des nombres fournis en arguments. Les
valeurs non numériques sont ignorées.
Syntaxe : moyenne(nombre1, nombre2....);
ou moyenne(tableau_de_nombres);
Exemples :
moyenne(1, 2, 3); // > 2
moyenne(tableau); // > 2
moyenne("1 €", "2 €", "€ 3") // donnera 1.5 ("€ 3" sera ignoré, car
function moyenne() {
if ((typeof(arg) == "string") || (typeof(arg) == "number")) return
arg;
}
var n = 0;
for (var i=0;i<arg.length;i++) {
if (!isNaN(arg[i])) n += parseFloat(arg[i]);
}
return n / arg.length;
}
var iance
calcule la variance d’une série de nombres
Cette fonction retourne un nombre, qui est la variance des nombres fournis en arguments. La
variance est utilisée en statistiques et représente la moyenne des carrés de la différence entre
chaque nombre et la moyenne. En clair, si la série de nombres est proche de la moyenne, la
variance sera faible, si au contraire les nombres s’écartent de la moyenne, la variance sera
élevée.
Les valeurs non numériques seront ignorées (le calcul se fera entre les valeurs numériques).
Syntaxe : variance(nombre1, nombre2....);
ou variance(tableau_de_nombres);
Exemples :
variance(1, 2, 3); // > 0.666667
variance(tableau); // > 0.666667
variance("1 €", "2 €", "€ 3") // donnera 0.25 ("€ 3" sera ignoré, car
function variance() {
if ((typeof(arg) == "string") || (typeof(arg) == "number")) return 0;
}
var quant = arg.length;
var n = 0;
var n2 = 0;
for (var i=0;i<quant;i++) {
if (!isNaN(arg[i])) {
var val = parseFloat(arg[i]);
n += val;
n2 += val * val;
}
}
return n2/quant n*n/quant/quant;
}
Comparaisons
Le choix de l’une ou l’autre solution n’est pas complètement libre.
Avec les objets Javascript prédéfinis
C’est‐à‐dire : Array, Date, Number, String... Vous ne pouvez utiliser que le prototypage.
De plus, vous ne pouvez appeler la méthode qu’après sa déclaration. Par exemple :
var valeur = document.forms[0].texte.value;
// supprime éventuellement les espaces avant et après
valeur.trim();
String.prototype.trim = function() {
var chaine = unescape(this);
this = chaine.replace(/(^\s*)|(\s*$)/g, "");
}
ne marchera pas. Il faut déclarer la méthode avant son appel.
Avec vos objets persos
On peut déclarer les méhodes dans le constructeur ou utiliser le prototypage.
Mais :
chaque objet encapsule les méthodes déclarées dans le constructeur, ce qui le rend plus
lourd, surtout si vous en avez créé beaucoup,
les méthodes déclarées avec prototype sont disponibles pour chaque objet, mais non
encapsulées, c’est donc plus léger.
Par contre :
si vous appelez une méthode avant sa déclaration, elle doit être obligatoirement
encapsulée,
sinon vous pouvez la prototyper.
Exemple :
var ma_voiture = new clVoiture(...);
function clVoiture(...) {
...
}
clVoiture.prototype.afficher = function() {
...
}
donnera une erreur « function afficher is not defined ».
Dans ce cas, il faut faire :
...
this.afficher = clVoiture_afficher;
}
function clVoiture_afficher() {
...
}
Mais :
...
}
clVoiture.prototype.afficher = function() {
...
}
fonctionnera bien.
Le mécanisme de l’héritage en Javascript
Il est possible en Javascript de créer des sous‐classes d’une classe et que ces sous‐classes
héritent des propriétés et des méthodes de sa classe‐mère.
Pourquoi faire des sous‐classes ? Supposons que votre application gère un parc de véhicules
(tourisme, utilitaires, camions, motos...). Vous pouvez créer une classe de base Vehicule,
avec un comportement de base. Puis des classes dérivées Tourisme, Utilitaire, Camion, Moto,
qui auront le comportement de base, plus des infos et des comportement spécifiques.
Javascript ne disposant pas réellement d’un langage objet, l’implémentation de l’héritage

tient plutôt du bricolage. Vous pourrez trouver sur internet plusieurs façons d’implémenter
cette possibilité et même des gens qui prétendent que c’est impossible. Voici ici une
implémentation qui a quelques avantages.
Un exemple
La classe Vehicule
Reprenons notre exemple des véhicules :
function Vehicule(marque, modele, numero, km, prix) {
this.compteur = km;
this.prix = prix;
}
Vehicule.prototype.afficher = function() {
return this.marque + " " + this.modele + " " + this.numero + " (" + this.km + "
kms) " + this.prix + " €<br>";
}
// on rajoute au compteur les kms parcourus
Vehicule.prototype.parcourir = function(kms) {
this.compteur += kms;
}
La définition des méthodes en dehors du constructeur de classe a l’avantage de réduire la

taille de celui‐ci, donc d’économiser de la mémoire. Puisqu’elles ne sont définies qu’une
seule fois pour tous les objets instanciés par la classe.
La sous‐classe Camion
On va créer une nouvelle classe des camions qui sera une sous‐classe de la classe Vehicule :
Camion.prototype = new Vehicule() ;
function Camion(marque, modele, numero, km, prix, PU, PTC) {
this.parent = Vehicule;
this.parent(marque, modele, numero, kms, prix);
this.PU = PU;
this.PTC = PTC;
}
function Camion_afficher() {
return this.marque + " " + this.modele + " " + this.numero + " " + this.km + "
kms " + this.prix + " € " + this.PU + " " + this.PTC + "<br>";
Le lien d’héritage
Le lien d’héritage entre la classe Camion et la classe Vehicule a été créé par
Camion.prototype = new Vehicule();. Ainsi que par les 2 premières lignes du constructeur
Camion().
Héritage des propriétés et des méthodes
La classe Camion a 2 propriétés spécifiques : PU (poids utile) et PTC (poids total en charge).
Les autres propriétés (marque, modele, numero, km, prix) sont héritées de la classe
Vehicule.
On peut donc écrire :
var mon_camion = new Camion("Volvo", "A47", "8888 AKZ 34", 30000, 180000, 15000,
25000);
alert("marque de mon camion : " + mon_camion.marque); // donnere "marque de mon
camion : Volvo"
mon_camion.parcourir(10000);
alert("Nouveau kilométrage = " + mon_camion.compteur);// donnera "Nouveau
kilométrage = 190000"
La classe Camion hérite aussi des méthodes afficher() et parcourir() de la classe Vehicule.
Mais du fait qu’une méthode afficher() a été redéfinie dans la classe Camion, ce sera cette
méthode qui sera appelée, et non la méthode de la classe Vehicule.
Par contre, appeler la méthode afficher() de la classe‐mère Vehicule n’est pas possible :
mon_camion.parent.afficher() produira une erreur ("Propriété non supportée par l’objet").
C’est pas compliqué, l’héritage en Javascript, non ?
Identificateurs, opérateurs et constantes Javascript
Pour ceux qui connaissent C, C++ ou Java, cette page n’est pas pour vous, car la syntaxe
Javascript est la même.
Par contre, pour les tout débutants, jetez‐y un coup d’oeil.
Les identificateurs
Ce sont les noms que vous donnez aux variables et aux fonctions.
uniquement des caractères alphabétiques non‐accentués, des chiffres, le caractère de

soulignement "_" ou le "$" sont autorisés, l’identificateur ne pouvant pas commencer par un
chiffre
sensibilité à la casse : MaVariable, mavariable et maVariable sont 3 variables différentes.
bon pas bon pourquoi ?

ma_variable ma variable espace non autorisé
pageChargee page‐chargée cars accentués et tirets interdits
_aplus @+ cars spéciaux interdits
_2000 2000 commence par un chiffre
document$ document mot réservé [1]
Déclaration des identificateurs
Il n’est pas (toujours) nécessaire en Javascript de déclarer une variable avant son utilisation,
mais ça permet de savoir où la variable a été déclarée. On utilise pour ça le mot réservé var.
La règle est :
si la variable est initialisée par une valeur, "var" n’est pas indispensable,
si la variable est déclarée sans valeur (undefined), "var" est indispensable (vous aurez une
erreur Javascript).
var an = 2000;
mois = "juillet";
var i, j = 0; // lorsque 2 variables sont initialisées à la même valeur
var prenom;
alert("prénom = " + prenom); // donne "prenom = undefined"
nom; // provoque une erreur Javascript
Lorsqu’une valeur (comme l’exemple de prenom) n’est pas initialisée, c’est‐à‐dire ne reçoit
pas de valeur, elle est non définie (undefined = indéfini). On peut la tester ainsi :
if (prenom == undefined)...
Mais Netscape 4 ‐ contrairement à ce que dit la doc Netscape ! ‐ ne reconnaît pas cette
instruction. Il faut créer une variable undefined :
var indefini; // "indefini" est undefined
if (prenom == indefini)...
Les instructions
Elles doivent toujours se terminer par un point‐virgule " ;"
Exception pour les blocs d’instructions entre accolades " "
if (!document.images) {} // pas de pointvirgule ici
else {
document.write("ce navigateur supporte les objets images"); // pointvirgule
document.images[i].src = "image" + i + ".gif"; // pointvirgule
}
Les blocs d’instructions sont délimités par des accolades " ".
Ils servent à délimiter un ensemble d’instructions et on les retrouve dans les instructions de
saut conditionnel et dans les fonctions.
Les opérateurs
Voici les opérateurs les plus utilisés
type opérateur exemple commentaire

affectation = a = 12 ; affecte la valeur 12 à la variable "a"
mathématique + addition a = b + 12 ;
‐ soustraction a = b ‐ 12 ;
* multiplication a=b*c;
/ division a=b/c;
% modulo [2] a=b%c;
concaténation + a = "bon" + "jour" ; donnera a = "bonjour"
unaire ++ i++ ; revient à i = i + 1 ; (incrémentation)
— i— ; revient à i = i ‐ 1 ; (décrémentation)
raccourci += a += 12 ; revient à a = a + 12 ;
‐= a ‐= 12 ; revient à a = a ‐ 12 ;
*= a *= 12 ; revient à a = a * 12 ;
/= a /= 12 ; revient à a = a / 12 ;
+= a += "plus" ; revient à a = a + "plus" ;
comparaison == a == b vrai si a égal à b
!= a != b vrai si a différent de b
> a>b vrai si a supérieur à b
< a<b vrai si a inférieur à b
>= a >= b vrai si a supérieur ou égal à b
<= a <= b vrai si a inférieur ou égal à b
&& (a < b) && (a > c) vrai si a < b ET a > c
|| (a == b) || (a == c) vrai si a égal à b OU a égal à c
Vous trouverez parfois une comparaison de ce type :
if (variable) ce qui signifie : if (variable != 0) ou

if (variable != "")
Comparaisons de type
Il existe également des opérateurs de comparaison particuliers qui comparent la valeur et le

type de 2 variables. Ils ne sont pas supportés par Netscape 4.
var x = "10";
var y = 10;
if (x == y) // donne "vrai"
if (x === y) // donne "faux" car x est une chaîne et y est un nombre
if (x !== y) // donne "vrai" pour la même raison
var x = "10";
var y = "0";
if (x == y) // donne "faux"
if (x === y) // donne "faux" car x et y sont des chaînes mais de valeur différente
if (x !== y) // donne "vrai" car x et y sont de valeur différente
(x === y) signifie que x et y sont égaux et de même type

(x !== y) signifie que x et y sont différents ou de types différents
Incrémentation
On l’utilise très souvent dans Javascript et les autres langages dérivés du C. On distingue
post‐incrémentation (i++) et pré‐incrémentation (++i) :
i = 0;
var x = tableau[i++];
dans ce cas x = tableau[0], puis i est incrémenté à 1 (post‐incrémentation)
i = 0;
var x = tableau[++i];
ici i est d’abord incrémenté à 1, puis x = tableau[1] (pré‐incrémentation)
Même chose avec i— et —i (post‐décrémentation et pré‐décrémentation)
Les constantes
Il y en a beaucoup. Mais les 2 que vous rencontrerez souvent sont "true" (vrai) et "false"
(faux) :
var page_chargee = false;
Les caractères spéciaux

caractère signification
\b retour arrière (backspace)
\f nouvelle page (form feed)
\n nouvelle ligne
\r retour à la ligne [3]
\t caractère de tabulation
\' apostrophe
\" guillemet
\\ anti‐slash (\)
caractère ISO‐latin‐1 indiqué par 3 chiffres en base octale (8) de 0 à 377, exemples \251
\XXX
pour « © » (caractère de copyright)
\xXX caractère ISO‐latin‐1 indiqué par 3 chiffres hexadécimaux, exemple \xA9 pour « © »
caractère ISO‐latin‐1 indiqué par 4 chiffres hexadécimaux, exemple \xu20AC pour « € »
\uXXXX
(symbole euro)
Notes :
[1] il existe une cinquantaine de mots réservés au langage : ce sont des mots en anglais que vous
apprendrez. Donc si vous donnez des noms français à vos variables, il y a peu de chances que vous leur
attribuiez un mot réservé.
[2] Modulo = reste de la division. Exemple : 5 % 2 = 1. Le modulo 2 sert souvent à déterminer si un
nombre est pair ou impair
[3] sous Windows un retour à la ligne se compose de \r\n, sous Linux/Unix seulement \n
et surtout ce que ce langage ne sait pas faire
Javascript « client »
On distingue Javascript « client » de Javascript « serveur ». C’est le même langage, mais dans
un cas le script s’exécute sur la machine du visiteur du site (le « client »), dans l’autre cas il
s’exécute sur le serveur qui héberge le site.
Pour des raisons évidentes de sécurité, Javascript « client » ne peut pas lire ou écrire dans
des fichiers, que ce soit sur le serveur ou sur la machine du visiteur. Les cookies sont l’unique
exception.
Il ne peut pas non plus connaître l’adresse e‐mail, l’adresse IP du visiteur, à moins que celui‐
ci l’ait communiquée.
Javascript, de plus, ne sait que manipuler les objets prédéfinis d’une page ou d’une fenêtre
de navigateur, plus les variables et objets que vous définissez vous‐mêmes. Il n’est pas
possible, par exemple, de modifier le texte entre 2 balises ou dans les cellules d’un tableau
HTML. Ce n’est plus vrai maintenant qu’il peut appeler des fonctions DOM (Document Object
Model).
Mais la fonction essentielle de Javascript est de réagir aux événements de la page :

chargement de la page, clic sur un bouton, remplissage d’un champ de formulaire... Encore
qu’il soit maintenant très concurrencé sur ce terrain par les CSS.
Une cervelle d’oiseau !

Une page HTML est un objet statique, même si un script vous permet de faire bouger des
images, d’écrire dans la page. Si vous quittez cette page et y revenez ensuite, vous la
trouverez dans son état initial.
Par exemple, vous avez rempli un formulaire, mais vous voulez consulter une autre page
avant de l’envoyer. Vous revenez au formulaire : il est vide ! Il existe des astuces pour éviter
ça.
Ce sont les limites inhérentes au HTML, et Javascript n’y peut rien.
Autre exemple : vous avez des pages à accès réservé par un petit formulaire d’identification.
Si vos visiteurs quittent les pages réservées et veulent y revenir, ils devront se ré‐identifier.
Pour éviter ça, vous indiquez par une variable dans la page d’identification que le visiteur
s’est déjà identifié. Malheureusement, quand le visiteur revient dans cette page
d’identification, la variable ne contient plus l’info que vous lui avez donnée.
Retenez ceci : les pages HTML n’ont aucune mémoire, avec ou sans Javascript.
Manipulateur d’objets
Une page HTML est un ensemble d’objets : fenêtre, cadres, le corps de la page, les images,
les liens, les formulaires et ses boutons, listes déroutantes... etc.
Javascript est très fort pour manipuler tout ça.
Les objets ont 3 catégories de caractéristiques :
des propriétés que Javascript sait lire ou modifier, par exemple la propriété "value’ d’une
case de formulaire, c’est‐à‐dire le contenu de cette case ;
des méthodes (ou fonctions) que Javascript peut appeler, comme la méthode submit() d’un
formulaire qui agit comme si vous cliquez sur Envoyer
des événements que capte Javascript pour lancer une fonction, exemple l’événement
onLoad dans la balise qui permet de déclencher une fonction au chargement de la page.
Différentes versions et navigateurs

Aller voir sur la référence du langage Javascript sur le site de Netscape, la quantité d’objets
et de méthodes à votre disposition vous donnera le vertige ! Et probablement des idées.
Mais au risque d’être rabat‐joie, vous ne pourrez pas tout utiliser... En effet, les navigateurs
implémentent différentes versions de Javascript (voir page sur les versions de Javascript
supportées par les navigateurs). Si vous voulez que vos pages soient compatibles avec la
version 3 de Internet Explorer, il faudra vous limiter à la 1ère version de Javascript.
Actuellement (en milieu d’année 2000 [1]), la dernière version est la version 1.5 supportée
uniquement par Netscape 6. Mais elle ne sert pas à grand chose puisque les nouvelles
fonctionnalités ne marchent pas avec les autres navigateurs.
Autres possibilités
Pour vous affranchir des limites HTML / Javascript, il faudra vous tourner vers d’autres
techniques qui utilisent des scripts s’exécutant sur le serveur du site :
commençons par les ASP (technologie propriétaire de Microsoft) qui peuvent être codées en
Javascript ou en VBScript, et même avec beaucoup d’autres langages avec ASP.NET ;
PHP est un concurrent des ASP, a différentes possibilités que les ASP, par contre fonctionne
sur serveurs Linux ou Windows, contrairement aux ASP limitées à Windows. Vous trouverez
beaucoup de sources et d’utilisateurs de PHP, ainsi que beaucoup d’hébergeurs. les CGI qu’on
peut coder avec n’importe quel langage, Perl étant le plus utilisé : ce sont des exécutables
ou des scripts.
enfin Java et JSP sont un peu à part, mais Java pêche par sa lenteur et son manque
d’universalité (nombreuses versions Java pas toujours compatibles entre elles).
Dans un autre domaine, plus prêt de Javascript, les fonctionnalités du DOM (Document Object
Model) permettent de manipuler tous les éléments d’un document HTML, donc ceux auxquels
n’a pas accès Javascript. Mais le DOM est implémenté de façon différente d’un navigateur à
l’autre, et parfois même entre 2 versions du même navigateur.
Notes :
[1] et même début 2005, on en est toujours à la version 1.5, mais supportée par beaucoup plus de
navigateurs.
Utilisation des fonctions eval(), parseInt(), parseFloat() et isNaN()
Il arrive parfois que vous récupériez des valeurs numériques et que Javascript donne des
résultats fantaisistes. Par exemple, si vous récupérez des valeurs dans des champs de
formulaire pour faire des calculs, ou si vous récupérez des valeurs GET (dans l’url de la page,
avec location.search), les valeurs de ces champs seront toujours des chaînes de caractères.
Si vous récupérez 2 champs a = "10" et b = "20", et faîtes "a + b", Javascript ne donnera pas
"30" mais "1020". Car l’opérateur "+" est aussi l’opérateur de concaténation ("bon" + "jour"
donne "bonjour").
Voici quelques fonctions utiles pour les valeurs numériques.
parseInt()
Syntaxe
parseInt(valeur[, base]);
l’argument "base" est optionnel et prend la valeur 10 par défaut.
Cette fonction convertit une chaîne de caractères en valeur numérique entière.
Exemples
Voici quelques exemples du résultat de cette fonction :
valeur parseInt(valeur)
"10" 10
"blabla" "isNaN"
"10blabla" 10
"balbla10" "isNaN"
"10.5" 10
"10,5" 10
"isNaN" signifie "is Not a Number" (n’est pas un nombre).
Si la valeur commence par des chiffres et continue par des caractères alphabétiques, parseInt
tronque pour ne garder que les chiffres (ce qui est pratique pour récupérer la valeur de "10
€", par exemple).
Si la valeur ne contient que des caractères alphabétiques ou commence par des caractères
alphabétiques, parseInt() retourne "isNaN".
Dans notre exemple précédent de 2 champs a et b, il faudrait écrire :
var c = parseInt(a) + parseInt(b);
Utilisation de l’argument base
Cet argument peut servir à convertir une chaîne écrite dans une base quelconque en un
nombre décimal.
Voici des exemples :
parseInt("FF", 16); // donne 255 ("FF" en hexadécimal)
parseInt("11111111", 2); // donne également 255 ("1111 1111" en binaire)
parseFloat()
Syntaxe
parseFloat(valeur);
Cette fonction agit comme parseInt(), mais permet de récupérer des nombres avec
décimales.
Exemples
valeur parseFloat(valeur)
"10" 10
"blabla" "isNaN"
"10blabla" 10
"balbla10" "isNaN"
"10.5" 10.5
"10,5" "isNaN"
"10e+2" 10E+2 (notation scientifique)
isNaN()
Syntaxe
isNaN(valeur);
Cette fonction détermine si une chaîne de caractères est numérique ou pas. Si la chaîne n’est
pas numérique, la fonction retourne "true", sinon (si elle est numérique), elle retourne
"false".
Exemples
valeur isNaN(valeur)
"10" false
"blabla" true
"10blabla" true
"balbla10" true
"10.5" false
"10,5" true
"10e+2" false
eval()
Syntaxe
eval(valeur);
Cette fonction est parfois utilisée à tort à la place de parseInt() ou de parseFloat() pour
"évaluer" une valeur numérique.
Elle permet principalement d’évaluer une chaîne de caractère. Voici un exemple :
var alerte = "alert('Ceci est un message');";
Si vous faîtes : eval(alerte);, vous avez une boîte d’alerte : « Ceci est un message ».
A quoi ça sert ? Ca peut servir dans certains cas à générer du code Javascript à la volée.
Voici un exemple :
Voici une fonction qui tente de redimensionner une image en fonction de la largeur de l’écran
et de l’écrire dans la page :
<!
var largeur_page = document.body.offsetWidth;
// >
</script>
<body>
<!
if (largeur > largeur_page) {
hauteur *= parseInt(largeur_page / largeur);
largeur = largeur_page;
}
document.write('<img src="' + image + "' width="' + largeur + "' height="' +
hauteur + '" />");
// >
</script>
Mais ça ne marche pas... Parce que document.body.offsetWidth n’est connu que lorsque
la page a été chargée. Or dans le script, il est défini avant. Vous aurez donc une valeur
"undefined" et votre image ne s’affichera pas.
Il faudrait faire :
<!
var largeur_page = "document.body.offsetWidth";
// >
</script>
<body>
<!
if (largeur > eval(largeur_page)) {
hauteur *= parseInt(eval(largeur_page) / largeur);
largeur = eval(largeur_page);
}
document.write('<img src="' + image + "' width="' + largeur + "' height="' +
hauteur + '" />");
// >
</script>
La variable largeur_page est une chaîne de caractères. Et dans le 2e script, on utilise la

fonction eval() pour évaluer cette chaîne.
Evidemment, on pourrait définir largeur_page dans le 2e script. Mais dans un script plus
compliqué, il est plus facile de manipuler des variables que des propriétés d’objets.
Ces boîtes de dialogue sont : la boîte d’alerte, la boîte de confirmation et la

boîte de saisie
la boîte d’alerte alert("un message") permet de communiquer une information au

visiteur,
la boîte de confirmation confirm("un message"), peu utilisée, permet de proposer un
choix vrai/faux au visiteur,
et la boîte de saisie prompt("un message", "réponse par défaut"), rarement
utilisée, permet à l’utilisateur de saisir des informations.
alert
C’est la boîte d’alerte classique que vous rencontrez dans tous les sites
alert("Voici un message d'alerte");
</script>
Testez ici :
confirm
La fonction confirm() admet un argument qui est la question posée.
Elle retourne vrai si l’utilisateur a cliqué sur OK, et faux s’il a cliqué sur Annuler
if (confirm("Si vous confirmez, la boîte de réponse affiche 'confirmé', sinon
'refusé'"))
var reponse = "confirmé";
else
var reponse = "refusé";
</script>
Cliquez sur "tester confirm", votre réponse sera affichée dans la boîte texte :
prompt
La fonction admet 2 arguments :
la question posée
une réponse par défaut qui sera affichée dans la case de réponse : mettre "" pour ne rien
afficher
Elle retourne la réponse saisie.
var reponse = prompt("Quel est votre nom ? (votre réponse sera affichée dans la
boîte de réponse)", "Zébulon");
</script>
Cliquez sur "tester prompt", votre réponse sera affichée dans la boîte texte :
Voici un autre exemple, qui permet de saisir une série de valeurs et de les stocker dans un
tableau
var reponse = prompt("Saisir une série de valeurs (séparer par une virgule)", "");
if (reponse) var valeurs = reponse.split(/,\s?/);
else var valeurs = null;
</script>
Les valeurs saisies doivent être séparées par une virgule. La fonction split() retourne un
tableau de valeurs, résultat du découpage de reponse en prenant la virgule comme
séparateur. Comme on a l’habitude de mettre un espace après la virgule, il faut aussi en tenir
compte ("/,\s/" est une expression régulière).
Cliquez sur "tester prompt", le tableau résultant sera affiché dans la boîte texte multiligne :
fonctions de conversion de caractères spéciaux
Ces 2 fonctions sont des fonctions du langage, elles ne dépendent d’aucun objet et sont donc
appelées escape(x) et unescape(x).
Elles permettent de traiter les caractères dits « spéciaux », c’est‐à‐dire tous les caractères
autres que les chiffres, les lettres non accentuées et les caractères "+‐*/_@ et . (point). Les
lettres accentuées sont considérées comme des caractères spéciaux.
Escape
Cette fonction permet de convertir un caractère spécial ou ou chaque caractère spécial d’une
chaîne de caractères en une chaîne contenant "%" + le code ASCII du caractère en
hexadécimal.
Exemples
escape(" "); // donne "%20"
escape("l'été"); // donne "l%27%E9t%E9"
Unescape
Cette fonction réalise l’inverse de escape() : elle prend en argument un code ou une chaîne
de caractères et/ou de codes qu’elle convertit en lettres. Ces codes sont constitués de "%"
suivi de 2 caractères hexadécimaux.
Exemples
unescape("%20"); // donne " "
unescape(""l%27%E9t%E9"); // donne "l'été"
Paramètres fournis dans une URL
Pour récupérer les valeurs envoyées par un formulaire utilisant la méthode GET :
traite_formulaire.htm?prenom=Bertrand&nom=Vicomte%20de%20la%20Margelle.
var params = unescape(location.search.substring(1));
var tab = params.split("&");
var prenom = tab[0].substring(tab[0].indexOf("=")+1);
var nom = tab[1].substring(tab[1].indexOf("=")+1);
Donne :
prenom = "Bertrand"
nom = "Vicomte de la Margelle"
Tableau des caractères ASCII

On lit le tableau de cette manière pour unescape("%H1H2") :
H1 est le code hexadécimal à gauche
H2 est le code hexadécimal en haut.
Par exemple pour le caractère "é" on lit "E9" ("E" à gauche, "9" en haut).
Les caractères non convertis par escape / unescape sont en italique sur fond grisé.
Caractères non ASCII
Pour les caractères non ASCII, escape() et unescape() placent un "u" après le "%", pour
indiquer qu’il s’agit d’un caractère Unicode.
Exemples :
escape("œ") ; donne "%u0153"
unescape("%u20AC") ; donne "€" (euro)
Normes ASCII, ANSI, ISO et Unicode
Pour l’ordinateur les caractères sont des groupes de bits, un bit étant l’unité de base, valant 0
ou 1. Il a fallu donner un code aux caractères.
Code ASCII
La première norme encore en usage a été le code ASCII, qui code les caractères sur 7 bits, soit
2 puissance 7 possibilités = 128 caractères. Les codes 0 à 31 correspondent à des touches de
fonctions (comme la tabulation, la touche Entrée...). Le code 32 est l’espace. Et les autres
codes correspondent aux caractères latins majuscules et minuscules, aux chiffres et à la
plupart des ponctuations.
Microsoft ayant eu besoin de plus de caractères, a créé pour le DOS un code ASCII étendu,
qui utilise 8 bits soit 256 caractères. Les codes qui suivent les codes ASCII standard
reprennent la plupart des caractères utilisés dans les langues d’Europe occidentale, plus des
caractères commerciaux, et des caractères utiles aux logiciels Microsoft.
Code ANSI
Il a fallu créer un standard. Ca a été le code ANSI, qui utilise le code ASCII pour les 128
premiers caractères, mais avec un codage différent pour les 128 suivants, faisant plus de place
aux alphabets occidentaux.
Codes ISO
Pour coder les caractères utilisés dans toutes les langues, il a fallu trouver autre chose. D’où le
codage ISO ou iso8859, qui utilise plusieurs jeux de caractères en fonction de la famille de
langues utilisée. En ce qui concerne les langues occidentales (français, allemand, espagnol,
italien, anglais, danois...), on utilise le code iso88591 (cf précision d’Agnès Maunoury en
bas de page) que vous devez trouver en tête de vos pages HTML : charset=iso88591
(voir en code source).
Les 128 premiers caractères d’un jeu ISO sont toujours les 128 caractères du code ASCII, et
les 128 suivants servent à la langue utilisée. Donc le code ISO se fait toujours sur 8 bits (ou
un octet).
Il existe un grand nombre de jeux de caractères ISO pour le grec, l’arabe, le chinois, le
japonais.... Pour ces 2 dernières langues en particulier, le code ISO se fait sur 2 octets, soit 16
bits, permettant de répertorier un maximum de 65536 caractères.
Unicode
Unicode a pour but d’unifier tout ça, et d’attribuer à tout signe un numéro unique, codé sur 2
octets, et ce pour toutes les écritures présentes et passées. Il n’est plus nécessaire de déclarer
quel type d’alphabet on utilise. On peut par exemple écrire quelques mots de chinois dans un
texte en français.
De plus chaque signe contient un certain nombre de propriétés, comme le sens de l’écriture,
pour l’arabe par exemple.
Unicode ne décrit pas comment les signes sont déssinés. Ce sont les logiciels et les polices qui
en ont la charge.
Pour écrire un caractère Unicode en HTML (et dans n’importe quel autre langage), par
exemple le « œ » :
&#339 en décimal ou &#x153; en hexadécimal, c’estàdire "&#" + le code (précédé de "x" si

en hexadécimal) + " ;".
Et en Javascript :
\uXXXX où XXXX sont des caractères hexadécimaux.
Exemples : « œ » s’écrira \u0153
« € » s’écrira \u20AC (&#x20AC; en HTML, les navigateurs actuels ne semblent pas supporter
le codage décimal pour cette valeur, soit "&#8264;").
Voici les 3 premiers tableaux Unicode (pour connaître le code d’un caractère, ajouter le
numéro de ligne et le numéro de colonne) :
setTimeout() et setInterval()
Recommandations
Ne pas abuser de ces fonctions, qui sollicitent plus ou moins le processeur de la machine
cliente, le bonnet d’âne revenant à Netscape 4, qui paralyse quasiment la machine.
Si vous utilisez ces fonctions, il faut prévoir de les arrêter à la sortie de la page, grâce aux
fonctions clearTimeout() ou clearInterval() :
<body onUnload="clearTimeout(timer)">
Définition et syntaxe
setTimeout
La fonction setTimeout() retarde l’exécution de la fonction en argument d’un delai

exprimé en millisecondes et retourne un objet timer :
var timer = setTimeout("ma_fonction()", delai);
On peut très bien appeler la fonction :
setTimeout("ma_fonction()", delai);
mais on aura beoin de la variable timer pour tuer le timer.
clearTimeout
Cette fonction détruit l’objet timer, qui est retourné par la fonction setTimeout(). Même si
setTimeout() n’est plus appelée, le timer existe toujours.
clearTimeout(timer);
setInterval
setInterval() a le même rôle que setTimeout(), mais se déclenche à intervalles

réguliers.
var timer = setInterval("ma_fonction()", delai);
clearInterval
clearInterval() a le même effet que clearTimeout(), mais appliqé à setInterval() :
clearInterval(timer);
Appel par référence
Sur les navigateurs récents, on peut appeler la fonction par référence et non à travers une
chaîne de caractères. Ce qui est beaucoup plus efficace :
setTimeout(ma_fonction, delai);
Note : ma_fonction est indiqué sans parenthèses à la fin.
Fonctionnement
Contrairement à ce qu’on pourrait penser, ces 2 fonctions setTimeout() et setInterval()

ne bloquent pas le script pendant le délai indiqué, comme peut le faire la fonction
wait(delai) dans certains langages.
Elle retarde la fonction en argument, mais continue le script.

Voici un exemple. Au chargement d’une page avec des cadres, on voudrait appeler une
fonction d’un autre cadre. On a une erreur parce que la page de cet autre cadre n’était pas
encore chargée, quand l’appel de la fonction a eu lieu. Donc on va retarder cet appel.
var valeur = 0;
// appelle "ma_fonction()" dans le cadre "autrecadre" et retourne sa valeur
function appel_fonction() {
valeur = location.autrecadre.ma_fonction();
}
// retarde l'appel de la fonction de 1 seconde
var timer = setTimeout("appel_fonction()", 1000);
// affiche la valeur générée par la fonction "ma_fonction()"
alert("La valeur = " + valeur);
Ce que fait le script :
il retarde l’appel à "appel_fonction()" de 1 seconde

puis il continue le script et affiche immédiatement le contenu de valeur
ensuite, au bout de 1 seconde, il appelle appel_fonction(), laquelle appelle
ma_fonction() dans le cadre "autrecadre".
Donc la valeur affichée sera la valeur initiale (0) et non pas celle retournée par
"ma_fonction()".
Evidemment, dans ce cas simple, il suffirait de mettre le traitement de la valeur (ici un

affichage avec alert()) dans le corps de la fonction appel_fonction() pour que ça
fonctionne (bien que ce système ne soit pas le meilleur pour être certain qu’un cadre soit
chargé).
Différences entre setTimeout() et setInterval()
La différence est que setTimeout() n’est appelée qu’une seule fois, comme dans l’exemple
précédent, et que setInterval() est appelée à intervalles réguliers, jusqu’à ce qu’on la
"tue" avec clearInterval().
Exemple
Déplacement d’un layer (on ne détaillera pas les fonctions de traitement des layers).
var timer = null;
function deplacer_layer(x){
...
}
function position_layer() {
...
}
function deplacement() {
if (position_layer() < 800)
deplacer_layer(10);
else clearInterval(timer);
}
timer = setInterval("deplacement()", 100);
setInterval() appelle la fonction deplacement() tous les 1/10 de seconde. Ce qui a pour
effet de déplacer le layer de 10 pixels à chaque fois. Lorsque le layer arrive à 800,
deplacement() appelle clearInterval() ce qui arrête setInterval(). Notre layer
parcourt donc 800 pixels en 1,20 seconde.
Appel récursif à setTimeout()
La fonction setInterval() a été implémentée dans la version Javascript 1.2, alors que
setTimeout() l’a été dans la version 1.1. Donc par souci de compatibilité avec les
navigateurs anciens, on trouve des appels récursifs à setTimeout() à la place de
setInterval(). Mais les navigateurs ne supportant pas Javascript 1.2 étant maintenant
rares, il n’y a plus lieu d’y avoir recours. Voici comment on fait :
var timer = null;
function deplacer_layer(x){
...
}
function position_layer() {
...
}
function deplacement() {
if (position_layer() < 800) {
deplacer_layer(10);
timer = setTimeout("deplacement()", 100);
}
else clearTimeout(timer);
}
deplacement();
deplacement() commence par déplacer le layer, puis appelle setTimeout() qui rappelle
deplacement() au bout de 100 millisecondes, ou bien appelle clearTimeout() si le layer
arrive à 800.
Passage de paramètres
Dans certains cas, il est nécessaire de passer des paramètres à la fonction appelée par la
fonction retardateur (on utilisera ici setTimeout, mais c’est valable pour toutes ces
fonctions).
Passage de constantes
Lorsqu’on ne passe que des constantes, c’est facile, il suffit de les placer entre les () de la
fonction appelée :
setTimeout("ma_fonction(10, 100)", delai);
Si c’est une constante chaîne de caractère, vous devez l’entourer soit d’apostrophes, soit de
guillemets échappés :
setTimeout("ma_fonction('ma valeur', 100)", delai);
setTimeout("ma_fonction(\"c'est ma valeur\", 100)", delai);
Passage de variables
Javascript évalue la chaîne de caractères en premier argument de la fonction setTimeout,

comme le fait la fonction eval() ou comme fait alert(chaine). Par exemple pour passer
var1 et var2 en argument :
setTimeout("ma_fonction(" + var1 + ", " + var2 + ")", delai);
Passage d’arguments avec les navigateurs récents
On a vu qu’avec les navigateurs récents, on pouvait appeler la fonction par référence :
setTimeout(ma_fonction, delai);
Pour ajouter des arguments, c’est plus simple : il faut les indiquer après le délai.
setTimeout(ma_fonction, delai, var1, var2);
Introduction aux événements, liste des événements
Qu’est‐ce qu’un événement

Javascript est géré par des événements : le premier événement dans une page HTML est le
chargement de la page, puis les diverses actions provoquées par l’utilisateur : clic sur un
bouton, défilement de la page, déplacement de la souris..., enfin le dernier événement est la
fermeture de la page.
Un script Javascript est toujours déclenché par un événement, ne serait‐ce qu’au chargement
de la page.
On associe un événement à une fonction Javascript de cette manière :
<BALISE_HTML onEvenement = "fonction_javascript()">
Exemple : envoi d’un formulaire en cliquant sur un bouton
<input type="button" valeur="Envoyer" onClick="document.forms[0].submit()">
Mais au chargement de la page, le fait d’écrire directement son script en dehors d’une
fonction, déclenche ce script ; exemple :
document.write("Salut !");
dans ce cas, « Salut ! » est écrit dans la page, au moment du chargement.
Liste des événements

Cette liste vaut pour Netscape. Internet Explorer est beaucoup plus riche en événements (voir
Microsoft DHTML).
Objets
Nom Objets concernés (IE) Déclenchement
concernés
(Netscape)
L’utilisateur annule le chargement
d’une image (par exemple en
onAbort images images
cliquant sur un lien ou en clliquant
sur le bouton Arrêter)
fenêtre (window)
et tous les tout objet sauf corps du L’utilisateur quitte un élément de
onBlur
éléments d’un document (body) formulaire ou la fenêtre
formulaire
champs text,
textareas, listes champs text, textareas, Modification de la valeur d’un
onChange
déroulantes listes déroulantes (select) élément de formulaire
(select)
boutons, boutons
tout objet ou balise, sauf Clic de l’utilisateur sur un de ces
onClick radio, cases à
fenêtre (window) éléments
cocher, liens
n’existe pas chez IE, qui
dispose de plusieurs
L’utilisateur traîne un objet et le
onDragDrop fenêtre (window) événements onDrag (tout
relâche dans la fenêtre
objet ou balise, sauf
fenêtre)
Le chargement de la page ou d’une
images, fenêtre image provoque une erreur (url
onError images, fenêtre (window)
(window) erronée, page ou image manquante,
image corrompue)
fenêtre (window)
et tous les tout objet sauf corps du Le curseur est placé sur la fenêtre
onFocus
éléments d’un document (body) ou dans un élément de formulaire
formulaire
document,
tout objet ou balise, sauf Enfoncement d’une touche du
onKeyDown images, liens,
fenêtre (window) clavier
zones de texte
document, Enfoncement d’une touche du
tout objet ou balise, sauf
onKeyPress images, liens, clavier ou touche maintenue
fenêtre (window)
zones de texte enfoncée
document,
tout objet ou balise, sauf Relâchement d’une touche du
onKeyUp images, liens,
fenêtre (window) clavier
zones de texte
corps du applet, body, embed,
Chargement de la page dans le
onLoad document frame, iframe, image,
navigateur
(document body) liens, scripts
document, tout objet ou balise, sauf
onMouseDown Enfoncement du bouton de la souris
boutons, liens fenêtre (window)
tout objet ou balise, sauf
onMouseMove rien par défaut Déplacement de la souris
fenêtre (window)
tout objet ou balise, sauf Déplacement de la souris en dehors
onMouseOut map areas, liens
fenêtre (window) de la zone de l’objet
tout objet ou balise, sauf Déplacement de la souris dans la
onMouseOver map areas, liens
fenêtre (window) zone de l’objet
document, tout objet ou balise, sauf
onMouseUp Relâchement du bouton de la souris
boutons, liens fenêtre (window)
onMove fênêtre (window) tout objet ou balise Déplacement de la fenêtre
Annulation d’un formulaire (clic sur
onReset formulaire formulaire
le bouton Annuler)
tout objet sauf corps du
onResize fênêtre (window) Redimensionnement de la fenêtre
document (body)
champs text, champs text, textareas, Sélection de la zone de texte d’un
onSelect
textareas corps du document (body) champ de formulaire
onSubmit formulaire formulaire Envoi d’un formulaire
corps du corps du document
onUnload document (body), frameset, fenêtre Fermeture de la page
(document body) (window)
constantes undefined, null, false, 0, "" et NaN
Ces constantes retournent « false »

Toutes les constantes suivantes retournent « false », ou plus précisemment, si x prend la
valeur d’une des constantes suivantes, if (x) retourne « false » :
undefined [1],
null,
false,
0,
"" (chaîne vide)
NaN (Not a Number [2])
Exemple :
var x; // x est indéfini (undefined)
var y = null;
var z = "";
if (x) alert("x est vrai");
else alert("x est faux);
if (y) alert("y est vrai");
else alert("y est faux);
if (z) alert("z est vrai");
else alert("z est faux);
retournera « x est faux, y est faux, z est faux ».
Equivalences entre constantes

Cependant 2 variables valant l’une de ces constantes ne sont pas nécessairement égales, et
ça peut varier d’un navigateur à l’autre.
Voici un tableau de ces constantes.
En rouge, il n’y a pas équivalence, en bleu, il y a équivalence (en grisé la constante n’est pas
supportée).
Par exemple, si x = false et y = null, x et y ne sont pas égaux (if (x == y) donne
« false ») avec IE6, par contre Netscape4 les considère comme égaux.
undefined null false 0 chaîne vide
IE6, Moz1.5,
null NN4.0, NN4.7,
Ope7, K‐m0.7
IE6, Moz1.5, IE6, Moz1.5,
false NN4.0, NN4.7, NN4.0, NN4.7,
Ope7, K‐m0.7 Ope7, K‐m0.7
IE6, Moz1.5, IE6, Moz1.5, IE6, Moz1.5,
0 NN4.0, NN4.7, NN4.0, NN4.7, NN4.0, NN4.7,
Ope7, K‐m0.7 Ope7, K‐m0.7 Ope7, K‐m0.7
IE6, Moz1.5,
IE6, Moz1.5, IE6, Moz1.5, IE6, Moz1.5,
chaîne NN4.0, NN4.7,
NN4.0, NN4.7, NN4.0, NN4.7, NN4.0, NN4.7,
vide Ope7, (Ope6), K‐
Ope7, K‐m0.7 Ope7, K‐m0.7 Ope7, K‐m0.7
m0.7
IE6, Moz1.5, IE6, Moz1.5, IE6, Moz1.5, IE6, Moz1.5, IE6, Moz1.5,
NaN NN4.0, NN4.7, NN4.0, NN4.7, NN4.0, NN4.7, NN4.0, NN4.7, NN4.0, NN4.7,
Ope7, K‐m0.7 Ope7, K‐m0.7 Ope7, K‐m0.7 Ope7, K‐m0.7 Ope7, K‐m0.7
Les navigateurs testés (sous Windows) :

IE 6 (Internet Explorer 6)
Moz1.5 (Mozilla 1.5, équivalent à Netscape 7)
NN4.0 (Netscape 4.00 à 4.05)
NN4.7 (Netscape 4.7, versions 4.06 et suivantes)
Ope7 (Opera 7) et Ope6 (Opera 6) mentionné lorsqu’il y a une différence avec la version 7
K_m0.7 (K_meleon 0.7, basé sur le moteur Gecko de Mozilla)
En conclusion
Lorsqu’une variable x a pour valeur l’une de ces 6 constantes, if (x) retourne « faux ».
Par contre, 2 variables ayant pour valeur 2 constantes différentes sont considérées comme
égales, si elles valent respectivement :
"null" et "undefined",
"false" et 0,
"false" et "".
Dans tous les autres cas, elles sont considérées comme différentes. Avec beaucoup de
particularités pour Netscape 4.0.
Notes :
[1] la constante « undefined » n’existe pas sous Netscape 4.0 à 4.05, il suffit de créer une variable sans
valeur qui servira de constante « undefined »
[2] valeur générée par la fonction isNaN(), qui teste si une chaîne est numérique
Comment faire en Javascript pour transmettre une ou des variables à une

autre page HTML ?
Sommaire :
Principes, p1
Fonctions pratiques, p2
Principes
Pour transmettre une variable d’une page à une autre en Javascript, on utilise la méthode
GET, c’est‐à‐dire qu’on passe la variable dans l’URL. Cette méthode a des inconvénients :
manque de confidentialité : s’il s’agit d’un mot de passe, il vaut mieux éviter.
limite à 2048 octets.
Mais comme c’est la seule méthode, on fera avec.
Transmettre une variable à une autre page via l’URL
Si on n’a qu’une variable, on la transmet à la suite de l’URL, c’est‐à‐dire l’adresse de la

page, et derrière un " ?" :
<a href="mapage.html?valeur">un lien</a>
Si on a plusieurs variables, on les sépare par des "&" :
<a href="mapage.html?valeur1&valeur2">un lien</a>
On ne doit pas mettre de guillemets autour des variables, même si ce sont des chaînes de
caractères.
On peut aussi transmettre le contenu de variables dans un script Javascript :
<script type="text/javascript">
document.write('<a href="mapage.html?" + variable1 + "&" + variable2 + ">un
lien</a>');
</script>
Récupérer la variable
On se trouve dans la page réceptrice, mapage.html dans notre exemple. On veut récupérer
la ou les variables transmises.
Pour cela, il faut utiliser la propriété search de l’objet location qui retourne tout ce qui
suit l’URL :
var query = location.search;
Dans le 1er exemple, query vaudra " ?valeur". Il faut donc éliminer ce " ?" :
var variable = location.search.substring(1);
Dans le 2e exemple, query vaudra " ?valeur1&valeur2". Il faut donc éliminer " ?" et découper
le résultat en prenant "&" comme séparateur :
var chaine = location.search.substring(1);
var variables = chaine.split("&");
On aura nos valeurs dans variables[0] et dans variables[1].

Problème des caractères spéciaux
Si les valeurs transmises contiennent des espaces, caractères accentués et autres caractères
spéciaux, ils seront remplacés par leur code ASCII en hexadécimal, précédé d’un "%". Pour
récupérer les bonnes valeurs, il faut utiliser unescape(). Dans notre dernier exemple, on
pourra écrire, si les 2 valeurs représentent un nom et un prénom :
var nom = unescape(variables[0]);
var prenom = unescape(variables[1]);
Transmission de variables via un formulaire
On peut transmettre des variables d’une page à l’autre via un formulaire, en utilisant la
méthode GET. Voici un formulaire simplifié qui demande le nom et le prénom de
l’utilisateur :
<form action="mapage.html" method="GET">
Votre nom : <input type="text" name="nom" value="" />
Votre prénom : <input type="text" name="prenom" value="" />
</form>
La page "mapage.html" recevra ces valeurs ainsi :

"mapage.html ?nom=Zebulon&prenom=Kevin". Le traitement est un peu plus compliqué, car
on a le nom des champs dans l’URL.
var params = location.search.substring(1).split("&");
var variables = new Array();
for (i in params) {
var segments_var = params[i].split("=");
variables[segments_var[0]] = unescape(segments_var[1]);
}
Vous aurez donc :

variables["nom"] = "Zebulon"
variables["prenom"] = "Kevin"
Ce petit code fonctionne quelque soit le nombre de variables. Évidemment, si vous êtes sûr
de ne pas avoir de caractères spéciaux dans les variables, unescape est inutile.
Note : les caractères " ?", "=" et "&" dans les variables sont respectivement codés "%3F", "%3D"
et "%26" pour ne pas être confondus avec les mêmes caractères servant de séparateur dans
l’URL.
Fonctions pratiques
Voici deux fonctions qui permettent de transmettre et de récupérer des variables dans une
URL.
Transmettre des variables

function transmettreParams(url) {
url += (url.indexOf("?") == 1) ? "?" : "&";
if (typeof arguments[1] != "object") url += arguments[1];
else {
var args = arguments[1];
var debut = true;
for (indice in args) {
if (debut) debut = false;
else url += "&";
url += (isNaN(indice) ? indice + "=" : "") + args[indice];
}
}
}
else if (arguments.length > 2) {
url += (url.indexOf("?") == 1) ? "?" : "&";
for (i=1;i<arguments.length;i++) {
url += ((i == 1) ? "" : "&") + arguments[i];
}
}
location.href = url;
}
Comment utiliser cette fonction ?
Voici plusieurs exemples :
envoi d’un constante :
<a href='javascript.transmettreParams("mapage.html", "aaa")'>aller à

mapage.html</a>
ce qui donnera : mapage.html ?aaa
envoi d’une variable :
var variable = "aaa";
</script>
<a href='javascript.transmettreParams("mapage.html", variable)'>aller à
mapage.html</a>
ce qui donnera : mapage.html ?aaa
envoi d’une liste de constantes :
<a href='javascript.transmettreParams("mapage.html", "aaa", "bbb", "ccc")'>aller à
mapage.html</a>
ce qui donnera : mapage.html ?aaa&bbb&ccc
envoi d’un tableau énuméré :
var tab1 = new Array("aaa", "bbb", "ccc");
</script>
<a href='javascript.transmettreParams("mapage.html", tab1)'>aller à mapage.html</a>
ce qui donnera : mapage.html ?aaa&bbb&ccc
envoi d’un tableau associatif :
var tab2 = new Array();
tab2["a"] = "aaa";
tab2["b"] = "bbb";
tab2["c"] = "ccc";
</script>
<a href='javascript.transmettreParams("mapage.html", tab2)'>aller à mapage.html</a>
ce qui donnera : mapage.html ?a=aaa&b=bbb&c=ccc
Récupération des paramètres
function recupererParams() {
var query = location.search.substring(1);
if (query.indexOf("&") == 1) return query;
var params = query.split("&");
var associatif = (location.search.search(/([?|&]\w+=[^&]+)+/) != 1);
var variables = new Array();
for (i in params) {
if (associatif) {
var segments_var = params[i].split("=");
variables[segments_var[0]] = unescape(segments_var[1]);
}
else variables.push(unescape(params[i]));
}
return variables;
}
Cette fonction récupère les paramètres dans l’URL. S’il n’y a qu’un seul paramètre, elle
retourne une valeur unique. S’il y en a plusieurs, elle retourne un tableau.
Dans les exemples 3 et 4, la fonction retourne un tableau énuméré :
variables[0] = "aaa";
variables[1] = "bbb";
variables[2] = "ccc";
Dans l’exemple 5 (le dernier), la fonction retourne un tableau associatif :
variables["a"] = "aaa";
variables["b"] = "bbb";
variables["c"] = "ccc";

Java Script

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Java Script

Încărcat de

Drepturi de autor:

Formate disponibile

Premier script à faire soi‐même

Il faut bien débuter un jour, alors allons‐y ! Avec un script simplissime :

Ce qui a pour effet d’afficher un message d’alerte :

Votre éditeur HTML

3. Intégrer votre instruction dans le script :

Voici à quoi doit ressembler votre page HTML :

4. Afficher votre page dans un navigateur

Voilà, vous voilà un de plus dans le monde de Javascript !

Ecrire dans la page HTML

On va continuer dans la même veine, mais avec quelques difficultés.

Voici votre page Web avec le script :

Intégrer des balises HTML

document.write (comme alert, d’ailleurs) a comme argument une chaîne de caractères

Et là, ça marche ! Ca donne la même chose que l’image en haut.

Guillemets et apostrophes sont interchangeables

On a interverti guillemets (") et apostrophes (’) et ‐ en théorie ‐ le résultat devrait être le

En théorie, seulement, car il y a un problème avec l’apostrophe de "C’est". Pour remédier à

Et là, on obtient le résultat précédent.

De même, on aurait pu écrire :

Règle usuelle pour les chaînes de caractères

On utilise en général la 1ère forme :

Aperçu de la page définitive :

Comment modifier une image au passage de la souris

Les images d’origine

(images par défaut)

Ainsi lorsque vous écrivez en HTML :

vous créez un objet image ayant les propriétés suivantes :

Changer le fichier source de l’image

Si on change le src (le source) :

on aura la même image, mais en creux :

onMouseOver et onMouseOut [1]

a pour effet de réafficher l’image "bleu_p.gif" lorsque la souris quitte l’image.

Ca signifie « ceci » en anglais, et désigne l’objet en cours.

<img src="images/bleu_p.gif" border="0" width="38" height="20"

Le code complet pour les 3 boutons

Ca ne fonctionne pas avec Netscape 4

Toujours nos 3 boutons :

onMouseOver et onMouseOut dans un lien

Nommer les images

Et pour modifier son source, on écrira :

où document.images est la collection des images de la page, et document.images["image1"]

La fonction sera appelée ainsi :

La variable « rep » est le répertoire des images.

L’instruction if (!document.images) {} permet de ne rien faire, pour les navigateurs ne

Page HTML et objets

Lire le contenu d’une boîte de texte

Indiquez votre nom :

Indiquez votre nom :

Nommer les objets

Son nom est « formulaire ». On fait référence à ce formulaire en écrivant :

Exemple : connaître le nom du formulaire :

Son nom est "nom". On lui fait référence ainsi :

Exemple : lire sa valeur :

« value » est une propriété des boîtes texte de formulaire.

On n’a pas besoin de son nom mais on lui a associé un événement.

Chaque objet supporte un certain nombre d’événements. Les boutons déclenchent un

onMove : mouvement de la souris

Pour associer une fonction à un événement, il suffit d’écrire :

onClick="alert(’Vous avez cliqué sur le bouton’)" ;

Lire et écrire le contenu d’une boîte texte de formulaire

Indiquez votre nom ici, pluis cliquez sur OK

Boîte texte « nom » :

Boîte texte « resultat »

A quoi servent les lignes <! début de script et > // fin de script ?

var monNom = "Bernard MartinRabaud"; (on peut mettre n’importe quel caractère ‐ sauf