Il Modello a Oggetti di JavaScript Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti.

Presentazione sul tema: "Il Modello a Oggetti di JavaScript Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti."— Transcript della presentazione:

1 Il Modello a Oggetti di JavaScript Stefano Bistarelli Thanks to Roberto Bruni e Daniela Giorgetti

2 Stefano Bistarelli2 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” proprietà metodi oggetto

3 Stefano Bistarelli3 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.

4 Stefano Bistarelli4 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();

5 Stefano Bistarelli5 Classi 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 skip

6 Stefano Bistarelli6 Esempio Tipo oggetto: –Orologio Proprietà: –ore –minuti Metodi: –rimettiOra( ) –dimmiOra( ) function Orologio(ore, minuti) {Orologio this.ore = ore; this.minuti = minuti; this.rimettiOra = rimettiOra; this.dimmiOra = dimmiOra; }//notare assenza di “( )” per metodi function rimettiOra(ore, minuti) { this.ore=ore; this.minuti=minuti; } function dimmiOra() { var oomm=this.ore+“:”+this.minuti; document.write(“ Sono le ”+oomm); }

7 Stefano Bistarelli7 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 )

8 Stefano Bistarelli8 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(“ ”+title+“ ”): write(“e la URL è ”+URL); }

9 Stefano Bistarelli9 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

10 Stefano Bistarelli10 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

11 Stefano Bistarelli11 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

12 Stefano Bistarelli12 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 tagcorrispondono server-side objects non li vediamo user-defined objects possiamo costruirci delle “librerie su misura”

13 Oggetti core-language

14 Stefano Bistarelli14 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 skip!

15 Stefano Bistarelli15 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

16 Stefano Bistarelli16 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

17 Stefano Bistarelli17 Pile e code 012… push pop 012… push shift unshift

18 Stefano Bistarelli18 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, … ii+1i+k-1… v1v2…

19 Stefano Bistarelli19 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

20 Stefano Bistarelli20 Prototype Il metodo prototype permette di aggiungere nuove funzionalità agli oggetti (anche a quelli “core”)prototype // 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; }

21 Stefano Bistarelli21 Oggetto Date Favorisce la gestione delle date –convenzione UNIX: memorizzato in millisecondi a partire dal 1/1/1970 (da meno 10 8 a più 10 8 giorni) –la data attuale dipende dalla macchina client –non ha proprietà –grossolanamente ha tre tipi di metodi: get XX: per ottenere informazioni set XX: per modificare alcuni dati to XX: per convertire in formati diversi

22 Stefano Bistarelli22 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)

23 Stefano Bistarelli23 Alcuni metodi: getmetodi 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

24 Stefano Bistarelli24 Alcuni metodi: setmetodi 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

25 Stefano Bistarelli25 Alcuni metodi: tometodi 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())

26 Stefano Bistarelli26 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)

27 Stefano Bistarelli27 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

28 Stefano Bistarelli28 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”

29 Stefano Bistarelli29 Esercizi

30 Stefano Bistarelli30 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

31 Stefano Bistarelli31 Metodi HTML IHTML Molti metodi permettono di generare codice HTML per testo formattato testo.big(); // restituisce il testo racchiuso nei tag e testo.blink(); // come sopra per testo.bold(); // come sopra per testo.fixed(); // come sopra per testo.italics(); // come sopra per testo.small(); // come sopra per testo.strike(); //come sopra per testo.sub(); //come sopra per testo.sup(); //come sopra per

32 Stefano Bistarelli32 Metodi HTML II: FONTHTML Formattare colore e dimensione con font testo.fontcolor(colore); // restituisce il testo racchiuso nei tag e testo.fontsize(dimensione); //restituisce il testo racchiuso nei tag e

33 Stefano Bistarelli33 Metodi HTML III: LINKHTML Gestire ancore e link testo.anchor(nome); // restituisce il testo racchiuso nei tag e testo.link(url); //restituisce il testo racchiuso nei tag e

34 Stefano Bistarelli34 Metodi sottostringhesottostringhe 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

35 Stefano Bistarelli35 Metodi conversioneconversione 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

36 Stefano Bistarelli36 Metodi ricercaricerca 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

37 Stefano Bistarelli37 Metodi varivari 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)

38 Stefano Bistarelli38 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àprototype

39 Stefano Bistarelli39 Caratteri speciali SimboloDescrizione \t tabulazione \n interruzione di linea \r ritorno carrello \f avanzamento \\ backslash \b backspace \” apici doppi \’ apice singolo usare \r per andare a capo nei messaggi di alert

40 Stefano Bistarelli40 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

41 Stefano Bistarelli41 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 CostantiCostanti matematiche

42 Stefano Bistarelli42 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 x y (x alla potenza y) Math.sqrt(x) // restituisce  x (radice quadrata di x) FunzioniFunzioni matematiche I

43 Stefano Bistarelli43 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 e x Math.log(x) // restituisce log e x Math.round(x) // arrotonda x all’intero più vicino Math.random() // restituisce un numero pseudo-casuale compreso tra 0 e 1 FunzioniFunzioni matematiche II

44 Stefano Bistarelli44 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 Interi (pseudo)casuali

45 Stefano Bistarelli45 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 Arrotondamenti

46 Stefano Bistarelli46 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

47 Stefano Bistarelli47 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”

48 Stefano Bistarelli48 Esercizi

49 Stefano Bistarelli49 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

50 Stefano Bistarelli50 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

51 Stefano Bistarelli51 CostantiCostanti 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

52 Stefano Bistarelli52 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!

53 Stefano Bistarelli53 GlobalGlobal 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)

54 Stefano Bistarelli54 GlobalGlobal “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

55 Stefano Bistarelli55 Oggetto Function Aggiunto con JS1.1 permette di definire una stringa a run-time e compilarla come funzione! funcvar = new Function (arg 1,…,arg n, funcbody) gli oggetti Function sono meno efficienti (ricompilati ogni volta che si eseguono) funcvar è proprio una variabile

56 Stefano Bistarelli56 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 ?

57 Stefano Bistarelli57 Esercizi