JavaScript - Funzioni

Una funzione è un gruppo di codice riutilizzabile che può essere chiamato ovunque nel programma. Ciò elimina la necessità di scrivere ripetutamente lo stesso codice. Aiuta i programmatori a scrivere codici modulari. Le funzioni consentono a un programmatore di dividere un grande programma in un numero di funzioni piccole e gestibili.

Come qualsiasi altro linguaggio di programmazione avanzato, JavaScript supporta anche tutte le funzionalità necessarie per scrivere codice modulare utilizzando le funzioni. Devi aver visto funzioni comealert() e write()nei capitoli precedenti. Stavamo usando queste funzioni ancora e ancora, ma erano state scritte in JavaScript principale solo una volta.

JavaScript ci permette di scrivere anche le nostre funzioni. Questa sezione spiega come scrivere le proprie funzioni in JavaScript.

Definizione di funzione

Prima di usare una funzione, dobbiamo definirla. Il modo più comune per definire una funzione in JavaScript è utilizzare ilfunction parola chiave, seguita da un nome di funzione univoco, un elenco di parametri (che potrebbe essere vuoto) e un blocco di istruzioni racchiuso tra parentesi graffe.

Sintassi

La sintassi di base è mostrata qui.

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

Esempio

Prova il seguente esempio. Definisce una funzione chiamata sayHello che non accetta parametri -

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

Chiamare una funzione

Per richiamare una funzione in un punto successivo dello script, è sufficiente scrivere il nome di quella funzione come mostrato nel codice seguente.

<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>

Produzione

Parametri di funzione

Finora abbiamo visto funzioni senza parametri. Ma c'è la possibilità di passare parametri diversi durante la chiamata a una funzione. Questi parametri passati possono essere catturati all'interno della funzione e qualsiasi manipolazione può essere eseguita su quei parametri. Una funzione può accettare più parametri separati da virgola.

Esempio

Prova il seguente esempio. Abbiamo modificato il nostrosayHellofunzione qui. Ora ci vogliono due parametri.

<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>

Produzione

La dichiarazione di ritorno

Una funzione JavaScript può avere un'opzione returndichiarazione. Ciò è necessario se si desidera restituire un valore da una funzione. Questa istruzione dovrebbe essere l'ultima istruzione in una funzione.

Ad esempio, puoi passare due numeri in una funzione e quindi puoi aspettarti che la funzione restituisca la loro moltiplicazione nel programma chiamante.

Esempio

Prova il seguente esempio. Definisce una funzione che accetta due parametri e li concatena prima di restituire la risultante nel programma chiamante.

<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>

Produzione

C'è molto da imparare sulle funzioni JavaScript, tuttavia abbiamo trattato i concetti più importanti in questo tutorial.