Introduzione alle Funzioni in JavaScript

Le Funzioni – Introduzione

Molto spesso abbiamo bisogno di un codice JavaScript riutilizzabile che esegui una determinata attività.

Per far questo possiamo ovviamente copiare e incollare quel specifico codice quante volte abbiamo bisogno oppure possiamo come vedremmo in quest’articolo creare una funzione e invocarla quante volte vogliamo senza sprecare codice inutilmente.

Cos’è una funzione JavaScript?

Praticamente una funzione JavaScript è un blocco di codice riutilizzabile ideato per svolgere una certa attività.

Ad esempio prendiamo il caso in cui abbiamo il seguente codice JavaScript:

document.write(“<h1>Titolo</h1>”);
document.write(“<p>Paragrafo 1</p>”);
document.write(“<p>Paragrafo 2</p>”);
document.write(“<p>Paragrafo 3</p>”);
document.write(“<img src=’cane.jpg’ width=’250′ height=’250′>”);

Facciamo finta che quel codice rappresenti un articolo, ok? A questo punto vogliamo creare un nuovo articolo sempre con quel codice. Come possiamo fare?

Se non ti piace tanto leggere articoli ho creato anche un video per te in cui ti spiego le funzioni in JavaScript, eccolo qui.

Come si crea una funzione in JavaScript?

Come ho detto anche prima possiamo copiarlo e incollarlo quante volte abbiamo bisogno, ma sarebbe uno spreco di righe di codice e potenzialmente creerebbe troppa confusione quindi possiamo creare una funzione e invocarla quando desideriamo.

function articolo(){
document.write(“<h1>Titolo</h1>”);
document.write(“<p>Paragrafo 1</p>”);
document.write(“<p>Paragrafo 2</p>”);
document.write(“<p>Paragrafo 3</p>”);
document.write(“<img src=’cane.jpg’ width=’250′ height=’250′>”);
}
articolo();
articolo();

Cosa fanno tutte quelle righe di codice in pratica?

Usiamo function, seguito da un nome per la nostra funzione, seguito da parentesi tonde, seguito da parentesi graffe all’interno delle quali mettiamo il nostro codice da eseguire quando abbiamo bisogno e alla fine dopo che abbiamo chiuso anche le parentesi graffe invochiamo la nostra funzione che andrà a scrivere tutte quelle righe di codice due volte al posto nostro.

Cos’è e come si crea una funzione anonima in JavaScript?

Questo sarebbe il metodo classico per creare una funzione in JavaScript, ma c’è anche un altro tipo di funzione, la funzione anonima che generalmente viene usata una sola volta e parte in automatico.

var articolo = function(){
document.write(“<h1>Titolo</h1>”);
document.write(“<p>Paragrafo 1</p>”);
document.write(“<p>Paragrafo 2</p>”);
document.write(“<p>Paragrafo 3</p>”);
document.write(“<img src=’cane.jpg’ width=’250′ height=’250′>”);
}();

Cosi si crea una funzione anonima che viene eseguita in modo automatico. Spieghiamo un pochettino cosa fa il codice.

Quindi abbiamo creato una variabile articolo all’interno della quale abbiamo la nostra funzione. Dopo aver chiuso le parentesi graffe abbiamo anche due parentesi tonde che permettono l’invocazione della funzione anonima in automatico. (P.S: non dimenticare il punto e virgola alla fine, in quanto in questo caso la funziona sta all’interno di una variabile)

Questa nostra funzione anonima si potrebbe invocare anche in un altro modo. Intanto togliamo le ultime due parentesi tonde e su un’altra riga di codice scriviamo due volte articolo(); , proprio come nel codice di sotto.

var articolo = function(){
document.write(“<h1>Titolo</h1>”);
document.write(“<p>Paragrafo 1</p>”);
document.write(“<p>Paragrafo 2</p>”);
document.write(“<p>Paragrafo 3</p>”);
document.write(“<img src=’cane.jpg’ width=’250′ height=’250′>”);
};
articolo();
articolo();

In questo modo otteniamo sempre quel codice in output due volte. Quindi in questo modo abbiamo risparmiato tempo, righe di codice, risorse per il nostro pc e tant’altro.

Spero che il tutorial ti sia piaciuto, seguiranno altri due tutorial a riguardo delle funzioni in cui andrò a spiegare i parametri delle funzioni JavaScript e return.