Introduzione a Javascript Programmazione Web Introduzione a Javascript
Javascript - Definizione JavaScript è un linguaggio di scripting lato-client, ossia un linguaggio di programmazione interpretato dal browser che prevede la scrittura di script Uno script è un piccolo programma (contenuto o importato in una pagina HTML) che viene interpretato ed eseguito dal browser Mediante l’uso di script è possibile creare dinamicamente i contenuti di una pagina web e aggiungere interattività alla pagina stessa (con un occhio alle prestazioni) Javascript NON É Java: JavaScript e Java sono due linguaggi di programmazione differenti!!! Programmazione Web - Introduzione a Javascript 2
Programmazione Web - Introduzione a Javascript Javascript – Lo script Gli script JavaScript possono essere: contenuti in uno o più file di testo con estensione js e linkati al file HTML con il tag script che va inserito fra i tag head <head> <script type=“text/javascript” src=“myScript.js”/> <head> contenuti nel file HTML, inseriti come testo all’interno del tag script <script type=“text/javascript”> ... </script> Programmazione Web - Introduzione a Javascript 3
Inserire lo script in una pagina Esistono inoltre alcuni attributi HTML in cui si può incorporare del codice: gli attributi per la gestione degli eventi, come onclick, possono contenere frammenti di codice (ma non dichiarazioni), da eseguire al verificarsi dell’evento l’attributo href del tag <a> può fare riferimento a una funzione javascript con la sintassi: javascript:nome_funzione(parametri); in questo caso, il click del link eseguirà la chiamata alla funzione Programmazione Web - Introduzione a Javascript 4
Esecuzione di uno script Tutte le funzioni e le variabili dichiarate negli script diventano disponibili (quindi possono essere usate e chiamate) non appena il parser analizza il punto della pagina in cui sono dichiarate Se uno script contiene codice immediato, cioè scritto al di fuori di funzioni, questo viene eseguito non appena il parser analizza il punto della pagina in cui il codice compare Gli script possono utilizzare liberamente funzioni e variabili dichiarate in altri script inseriti nella stessa pagina. Programmazione Web - Introduzione a Javascript 5
Programmazione Web - Introduzione a Javascript Alcuni esempi (I) Programmazione Web - Introduzione a Javascript 6
Programmazione Web - Introduzione a Javascript Alcuni esempi (II) Programmazione Web - Introduzione a Javascript 7
Programmazione Web - Introduzione a Javascript Alcuni esempi (II) Programmazione Web - Introduzione a Javascript 8
Programmazione Web - Introduzione a Javascript Alcuni esempi (II) Programmazione Web - Introduzione a Javascript 9
Programmazione Web - Introduzione a Javascript Alcuni esempi (III) Programmazione Web - Introduzione a Javascript 10
Programmazione Web - Introduzione a Javascript Alcuni esempi (III) Programmazione Web - Introduzione a Javascript 11
Programmazione Web - Introduzione a Javascript Alcuni esempi (III) Programmazione Web - Introduzione a Javascript 12
Programmazione Web - Introduzione a Javascript Alcuni esempi (IV) Programmazione Web - Introduzione a Javascript 13
Programmazione Web - Introduzione a Javascript Alcuni esempi (IV) Programmazione Web - Introduzione a Javascript 14
Partiamo dalla sintassi... JavaScript è un linguaggio di programmazione case sensitive ossia fa distinzione tra lettere maiuscole e minuscole num è diverso da Num Ogni singola istruzione va conclusa con il punto e virgola!! alert(“Hello world!!!”); I commenti all’interno di uno script vanno inseriti tra i caratteri /* e */ oppure dopo // per commenti su una riga /* questo è un commento */ Programmazione Web - Introduzione a Javascript 15
Programmazione Web - Introduzione a Javascript Tipi di dati In Javascript possiamo avere i seguenti tipi di dati Numeri - in JavaScript non vi è differenza tra numeri interi e numeri in virgola mobile Stringhe - una stringa è formata da una sequenza di zero o più caratteri racchiusi tra apici singoli o doppi (‘ o “): “casa” è la stringa casa “casa ‘Pisa’” è la stringa casa ‘Pisa’ ‘casa “Pisa”’ è la stringa casa “Pisa” Valori Booleani - è un dato che esprime un “valore di verità” e può assumere solo due valori true e false Array o Oggetti, che vedremo dettagliatamente più avanti Programmazione Web - Introduzione a Javascript 16
Dichiarazione di variabile Una variabile viene dichiarata mediante l’uso della parola chiave var: var i; dichiara la variabile i var j = 0; dichiara la variabile j e le assegna il valore 0 var s = “casa”; dichiara la variabile s e le assegna il valore “casa” Se una variabile viene ri-dichiarata, non perde il suo valore Programmazione Web - Introduzione a Javascript 17
Variabili locali e globali var s = “pluto”; variabile s locale di tipo stringa con valore iniziale “pluto” var n = 3; variabile n locale di tipo numerico con valore 3 t = “paperino”; variabile t globale di tipo stringa con valore iniziale “paperino” m = n; variabile m globale di tipo numerico con valore 3 u = v; la variabile u ha valore undefined (in quanto v non è a sua volta definita) var b = (3>2); variabile b locale booleana con valore true var o = new Object(); variabile o locale di tipo Object (vuota) Programmazione Web - Introduzione a Javascript 18
Programmazione Web - Introduzione a Javascript Operatori aritmetici Somma (+) somma due numeri oppure concatena due stringhe (o concatena numeri a stringhe) Sottrazione (-) sottrae il secondo numero dal primo Prodotto (*) moltiplica tra loro due numeri Divisione (/) divide il primo numero per il secondo Modulo (%) restituisce il resto della divisione intera del primo operando per il secondo 5 % 2 = 1 Incremento/Decremento (++/--) l’operatore ++ (--) aumenta (diminuisce) di una unità il valore di una variabile (attenzione all'uso post-fisso e pre-fisso) i = i + 1; è analogo a i++; i = i – 1; è analogo a i--; Assegnamento (= += -= *= /= %=) esegue l'operazione ed effettua l'assegnamento del valore dell'espressione che sta a destra dell'operatore alla variabile che sta a sinistra i += 10; è analogo a i = i + 10; Programmazione Web - Introduzione a Javascript 19
Operatori di confronto Sono operatori che verificano una relazione tra due operandi e restituiscono un valore booleano (true o false) a seconda che la relazione sia o meno verificata Sono: Uguaglianza (==) Uguaglianza esatta (===), cioè con stesso valore e stesso tipo Disuguaglianza (!=) Minore di (<) Maggiore di (>) Minore o uguale a (<=) Maggiore o uguale a (>=) Programmazione Web - Introduzione a Javascript 20
Programmazione Web - Introduzione a Javascript Operatori logici AND (&&) restituisce un valore true se e solo se il primo operando e il secondo sono entrambi veri. Se uno o entrambi gli operandi sono falsi restituisce false OR (||) restituisce un valore true se il primo operando o il secondo o entrambi sono veri. Se entrambi gli operandi sono falsi restituisce false NOT (!) è un operatore unario, ossia si applica ad un solo operando. Restituisce il valore false se l’operando è vero, viceversa restituisce true se l’operando è falso Programmazione Web - Introduzione a Javascript 21
Operatore condizionale In Javascript esiste un operatore condizionale che assegna ad una variabile un valore a seconda di una particolare condizione nome_variabile=(condizione)?valore1:valore2 Programmazione Web - Introduzione a Javascript 22
Programmazione Web - Introduzione a Javascript Operatori - Esempi var s = “tre ” + 2; la stringa s vale “tre 2” s += “ uno”; la stringa s vale “tre 2 uno” s > “ciao”; l’espressione vale true, in quanto il valore di s è lessicograficamente successivo a “ciao” typeof(s); restituisce “string” eval(“3+1”); restituisce 4 eval(“f(x)”); esegue lo script, chiamando f(x) e restituendo il valore di ritorno della chiamata eval(“var s=1”); dichiara la variabile s e le assegna il valore 1 void(f(x)); esegue f(x) ed ignora il suo valore di ritorno Programmazione Web - Introduzione a Javascript 23
Programmazione Web - Introduzione a Javascript Il costrutto if..else if (espressione) istruzione1; else istruzione2; il costrutto if permette di decidere quale istruzione eseguire a fronte del valore dell’espressione racchiusa tra parentesi se il valore di espressione è vero allora si esegue istruzione1, altrimenti si esegue istruzione2 è possibile avere un if senza la parte else Programmazione Web - Introduzione a Javascript 24
Il costrutto if..else - Esempio Programmazione Web - Introduzione a Javascript 25
Il costrutto if..else - Esempio Programmazione Web - Introduzione a Javascript 26
Programmazione Web - Introduzione a Javascript Il costrutto switch Javascript dispone del costrutto switch con la stessa sintassi di Java: switch (espressione) { case v1: istruzioni break; case v2: istruzioni default: istruzioni } L’espressione viene valutata e confrontata con i valori dei diversi case: vengono quindi eseguite le istruzioni a partire dal primo case con lo stesso valore dell’espressione se nessun case è selezionato, vengono eseguite le istruzioni del default, se presenti se si desidera limitare l’esecuzione a un gruppo di istruzioni, è necessario introdurre la parola chiave break Programmazione Web - Introduzione a Javascript 27
Il costrutto switch - Esempio Programmazione Web - Introduzione a Javascript 28
Il costrutto switch - Esempio Programmazione Web - Introduzione a Javascript 29
Programmazione Web - Introduzione a Javascript Il ciclo for for (inizializza; test; incremento) istruzione; Il ciclo for permette di ripetere istruzione in modo ciclico fino a quando test risulta essere vero for (var i = 0; i < 10; i++) istruzione; Inizializza la variabile i con il valore zero, esegue istruzione e quindi incrementa il valore di i. A questo punto esegue il test i<0 e se questo è vero inizia da capo eseguendo di nuovo istruzione Per tutti i costrutti ciclici vale l'uso classico di break e continue Programmazione Web - Introduzione a Javascript 30
Programmazione Web - Introduzione a Javascript Il ciclo for - Esempio Programmazione Web - Introduzione a Javascript 31
Programmazione Web - Introduzione a Javascript Il ciclo for - Esempio Programmazione Web - Introduzione a Javascript 32
Programmazione Web - Introduzione a Javascript Il ciclo while while (espressione) istruzione; Il ciclo while permette di ripetere istruzione in modo ciclico fino a quando espressione risulta essere vero se espressione non è mai vera è possibile che istruzione non venga mai eseguita per fare in modo che istruzione non venga eseguita all’infinito è necessario che espressione prima o poi diventi false Programmazione Web - Introduzione a Javascript 33
Il ciclo while - Esempio Programmazione Web - Introduzione a Javascript 34
Il ciclo while - Esempio Programmazione Web - Introduzione a Javascript 35
Programmazione Web - Introduzione a Javascript Il ciclo do-while do istruzione while (espressione); Il ciclo do-while permette di ripetere istruzione in modo ciclico fino a quando espressione risulta essere vero istruzione viene eseguita almeno una volta per fare in modo che istruzione non venga eseguita all’infinito è necessario che espressione prima o poi diventi false Programmazione Web - Introduzione a Javascript 36
Il ciclo do-while - Esempio Programmazione Web - Introduzione a Javascript 37
Il ciclo do-while - Esempio Programmazione Web - Introduzione a Javascript 38
Funzioni in Javascript (I) Una funzione racchiude una porzione di codice JavaScript che può essere eseguito e viene definita mediante la parola chiave function nel seguente modo: function nomeFunzione (par1, par2) { istruzioni; ... } Programmazione Web - Introduzione a Javascript 39
Funzioni in Javascript (II) Le funzioni Javascript sono in realtà variabili con valore di tipo Function Per fare riferimento a una funzione è sufficiente usare il suo nome, o un’espressione equivalente che abbia valore di tipo Function Una volta ottenuto il riferimento a una funzione è possibile: chiamare la funzione passandole una lista di parametri è possibile omettere uno o più parametri al termine della lista; in questo caso, tali parametri varranno undefined nel corpo della funzione passare come argomento una funzione ad un’altra funzione assegnare una funzione a una o più variabili accedere a tutti gli elementi della funzione, per modificarla o ridefinirla, tramite le proprietà di Function verificare se una funzione è definita come si farebbe con qualsiasi variabile, ad esempio testandola con un if(nome_funzione) Programmazione Web - Introduzione a Javascript 40
Funzioni in Javascript (III) Le funzioni restituiscono il controllo al chiamante al termine del loro blocco di istruzioni È possibile restituire un valore al chiamante, in modo da poter usare la funzione in espressioni più complesse, utilizzando la sintassi return espressione L’espressione può essere di qualsiasi tipo; essa viene valutata e il valore risultante è restituito Se la funzione non restituisce nessun valore, Javascript sottintende un “return undefined” implicito Programmazione Web - Introduzione a Javascript 41
Programmazione Web - Introduzione a Javascript Funzioni - Esempi //funzione con due parametri, dichiarazione diretta function prodotto(a,b) { return a*b; } //oggetto funzione assegnato a una variabile var per = new Function(“a”,”b”,”return a*b;”); Programmazione Web - Introduzione a Javascript 42
Funzioni – Uso di “arguments” Programmazione Web - Introduzione a Javascript 43
Funzioni – Passaggio di parametri Il passaggio dei parametri alle funzioni Javascript avviene in maniera diversa a seconda del tipo del parametro stesso: i tipi booleano, stringa, numero e undefined sono passati per valore, cioè nella funzione è presente una copia del valore usato come argomento; cambiamenti locali alla funzione non influenzano il valore dell’argomento usato nella chiamata alla funzione stessa il tipo oggetto è passato per riferimento; la manipolazione del contenuto dell’oggetto si riflette sull’oggetto usato come argomento Programmazione Web - Introduzione a Javascript 44
Chiusura di una funzione (I) Tutto il codice Javascript viene eseguito in un contesto, compreso quello globale In particolare, ogni esecuzione di una funzione ha un contesto associato Una closure si crea proprio a partire da una funzione, quando quest’ultima restituisce come valore di ritorno una nuova funzione creata dinamicamente Programmazione Web - Introduzione a Javascript 45
Chiusura di una funzione (II) Una closure, cioè una funzione creata all'interno di un'altra funzione e poi restituita, mantiene il contesto di esecuzione della funzione che l'ha creata Questo significa che il contesto di ciascuna chiamata della funzione generatrice non viene distrutto all'uscita della closure, come avviene in generale, ma conservato in memoria La closure potrà fare riferimento (in lettura e scrittura) ai parametri e alle variabili dichiarate nel contesto della funzione che l'ha creata Programmazione Web - Introduzione a Javascript 46
Programmazione Web - Introduzione a Javascript Closure – Esempio (I) Programmazione Web - Introduzione a Javascript 47
Programmazione Web - Introduzione a Javascript Closure – Esempio (I) Programmazione Web - Introduzione a Javascript 48
Programmazione Web - Introduzione a Javascript Closure – Esempio (II) Programmazione Web - Introduzione a Javascript 49
Programmazione Web - Introduzione a Javascript Closure – Esempio (II) Programmazione Web - Introduzione a Javascript 50
Closure – Esempio (III) Programmazione Web - Introduzione a Javascript 51
Closure – Esempio (III) Programmazione Web - Introduzione a Javascript 52
Closure – Esempio (III) Programmazione Web - Introduzione a Javascript 53
Programmazione Web - Introduzione a Javascript Closure – Esempio (IV) 2010/2011 Programmazione Web - Introduzione a Javascript 54
Gestione delle eccezioni Nelle versioni più recenti di Javascript è stato introdotto anche un sistema di gestione delle eccezioni in stile Java Un’eccezione segnala un imprevisto, spesso un errore, all’interno della normale esecuzione del codice Un’eccezione può venire sollevata dalle librerie di Javascript o dal codice scritto dall’utente, attraverso la parola chiave throw Per gestire le eccezioni, è possibile avvalersi del costrutto try…catch…finally Programmazione Web - Introduzione a Javascript 55
Programmazione Web - Introduzione a Javascript Eccezioni - Esempio Programmazione Web - Introduzione a Javascript 56
Programmazione Web - Introduzione a Javascript Eccezioni - Esempio Programmazione Web - Introduzione a Javascript 57
Programmazione Web - Introduzione a Javascript La clausola throw Programmazione Web - Introduzione a Javascript 58