Présentation des fonctions JavaScript

JavaScriptJavaScriptBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Bienvenue dans la documentation JavaScript! Ce laboratoire vous présentera les fonctions.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("Browser Object Model") subgraph Lab Skills javascript/variables -.-> lab-106902{{"Présentation des fonctions JavaScript"}} javascript/data_types -.-> lab-106902{{"Présentation des fonctions JavaScript"}} javascript/arith_ops -.-> lab-106902{{"Présentation des fonctions JavaScript"}} javascript/functions -.-> lab-106902{{"Présentation des fonctions JavaScript"}} javascript/dom_select -.-> lab-106902{{"Présentation des fonctions JavaScript"}} javascript/bom -.-> lab-106902{{"Présentation des fonctions JavaScript"}} end

Fonctions

Le fichier index.html a déjà été fourni dans la machine virtuelle.

Les fonctions sont un moyen de regrouper des fonctionnalités que vous souhaitez réutiliser. Il est possible de définir un bloc de code comme une fonction qui s'exécute lorsque vous appelez le nom de la fonction dans votre code. C'est une bonne alternative au fait d'écrire le même code à plusieurs reprises. Vous avez déjà vu quelques utilisations de fonctions.

Par exemple :

let myVariable = document.querySelector("h1");
alert("hello!");

Ces fonctions, document.querySelector et alert, sont intégrées au navigateur.

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Si vous voyez quelque chose qui ressemble à un nom de variable, mais qui est suivi de parenthèses — () — il s'agit probablement d'une fonction. Les fonctions prennent souvent des arguments : des morceaux de données dont elles ont besoin pour faire leur travail. Les arguments se placent à l'intérieur des parenthèses, séparés par des virgules s'il y a plusieurs arguments.

Par exemple, la fonction alert() fait apparaître une boîte de dialogue dans la fenêtre du navigateur, mais nous devons lui fournir une chaîne de caractères en tant qu'argument pour dire à la fonction quel message afficher.

Vous pouvez également définir vos propres fonctions.

Dans l'exemple suivant, nous créons une fonction simple qui prend deux nombres en arguments et les multiplie :

Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

Essayez d'exécuter ceci dans la console ; puis testez avec plusieurs arguments. Par exemple :

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

Note : L'instruction return indique au navigateur de renvoyer la variable result en dehors de la fonction afin qu'elle soit disponible pour être utilisée. Cela est nécessaire car les variables définies à l'intérieur de fonctions ne sont disponibles que à l'intérieur de ces fonctions. Cela s'appelle la portée des variables. (Lisez-en plus sur la portée des variables.)

Sommaire

Félicitations! Vous avez terminé le laboratoire sur les Fonctions. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.