retour vers :

Le Javascript,
précieux pour
rendre ses pages web interactives

résumé du site http://www.ccim.be/ccim328/html/index.html
avec Luc Van Lancker. Un tutorial en ligne idéal pour les débutants
retour vers :

I : Un peu de théorie :
Définition du javascript : Le javascript est un langage basé sur les objets, un code intégré dans la page Html, visible et peut être copié par tout le monde. Ce code est interprété par le navigateur au moment de l'exécution. Les codes de programmation sont simples donc rapides à charger, ils gèrent des applications limitées, applicables aux objets du navigateur.

Hiérarchie des objets : Javascript divise la page web en "objets" et permet de gérer ces objets. La page entière s'ouvre dans une fenêtre = objet fenêtre. Dans cette fenêtre apparaît la page = objet document. Dans ce document ce trouvent les informations tapées = objet formulaire. Ces 3 objets sont toujours présents.
Pour qu'une page devienne interactive, il est nécessaire d'y introduire des objets spécifiques : objet radio (case à cocher), objet bouton (mot encadré à cliquer), objet texte (case ou on peut écrire)… Pour accéder à ces derniers objets, il faudra préciser le chemin complet citant tous les objets emboîtés, de l'objet le plus extérieur jusqu'à l'objet le plus central.

Propriété des objets : Une propriété est un attribut, une caractéristique, une description de l'objet. Par exemple, l'objet "livre" a comme propriétés son auteur, sa maison d'édition, son titre... Les objets Javascript ont des propriétés personnalisées. Dans le cas des boutons radio, une de ses propriétés est, par exemple, sa sélection ou sa non-sélection (checked en anglais). Pour accéder aux propriétés, on utilise la syntaxe : nom_de_l'objet.nom_de_la_propriété

II : Premières balises :

On signale au navigateur le passage html / javascript : c'est la balise <SCRIPT LANGUAGE="Javascript">. De même, il faudra informer le navigateur de la fin du script : c'est la balise </SCRIPT>.
Il est utile d'inclure des commentaires personnels dans ses codes pour se souvenir ultérieurement des choix effectués ou de la date du travail : // commentaire. Tout ce qui est écrit entre le // et la fin de la ligne sera ignoré. Il sera possible d'inclure des commentaires sur plusieurs lignes avec le code /* commentaire sur plusieurs lignes */

Les browsers qui ne comprennent pas le Javascript (et il y en a encore) ignorent la balise <script> et vont essayer d'afficher le code du script sans pouvoir l'exécuter. Pour éviter l'affichage peu esthétique de ses inscriptions cabalistiques, on utilisera les balises de commentaire du langage Html <!-- ... -->.

<SCRIPT LANGUAGE="javascript">
<!-- Masquer le script pour les anciens browsers
...
programme Javascript ;
...
// Cesser de masquer le script -->
</SCRIPT>

Le navigateur traite la page Html de haut en bas. Par conséquent, toute instruction ne pourra être exécutée que s'il possède à ce moment précis tous les éléments nécessaires à son exécution. Ceux-ci doivent donc être déclarés avant ou au plus tard lors de l'instruction.

Il est donc pratique de déclarer systématiquement un maximum d'éléments dans les balises d'en-tête soit entre <HEAD> et </HEAD> et avant la balise <BODY>. Ce sera le cas par exemple pour les fonctions. Rien n'interdit de mettre plusieurs scripts dans une même page Html.

l'instruction alert() affiche un message (dans le cas présent votre texte entre guillemets) dans une boite de dialogue pourvue d'un bouton OK. Pour continuer dans la page, le lecteur devra cliquer ce bouton.

<HTML>
<HEAD>
<TITLE>Mon premier Javascript</TITLE>
</HEAD>
<BODY>
Bla-bla en Html
<SCRIPT LANGUAGE="Javascript">
<!--
alert("votre texte");
//-->
</SCRIPT>
Suite bla-bla en Html
</BODY>
</HTML>

La balise script n'est pas obligatoire pour certains événements (exemple onClick) où il faut simplement insérer le code à l'intérieur de la commande Html comme un attribut de celle-ci. L'événement fera appel à la fonction Javascript lorsque la commande Html sera activée. Javascript fonctionne alors comme une extension du langage Html.

Un point-virgule finit chaque ligne de programme javascript. De plus la case compte : il faudra écrire alert() et non Alert(). Les caractères accentués comme é ou à ne peuvent être employés que dans le texte de notre exemple. Les guillemets " et l'apostrophe ' font partie intégrante du langage Javascript. On peut utiliser l'une ou l'autre forme à condition de ne pas les mélanger. Ainsi alert("...') donnera un message d'erreur. Si vous souhaitez utiliser des guillemets dans vos chaînes de caractères, tapez \" ou \' pour les différencier vis à vis du compilateur.

III : Afficher du texte, modifier des variables :

A l'objet document, Javascript a dédié la méthode "écrire dans le document", c'est la méthode write(). Pour varier le texte, il suffit d'inclure des balises html

Pour appeler la méthode write() du document, on notera document.write("texte"); ou document.write("resultat");

Les variables contiennent des données qui peuvent être modifiées lors de l'exécution d'un programme.

var Numero = 1
var Prenom = "Luc"

Javascript utilise 4 types de données : des nombres (tout nombre entier ou avec virgule tel que 22 ou 3.1416), des chaînes de caractères (toute suite de caractères comprise entre guillemets telle que "suite de caractères"), des booléens (true pour vrai et fase pour faux), le mot null (mot spécial qui représente pas de valeur).

Les variables déclarées tout au début du script, en dehors et avant toutes fonctions seront toujours globales, qu'elles soient déclarées avec var ou de façon contextuelle. On pourra donc les exploiter partout dans le script.

<HTML>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!--
var texte = "Mon chiffre préféré est le "
var variable = 7
document.write(texte + variable);
//-->
</SCRIPT>
</BODY>
</HTML>

Dans une fonction, une variable déclarée par le mot clé var aura une portée limitée à cette seule fonction. On ne pourra donc pas l'exploiter ailleurs dans le script. D'où son nom de locale. Par contre, toujours dans une fonction, si la variable est déclarée contextuellement (sans utiliser le mot var), sa portée sera globale.

 

IV : Les opérateurs :

les opérateurs de calcul :

signe

nom

signification

exemple (avec x=11)

résultat

+

plus

addition

x+3

14

-

moins

soustraction

x-3

8

*

multiplié par

multiplication

x*2

22

/

divisé par

division

x/2

5.5

ù

modulo

reste de la division par

xù5

1

=

a la valeur

affectation

x=11

11

 

Les opérateurs de comparaison :

signe

nom

exemple

résultat

==

égal

x==11

true

<

inférieur

x<11

false

<=

inférieur ou égal

x<=11

true

>

supérieur

x>11

false

>=

supérieur ou égal

x>=11

true

!=

différent

x!=11

false

 

les opérateurs associatifs :

signe

description

exemple(avec y=5)

signification

résultat

+=

plus égal

x+=y

x=x+y

16

-=

moins égal

x-=y

x=x-y

6

*=

multiplié égal

x*=y

x=x*y

55

/=

divisé égal

x/=y

x=x/y

2.2

les opérateurs logiques (=booléens):

signe

nom

exemple

signification

&&

et

(condition1)&&(condition2)

condition1 et condition 2

||

ou

(condition1)||(condition 2)

condition1 ou condition 2

les opérateurs d'incrémentation

signe

description

exemple (x vaut 3)

signification

résultat

x++

incrémentation

y=x++

3+1

4

x--

décrémentation

y=x--

3-1

2

 

Les opérateurs s'effectuent dans l'ordre suivant de priorité (du degré de priorité le plus faible ou degré de priorité le plus élevé).

Dans le cas d'opérateurs de priorité égale, de gauche à droite.

opérateur :

,
= += -= *= /= %=
? :
||
&&
== !=
< <= >= >
+ -
* /
! - ++ --
( )

opération :

virgule ou séparateur de liste
affectation
opérateur conditionnel
ou logique
et logique
égalité
relationnel
addition soustraction
multiplier diviser
unaire
parenthèses

V : les fonctions :

définition :

Une fonction est un groupe de ligne(s) de code de programmation destiné à exécuter une tâche bien spécifique :

- soit des fonctions propres à Javascript appelées "méthodes" associées à un objet particulier (ex : méthode Alert() avec l'objet window).

- soit les fonctions écrites par soi-même pour les besoins de son script. C'est à celles-là que nous nous intéressons maintenant.

Pour déclarer ou définir une fonction, on utilise le mot (réservé) function. La syntaxe d'une déclaration de fonction est la suivante :

Le nom de la fonction suit les mêmes règles que celles qui régissent le nom de variables (nombre de caractères indéfini, commencer par une lettre, peuvent inclure des chiffres...).

function nom_de_la_fonction(arguments) {
... code des instructions ...
}

Pour rappel, Javascript est sensible à la case. Ainsi fonction() ne sera pas égal à Fonction(). En outre, Tous les noms des fonctions dans un script doivent être uniques.

La mention des arguments est facultative mais dans ce cas les parenthèses doivent rester. C'est d'ailleurs grâce à ces parenthèses que l'interpréteur Javascript distingue les variables des fonctions. Nous reviendrons plus en détail sur les arguments et autres paramètres dans la partie Javascript avancé.

Lorsque une accolade est ouverte, elle doit impérativement, sous peine de message d'erreur, être refermée. Prenez la bonne habitude de fermer directement vos accolades et d'écrire votre code entre elles.

Appel de fonction : Le fait de définir une fonction n'entraîne pas l'exécution des commandes qui la composent. Ce n'est que lors de l'appel de la fonction (présence de nom_de_la_fonction();) que le code de programme est exécuté.

Il faudra veiller à ce que la fonction soit bien définie avant d'être appelée, donc toutes les déclarations de fonction sont placées dans l'en-tête de page <HEAD> ... <HEAD>.

Dans cet exemple, on définit dans les balises HEAD, une fonction appelée message() qui affiche le texte "Bienvenue à ma page". Cette fonction sera appelée au chargement de onLoad=.... dans le tag <BODY>. La fonction s'applique à la variable précisée entre parenthèses

<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<--
function message() {
document.write("Bienvenue à ma page");
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="message()">
</BODY>
</HTML>

Application de la fonction à une ou plusieurs variables :

sa déclaration en en-tête sera :

function nom_de_la_fonction(var1, var2) {
…code des instructions …}

son appel sera :

nom_de_la_fonction(var1, var2)

retour de valeur : écrire le mot-clé return suivi de l'expression à envoyer (sans parenthèse) : ex :

function cube(nombre) {
var cube = nombre*nombre*nombre return cube; }

Dans l'exemple ci-dessus, "cube" est désignée comme "var" donc variable locale, spécifique de la fonction l'encadrant. Si on supprime "var", le mots "cube" devient variable globale. Les variables déclarées en en-tête, avant les fonctions, seront toujours globales, qu'elles soient déclarées avec var ou non, ce qui facilite leur gestion.

<SCRIPT LANGUAGE="javascript">
var cube=1
function cube(nombre) {
var cube = nombre*nombre*nombre
}
</SCRIPT>

VI : Les évènements :

Le seul événement html est le clic actionnant un lien !

Javascript propose d'autres évènements :

évènement

description

objets associés

code de l'action associée

Clik

l'utilisateur clique sur un bouton, un lien ou tout autre élément.

-lien hypertexte, -élément bouton,
-case à cocher,
-bouton radio, bouton submit, bouton reset

<FORM>
<INPUT TYPE="button" VALUE="Cliquez ici" onClick="alert('Vous avez bien cliqué ici')">
</FORM>

Load

la page a fini d'être chargée par le navigateur

-fenêtre

<HTML>
<HEAD>
<SCRIPT LANGUAGE='Javascript'>
function bienvenue() {
alert("Bienvenue à cette page");
}
function au_revoir() {
alert("Au revoir");
}
</SCRIPT>
</HEAD>
<BODY onLoad='bienvenue()' onUnload='au_revoir()'>
Html normal
</BODY>
</HTML>

Unload

l'utilisateur quitte la page

-fenêtre

MouseOver

l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément sans cliquer.
(S'il y a clik : # permet de recharger la page en cours)

-lien hypertexte une information (ou une autre image de même taille*) apparaît

<BODY>
<A HREF="#" onmouseOver="alert('Coucou')">message important</A>
<BODY>

MouseOut

le pointeur de la souris quitte un lien ou tout autre élément

-lien hypertexte : cette autre image ou information disparaît

<A HREF="" onmouseOver="alert('Coucou')" onmouseOut="alert('Au revoir')">message important</A>

Focus

un élément de formulaire cliqué devient zone d'entrée active (case à remplir).

-élément de texte,
-élément de zone de texte -liste de sélection

  

Blur

un élément de formulaire perd le focus : on clique hors du champs qui n'est plus actif

-élément de texte,
-élément de zone de texte -liste de sélection

<FORM>
<INPUT TYPE=text onBlur="alert('Ceci est un Blur')">
</FORM>

Change

la valeur d'un champ de formulaire est modifiée par l'utilisateur

-élément de texte,
-élément de zone de texte -liste de sélection

  

Select

l'utilisateur sélectionne un champ dans un élément de formulaire

-élément de texte,
-élément de zone de texte

  

Submit

l'utilisateur clique sur le bouton Submit pour envoyer un formulaire

    

*Changement d'image : <HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript1.1">
function lightUp() { document.images["homeButton"].src="button_hot.gif" }
function dimDown() { document.images["homeButton"].src="button_dim.gif"}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseOver="lightUp();" onmouseOut="dimDown();">
<IMG SRC="button_dim.gif" name="homeButton" width=100 height=50 border=0> </A>
</BODY>
</HTML>

VII : Les conditions

Condition

description

code de l'action associée

 

if

Si la condition est vérifiée (true), le bloc d'instructions 1 s'exécute. Si elle ne l'est pas (false), le bloc d'instructions 2 s'exécute.

Dans le cas où il n'y a qu'une instruction, les accolades sont facultatives.

if (condition vraie) {
instructions1;
}
else {
instructions2;
}

si la condition 1 et la condition 2 est réalisée

if ((condition1) && (condition2)),

si une au moins des conditions est vérifiée.

if ((condition1) || (condition2))

Si l'expression entre parenthèse est vraie, l'instruction a est exécutée. Si l'expression entre parenthèses retourne faux, c'est l'instruction b qui est exécutée.

(expression) ? instruction a : instruction b

for

exécution un bloc d'instructions un certain nombre de fois en fonction de la réalisation d'un certain critère.

for (valeur initiale ; condition ; progression) {
instructions;
}

While

exécution une instruction (ou un groupe d'instructions) un certain nombre de fois aussi longtemps que la condition est vérifiée.

while (condition vraie){
continuer à faire quelque chose
}

Break

permet d'interrompre prématurément une boucle for ou while

if (compt == 4)
break;

Continue

permet de sauter une instruction dans une boucle for ou while et de continuer ensuite le bouclage (sans sortir de celui-ci comme le fait break)

if (compt == 3){
compt++
continue;}