docJavascript(pagine web)
download 
Reclamo Transcript
Javascript(pagine web)
Guida completa su Javascript
Cap 1 - Introduzione alla programmazione
1.1 - Nascita di JavaScript
1.2 - Incorporare JS nell'HTML
1.3 - Collegare un JS esterno
1.4 - Fornire un’alternativa ai browser non JS
1.5 - Aggiungere commenti a JS
Cap 2 - Le specifiche della sintassi JS
2.1 - Gli identificatori
2.2 - Capire le costanti e le variabili
2.3 - Gli operatori
Cap 3 - Controllare il flusso del programma
3.1 - Introduzione
3.2 - Le istruzioni if...else
3.3 - I loop While
3.4 - Interrompere e continuare i loop
3.5 - L'istruzioni With
3.6 - L'istruzione Switch
Cap 4 - Lavorare con le funzioni
4.1 - Comprendere le funzioni
4.2 - Dove dichiarare le funzioni
4.3 - Chiamata delle funzioni
4.4 - Varibili globali e totali
4.5 - Utilizzare gli argomenti
4.6 - Restituire valori ad una funzione
Cap 5 - La gestione degli eventi new
5.1 - Panoramica sugli eventi JavaScript
5.2 - I click del mouse
5.3 - Spostamento del mouse sopra gli oggetti
5.4 - Pressione di un tasto
5.5 - Impostazione e perdita dello stato attivo
5.6 - Modifica dei dati
5.7 - Inoltro e ripristino di una form
5.8 - Caricamento e scaricamento della pagina
5.9 - I timer Javascript
Nascita di JavaScript
Nato da una collaborazione tra la Sun Microsystems e Netscape, Javascript è oggi considerato il linguaggio
scripting più popolare in circolazione che consente di creare pagine Web dinamiche e interattive senza la necessità
di imparare un linguaggio di programmazione ad alto livello.
A differenza di Java, Javascript è un linguaggio interpretato perché funziona solo grazie a un interprete integrato
nel browser. Quando la pagina Web (contenente del codice Javascript) viene caricata, il browser esegue il codice
HTML e contemporaneamente esegue anche le dichiarazioni Javascript.
Uno dei motivi che rendono lo studio di Javascript quasi parallelo a quello di HTML è proprio la stretta
correlazione tra i due linguaggi. Se HTML può essere considerato il punto di partenza per uno sviluppatore Web,
Javascipt consente di apportare notevoli migliorie al lavoro svolto in HTML puro. Una di queste è sicuramente la
possibilità di convalidare dei dati di un modulo HTML senza dover necessariamente ricorrere a un programma
CGI situato su un server.
Infatti, uno dei motivi che ha ispirato la creazione di Javascript è stato proprio quello di creare una logica e
un'intelligenza "lato client". Prima della creazione dei linguaggi di scripting, era il server che si sobbarcava
interamente anche il controllo delle operazioni di convalida. sprecando tempo e risorse preziose anche per
operazioni in realtà piuttosto semplici.
Incorporare JS nell'HTML
Sappiamo come HTML possieda dei tag di apertura e di chiusura (<html>...</html>) che servono a delimitare
l'inizio e la fine di un codice. Anche Javascript non si sottrae a questa regola, e mediante i tag <script>...</script>
indica all'interprete del browser che tutte le istruzioni incluse all'interno di questi due tag sono dichiarazioni di
scripting.
I tag <script> possono apparire ovunque all'interno del file HTML, sia all'interno dei tag <head> che all'interno
dei tag <body>. Il tag <script> però non è sufficiente a far capire al browser che vogliamo utlizzare Javascript.
Esistono infatti altri linguaggi di scripting, tra cui VBscript della Microsoft. Per questo motivo il tag <script>
accetta l'attributo language, che serve a specificare il linguaggio di scripting da utilizzare. Vediamo un esempio:
Esempio 1.1
<html>
<head></head>
<body>
<script language="javascript">
</script>
</body>
</html>
In questo esempio abbiamo costruito lo scheletro di una
pagina HTML, con le relative sezioni di intestazione e di corpo (head e body) e, all'interno dei tag
<body>...</body> abbiamo inserito i tag <script<...</script> entro i quali andranno immesse le dichiarazioni
Javascript.
C'è da notare che i tag <script>...</script> li avremmo potuti indifferentemente inserire anche all'interno dei tag
<head>...</head>. Importante però è comprendere che, se il codice Javascript viene inserito all'interno dei tag
head, al momento del caricamento della pagina nel browser, il suo contenuto verrà visto dagli utenti prima rispetto
all'ipotesi in cui fosse stato inserito all'interno dei tag body, secondo un ordine sequenziale di lettura da parte
dell'interprete del browser.
Un altro aspetto da mettere in evidenza è che, all'interno di una pagina HTML, possiamo inserire più di una coppia
di tag <script>...</script>.
Collegare un JS esterno
Inserire i tag <script>...</script> all'interno del file HTML non è la sola opportunità che si presenta agli
sviluppatori Web. Infatti possiamo inserire del codice Javascript anche esternamente al file HTML, per poi
collegarlo ad esso mediante l'attributo src del tag <script>.
Facciamo un esempio pratico: vogliamo creare una semplicissima pagina Web con lo sfondo giallo e con la
scritta centrata "Benvenuti nel mio sito Web". Vediamo anzitutto come potremmo realizzare ciò inserendo il
codice Javascript internamente al file HTML.
Esempio 1.2
Non rivolgiamo per ora l'attenzione alla sintassi dei comandi Javascript per impostare lo sfondo e la scritta,
verrano esaminati in seguito. Ora però vediamo come si può creare lo stesso effetto inserendo il codice Javascript
esternamente al file HTML. Il file HTML è molto semplice:
Esempio 1.3
Il file esterno.js non è altro che il file contenente le dichiarazioni Javascript inserite nell'esempio 1.2 senza però i
tag <script>...</script> che nei file esterni non si devono inserire. Ecco quindi il file denoninato esterno.js
Esempio 1.4
Fornire un'alternativa ai browser non JS
Chi ha esperienza di navigazione in Internet sa bene che ha la possibilità, mediante
specifiche opzioni dei browser, di disattivare anche il supporto Javascript. Quando ciò
si verifica, tutti i comandi contenuti all'interno dei tag <script>...</script> vengono
ignorati totalmente dal browser.
Poiché lo sviluppatore Web non ha il potere di modificare le opzioni dei browser, deve
limitarsi a informare gli utenti che la pagina contiene degli script e a invitarli ad
abilitare il supporto Javascript. Questo obiettivo di informazione lo si può raggiungere
con i tag <noscript>...</noscript>.
Esempio 1.5
In questo esempio, se l'utente ha abilitato l'opzione Javascript sul proprio browser,
allora visualizzerà senza problemi la pagina con lo sfondo giallo e la scritta "Benvenuti
nel mio sito Web". Se invece il supporto Javascript è disabilitato, allora il browser
visualizzerà la scritta all'interno dei tag <noscript>...</noscript> che ha scopo
puramente informativo.
Da sottolineare come all'interno dei tag <noscript>...</noscript> possiamo inserire tutti
i tag HTML che vogliamo, inclusi quindi anche dei collegamenti ipertestuali.
Aggiungere commenti a JS
Per i neofiti di Javascript può essere difficile seguire la sintassi del linguaggio, capire cioè quali sono gli
effetti di determinati script all'interno del codice. Un aiuto alla comprensione di Javascript ci viene dall'uso
dei commenti, che servono a documentare ciò che scriviamo. I commenti non verrano visualizzati al
caricamento della pagina nel browser.
Se il commento è a riga singola, lo identifichiamo con un doppio slash iniziale (//). Se invece i commenti
sono più lunghi e occupano più righe, iniziano con uno slash e un asterisco (/*) e finiscono esattamente al
contrario, cioè con un asterisco e uno slash (*/).
I commenti possono essere inseriti ovunque all'interno dei tag <script>...</script>. Inoltre, la maggior parte
dei programmatori ritiene sia corretto inserire dei commenti HTML a ridosso dei tag script, sempre per
nascondere il codice Javascript ai browser che non lo supportano.
Esempio 1.6
Gli indentificatori
Come ogni altro linguaggio di programmazione, anche Javascript ha una propria sintassi ben definita,
composta da alcuni vincoli da rispettare per rendere un programma corretto e funzionale.
Gli identificatori in Javascript sono i nomi delle variabili, dei metodi e degli oggetti. Tralasciando per ora il
significato di questi tre termini che vedremo in avanti, possiamo dire che gli identificatori, per essere validi,
devono seguire alcune regole.
Ogni identificatore:
•
•
•
•
deve iniziare con una lettera o con un carattere di sottolineatura (_);
deve usare lettere, cifre o caratteri di sottolineatura per tutti gli altri caratteri successivi;
può includere tutti i caratteri maiuscoli dalla A alla Z e tutti i caratteri minuscoli dalla a alla z;
non deve includere nessuno spazio al suo interno
Nella tabella seguente vengono riportati alcuni esempi di identificatori validi e non validi.
Tabella 2.1
Identificatori validi
Identificatori
non validi
controllaForm()
controlla Form
firstCont
first.Cont
v
2v
numCalc
return
Esaminiamo ora gli esempi della tabella. Controlla Form non può essere considerato un identificatore valido
poichè all'interno di esso vi è incluso uno spazio. First.Cont non è valido perchè contiene un punto che rende
non valido l'identificatore. il 2 iniziale di 2v fa in modo che non possa essere considerato un identificatore
corretto dato che i numeri iniziali non sono ammessi. Infine return è anch'esso un identificatore scorretto
perchè return rappresenta una di quelle parole speciali denominate parole riservate che in Javascript sono
dedicate a scopi ben precisi.
Capire le costanti e le variabili
Se avete precendenti esperienze di programmazione, sapete già come le variabili assumano un ruolo decisivo
in questo lavoro.
Le variabili possiamo immaginarle come dei contenitori temporanei per i valori, dove possiamo immetterci
qualcosa e sostituirne il contenuto a nostro piacimento quando vogliamo.
C'è da notare però come le variabili possano anche contenere dei valori costanti. Le costanti sono dei valori
che non possono essere modificati per tutta la durata del programma.
Le variabili possono contenere un assortimento vario di lettere e numeri come valori, rispettando le regole
citate nel precedente argomento. Ora però vediamo quali sono nello specifico i diversi tipi di variabile:
•
•
•
•
Numeri interi (Integer)
Numeri a virgola mobile (Floating point)
Stringhe (String)
Booleani (Boolean)
Gli integer sono variabili che contengono numeri interi, ideali per i conteggi, sia positivi che negativi. Es. 12,
2987, -7.
I floating point invece, sono delle variabili contenenti numeri decimali. Anche questo tipo di variabili, come
gli integer, vengono prevalentemente usate con gli operatori aritmetici. Es. 1,2 -97,258
Le stringhe sono delle variabili contenenti parole o frasi racchiuse tra virgolette. La loro lunghezza è
indifferente; per definire delle stringhe infatti, possono essere usati sia singoli caratteri che intere frasi. Es.
"ciao", "d1", "Questa è una stringa di esempio".
Infine vi sono le variabili booleane che possono contenere semplicemente i valori true o false. Sono variabili
usate prevalentemente nel controllare il flusso del programma. Per rappresentare il valore true viene anche
usato il numero 1, mentre per rappresentare false si usa anche il numero 0.
Anche se non è necessario, è possibile dichiarare esplicitamente le variabili Javascript all'interno di un
programma mediante la parola chiave var. Si possono dichiarare contemporaneamente più variabili,
separandole tra loro con una virgola.
Esempio 2.1
Gli operatori
Fino ad ora abbiamo parlato di come visualizzare correttamente i dati in Javascript. Ma la concezione stessa
che è alla base di ogni linguaggio di programmazione, ci impone di manipolare questi dati e renderli utili ai
nostri scopi. Per far ciò, dobbiamo parlare degli operatori, che sono degli strumenti per calcolare o
modificare i dati che includiamo negli script. Mediante l'uso degli operatori, possiamo anche assegnare a una
variabile il risultato di un'intera espressione.
Il primo operatore che impariamo a conoscere è l'operatore di assegnazione, il cui compito consiste
nell'assegnare un valore a una variabile, posizionando quindi il suo valore in memoria. Ad esempio,
l'espressione a = 5 assegna il valore 5 alla variabile a.
E' chiaro che non solo i numeri (interi o decimali) possono essere assegnati alle variabili come valori. Anche
le stringhe e i booleani infatti, possono essere utlizzati allo scopo. Es. squadra = "Juventus", status = true.
Gli operatori aritmetici sono probabilmente tra i più usati dai programmatori. Con questi operatori possiamo
compiere operazioni aritmetiche. I fondamentali sono il segno + che somma due valori, il segno - che sottrae
un valore dall'altro, l'asterisco * che effettua il prodotto tra due valori e la barra / che invece serve a dividere
un valore per un altro. A questi possiamo aggiungerne anche un altro, meno noto, che è l'operatore modulo,
indicato dal segno percentuale %. Questo restituisce il valore del resto dopo la divisione di un numero per un
altro. Es. 20 % 6 restituirebbe 2, poichè il 6 nel 20 ci va tre volte con il resto di 2.
Vi sono anche gli operatori aritmetici unari, che incrementano la variabile di 1. Es. ++i oppure i++ sono gli
equivalenti di i = i + 1.
Gli operatori di confronto sono utilizzati per compiere dei paragoni dal cui risultato abbiamo un valore true
o false.
Gli operatori di confronto sono i seguenti:
•
•
•
•
Operatore di uguaglianza (==). Restituisce true se entrambi gli operatori sono uguali, al contrario
restituisce false. Es. 10 == 12 restituisce false, mentre 5 == 5 restituisce true.
Operatore di disuguaglianza (!=). Come è facilmente comprensibile, è l'opposto dell'operatore di
uguaglianza. In tal caso, 10 != 12 (che possiamo leggere come 10 diverso da 12) restituisce true,
mentre 5 != 5 restituisce false.
Operatore maggiore di (>) o maggiore uguale di (>=). Restituiscono true se l'operando sinistro è
maggiore o maggiore uguale dell'operando destro. Es. 5 > 3 è true, 5 > 7 è false, 9 >= 9 è true, 9 >=
12 è false.
Operatore minore di (<) o minore uguale di (<=). Anche qui, questi due operatori sono l'esatto
opposto degli operatori descritti in precedenza. Restituiscono true se l'operando sinistro è minore o
minore uguale dell'operando destro. Es. 5 < 7 è true, 5 < 3 è false, 9 <= 12 è true, 9 <= 7 è false.
Gli operatori di stringa includono sia gli operatori di confronto già citati che l'operatore di concatenazione (il
segno +). Mediante questo operatore è possibile concatenare due stringhe.
Esempio 2.2
In questo esempio, abbiamo usato l'operatore di concatenazione + per unire le tre frasi assegnati alle variabili
frase1, frase2 e frase3. Il risultato dell'unione è stato assegnato alla variabile frase_completa. Infine abbiamo
visualizzato nella pagina web la frase mediante il comando document.write che analizzeremo nel seguito del
corso.
Gli operatori condizionali sono ? e : i quali vengono utilizzati per formare operazioni condizionali. Questi
operatori vengono spesso utilizzati come scorciatoie al posto di una istruzione if...else.
Esempio 2.3
In questo esempio, abbiamo ipotizzato che il millesimo visitatore del nostro sito visualizzi sul proprio
monitor la scritta "Sì, hai vinto". Tutti gli altri visitatori invece visualizzeranno la scritta "No, hai perso!" Da
notare l'uso del punto interrogativo e dei due punti nell'espressione.
Gli operatori booleani, detti anche operatori logici, sono utilizzati nelle espressioni che danno come risultato
un valore booleano (true o false).
I loop While
A livello concettuale, il loop while è diverso dal loop for. Esso infatti, non conta fino
ad arrivare ad una fine ed uscire quindi dal loop, bensì continua il loop sino a quando
un'espressione condizionale non diventa false.
Il loop while include solo una espressione condizionale dopo la parola
chiave while. Ovviamente dobbiamo assicurarci che questa condizione
prima o poi diventi false, altrimenti il loop continuerà all'infinito.
Inoltre, il loop while può anche eseguire diverse istruzioni che devono
però essere inserite all'interno di parentesi graffe. Se dopo la condizione,
inseriamo più istruzioni senza racchiuderle tra parentesi, solo la prima
verrà eseguita, mentre le altre saranno ignorate dall'interprete del
browser.
Ora facciamo lo stesso esempio utilizzato nel loop for. Vogliamo cioè
visualizzare sul nostro browser la frase "Sto imparando Javascript" per 5
volte. Con un esempio, spieghiamo come si può raggiungere tale
obiettivo con il loop while.
Esempio 3.4
Come si può agevolmente notare, i loops for e while sono diversi a livello concettuale.
Nel loop for è necessario che tutte le informazioni necessarie facciano parte
dell'istruzione for, mentre il loop while può usare variabili dichiarate anche
esternamente al loop. Entrambi i metodi però, come abbiamo visto, possono pervenire
al medesimo risultato.
Interrompere e continuare i loop
Se deciderete di applicarvi intensamente allo studio di Javascript, di sicuro vi accadrà
di trovarvi in situazioni nelle quali rimarrete bloccati all'interno di un loop, che in tal
caso viene chiamato loop infinito.
In nostro aiuto ci viene la parola chiave break che termina automaticamente il loop ed
esegue la prima istruzione successiva al loop. Da notare che, se decidete di
interrompere un loop con l'istruzione break, non potete più tornare ad esso e tutte le
variabili restano settate al momento in cui il loop è stato interrotto.
Torniamo al nostro ormai famoso esempio. Vogliamo ancora veder scritta sul nostro
browser la frase "Sto imparando Javascript" per cinque volte. Ad un certo punto però
inseriremo un'istruzione break che ci fornirà un risultato insolito.
Esempio 3.5
Se provate a scrivere questo codice e a visualizzarlo sul browser, noterete che la scritta
"Sto imparando Javascript" appare solo 2 volte invece di 5. Il motivo è semplice:
l'istruzione break da noi immessa fa si che, quando il contatore raggiunge il numero 3,
il loop viene interrotto.
Oltre a break, abbiamo anche la parola chiave continue che ferma il loop e ritorna
all'inizio di esso. Tutte le istruzioni che seguono la parola chave continue non vengono
eseguite solo per una volta, per poi riprendere normalmente.
Esempio 3.6
Vale la pena analizzare questo esempio. In questo caso, la frase "Sto imparando
Javascript" verrà visualizzata nel browser 4 volte. Infatti, l'istruzione continue sarà
eseguita solo quando la variabile contatore è uguale a 3. Quando si verifica ciò, il
programma "salta" l'istruzione che segue la parola chiave continue e ritorna all'inizio
del loop. Ciò significa che, per una volta, l'istruzione document.write non verrà
eseguita.
L'istruzione With
Nel corso della vostra normale attività di programmazione, potrà capitarvi di dover
digitare la stessa istruzione per più volte ripetutamente. In nostro soccorso ci viene
allora l'istruzione with che può rivelarsi utile per ridurre la quantità di codice
necessario e quindi il tempo di caricamento della pagina nel browser.
Esempio 3.7
Nell'esempio 3.7 abbiamo evitato di dover scrivere l'istruzione document.write per
cinque volte, riducendo così il peso in termini di KB del nostro file.
L'istruzione Switch
serve invece a mettere a confronto un valore con
molti altri. Concettualmente può essere considerata simile
all'istruzione if, ma switch può costituire una valida alternativa.
Vediamone un'applicazione:
L'istruzione switch
Esempio 3.8
L'esempio 3.8 è di semplicissima comprensione. Il confronto comincia con la
prima dichiarazione e prosegue sino a quando tutte le condizioni sono state
verificate. Nel nostro caso, vedremo visualizzato nel nostro browser la frase "Oggi
finalmente non si lavora!". Nel caso in cui nessuna delle condizioni fosse risultata
vera, sarebbe apparsa la frase di default "Oggi è un giorno qualunque!"
Comprendere le funzioni
Dividere uno script in sezioni logiche può rivelarsi di grande utilità quando si vuole
assegnare ad ogni sezione un compito diverso.
Una funzione Javascript quindi non è altro che uno script suddiviso in sezioni di codice
separate a cui viene assegnato un nome. Tramite questo nome, un altro script all'interno
del codice può richiamarlo perchè venga eseguito in qualsiasi momento e tutte le volte
che lo si desidera.
Le funzioni consentono di sezionare un programma, di creare cioè un codice articolato
in cui ad ogni sezione viene attribuito un compito specifico.
Per specificare una funzione viene utilizzata la parola chiave function, a cui segue
l'identificatore che possiamo intendere come il nome della funzione. All'interno della
funzione possiamo inserire tutte le istruzioni che vogliamo, racchiuse da una coppia di
parentesi graffe. Ogni volta che richiamiamo la funzione, verranno eseguite queste
istruzioni. .
Dove dichiarare le funzioni
Una funzione Javascript può essere dichiarata ovunque nel file HTML, purchè
all'interno dei tag <script>...</script>.
La maggior parte dei programmatori è però concorde sul fatto che sia opportuno
dichiarare le funzioni all'interno dei tag <head>...</head>, per permettere all'interprete
del browser di caricarle prima del resto del programma, ma soprattutto prima dello
script di chiamata alla funzione.
Infatti, come facilmente comprensibile, chiamare una funzione prima che questa sia
stata caricata dal browser, potrebbe generare un errore nel programma.
Vediamo ora un esempio di dichiarazione di una funzione.
Esempio 4.1
Se proviamo a caricare la pagina nel browser, esso ci rileverà un errore perchè non è
stato ancora inserito lo script di chiamata della funzione. Ora però soffermiamoci sulla
nostra funzione. L'abbiamo dichiarata con la parola chiave function seguita dalle
parentesi tonde (aperta e chiusa) e le abbiamo associato il nome newColours.
All'interno di questa funzione abbiamo inserito due istruzioni che servono a cambiare
il colore di sfondo della pagina (da bianco che è il color di default a rosso) e il colore
del testo (da nero che è il colore di default a blue).
Abbiamo racchiuso queste due istruzioni all'interno di due parentesi graffe. Da non
dimenticare il punto in cui abbiamo inserito la funzione, e cioè all'interno degli script
<head>...</head> del file HTML.
Chiamata delle funzioni
Nell'esempio 3.1 abbiamo visto la nostra prima funzione, la sua sintassi e la sua
dichiarazione all'interno del codice.
Ma, se non chiamiamo la funzione, essa non verrà mai applicata all'interno del
programma. Si rende perciò necessario uno script che indichi all'interprete del browser
che la nostra funzione deve essere eseguita.
Nell'esempio 3.2 vediamo come chiamare una funzione
Esempio 3.2
La chiamata alla funzione, effettuata in questo caso all'interno dei tag
<head>...</head>, è molto semplice. Abbiamo infatti usato il nome stesso della
funzione seguito da due parentesi tonde (aperta e chiusa).
Quando l'interprete del browser, incontrerà questa "chiamata", immediatamente
eseguirà la funzione newColours, cambiando nel nostro esempio il colore dello sfondo
e del testo (se c'è) della nostra pagina Web.
Non fatevi fuorviare dal fatto che prima è stata dichiarata la funzione e solo in seguito
è stata chiamata. E' normale che sia così, o meglio è auspicabile. Come detto in
precendenza è opportuno che il browser prima carichi la funzione e solo
successivamente la chiami.
Variabili globali e locali
Quando dobbiamo lavorare con le funzioni, è necessario comprendere il significato di
variabile globale o locale.
Parliamo di variabile globale quando ci troviamo di fronte ad una variabile utilizzabile
in qualunque punto del programma, cioè sia all'interno che all'esterno di funzioni.
E' fortemente consigliato inserire le variabili globali all'interno dei tag <head>...</head>
per essere certi che vengano caricate prima del resto del programma. Un altro utile
consiglio è quello di adottare determinate convenzioni per denominare le variabili. Ad
esempio se abbiamo a che fare con variabili globali, possiamo rendere maiuscola la
prima lettera del nome della variabile; al contrario, se dobbiamo considerare le variabili
locali, sarà più opportuno denominarle con una minuscola come prima lettera.
Le variabili locali sono invece delle variabili dichiarate all'interno di funzioni. In questo
caso la variabile ha un "senso" solo per quella funzione. Quindi, ogni volta che la
funzione viene richiamata, viene creata la variabile, così come ogni volta che la
funzione termina, la variabile viene eliminata.
Utilizzare gli argomenti
Quando abbiamo trattato la chiamata di una funzione, i lettori più attenti si saranno
sicuramente chiesti cosa volessero significare quelle due parentesi tonde che seguono il
nome della funzione.
Esse servono a contenere gli argomenti,
che sono dei valori di variabili che
possiamo "passare" alla funzione. Questi valori possono ovviamente
essere più di uno: basta che siano separati tra di loro da virgole.
Facciamo un esempio molto semplice. Se una funzione è definita come
cibo(a, b, c), la chiamata alla funzione cibo(pasta, pane, frutta)
posizionerebbe il valore "pasta" nella variabile a, il valore "pane" nella
variabile b, e il valore "frutta" nella variabile c.
L'esempio 4.1 chiarirà meglio il concetto:
Esempio 4.1
In questo esempio abbiamo visto come si "passano" dei parametri a una funzione.
Notate come non è necessario che i valori inclusi nella chiamata alla funzione siano
nominalmente uguali a quelli che seguono la parola chiave function; l'importante è che
il numero di essi sia uguale, in maniera tale che vi sia l'assegnazione cronologica dei
valori.
Restituire valori ad una funzione
Quando una funzione viene eseguita, essa può anche ricavare un valore da trasmettere
al programma principale. Ciò avviene mediante la parola chiave return.
Se ad esempio abbiamo nel nostro codice una funzione che esegue un'operazione
aritmetica, possiamo mandare il risultato di tale operazione indietro nel punto esatto in
cui la funzione è stata chiamata, per poi utilizzarlo in altre operazioni nel resto del
programma.
Esempio 4.2
Nell'esempio 4.2 abbiamo chiamato la funzione somma, passando i tre valori a, b, c. La
funzione li ha sommati, ha scritto nel nostro browser la frase "La somma dei tre numeri
è 35", e infine ci ha restituito il valore della variabile di nome "totale" (cioè 35),
facendo in modo che lo sviluppatore possa utilizzare questo valore dal punto di
chiamata della funzione in poi per qualsiasi altra operazione.
Panoramica sugli eventi Javascript
Come ho già avuto modo di ricordare nella parte introduttiva di questo corso, la reale
forza di Javascript consiste nella sua interattività con l'utente. Ciò significa che
mediante parti di codice, le azioni dell'utente all'interno di una pagina Web vengono
collegate a degli script che devono essere eseguiti.
Diversi sono i modi in cui l'utente può interagire con una pagina Web: può fare clic sul
mouse, premere un tasto della tastiera, modificare elementi di una form oppure possono
anche verificarsi eventi che vengono eseguiti quando si entra o si esce da una pagina
Web.
Gli eventi del mouse vengono generati quando l'utente fa click una o due volte sul
mouse oppure quando muove il mouse. Non solo: alcuni eventi possono anche essere
attivati tenendo premuto o rilasciando il mouse. Inoltre, quando muoviamo il mouse,
dobbiamo distinguere tra eventi generati con il semplice movimento del mouse ed
eventi generati muovendo il mouse sopra un determinato elemento della pagina Web.
Anche per ciò che riguarda gli eventi generati dalla pressione di un tasto della tastiera,
dobbiamo differenziare tra eventi scatenati dalla contemporanea pressione e rilascio del
tasto ed eventi generati solo dalla pressione o solo dal rilascio del tasto.
Gli eventi di selezione sono principalmente eventi che si attivano quando un elemento
di una pagina Web acquista o perde il proprio focus, mentre altri eventi ancora possono
essere attivati semplicemente caricando o scaricando una pagina Web oppure inviando
o resettando una form.
Gli eventi Javascript possono essere posizionati all'interno di tag HTML, proprio come
qualsiasi altro attributo, oppure possono essere inseriti all'interno di una funzione (scelta
consigliabile al fine di ottenere una maggiore leggibilità del codice).
I click del mouse
Uno degli eventi più comuni con cui lavora la maggior parte degli sviluppatori è
sicuramente l'evento onClick che viene generato quando l'utente fa clic su un oggetto
all'interno di una pagina Web.
Chiariamo come l'evento onClick, nella prassi, viene generato soltanto dopo la
pressione e il rilascio del pulsante del mouse. Se l'utente infatti clicca sul mouse ma non
rilascia il pulsante, l'evento onClick non sarà attivato. Di solito l'evento onClick viene
associato ai pulsanti delle form, come submit e reset.
Vediamo ora un esempio di come possiamo sfruttare le potenzialità dell'evento onClick
Esempio 5.1
<html>
<head></head>
<body>
Questo esempio ci consente di
<form name="esempio">
<input type="button" name="button1"
value="prima"
onclick="document.esempio.button1.value='dopo';"/>
</form>
</body>
</html>
modificare con un click del mouse il contenuto del pulsante "prima". Esso infatti viene
modificato in "dopo".
Esempio 5.2
<html>
<head>
L'esem
<script language="javascript">
function cambia() {
document.esempio.button1.value="dopo";
}
</script>
</head>
<body>
<form name="esempio">
<input type="button" name="button1" value="prima"
onclick="cambia();"/>
</form>
</body>
</html>
pio 5.2 ha lo stesso identico scopo dell'esempio precedente, con la differenza che è
raggiunto in maniera diversa. Prima infatti abbiamo modificato il contenuto del pulsante
aggiungendo l'evento all'interno del tag HTML, mentre nel secondo esempio abbiamo
chiamato una funzione per svolgere questo compito.
L'evento ondblclick è molto simile all'evento onClick. Per essere attivato, necessita di
un doppio click del mouse. Un intelligente uso combinato dei due eventi può essere
implementato per attivare contemporaneamente due eventi: infatti, cliccando due volte
sul mouse, verrà attivato prima l'evento onClick e in seguito l'evento ondblclick.
Spostamento del mouse sopra gli oggetti
Altri eventi molto diffusi nella programmazione in Javascript sono onMouseOver e
onMouseOut. Il primo viene generato quando spostiamo il mouse sopra un determinato
elemento della pagina Web, mentre il secondo quando lo spostiamo all'esterno di tale
elemento.
Mediante questi due eventi, generalmente combinati, possiamo creare effetti visivi per
migliorare la grafica del nostro sito, oppure ad esempio per modificare il testo della
barra di stato.
Esempio 5.3
<html>
<head>
N
<script language="javascript">
window.status="Questo è il testo della barra di stato";
function TestoBarra() {
window.status="Ora il testo è cambiato";
}
function TestoBarra2() {
window.status="Il testo è cambiato nuovamente!";
}
</script>
</head>
<body>
<p onMouseOver="TestoBarra();" onMouseOut="TestoBarra2();">Guarda il
testo nella barra di stato prima e dopo aver spostato il mouse su questa scritta</p>
</body>
</html>
ell'esempio 5.3 abbiamo visto l'uso combinato di onMouseOver e onMouseOut per
modificare il testo della barra di stato. Al caricamento della pagina del browser, nella
barra di stato compare la frase "Questo è il testo della barra di stato". Se però proviamo
a spostare il mouse sopra la scritta presente nel browser, nella barra di stato comparirà
la frase "Ora il testo è cambiato". Infine, se spostiamo il mouse all'esterno della scritta
del browser, il testo della barra di stato cambierà ancora, diventando "Il testo è cambiato
nuovamente!".
Come abbiamo potuto osservare inoltre, questi due eventi possono essere utilizzati
anche con i tag <p>...</p>, ma anche con i tag <a>...</a>, le immagini e le mappe.
Pressione di un tasto
Un altro evento Javascript è onKeyPress che rileva una singola pressione di tasto per
far partire uno script o anche un'intera funzione.
All'interno del codice, il tasto che genera l'evento è indicato come
window.event.keyCode. Questo evento si rivelerà utile soprattutto per rendere
accessibile il vostro sito anche ai portatori di handicap che potranno così esplorare il
sito solo con la tastiera. Vediamo ora un esempio di come utilizzare onKeyPress
Esempio 5.4
<html>
<head></head>
<body>
<form name="esempio">
<input type="text" name="text1" value="ciao" onkeypress="if
(window.event.keyCode == '100')
document.esempio.text1.value='Hai premuto il tasto d';"/>
</form>
</body>
</html>
Oltre all'evento onKeyPress esistono anche gli eventi onKeyDown e onKeyUp che
generano eventi rispettivamente alla pressione e al rilascio di un tasto. E' ovviamente
possibile usare questi due eventi in maniera combinata.
Impostazione e perdita dello stato attivo
Impostare lo stato attivo di un elemento di una pagina Web significa assegnargli il
focus, determinare cioè quale elemento di una form sarà influenzato dalle azioni
dell'utente.
Per assegnare il focus ad un elemento si può procedere "manualmente" premendo il
tasto di tabulazione per recarsi sull'oggetto o facendo clic su di esso con il pulsante
del mouse, oppure chiamando l'evento onFocus.
Esempio 5.5
<html>
<head>
Nell'
<script language="javascript">
<!-function SelezionaTesto(ciao) {
ciao.select();
}
//-->
</script>
</head>
<body>
<form name="esempio">
<input type="text" name="text1" value="ciao"
onFocus="SelezionaTesto(this);">
</form>
</body>
</html>
esempio 5.5 abbiamo associato una funzione all'evento onFocus. Infatti, se
clicchiamo all'interno del campo di testo dove compare la scritta "ciao", verrà
chiamata la funzione SelezionaTesto che selezionerà il testo contenuto nel campo.
Analogamente all'evento onFocus, abbiamo l'evento onBlur che viene generato
quando un elemento perde lo stato attivo. Un utilizzo intelligente di questo evento
avviene ad esempio quando vogliamo controllare che l'utente non lasci vuoto un
campo di una form.
Esempio 5.6
<html>
<head> </head>
<body>
N
<form name="esempio">
<input type="text" name="text1" onBlur="if (this.value == '') {alert('Non
puoi lasciare il campo vuoto'); this.focus();}">
</form>
</body>
</html>
ell'esempio 5.6 ricordiamo all'utente che abbandona un campo senza avervi scritto
niente, di riempire suddetto campo. Infatti, quando clicchiamo con il mouse
all'esterno del campo di testo, viene generato l'evento onBlur che, dopo aver
visualizzato un messaggio di allerta che dice di non lasciare il campo vuoto,
reimposta il focus proprio su quel campo di testo, in maniera tale da favorire
l'immissione di dati.
Modifica dei dati
Quando creiamo una form per ottenere dei dati dall'utente, è consigliabile in certi
casi utilizzare dei dati "preconfezionati" tra i quali l'utente deve semplicemente
scegliere e non inserire dati di propria iniziativa. Ciò al fine di evitare problemi di
convalida al momento dell'invio dei dati al server.
Uno dei modi che lo sviluppatore ha per inserire in una form dei dati predefiniti è la
lista di selezione che da all'utente la possibilità di fare una scelta tra le varie opzioni
contenute in essa. Usando l'evento onChange si può rilevare quando viene
selezionata una voce dalla lista e associarvi uno specifico script. Quando l'evento
onChange viene utilizzato con i campi di testo può rivelarci quando varia il testo
contenuto all'interno di questi campi.
Esempio 5.6
<html>
<head> </head>
<body>
<form name="esempio">
<select name="select1" size="1"
onchange="document.esempio.text1.value='500 Euro';">
<option>stampante</option>
<option>monitor</option>
</select>
<input type="text" name="text1" value="gratis">
</form>
</body>
</html>
ell'esempio 5.6 abbiamo creato una lista di selezione a due voci: stampante e
monitor. Quando selezioniamo la voce "monitor", cambia il contenuto del campo di
testo posto a fianco della lista, che diventa "500 Euro". Questo è stato possibile
grazie all'evento onchange che ha rilevato la differente voce selezionata e di
conseguenza ha attivato lo script associato.
N
Inoltro e ripristino di una form
Come è stato già ricordato nell'introduzione a questo corso, uno dei vantaggi
principali che Javascript fornisce allo sviluppatore è quello di poter convalidare i dati
di una form senza dover ricorrere all'elaborazione di un server.
Mediante Javascript, la convalida può essere eseguita singolarmente campo per
campo oppure complessivamente a livello di form. A tale scopo ci viene in aiuto
l'evento onSubmit che si verifica prima dell'inoltro di una form. Se l'evento
onSubmit restituisce il valore false, verra eseguito lo script che segue l'evento,
mentre se restituisce qualsiasi altro risultato la form sarà inviata.
Simile all'evento onSubmit è l'evento onReset, tipicamente associato al tasto Reset di
una form e che precede il resettaggio della stessa. Un utile utilizzo di questo evento
può avvenire se si associa uno script di conferma di resettaggio dati all'utente prima
di procedere definitivamente alla cancellazione dei dati.
Esempio 5.7
<html>
<head>
N
<script language="javascript">
<!-function ConfermaReset() {
return confirm('Sei sicuro di voler azzerare i dati?');
}
//-->
</script>
</head>
<body>
<form action="URL_di_riferimento" method="post" onReset="return
ConfermaReset();">
Nome:<input type="text" name="nome"/>
Cognome:<input type="text" name="cognome"/>
<input type="submit" name="invio" value="Invia"/> <input type="reset"
name="reset" value="Cancella"/>
</form>
</body>
</html>
ell'esempio 5.7 abbiamo creato una semplicissima form dotata di due campi testo per
l'inserimento del nome e del cognome dell'utente. Quando l'utente preme il tasto
Invia, la form viene inviata all'URL di riferimento per l'elaborazione dei dati, ma se
l'utente clicca sul tasto Cancella, prima che i dati vengano resettati, compare un
messaggio di conferma a questa operazione che supporta l'utente nel caso in cui
abbia premuto per errore il tasto di reset.
Caricamento e scaricamento della pagina
Chi non ha mai visitato siti Internet che presentano all'apertura della pagina una
finestra pop-up, contenente pubblicità o comunicazioni del web-master agli utenti?
Il caricamento di una pagina Web è sicuramente un momento importante della visita
di un sito, ed è per questo che spesso gli sviluppatori vi associano l'evento onLoad.
Questo evento, come già detto, può essere utilizzato per far comparire una finestra
aggiuntiva (spesso di piccole dimensioni), o anche per notificare all'utente quando la
pagina ha finito di caricarsi o ancora per accertarsi che tutta la grafica è stata
scaricata dal server prima di eseguire uno script nella pagina.
L'evento opposto ad onLoad è l'evento onUnload che viene generato quando l'utente
lascia la pagina corrente oppure quando la pagina viene resettata usando il pulsante
Refresh del browser.
Esempio 5.8
<html>
<head></head>
Ne
<body onLoad="alert('Benvenuto nella mia pagina Web');"
onUnload="alert('Grazie per la tua visita. Ciao');">
</body>
</html>
ll'esempio 5.8 abbiamo inserito entrambi gli eventi trattati in questa lezione. Quando
apriamo la pagina Web nel nostro browser, compare subito la scritta "Benvenuto
nella mia pagina Web". Quando invece usciamo da essa, compare la scritta "Grazie,
per la tua visita. Ciao".
I timer Javascript
Anche Javascript, come altri ambienti di programmazione, utilizza eventi timer che
vengono generati allo scadere di un determinato intervallo di tempo. Questi eventi
possono essere utili per stabilire quando debba essere eseguita una certa azione sulla
pagina Web.
L'evento che rende possibile i timer è la funzione setTimeout() che accetta due
parametri: il primo è l'istruzione da eseguire, il secondo è il tempo da aspettare prima
che l'istruzione venga eseguita. Da notare come questo valore è espresso in millesimi
di secondo, quindi, se vogliamo attendere 10 secondi prima di generare un evento,
dobbiamo impostare 10000 millisecondi.
Esempio 5.9
<html>
<head>
In
<script language="javascript">
<!-function CambiaScritta() {
document.write("Ecco la nuova scritta!");
}
//-->
</script>
</head>
<body onLoad="window.setTimeout('CambiaScritta()', 5000)">
Tra 5 secondi comparirà una nuova scritta...
</body>
</html>
questo esempio, al caricamento della pagina, il timer comincerà a "contare" 5 secondi
prima di chiamare la funzione CambiaScritta che visualizzerà nella pagina del
browser "Ecco la nuova scritta!"
Se il metodo setTimeout() esegue l'istruzione solo una volta, abbiamo a nostra a
disposizione un altro evento che imposta invece delle pause multiple, cioè ripete con
regolarità la stessa istruzione. Lo stesso risultato possiamo ottenerlo immettendo
l'evento setTimeout all'interno di un loop for o while, ma mediante la funzione
setInterval() possiamo raggiungere questo risultato con più celerità.
