Les fonctions en Javascript
Les fonctions en Javascript
-
Objectif
- Connaitre les fonctions en JavaScript
-
Définition
- Une fonction est un groupe de ligne de code de programmation, écrites par le concepteur et destinées à exécuter une tâche bien spécifique.
- On appelle fonction un sous-programme qui permet d’effectuer un ensemble d’instructions par simple appel de la fonction dans le corps du programme principal.
- Une fonction est un groupe de ligne(s) de code de programmation destiné à exécuter une tâche bien spécifique et que l’on pourra, si besoin est, utiliser à plusieurs reprises.
- En JavaScript, il existe deux types de fonctions :
- Les fonctions prédéfinies en JavaScript; on les appelle « méthodes ». Elles sont associées à un objet bien particulier comme c’était le cas de la méthode Alert() avec l’objet window.
- Les fonctions déclarées par le programmeur selon les besoins de l’application.
-
Les trois façons de déclarer une fonction
- En Javascript, les fonctions sont des objets du type
Function. On pourra les utiliser comme dans tous les autres langages de programmation, mais on pourra également les utiliser comme des objets - Une fonction peut être définie de trois façons différentes:
- déclaration à l’aide d’une instruction
- La manière traditionnelle de déclarer une fonction est d’utiliser le mot-clé
function, suivi par : - Le nom de la fonction.
- Une liste d’arguments à passer à la fonction, entre parenthèses et séparés par des virgules.
- Les instructions JavaScript définissant la fonction, entre accolades, { }.
- déclaration dans une expression
- Une manière moins traditionnelle consiste à utiliser le mot-clé
functionau sein d’une expression, comme ici dans une expression qui utilise l’opérateur d’affectation (on assigne à la variable moyenne un objet du typeFunction) - déclaration comme un objet
- On peut également définir une fonction en tant qu’objet du type Function
function moyenne(a1, a2)
{
return (a1 + a2) / 2;
}
var moyenne = function (a1, a2)
{
return (a1 + a2) / 2;
};var moyenne = new Function("a1", "a2", "return (a1 + a2) / 2;");Syntaxe
function nom_de_la_fonction(arguments)
{... code des instructions ...
}
Il est donc prudent ou judicieux de placer toutes les déclarations de fonction dans l’en-tête de votre page c-à-d dans la balise <HEAD> … </HEAD>. Vous serez ainsi assuré que vos fonctions seront déjà prises en compte par l’interpréteur avant qu’elles soient appelées dans le <BODY>.
-
function
- Pour déclarer ou définir une fonction, on utilise le mot (réservé) function.
- Une fonction est introduite par function
- le mot clé function est suivi du nom que l’on donne à la fonction
-
Nom de la fonction
- Le nom de la fonction suit les mêmes règles que les noms de variables :
- Le nom doit commencer par une lettre
- Un nom de fonction peut comporter des lettres, des chiffres et les caractères _ et &.
- Les espaces ne sont pas autorisés!
- Le nom de la fonction, comme celui des variables est sensible à la casse (différenciation entre les minuscules et majuscules)
-
Les { et }
- contiennent l’ensemble des instructions de la fonction.
- Chaque instruction donnée est suivie d’un point virgule.
-
Les arguments
- La mention des arguments est facultative mais dans ce cas, les parenthèses doivent rester. C’est d’ailleurs grâce à ces parenthèses que l’interpréteur JavaScript distingue les variables des fonctions.
- Lorsqu’une accolade est ouverte, elle doit impérativement, sous peine de message d’erreur, être refermée.
- La mention des arguments est facultative mais dans ce cas les parenthèses doivent rester.
- Prenez la bonne habitude de fermer directement vos accolades et d’écrire le code entre elles.
Exemple :
<head>
<script>
function message ()
{
document.write("Bienvenue");
}
</script>
</head>Instructions de retour JavaScript
- Lorsqu’une instruction
returnest appelée dans une fonction, l’exécution de cette fonction est arrêtée. Si spécifié, une valeur donnée est renvoyée à l’appelant de la fonction. Si l’expression est omise,undefinedest renvoyée à la place. - Les fonctions peuvent renvoyer:
- Valeurs primitives (chaîne, nombre, booléen, etc.)
- Types d’objets (tableaux, objets, fonctions, etc.)
-
Exemples
- La fonction suivante renvoie le produit de ses arguments, arg1 et arg2 .
function myfunction(arg1, arg2){
var r;
r = arg1 * arg2;
return(r);
}return, la valeur peut être affectée à une variable à l’aide de l’opérateur d’affectation (=). function square(x) {
return x * x;
}
var squared2 = square(2); // 4return, la fonction retourne automatiquement undefined.return. Lorsque le résultat de l’appel de la fonction est affecté à une variable, la variable a une valeur de undefined.function square(x) {
let y = x * x;
}
var squared2 = square(2); // undefinedL’appel d’une fonction
- Pour appeler la fonction, il faut bien sûr qu’elle ait été défi nie auparavant. Par conséquent, il est conseillé de placer la défi nition de la fonction dans l’entête de la page HTML, et les appels dans le corps de cette page.
- L’appel d’une fonction se fait par son identifiant suivi impérativement de parenthèses, lesquelles peuvent contenir les arguments à faire passer.
- Peut avoir lieu à n’importe quel endroit de la page :
- dans d’autres fonctions,
- dans le corps de la page.
- Utilisation de : nom_fonction([param1, … ]);
<HTML>
<HEAD> <SCRIPT>// déclaration de fonction
function bonjour(nom) {
document.write("Bonjour ", nom);}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT> bonjour("M. Dupont");</SCRIPT>
</BODY>
</HTML>
Exemple:
<HTML>
<HEAD> <SCRIPT>// déclaration de fonctions
function volumeSphere(rayon)
{ return 4/3*Math.PI*Math.pow(rayon,3); }
function calculerPrix(PrixUnitaire, NbArticles)
{ return PrixUnitaire* NbArticles; }
</SCRIPT>
</HEAD>
<BODY> <SCRIPT>// appels des fonctions
document.write("Tu dois payer ",
calculerPrix(150,4)," Euros.<BR>");
document.write("Le volume d’une sphère de rayon 1 est ", volumeSphere(1),"<BR>" );
</SCRIPT>
</BODY>
</HTML>
Par défaut, une fonction retourne undefined, sauf si, bien sûr, une valeur est retournée de manière explicite grâce à l’opérateur return.
Activités
- Réalisez une fonction max2 qui a pour résultat le plus grand des deux nombres a et b(ne sont pas égaux) qui lui sont passés en paramètre utilisez les conditions if-else dans une première variante et les conditions ternaire dans une deuxième variante. N’utilisez pas la fonction prédéfinie Math.max()
-
- Réalisez une fonction max3 qui a pour résultat le plus grand des 3 nombres qui lui sont passés en paramètre.
- Vous écrirez deux versions de cette fonction (max3 et max3bis) : l’une utilisant la structure
ifet l’autre sans utiliser if mais à l’aide de la fonction Math.max().
-
- Créez une page html5 « validForm.html » avec un formulaire qui contient deux champs de texte et un bouton submit
- Écrivez un script « validForm.js » qui va valider le formulaire. Si l’un des champs est vide, un message d’erreur est affiché sous le champ et le formulaire n’est pas envoyé. Si les deux champs sont remplis, le formulaire peut être envoyé.
- Écrivez un style « validForm.css » qui a pour rôle la mise enforme de la page « validForm.html«
//Variante01
function max2v1(a, b) {
if (b > a) {
return b;
} else {
return a;
}
}
//Variante02
<li>Mais c'est plus court avec une condition ternaire :</li>
function max2v2(a, b) {
return (b > a) ? b : a;
}function max3(a, b, c) {
if (b > a && b> c) {
return b;
} else if (a> b && a> c) {
return a;
} else{
return c;
}
}
console.log(max3(14,18, 13));
document.write(max2(14,18 ,13));
function max3bis(a, b, c) {
return Math.max(a,b,c);
}
console.log(max3bis(14,18 ,13));
document.write(max3bis(14,18 ,13));