Lezione 8 (aa 2016-2017)

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 (Frullatore rosso) a una variabile chiamata frullatore:

var frullatore = "Frullatore rosso";

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 ("Frullatore rosso", "SMEG", 800, 1.5) alla variabile frullatore:

var frullatore = { nome:"Frullatore rosso", marca:"SMEG", volume: 1.5, potenza: 800};

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

Gli oggetti JavaScript sono un insieme di valori che vengono identificati attraverso un nome.

• Le coppie nome:valore (negli oggetti JavaScript) sono chiamate proprietà.

var persona = {
  nome:"Mario",
  cognome:"Rossi",
  anni:50,
  capelli:"biondi"
};

• I metodi sono azioni che possono essere eseguite sugli oggetti.
• I metodi sono memorizzati in proprietà come definizioni di funzioni.

var persona = {
  nome:"Mario",
  cognome:"Rossi",
  anni:50,
  capelli:"biondi",
  nomeCompleto: function() {
  return this.nome + " " + this.cognome
  }
};

Definizione

• Si definisce (si crea) un oggetto JavaScript assegnando ad una variabile un oggetto letterale.
• Spazi e interruzioni di riga non sono importanti. La definizione di un oggetto può estendersi su più righe.

Accesso alle proprietà

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

• Usando l'operatore punto .

persona.nome;

• oppure utilizzando l'operatore []

persona["nome"];

Accesso ai metodi

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

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

var nome = persona.nomeCompleto();

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

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

Prendere decisioni

• condizionale: faccio una determinata cosa se una condizione risulta vera altrimenti ne faccio un'altra
• iterativa (o loop): ripeto una determinata operazione finche una condizione risulta vera

L'istruzione if

• if ( espressione ) blocco di istruzioni
• if ( espressione ) blocco di istruzioni else blocco di istruzioni

Esempi

/*
  Blocco if
*/
if (condizione)
{
	//comandi se condizione è vera
}
// il programma continua qui

/*
  Blocco if...else
*/
if (condizione)
{
	//comandi se condizione è vera
}
else
{
	//comandi se condizione è falsa
}
// il programma continua qui

/*
  Serie di condizioni
*/
if (condizione1)
{
	//comandi se condizione1 è vera
}
else if (condizione2)
{
	//comandi se condizione2 è vera
}
else if (condizione3)
{
	//comandi se condizione3 è vera
}
else
{
	//comandi se tutte le condizioni sono false
}
// il programma continua qui

Operatori logici

 Combinare tra loro le condizioni

• esco se il tempo è bello ed è caldo
• esco se il tempo è bello o è caldo
• non esco se il tempo non è bello e non è caldo
• non esco se il tempo non è bello o non è caldo

esco se il tempo è bello ed è caldo

 esco se il tempo è bello o è caldo

 non esco se il tempo è non bello e non è caldo

  non esco se il tempo è non bello o non è caldo

Form

Il tag <form> viene utilizzato per creare un modulo HTML per l'input dell'utente.

L'elemento <form> può contenere uno o più dei seguenti elementi del modulo:

<input>

<textarea>

<button>

<select>

<option>

<optgroup>

<fieldset>

<label>

<form action="demo_form.asp" method="get">
  Nome: <input type="text" name="nome"><br>
  Cognome: <input type="text" name="cognome"><br>
  <input type="submit" value="Invia">
</form>

<input>

<form action="demo_form.asp" method="get">
  Nome: <input type="text" name="nome" placeholder="Inserisci il tuo nome"><br>
  Cognome: <input type="text" name="cognome" placeholder="Inserisci il tuo cognome"><br>
  <input type="submit" value="Invia">
</form>

<textarea>

Il tag <textarea> definisce un controllo di input di testo multilinea.

Un'area di testo può contenere un numero illimitato di caratteri.

Per default il testo viene reso in un font a larghezza fissa (di solito Courier).

L'attributo placeholder inserisce nel campo un suggerimento che scompare automaticamente quando l'utente inserisce un contenuto

<textarea name="message" rows="4" cols="50" placeholder="Inserisci il tuo messaggio">
  Testo che appare nel controllo
</textarea>

<button>

Il tag <button> definisce un pulsante cliccabile.

Contrariamente che per l'elemento input all'interno di un elemento <button> Posso inserire qualsiasi tipo di contenuto. 

Browser diversi (e sistemi operativi diversi) utilizzano diversi stili di default per l'elemento <button>.

<button type="button">Cliccami!</button>

<select>

L'elemento <select> viene utilizzato per creare un elenco a discesa.

Gli elementi <option> all'interno dell'elemento <select> definiscono le opzioni disponibili nella lista.

La proprietà value dell'elemento <select> indica il valore (attributo value) della <option> selezionata dall'utente

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>