1. E L E M E N T I B A S E D E L L I N G U A G G I O
P R O G R A M M A Z I O N E A O G G E T T I
I N T R O D U Z I O N E A J Q U E R Y
MATTEO CESERANI
Introduzione a JavaScript
26/11/2013
1
Matteo Ceserani
2. C O S ’ È J A V A S C R I P T
P R I M I E S E M P I
V A R I A B I L I
O P E R A T O R I
S T R U T T U R E D I C O N T R O L L O
F U N Z I O N I
E V E N T I
G E S T I O N E D E G L I E R R O R I
Elementi di base del linguaggio
26/11/2013
2
Matteo Ceserani
3. Cos’è JavaScript?
JavaScript è stato progettato per aggiungere
interattività alle pagine HTML
JavaScript viene normalmente incapsulato nel codice delle
pagine HTML
JavaScript è un linguaggio di scripting
Un linguaggio di scripting è un linguaggio di programmazione
leggero
JavaScript è un linguaggio interpretato (viene cioè
eseguito senza essere compilato)
Può quindi essere utilizzato senza acquistare alcun software
26/11/2013
3
Matteo Ceserani
4. Cosa si può fare con JavaScript
JavaScript fornisce ai progettisti HTML uno strumento
per la programmazione
Chi scrive in HTML spesso non è un programmatore in senso stretto,
ma JavaScript è un linguaggio di scripting con una sisntassi molto
semplice! Quasi tutti possono riuscire a incapsulare qualche brano di
codice JavaScript nelle loro pagine HTML
JavaScript può reagire agli eventi
Uno script JavaScript può essere configurato per eseguire delle
azioni in risposta al verificarsi di determinati eventi, ad esempio
quando il caricamento di una pagina termina oppure quando un
utente fa click su un determinato elemento
26/11/2013
4
Matteo Ceserani
5. Cosa si può fare con JavaScript
26/11/2013Matteo Ceserani
5
JavaScript può leggere e scrivere gli elementi HTML
Javascript può modificare in tempo reale il contenuto degli
elementi HTML di una pagina
JavaScript può essere utilizzato per validare i dati
JavaScript può essere utilizzato per validare i dati di un form
prima che vengano inviati a un server. Questo evita di
appesantire il server
6. Cosa si può fare con JavaScript
26/11/2013Matteo Ceserani
6
JavaScript può essere utilizzato per rilevare il
browser dei visitatori
Si può utilizzare JavaScript per capire che browser utilizza un
visitatore di un sito e visualizzare di conseguenza diverse
versioni di una pagina HTML
JavaScript può essere utilizzato per creare dei
cookies
Uno script può essere utilizzato per memorizzare informazioni
sul computer del visitatore di un sito
7. Il mio primo script
Non è bene utilizzare il metodo write() sull’oggetto
document in un contesto professionale.
Tale metodo infatti sovrascrive completamente il codice HTML della
pagina, se viene utilizzato in una funzione o dopo il caricamento
della pagina.
All’interno di un semplice tutorial invece il suo utilizzo è pienamente
giustificato.
<html>
<body>
<h1>La mia prima pagina web dinamica</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
26/11/2013
7
Matteo Ceserani
8. Un secondo esempio
Il metodo getElementById()restituisce un elemento della pagina
La proprietà innerHTML restituisce/imposta il codice HTML
contenuto nell’elemento
La funzione Date() restituisce la data corrente
Lo script è posizionato in fondo alla pagina per fare in modo che il
tag <p id=“demo”></p> venga creato prima dell’esecuzione
<html>
<body>
<h1>La mia seconda pagina web dinamica</h1>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
26/11/2013
8
Matteo Ceserani
9. Non tutti i browser supportano JavScript
Se un browser non supporta JavaScript, lo visualizza
come puro testo
Per evitare questo, il codice JavaScript dovrebbe essere
incapsulato in un tag HTML di commento
<html>
<body>
<script type="text/javascript">
<!--
document.getElementById("demo").innerHTML=Date();
-->
</script>
</body>
</html>
26/11/2013
9
Matteo Ceserani
10. JavaScript nel tag <body> e nel tag <head>
Uno script posizionato nel tag <body> viene
eseguito quando il browser lo legge, durante il
parsing del codice HTML
A volte però si desidera che uno script venga eseguito
al verificarsi di un determinato evento, come il click
su un pulsante.
Per ottenere questo occorre inserire lo script in una funzione.
È quindi possibile fare in modo che al verificarsi di un preciso
evento venga eseguita una precisa funzione.
Tipicamente le funzioni vengono implementate nel tag
<head> della pagina HTML
26/11/2013
10
Matteo Ceserani
11. La mia prima funzione JavaScript
<html>
<head>
<script type="text/javascript">
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>Un’altra pagina dinamica</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Visualizza data
</button>
</body>
</html>
26/11/2013
11
Matteo Ceserani
12. Utilizzare uno script da un file esterno
Questa tecnica è molto utile quando si desidera
utilizzare gli stessi script in più pagine HTML
Attenzione:
L’estensione del file deve essere .js
Il file .js non deve contenere i tag <script> e </script>!
<html>
<head>
<script type="text/javascript" src= "ScriptFile.js"></script>
</head>
<body></body>
</html>
26/11/2013
12
Matteo Ceserani
13. Commenti in JavaScript
Sono analoghi a quelli di Java o del C++
Commento su singola linea
// Commento
Commento su più linee
/* Commento */
Ricorda bene…
Commentare il codice è una buona abitudine!
26/11/2013
13
Matteo Ceserani
14. Variabili
Le variabili in JavaScript non vengono dichiarate con un tipo
specifico (var).
Possono anche non essere formalmente dichiarate. In tal caso
vengono create nel momento in cui vengono inizializzate per la
prima volta.
I nomi delle variabili possono inziare solo con una lettera, con
underscore (_) o con il carattere dollaro ($)
JavaScript è case sensitive!
var x = 5;
var automobile;
automobile = “Ypsilon”;
y = x - 10;
26/11/2013
14
Matteo Ceserani
15. Variabili locali e globali
Una variabile dichiarata all’interno di una funzione è
visibile solo all’interno della funzione stessa
È una variabile locale.
Una variabile dichiarata all’esterno di una funzione è
utilizzabile da qualsiasi script contenuto nella pagina
HTML, anche all’interno di funzioni
È una variabile globale.
Attenzione:
Una variabile dichiarata senza la parola chiave var, anche
all’interno di una funzione, viene creata come variabile globale.
26/11/2013
15
Matteo Ceserani
16. Tipi di dato
26/11/2013Matteo Ceserani
16
JavaScript possiede i seguenti tipi di dato predefiniti
String
Number
Boolean
Array
Object
Null
Undefined
Il tipo di una variabile non è staticamente definito, ma
può variare durante l’esecuzione dello script.
var x; // Tipo di x: Undefined
x = 5; // Ora x è di tipo Number
x = "John"; // Ora x è di tipo String
17. Tipi di dato
26/11/2013Matteo Ceserani
17
Stringhe
Le stringhe sono delimitate dagli apici singoli o doppi.
var carname="Volvo XC60";
var carname='Volvo XC60';
È possibile inserire virgolette nelle stringhe utilizzando
alternativamente apici singoli e doppi.
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
18. Tipi di dato
26/11/2013Matteo Ceserani
18
Numeri
JavaScript ha un solo tipo di numero
var x1=34.00; // Con decimali
var x2=34; // Senza decimali
var y=123e5; // 12300000
var z=123e-5; // 0.00123
Boolean
Possiede solo i due valori true e false.
var x=true;
var y=false;
19. Tipi di dato
26/11/2013Matteo Ceserani
19
Array (vettori)
Funzionano esattamente come in C o in Java
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
Dichiarazioni alternative
var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];
Ne parleremo più avanti (nella sezione dedicata agli oggetti).
20. Tipi di dato
26/11/2013Matteo Ceserani
20
Undefined
Undefined è il tipo di una variabile quando viene dichiarata senza
assegnarle un valore.
Null
Il valore Null può essere utilizzato per resettare il valore di una variabile.
cars=null;
person=null;
È possibile dichiarare una variabile con un tipo esplicito.
var x = new Number;
var y = new Boolean;
var cars = new Array;
Perché new? Perché tutte le variabili sono oggetti.
E cos’è un oggetto? Se ne parla più avanti.
22. Operatori di assegnamento
Operatore Esempio Equivale a Risultato
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
var x = 10;
var y = 5;
26/11/2013
22
Matteo Ceserani
23. Concatenazione tra stringhe
L’operatore + può essere utilizzato per concatenare tra
loro due o più stringhe.
Un caso particolare riguarda la possibilità di sommare un
numero intero e una stringa.
Il risultato sarà in tal caso una stringa!
Anche l’operatore += può essere utilizzato con le stringhe
txt1 = "What a very";
txt2 = "nice day";
txt3 = txt1 + " " + txt2;
// Risultato: “What a very nice day”
txt3 = 10 + "5";
// Risultato: “105”
26/11/2013
23
Matteo Ceserani
24. Caratteri speciali
Codice Output
' single quote
" double quote
backslash
n new line
r carriage return
t tab
b backspace
f form feed
È possibile inserire nelle stringhe i seguenti
caratteri speciali utilizzando il carattere backslash.
26/11/2013
24
Matteo Ceserani
25. Linee di codice su più righe
È possibile spezzare una linea di codice utilizzando il
carattere backslash.
Questo però può avvenire solo all’interno di una stringa di
testo.
document.write("Hello
World!"); // Interruzione corretta
document.write
("Hello World!");
// Interruzione NON corretta
26/11/2013
25
Matteo Ceserani
26. Operatori di confronto
Operatore Descrizione Esempio
== È uguale a x==8 è falso
x==5 è vero
=== È strettamente uguale a (valore e
tipo)
x===5 è vero
x==="5" è falso
!= Non è uguale a x!=8 è vero
> È maggiore di x>8 è falso
< È minore di x<8 è vero
>= È maggiore o uguale di x>=8 è falso
<= È minore o uguale di x<=8 è vero
var x = 5;
26/11/2013
26
Matteo Ceserani
27. Operatori logici
Operatore Descrizione Esempio
&& and (x < 10 && y > 1) è vero
|| or (x==5 || y==5) è falso
! not !(x==y) è vero
var x = 3;
var y = 6;
Operatore Descrizione
& and
| or
^ xor
˜ Complemento a 1
Operatori logici
bitwise
Gli operatori logici bitwise
possono essere utilizzati
anche nella forma op= :
!= ^= &=
26/11/2013
27
Matteo Ceserani
28. Operatori di shift
Operatore Descrizione
<< Shift a sinistra
>> Shift a destra
>>> Shift a destra senza riporto
<<< Shift a sinistra senza riporto
<<= Shift a sinistra con assegnamento
>>= Shift a destra con assegnamento
>>>= Shift a destra senza riporto con assegnamento
<<<= Shift a sinistra senza riporto con assegnamento
26/11/2013
28
Matteo Ceserani
29. Operatore condizionale
variabile = (condizione) ? valore1 : valore2;
Assegna alla variabile variabile il valore
valore1 se (condizione) è vera, altrimenti le
assegna il valore valore2.
<script type="text/javascript">
var visitor="PRES";
var greeting=(visitor=="PRES")?"Dear President ":"Dear ";
document.write(greeting);
</script>
26/11/2013
29
Matteo Ceserani
30. Il costrutto di selezione If
Funziona esattamente come
in C o in Java
if (condizione_1)
{
/* Istruzioni */
}
else if (condizione_2)
{
/* Istruzioni */
}
else
{
/* Istruzioni */
}
26/11/2013
30
Matteo Ceserani
31. Esempio di costrutto If
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<strong>Good morning</strong>");
}
else if (time>=10 && time<16)
{
document.write(“<strong>Good day</strong>");
}
else
{
document.write("<strong>Hello World!</strong>");
}
</script>
26/11/2013
31
Matteo Ceserani
32. Il costrutto di selezione Switch
switch(variabile)
{
case 1:
// Istruzioni
break;
case 2:
// Istruzioni
break;
default:
// Istruzioni
}
Funziona esattamente come
in C o in Java
26/11/2013
32
Matteo Ceserani
33. Esempio di costrutto Switch
Il metodo getDay()
applicato a un oggetto di
classe Date restituisce un
intero che rappresenta il
giorno della settimana.
<script type="text/javascript">
var d = new Date();
var theDay = d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>
26/11/2013
33
Matteo Ceserani
34. Pop-up box
Javascript possiede 3 tipi di box pop-up:
Alert box alert(“testo”);
Confirm box confirm(“testo”);
Prompt box prompt(“testo”,“default”);
Una alert box viene utilizzata per visualizzare delle informazioni per
l’utente.
Per procedere l’utente deve fare click su un pulsante OK.
Una confirm box viene utilizzata per chiedere all’utente di accettare
o confermare qualcosa.
Per procedere l’utente deve fare click su OK o Cancel.
Se l’utente fa click su OK la box restituisce True, altrimenti restituisce False.
Una prompt box viene utilizzata per chiedere all’utente di inserire
un valore.
Per procedere l’utente deve fare click su OK o Cancel dopo aver inserito il valore
nel prompt.
Se l’utente fa click su OK la box restituisce il valore inserito dall’utente, altrimenti
restituisce Null.
26/11/2013
34
Matteo Ceserani
35. Esempio di alert box
<html>
<head>
<script type = "text/javascript">
function show_alert()
{
alert("Sono una alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()"
value="Show alert box" />
</body>
</html>
26/11/2013
35
Matteo Ceserani
36. Esempio di confirm box
<html>
<head>
<script type = "text/javascript">
function show_confirm()
{ var r = confirm("Press a button");
if (r == true)
{ alert("You pressed OK!"); }
else
{ alert("You pressed Cancel!"); }
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show
confirm box" />
</body>
</html>
26/11/2013
36
Matteo Ceserani
37. Esempio di prompt box
<html>
<head>
<script type="text/javascript">
function show_prompt()
{ var name = prompt(“Inserisci il tuo nome:","Harry
Potter");
if (name != null && name != "")
{ document.write("<p>Buongiorno " + name + "!</p>"); }
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show
prompt box" />
</body>
</html>
26/11/2013
37
Matteo Ceserani
38. Le funzioni in JavaScript
Per evitare che il browser esegua uno script
immediatamente al caricamento di una pagina HTML,
occorre incapsulare il codice JavaScript in una funzione.
Una funzione contiene codice che verrà eseguito al verificarsi di un
evento o nel momento in cui la funzione viene invocata.
Una funzione può essere invocata in qualsiasi punto di
una pagina HTML.
Le funzioni possono essere definite sia nel tag <body> che ne tag
<head> di una pagina HTML.
In genere però, per essere sicuri che una funzione venga caricata
prima di essere invocata, in genere tutte le funzioni vengono
dichiarate nel tag <head>.
26/11/2013
38
Matteo Ceserani
39. Definizione di una funzione
Nell’elenco dei parametri non compare la parola chiave
var
Il passaggio dei parametri avviene tramite un array
chiamato arguments[] (in seguito se ne mostrerà
l’utilizzo con un esempio)
L’istruzione return è opzionale
function nome(var1,var2,...,varN)
{
// Codice della funzione
[return espressione;]
}
26/11/2013
39
Matteo Ceserani
40. Esempio di funzione
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a * b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>
26/11/2013
40
Matteo Ceserani
41. La parola chiave function
L’operatore function permette di implementare
una funzione anonima.
Il valore restituito dalla funzione viene assegnato alla
variabile (o costante) nome.
Operatore molto utile in ambito AJAX
Ma non solo: Windows 8
[var | const] nome = function(<parametri>)
{
// Istruzioni
};
26/11/2013
41
Matteo Ceserani
42. Il ciclo for
Funziona tutto come in C o in Java
Si tratta di un ciclo molto flessibile (anche se non tutti lo sanno…)
Implementazione classica:
for (<cond. iniziale>; <cond. di mantenimento>; <incremento>)
{
// Istruzioni
}
for (variabile = startvalue;
variabile <= endvalue;
variabile = variabile + incremento)
{
// Istruzioni
}
26/11/2013
42
Matteo Ceserani
43. Esempio di ciclo for
<html>
<body>
<script type="text/javascript">
var i = 0;
for (i = 0;i <= 5;i++)
{
document.write(“Il numero è " + i);
document.write("<br />");
}
</script>
</body>
</html>
26/11/2013
43
Matteo Ceserani
44. Il ciclo while/do-while
Tutto funziona esattamente come nel C o in Java
Il ciclo continua a essere eseguito finché la condizione di
mantenimanto rimane vera
Nel ciclo do-while le istruzioni vengono eseguite almeno una volta
while(<cond. di mantenimento>){
// Istruzioni
}
do{
// Istruzioni
}while(<cond. di mantenimento>);
26/11/2013
44
Matteo Ceserani
45. Esempio di ciclo while
<html>
<body>
<script type="text/javascript">
var i = 0;
while (i <= 5)
{
document.write(“Il numero è " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>
26/11/2013
45
Matteo Ceserani
46. Le istruzioni break e continue – Le etichette
L’istruzione break determina l’uscita dal ciclo in cui tale
istruzione viene eseguita.
Non permette l’uscita da cicli innestati.
Per determinare l’uscita da cicli innestati è cosigliabile utilizzare
un’etichetta.
nome_etichetta: // Cicli innestati
break nome_etichetta; // Nel ciclo più interno
L’utilizzo delle etichette è per il resto sconsigliato (come del resto
accade in tutti i linguaggi strutturati)
L’istruzione continue determina l’interruzione
dell’iterazione corrente di un ciclo e il passaggio
all’iterazione successiva.
26/11/2013
46
Matteo Ceserani
47. Esempio con break, continue ed etichette
<html>
<head>
<script type="text/javascript">
function foo(i){
return confirm("Ti piace il numero " + i + "?");
}
function main(){
ciclo: while(true){
for(var i = 0; i <= 10; i++){
if(foo(i)==true) {
break ciclo;
}
}
}
alert("Anche a me il numero " + i + " non dispiace!"); }
</script>
</head>
<body onload="main();"></body>
</html>
26/11/2013
47
Matteo Ceserani
48. Esecuzione di script in risposta a un evento
Un evento è un’azione che può essere rilevata da JavaScript.
Ogni elemento di una pagina HTML possiede determinati eventi che possono
attivare l’esecuzione di uno script.
Per esempio, possiamo utilizzare l’evento onClick definito per un tag <button>
per determinare quale script andrà eseguito nel momento in cui un utente fa click
sul pulsante:
<button type=“button” onClick=“script();”>Esegui script</button>
Esempi di eventi:
Click del mouse
Caricamento di una pagina HTML o di un’immagine
Passaggio del mouse su una parte attiva di una pagina HTML
Attivazione di un campo di input in un form
Invio dei dati di un form
Pressione di un tasto
Gli eventi vengono di norma utilizzati in combinazione con le funzioni.
Per un elenco completo degli eventi intercettati da JavaScript, si veda: Event Reference
26/11/2013
48
Matteo Ceserani
49. Esecuzione di script in risposta a un evento
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML = Date();
}
</script>
</head>
<body>
<h1>Visualizzatore di data e ora</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Data</button>
</body>
</html>
26/11/2013
49
Matteo Ceserani
50. onLoad e onUnload
Gli eventi onLoad e onUnload si verificano quando un
utente carica o chiude una pagina HTML.
L’evento onLoad è spesso utilizzato per verificare il browser
utilizzato dall’utente (tipo e versione), in modo da mostrare una
versione ottimizzata della pagina HTML.
Sia onLoad che onUnload vengono inoltre utilizzati per gestire i
cookies, che vengono letti o aggiornati quando l’utente carica una
pagina o la chiude.
Per esempio, si può utilizzare una box pop-up per chiedere il nome al
visitatore la prima volta che carica una pagina.
Il nome viene quindi memorizzato in un cookie.
La volta successiva che l’utente carica la pagina, si può visualizzare un
messaggio di benvenuto personalizzato.
26/11/2013
50
Matteo Ceserani
51. onBlur, onFocus e onChange
Gli eventi onFocus, onBlur e onChange sono
spesso utilizzati per la validazione dei form.
Per esempio, si può utilizzare l’evento onChange per validare
un indirizzo e-mail in un form.
La funzione checkEmail() verrà invocata ogni volta che il
contenuto del campo email del form viene modificato.
<input type="text" size="30" id="email"
onchange="checkEmail()" />
onFocus si verifica quando il focus della pagina si sposta su
un elemento.
onBlur si verifica quando un elemento perde il focus della
pagina
26/11/2013
51
Matteo Ceserani
52. onSubmit
L’evento onSubmit viene utilizzato per validare tutti i
campi di un form prima di inviarlo al server.
Per esempio: la funzione checkForm() verrà invocata quando
l’utente premerà il pulsante submit del form.
Se i campi del form non avranno valori accettabili, l’invio dei dati
verrà cancellato.
La funzione checkForm() restituirà i valori true o false.
Se restituirà true, il form verrà inviato, altrimenti l’invio verrà
cancellato:
<form method="post" action=“form_processing.jsp"
onsubmit="return checkForm()“>
<!– Campi del form -->
</form>
26/11/2013
52
Matteo Ceserani
54. Il costrutto try – catch
Navigando sul web, capita purtroppo a volte di
incappare in un box pop-up JavaScript di questo
tipo:
si è verificato un errore run-time: desideri effettuare il debug
del codice?
Messaggi di errore di questo tipo portano in genere l’utente ad
abbandonare la pagina web.
Il costrutto try - catch permette di testare il
verificarsi di errori durante l’esecuzione del codice.
Il blocco try contiene il codice da eseguire .
il blocco catch contiene il codice da eseguire se si verifica un
errore nel blocco try.
26/11/2013
54
Matteo Ceserani
55. Il costrutto try – catch
try
{
// Codice da eseguire
}
catch(err)
{
// Codice per la gestione degli errori
}
È una versione semplificata del
costrutto di Java.
26/11/2013
55
Matteo Ceserani
56. Il costrutto try – catch
<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
addlert("Benvenuto amico!");
}
catch(err)
{
txt="Si è verificato un errore.nn";
txt+="Descrizione: " + err.message + "nn";
txt+="Premi OK per continuare.nn";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="Vedi messaggio" onclick="message()" />
</body>
</html>
26/11/2013
56
Matteo Ceserani
57. Il costrutto try – catch
<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
addlert("Benvenuto amico!");
}
catch(err)
{
txt="Si è verificato un errore.nn";
txt+="Premi OK per continuare a visualizzare questa pagina,n";
txt+="o Cancel per ritornare alla home page.nn";
if(!confirm(txt))
{
document.location.href="http://www.daverrazzano.it/";
}
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
26/11/2013
57
Matteo Ceserani
58. L’istruzione Throw
<html>
<body>
<script type="text/javascript">
var x=prompt(“Inserisci un numero compreso tra 5 e 10:","");
try
{
if(x>10)
{ throw "Err1"; }
else if(x<5)
{ throw "Err2"; }
else if(isNaN(x))
{ throw "Err3"; }
}
catch(err)
{
if(err=="Err1")
{ document.write("Errore! Il valore è troppo alto."); }
if(err=="Err2")
{ document.write("Errore! Il valore è troppo basso."); }
if(err=="Err3")
{ document.write("Errore! Il valore non è un numero."); }
}
</script>
</body>
</html>
26/11/2013
58
Matteo Ceserani
59. C O S ’ È L A O O P
O G G E T T I P R E D E F I N I T I
Oggetti in JavaScript
26/11/2013
59
Matteo Ceserani
60. OOP JavaScript
JavaScript è un linguaggio di programmazione orientato agli oggetti
(OOP – Object Oriented Programming)
Permette al programmatore di definire le proprie classi, oltre che utilizzare quelle
fornite dalle librerie.
Cominceremo illustrando come utilizzare gli oggetti predefiniti nel
linguaggio.
String
Date
Array
Boolean
Number
Math
RegExp
La definizione di nuove classi verrà invece trattata in un successivo
tutorial (se ci sarà tempo).
26/11/2013
60
Matteo Ceserani
61. Cos’è un oggetto
26/11/2013Matteo Ceserani
61
Un oggetto è definito come un’entità appartenente a
una certa classe.
Un oggetto possiede:
Proprietà
Insieme dei dati che definiscono lo stato di un oggetto.
Metodi
Insieme delle operazioni che l’oggetto può svolgere.
La programmazione orientata agli oggetti utilizza un
paradigma diverso da quello dei linguaggi imperativi
Il programmatore non scrive una sequenza di istruzioni che
eseguite risolvono un determinato problema.
Il programmatore deve creare un modello dello scenario in cui
il problema si colloca.
62. Cos’è un oggetto
26/11/2013Matteo Ceserani
62
Esempio
Classe PERSONA
Ogni oggetto della classe persona possiede:
Proprietà
Nome
Cognome
Data di nascita
Nazionalità
Stato civile
Metodi
Parla(Persona,Messaggio)
Ascolta(Persona)
Raggiunge(Luogo)
Acquista(Oggetto,Luogo)
Regala(Oggetto,Persona)
Proprietà e metodi dipendono dal problema che si desidera risolvere.
63. Cos’è un oggetto
26/11/2013Matteo Ceserani
63
Esempio
Matteo = new Persona(“Matteo”,“Ceserani”,“27-08-
1975”,“Italiana”,“Coniugato”);
Elena = new Persona(“Elena”,“Zanaboni”,“24-05-
1979”,“Italiana”,“Coniugata”);
Messaggio = Matteo.Ascolta(Elena)
If (Messaggio == “Ciao amore!”) {
Matteo.Parla(Elena,“Ciao amore! Come stai?”);
}
else
{
Matteo.Parla(Elena,“Che succede amore? Cosa ho combinato
stavolta?”);
Matteo.Raggiunge(Fioraio);
Matteo.Aquista(MazzoDiRose,Fioraio);
Matteo.Regala(MazzoDiRose,Elena);
}
64. Proprietà di un oggetto
Le proprietà sono i valori associati a un oggetto di una certa
classe.
In questo esempio si utilizza la proprietà length di un oggetto di classe
string per determinare il numero di caratteri appartenenti alla stringa:
<script type="text/javascript">
var txt="Hello World!";
document.write(txt.length);
</script>
Il valore restituito dall’esecuzione del codice sarà:
12
Le proprietà possono essere pubbliche o private.
Le proprietà pubbliche sono direttamente accessibili.
Le proprietà private possono essere manipolate solo attraverso
opportuni metodi definiti per la classe.
26/11/2013
64
Matteo Ceserani
65. Metodi di un oggetto
I metodi sono azioni che possono essere eseguite su un
oggetto.
Ogni classe specifica proprietà e metodi validi per gli oggetti
appartenenti alla classe.
In questo esempio si utilizza il metodo toUpperCase() su un
oggetto di classe string per trasformare la stringa in tutti caratteri
maiuscoli:
<script type="text/javascript">
var str="Hello world!";
document.write(str.toUpperCase());
</script>
Il valore restituito dall’esecuzione del codice sarà:
HELLO WORLD!
26/11/2013
65
Matteo Ceserani
66. Metodi di un oggetto
26/11/2013Matteo Ceserani
66
Un particolare metodo per un oggetto è il metodo
costruttore.
Il metodo costruttore permette di creare un oggetto di una certa
classe, associandolo a una variabile riferimento.
Il metodo costruttore ha lo stesso nome della classe cui appartiene.
Il metodo costruttore accetta come parametri i valori che le proprietà
dell’oggetto devono assumere.
La chiamata del costruttore viene preceduta dalla parola chiave new.
67. La classe String
var txt = new String("string");
Come in Java questa espressione si può semplificare:
var txt = "string";
I singoli caratteri della stringa sono accessibili come gli
elementi di un vettore
var c = txt[2] // c <-- ‘r’
Caratteri speciali possono essere inseriti tramite
sequenze di escape.
26/11/2013
67
Matteo Ceserani
68. Caratteri speciali
26/11/2013Matteo Ceserani
68
Una sequenza di escape è individuata dal carattere
backslash ( ).
Sequenza di escape Carattere
’ Apice
” Virgolette
Backslash
n New line + Carriage Return
r Carriage return
t Tabulazione
b Backspace
f Espelli pagina (ormai inutilizzato)
69. Proprietà della classe String
Proprietà Descrizione
constructor Restituisce la funzione che ha
creato l’oggetto di classe String (il
costruttore)
length Restituisce la lunghezza della
stringa
prototype Permette di aggiungere delle
proprietà alla stringa
prototype è una proprietà globale disponibile per quasi tutti
gli oggetti JavaScript
Sintassi:
object.prototype.name=“StringaStrulla”
26/11/2013
69
Matteo Ceserani
70. Metodi della classe String
Metodo Descrizione
charAt() Restituisce il carattere in una certa posizione
charCodeAt() Restituisce la codifica Unicode del carattere in una certa posizione
concat() Concatena due o più stringhe, e restituisce una copia della stringa concatenata
fromCharCode() Converte valori Unicode nel corrispondente carattere
indexOf() Restituisce la posizione della prima occorrenza di un carattere in un stringa
lastIndexOf() Restituisce la posizione dell’ultima occorrenza di un carattere in un stringa
match() Ricerca le corrispondenze tra un’espressione regolare e una stringa, restituendole come risultato
replace() Ricerca le corrispondenze tra una sottostringa e un’espressione regolare e una stringa, sostituendole
nella stringa di partenza
search() Ricerca le corrispondenze tra un’espressione regolare e una stringa, restituendone la posizione come
risultato
slice() Estre una parte di una stringa, restituendola in una nuova stringa
split() Separa una stringa in un array di sotto-stringhe
substr() Estrae una serie di caratteri da una stringa, iniziando da una certa posizione e procedendo per un
certo numero di caratteri
substring() Estrae una sotto-stringa da una stringa, iniziando da una certa posizione e terminando in un’altra
toLowerCase() Converte in tutte minuscole
toUpperCase() Converte in tutte maiuscole
valueOf() Restituisce il valore grezzo di un oggetto stringa
26/11/2013
70
Matteo Ceserani
71. Metodi della classe String
26/11/2013Matteo Ceserani
71
Qualche esempio.
Lunghezza di una stringa.
var txt="Hello World!";
alert(txt.length);
Ricerca di una sottostringa.
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
alert(n);
Se la sottostringa non viene trovata l’indice restituito è -1.
Verifica della presenza di una sottostringa.
var str="Hello world!";
alert(str.match("world"));
alert(str.match("World"));
alert(str.match("world!"));
Se la sottostringa non viene trovata il valore restituito è null.
72. Metodi della classe String
26/11/2013Matteo Ceserani
72
Qualche esempio
Rimpiazzare il contenuto di una stringa.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
var str=document.getElementById("demo").innerHTML;
var n=str.replace("Microsoft","DaVerrazzano");
document.getElementById("demo").innerHTML=n;}
</script>
</head>
<body>
<p id="demo">Visita Microsoft!</p>
<button onclick="myFunction()">Prova</button>
</body>
</html>
73. Metodi della classe String
26/11/2013Matteo Ceserani
73
Qualche esempio.
Maiuscole e minuscole.
var txt="Hello World!";
var txt1=txt.toUpperCase(); // Tutte maiuscole
var txt2=txt.toLowerCase(); // Tutte minuscola
alert(txt + “n” + txt1 + “n” + txt2);
Conversione di una stringa in un vettore.
Funzione split().
Il carattere separatore viene fornito come parametro.
var txt="a,b,c,d,e"
vart txt1 = txt.split(",");
alert(txt[1] + “n” + txt1[1]);
74. I metodi wrapper della classe String
Metodo Descrizione
anchor() Crea un link a una stringa (<a>)
big() Visualizza una stringa con un font grande (<big>)
blink() Visualizza una stringa lampeggiante (<blink>)
bold() Visualizza una stringa in grassetto (<b>)
fixed() Visualizza una stringa utilizzando un carattere a spaziatura fissa(<tt>)
fontcolor() Visualizza una stringa con un font di un certo colore (<font
color="colorvalue">)
fontsize() Visualizza una stringa con un font di una certa dimensione (<font size="size">)
italics() Visualizza una stringa in corsivo (<i>)
link() Visualizza una stringa come collegamento (<link>)
small() Visualizza una stringa usando un font piccolo (<small>)
strike() Visualizza una stringa sbarrata (<strike>)
sub() Visualizza una stringa come pedice (<sub>)
sup() Visualizza una stringa come apice (<sup>)
26/11/2013
74
Matteo Ceserani
75. I metodi wrapper della classe String
26/11/2013Matteo Ceserani
75
Cos’è un metodo wrapper?
Un metodo wrapper crea del codice HTML intorno alla stringa che
invoca il metodo.
Esempio.
<!DOCTYPE html>
<html>
<body>
<script type=“text/javascript”>
var txt = "Visita il sito della nostra scuola!";
document.write("<p>Link: " +
txt.link("http://www.daverrazzano.it") + "</p>");
</script>
</body>
</html>
76. La classe Number
26/11/2013Matteo Ceserani
76
JavaScript ha un’unica classe numerica: Number.
var n = new Number(15);
Se il parametro non può essere interpretato come un numero il
numero assume il valore NaN.
Come in Java questa espressione si può semplificare:
var n = 15;
Tutti i numeri in JavaScript sono memorizzati come numeri a virgola
mobile in base 10 a 64 bit.
È possibile specificare i valori in base 8 o in base 16.
var num=0377; // Numero ottale
var num=0xFF3; // Numero esadecimale
77. Proprietà della classe Number
26/11/2013Matteo Ceserani
77
Proprietà Descrizione
constructor Restituisce il costruttore utilizzato per creare l’oggetto Number.
Number.MAX_VALUE Proprietà globale di classe. Restituisce il valore massimo che il numero può
assumere.
Number.MIN_VALUE Proprietà globale di classe. Restituisce il valore minimo che il numero può
assumere.
NEGATIVE_INFINITY Indica che si è verificato un underflow. Valore possibile: -Infinity.
POSITIVE_INFINITY Indica che si è verificato un overflow. Valore possibile: Infinity.
NaN Not a Number. Indica che il valore del numero non è valido.
prototype Vedi analoga proprietà della classe String.
var n_inf=(Number.MAX_VALUE)*2;
var n_ninf=(-Number.MAX_VALUE)*2;
alert(n_inf + “n” + n_ninf);
78. Metodi della classe Number
26/11/2013Matteo Ceserani
78
Metodo Descrizione
toExponential() Restituisce il numero in notazione esponenziale.
toFixed(n) Restituisce il numero con n cifre dopo la virgola.
toPrecision(n) Restituisce il numero con le sole n cifre più significative.
toString() Restituisce il numero come una stringa.
valueOf() Restituisce il valore del numero.
var num = new Number(13.3714);
var n2=num.toPrecision(2);
var n1=num.toPrecision(1);
var nf=num.toFixed(2);
alert(num + “n” + n2 + “n” + n1 + “n” + nf);
79. La classe Date
La classe Date è utilizzata per lavorare con date e orari
Esistono 4 modi per istanziare una data:
new Date(); // Data e ora correnti
new Date(milliseconds); // Millisecondi dal 1970/01/01
new Date(dateString);
new Date(year, month, day, hours, minutes, seconds, milliseconds);
Una volta che si è creata una data, esiste una lunga serie di metodi per operare su di
essa.
La maggior parte di essi permettono di leggere/scrivere anno, mese, giorno, ora, minuto, secondo e
millisecondo dell’oggetto utilizzando l’ora locale o l’ora UTC (o GMT, di Greenwich).
Tutte le date sono calcolate in millisecondi a partire da 01 Gennaio, 1970 00:00:00
Universal Time (UTC).
Un giorno contiene 86,400,000 millisecondi.
I valori numerici dei mesi partono da 0.
Alcuni esempi:
var today = new Date();
var d1 = new Date("October 13, 1975 11:13:00");
var d2 = new Date(79,4,24);
var d3 = new Date(79,4,24,11,33,0);
26/11/2013
79
Matteo Ceserani
80. Impostare un oggetto Date
Esiste una grande quantità di metodi per manipolare
gli oggetti di classe Date.
Impostare un oggetto di classe Date a un valore specifico (14
Gennaio 2010):
var myDate=new Date();
myDate.setFullYear(2010,0,14);
Impostare un oggetto di classe Date 5 giorni nel futuro:
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);
Nota: se nell’esempio precedente si verifica un cambio di
mese o anno, le modifiche sono automaticamente gestite
dall’oggetto stesso!
26/11/2013
80
Matteo Ceserani
81. Confrontare due date tra loro
La classe Date permette il confronto diretto tra date.
Esempio.
var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();
if (x>today)
{
alert("Today is before 14th January 2100");
}
else
{
alert("Today is after 14th January 2100");
}
26/11/2013
81
Matteo Ceserani
82. Proprietà e metodi della classe Date
26/11/2013Matteo Ceserani
82
Le uniche proprietà della classe Date sono quelle
predefinite.
prototype.
constructor.
I metodi invece sono tantissimi.
Consulta la guida di riferimento.