Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente Prochaine révisionLes deux révisions suivantes | ||
web:javascript:fondamentaux:fonctions [2021/06/25 16:03] – [3. Les fonctions personnalisées] phil | web:javascript:fondamentaux:fonctions [2021/08/11 10:32] – phil | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | [[web: | ||
+ | ===== Les fonctions ===== | ||
+ | |||
+ | [Mise à jour le 25/6/2021] | ||
+ | |||
+ | * **Sources** et compléments sur **MDN Web Docs** | ||
+ | * < | ||
+ | |||
+ | * ** Lectures connexes** | ||
+ | * Wikis WebPEM : [[: | ||
+ | |||
+ | ==== 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' | ||
+ | |||
+ | < | ||
+ | |||
+ | **Description** | ||
+ | <note tip>// | ||
+ | - // | ||
+ | - param< | ||
+ | - Lorsqu' | ||
+ | </ | ||
+ | |||
+ | // Exemple// | ||
+ | <code javascript> | ||
+ | Integer parseInt(String chaîne [, String base]) | ||
+ | </ | ||
+ | |||
+ | ==== 2. Les fonctions natives (built-in) ==== | ||
+ | |||
+ | * **Ressource** : < | ||
+ | |||
+ | < | ||
+ | |||
+ | // Exemple // : //Integer// **parseInt**(// | ||
+ | |||
+ | <code javascript *.js> | ||
+ | console.log(parseInt(" | ||
+ | console.log(parseInt(" | ||
+ | console.log(parseInt(" | ||
+ | console.log(parseInt(" | ||
+ | console.log(parseInt(" | ||
+ | </ | ||
+ | |||
+ | ==== 3. Les fonctions personnalisées ==== | ||
+ | |||
+ | === 3.1 Déclarer une fonction === | ||
+ | * **Méthode 1** : courante | ||
+ | |||
+ | // Syntaxe // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | function nomFonction(param1, | ||
+ | // Instruction(s) | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * **Méthode 2** : avec le constructeur // | ||
+ | |||
+ | // Syntaxe // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | nomFonction = function(param1, | ||
+ | // Instruction(s) | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <note warning> | ||
+ | |||
+ | === 3.2 Renvoyer un résultat === | ||
+ | <note important> | ||
+ | |||
+ | // 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; | ||
+ | } | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | === 3.3 Utiliser une fonction === | ||
+ | |||
+ | <code javascript *.js> | ||
+ | // Appel de la fonction ci-dessus | ||
+ | var n = 45; | ||
+ | var resultat = Somme1aN(n); | ||
+ | console.log(" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | === 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, | ||
+ | |||
+ | // Exemple // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | // Le paramètre facultatif pluriel permet de gérer les exceptions | ||
+ | function getPluriel(nb, | ||
+ | return nb > 1 ? pluriel : ""; | ||
+ | } | ||
+ | var nbChouette = 2, nbHibou = 3; nbGrandduc = 1; | ||
+ | console.log(nbChouette + " chouette" | ||
+ | + " hibou" + getPluriel(nbHibou, | ||
+ | + getPluriel(nbGrandduc) + " me regardaient fixement !!!"); | ||
+ | |||
+ | // Résultat dans la console : 2 chouettes, 3 hiboux et 1 Grand-duc me regardaient fixement !!! | ||
+ | </ | ||
+ | |||
+ | ==== 4. Variables globales et variables locales ==== | ||
+ | |||
+ | voir [[web: | ||
+ | |||
+ | ==== 5. Paramètres de fonctions ==== | ||
+ | Les paramètres sont dits : \\ | ||
+ | - **formels** (ou **arguments**) lorsqu' | ||
+ | - **effectifs** qui sont listés dans un appel de fonction (méthode). | ||
+ | |||
+ | <note tip> | ||
+ | |||
+ | // Exemple // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | |||
+ | </ | ||
+ | |||
+ | ==== 6. Fonctions anonymes ==== | ||
+ | Les fonctions anonymes sont, comme leur nom l’indique, | ||
+ | |||
+ | * **Minuteur setInterval()** | ||
+ | < | ||
+ | - Le nom de la fonction a exécuter à intervalle régulier. \\ | ||
+ | - Le délai en millisecondes de l' | ||
+ | </ | ||
+ | {{ : | ||
+ | // Exemple // | ||
+ | <code javascript *.js> | ||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <p id=" | ||
+ | <script type=" | ||
+ | var nb = 0; | ||
+ | setInterval(function () { | ||
+ | nb++; | ||
+ | document.getElementById(" | ||
+ | }, 1000); | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * **Fonction auto-exécutée** | ||
+ | |||
+ | // Syntaxe // | ||
+ | |||
+ | <code javascript> | ||
+ | (function(param1, | ||
+ | // Traitements | ||
+ | })(p1, p2, ...,pN); | ||
+ | </ | ||
+ | |||
+ | <note tip> |