Il Modello a Oggetti
di JavaScript
Stefano Bistarelli
Thanks to
Roberto Bruni e Daniela Giorgetti
Oggetti
• Un oggetto possiede:
– proprietà: i valori che ne descrivono la natura
(anche altri oggetti)
– metodi: le funzioni che può compiere
• Uso della “dot notation”
metodi
proprietà
Stefano Bistarelli
oggetto
2
JS Object Library
• Gli oggetti sono istanze di classi.
• L’insieme di classi built-in (predefinite) di
un linguaggio forma la class library.
• Ma JS non sa “parlare” di classi (come
invece riesce a Java, C++, etc.), almeno non
ancora perché in JS2.0…
• Per gli oggetti built-in di JS si parla dunque
di object library.
Stefano Bistarelli
3
Esempio: Date
• classe:
– Date
• oggetto:
– var dataodierna = new Date();
• il metodo costruttore della classe Date restituisce un oggetto di
tipo Date che ha come stato la data corrente (ora inclusa)
• metodi pubblici:
– ore = dataodierna.getHours();
– minuti = dataodierna.getMinutes();
Stefano Bistarelli
4
Classi
skip
• Le classi danno la specifica astratta degli
oggetti.
– numero, nome e struttura delle proprietà e dei
metodi
– implementazione dei metodi
• JS non offre dichiarazioni di classi…
• … però consente la definizione di tipi
oggetto
Stefano Bistarelli
5
Esempio
function Orologio(ore, minuti) {
this.ore = ore;
this.minuti = minuti;
• Tipo oggetto:
this.rimettiOra = rimettiOra;
– Orologio
• Proprietà:
– ore
– minuti
• Metodi:
this.dimmiOra = dimmiOra;
}//notare assenza di “( )” per metodi
function rimettiOra(ore, minuti) {
this.ore=ore;
this.minuti=minuti;
}
function dimmiOra() {
– rimettiOra( )
– dimmiOra( )
var oomm=this.ore+“:”+this.minuti;
document.write(“<p>Sono le ”+oomm);
}
Stefano Bistarelli
6
Il metodo new
• Permette di creare nuovi oggetti…
• … che sono… funzioni!!!
• creare un tipo oggetto = definire una funzione con
il nome del tipo oggetto
• proprietà del tipo oggetto = parametri della
funzione
• (un solo costruttore per la classe)
• implementazioni dei metodi = definizioni di
funzioni con lo stesso nome e riferimenti alle stesse
• “this” fondamentale:
• indirizzo dell’oggetto corrente (quello creato con
new)
Stefano Bistarelli
7
Abbreviare con with
• Il comando with permette di non ripetere tutte le
volte il riferimento completo ad un certo oggetto
• Sintassi:
• with (oggetto) {comandi}
• es.
with (document)
{ write(“Il titolo di questa pagina è”);
write(“<br />”+title+“<br />”):
write(“e la URL è ”+URL);
}
Stefano Bistarelli
8
Metodi
• modificatori
• cambiano lo stato degli oggetti (ovvero modificano i
valori di uno o più dati)
• selettori
• accedono i dati ma non li modificano
• iteratori
• accedono tutte le parti di un oggetto secondo un
qualche ordine definito
• costruttori
• metodo di un tipo oggetto che crea una nuova
istanza e la inizializza
Stefano Bistarelli
9
Eventi
• Contesto GUI (Graphical User Interface)
• un evento è il risultato dell’azione di un
utente, es.
•
•
•
•
il click su un bottone
la selezione di una stringa
la chiusura di una finestra
il caricamento di una pagina
• gli eventi possono essere catturati e gestiti
Stefano Bistarelli
10
Emulazione di eventi
• Alcuni oggetti posseggono dei metodi in
grado di simulare alcuni eventi
• es. il tipo oggetto checkbox definisce un metodo
click( ) che emula la selezione del checkbox
• analogamente per Button
• Attenzione: l’evento simulato non scatena la
gestione automatica
Stefano Bistarelli
11
Oggetti in JS
• core objects
• oggetti di base del linguaggio
• consistenti attraverso tutte le implementazioni
(Microsoft, Netscape, Sun, Mozilla, Opera,…)
• client-side objects
• grossolanamente, corrispondono ai tag
• server-side objects
• non li vediamo
• user-defined objects
• possiamo costruirci delle “librerie su misura”
Stefano Bistarelli
12
Oggetti core-language
Oggetti core-language
• Standard per le varie piattaforme ma soggetti
comunque all’evoluzione del linguaggio
–
–
–
–
–
–
–
–
–
Array (già discusso)
Date (già discusso)
String
Math
Global
Number
Boolean
Function
RegExp
Stefano Bistarelli
skip!
14
Oggetto Array
• Aggiunto in JS1.1
• Costrutto fondamentale nei linguaggi di
programmazione
• permette di iterare su insiemi di oggetti
• gli oggetti possono avere tipi diversi
• non occorre dimensionare l’array
• basta var pippo = new Array( )
• la proprietà length è read-only
Stefano Bistarelli
15
Metodi
valori.sort();
valori.reverse();
valori.join(separa);
valori1.concat(valori2);
valori.slice(i,j); // già visti
valori.pop(); // estrae e restituisce l’ultimo
elemento di valori (diminuisce anche la
lunghezza dell’array)
valori.push(n,m,…); // appende i dati n, m, … in
fondo a valori e restituisce la nuova lunghezza
dell’array
valori.shift(); // estrae e restituisce il primo
elemento di valori, spostando tutti gli altri
di una posizione
valori.unshift(n,m,…); // appende i dati n, m, …
in cima a valori (spostando gli altri) e
restituisce la nuova lunghezza dell’array
Stefano Bistarelli
16
Pile e code
0 1 2 …
push
pop
unshift
push
shift
0 1 2 …
Stefano Bistarelli
17
Metodo splice
valori.splice(i,k,v1,v2,…); // elimina e
restituisce k elementi di valori a
partire dall’i-esimo (incluso) che
vengono eventualmente rimpiazzati da
v1, v2, …
v1 v2 …
i i+1 … i+k-1
Stefano Bistarelli
18
Metodi “speciali”
valori.toString(); // converte
l’array valori in una stringa, se
necessario convertendo ogni
elemento con il rispettivo metodo
.toString
valori.toSource(); // restituisce
il codice sorgente di valori
Stefano Bistarelli
19
Prototype
• Il metodo prototype permette di aggiungere nuove
funzionalità agli oggetti (anche a quelli “core”)
// si aggiunge il metodo
Array.prototype.levaDispari = levaDispari;
// si implementa il metodo
function levaDispari() {
if (this.length % 2 == 0) { i=this.length-1; }
else { i=this.length-2; }
while (i>0) {
this.splice(i,1);
i = i-2;
}
}
Stefano Bistarelli
20
Oggetto Date
• Favorisce la gestione delle date
– convenzione UNIX: memorizzato in
millisecondi a partire dal 1/1/1970 (da meno
108 a più 108 giorni)
– la data attuale dipende dalla macchina client
– non ha proprietà
– grossolanamente ha tre tipi di metodi:
• getXX: per ottenere informazioni
• setXX: per modificare alcuni dati
• toXX: per convertire in formati diversi
Stefano Bistarelli
21
Creazione
var data = new Date( parametri )
parametri:
nulla => data corrente
n (millisecondi dal 1/1/70)
“month dd, yyyy hh:mm:ss” (es. “May 22, 2000”)
yyyy, mm, dd, hh, mm, ss , ms (almeno due
argomenti, es. 2002,7,12,7,10,29)
Stefano Bistarelli
22
Alcuni metodi: get
data.getMilliseconds(); // ritorna i millisecondi (da 0 a 999)
data.getSeconds(); // ritorna i secondi (da 0 a 59)
data.getMinutes(); // ritorna i minuti (da 0 a 59)
data.getHours(); // ritorna l’ora (da 0 a 23)
data.getDay(); // ritorna il giorno della settimana (da
0=domenica a 6)
data.getDate(); // ritorna il giorno del mese (da 1 a 31)
data.getMonth(); // ritorna il mese (da 0=gennaio a 11)
data.getFullYear(); // ritorna l’anno (4 cifre)
data.getUTC…(); // come sopra, riferito a GMT/UTC
data.getTime(); // ritorna i millisecondi trascorsi dal 1-1-70
Stefano Bistarelli
23
Alcuni metodi: set
data.setMilliseconds(x); // aggiorna i millisecondi
data.setSeconds(x); // aggiorna i secondi
data.setMinutes(x); // aggiorna i minuti
data.setHours(x); // aggiorna l’ora
data.setDay(x); // aggiorna il giorno della settimana
data.setDate(x); // aggiorna il giorno del mese
data.setMonth(x); // aggiorna il mese
data.setFullYear(x); // aggiorna l’anno
data.setUTC…(x); // come sopra, riferito a GMT/UTC
data.setTime(x); // aggiorna i millisecondi trascorsi
dal 1-1-70
Stefano Bistarelli
24
Alcuni metodi: to
data.toLocaleString(); // converte l’oggetto data
in formato stringa (usando il formato locale)
data.toString(); // converte l’oggetto data in
formato stringa
data.toGMTString() // converte l’oggetto data in
formato stringa (riferito al fuso orario GMT)
data.toUTCString() // converte l’oggetto data in
formato stringa (riferito all’ora universale
UTC)
data.valueOf() // ritorna i millisecondi
trascorsi dal 1-1-70 (come .getTime())
Stefano Bistarelli
25
Il metodo statico parse
Date.parse(x); // analizza la stringa x passata
come argomento e la converte in un oggetto Date
es.
Date.parse(“Wed, 8 May 1996 17:41:46 –0400”)
• è un metodo statico: può essere invocato solo su Date,
NON su un qualsiasi oggetto di tipo Date!
• il formato delle stringhe riconosciute dipende
dall’implementazione del browser!
• (l’esempio sopra è in un formato standard)
Stefano Bistarelli
26
Quiz riassuntivi I
– In JS, invece che di classi si parla di:
•
•
•
•
Oggetti
Prototipi
Tipi oggetto
Modelli
– Gli oggetti possiedono:
•
•
•
•
Proprietà e metodi
Modificatori e distruttori
Iteratori e selettori
Sono nullatenenti
Stefano Bistarelli
27
Quiz riassuntivi II
– Gli oggetti JS si dividono in:
• Due categorie
• Tre categorie
• Quattro categorie
– Cosa fa il comando new Array([1,2],[3,4]) ?
• Crea una matrice di dimensione 2x2
• Crea un vettore di lunghezza 4
• Crea un vettore di un solo elemento, la stringa “1,2,3,4”
– Cosa fa il comando new Date(1992) ?
• Crea una data inizializzando l’anno a 1992
• Crea la data corrispondente a 1992 msec trascorsi dal 1/1/1970
• Crea la data “1/9/92”
Stefano Bistarelli
28
Esercizi
Stefano Bistarelli
29
Oggetto String
• Le stringhe sono fondamentali nei linguaggi
di programmazione… e soprattutto per
linguaggi di script
• In JS le stringhe hanno un tipo oggetto con
interessanti metodi built-in
• Ma attenzione, prima di JS1.1 non potevano
essere dichiarate con new
• Una sola proprietà: length
Stefano Bistarelli
30
Metodi HTML I
• Molti metodi permettono di generare codice
HTML per testo formattato
testo.big(); // restituisce il testo
racchiuso nei tag <BIG> e </BIG>
testo.blink(); // come sopra per <BLINK>
testo.bold(); // come sopra per <B>
testo.fixed(); // come sopra per <TT>
testo.italics(); // come sopra per <I>
testo.small(); // come sopra per <SMALL>
testo.strike(); //come sopra per <STRIKE>
testo.sub(); //come sopra per <SUB>
testo.sup(); //come sopra per <SUP>
Stefano Bistarelli
31
Metodi HTML II: FONT
• Formattare colore e dimensione con font
testo.fontcolor(colore); // restituisce
il testo racchiuso nei tag
<FONT COLOR=“colore”> e </FONT>
testo.fontsize(dimensione); //restituisce
il testo racchiuso nei tag
<FONT SIZE=“dimensione”> e </FONT>
Stefano Bistarelli
32
Metodi HTML III: LINK
• Gestire ancore e link
testo.anchor(nome); // restituisce il
testo racchiuso nei tag
<A NAME=“nome”> e </A>
testo.link(url); //restituisce il testo
racchiuso nei tag
<A HREF=“url”> e </A>
Stefano Bistarelli
33
Metodi sottostringhe
testo.charAt(i); // restituisce l’i-esimo
carattere di testo (da 0 a testo.length-1)
testo.slice(i,j); // restituisce la sottostringa
di testo dalla posizione i a j-1 (inclusi)
testo.substring(i,j); // come sopra (differenti
se i<0 o j<i)
testo.substr(i,k); // restituisce la sottostringa
di testo lunga k caratteri che parte dalla
posizione i
Stefano Bistarelli
34
Metodi conversione
testo.split(sep); // divide testo in un array di
stringhe, spezzando in corrispondenza di ogni
occorrenza della stringa sep
testo.toLowerCase(); // restituisce la stringa
testo con tutti i caratteri convertiti in
minuscolo
testo.toUpperCase(); // restituisce la stringa
testo con tutti i caratteri convertiti in
maiuscolo
Stefano Bistarelli
35
Metodi ricerca
testo.indexOf(parola,i); // restituisce la
posizione della prima occorrenza della stringa
parola nella stringa testo (a partire dalla
posizione i). Se non esiste, restituisce –1
testo.lastIndexOf(parola,i); // come sopra, ma
restituisce la posizione dell’ultima occorrenza
Stefano Bistarelli
36
Metodi vari
testo.concat(testo1,testo2,…); // restituisce la
stringa ottenuta concatenando testo con testo1,
testo2, … (equivale a testo+testo1+testo2+…)
testo.charCodeAt(i); // restituisce il codice
Unicode dell’i-esimo carattere di testo (da 0 a
testo.length-1)
Stefano Bistarelli
37
I metodi statici
String.fromCharCode(val1,val2,…) // restituisce la
stringa ottenuta concatenando i caratteri i cui
codici Unicode sono val1, val2, …
es.
String.fromCharCode(126,66,114,117,110,105)
// restituisce “~Bruni”
• è un metodo statico: può essere invocato solo su
String, NON su un qualsiasi oggetto di tipo
String!
• il metodo prototype permette di aggiungere nuove
funzionalità
Stefano Bistarelli
38
Caratteri speciali
Simbolo
\t
\n
\r
\f
\\
\b
\”
\’
Descrizione
tabulazione
interruzione di linea
ritorno carrello
avanzamento
backslash
backspace
apici doppi
apice singolo
usare \r per andare a capo nei messaggi di alert
Stefano Bistarelli
39
Oggetto Math
• Per favorire calcoli matematici, JS
incapsula costanti e funzioni (avanzate) utili
nell’oggetto contenitore Math
• Non si può usare come String e Array per
crearne nuove istanze (oggetto statico)
• Le costanti sono proprietà (tutte con nomi in
maiuscolo)
• Le funzioni sono metodi
Stefano Bistarelli
40
Costanti matematiche
Math.E // costante di Eulero e (base del
logaritmo naturale)
Math.LN10 // logaritmo naturale di 10
Math.LN2 // logaritmo naturale di 2
Math.LOG10E // logaritmo in base 10 di e
Math.LOG2E // logaritmo in base 2 di e
Math.PI // la costante pi-greco
Math.SQRT1_2 // 1 diviso 2
Math.SQRT2 // 2
Stefano Bistarelli
41
Funzioni matematiche I
Math.abs(x) // restituisce il valore assoluto di x
Math.ceil(x) // restituisce l’intero immediatamente
superiore a x
Math.floor(x) // restituisce l’intero immediatamente
inferiore a x
Math.round(x) // arrotonda x all’intero più vicino
Math.max(x,y) // restituisce il massimo tra x e y
Math.min(x,y) // restituisce il minimo tra x e y
Math.pow(x,y) // restituisce il xy (x alla potenza y)
Math.sqrt(x) // restituisce x (radice quadrata di x)
Stefano Bistarelli
42
Funzioni matematiche II
Math.sin(x) // restituisce il seno di x
Math.cos(x) // restituisce il coseno di x
Math.tan(x) // restituisce la tangente di x
Math.exp(x) // restituisce ex
Math.log(x) // restituisce loge x
Math.round(x) // arrotonda x all’intero più vicino
Math.random() // restituisce un numero pseudo-casuale
compreso tra 0 e 1
Stefano Bistarelli
43
Interi (pseudo)casuali
• Spesso si vorrebbere generare un intero casuale
compreso tra 1 e un certo valore:
– possiamo sfruttare Math.random()
– cerchiamo di definire una funzione riutilizzabile
function casuale(numero) {
var x = Math.random() * numero;
x = Math.floor(x)+1;
return x;
} // restituisce un intero casuale tra 1 e numero
Stefano Bistarelli
44
Arrotondamenti
• Spesso si vorrebbe arrotondare ad alcune cifre
decimali, invece che ad un intero (es. EURO) :
– possiamo sfruttare Math.round()
– cerchiamo di definire una funzione riutilizzabile
function arrotonda(numero,decimali) {
var potenza = Math.pow(10,decimali);
var x = Math.round(numero * potenza)/potenza;
return x;
} // arrotonda numero a decimali cifre decimali
Stefano Bistarelli
45
Quiz riassuntivi I
– Quale dei seguenti oggetti NON può essere usato con la
parola chiave new?
•
•
•
•
Date
Math
String
Array
– Quante proprietà possiede l’oggetto Date?
• Una
• Nessuna
• Centomila
– Cosa restituisce Math.floor(Math.random())?
• 0
• 1
• a volte 0, a volte 1
Stefano Bistarelli
46
Quiz riassuntivi II
– Cosa restituisce “corso IFTS”.charAt(4)?
• “o”
• “s”
•“ ”
– Cosa restituisce “corso IFTS”.slice(4,5)?
• “o ”
• “so”
• “o”
– Cosa restituisce “corso IFTS”.substring(4,5)?
• “o ”
• “so”
• “o”
– Cosa restituisce “corso IFTS”.substr(4,5)?
• “o IFT”
• “so IF”
• “o”
Stefano Bistarelli
47
Esercizi
Stefano Bistarelli
48
Oggetto Boolean
• Aggiunto in JS1.1
• permette di convertire valori non-booleani
in booleani
• può essere usato come un booleano
var boolvar = new Boolean( valore )
valore:
false, 0, null, “”, omesso => false
altrimenti => true
metodo toString() e proprietà prototype
Stefano Bistarelli
49
Oggetto Number
• Supportato da JS1.1
• Incapsula valori numerici primitivi e cinque
costanti particolari
• Un solo metodo: toString()
• Il metodo statico prototype può essere utile per
aggiungere proprietà ai numeri (es. unità di
misura)
var numvar = new Number( valore )
restituisce NaN se la conversione fallisce
Stefano Bistarelli
50
Costanti speciali
Number.MAX_VALUE // il più grande numero
rappresentabile
Number.MIN_VALUE // il più piccolo numero
rappresentabile
Number.NaN //valore speciale (not_a_number)
Number.POSITIVE_INFINITY // valore “infinito”,
restituito da overflow
Number.NEGATIVE_INFINITY // valore “infinito
negativo”, restituito da overflow
Stefano Bistarelli
51
Oggetto Global
• Apparso nella versione ECMAScript 1.0
– Microsoft lo usò per raggruppare alcune
proprietà e metodi di top-level
– Netscape lo menzionò nella documentazione
• Colleziona proprietà e oggetti “scomodi” da
collocare altrove (senza parenti)
• Quasi tutti sono fondamentali!
Stefano Bistarelli
52
Global dà i numeri
isFinite(valore) // determina se valore è
“finito” (restituisce un booleano)
isNaN(valore) // determina se valore è
NaN (restituisce un booleano)
parseInt(testo, radice) // analizza la
stringa testo come se contenesse un
numero in base radice (radice deve
essere compreso tra 2 e 36; se omesso
il default è 10); restituisce il valore
numerico oppure NaN
parseFloat(testo) // converte la stringa
testo in valore a virgola mobile
(oppure NaN se non ci riesce)
Stefano Bistarelli
53
Global “riflette”
eval(codice) // esegue la stringa codice
come se fosse un’espressione o un
comando javascript
• Funzionalità molto potente (es. per scrivere
interpreti javascript ricorsivi) scarsamente
utilizzata in pratica
• BUG: causa un blocco di sistema su NN2 e sotto
Windows 3.1
• Esempi
Stefano Bistarelli
54
Oggetto Function
• Aggiunto con JS1.1
• permette di definire una stringa a run-time e
compilarla come funzione!
funcvar = new Function (arg1,…,argn, funcbody)
• gli oggetti Function sono meno efficienti
(ricompilati ogni volta che si eseguono)
• funcvar è proprio una variabile
Stefano Bistarelli
55
Quiz riassuntivi I
– Quale dei seguenti oggetti NON può essere usato con la
parola chiave new?
•
•
•
•
Global
Number
Boolean
Function
– Che valore restituisce new Boolean()?
• true
• false
• NaN
– Cosa restituisce isNaN(parseInt(“O”))?
•0
• NaN
• true
• false
• non si capisce… si sta convertendo la lettera O o la cifra 0?
Stefano Bistarelli
56
Esercizi
Stefano Bistarelli
57