Oggetti

  • Nella vita reale, un frullatore è un oggetto .
  • Un frullatore ha proprietà (caratteristiche) come capacità e colore,
  • 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.

La programmazione orientata agli oggetti (Object Oriented Programming) e totalmente basata sugli oggetti.

Gli oggetti offrono un modo estremamente flessibile di organizzare i dati.

Esiste uno standard (JSON) che consente di trasformare gli oggetti generati in memoria durante la programmazione in testo che si può salvare su disco o inviare su Internet.

È così possibile creare, con molto semplicità, strutture di dati organizzati gerarchicamente molto più complesse di quelle usate normalmente nei database tradizionali

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;

otterrò un errore perché la proprietà length non può essere modificata.

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

È la particolare metodo che consente di creare un oggetto di un particolare tipo (un’istanza di una classe). Può essere:
  • 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

Proprietà Descrizione
Number.MAX_VALUE; Restituisce il massimo numero consentito in JavaScript
Number.MIN_VALUE; Restituisce il minimo numero consentito in JavaScript
Number.NEGATIVE_INFINITY; Rappresenta l'infinito negativo.
Number.POSITIVE_INFINITY; Rappresenta l'infinito positivo.

 Conversione di Number in String

Metodo Descrizione
toExponential(x) Reastituisce una stringa, che rappresenta il numero come notazione esponenziale dove x (opzionale) indica il numero dei decimali da usare
toFixed(x) Converte il numero in una stringa, con x numero di decimali. Se x non viene specificato nessun decimale.
toPrecision(x) Converte il numero in una stringa di lunghezza x. Se necessario vengono aggiunti punto decimale e 0.
toString(base) Converte il numero in una stringa secondo la base specificata da base. La base di default è 10 (numero decimale). Se base vale 2 si ottiene la rappresentazione binaria del numero, se 16 quella esadecimale, ecc.

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

Metodo Descrizione
charAt(pos) Restituisce il carattere alla posizione pos
charCodeAt(pos) Restituisce il codice Unicode corrispondente al carattere alla posizione pos
concat(s1, s2) Concatena due stringhe (stesso risultato di s1 + s2)
fromCharCode(code) Restituisce il carattere corrispondente al valore unicode code
indexOf(searchstring, start) Restituisce la posizione della prima occorrenza della stringa searchstring in una stringa (-1 se non lo trova). Opzionalmente la ricerca può partire dalla posizione start. 
lastIndexOf(searchstring, start) Restituisce la posizione dell'ultima occorrenza della stringa searchstring in una stringa (-1 se non lo trova). Opzionalmente la ricerca può partire dalla posizione start in vece che dall'ultimo carattere.
match(regexp) Il metodo match cerca le corrispondenza e tra l'espressione regolare regexp e la stringa, e restituisce un array di corrispondenze. Se non viengono trovate corrispondenze viene restituito null.
replace(regexp/substr, newstring) Replace() cerca una corrispondenza tra una stringa (o un'espressione regolare) e una stringa, e sostituisce la corrispondenze trovate con newstring
charAt(pos) Restituisce il carattere alla posizione pos
charCodeAt(pos) Restituisce il codice Unicode corrispondente al carattere alla posizione pos
concat(s1, s2) Concatena due stringhe (stesso risultato di s1 + s2)
fromCharCode(code) Restituisce il carattere corrispondente al valore unicode code
indexOf(searchstring, start) Restituisce la posizione della prima occorrenza della stringa searchstring in una stringa (-1 se non lo trova). Opzionalmente la ricerca può partire dalla posizione start. 
lastIndexOf(searchstring, start) Restituisce la posizione dell'ultima occorrenza della stringa searchstring in una stringa (-1 se non lo trova). Opzionalmente la ricerca può partire dalla posizione start in vece che dall'ultimo carattere.
match(regexp) Il metodo match cerca le corrispondenza e tra l'espressione regolare regexp e la stringa, e restituisce un array di corrispondenze. Se non viengono trovate corrispondenze viene restituito null.
replace(regexp/substr, newstring) Replace() cerca una corrispondenza tra una stringa (o un'espressione regolare) e una stringa, e sostituisce la corrispondenze trovate con newstring

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

Metodo Descrizione
concat( array2,array3, arrayX) Unisce uno o più array all'array a cui il metodo è applicato, e restituisce una copia degli array così uniti.
indexOf( elemento, start) Cerca elemento in un array partendo da start (o dall'inizio se start è omesso) e ne restituisce la posizione. Se start è negativo indica la posizione reativa alla fine dell'array.
join(separatore) Unisce gli elementi di un array in una stringa, e restituisce la stringa. Gli elementi sono separati da separatore. Il separatore di default è la virgola .
lastIndexOf(elemento, start) Cerca l'ultima ricorrenza di elemento in un array partendo da start (o dall'iniziose start è omesso) e ne restituisce la posizione o -1 se elemento non viene trovato.
pop() Rimuove l'ultimo elemento di un array, e restituisce  l'elemento rimosso.
push(elemento) Aggiunge elemento alla fine dell'array e restituische la nuova lunghezza.
reverse() Inverte l'ordine degli elementi dell''array.
shift() Rimuove il primo elemento di un array, e restituisce  l'elemento rimosso.
slice( inizio, fine) Estrae gli elementi a partire da inizio, fino a fine, non incluso e li restituisce in un nuovo array. L'array originale non viene modificato.
sort( sortfunct) Ordina gli elementi di un array (alfabetico ascendente) o usa sortfunct per stabilire l'ordine
splice(indice, quanti, item1, itemX) Rimuove quanti elementi dall'array a partire dalla posizine indice e inserisce gli elementi item1,  …., itemX (se forniti) a partire dalla posizine indice. Restituisce gli elementi rimossi.
toString() Restituisce l'array convertito in stringa.
unshift(elemento) Aggiunge elemento all'inizio dell'array e restituische la nuova lunghezza

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

Metodo Descrizione
getDate() Restituisce il giorno del mese (1-31)
getDay() Restituisce il giorno della settimana (0-6, 0 = domenica)
getFullYear() Restituisce l'anno (quattro cifre)
getHours() Restituisce l'ora (da 0-23)
getMilliseconds() Restituisce i millisecondi (0-999)
getMinutes() Restituisce i minuti (0-59)
getMonth() Restituisce il mese (0-11)
getSeconds() Restituisce i secondi (0-59)
getTime() Restituisce il numero di millisecondi trascorsi dalla mezzanotte del 1 gennaio 1970
getTimezoneOffset() Restituisce la differenza di tempo tra il GMT e l'ora locale
getUTCDate() Restituisce il giorno del mese, in base all'ora universale (da 1-31)
getUTCDay() Restituisce il giorno della settimana, in base all'ora universale (da0-6)
getUTCFullYear() Restituisce l'anno, in base all'ora universale (quattro cifre)
getUTCHours() Restituisce l'ora, in base all'ora universale (da 0-23)
getUTCMilliseconds() Restituisce i millisecondi, in base all'ora universale (0-999)
getUTCMinutes() Restituisce i minuti, in base all'ora universale (da 0-59)
getUTCMonth() Restituisce il mese, in base all'ora universale (da 0-11)
getUTCSeconds() Restituisce i secondi, in base all'ora universale (da 0-59)

Metodi set

Metodi Descrizione
setDate() Imposta il giorno del mese di un oggetto data
setFullYear() Imposta l'anno (quattro cifre) di un oggetto data
setHours() Imposta l'ora di un oggetto data
setMilliseconds() Imposta i millisecondi di un oggetto data
setMinutes() Impostare i minuti di un oggetto data
setMonth() Imposta il mese di un oggetto data
setSeconds() Imposta i secondi di un oggetto data
setTime() Consente di impostare una data e un'ora aggiungendo o sottraendo un determinato numero di millisecondi a partire dalla mezzanotte del primo gennaio 1970
setUTCDate() Imposta il giorno del mese di un oggetto data, in base all'ora universale
setUTCFullYear() Imposta l'anno di un oggetto data, in base all'ora universale (quattro cifre)
setUTCHours() Imposta l'ora di un oggetto data, in base all'ora universale
setUTCMilliseconds() Imposta i millisecondi di un oggetto data, in base all'ora universale
setUTCMinutes() Impostare i minuti di un oggetto data, in base all'ora universale
setUTCMonth() Imposta il mese di un oggetto data, in base all'ora universale
setUTCSeconds() Impostare i secondi di un oggetto data, in base all'ora universale
setDate() Imposta il giorno del mese di un oggetto data
setFullYear() Imposta l'anno (quattro cifre) di un oggetto data
setHours() Imposta l'ora di un oggetto data

 Conversioni di oggetti Date in stringa

Metodi Descrizione
toDateString() Converte la parte relativa alla data di un oggetto Date in una stringa leggibile
toISOString() Restituisce la data come una stringa, utilizzando lo standard ISO
toJSON() Restituisce la data come una stringa, formattato come una dataJSON
toLocaleDateString() Restituisce la parte relativa alla data di un oggetto Date come una stringa, utilizzando le convenzioni di localizzazione
toLocaleTimeString() Restituisce la parte di ora di un oggetto Date come una stringa, utilizzando le convenzioni di localizzazione
toLocaleString() Converte un oggetto Date in una stringa, utilizzando le convenzioni di localizzazione
toString() Converte un oggetto Date in una stringa
toTimeString() Converte la parte ora di un oggetto Date in una stringa
toUTCString() Converte un oggetto Date in una stringa, in base all'ora universale
UTC() Restituisce il numero di millisecondi in una stringa data a partire dalla mezzanotte del 1 gennaio 1970, in base all'ora universale

Math

Proprietà

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

Proprietà Descrizione
Math.E Restituisce il numero di Eulero (circa 2,718)
Math.LN2 Restituisce il logaritmo naturale di 2 (circa 0,693)
Math.LN10 Restituisce il logaritmo naturale di 10 (circa 2,302)
Math.LOG2E Restituisce il logaritmo in base 2 di E (circa 1,442)
Math.LOG10E Restituisce il logaritmo in base 10 di E (circa 0,434)
Math.PI Restituisce PI (3.1416….)
Math.SQRT1_2 Restituisce la radice quadrata di 1/2 (circa 0,707)
Math.SQRT2 Restituisce la radice quadrata di 2 (circa 1,414)

 Metodi

Method Description
Math.abs(x) Restituisce il valore assoluto di x
Math.acos(x) Restituisce l'arcocoseno di x, in radianti
Math.asin(x) Restituisce l'arcoseno di x, in radianti
Math.atan(x) Restituisce l'arcotangente di x come un valore numerico compreso tra-PI / 2 e PI  2 radianti
Math.atan2(y,x) Restituisce l'arcotangente del quoziente dei suoi argomenti
Math.ceil(x) Restituisce X arrotondato per eccesso al numero intero più vicino
Math.cos(x) Restituisce il coseno di x (x è in radianti)
Math.exp(x) Restituisce il valore di E elevato alla x
Math.floor(x) Restituisce X  arrotondato per difetto al numero intero più vicino
Math.log(x) Restituisce il logaritmo naturale (base e) di x
Math.max(x,y,z,...,n) Restituisce il numero con il valore più alto
Math.min(x,y,z,...,n) Restituisce il numero con il valore più basso
Math.pow(x,y) Restituisce il valore di x alla potenza y
Math.random() Restituisce un numero casuale compreso tra 0 e 1
Math.round(x) Arrotonda x al numero intero più vicino
Math.sin(x) Restituisce il seno di x (x è in radianti)
Math.sqrt(x) Restituisce la radice quadrata di x
Math.tan(x) Restituisce la tangente di un angolo