Guida completa su Javascript

Transcript

1 Guida completa su Javascript Cap 1 - Introduzione alla programmazione Nascita di JavaScript Incorporare JS nell'html Collegare un JS esterno Fornire un alternativa ai browser non JS Aggiungere commenti a JS Cap 2 - Le specifiche della sintassi JS Gli identificatori Capire le costanti e le variabili Gli operatori Cap 3 - Controllare il flusso del programma Introduzione Le istruzioni if...else I loop While Interrompere e continuare i loop L'istruzioni With L'istruzione Switch Cap 4 - Lavorare con le funzioni Comprendere le funzioni Dove dichiarare le funzioni Chiamata delle funzioni Varibili globali e totali Utilizzare gli argomenti Restituire valori ad una funzione Cap 5 - La gestione degli eventi new Panoramica sugli eventi JavaScript I click del mouse Spostamento del mouse sopra gli oggetti Pressione di un tasto Impostazione e perdita dello stato attivo Modifica dei dati Inoltro e ripristino di una form Caricamento e scaricamento della pagina 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

2 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>...) 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> 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>... 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

3 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

4 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 controllaform() firstcont v numcalc Identificatori validi controlla Form first.cont 2v return Identificatori non validi 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

5 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

6 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).

7 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

8 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

9 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: 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

10 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

11 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.

12 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> modificare con un click del mouse il contenuto del pulsante "prima". Esso infatti viene modificato in "dopo".

13 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> 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

14 <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> 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>

15 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">  </script> </head> <body> <form name="esempio"> <input type="text" name="text1" value="ciao" onfocus="selezionatesto(this);"> </form> 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

16 <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> 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> N <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> 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.

17 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">  </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> 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

18 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');"> 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 millisecondi. Esempio 5.9

19 <html> <head> In <script language="javascript">  </script> </head> <body onload="window.settimeout('cambiascritta()', 5000)"> Tra 5 secondi comparirà una nuova scritta... 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à.