Guida Javascript Base: #3 Le Funzioni

By Andrea Marchetti
@marchetti_design

Le funzioni in javascript e nei linguaggi di programmazione in generale sono porzioni di codice che svolgono una o più azioni.
Partiamo dalla nostra pagina html base:



<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

		<title>Document</title>

		<style>

			body{font-family: arial;padding:40px; margin:0; background: #eee; color:#333}

			.subtitle{color:#999; font-size: 20px}

		</style>

</head>

<body>

	<h1>Javascript</h1>

	<p class="subtitle">Tutorial Base</p>

	<p>Introduzione a javascript</p>
	<script>

		//codice javascript

	</script>
</body>

</html>

1) Sintassi

Andiamo a vedere la sintassi di una funzione:



<script>

	function helloWord(){

		alert("Ciao");

	}

</script>

Con questa sintassi crediamo una funzione che visualizza un messaggio con scritto ciao. Se salviamo e apriamo la nostra pagina html non vedremo però nessun messaggio, questo perché una funzione dopo essere stata creata deve essere invocata.



<script>

	function helloWord(){

		alert("Ciao");

	}
	helloWord(); // invocazione funzione

</script>

Con hellWorld(); invochiamo la funzione, ora ci apparirà il messaggio nell’alert.

Le funzioni possono essere invocate più volte:



<script>

	function helloWord(){

		alert("Ciao");

	}
	helloWord(); // invocazione funzione

	helloWord(); // invocazione funzione

</script>

Il risultato di questo codice è che ci appariranno due messaggi ciao uno dopo l’altro.

2) Argomenti

Una aspetto estremamente utile delle funzioni è che possiamo passare dei parametri (argomenti) all’interno della funzione.



<script>

	function helloWord(nome, cognome){

		alert("Ciao " + nome + " " + cognome );

	}
	helloWord("Steph","Curry"); // invocazione funzione

</script>

Questa funzione prende i due valori (contenuti nell’invocazione) e li passa all’interno della funzione utilizzandoli nel messaggio che appare a video.
Il primo valore è assegnato al primo argomento “nome”, il secondo valore al secondo argomento “cognome”.

Questo logica di funzioni che accettano argomenti è intelligente e rende il codice riusabile.



<script>

	function helloWord(nome, cognome){

		alert("Ciao " + nome + " " + cognome );

	}
	helloWord("Steph","Curry"); // invocazione funzione
	helloWord("Russel","Westbrook"); // invocazione funzione
</script>

Dopo il primo alert ne appare un altro con il secondo nome passato nelle funzione.

3) Return

Le funzioni possono “ritornare” tramite return dei valori o dei dati, vediamo subito un esempio:



<script>

	function somma(primoNumero, secondoNumero){

		return primoNumero + secondoNumero;

	}
	var risultatoSomma = somma(1,5); // invocazione funzione
	alert(risultatoSomma);

</script>

La funzione somma accetta due argomenti primoNumero e secondoNumero (i due numeri da sommare). Al suo interno la funzione restituisce grazie a return primoNumero + secondoNumero il valore della somma dei due numeri.

Questo valore viene assegnato a una variabile risultatoSomma e successivamente visualizzato in un alert (esterno alla funzione).

Se pensate a questo meccanismo più in grande focalizzate buona parte della logica delle funzioni.
A una funzione vengono passati dei dati, con questi dati la funzione fa più azioni e ritorna “return” un risultato che può essere utilizzato per fare altre operazioni.

Il codice che viene dopo il comando return non viene mai eseguito, la funzione termina con il comando return.



function somma(primoNumero, secondoNumero){

	return primoNumero + secondoNumero;
	// codice che non viene eseguito

}

4) Return Multipli

Si possono avere return multipli da una funzione, per esempio:



<script>

	function maggioreEta(anni){

		if(anni >= 18){

			return "Sei maggiorenne";

		} else {

			return "Sei minorenne";

		}

	}
	alert(maggioreEta(18)); // invocazione di funzione direttamente dentro un alert

</script>

Questa funzione a due ritorni che vengono gestiti da un if/else se l’età passata nella funzione è >= 18 viene mostrato il messaggio sei maggiorenne, altrimenti viene mostrato il messaggio sei minorenne.

Da notare che l’invocazione della funzione viene fatta direttamente dentro l’alert utilizzando meno codice rispetto l’esempio precedente.