JavaScript - Fonctions

Une fonction est un groupe de code réutilisable qui peut être appelé n'importe où dans votre programme. Cela élimine le besoin d'écrire le même code encore et encore. Il aide les programmeurs à écrire des codes modulaires. Les fonctions permettent à un programmeur de diviser un gros programme en un certain nombre de fonctions petites et gérables.

Comme tout autre langage de programmation avancé, JavaScript prend également en charge toutes les fonctionnalités nécessaires pour écrire du code modulaire à l'aide de fonctions. Vous devez avoir vu des fonctions commealert() et write()dans les chapitres précédents. Nous utilisions ces fonctions encore et encore, mais elles n'avaient été écrites dans le noyau JavaScript qu'une seule fois.

JavaScript nous permet également d'écrire nos propres fonctions. Cette section explique comment écrire vos propres fonctions en JavaScript.

Définition de fonction

Avant d'utiliser une fonction, nous devons la définir. La manière la plus courante de définir une fonction en JavaScript consiste à utiliserfunction mot-clé, suivi d'un nom de fonction unique, d'une liste de paramètres (qui peuvent être vides) et d'un bloc d'instructions entouré d'accolades.

Syntaxe

La syntaxe de base est présentée ici.

<script type = "text/javascript">
   <!--
      function functionname(parameter-list) {
         statements
      }
   //-->
</script>

Exemple

Essayez l'exemple suivant. Il définit une fonction appelée sayHello qui ne prend aucun paramètre -

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

Appeler une fonction

Pour appeler une fonction quelque part plus tard dans le script, vous devez simplement écrire le nom de cette fonction comme indiqué dans le code suivant.

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>      
      <p>Use different text in write method and then try...</p>
   </body>
</html>

Production

Paramètres de fonction

Jusqu'à présent, nous avons vu des fonctions sans paramètres. Mais il existe une possibilité de passer différents paramètres lors de l'appel d'une fonction. Ces paramètres passés peuvent être capturés dans la fonction et toute manipulation peut être effectuée sur ces paramètres. Une fonction peut prendre plusieurs paramètres séparés par une virgule.

Exemple

Essayez l'exemple suivant. Nous avons modifié notresayHellofonction ici. Maintenant, il faut deux paramètres.

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
      </form>      
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

Production

La déclaration de retour

Une fonction JavaScript peut avoir une option returndéclaration. Ceci est obligatoire si vous souhaitez renvoyer une valeur à partir d'une fonction. Cette instruction doit être la dernière instruction d'une fonction.

Par exemple, vous pouvez passer deux nombres dans une fonction, puis vous pouvez vous attendre à ce que la fonction renvoie leur multiplication dans votre programme appelant.

Exemple

Essayez l'exemple suivant. Il définit une fonction qui prend deux paramètres et les concatène avant de renvoyer la résultante dans le programme appelant.

<html>
   <head>  
      <script type = "text/javascript">
         function concatenate(first, last) {
            var full;
            full = first + last;
            return full;
         }
         function secondFunction() {
            var result;
            result = concatenate('Zara', 'Ali');
            document.write (result );
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "secondFunction()" value = "Call Function">
      </form>      
      <p>Use different parameters inside the function and then try...</p>  
  </body>
</html>

Production

Il y a beaucoup à apprendre sur les fonctions JavaScript, mais nous avons couvert les concepts les plus importants dans ce tutoriel.