Lezione 8 (aa 2017-2018)

Oggetti

• Nella vita reale, un frullatore è un oggetto .
• Un frullatore ha proprietà (caratteristiche) come capacità e colore,
• e metodi (azioni) come stop e start
• Tutti i frullatori hanno le stesse caratteristiche, ma i valori delle proprietà differiscono da un'auto all'altra.
• Tutti i frullatori hanno gli stessi metodi, ma i metodi vengono eseguiti in tempi diversi.

Oggetti Javascript

Questo codice assegna un valore semplice (un numero) a una variabile chiamata raggio:

    var raggio = 50;

Quando devo memorizzare ed elaborare un qualcosa di complesso che non può essere ridotto ad un valore semplice utilizzo un oggetto (Object).

Questo codice assegna più valori (un numero e due stringhe) alla variabile cerchio:

  var cerchio = {
    raggio: 50,
    coloreSfondo: '#ff8800',
    coloreTesto: '#000000'
  }

I valori vengono scritti come un elenco separato da virgole di coppie nome: valore inserito tra due parentesi graffe.

Il cerchio è una figura geometrica su cui posso eseguire dei calcoli e che posso disegnare sullo schermo.

In Javascript può essere rappresentato come un oggetto .

L'apparenza di un cerchio è determinata da alcune caratteristiche:

• la grandezza (definita dal suo raggio), 
• I colori con cui viene rappresentato

Queste caratteristiche sono rappresentate con le proprietà dell'oggetto.

Ad un cerchio posso poi applicare delle azioni come disegnarlo sullo schermo o calcolarne l'area.

Queste azioni sono i metodi dell'oggetto.

Tutti i cerchi poi hanno le stesse caratteristiche , condivideranno gli stessi metodi, ma cambiando i valori delle proprietà assumeranno grandezza e colori diversi..

Quando scrivo un oggetto in formato letterale, lo definisco come una serie di coppie in cui un nome viene associato tramite l'operatore : ad un valore o a una funzione. Quando il nome è associato ad un valore definisco una proprietà dell'oggetto.

var cerchio = {
  coloreSfondo:"#FF8888",
  coloreTesto:"#333333",
  raggio:50
};

Se al nome associo la definizione di una funzione creo un metodo dell'oggetto

var cerchio = {
// Proprietà
    raggio: 50,
    elementoCerchio: document.getElementById('cerchio'),
    elementoTesto: document.getElementById('pixel'),
    coloreSfondo: "#FFAA00",
    coloreTesto: "#000000",
//Metodi
    area: function() {
        return (this.raggio * this.raggio) * Math.PI;
    },

    disegna: function() {
        var c = this.elementoCerchio;
        c.style.height = (this.raggio * 2) + 'px';
        c.style.width = (this.raggio * 2) + 'px';
        c.style.borderRadius = "50%";
        c.style.backgroundColor = this.coloreSfondo;
        c.style.color = this.coloreTesto;
        this.elementoTesto.innerHTML = Math.round(this.area()) + " pixel";
    }
};

Creazione

1. Si crea un oggetto JavaScript assegnando ad una variabile un oggetto letterale.

   var cerchio = {
     raggio: 50,
     coloreSfondo: '#ff8800',
     coloreTesto: '#000000'
   }

2. Si crea un oggetto JavaScript assegnando ad una variabile un oggetto creato utilizzando l'operatore new applicato a un costructor.

     var adesso = new Date();

3. Si assegna un oggetto JavaScript ad una variabile come risultato di una funzione o di un metodo 

     var input_raggio = document.getElementById('raggio');

Accesso alle proprietà

È possibile accedere alle proprietà degli oggetti in due modi:

• Usando l'operatore punto .

cerchio.raggio = r;

• oppure utilizzando l'operatore []

cerchio["raggio"] = r;

Accesso ai metodi

I metodi non sono altro che proprietà che contengono la definizione di una funzione:

• Per eseguire un metodo devo utilizzare l'operatore di esecuzione ()

var area = cerchio.area();

• Se si accede al metodo area, senza (), verrà restituita la definizione della funzione

A cosa servono gli oggetti

Quando devo passare ad una funzione o a un oggetto un insieme di dati eterogeneo e non semplice come ad esempio quando devo configurare il comportamento di un plugin.

Oggetti e tipi predefiniti

Oggetto e Classe

• L’oggetto è una grandezza informatica in grado di rappresentare i dati.
• Nella programmazione OOP tutte i dati si rappresentano e si elaborano tramite oggetti.
• Quando scrivo:

pippo = new Date();

• o:

pippo = ″Ciao gente!″;

• non assegno semplicemente un valore a una variabile. Creo un dato complesso detto oggetto che oltre al valore contiene tutti gli strumenti necessari ad elaborarlo.
• Nella programmazione OOP i tipi di oggetto (il tipo è, in generale, determinato dal tipo di dati che l’oggetto è destinato ad elaborare) si chiamano classi.
• La classe, cioè, è l’insieme di regole che determinano come funziona un oggetto di una determinato tipo (o, i termini OOP, un istanza di una determinata classe).
• In Javascript non si fa menzione espressa del temine class (che per altro è una parola riservata che non può essere usata dall’utente). Per noi quindi oggetto (inteso come tipo di oggetto) e classe saranno sinonimi.
• Esistono oggetti (classi) predefinite dal linguaggio, oggetti (classi) create dalla comunità dei programmatori e che posso caricare e utilizzare nelle mie pagine Web e, infine, noi stessi possiamo creare le nostre classi per risolvere i nostri problemi.

Proprietà e Metodi

Ogni tipo di dato (classe) è caratterizzato da:

• Proprietà che ci consentono di leggere o modificare determinate caratteristiche di un individuo della classe
• Metodi che ci mettono a disposizione determinate azioni che gli oggetti possono compiere o subire

Le proprietà contengono un valore (come le variabili) che rappresenta una caratteristica dell'oggetto a cui la proprietà è riferita.

• Inizializzando una varibile le assegno un tipo (o classe)

pippo = ″Ciao gente!″;

• E posso accedere alle PROPRIETÀ E AI METODI DEFINITI DA QUEL TIPO.
  • Usando l’operatore di appartenenza ˝•˝
  • Usando le parentesi quadre che racchiudano il nome della proprietà come stringa di caratteri.

// Operatore di appartenenza
var len = pippo.length;

// Parentesi quadre
var len = pippo[″length″];

• In entrambi i casi len conterrà il numero di caratteri di cui è composta la variabile stringa pippo

Alcune proprietà sono a sola lettura, non possono cioè essere modificate. Se scrivo:

pippo.length = 3;

Mentre se scrivo:

elemento.innerHTML = ″Ciao gente!″;

modificherò il contenuto HTML dell’elemento della pagina elemento (che un elemento HTML definito nella pagina) e le modifiche avranno un immediato effetto sul rendering della pagina stessa.

I metodi contengono codice eseguibile (come le funzioni), e ci consentono di eseguire azioni sull'oggetto.

• Una volta che una variabile contiene un oggetto

pippo = new Date();

• Posso accedere ai suoi metodi.
• Come le funzioni i metodi possono ricevere parametri e ritornare valori. Normalmente quando è previsto il passaggio di parametri i metodi modificano l'oggetto quando restituiscono valore restituiscono informazioni sull'oggetto.
• Uso l’operatore di appartenenza . e faccio seguire l’identificatore dalle parentesi tonde, l'operatore di esecuzione ()

/*
il metodo getDate restituisce il giorno del mese della data contenuta in pippo che viene memorizzato nella variabile giorno.
*/
var giorno = pippo.getDate();

• Quando un metodo prevede dei parametri normalmente serve a modificare l'oggetto:

/*
Modifico la data contenuta nella variabile pippo: il giorno del mese sarà 3.
*/
pippo.setDate(3);

Proprietà e Metodi Statici

Esistono metodi e proprietà particolari che non si applicano ai singoli oggetti (istanze de una classe) ma hanno un uso globale.

Per usarli non li applico all’oggetto ma alla classe

/*
La variabile data contiene l’oggetto Date ottenuto convertendo in data la stringa passata come parametro al metodo statico Date.parse
*/
var data = Date.parse("March 21, 2012");

Constructor

• Implicito:

var str = "Ciao!";

• Esplicito:

var adesso = new Date();

• Metodo di un altro oggetto:

var elemento = document.createElement("p");

Tipi di base

Number

/* Constructor */
var n = 5;
var n = 10.6;

Proprietà statiche

 Conversione di Number in String

Esempi

/*====================================================================
				USO DEI METODI DI NUMBER 
  ==================================================================== */
var num = 1289.2;						         // Numero decimale
var numIntero = 65000;					         // Numero intero
var str;
str = num.toExponential();  				     // "1.2892e+3"
str = num.toExponential(5);  				     // "1.28920e+3"
str = num.toFixed();					         // "1289"
str = num.toFixed(3);					         // "1289.200"
str = num.toPrecision()					         // "1289.2"
str = num.toPrecision(8)					     // "1289.2000"
str = num.toString()					         // "1289.2"
str = numIntero.toString(16)				     // "fde8"
str = numIntero.toString(2)				         // "1111110111101000"
str = num.toString(16)					         // "509.33333333334"

String

/* Constructor */
var str = "Ciao!";

Proprietà

Gli oggetti della classe String hanno una sola proprietà, la proprietà length che restituisce la lunghezza della stringa, cioè il numero di caratteri di cui è composta.

Metodi

replace()

• Il metodo replace () cerca in una stringa i gruppi di caratteri che corrispondono a una substringa o a una regular expression, e restituisce una nuova stringa in cui le occorrenze trovate vengono sostituite da un valore specificato,
• Nota: Se si usa una substring e non una regular expression per la ricerca,  verrà sostituita solo la prima occorrenza trovata. Per sostituire tutte le occorrenze di una ricerca è necessario usare una regular expression con il modificatore g,
• Questo metodo non cambia la stringa originale.

split()

• Il metodo split () viene utilizzato per dividere una stringa in un array di stringhe utilizzanda uno o più caratteri come separatore, e restituisce il nuovo array.
• Se si utilizza una stringa vuota ("") come separatore, la stringa è diviso nei singoli caratteri che la compongono.
• Nota: Il metodo split() non modifica la stringa originale.

Esempi 

/*=======================================================================
		       	USO DEI METODI DI STRING 
  ======================================================================= */
var origine = "Ciao gente!";
var origine2 ="Domenica,Lunedì,Martedì,Mercoledì,Giovedì,Venerdì,Sabato";
var str, pos, len, giorni;
len = origine.length;			        // 11
str = origine.charAt(3);			    // "o"
str = origine.indexOf("e"); 		    // 6
str = origine.indexOf("!!");		    // -1 (non trovato)
str = origine.lastIndexOf("e"); 		// 9
str = origine.replace("!", "?");		// "Ciao gente?"
giorni = origine2.split(",");		    // ["Domenica", "Lunedì", "Martedì",						
                                        // "Mercoledì", "Giovedì",
						                // "Venerdì", "Sabato"]
str = origine.substr(5)			        // "gente!"
str = origine.substr(5,2)			    // "ge"

Array

/*  CONSTRUCTOR */
var a = [1,6,78,23];
var a = new Array(1,6,78,23);

Proprietà

Gli oggetti della classe Array hanno una sola proprietà, la proprietà length che restituisce la lunghezza dell'array, cioè il numero di elementi di cui è composto.

Metodi

Esempio dell'uso del metodo sort

/*
	rubrlica è un array di oggetti che hanno due proprietà: nome e cognome.
*/
var rubrica = [
	{nome:"Mario", cognome:"Rossi" },
	{nome:"Luigi", cognome:"Neri" },
	{nome:"Piero", cognome:"Verdi" },
	{nome:"Mario", cognome:"Bianchi" }
];
/* 
	Per ordinare l'array definisco una funzione che stabilisce il criterio
	con cui vengono confrontati gli elemnti dell'array e ritorna un valore 
	positivo se è maggiore il primo elemento, 0 se gli elementi sono uguali 
	e negativo se è maggiore il seondo elemento. 
	La funzione che segue ordina gli elementi in rubrica per cognome in 
	ordine crescente.
*/

var sortCognome = function (a,b){
					  if (a.cognome > b.cognome){
						return 1;
					  } else if (a.cognome == b.cognome){
						return 0;
					  } else {
						return 1;
					  }
			      };
//Ordino l'array secondo il criterio definito dalla funzione sortCognome				  
rubrica.sort(sortCognome);

Date

/* CONSTRUCTOR */
var d = new Date(); 
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Date.parse(str)

Metodo statico che analizza una data in formato stringa e restituisce il numero di millisecondi dalla mezzanotte del 1 Gennaio 1970.

Metodi get

Metodi set

 Conversioni di oggetti Date in stringa

Math

Proprietà

Le proprietà di Math consento l'accesso alle costanti matemetica di uso più comune.

 Metodi