Guide & Tutorial

Possiamo definire una fuzione come un blocco di una o più istruzioni che realizza uno specifico compito.

Definizione di funzione
In JavaScript per definire una funzione si utilizza la seguente sintassi:

dove:
• NomeFunzione è il nome assegnato al sottoprogramma;
• BloccoIstruzioni rappresenta il corpo della funziona, cioè le istruzioni che risolvono il compito relativo.

Le funzioni in JavaScript sono generalmente definite nella sezione HEAD del file HTML. In questo modo tutte le funzioni vengono lette in memoria non appena viene caricata la pagina HTML, ma non eseguite fino a quando non vengono espressamente richiamate.
Comunemente, le funzioni sono richiamate al verificarsi di un evento. Uno Script, può anche essere attivato o richiamato quando si verificano particolari situazioni coe il passaggio del mouse sopra un certo elemento, il caricamento di un documento, il clic su un oulsante e così via; queste situazioni vengono chiamate eventi.
Gli eventi posso quindi essere utilizzati per eseguire istruzioni o funzioni. A un evento può essere associata una funzione (che prende il nome di gestore dell'evento) che si prooccuperà di eseguire le istruzioni di cui è composta non appena si verifica l'evento in questione.

Esempio: (In questo documento HTML, ogni volta che si preme un pulsante, viene visualizzato il messaggio: "Guide & Tutorial!")

Il ciclo di for è un comodo modo per eseguire in una volta sola: la valutazione di una condizione e l'incremento di un indice fittizio per eseguire le ripetizioni. La novità rispetto al while è che l'inizializzazione di un indice, la valutazione della condizione e l'aumento dell'indice devono essere indicati già all'interno del costrutto. Così:

Esempio:

Ecco il diagramma sintattico del ciclo while: si tratta di eseguire una o più istruzioni (racchiuse fra le parentesi graffe) per un numero di volte che, in generale, non è noto a priori. Le istruzioni vengono eseguite se e soltanto se la condizione posta tra parentesi subito dopo la parola chiave while è vera.
Tale condizione viene valutata prima di eseguire le istruzioni interne al ciclo pertanto può succedere che, se al primo controllo la condizione risulta falsa, il programma esce immediatamente dal ciclo.
La sintassi JavaScript corrispondente è quella che segue:

Esempio:

Questa forma è paragonabile al: "se... oppure se..." del linguaggio "umano". Grazie ad essa, diventa possibile gestire un numero di evenienze quasi infinito, aggiungendo nuove "ipotetiche" che contemplino diversi casi. Il prototipo di questa forma è di poco diverso da quello precedente:

Esempio:

Abbiamo visto che è possibile fare eseguire un'azione se una condizione è vera. Ma se volessimo far eseguire un'altra azione nel caso in cui la condizione sia falsa? In JavaScript il prototipo di questa forma è il seguente:

dove la parola chiave else sta per altrimenti. "Traducendo" in linguaggio umano, sarebbe come dire: "se la condizione è vera, esegui queste istruzioni; altrimenti esegui queste altre".

Esempio:

In questo esempio solo uno dei blocchi di codice verrà eseguito a seconda che la condizione si riveli vera o falsa, ma, diversamente dal controllo if, è sicuro che comunque delle istruzioni verranno eseguite.
Tuttavia anche questa forma si rivela in molti casi troppo limitata. Per poter usufruire di una gamma di scelte ancora maggiore JavaScript dispone di un'ulteriore forma, ancora piú articolata, del costrutto if.

Questa è un'istruzione presente, in molte varianti, in tutti i linguaggi di programmazione. In JavaScript la sua forma piú semplice è la seguente:

L'istruzione if controllando se la condizione è vera o falsa, quindi effettuando un controllo booleano, è in grado di stabilire se le istruzioni comprese tra le parentesi graffe debbano essere eseguite oppure no. La condizione può essere una qualsiasi espressione logica. In questo caso, se la condizione si rivela falsa, nessuna istruzione verrà eseguita.

Esempio:

Ecco un form che ci permette di inserire i dati anagrafici relativi a uno studente.

Ecco il codice:

Se in un elemento INPUT impostiamo l'attributo TYPE al valore BUTTON, otteniamo un elemento pulsante. L'elemento pulsante o button consente di creare un pulsante caratterizzato da un nome e un'eventuale etichetta che viene visualizzata su di esso.

Esempio:

visualizza:
Il pulsante assume la lunghezza necessaria ad accogliere il testo che è inserito in VALUE come etichetta.
Se in un elemento INPUT impostiamo TYPE al valore IMAGE, otteniamo un particolare pulsante che utilizza al posto della tradizionale grafica del pulsante.

Esempio:

visualizza:
Se impostiamo TYPE al valore RESET otteniamo un pulsante particolare, che, quando viene premuto, riporta i valori di tutti i campo cotnenuti nel form al loro valore iniziale (di default). Se i valori iniziali non sono presenti, l'effetto è quello di azzerare tutti i campi del form. L'attributo VALUE permette di associare un etichetta al pulsante.

Esempio:

visualizza:

La casella di selezione o SELECT ha la forma di un elenco a discesa o di un menu di voci (menu pop-down).
La sintassi è:

L'attributo SIZE assegna il numero di righe della lista da visualizzare.
L'elemento OPTION permette di definire i singoli elementi della lista.
L'attributo VALUE specifica il valore da restituire quando l'elemento è selezionato.
L'attributo SELECTED identifica il valore di default da presentare in visualizzazione nella casella. Questo attributo può essere specificato solo per un'opzione.
Il tag < /OPTION> è raccomandato, ma non necessario.

Esempio:

visualizza:
Palermo
Roma
Bari
Milano
Torino
Ravenna

L'attributo SELECTED fa comparire nella visualizzazione della casella il valore Palermo.
Invece, il codice:

Le caselle di scelta alternativa, o radio box o radio button, sono simili alle caselle di controllo, ma consentono la selezione esclusiva di una sola casella all'interno di un gruppo di caselle.
Per creare un gruppo di radio box occorre assegnare lo stesso nome (cioè impostare lo stesso valore della proprietà NAME) a tutti i radio box. Se è selezionata, la casella di scelta alternativa assume valore logico true, altrimenti false. L'attributo CHECKED (opzionale) forza la selezione della casella al valore true. All'interno di un gruppo può essere selezionata una sola casella. Se più caselle di un gruppo vengono impostate a CHECKED, verrà selezionata solo quella relativa all'ultimo CHECKED. La sintassi è uguale a quella delle caselle di controllo, solo che l'attributo TYPE deve essere impostato a RADIO.

Esempio: