[JAVASCRIPT] [keyword] function

Esempi

La keyword function dichiara una funzione (se questa appartiene ad un oggetto, si chiama metodo).
Una funzione è un insieme o contenitore di codice, che può accettare valori in ingresso (da passare nelle sue parentesi) nonché restituire valori attraverso la keyword return (v. dettagli).

L’invocazione della funzione

La funzione può essere invocata, cioè attivata, in diversi modi.
1) mediante la semplice indicazione del nome della funzione (v. esempio di sintassi n. 2) o della variabile cui sia stata assegnata (v. esempio di sintassi n. 3), comprensivo delle parentesi tonde:

<div id="div1"></div>
<div id="div1bis"></div>
<script>
function NomeFunzione1() {
 document.getElementById("div1").innerText= "testo inserito tramite funzione";
}
var NomeFunzione1bis = function () {
 document.getElementById("div1bis").innerText= " testo inserito tramite funzione";
}
NomeFunzione1();
NomeFunzione1bis();
</script>

2) mediante un attributo html di tipo evento:

<div id="div2"></div>
<script>
function NomeFunzione2() {
 document.getElementById("div2").innerText= "funzione invocata tramite evento";
}
</script>
<button onclick="NomeFunzione2()">attiva la funzione</button>

3) mediante l’autoinvocazione, che si ottiene aggiungendo le doppie parentesi tonde dopo la chiusura della parentesi graffa della funzione, previa assegnazione della funzione stessa ad una variabile oppure suo inserimento tra due parentesi tonde:

<div id="div3"></div>
<script>
(function NomeFunzione3() { //oppure: var autoInvocata= function NomeFunzione3() {
 document.getElementById("div3").innerText= "funzione auto-invocata";
}());
</script>

4) mediante l’invocazione da parte del metodo .setTimeout(), che attiva automaticamente la funzione dopo il lasso di tempo stabilito:

<div id="div4"></div>
<script>
setTimeout(NomeFunzione4, 5000);
function NomeFunzione4() {
 document.getElementById("div4").innerText= "funzione invocata tramite setTimeout";
}
</script>

I parametri della funzione

I termini all’interno delle parentesi tonde della funzione sono detti “parametri”, i cui corrispondenti valori sono detti “argomenti” (i due termini, tuttavia, sono comunemente utilizzati come sinonimi): pertanto, la definizione della funzione contiene i parametri; l’invocazione della stessa contiene gli argomenti. I parametri sono poi utilizzati all’interno della funzione come sue variabili.

<script>
function NomeFunzione5() {
 alert(5 * 2);
}
function NomeFunzione5Bis() {
 document.write("Testo aggiunto tramite funzione");
}
NomeFunzione5Bis();
</script>
<button onclick="NomeFunzione5()">calcola 5 per 2</button>

<script>
function NomeFunzione6(NomeArgomento1, NomeArgomento2) {
 alert(NomeArgomento1 * NomeArgomento2);
}
</script>
<button onclick="NomeFunzione6(5,2)">calcola 5 per 2</button>

<script>
function NomeFunzione7(NomeArgomento1 = 7, NomeArgomento2 = 2) {
 alert(NomeArgomento1 * NomeArgomento2);
}
</script>
<button onclick="NomeFunzione7(5)">calcola 5 per 2</button>