Tutoriel JavaScript

JS ACCUEIL Présentation de JS JS Où aller Sortie JS Déclarations JS Syntaxe JS Commentaires JS Variables JS JS Let Const JS Opérateurs JS Arithmétique JS Affectation JS Types de données JS Fonctions JavaScript Objets JS Événements JS Chaînes JS Méthodes de chaîne JS Recherche de chaîne JS Modèles de chaîne JS Numéros JS Méthodes de nombre JS Tableaux JS Méthodes de tableau JS Tri de tableau JS Itération de tableau JS Const tableau JS Dates JS Formats de date JS Méthodes d'obtention de date JS Méthodes de définition de date JS JS Mathématiques JS Aléatoire Booléens JS Comparaisons JS Conditions JS Commutateur JS Boucle JS pour Boucle JS pour dans Boucle JS pour de Boucle JS pendant Pause JS Itérables JS Ensembles JS Cartes JS Type de JS Conversion de type JS JS au niveau du bit JS RegExp Erreurs JS Portée JS JS Levage Mode JS strict JS ce mot clé Fonction flèche JS Cours JS JSJSON Débogage JS Guide de style JS Meilleures pratiques JS Erreurs JS Performances JS Mots réservés JS

Versions JavaScript

Versions JavaScript JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historique JS

Objets JS

Définitions d'objet Propriétés de l'objet Méthodes d'objet Affichage d'objet Accesseurs d'objet Constructeurs d'objets Prototypes d'objets Itérables d'objet Ensembles d'objets Cartes d'objets Référence d'objet

Fonctions JavaScript

Définitions des fonctions Paramètres de fonction Appel de fonction Appel de fonction Fonction Appliquer Fermetures de fonction

Cours JS

Introduction de classe Héritage de classe Classe Statique

JS asynchrone

Rappels JS JS asynchrone JS promet JS asynchrone/en attente

JS HTML DOM

Introduction DOM Méthodes DOM Documents DOM Éléments DOM HTML DOM Formulaires DOM DOM CSS Animations DOM Événements DOM Écouteur d'événements DOM Navigation DOM Nœuds DOM Collections DOM Listes de nœuds DOM

Nomenclature du navigateur JS

Fenêtre JS Écran JavaScript Emplacement JS Historique JS Navigateur JS Alerte contextuelle JS Calendrier JS Cookies JavaScript

API Web JS

Présentation de l'API Web API des formulaires Web API d'historique Web API de stockage Web API de travail Web API de récupération Web API de géolocalisation Web

JS AJAX

Introduction à AJAX AJAX XMLHttp Requête AJAX Réponse AJAX Fichier XML AJAX PHP AJAX ASP AJAX Base de données AJAX Applications AJAX Exemples AJAX

JSJSON

Présentation JSON Syntaxe JSON JSON contre XML Types de données JSON Analyse JSON Chaîne JSON Objets JSON Tableaux JSON Serveur JSON JSON PHP HTML JSON JSON JSONP

JS contre jQuery

Sélecteurs jQuery jQuery HTML jQuery CSS jQuery DOM

Graphiques JS

Graphiques JS Canevas JS JS Complot JS Chart.js Graphique Google JS JS D3.js

Exemples JS

Exemples JS JS HTML DOM Entrée HTML JS Objets HTML JS Événements HTML JS Navigateur JS Éditeur JavaScript Exercices JS Questionnaire JS Certificat JS

Références JavaScript

Objets JavaScript Objets DOM HTML


Fonctions JavaScript


Une fonction JavaScript est un bloc de code conçu pour effectuer une tâche particulière.

Une fonction JavaScript est exécutée lorsque "quelque chose" l'invoque (l'appelle).


Exemple

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

Syntaxe de la fonction JavaScript

Une fonction JavaScript est définie avec le mot- functionclé, suivi d'un nom , suivi de parenthèses () .

Les noms de fonction peuvent contenir des lettres, des chiffres, des traits de soulignement et des signes dollar (mêmes règles que les variables).

Les parenthèses peuvent inclure des noms de paramètres séparés par des virgules :
( paramètre1, paramètre2, ... )

Le code à exécuter, par la fonction, est placé entre accolades : {}

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

Les paramètres de la fonction sont répertoriés entre parenthèses () dans la définition de la fonction.

Les arguments de la fonction sont les valeurs reçues par la fonction lorsqu'elle est invoquée.

A l'intérieur de la fonction, les arguments (les paramètres) se comportent comme des variables locales.

Une fonction est sensiblement la même qu'une procédure ou un sous-programme, dans d'autres langages de programmation.


Appel de fonction

Le code à l'intérieur de la fonction s'exécutera lorsque "quelque chose" invoque (appelle) la fonction :

  • Lorsqu'un événement se produit (lorsqu'un utilisateur clique sur un bouton)
  • Lorsqu'il est invoqué (appelé) à partir du code JavaScript
  • Automatiquement (auto-invoqué)

Vous en apprendrez beaucoup plus sur l'invocation de fonction plus loin dans ce didacticiel.



Retour de fonction

Lorsque JavaScript atteint une returninstruction, la fonction s'arrête.

Si la fonction a été appelée à partir d'une instruction, JavaScript "reviendra" pour exécuter le code après l'instruction d'appel.

Les fonctions calculent souvent une valeur de retour . La valeur de retour est "renvoyée" à "l'appelant":

Exemple

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

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

Le résultat en x sera :

12

Pourquoi Fonctions ?

Vous pouvez réutiliser le code : définissez le code une fois et réutilisez-le plusieurs fois.

Vous pouvez utiliser le même code plusieurs fois avec des arguments différents, pour produire des résultats différents.

Exemple

Convertir Fahrenheit en Celsius :

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

L'opérateur () appelle la fonction

En utilisant l'exemple ci-dessus, toCelsiusfait référence à l'objet fonction et toCelsius()fait référence au résultat de la fonction.

L'accès à une fonction sans () renverra l'objet de la fonction au lieu du résultat de la fonction.

Exemple

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Fonctions utilisées comme valeurs variables

Les fonctions peuvent être utilisées de la même manière que vous utilisez des variables, dans tous les types de formules, d'affectations et de calculs.

Exemple

Au lieu d'utiliser une variable pour stocker la valeur de retour d'une fonction :

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Vous pouvez utiliser la fonction directement, comme valeur de variable :

let text = "The temperature is " + toCelsius(77) + " Celsius";

Vous en apprendrez beaucoup plus sur les fonctions plus tard dans ce tutoriel.


Variables locales

Les variables déclarées dans une fonction JavaScript deviennent LOCALES à la fonction.

Les variables locales ne sont accessibles qu'à partir de la fonction.

Exemple

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Étant donné que les variables locales ne sont reconnues qu'à l'intérieur de leurs fonctions, les variables portant le même nom peuvent être utilisées dans différentes fonctions.

Les variables locales sont créées lorsqu'une fonction démarre et supprimées lorsque la fonction est terminée.


Testez-vous avec des exercices

Exercer:

Exécutez la fonction nommée myFunction.

function myFunction() {
  alert("Hello World!");
}
;