Vous êtes sur la page 1sur 104

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 :

Ce qui a pour effet d’afficher un message d’alerte : Votre éditeur HTML Pour écrire des

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

//

</script>

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

<script language="JavaScript"> <!­­ Debut script

alert("C'est mon 1er script");

//

</script>

Fin script ­­>

Voici à quoi doit ressembler votre page HTML :

<html>

<head>

<title>mon 1er script</title>

<script language="JavaScript"> <!­­ Debut script

alert("C'est mon 1er script");

//

</script>

Fin 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 »

dans la page Web : « C’est mon 2ème script » document.write simple Voici votre page

document.write simple

Voici votre page Web avec le script :

<html> <head> <title>mon 2ème script</title>

<script language="JavaScript"> <!­­ Debut script

document.write("C'est mon 2ème script");

//

</script>

</head>

<body>

Fin script ­­>

</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 color="#0000ff"><b>C'est mon 2ème script</b></font></center>");

face="Arial"

(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 color='#0000ff'><b>C'est mon 2ème script</b></font></center>");

face='Arial'

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

Guillemets et apostrophes sont interchangeables

document.write('<center><font color="#0000ff"><b>C'est mon 2ème script</b></font></center>');

face="Arial"

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 color="#0000ff"><b>C\'est mon 2ème script</b></font></center>');

face="Arial"

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

De même, on aurait pu écrire :

document.write("<center><font color=\"#0000ff\"><b>C'est mon 2ème script</b></font></center>");

face=\"Arial\"

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

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

document.write("<center><font color='#0000ff'><b>C'est mon 2ème script</b></font></center>");

face='Arial'

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>

<script language="JavaScript"> <!­­ Debut script

document.write("<center><font face='Arial' color='#0000ff'><b>C'est mon 1er script</b></font></center>");

//

</script>

</head>

<body>

Fin script ­­>

</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 sous‐répertoire "images".

Copiez ces images ou celles de votre choix dans un

Copiez ces images ou celles de votre choix dans un (images par défaut) (images de survol)
Copiez ces images ou celles de votre choix dans un (images par défaut) (images de survol)

(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")créez un objet image ayant les propriétés suivantes : source = "images/bleu_p.gif" (le fichier image)

source = "images/bleu_p.gif" (le fichier image)propriétés suivantes : bordure = 0 (border="0") largeur = 38 (width="38") hauteur = 20

largeur = 38 (width="38")source = "images/bleu_p.gif" (le fichier image) hauteur = 20 (height="20") Il existe encore

hauteur = 20 (height="20")(le fichier image) largeur = 38 (width="38") Il existe encore d’autres propriétés qui n’ont pas

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

name="image1" src="images/bleu_p.gif"> Si on change le src (le source) : <img

Si on change le src (le source) :

<img name="image1" src="images/bleu_a.gif">

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

on aura la même image, mais en creux : C’est le principe du survol. Mais pour

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

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

onMouseover="this.src='images/bleu_a.gif'"

onMouseout="this.src='images/bleu_p.gif'">

src="images/bleu_p.gif"

border="0"

donnera ceci :

border="0" donnera ceci : width="38" Le code complet pour les 3 boutons

width="38"

Le code complet pour les 3 boutons

height="20"

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 :

ce qui donne : Ca ne fonctionne pas avec Netscape 4 Ce code fonctionne sous

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 :

et les images seront fixes). Toujours nos 3 boutons : onMouseOver et onMouseOut dans un lien

onMouseOver et onMouseOut dans un lien

Ces événements seront intégrés dans le lien <a href=

l’image. Mais le code this.src =

lien et un lien n’a pas d’attribut « src ».

> </a>,

au lieu de les mettre dans

ne fonctionnera plus, puisque ici « this » représente le

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";

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 :

<script language="JavaScript"> <!­­

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')">

/images/bleu_p.gif"

height="20"></a>

Le code complet

<img name="image1" border="0" src="

width="38"

<html>

<head>

<title></title>

<script language="JavaScript"> <!­­ 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

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 :

Voici un exemple : Indiquez votre nom : Indiquez votre nom : Indiquez votre nom, puis

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 sourisl’événement se produit. Exemples d’événements : onMouseover : passage de la souris sur un objet onMouseout

onMouseover : passage de la souris sur un objetExemples d’événements : onMove : mouvement de la souris onMouseout : la souris quitte un objet

onMouseout : la souris quitte un objetde la souris onMouseover : passage de la souris sur un objet onClick : on a

onClick : on a cliqué sur un objetsouris sur un objet onMouseout : la souris quitte un objet onChange : la valeur d’un

onChange : la valeur d’un objet a été changéesouris quitte un objet onClick : on a cliqué sur un objet onFocus : un objet

onFocus : un objet a le "focus" (le curseur est sur l’objet) [1]un objet onChange : la valeur d’un objet a été changée Pour associer une fonction à

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

votre nom ici, pluis cliquez sur OK Boîte texte « nom » : Boîte texte «

Boîte texte « resultat »

sur OK Boîte texte « nom » : Boîte texte « resultat » Voilà le travail

Voilà le travail !

Voici le script :

<form method="POST" name="formulaire"> <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 :

de texte, et donner le résultat dans une troisième : Indiquez 2 chiffres, un dans chaque

x

de texte, et donner le résultat dans une troisième : Indiquez 2 chiffres, un dans chaque

Voilà le résultat de la multiplication !

Voilà le résultat de la multiplication ! Voici le script : <form method="POST"

Voici le script :

<form method="POST" name="formulaire"> <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="text" name="resultat" size="40"> <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 :

une valeur (en Francs) ‐ n’indiquez que des chiffres : Voici la valeur convertie en euros

Voici la valeur convertie en euros :

que des chiffres : Voici la valeur convertie en euros : Bon, ça ne donne pas

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;

On va utiliser une fonction de conversion, qui pourra éventuellement servir à d’autres cases.

<script language="JavaScript"> <!­­ 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

     

addition

   

soustraction

 

multiplication

Voilà le résultat de l’opération

division

Voilà le résultat de l’opération division Voici le script : l’opération : <script

Voici le script :

l’opération :

<script language="JavaScript"> <!­­ 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> <input type="text" name="resultat" size="20"> </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 :

ou 3). L’événement onChange lui transmet comme valeurs : document.formulaire.chiffre1.value pour val1,

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

on peut utiliser this (pour faire plus court) qui indique l’objet en cours.

» se trouve justement à l’intérieur de la balise <SELECT>,

Les différentes parties d’une page HTML

, Les différentes parties d’une page HTML Délimiteurs HTML La page est délimitée par les balises

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 ; 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 </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="est­ce 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= par un bouton, donc il ne sera utilisé qu’à ce moment‐là.

>).

Ce script est déclenché

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

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.

),

sans aucune balise HTML. On peut tout à

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 :affichées par un document.write(). 3 remarques en passant alert("un message") qui affiche un message

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 :la page en cours (mais uniquement au chargement de la page). <!­­ ce texte est un

<!­­ 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 ? <!­­ 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

(formulaires, images, liens, etc ) du document est la hiérarchisation. On peut comparer ça aux poupées

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 :

et sous‐objets ou propriétés. de la même manière : document.title vous donne le titre de la

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

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;

x = 1;

y = x + page_chargee;

texte = "2 v'là les flics!"; alerte = y + texte;

// vrai en anglais

// donnera y = 2

// 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)On distingue quand même 3 types de données de base : les numériques, comme le nom

les numériques, comme le nom l’indiqueque 2 valeurs « vrai » ou « faux » (true / false) les chaînes de

les chaînes de caractères» (true / false) les numériques, comme le nom l’indique Exemples : document.nom_formulaire.checkbox1.checked =

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 » affecte la valeur 3.1416 à la variable « pi »

var nombre_jours = 365; affecte la valeur 365 à « nombre_jours » (le tiret « ‐ » est interdit 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 Martin­Rabaud"; (on peut mettre n’importe quel caractère ‐ sauf quelques exceptions ‐ dans une chaîne de (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 c’est une chaîne de caractère vide, très utile

var tonNom = "je m'appelle 'Tania', et toi?";c’est une chaîne de caractère vide, très utile var tonNom1 = 'je m\'appelle "Tania", et

var tonNom1 = 'je m\'appelle "Tania", et toi?'; on peut mettre aussi une chaîne de 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 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 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.

= 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(); visites[1] = new Array(); visites[0][0] = 1000; 1ère année visites[0][1] = 1250; 2ème année visites[1][0] = 900; 1ère année

// tableau des visites du mois de janvier // tableau des visites du mois de février // nombre de visites du mois de janvier pour la

// nombre de visites du mois de janvier pour la

// nombre de visites du mois de février pour la

Les instructions conditionnelles « if

else

Il y en a de 4 sortes :

(« si » et « si

les boucles boucles

l’instruction switch switch

les instructions de continuation ou de rupture continuation ou de rupture

elseswitch les instructions de continuation ou de rupture le if et if sinon ») If et

le if et if

sinon

»)

If et if

else

», « while »

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

changerImage(); else alert("Votre navigateur ne peut visualiser le changement d'images");

(document.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 e­mail 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

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.length­1;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

condition à la fin de la boucle, au lieu de la tester au début.

while », qui est similaire à « while », mais on teste la

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

break; case "dollars" : somme *= 6.80; break;

somme *= 6.57;

case "marks" :

somme *= 3.35;

case "livres" :

break; somme *= 9.50;

default :

break; 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,x représente en fait 2 variables différentes : Une variable locale dans la fonction increment qui

Une variable locale dans la fonction increment qui vaut argument + 1. C’est une variable locale, car elle a été redéfinie 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 :

<script language="Javascript">

<!­­

var x = 10; // 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>

<script language="Javascript">

<!­­

var x = 10; // variable globale

x = x

// ­­>

</script>

</head>

<body>

<script language="Javascript">

+ 1;

<!­­ // 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é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 + x est toujours la même variable globale définie au début, et x vaut 10 + 10 = 20

Après la fonction :

au début, et x vaut 10 + 10 = 20 Après la fonction : x vaut

x

vaut

y vaut toujours 100début, et x vaut 10 + 10 = 20 Après la fonction : x vaut <script

<script language="Javascript"> <!­­

var x = 10; // variable globale var y = 100; // variable globale

maintenant

function ajoute10() { var y = 10; // variable locale x = x + y; // variable globale x

}

ajoute10();

alert(x); alert(y); // variable globale

// ­­>

</script>

20

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

var nombre = 10; var carre = 0;

function carre_de (x) { x = x*x;

}

carre = carre_de(nombre); document.write("carré = " + carre); // donnera "carré = 0"

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(); document.write("carré = " + carre); // donnera "carré = 100"

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);

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); carre = carre_de(nombre);

soit il faut en faire une variable globaleune valeur, comme le 1er exemple carre = carre_de(nombre); Mais vous ne pouvez retourner qu’une seule

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[i­1] = 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"

// écrit "$x = 11"

echo "\$x = " . ajouter($x); ?>

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 :

carre = carre_de(nombre);

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;

}

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(n­1); else return 1;

}

Voici comment cela fonctionne, avec factorielle(4) :

n

instruction

4

appel de factorielle(3);

3

appel de factorielle(2);

2

appel de factorielle(1);

1

return 1;

2

return 2 * factorielle(1); // = 2 * 1 = 2

3

return 3 * factorielle(2); // = 3 * 2 = 6

4

return 4 * factorielle(3); // = 4 * 6 = 24

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

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.

Si vous avez une grosse fonction récursive ou une fonction récursive qui

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()

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

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 connaître.

Vous apprendrez à les

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? Ils permettent de créer des entités indépendantes : réutilisables telles quelles dans d’autres scripts

réutilisables telles quelles dans d’autres scripts: modifiables sans pour autant toucher au reste du script Exemple Je veux gérer des articles

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 :

= afficheArticle; Quelques observations : Il n’est pas indispensable de donner le même nom Il ne

Il

n’est

pas

indispensable

de

donner

le

même

nom

Il ne faut pas mettre de () aux fonctions.: Il n’est pas indispensable de donner le même nom que la fonction d’origine Voilà, les

que

la

fonction

d’origine

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élo­enfant", "vélo pour enfant", 1000, 2, "enfant", "enfant"); creeArticle("vélo­dame", "vélo pour dame", 1500, 2, "dame", "dame"); creeArticle("vélo­homme", "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 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

).

Un

Les avantages de la POO

un code plus clair à lire et et plus facile à modifierremplir sa recharge, le ranger ). Un Les avantages de la POO réutilisation des classes pour

réutilisation des classes pour d’autres scriptssa recharge, le ranger ). Un Les avantages de la POO un code plus clair à

Définitions

On va commencer par quelques définitions pour ceux qui ne connaissent rien à la POO (programmation orientée objet).

Classe

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.

Une classe décrit un catégorie d’objets, comme des personnes ou des voitures

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 »,

clVoiture. L’opérateur « this » indique que ces variables sont des variables rattachées à

clVoiture.

propriétés de la classe

« km »

et

« prix »

sont les

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 :

function clVoiture(marque, modele, numero, km, prix) { this.marque = marque; this.modele = modele; this.numero = numero; this.km = km; this.prix = prix + " €";

}

Instancier des objets

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

Voilà un terme qui vous paraît peut‐être étranger

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.numero = numero; 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

function clVoiture(marque, modele, numero, km, prix) { this.marque = marque; this.modele = modele; this.numero = numero; 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 (), 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.= clVoiture_affiche; , on n’indique pas de (), Appel de la méthode On utilise la même

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 »

function clVoiture(marque, modele, numero, km, prix) { this.marque = marque; this.modele = modele; this.numero = numero; this.km = km; this.prix = prix;

}

function clVoiture_affiche() { return this.marque + " " + this.modele + " " + this.numero + " " + this.km + " kms

"

+ this.prix + " €<br>";

}

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= clVoiture_affiche; Remarques : méthode affiche(), mais la définition est faite à

méthode affiche(), mais la définition est faite à l’extérieur du constructeur, grâce à la

propriété

dans le prototype : à gauche du signe « = » le nom de la méthode, à droite le nom de laest faite à l’extérieur du constructeur, grâce à la propriété fonction « prototype », correspondante,

fonction

« prototype »,

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 function clVoiture(marque, modele, numero, km, prix) {

Définition de la méthode directement dans le prototype

function clVoiture(marque, modele, numero, km, prix) { this.marque = marque; this.modele = modele; this.numero = numero; this.km = km; this.prix = prix;

}

clVoiture.prototype.affiche = new function() {

return this.marque + " " + this.modele + " " + this.numero + " " + this.km + " kms " + this.prix + " €<br>";

}

Remarques :

cette façon de faire est plus simple que la précédente, puisqu’on ne crée plus de fonction+ this.prix + " €<br>"; } Remarques : clVoiture_affiche() , cependant, il faut écrire la méthode

clVoiture_affiche(),

cependant, il faut écrire la méthode avant le code qui l’appellera, contrairement à la façonpuisqu’on ne crée plus de fonction clVoiture_affiche() , précédente qui les 2 dernières façons de créer

précédente qui

les 2 dernières façons de créer des méthodes sont les seules utitlisables, si on veut ajouterl’appellera, contrairement à la façon précédente qui de nouvelles méthodes à des objets Javascript

de nouvelles méthodes à des objets Javascript prédédinis.

permet

plus

de

liberté

à

ce

niveau‐là,

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 = /^[\s0­9A­Za­zéèêëàâäçîïôöùûüÉÈÊËÀÂÄÎÏÔÖÙÛÜ\'­]+$/; 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 = /^[\s0­9A­Za­ 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 http­equiv="Content­Type"

content="text/html; charset=iso­8859­1"> (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

var chaine = "0101"; chaine.bin_en_decimal(); // donnera 5 chaine.bin_en_decimal(true); // donnera encore 5 var chaine = "1111"; 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 « sous­chaî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'abat­jour"; 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.length­nombre, 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 e­mail est valide

Retourne "true" si l’adresse e­mail 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 e­mail est valide"); else alert("Votre adresse e­mail est erronée); function email_valide(adresse) {

return (adresse.search("^[_a­z0­9­]+(\.[_a­z0­9­]+)*@[a­z0­9­]+([\.][a­z0­ 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 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 : 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 0xFFFFFF04vous attendez ­252, c’est­à­dire "FFFFFF04" http_get_var s ­ récupère les informations transmise

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.mon­domaine.fr/mapage.htm?debut=50&nombre=10" var tab = http_get_vars(); donnera tab["debut"] = 50 et tab["nombre"] = 10 exemple 2 : "http://www.mon­domaine.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 multi­decoupe() fait la même chose, mais avec plusieurs séparateurs possibles.

Un exemple :

var chaine = "c'est­à­dire"; var tableau = chaine.multi­decoupe("'­"); // donne ["c", "est", "à", "dire"]

Attention, le tableau peut contenir des valeurs vides. Exemple:

var chaine = "c'est­à­dire"; var tableau = chaine.multi­decoupe("'­à"); // 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)retourne une chaine. Elle accepte 2 arguments facultatifs : le format territorial, si l’argument est "0"

le format territorial, si l’argument est "0" (numéro commençant par un "0") ou le formatune chaine. Elle accepte 2 arguments facultatifs : le séparateur entre chiffres (espace si cet argument

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() ci­dessous

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("01­23­45­67­89"); // donne "01 23 45 67 89" tel_formate("0123456789", "­"); // donne "01­23­45­67­89" tel_formate("01 23 45 67 89", "­"); // donne "01­23­45­67­89" tel_formate("0123456789", "­", 0); // donne "01­23­45­67­89" tel_formate("01 23 45 67 89", "­", 1); // donne "(33)1­23­45­67­89" tel_formate("(33)1 23 45 67 89", "­", 0); // donne "01­23­45­67­89"

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)([0­9])[ |\.|­]?([0­9]{2})[ |\.|­ ]?([0­9]{2})[ |\.|­]?([0­9])[ |\.|­]?([0­9])[ |\.|­]?([0­9]{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"Formats acceptés "01 23 45 67 89" "01­23­45­67­89" "01.23.45.67.89" "01 23 456 789"

"01 23 45 67 89"Formats acceptés "0123456789" "01­23­45­67­89" "01.23.45.67.89" "01 23 456 789" ou

"01­23­45­67­89"acceptés "0123456789" "01 23 45 67 89" "01.23.45.67.89" "01 23 456 789" ou avec les

"01.23.45.67.89""01 23 45 67 89" "01­23­45­67­89" "01 23 456 789" ou avec les séparateurs :

"01 23 456 789" ou avec les séparateurs : "­", ".""01­23­45­67­89" "01.23.45.67.89" "0123 456 789" ou avec les séparateurs :

"0123 456 789" ou avec les séparateurs : "­", "."ou avec les séparateurs : "­", "." ou les mêmes avec "(33)" à la place du

ou les mêmes avec "(33)" à la place du "0"ou avec les séparateurs : "­", "." Code function tel_valide(chaine) { if

Code

function tel_valide(chaine) { if (chaine.search("^([\(]33[\)]|0)[0­9][ |\.|­]?[0­9]{2}[ |\.|­]?[0­ 9]{2}[ |\.|­]?[0­9][ |\.|­]?[0­9][ |\.|­]?[0­9]{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(" tous!"

salut à tous !

"); // chaine2 = "salut à

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) { chaine = unescape(chaine); return chaine.replace(/(^\s*)/, "");

}

function rtrim (chaine) { chaine = unescape(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+colonnes­1)); texte += "<tr><td>" + tab.join("</td><td>") + "</td></tr>";

}

texte += "</table>";

return texte;

}

afficher _multi

­ affichage rapide d’un tableau bi­dimensionnel

La quasi­totalité des tableaux multi­dimensionnels sont bi­dimensionnels : 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); tableau[1] = new Array(9, 15, 98, 67); tableau[0] = new Array(20, 32, 99, 88); document.write(tableau.afficher_multi("<table cellspacing='0'

border='1'>"));

affichera : 2 5 78 45 9 15 98 67 20 32 99 88
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" ci­dessus 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,

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()"

]". Il est

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,l’article dans les tableaux). Mais il y a 2 différences : la fonction de comparaison prend

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 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; var trouve = false; 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; var trouve = false;

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; var trouve = false; 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 "01­01­2003" 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)

"JS" : jour de la semaine ("JJJS" jour de la semaine abrégé à 3 caractères): jour du mois ("JJ" jour affiché sur 2 chiffres) "M" : mois en chiffres ("MM"

"M" : mois en chiffres ("MM" mois affiché sur 2 chiffres)jour de la semaine abrégé à 3 caractères) "ML" : mois en lettres ("MMML" mois abrégé

"ML" : mois en lettres ("MMML" mois abrégé sur 3 caractères, sauf juin et juillet qui sont sur 4)mois en chiffres ("MM" mois affiché sur 2 chiffres) "AAAA" : année ("AA" sur 2 chiffres,

"AAAA" : année ("AA" sur 2 chiffres, "AAAA" sur 4 chiffres) Les autres caractères du format sont transcrits tels quels.sur 3 caractères, sauf juin et juillet qui sont sur 4) Syntaxe : madate.date(format); Exemples avec

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("AAAA­MM­JJ"); // donnera "2003­07­14" (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 Date.prototype.quel_jour = function() { return this.getDay() ? (this.getDay()­1) : 6;

6 pour dimanche

}

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);

}

binaire

­ 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 desmode]) ; La méthode admet 2 arguments optionnels : 0 le mode qui peut être "unsigned"

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.affichés, éventuellement complétés à gauche par des 0 Exemples : var x = 6; x.binaire(); //

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’écart­type d’une série de nombres

Cette fonction retourne un nombre, qui est l’écart­type des nombres fournis en arguments. L’écart­type 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’écart­type sera faible, si au contraire les nombres s’écartent de la moyenne, l’écart­type 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,Les arguments peuvent être sous 2 formes possibles : ou un tableau de nombres Syntaxe :

ou un tableau de nombrespeuvent être sous 2 formes possibles : une liste de nombre, Syntaxe : ecart_type(nombre1, nombre2 ou

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() { if (isNaN(this)) return null; // pour l'instruction suivante, voir min_max_int() plus bas // 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 ((this > Number.MAXINT) || (this < Number.MININT)) return null; 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() { if (isNaN(this)) return null; // pour l'instruction suivante, voir min_max_int() plus bas if ((this > Number.MAXINT) || (this < Number.MININT)) return null; var nombre = this; var i = 0; while (nombre) { nombre >>>= 1; i++;

}

return i­1;

}

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 ­1et­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(nomb