SELFHTML/Aides à la navigation JavaScript/DOM Éléments du langage JavaScript |
Fonctions | |
Définir une fonction |
|
Avec l'aide de fonctions, vous pouvez programmer vos propres procédures JavaScript autonomes que vous pouvez ensuite exécuter par l'appel de la fonction. Pour cela vous pouvez spécifier lors de quel événement la fonction doit être appelée et son code programme exécuté (par exemple lorsque l'utilisateur clique un bouton). Le code JavaScript qui ne se trouve pas dans une fonction est exécuté immédiatement par le navigateur WWW à la lecture du fichier!
Une fonction est un bloc d'instructions. Vous pouvez définir vos propres fonctions dans un passage JavaScript ou dans un fichier séparé. Aux endroits autorisés, par exemple dans le repère d'ouverture HTML <body...>
et <a href...>
, ou dans un repère de formulaire comme <input...>
, vous pouvez alors appeler de telles fonctions définies vous-mêmes à l'aide d'un gestionnaire d'événement. Ou bien vous appelez une fonction depuis une autre fonction.
function nombrepremier(nombre) { var nombrelimite = nombre / 2; var Check = 1; for(var i = 2; i <= nombrelimite; i++) if(nombre % i == 0) { alert(nombre + " n'est pas un nombre premier parce qu'il est divisible par " + i); Check = 0; } if(Check == 1) alert(nombre + " est un nombre premier!"); } //--> </script> |
Avec le mot clé function
vous introduisez la définition d'une fonction. Derrière suit, séparé par un espace, un nom de fonction que vous choisissez - dans l'exemple: nombrepremier
. Affectez un nom de fonction qui décrit à peu près ce que la fonction fait. Respectez ce faisant les règles pour l' attribution de noms.
Juste derrière le nom de la fonction s'ouvre une parenthèse. Si la fonction ne doit pas attendre de paramètres, la parenthèse doit être refermée aussitôt. Si la fonction doit recevoir des paramètres, notez entre les parenthèses le nom des paramètres. Les noms des paramètres peuvent être librement choisis. Pour les noms de paramètres s'appliquent les mêmes règles que pour les noms de fonction. Plusieurs paramètres doivent être séparés par des virgules. Dans l'exemple ci-dessus, la fonction nombrepremier
attend un paramètre nombre
.
Tout le contenu de la fonction doit être placé dans des parenthèses accolade {
et
}
(touches Alt 123 et Alt 125). N'omettez jamais ces parenthèses!
Les instructions dans la fonction peuvent être de natures très diverses. Vous pouvez par exemple y manipuler des objets traiter et modifier les paramètres transmis, faire des calculs etc... Vous pouvez également appeler, à l'intérieur de fonctions, d'autres fonctions. Quelles instructions se trouvent dans une fonction, dépend de ce que doit faire la fonction. Dans l'exemple ci-dessus il est recherché si le nombre transmis est un nombre premier. Si ce n'est pas un nombre premier, une annonce correspondante apparaîtra pour chaque nombre par lequel il est divisible. Si c'est un nombre premier, une annonce signalera qu'il s'agit d'un nombre premier.
Vous pouvez appeler une fonction définie vous-même pour exécuter le code JavaScript qu'elle contient.
<html> <head> <title>Test</title> <script type="text/javascript"> <!-- function nombrepremier(nombre) { var nombrelimite = nombre / 2; var Check = 1; for(var i = 2; i <= nombrelimite; i++) if(nombre % i == 0) { alert(nombre + " n'est pas un nombre premier parce qu'il est divisible par " + i); Check = 0; } if(Check == 1) alert(nombre + " est un nombre premier!"); } //--> </script> </head> <body> <form name="formnombrepremier" action=""> <p>Entrez un chiffre il va être vérifié s'il est premier:</p> <input type="text" name="nombre_saisi"> <input type="button" value="Est-ce un nombre premier" onClick="nombrepremier(document.formnombrepremier.nombre_saisi.value)"> </form> </body> </html> |
L'exemple ci-dessus montre un fichier HTML complet où un passage JavaScript est défini. La fonction nombrepremier()
y est définie. Dans le corps du fichier HTML se trouve un formulaire avec un champ de saisie et un bouton. Dans le champ de saisie, l'utilisateur peut entrer un chiffre. S'il clique sur le bouton, la fonction JavaScript est appelée et recherche si le nombre entré est un nombre entier. Pour cela, le bouton contient le gestionnaire d'événement onClick=
(= lors d'un cliquement). Derrière, la fonction JavaScript est appelée avec le nombre entré.
Vous appelez la fonction avec le nom de la fonction. Derrière une parenthèse est ouverte. Si la fonction n'attend pas de paramètre, refermez tout de suite la parenthèse. Si la fonction attend un paramètre vous devez transmettre pour chaque paramètre une valeur permise. Dans l'exemple, la fonction attend un paramètre. Quand vous transmettez plusieurs paramètres, séparez les par des virgules.
Une fonction peut renvoyer une valeur recherchée à l'instance qui l'appelle.
<html> <head> <title>Test</title> <script type="text/javascript"> <!-- function montant_brut(montant_net, taux) { var resultat = montant_net * (1 + (taux / 100)); return resultat; } function donne_brut(montant, pourcentage) { var valeur = montant_brut(montant, pourcentage); document.form_brut.champ_resultat.value = valeur; } //--> </script> </head> <body> <form name="form_brut" action=""> <pre> Montant net: <input type="text" name="saisie_net"> Pourcentage: <input type="text" name="saisie_pourcent"></pre> <p>Utiliser le point pour les décimales!</p> <input type="button" value="Calculer le brut" onClick="donne_brut(document.form_brut.saisie_net.value,document.form_brut.saisie_pourcent.value)"> <pre> resultat: <input type="text" name="champ_resultat"></pre> </form> </body> </html> |
L'exemple ci-dessus montre un fichier HTML complet dans l'entête duquel est défini un passage JavaScript. Dans celui-ci sont définies deux fonctions montant_brut(...)
et donne_brut(...)
. Dans le corps du fichier HTML se trouve un formulaire avec un champ de saisie pour le montant net et un autre pour le pourcentage. Quand l'utilisateur clique sur le bouton défini au dessous, la fonction donne_brut(...)
est appelée. Elle appelle elle même la fonction montant_brut(...)
.
Étant donné que la fonction montant_brut(...)
renvoie le résultat calculé à l'instance qui l'a appelée, une variable nommée valeur
est définie dans donne_brut(...)
. Cette variable sauvegarde la valeur renvoyée . Le résultat sauvegardé dans cette variable est écrit par la fonction dans un champ installé à cet effet dans le formulaire: le champ de saisie du nom de champ_resultat
.
Il existe quelques fonctions qui sont déjà intégrées dans JavaScript. Ces fonctions peuvent être appelées sans que vous ayez à les définir vous-même.
<html> <head> <title>Test</title> <script language="JavaScript" type="text/javascript"> <!-- function calcule(Operation) { var resultat = eval(Operation); alert("résultat: " + resultat); } //--> </script> </head> <body> <form name="formulaire"> <p>Entrez une opération (par exemple 8*5):</p> <input type="text" name="saisie"> <input type="button" value="OK" onClick="calcule(document.formulaire.saisie.value)"> </form> </body> </html> |
L'exemple ci-dessus montre un fichier HTML complet avec un passage JavaScript, dans lequel une fonction calcule()
est définie. Dans le corps du fichier HTML est noté un formulaire avec un champ de saisie. Dans le champ de saisie l'utilisateur peut entrer une opération, par exemple 1 + 1
ou bien (28.76 - 0.00001) * 7
. En cliquant sur le bouton, la fonction calcule()
est appelée. Elle attend comme paramètre une opération. C'est pour cela que le contenu du champ de saisie lui est transmis comme paramètre quand elle est appelée. La fonction calcule
se sert pour le calcul du résultat de la fonction prédéfinie extrêmement puissante eval()
(eval = evaluate = calculer). Celle-ci peut -entre autres - reconnaître des opérations comme telles et les exécuter. Le résultat du calcul dans l'exemple est sorti dans une fenêtre de message.
Une vue d'ensemble de toutes les fonctions prédéfinies JavaScript se trouve dans la partie fonctions indépendantes de l'objet..
Caractères de commande et notations particulières | |
Objets, propriétés et méthodes | |
SELFHTML/Aides à la navigation JavaScript/DOM Éléments du langage JavaScript |
© 2001 Stefan Münz / © 2003 Traduction Serge François, 13405@free.fr
selfhtml@fr.selfhtml.org