Home > Internet & Telecoms > Javascript Tutorial

Chapitre 4 Les Opérateurs et les Fonctions

4.1 Les opérateurs de calcul

Dans les exemples, la valeur initiale de x sera toujours égale à 11

Signe	Nom	Signification	Exemple	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=5	5

4.2 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

Important. On confond souvent le = et le == (deux signes =). Le = est un opérateur d'attribution de valeur tandis que le == est un opérateur de comparaison. Cette confusion est une source classique d'erreur de programmation.

4.3 Les opérateurs associatifs

On appelle ainsi les opérateurs qui réalisent un calcul dans lequel une variable intervient des deux côtés du signe = (ce sont donc en quelque sorte également des opérateurs d'attribution).

Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5.

Signe	Description	Exemple	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

4.4 Les opérateurs logiques

Aussi appelés opérateurs booléens, ses opérateurs servent à vérifier deux ou plusieurs conditions.

Signe	Nom	Exemple	Signification

&&	et	(condition1) && (condition2)	condition1 et condition2
\|\|	ou	(condition1) \|\| (condition2)	condition1 ou condition2

4.5 Les opérateurs d'incrémentation

Ces opérateurs vont augmenter ou diminuer la valeur de la variable d'une unité. Ce qui sera fort utile, par exemple, pour mettre en place des boucles.

Dans les exemples x vaut 3.

Signe	Description	Exemple	Signification	Résultat

x++	incrémentation (x++ est le même que x=x+1)	y = x++	3 puis plus 1	4
x--	décrémentation (x-- est le même que x=x-1)	y= x--	3 puis moins 1	2

4.6 La priorité des opérateurs Javascript

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ération

Opérateur

= += -= *= /= %=

? :

== !=

< <= >= >

+ -

* /

! - ++ --

( )

virgule ou séparateur de liste

affectation

opérateur conditionnel

ou logique

et logique

égalité

relationnel

addition soustraction

multiplier diviser

unaire

parenthèses

4.7 Déclaration et Appel des fonctions

Une fonction est un groupe de lignes de code de programmation destiné à exécuter une tâche bien spécifique et que l'on pourra, si besoin est, utiliser à plusieurs reprises. De plus, l'usage des fonctions améliorera la lisibilité de votre script.

En Javascript, il existe deux types de fonctions :

. les fonctions propres à Javascript. On les appelle des "méthodes". Elles sont associées à un objet bien particulier comme c'était le cas de la méthode Alert() avec l'objet window.

. les fonctions écrites par vous-même pour les besoins de votre script.

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 :

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

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

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.

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 que le code de programme est exécuté.

L'appel d'une fonction se fait le plus simplement du monde par le nom de la fonction avec les parenthèses.

Soit par exemple nom_de_la_fonction();

Il faudra veuiller en toute logique que votre fonction soit bien définie avant d'être appelée.

Il est donc prudent ou judicieux de placer toutes les déclarations de fonction dans l'en-tête de votre page dans la balise <HEAD> ... <HEAD>. Vous serez ainsi assuré que vos fonctions seront déjà prises en compte par l'interpréteur avant qu'elles soient appelées dans le <BODY>.

4.8 Exemple

Dans cet exemple, on définit dans les balises HEAD, une fonction appelée message() qui affiche le texte "Bienvenue sur www.elkhazen.com !". Cette fonction sera appelée au chargement de la page voir onLoad=.... dans le tag <BODY>.

4.9 Passer des valeurs à une fonction

On peut passer des valeurs ou paramètres aux fonctions Javascript. La valeur ainsi passée sera utilisée par la fonction. Pour passer un paramètre à une fonction, on fournit un nom d'une variable dans la déclaration de la fonction. Par exemple, on écrit :
function Exemple(Texte) {
alert(texte);
}

Le nom de la variable est Texte et est définie comme un paramètre de la fonction. Dans l'appel de la fonction, on lui fournit le texte : Exemple("Salut à tous");

On peut même passer plusieurs paramètres à une fonction, on sépare alors les paramètres par des virgules.
function nom_de_la_fonction(arg1, arg2, arg3) {
... code des instructions ...
}

Notre premier exemple devient pour la déclaration de fonction : function Exemplebis(Texte1, Texte2){...}
et pour l'appel de la fonction : Exemplebis("Salut à tous", "Ca va ?")

4.10 Retourner une valeur

Pour renvoyer un résultat, il suffit d'écrire le mot clé return suivi de l'expression à renvoyer. Par exemple :

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

L'instruction return est facultative et on peut trouver plusieurs return dans une même fonction. Pour exploiter cette valeur de la variable retournée par la fonction, on utilise une formulation du type document.write(carre(5)).

4.11 Variables locales et variables globales

Avec les fonctions, le bon usage des variables locales et globales prend toute son importance.

Une variable déclarée dans une fonction 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. On l'appelle donc variable locale.

Si la variable est déclarée contextuellement (sans utiliser le mot var), sa portée sera globale.

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. Pour la facilité de gestion des variables, on ne peut que conseiller de les déclarer en début de script.

4.12 Généralités sur les évènements

En Html classique, il y a un seul événement : c'est le clic de la souris sur un lien pour vous transporter sur une autre page Web. Heureusement, Javascript va en ajouter une bonne dizaine.

Les événements Javascript, associés aux fonctions, aux méthodes et aux formulaires, ouvrent grand la porte pour une réelle interactivité de vos pages. Passons en revue différents événements implémentés en Javascript.

Description	Evénement

Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément.	Click
Lorsque la page est chargée par le browser ou le navigateur.	Load
Lorsque l'utilisateur quitte la page.	Unload
Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément.	MouseOver
Lorsque le pointeur de la souris quitte un lien ou tout autre élément. Attention : Javascript 1.1	MouseOut
Lorsque un élément de formulaire a le focus, ie devient la zone d'entrée active.	Focus
Lorsque un élément de formulaire perd le focus, ie que l'utilisateur clique hors du champs et que la zone d'entrée n'est plus active.	Blur
Lorsque la valeur d'un champ de formulaire est modifiée.	Change
Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire.	Select
Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire.	Submit

Pour être efficace, il faut qu'à ces événements soient associées les actions prévues par vous. C'est le rôle des gestionnaires d'événements. Par exemple, la syntaxe est onClick="alert('Vous avez cliqué sur cet élément')".

onClick :

Evénement classique en informatique, le clic de la souris. Le code de ceci est :
<FORM>
<INPUT TYPE="button" VALUE="Cliquez ici" onClick="alert('Vous avez bien cliqué ici')">
</FORM>

onLoad et onUnload :

L'événement Load survient lorsque la page a fini de se charger. A l'inverse, Unload survient lorsque l'utilisateur quitte la page. Les événements onLoad et onUnload sont utilisés sous forme d'attributs de la balise <BODY> ou <FRAMESET>. On peut ainsi écrire un script pour souhaiter la bienvenue à l'ouverture d'une page et un petit mot d'au revoir au moment de quitter celle-ci.

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

onmouseOver et onmouseOut :

L'événement onmouseOver se produit lorsque le pointeur de la souris passe au dessus (sans cliquer) d'un lien ou d'une image. Cet événement est fort pratique pour, par exemple, afficher des explications soit dans la barre de statut soit avec une petite fenêtre genre infobulle. L'événement onmouseOut, généralement associé à un onmouseOver, se produit lorsque le pointeur quitte la zone sensible (lien ou image). Notons qui si onmouseOver est du Javascript 1.0, onmouseOut est du Javascript 1.1. En clair, onmouseOut ne fonctionne pas avec Netscape 2.0 et Explorer 3.0.

onFocus :

L'événement onFocus survient lorsqu'un champ de saisie a le focus, ie quand son emplacement est prêt à recevoir ce que l'utilisateur à l'intention de taper au clavier. C'est souvent la conséquence d'un clic de souris ou de l'usage de la touche "Tab".

onBlur :

L'événement onBlur a lieu lorsqu'un champ de formulaire perd le focus. Cela se produit quand l'utilisateur ayant terminé la saisie qu'il effectuait dans une case, clique en dehors du champ ou utilise la touche "Tab" pour passer à un champ. Cet événement sera souvent utilisé pour vérifier la saisie d'un formulaire. Le code est :

onchange :

Cet événement s'apparente à l'événement onBlur mais avec une petite différence. Non seulement la case du formulaire doit avoir perdu le focus mais aussi son contenu doit avoir été modifié par l'utilisateur.

onselect :

Cet événement se produit lorsque l'utilisateur a sélectionné (mis en surbrillance ou en vidéo inverse) tout ou partie d'une zone de texte dans une zone de type text ou textarea.

4.13 Gestionnaire d'événements

Voici la liste des objets auxquels correspondent des gestionnaires d'événement bien déterminés.

Objets	Gestionnaires d'événement disponibles

Fenêtre	onLoad, onUnload
Lien hypertexte	onClick, onmouseOver, on mouseOut
Elément de texte	onBlur, onChange, onFocus, onSelect
Elément de zone de texte	onBlur, onChange, onFocus, onSelect
Elément bouton	onClick
Case à cocher	onClick
Bouton Radio	onClick
Liste de sélectionon	Blur, onChange, onFocus
Bouton Submit	onClick
Bouton Reset	onClick

Le code du gestionnaire d'événement onmouseOver s'ajoute aux balises de lien :

Ainsi, lorsque l'utilisateur passe avec sa souris sur le lien, la fonction action() est appelée. L'attribut HREF est indispensable. Il peut contenir l'adresse d'une page Web si vous souhaitez que le lien soit actif ou simplement des guillemets si aucun lien actif n'est prévu. Voici un exemple. Par le survol du lien "message important", une fenêtre d'alerte s'ouvre. Le code est :

<BODY>
...
<A HREF="" onmouseOver="alert('Coucou')">Un message</A>
...
<BODY>

Tout à fait similaire à onmouseOver, sauf que l'événement se produit lorsque le pointeur de la souris quitte le lien ou la zone sensible. OnmouseOver est du Javascript 1.0 et sera donc reconnu par tous les browsers, alors que onmouseOut est du Javascript 1.1 et ne sera reconnu que par Netscape 3.0 et plus et Explorer 4.0 et plus (et pas par Netscape 2.0 et Explorer 3.0).

Avec le gestionnaire d'événement onmouseOver, on peut prévoir qu'après le survol d'un image par l'utilisateur, une autre image apparaisse (pour autant qu'elle soit de la même taille).

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

Compléter toujours en Javascript les attributs width=x height=y de vos images.

Il n'y a pas d'exemple ici pour la compatibilité avec les lecteurs utilisant explorer 3.0 en effet, non seulement onmouseOut mais aussi image[] est du Javascript 1.1.

[ HTML Language | Javascript Tutorial | Mobile Communications ]