Introduzione a java script

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

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

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

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

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

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

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>
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
26/11/2013
8
Matteo Ceserani

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>
</body>
</html>
26/11/2013
9
Matteo Ceserani

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

La mia prima funzione JavaScript
<html>
<head>
function displayDate(){
}
</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

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

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

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

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

Tipi di dato
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

Tipi di dato
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"';

Tipi di dato
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;

Tipi di dato
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).

Tipi di dato
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.

Operatori aritmetici
Operatore Descrizione Esempio Risultati
+ Addizione x=y+2 y=5 x=7
- Sottrazione x=y-2 y=5 x=3
* Moltiplicazione x=y*2 y=5 x=10
/ Divisione x=y/2 y=5 x=2.5
% Modulo (Resto) x=y%2 y=5 x=1
++ Incremento x=++y y=6 x=6
x=y++ y=6 x=7
-- Decremento x=--y y=4 x=4
x=y-- y=4 x=3
26/11/2013
21
Matteo Ceserani

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

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

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

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

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

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

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

Operatore condizionale
variabile = (condizione) ? valore1 : valore2;
 Assegna alla variabile variabile il valore
valore1 se (condizione) è vera, altrimenti le
assegna il valore valore2.
var visitor="PRES";
var greeting=(visitor=="PRES")?"Dear President ":"Dear ";
document.write(greeting);
</script>
26/11/2013
29
Matteo Ceserani

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

Esempio di costrutto If
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

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

Esempio di costrutto Switch
 Il metodo getDay()
applicato a un oggetto di
classe Date restituisce un
intero che rappresenta il
giorno della settimana.
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

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

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

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

Esempio di prompt box
<html>
<head>
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

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

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

Esempio di funzione
<html>
<head>
function product(a,b)
{
return a * b;
}
</script>
</head>
<body>
document.write(product(4,3));
</script>
</body>
</html>
26/11/2013
40
Matteo Ceserani

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

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

Esempio di ciclo for
<html>
<body>
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

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

Esempio di ciclo while
<html>
<body>
var i = 0;
while (i <= 5)
{
document.write(“Il numero è " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>
26/11/2013
45
Matteo Ceserani

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

Esempio con break, continue ed etichette
<html>
<head>
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

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

Esecuzione di script in risposta a un evento
<html>
<head>
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

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

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

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

onMouseOver
<html>
<head>
function writeText(txt)
{
document.getElementById("desc").innerHTML = txt;
}
</script>
</head>
<body>
<img src ="planets.gif" width ="145" height ="126" alt="Pianeti" usemap="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126" onmouseover="writeText('Sole')"
href ="sun.htm" target ="_blank" alt="Sole" />
<area shape ="circle" coords ="90,58,3" onmouseover="writeText('Mercurio')"
href ="mercur.htm" target ="_blank" alt="Mercurio" />
<area shape ="circle" coords ="124,58,8" onmouseover="writeText('Venere')"
href ="venus.htm" target ="_blank" alt="Venere" />
</map>
<p id="desc">Muovi il mouse sulla figura.</p>
</body>
</html>
Prova l’effetto che fa
26/11/2013
53
Matteo Ceserani

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

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

<html>
<head>
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

<html>
<head>
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

L’istruzione Throw
<html>
<body>
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

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

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

Cos’è un oggetto
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.

Cos’è un oggetto
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.

Cos’è un oggetto
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);
}

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

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

Metodi di un oggetto
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.

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

Caratteri speciali
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)

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

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
 Qualche esempio.
 Lunghezza di una stringa.
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
 Qualche esempio
 Rimpiazzare il contenuto di una stringa.
<!DOCTYPE html>
<html>
<head>
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
 Qualche esempio.
 Maiuscole e minuscole.
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]);

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

I metodi wrapper della classe String
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>

La classe Number
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

Proprietà della classe Number
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);

Metodi della classe Number
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);

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

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

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

Proprietà e metodi della classe Date
82
 Le uniche proprietà della classe Date sono quelle
predefinite.
 prototype.
 constructor.
 I metodi invece sono tantissimi.
 Consulta la guida di riferimento.

Introduzione a java script

More Related Content

Similar to Introduzione a java script

Introduzione a java script