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
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
Alcuni esempi (I)
Programmazione Web - Introduzione a
Javascript
6
Alcuni esempi (II)
Programmazione Web - Introduzione a
Javascript
7
Alcuni esempi (II)
Programmazione Web - Introduzione a
Javascript
8
Alcuni esempi (II)
Programmazione Web - Introduzione a
Javascript
9
Alcuni esempi (III)
Programmazione Web - Introduzione a
Javascript
10
Alcuni esempi (III)
Programmazione Web - Introduzione a
Javascript
11
Alcuni esempi (III)
Programmazione Web - Introduzione a
Javascript
12
Alcuni esempi (IV)
Programmazione Web - Introduzione a
Javascript
13
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
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
valore iniziale “pluto”
locale di tipo stringa con
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)
var n = 3;
Programmazione Web - Introduzione a
Javascript
18
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
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
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
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
Il costrutto switch
Javascript dispone del costrutto switch con la stessa sintassi di Java:
switch (espressione) {
case v1: istruzioni
break;
case v2: istruzioni
break;
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
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
Il ciclo for - Esempio
Programmazione Web - Introduzione a
Javascript
31
Il ciclo for - Esempio
Programmazione Web - Introduzione a
Javascript
32
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
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
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
Closure – Esempio (I)
Programmazione Web - Introduzione a
Javascript
47
Closure – Esempio (I)
Programmazione Web - Introduzione a
Javascript
48
Closure – Esempio (II)
Programmazione Web - Introduzione a
Javascript
49
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
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
Eccezioni - Esempio
Programmazione Web - Introduzione a
Javascript
56
Eccezioni - Esempio
Programmazione Web - Introduzione a
Javascript
57
La clausola throw
Programmazione Web - Introduzione a
Javascript
58