Fonctions JavaScript

Table des matières

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.

Table des matières 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.

Table des matières 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.

Table des matières 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.

Table des matières 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>

Version en cache

21/11/2024 09:49:15 Cette version de la page est en cache (à la date du 21/11/2024 09:49:15) afin d'accélérer le traitement. Vous pouvez activer le mode utilisateur dans le menu en haut pour afficher la dernère version de la page.

Document créé le 19/03/2002, dernière modification le 31/10/2018
Source du document imprimé : https://www.gaudry.be/javascript-function.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.

Notes
  1. ↑a,b Backus-Naur form : correspond à « 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.

Table des matières Haut