No cache version.

Caching disabled. Default setting for this page:enabled (code LNG204)
If the display is too slow, you can disable the user mode to view the cached version.

Fonctions JavaScript

Contents

Une fonction JavaScript est un bloc d'instructions JavaScript qui seront exécutées lorsque nous le demandons. Quand nous écrivons une fonction, aucun code de cette fonction n'est exécuté tant que nous ne le demandons pas.

L'avantage d'écrire une fonction, c'est que nous écrivons une seule fois les instructions qu'elle contient, et que nous pouvons en demander l'exécution à de multiples reprises sans devoir écrire à nouveau ces instructions.

Lorsque notre fonction est définie dans un objet, nous parlons alors de méthode.

Paramètres de fonction

Un autre avantage des fonctions, c'est que nous pouvons définir une série de comportements, sans savoir à l'avance sur quelles données ce traitement sera effectué.

Nous allons donc utiliser des paramètres, qui sont des variables dont la valeur sera définie au moment où nous demanderons à la fonction d'exécuter les instructions qu'elle contient.

Nous pouvons avoir un ou plusieurs paramètres pour une fonction, ou ne pas en avoir du tout.

Contents Haut

Comment écrire une fonction JavaScript ?

Syntaxe d'une fonction JavaScript

Voici en BNF [“Backus-Naur form”1] la syntaxe d'une fonction JavaScript : 

  1. function <nom_de_fonction> "(" [param]["," param]* ")" "{"
  2. 	[<instructions>]
  3. 	[return [<instruction>|<variable>|<valeur>] ";"]
  4. "}"

Et voici une autre manière de représenter la syntaxe d'une fonction JavaScript : 

  1. function nom_de_fonction (param_1, param_2, ..., param_N){
  2. 	instructions;
  3. 	return valeur;
  4. }

Si nous avons plus d'un paramètre, nous les séparerons par des virgules. Chaque instruction se termine par un point-virgule.

Nous pouvons avoir des fonctions qui n'ont pas d'autres instructions que ce qui suit le mot clé return, ou des fonctions qui ne possèdent pas d'instruction return.

Contents Haut

Exemple d'une fonction JavaScript

  1. function additionne (nombre1, nombre2){
  2. 	return nombre1+nombre2;
  3. }

Présentation du code

Nous pouvons présenter le code comme bon nous semble, mais pour une facilité de lecture nous veillerons à indenter nos blocs de codes.

Les différents blocs de codes sont entre accolades. Nous retrouvons certains partisants du langage C qui placent l'accolade ouvrante sur une nouvelle ligne, d'autres préfèreront placer l'accolade ouvrante sans passer de ligne (comme par exemple en Java). Les deux pratiques se vallent, pour autant que nous puissions relire notre code, et cela n'a pas d'impact sur l'exécution du code. Les deux exemples suivants sont identiques :

  1. function  accolades          ()   { instructions;
  2.  
  3.  
  4.  
  5. 		if (condition){instructions;}}
  1. function accolades (){
  2.  
  3. 	instructions;
  4.  
  5. 	if (condition){
  6. 		instructions;
  7. 	}
  8. }

Exécuter une fonction

Nous demandons à une fonction de s'exécuter, nous « appelons » cette fonction en écrivant son nom, suivi par des parenthèses entre lesquelles nous pouvons retrouver certains arguments.

Nous pouvons écrire nos propres fonctions, mais JavaScript propose un ensemble de fonctions que nous pouvons appeler.

Contents Haut

Où écrire nos fonctions ?

Comme pour tout autre code JavaScript, nous pouvons écrire nos fonctions dans un fichier externe (si il est utilisé dans plus d'une page), dans l'en-tête du document (pour nous assurer que les fonctionsseront chargées avant que leur exécution ne soit demandée), ou dans le corps du document.

Contents Haut

Exemples de fonctions


Codes HTML, JavaScript, HTML  (22 lignes) :
  1.  
  2. <html>
  3. <head>
  4. 	<script type="text/javascript">
  1.  
  2. 	function montremsg (msg){
  3. 		alert ("Le résultat est: " + msg);
  4. 	}
  1.  
  2. 	</script>
  3. </head>
  4. <body>
  5. 	<h1>paramètres de fonction</h1>
  6. 	<form>
  7. 	<input 
  8. 		type="button" 
  9. 		value="Cliquez ici" 
  10. 		onClick="montremsg ('Le bouton a été cliqué')"
  11. 		>
  12. 	</form>
  13. </body>
  14. </html>

English translation

You have asked to visit this site in English. For now, only the interface is translated, but not all the content yet.

If you want to help me in translations, your contribution is welcome. All you need to do is register on the site, and send me a message asking me to add you to the group of translators, which will give you the opportunity to translate the pages you want. A link at the bottom of each translated page indicates that you are the translator, and has a link to your profile.

Thank you in advance.

Document created the 19/03/2002, last modified the 31/10/2018
Source of the printed document:https://www.gaudry.be/en/javascript-function.html

The infobrol is a personal site whose content is my sole responsibility. The text is available under CreativeCommons license (BY-NC-SA). More info on the terms of use and the author.

Notes

  1. ↑a,b Backus-Naur form : corresponds to « forme de Backus-Naur » en français

  2. ↑ BNF : “Backus-Naur form” (en français, « forme de Backus-Naur ») Notation qui permet de décrire les règles syntaxiques.

Contents Haut