JavaScript Fonction

Une fonction est un bloc de code réutilisable qui est déclenché par un événement ou exécuté lorsqu'elle est appelée.

Exemples

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple de test</title> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">Cliquez ici</button> </body> </html>

Essayez-le vous-même »

Syntaxe des fonctions JavaScript

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

function functionname()
{
    // Exécuter le code
}

Lorsque la fonction est appelée, le code à l'intérieur de la fonction sera exécuté.

Une fonction peut être appelée directement lorsqu'un événement se produit (par exemple, lorsque l'utilisateur clique sur un bouton), et elle peut être appelée par JavaScript depuis n'importe où.

lamp JavaScript est sensible à la casse. Le mot-clé function doit être en minuscules, et la fonction doit être appelée avec la même casse que le nom de la fonction.

Appeler une fonction avec des paramètres

Lors de l'appel d'une fonction, vous pouvez lui passer des valeurs, et ces valeurs sont appelées paramètres.

Ces paramètres peuvent être utilisés dans la fonction.

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

myFunction(argument1,argument2)

Lorsque vous déclarez la fonction, déclarez les paramètres comme variables :

function myFunction(var1,var2)
{
Code
}

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

Exemples

<p>Cliquez sur ce bouton pour appeler une fonction avec des paramètres.</p> <button onclick="myFunction('Harry Potter','Wizard')">Cliquez ici</button> <script> function myFunction(name,job){ alert("Bienvenue " + name + ", le " + job); } </script>

Essayez-le vous-même »

La fonction ci-dessus affichera une alerte « Bienvenue Harry Potter, le Wizard » lorsque le bouton sera cliqué.

Les fonctions sont très flexibles. Vous pouvez appeler la fonction avec différents paramètres, et elle donnera différents messages :

Exemples

<button onclick="myFunction('Harry Potter','Wizard')">Cliquez ici</button> <button onclick="myFunction('Bob','Builder')">Cliquez ici</button>

Essayez-le vous-même »

Selon le bouton sur lequel vous cliquez, l'exemple ci-dessus affichera une alerte « Bienvenue Harry Potter, le Wizard » ou « Bienvenue Bob, le Builder ».

Fonctions avec valeurs de retour

Parfois, nous voulons qu'une fonction renvoie une valeur à l'endroit qui l'a appelée.

Cela peut être fait en utilisant l'instruction return.

Lorsqu'on utilise une instruction return, la fonction arrête son 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 :JavaScript dans son ensemble ne cesse pas de s'exécuter ; seule la fonction s'arrête. JavaScript continuera d'exécuter le code à partir de l'endroit où la fonction a été appelée.

L'appel de fonction sera remplacé par la valeur 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 également utiliser la valeur de retour sans l'enregistrer dans une 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 faire dépendre la valeur de retour des paramètres passés à la fonction :

Exemples

Calculez le produit de deux nombres et renvoyez le résultat :

function myFunction(a,b) { return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3);

Le innerHTML de l'élément "demo" sera :

12

Essayez-le vous-même »

Vous pouvez également utiliser l'instruction return lorsque vous voulez simplement quitter la 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

Les variables déclarées à l'intérieur d'une fonction JavaScript (à l'aide de var) sontlocales, donc elles ne sont accessibles qu'à l'intérieur de la fonction. (La portée de la variable est locale.)

Vous pouvez utiliser des variables locales portant le même nom dans différentes fonctions, car seule la fonction qui a déclaré la variable peut reconnaître cette variable.

Les variables locales sont supprimées dès que la fonction est terminée.

Variables JavaScript globales

Les variables déclarées en dehors d'une fonction sont des variablesglobales, et tous les scripts et fonctions d'une page web peuvent y accéder.

Durée de vie des variables JavaScript

La durée de vie des variables JavaScript commence lorsqu'elles sont déclarées.

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

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

Affecter des valeurs à des variables JavaScript non déclarées

Si vous affectez une valeur à une variable qui n'a pas été déclarée, la variable devient automatiquement une propriété de window.

Cette instruction :

carname="Volvo";

déclarera une propriété de window appelée carname.

En mode non strict, une variable globale créée en affectant une valeur à une variable non déclarée est une propriété configurable de l'objet global et peut être supprimée.

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
Autres extensions