web:javascript:fondamentaux:fonctions

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:javascript:fondamentaux:fonctions [2021/06/25 15:25] – philweb:javascript:fondamentaux:fonctions [2021/08/11 10:56] (Version actuelle) – phil
Ligne 1: Ligne 1:
 +[[web:javascript|{{ :iconemaison.jpg?nolink&25|Accueil JavaScript}}]]
  
 +===== JavaScript - Les fonctions =====
 +
 +[Mise à jour le 25/6/2021]
 +
 +  * **Sources** et compléments sur **MDN Web Docs**
 +    * <html><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Functions" target="_blank">Fonctions</a></html> \\
 +
 +  * ** Lectures connexes**
 +    * Wikis WebPEM : [[:outils:vscode:web|"Préparer un projet de site Web avec l'IDE VSCode"]]
 +
 +==== 1. Introduction ====
 +Il existe deux grands types de fonctions en JavaScript : les fonctions **natives** ou **prédéfinies** (qui sont en fait des méthodes) qu'il suffit d'appeler et les fonctions **personnalisées** à créer.
 +
 +<note>Une fonction est un **ensemble de traitements réutilisables** effectués à partir de **paramètres** et renvoyant un** résultat**.</note>
 +
 +**Description**
 +<note tip>//typeRetour// **nomFonction**(//type<sub>1</sub>// param<sub>1</sub>,... ,//type<sub>n</sub> param<sub>n</sub>, [,//type// paramFacultatif=valeur]) \\ 
 +- //typeRetour// est le type de donnée renvoyé par la fonction. \\ 
 +- param<sub>1</sub>,... ,//type<sub>n</sub> sont les types des paramètres passés à la fonction. \\ 
 +- Lorsqu'un paramètre facultatif est utilisé, une valeur par défaut est appliquée.
 +</note> 
 +
 +// Exemple//
 +<code javascript>
 +Integer parseInt(String chaîne [, String base])
 +</code>
 +
 +==== 2. Les fonctions natives (built-in) ====
 +
 +  * **Ressource** : <html><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Functions#fonctions_pr%C3%A9d%C3%A9finies" target="_blank">Fonctions prédéfinies</a></html>
 +
 +<note>Les fonctions natives sont intégrées au langage.</note>
 +
 +// Exemple // : //Integer// **parseInt**(//String// chaîne [,//String// base])
 +
 +<code javascript *.js>
 +console.log(parseInt("150")); // Renvoie 150
 +console.log(parseInt("150.45")); // Renvoie 150
 +console.log(parseInt("150xxx")); // Renvoie 150
 +console.log(parseInt("xxx150")); // Renvoie NaN
 +console.log(parseInt("FF",16)); // Renvoie 255
 +</code>
 +
 +==== 3. Les fonctions personnalisées ====
 +
 +=== 3.1 Déclarer une fonction ===
 +  * **Méthode 1** : courante
 +
 +// Syntaxe //
 +
 +<code javascript *.js>
 +function nomFonction(param1, ... , paramN){
 +    // Instruction(s)
 +}
 +</code>
 +
 +  * **Méthode 2** : avec le constructeur //function//
 +
 +// Syntaxe //
 +
 +<code javascript *.js>
 +nomFonction = function(param1, ... , paramN){
 +    // Instruction(s)
 +}
 +</code>
 +
 +<note warning>Le nom d'une fonction ne recevant pas de paramètres est écrit avec des parenthèses soit : nomFonction().</note>
 +
 +=== 3.2 Renvoyer un résultat ===
 +<note important>Pour renvoyer un résultat, on utilise l'instruction //**return**// suivie de la valeur. //return// stoppe l'exécution de la fonction et peut être utilisé sans valeur.</note>
 +
 +// Exemple //
 +
 +<code javascript *.js>
 +// Calcul de la somme des valeurs de 1 à n
 +function Somme1aN(n) {
 +   var somme = 0;
 +   for (i = 0; i <= n; i++) {
 +      somme += i;
 +   }
 +   return somme;
 +}
 +</code>
 +
 +=== 3.3 Utiliser une fonction ===
 +
 +<code javascript *.js>
 +// Appel de la fonction ci-dessus
 +var n = 45;
 +var resultat = Somme1aN(n);
 +console.log("Somme=" + resultat + " pour n=" + n); // Affiche Somme=1035 pour n=45
 +</code>
 +
 +<note>Une fonction est souvent déclarée dans un fichier JavaScript externe. Son intégration dans la page web se fait avec la balise //<script>// et l'attribut //src//.</note>
 +
 +=== 3.4 Gérer les paramètres facultatifs ===
 +<note tip>Les paramètres facultatifs sont définis à la fin de la liste de paramètres, après tous les paramètres obligatoires. </note>
 +
 +// Exemple //
 +
 +<code javascript *.js>
 +// Le paramètre facultatif pluriel permet de gérer les exceptions
 +function getPluriel(nb, pluriel = "s") {
 +    return nb > 1 ? pluriel : "";
 +}
 +var nbChouette = 2, nbHibou = 3; nbGrandduc = 1;
 +console.log(nbChouette + " chouette" + getPluriel(nbChouette) + ", " + nbHibou
 ++ " hibou" + getPluriel(nbHibou, "x") + " et " + nbGrandduc + " Grand-duc" 
 ++ getPluriel(nbGrandduc) + " me regardaient fixement !!!");
 +
 +// Résultat dans la console : 2 chouettes, 3 hiboux et 1 Grand-duc me regardaient fixement !!!
 +</code>
 +
 +==== 4. Variables globales et variables locales ====
 +
 +voir [[web:javascript:fondamentaux:variables|Variables et constantes]]
 +
 +==== 5. Paramètres de fonctions ====
 +Les paramètres sont dits : \\ 
 +- **formels** (ou **arguments**) lorsqu'ils apparaissent au niveau de la définition d'une fonction (d'une méthode), par opposition aux paramètres \\
 +- **effectifs** qui sont listés dans un appel de fonction (méthode).
 +
 +<note tip>L'ensemble des paramètres passés à une fonction est contenu dans le tableau //**arguments[]**//, accessible à l'intérieur de la fonction.</note>
 +
 +// Exemple //
 +
 +<code javascript *.js>
 +
 +</code>
 +
 +==== 6. Fonctions anonymes ====
 +Les fonctions anonymes sont, comme leur nom l’indique, des fonctions qui ne vont pas posséder de nom. Généralement, on utilisera les fonctions anonymes lorsque le code de la fonction n’est appelé qu’à un endroit dans le script et n’est pas réutilisé.
 +
 +  * **Minuteur setInterval()**
 +<note>La fonction setInterval() attend deux paramètres: \\ 
 +- Le nom de la fonction a exécuter à intervalle régulier. \\
 +- Le délai en millisecondes de l'intervalle de répétition.
 +</note>
 +{{ :web:javascript:fondamentaux:compteur.png?nolink|}}
 +// Exemple //
 +<code javascript *.js>
 +<!DOCTYPE html>
 +<html>
 +
 +<head>
 +    <meta charset="UTF-8">
 +    <title>Compteur</title>
 +</head>
 +
 +<body>
 +    <p id="compteur">0</p>
 +    <script type="text/javascript">
 +        var nb = 0;
 +        setInterval(function () {
 +            nb++;
 +            document.getElementById("compteur").innerHTML = nb;
 +        }, 1000);
 +    </script>
 +</body>
 +</code>
 +
 +  * **Fonction auto-exécutée**
 +
 +// Syntaxe //
 +
 +<code javascript>
 +(function(param1, param2,...,paramN){
 +    // Traitements
 +})(p1, p2, ...,pN);
 +</code>
 +
 +<note tip>Cette syntaxe remplace l'écriture traditionnelle de déclaration de la fonction puis de son appel.</note>