Fonctions JavaScript


Une fonction est un bloc de code événementiel ou réutilisable qui s'exécute lorsqu'elle est appelée.

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Syntaxe des fonctions JavaScript

Une fonction est un bloc de code entouré d'accolades, précédé du mot-clé function :

fonction nomfonction ()
{
Exécuter le code
}

Lorsque cette fonction est appelée, le code contenu dans la fonction sera exécuté.

Les fonctions peuvent être appelées directement lorsqu'un événement se produit (par exemple lorsque l'utilisateur clique sur un bouton) et peuvent être appelées de n'importe où par JavaScript.

lampJavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

Appel de fonctions avec des paramètres

Lorsque vous appelez une fonction, vous pouvez lui transmettre des valeurs, qui sont appelées paramètres.

Ces paramètres peuvent être utilisés dans les fonctions.

Vous pouvez envoyer autant de paramètres que vous le souhaitez, séparés par des virgules (,) :

maFonction(argument1,argument2)

Lorsque vous déclarez une fonction, veuillez déclarer les paramètres comme variables :

fonction maFonction( var1,var2)
{
code
}

Les variables et paramètres doivent apparaître dans un ordre cohérent. La première variable est la valeur donnée du premier paramètre passé, et ainsi de suite.

Instance

<!DOCTYPE html>
<html>	
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

La fonction ci-dessus affichera "Bienvenue Harry Potter, le sorcier" lorsque vous cliquerez sur le bouton. La fonction

est flexible, vous pouvez appeler la fonction avec différents paramètres, qui donneront différents messages :

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>请点击其中的一个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

En fonction du bouton sur lequel vous cliquez, l'exemple ci-dessus affichera "Bienvenue Harry Potter", le magicien" ou "Bienvenue Bob, le constructeur".

Fonctions avec valeurs de retour

Parfois, nous souhaitons qu'une fonction renvoie une valeur à l'endroit où elle a été appelée.

Ceci peut être réalisé en utilisant la déclaration return.

Lors de l'utilisation de l'instruction return, la fonction arrête l'exécution et renvoie la valeur spécifiée.

Syntaxe

function myFunction()
{
var x=5;
return x;
}

La fonction ci-dessus renverra la valeur 5.

Remarque : L'intégralité du JavaScript n'arrête pas l'exécution, juste la fonction. JavaScript continuera à exécuter le code à partir duquel la fonction a été appelée.

Les appels de fonction seront remplacés par des valeurs de retour :

     var myVar=myFunction();

La valeur de la variable myVar est 5, qui est la valeur renvoyée par la fonction "myFunction()".

Vous pouvez utiliser la valeur de retour même sans la sauvegarder en tant que variable :

document.getElementById("demo").innerHTML=myFunction();

Le innerHTML de l'élément "demo" deviendra 5, qui est la valeur renvoyée par la fonction "myFunction()".

Vous pouvez baser la valeur de retour sur les paramètres passés dans la fonction :

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Vous pouvez également utiliser l'instruction return lorsque vous souhaitez simplement quitter l'instance fonction. La valeur de retour est facultative : 

function myFunction(a,b)
{
	if (a>b)
	{
		return;
	}
	x=a+b
}

Si a est supérieur à b, le code ci-dessus quittera la fonction et ne calculera pas la somme de a et b.

Variables JavaScript locales

Une variable déclarée dans une fonction JavaScript (à l'aide de var) est une variable locale, elle n'est donc accessible qu'à l'intérieur de la fonction. (La portée de cette variable est locale).

Vous pouvez utiliser des variables locales du même nom dans différentes fonctions, car seule la fonction dans laquelle la variable est déclarée reconnaîtra la variable.

Les variables locales seront supprimées dès que la fonction sera terminée.

Variables JavaScript globales

Les variables déclarées en dehors d'une fonction sont des variables globales et sont accessibles par tous les scripts et fonctions de la page Web.

Durée de vie des variables JavaScript

La durée de vie des variables JavaScript commence à partir du moment où elles sont déclarées.

Les variables locales seront supprimées après l'exécution de la fonction.

Les variables globales seront supprimées après la fermeture de la page.

Attribuer une valeur à une variable JavaScript non déclarée

Si vous attribuez une valeur à une variable qui n'a pas encore été déclarée, la variable sera automatiquement déclarée comme variable globale.

Cette instruction :

carname="Volvo";

déclarera une variable globale carname même si elle est exécutée dans une fonction.