 |
|
INITIATION AU JAVA SCRIPT |
|
|
|
INITIATION AU JAVA SCRIPT |
Définition : Une fonction est un groupe de ligne(s) de code de
programmation destiné à exécuter une tâche bien spécifique et que tu pourras, si
besoin est, utiliser à plusieurs reprises.
De plus, l'usage des fonctions améliorera grandement la lisibilité de ton 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 toi-même pour les besoins
de ton script.
C'est à celles-là tu vas t'intéresser maintenant.
Déclaration des fonctions : 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.
Je reviendrais plus en détail sur les arguments et autres paramètres ultérieurement.
Lorsque une accolade est ouverte, elle doit
impérativement, sous peine de message d'erreur, être refermée. Prends la bonne habitude
de fermer directement tes accolades et d'écrire ton 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 : 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 veiller en toute logique (car l'interpréteur
lit ton script de haut vers le bas) que ta fonction soit bien définie avant d'être
appelée.
Les fonctions dans <HEAD>...<HEAD>
: il est donc prudent ou judicieux de placer toutes les
déclarations de fonction dans l'en-tête de ta page c-à-d dans la balise <HEAD> ... <HEAD>. Tu seras ainsi assuré que tes fonctions seront déjà prises en compte
par l'interpréteur avant qu'elles soient appelées dans le <BODY>. Exemple :
dans cet exemple, on définit dans les balises
HEAD, une fonction appelée message() qui affiche le texte "Bienvenue au
SPEEDSITE". cette fonction sera appelée au chargement
de la page voir onLoad=.... dans
le tag <BODY>.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<--
function message() {
document.write("Bienvenue au SpeeDEricH.com");
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="message()">
</BODY>
</HTML>
Passer une valeur à une fonction
: tu peux 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. Un exemple un peu simplet pour comprendre.
J'écris une fonction qui affiche une boite d'alerte dont le texte peut changer.
Dans la déclaration de la fonction, 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("Bienvenue au SPEEDEricH.com");
Passer plusieurs valeurs à une fonction
: tu peux passer plusieurs paramètres à une fonction.
Comme c'est souvent le cas en Javascript, on sépare 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("Bienvenue au
SpeeDEricH.com", "Tout
en FRANÇAIS")
Retourner une valeur
: le principe est simple (la pratique parfois moins). Pour
renvoyer un résultat, il suffit d'écrire le mot clé return suivi de l'expression à renvoyer.
Note qu'il ne faut pas entourer l'expression de parenthèses.
Exemple :
function cube(nombre) {var cube =nombre*nombre*nombre
return cube;} Je précise que l'instruction
return est facultative et qu'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(cube(5)).
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. function cube(nombre) {var cube = nombre*nombre*nombre}
Ainsi la variable cube dans cet exemple est une variable
locale. Si tu y fais référence ailleurs dans le script, cette variable sera inconnue
pour l'interpréteur Javascript (message d'erreur). Si la variable est déclarée contextuellement (sans
utiliser le mot var), sa portée
sera globale et pour être tout à fait précis, une fois que la fonction aura été
exécutée. function cube(nombre) {cube = nombre*nombre*nombre}
La variable cube déclarée contextuellement sera ici une variable 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.
<SCRIPT LANGUAGE="javascript">
var cube=1
function cube(nombre) {
var cube = nombre*nombre*nombre
}
</SCRIPT>
La variable cube sera bien globale.
Pour la facilité de gestion des variables, je ne peux
que conseiller de les déclarer en début de script (comme dans la plupart des langages de
programmation).
Cette habitude te met à l'abri de certaines complications.
