Funzioni – Corso JavaScript

Il seguente articolo del corso JavaScript è di fondamentale importanza perché andremo a vedere nello specifico tutto quello che riguarda “le funzioni” in questo linguaggio di programmazione web. Molti aspetti di JavaScript si basano su questo capitolo e la comprensione delle funzioni è necessaria per proseguire il corso ed imparare a programmare realmente.

Come in molti altri linguaggi di programmazione, anche in JavaScript son presenti le funzioni, cioè blocchi di codice utili per far eseguire compiti e operazioni specifiche ad un determinato programma informatico.

Descriveremo in dettaglio tutto quello che riguarda le funzioni JavaScript qui di seguito, ma prima di tutto assicurati di aver compreso i precedenti capitoli, sulle strutture condizionali, cicli e array per continuare il corso.

Le funzioni in JavaScript

Descrizione

Le funzioni (functions) sono blocchi di codice programmati per eseguire operazioni e programmi prestabiliti. L’utilità delle funzioni sta, rispetto alla programmazione di una semplice stringa, nella possibilità del riutilizzo della stessa in un qualsiasi altro momento.

Inoltre è possibile usare una stessa funzione per ottenere risultati differenti in base ai valori presenti o scelti.

Una funzione è eseguita nella pagina o nel software in un determinato momento, scelto in fase di programmazione. Infatti, se normalmente uno script viene eseguito durante il caricamento della pagina web, una funzione può essere ritardata o bloccata fino a che non viene richiesta con altri mezzi e strumenti o azioni.

L’esempio più comune di utilizzo è attraverso un pulsante/button HTML. Immagina un pulsante che se cliccato con il mouse apre un popup, una finestra o esegue qualunque altra funzione possibile.
Qui un esempio di funzione con “fullscreen della pagina con click su pulsante“.

In modo analogo alle variabili JavaScript, anche le funzioni possono avere nomi personalizzati utili a semplificarne l’utilizzo. Oltre al nome possono essere specificati anche parametri speciali.

Successivamente alla creazione della funzione, questa potrà essere richiamata in qualsiasi momento nella pagina web o in altri blocchi di codice, tutte le volte che ne avremo bisogno.

Vedremo tutte queste cose in dettaglio qui di seguito.

Sintassi

Le funzioni in JavaScript hanno una propria sintassi da rispettare e semplice da ricordare. Per definire una funzione dovremo fare uso della keyword function. Esempio:

function nome() {
   codice...
}

function” anticipa una funzione JavaScript, seguita dal nome personalizzato e le parentesi graffe {} con il blocco di codice da eseguire.

Riguardo al nome della funzione, esso può essere di qualunque tipo, purché rispetti le regole JavaScript; è sempre seguito dalle parentesi tonde (). All’interno di queste parentesi andranno inseriti i parametri opzionali, o altrimenti potranno essere lasciate vuote.

Come ultima caratteristica troviamo le parentesi graffe {}, qui verranno scritti tutti gli script e codici che la funzione eseguirà nel momento richiesto. Alla chiusura della parentesi graffa “}” non va digitata la virgola “,”.

Vediamo qualche esempio pratico di funzione in JavaScript:

function ciao() {
  document.write("Ciao mondo!");
}
var x = 5;
var y = 3;
function somma() {
   document.write(x+y);
}

Richiamare una funzione

Prendiamo gli esempi scritti qui sopra; di norma siamo abituati e vedere un output/risultato istantaneo all’interno della pagina in cui è indicato uno script che termina con document.write(). Nel caso di una funzione però questo non accade.

Come spiegato precedentemente, una funzione per essere eseguita deve essere richiamata. per farlo basta digitare il suo nome nella posizione più adeguata.

Prendiamo l’ultimo esempio con la somma delle variabili x e y richiamando la funzione.

var x = 5;
var y = 3;
function somma() {
   document.write(x+y);
}
somma();
// output = 8

Una funzione può essere richiamata in qualsiasi momento nella pagina e illimitatamente. Spesso si fa uso degli eventi JavaScript[…] per indicare un preciso momento o azione da parte dell’utente prima di essere eseguita (esempio onclick con il click del mouse).

Parametri delle funzioni

Una funzione può avere parametri specifici e personalizzati. I parametri non sono altro che una lista di definizioni, dati e istruzioni.

I parametri vanno dichiarati nelle parentesi tonde che seguono il nome della funzione:

function MiaFunzione(par1, par2, par3)
{
   codice...
}

I valori possono essere definiti in fase di programmazione oppure si possono ricevere da azioni e eventi esterni, come la compilazione di un form di iscrizione/registrazione di un sito web.

function ciao(nome) {
   alert("Benvenuto " + nome);
}

ciao("Massimo");
// Benvenuto Massimo

Potrai approfondire i parametri durante lo svolgimento del corso.

alert è un metodo JavaScript per la comparsa di messaggi popup. Puoi approfondire nell’articolo dedicato;

Ogni parametro è separato l’uno dall’altro con la virgola “,”.

function utente(nome, eta) {
   alert("Tu sei " + nome + " e hai " + eta + " anni");
}

utente("Giacomo", 24);
// Tu sei Giacomo e hai 24 anni

Inizia ad esercitarti con le funzioni ed iniziare a programmare seriamente piccole applicazioni web, fai molti test e pratica prima di passare ai capitoli successivi.

Con questa guida potremmo dire di aver concluso la prima fase del corso JavaScript, tutto quello che è stato spiegato riguardava gli aspetti di base di questo linguaggio per la programmazione di applicazioni semplici. Nei prossimi capitoli vedremo strumenti, funzioni e concetti più avanzati per lo sviluppo web più avanzato[…].

Nel tempo verranno aggiunti altri articoli per arricchire al corso di base, resta aggiornato sulla loro pubblicazione iscrivendoti al feed in basso.

Torna al programma completo del corso

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA