Yazo.net

Découvrir JavaScript

Le JavaScript est un langage de programmation mis au point par Netscape pour le développement d'applications internet. Le navigateur Netscape depuis sa version 2 sait interpréter le JavaScript. Il en est de même d'internet Explorer depuis sa version 3.

Bien que langage "orienté objet" JavaScript est un langage aisé à mettre en œuvre. Seule difficulté pour un utilisateur du HTML, en JavaScript comme en C ou Java, majuscules et minuscules sont distinguées.

Le code JavaScript est inséré directement dans la page HTML entre les balise <SCRIPT> et </SCRIPT> . Il peut aussi être intégré à certaines balises HTML. Il est lu, interprété et exécuté par le navigateur lors du chargement de la page ou bien lors d'un événement généré par l'utilisateur.

Un script peut être placé n'importe où dans la page HTML. On utilisera souvent la balise <HEAD> afin de s'assurer que le script est lu et exécuté dès le chargement de la page.

Les principes

Le principe de la programmation en JavaScript pourrait être résumé comme suit : Par un langage de scripts on accède aux propriétés des différents objets connus du navigateur afin de lire ou modifier ces propriétés.

voici un premier exemple simple où l'on accède pour le modifier, au contenu de la barre d'état (status) de la fenêtre (window) du navigateur :

<HTML>

<HEAD>
</HEAD>
<BODY>

<FORM>

<INPUT type="button" value="clic"
onClick="window.status='regardez
en bas' ">
</FORM>

</BODY>

</HTML>

Ce script provoque l'affichage du texte entre apostrophes dans la barre d'état du navigateur. onClick est appelé un gestionnaire d'événement.

Ce gestionnaire est intégré à la balise qui défini un bouton dans un formulaire.

Notez l'utilisation des apostrophes délimitant la chaîne à afficher à l'intérieur d'une instruction JavaScript elle-même placée entre double guillemets.

Dans l'exemple suivant, on modifie une image du document simplement en affectant une nouvelle valeur à l'attribut SRC=. et ce lorsque l'utilisateur fait glisser la souris au dessus de l'image. L'événement qui déclenche l'exécution du script (le mouvement de souris) est géré par le gestionnaire onMouseover.

Le gestionnaire onMouseover n'est efficace que lorsque la souris passe au dessus d'un hyperlien. il faut donc transformer l'image en "lien vers rien". On utilise A HREF="#"

<HTML>

     <HEAD>

     </HEAD>
       <BODY>
       <A HREF="#" onMouseover=" document.MON_IMAGE.src='Blanc.gif' " onMouseout=" document.MON_IMAGE.src='Noir.gif' ">
           <IMG src="Noir.gif" name="MON_IMAGE" border=0>
       </A>
       </BODY>

</HTML>

Ce script provoque un changement immédiat d'image lors du passage de la souris au dessus de la zone.

Pour nous francophones, il faut lire à l'envers la drôle d'appellation utilisée pour accéder à l'objet : document.MON_IMAGE.src, cela signifie : la propriété source (SRC) de l'image MON_IMAGE faisant partie du document (de la fenêtre active).

Pour accéder facilement à la sources (SRC) de l'image, nous avons pris soin de la nommer (MON_IMAGE) au préalable.

Pour modifier maintenant le contenu (propriété value) d'un zone de texte dans un formulaire :

<HTML>

<HEAD>

</HEAD>

<BODY>

<FORM>

<INPUT type="text" name="MA_ZONE_DE_TEXTE" value="je suis vide" >
<br>
<INPUT type="button" value="clic" onClick="document.MON_FORMULAIRE.MA_
ZONE_DE_TEXTE.value='regardez ici' " >
</FORM>

</BODY>

</HTML>

Encore une fois nous avons pu accéder à la propriété que nous voulions modifier par un chemin arborescent :

La fenêtre (l'objet window qui n'a pas besoin d'être explicitement mentionné : il ne peut s'agir que de lui ! ) contient un document qui contient au moins un formulaire ( MON_FORMULAIRE ) qui possède au moins une zone de saisie ( nommée MA_ZONE_DE_TEXTE ) qui elle-même a une valeur (value).

Pour accéder à ces objets et à leurs propriétés nous les avons baptisés à leur génération. Nous n'y étions pas obligé toutefois. Le navigateur tient à jour en effet une liste pour chaque type d'objet.

document.forms[0] désigne ainsi le premier formulaire du document (l'index commence à zéro).

document.forms[3] fait référence au 4ème formulaire du document, etc.

Au sein d'un formulaire maintenant les éléments peuvent-être désignés par ordre d'apparition :

MON_FORMULAIRE.elements[0] désigne ainsi le premier objet du formulaire nommé MON_FORMULAIRE.

C'est pourquoi, pour accéder au contenu de la zone de texte, nous aurions pu écrire aussi :

document.forms[0].elements[0].value

Toutes les propriétés de tous les objets ne peuvent pas être modifiées et certaines pas tout le temps mais toujours la manière d'y accéder restera la même. Voici un script permettant de modifier la couleur de fond du document :

<HTML>

<HEAD>

</HEAD>

<BODY bgcolor="#000000">

<FORM>

<INPUT type="button" value="changer La Couleur ?" onClick=<document.bgColor='#ffcc33' ">
</FORM>

</BODY>

</HTML>

Notez bien la différence entre l'option bgcolor intégrée à la balise BODY ( c'est du HTML ) et la propriété bgColor de l'objet document ( c'est du JavaScript et la casse est impérative ). Bien sûr, il s'agit bien de la même chose.

Les fonctions

Un fonction est un ensemble d'instructions que l'on regroupe afin de pouvoir les mettre en œuvre toutes ensembles quand on en a besoin, sans avoir à les réécrire à chaque fois.

On définit une fonction à l'aide du mot clé function. Il est préférable que cette définition soit effectuée dans la balise HEAD afin que le navigateur la prenne en compte dès le chargement de la page.

Voici un exemple de déclaration de fonction et son appel :

<HTML>

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function disBonjour()
{
alert ( "Hello world !" )
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value="clic"
onClick="disBonjour()">
<FORM>

</BODY>

</HTML>

La fonction appelée lors du clic, le navigateur affiche un message d'alerte reprenant la chaîne "Hello world !"

Toujours la définition d'une fonction se fera de la façon suivante : d'abord le mot clé function puis le nom de la fonction suivi de ses arguments entre parenthèses. Enfin les instructions JavaScript qui constituent la fonction, placées entre accolades.

voici un autre exemple de fonction :

function changeLeDocument ( NouvelleCouleur, QuelleImage, NouvelleImage )

{
document.bgColor = NouvelleCouleur;
document. QuelleImage.src = NouvelleImage;
}

Lors de l'appel de la fonction changeLeDocument, il convient de lui passer trois arguments : NouvelleCouleur qui défini la couleur de fond de remplacement ( attention à la différence majuscule minuscules lorsque vous saisissez la propriété bgColor ! ), QuelleImage et NouvelleImage qui permettent de substituer la source d'une image à une autre dans une balise IMG.

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function changeLeDocument ( NouvelleCouleur, QuelleImage, NouvelleImage )
{
document.bgColor=NouvelleCouleur ; document.QuelleImage.src=NouvelleImage;
}

</SCRIPT>

</HEAD>

<BODY bgcolor="Black">
<IMG src="noir.gif" name="toto">

<FORM>

<INPUT type="button" value="clic" onClick="changeLeDocument ( '#ffffff ', toto, 'blanc.gif' ) ">
</FORM>

</BODY>

</HTML>

Une fonction peut contenir un appel à d'autre fonctions. Une fonction peut même s'appeler elle-même !

Les variables

Pour stocker une valeur en mémoire, certains langage de programmation utilisent plusieurs types de variables, Le JavaScript n'en connaît qu'un susceptible de contenir indifféremment texte, valeur booléenne (vrai-faux) ou numérique.

Pour déclarer une variable qui ne sera disponible que durant l'exécution d'une fonction, on procède à sa déclaration dans le corps de la fonction et on utilise le mot clé var :

var REPONSE = "oui"

après exécution de la fonction où elle est créée et utilisée, la variable REPONSE n'existe plus en mémoire.

Pour déclarer une variable dite globale, qui restera disponible pour l'ensemble des scripts on se contente de lui affecter une valeur :

REPONSE = "Bonjour"

Cette affectation peut être effectuée dans une fonction ou en dehors de toute fonction. Les noms de variables doivent commencer par une lettre. Rappel : JavaScript distingue Capitale et minuscule.

Les opérateurs

La manipulation des données requiert l'utilisation d'opérateurs arithmétiques et logiques.

Nous avons déjà rencontré un opérateur dans nos exemples précédents : L'opérateur d'affectation ou signe égal.

x = 7 est une expression qui confère à la variable x la valeur numérique 7.

Toutes les variables doivent se voir affecter une valeur. Une variable indéfinie provoquera une erreur lors de l'exécution du script.

les opérateurs arithmétiques :

x= 5+(7*2)

y=x-8

A noter + est aussi le signe de concaténation de chaîne de caractères.

x = " tout le monde "

y = "bonjour " + x

y a désormais pour contenu la chaîne : "Bonjour tout le monde"

les opérateurs de comparaison :

RESULTAT = (x<=9)

Dans ce derniers cas, RESULTAT se voit conférer la valeur vraie si et seulement si x est inférieur ou égal à 9.

Attention à ne pas confondre l'opérateur d'affectation = qui change la valeur du terme de gauche avec l'opérateur de comparaison == dont le contraire est != :

EGALITE = ( x == y )

La variable EGALITE aura la valeur "vrai" si x et y sont égaux.

DIFFERENCE = ( x != y )

La variable DIFFERENCE aura la valeur "vrai" si x et y sont différents.

Les opérateurs logiques :

Ils permettent des "calculs" sur des valeurs booléennes (vrai-faux).

( x == y ) && ( x != y )

signifie ( x est identique à y ) ET ( x est différent de y ). C'est une expression toujours fausse !

( x < y ) || ( x > y )

Du fait de l'utilisation de l'opérateur OU ici, l'expression ne peut être fausse que dans un seul cas : si x est identique à y

L'opérateur conditionnel :

familier aux programmeurs C, c'est un opérateur à trois opérandes :

RESULTAT = (x > 3) ? "gagné " : "perdu"

La variable RESULTAT se voit conférer la valeur "gagné" si l'expression ( x > 3 ) est vraie, sinon RESULTAT est égal à "perdu"

Les instructions de contrôle

Une instruction affectant une valeur à une variable ou encore un appel à une fonction sont des instructions simples.
Une instruction qui permet de rompre l'exécution séquentielle d'une programme (par un test, une boucle, un branchement...) est appelée une instruction de contrôle.

Le test if... , if ... else...

Le mot clé if permet d'exécuter une instruction de façon conditionnelle. Un exemple ? On rencontre absolument partout ce type de script :

if ( navigator.appName == "Netscape" )

{
maPremiereFonction() ;
madeuxiemeFonction() ;
...
}

Il s'agit ici de s'assurer avant tout que le navigateur est capable d'exécuter les instructions contenues entre les accolades et pour ce faire de s'assurer de son nom ( propriété appName de l'objet Navigator ).

Les instructions entre accolades ne seront exécutées que si l'expression placée entre parenthèses après if est vraie.

On peut indiquer optionnellement un jeu d'instructions qui seront exécutées dans le cas contraire. On ajoute alors un deuxième bloc entre accolades précédé du mot clé else :

if ( navigator.appName == "Netscape" )

{
maPremiereFonction() ;
madeuxiemeFonction() ;
...
}

else

{
alert ( " Ces pages requièrent Netscape ! ") ;
}

La boucle for

Pour forcer l'exécution répétée d'une ou plusieurs instructions, on dispose du mot clé for :

for ( var x = 1 ; x <= 5 ; x = x+ 1 )

{ monInstruction()
}

Les instructions placées dans les accolades seront dans ce cas exécutées 5 fois.

A - La première chose que le navigateur fait lorsqu'il rencontre une instruction for c'est d'affecter à x la valeur 1.

B - Il vérifie ensuite si la condition ( x <= 5 ) est vraie et seulement dans ce cas exécute la fonction monInstruction() une fois.

C - Après quoi le navigateur incrémente la valeur x (exécute x = x+ 1 ) et reprend au point B ( il vérifie si la condition est vraie avant d'exécuter l'instruction ).

La boucle ne s'achève que lorsque la condition ( x<= 5 ) est devenue fausse.

La boucle while

Le mot clé while permet de répéter une ou plusieurs instructions tant qu'une condition est vraie.

while ( x <= y )

{
maFonction() ;
}

La ou les fonctions placées dans les accolades seront exécutées repétitivement tant que la condition ( x <= y ) est vraie. c'est une variante intéressante à la boucle for en ce que la condition n'est évaluée qu'après que l'instruction est exécutée. cela signifie que maFonction() sera appelée au moins une fois (la première).

Netscape propose le téléchargement du manuel de référence de JavaScript sur son site : http://developper.netscape.com/docs/manuals/ communicator/jsguide4/index.htm