Tipi di dati, oggetti e classi

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.


OGGETTI (CLASSI) PREDEFINITI

Tipi di base (o tipi semplici):
  • Number: numeri interi e numeri con parte decimale
  • String: Stringhe di caratteri (testo)
  • Boolean: Vero e falso

Tipi complessi:

  • Array: Lista indicizzata di valori.
  • Date: Date.
  • RegExp: Regular Expression.
E infine l’oggetto Object che rappresenta un OGGETTO generico. Con Object posso rappresentare una struttura dati qualsiasi e costruire dei tipi di dati utente, le mie classi.
 

OGGETTI (CLASSI) STATICI

Oggetti (classi) predefiniti, già creati da javascript da cui non si possono creare istanze, ma che hanno solo metodi e proprietà statiche.
  • Math: libreria di funzioni matematica
  • JSON: Trasformazione di oggetti nella loro rappresentazione stringa e viceversa
  • localStorage: Metodi per gestire la memorizzazione di informazioni sul dispositivo dell’utente.
     

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
     

PROPRIETÀ

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 sue proprietà:

  • Usando l’operatore di appartenenza ˝•˝
  • var len = pippo.length;
  • Usando le parentesi quadre che racchiudano il nome della proprietà come stringa di caratteri.
  • var len = pippo[″length″];

Alcune proprietà sono a sola lettura.

pippo.length = 3;

è un errore perché la proprietà length è a sola lettura.

Mentre invece:

elemento.innerHTML = ″Ciao gente!″;
modifica il contenuto HTML dell’elemento della pagina elemento (che un elemento HTML definito nella pagina).
 

METODI

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.

Per eseguire un metodo uso l’operatore di appartenenza ˝•˝ e faccio seguire l’identificatore da un coppia di parentesi tonde

var giorno = pippo.getDate();

Il metodo getDate, ad esempio,  restituisce il giorno del mese della data contenuta in pippo che viene memorizzato nella variabile giorno.

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

pippo.setDate(3);

Modificherò la data contenuta nella variabile pippo: il giorno del mese sarà 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 stessa:

var data = Date.parse("March 21, 2012");

La variabile data contiene l’oggetto Date ottenuto convertendo in data la stringa passata come parametro al metodo statico Date.parse

L’OGGETTO document

Quando il browser carica la pagina web crea automaticamente l’oggetto document. document è una variabile riservata che contiene l’insieme di tutti gli elementi HTML definiti nella pagina.

La maggior parte dell’attività di programmazione in javascript consiste nell’interagire con l’oggetto document: aggiungere elementi, estrarre elementi e modificarli, rispondere con azioni agli eventi provocati dall’utente e subiti dagli elementi interattivi.

Come per gli altri oggetti l’accesso alle proprietà e ai metodi avviene attraverso l’operatore di appartenenza (.)

Se, per esempio, voglio recuperate l’elemento con l’attributo id = mio_id:

var elemento = document.getElementById(‘mio_id’);


COSTRUCTOR

È la particolare metodo che consente di creare un oggetto di un particolare tipo (un’istanza di una classe):

  • Implicito:
  • var str = "Ciao!";
  • Esplicito:
  • var adesso = new Date();
  • Altra funzione o metodo:
  • var elemento = document.createElement("p");


NUMBER*

CONSTRUCTOR

var n = 5;
var n = new Number(5);
var n = 10.6;
var n = new Number(10.6);

*) Vedi slides per i dettagli.

STRING*

CONSTRUCTOR

var str = "Ciao!";
​var str = new String("Ciao!");

*) Vedi slides per i dettagli.

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.


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 stringheutilizzanda 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.


REGEXP*

CONSTRUCTOR

var re = new RegExp(pattern, mod);
var re = /pattern/modificatori;
var re = /0-9/g;

*) Vedi slide per i dettagli.
 

ARRAY*

CONSTRUCTOR

var a = [1,6,78,23];

var a = new Array(1,6,78,23);

*) Vedi slide per i dettagli.

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

sort
var rubrica = [
   {nome:"Mario", cognome:"Rossi" },
   {nome:"Luigi", cognome:"Neri" },
   {nome:"Piero", cognome:"Verdi" },
   {nome:"Mario", cognome:"Bianchi" }
];

var sortCognome = function (a,b){
   if (a.cognome > b.cognome){
      return 1;
   } else if (a.cognome == b.cognome){
      return 0;
   } else {
      return 1;
   }
};

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);

*) Vedi slide per i dettagli.


MATH*

*) Vedi slide per i dettagli.
 

DOCUMENT OBJECT MODEL

HTML (e XHTML) hanno la funzione di strutturare in una rigida gerarchia i contenuti di una pagina WEB

Quando i browser caricano il contenuto di una pagina organizzano quindi questi contenuti in memoria in una struttura gerarchica ben definita utilizzando una architettura ad oggetti.

Questa struttura gerarchica è il Document Object Model.

Javascript consente di intervenire su questa struttura aggiungendo, togliendo o modificando gli elementi di cui è composta.
 

STRUTTURA MINIMA DI UNA PAGINA HTML

<html>

<head></head>

<body></body>

</html>


WINDOW

L’oggetto window è al vertice della gerarchia degli oggetti.

Rappresenta il la finestra del browser in cui appaiono i documenti HTML. In un ambiente multiframe, anche ogni frame è un oggetto window.

Dato che ogni azione sul documento si svolge all'interno della finestra, la finestra è il contenitore più esterno della gerarchia di oggetti. I suoi confini fisici contengono il documento.
 

NAVIGATOR

L’oggetto navigator rappresente il browser.

Utilizzando questo oggetto gli script posso accedere alle informazioni sul browser che sta eseguendo il vostro script (marca, versione sistemo operativo).

E’ un oggetto a sola lettura, e il suo uso è limitato per ragioni di sicurezza.
 

SCREEN

L’oggetto screen rappresente lo schermo del computer su cui il browser è in esecuzione.

E’ un oggetto a sola lettura che consente allo script conoscere l'ambiente fisico in cui il browser è in esecuzione.

Ad esempio, questo oggetto fornisce informazioni sulla risoluzione del monitor.
 

HISTORY

L’oggetto history rappresenta l’oggetto che in memoria tiene traccia della navigazione e presiede al funzionamento dei bottoni back e forward e alla cronologia del browser.

Per ragioni di sicurezza e di privacy gli script non hanno accesso a informazioni dettagliate sulla history e l’oggetto di fatto consente solo di simulare i bottoni back e fprward.
 

LOCATION

L’oggetto location rappresenta l’url da cui è stata caricata la pagina

La sua funzione principale è quella di caricare una pagina diversa nella corrente finestra o frame.

Allo script è consentito di accedere ad informazioni solo sulla url da cui è stato caricato.
 

DOCUMENT*

*) Vedi slide per i dettagli.

Ogni documento HTML che viene caricato in una finestra diventa un oggetto document.

L'oggetto document contiene il contenuto strutturato della pagina web.

Tranne che per gli html, head e body, oggetti che si trovano in ogni documento HTML, la precisa struttura gerarchica dell’oggetto document dipende dal contenuto del documento.

Documento vuoto: 

<html>

  <head></head>

  <body></body>

</html>
 

LA STRTTURA AD ALBERO

Dopo che un documento viene caricato nel browser, gli oggetti vengono organizzati in memoria nella struttura gerarchica specificato dal DOM.

Ogni elemento di questa struttura ad albero viene chiamato nodo. 

Ogni nodo può essere:

  • un nuovo ramo dell’albero (cioè avere o non avere altri nodi figli)
  • una foglia (non avere nodi figli)

Nel DOM avremo:

  • elementi
  • nodi di testo

OBJECT REFERENCE

Javascript agisce sul DOM modificando, eliminando e aggiungendo oggetti.

Per agire sul DOM lo script deve interagire con qualcuno dei nodi presenti nella struttura ad albero:

  • Per modificarlo
  • Per aggiungere testo
  • Per aggiungere un figlio ecc.

Avrà bisogno di un riferimento unico al nodo su cui agire

Ad ogni nodo posso dare un nome unico utilizzando l’attributo id.

<p id=”primoParagrafo” >

 <img id=”logo” src=”images/logo.jpg” alt=”Logo Azienda”>

<div class=”header” id=”header”>

Per poter essere utilizzato facilmente in uno script l’ID di un oggetto deve seguire alcune regole:

  • non può contenere spazi
  • non devono contenere segni di punteggiatura tranne che per il carattere di sottolineatura (es.: primo_paragrafo)
  • deve essere racchiuso tra virgolette quando viene assegnato all’attributo id
  • non deve iniziare con un carattere numerico
  • deve essere unico all’interno dello stesso documento

RECUPERARE GLI ELEMENTI

getElementById(id)

Questo metodo permette di recuperare l'elemento caratterizzato univocamente dal valore del proprio attributo ID e restituisce il riferimento all'elemento in questione.

La sintassi è:

elemento = document.getElementById(ID_elemento);

Il metodo getElementsByTagName (tag) restituisce un insieme di tutti gli elementi del documento con il nome tag specificato.

Viene restituito un oggetto NodeList che in sostanza si comporta come un Array. I nodi sono accessibili, ad esempio, attraverso l’indice che rispetta l’ordine con cui gli elementi appaiono nella pagina. L'indice parte da 0.

Passando il valore * come parametro vengono restituiti tutti gli elementi del documento.

È possibile utilizzare la proprietà length dell'oggetto NodeList per determinare il numero di elementi con il nome tag specificato, e scorrerli con un ciclo for o while.

La sintassi è:

elem_array= document.getElementsByTagName(nomeTag);

Se scrivo:

var elem_array= document.getElementsByTagName("a");

elem_array conterrà tutti gli elementi a presenti nella pagina, elem_array.length mi dirà quanti sono, elem_array[0] conterrà il primo elemento, elem_array[1] il secondo e così via.

Il metodo getElementsByClassName(nomeClasse) restituisce un insieme di tutti elementi del documento che hanno la classe nomeClasse.

Viene restituito un oggetto NodeList che in sostanza si comporta come un Array. I nodi sono accessibili, ad esempio, attraverso l’indice che rispetta l’ordine con cui gli elementi appaiono nella pagina. L'indice parte da 0.

È possibile utilizzare la proprietà length dell'oggetto NodeList per determinare il numero di elementi con il nome tag specificato, e scorrerli con un ciclo for o while.

NodeList è un oggetto dinamico. Eliminando o la classe nomeClasse dall’elemento l’elemento viene eliminato dalla lista.

La sintassi è:

elem_array= document.getElementsByTagName(nomeTag);

CREARE NODI ED ELEMENTI

createElement(tagName)

Il metodo crea un nuovo elemento di qualunque tipo. Restituisce un riferimento al nuovo elemento creato.

La sintassi è:

nuovo_elemento = document.createElement(nomeTag);

createTextNode(text)

Il metodo crea un nuovo nodo di testo e restituisce il riferimento al nuovo nodo creato.

La sintassi è:

nuovo_testo = document.createTextNode(testo);

nuovo_testo = document.createTextNode("Ciao");


ELEMENTS

tagName

È la proprietà che restituisce il nome del tag dell'elemento a cui è applicata.

Sintassi:

nome_tag = elemento.tagName;

attributes

È la proprietà che restituisce l'elenco degli attributi diun determinato elemento.

Esempi:

attributi = elemento.attributes;

classeElemento = attributes["class"].value;

innerHTML

Restituisce il codice HTML compreso tra il tag di apertura e il tag di chiusura che definiscono l'elemento a cui è applicata.

Sintassi:

elemento.innerHTML = "<p>Hello world! </p>";

var testo = elemento.innerHTML;

setAttribute, getAttribute e removeAttribute

Questi tre metodi se applicati a un elemento rispettivamente creano o impostano, leggono ed eliminano un attributo dell'elemento stesso.

Se elemento è una varibile che contiene il riferimento ad un elemento avrò:

elemento.setAttribute(nome_attributo, valore_attributo);

valore_attributo = elemento.getAttribute(nome_attributo);

elemento.removeAttribute(nome_attributo);

classList

La proprietà classList restituisce la lista delle classi di un elemento, come un oggetto DOMTokenList.

Questa proprietà è utile per aggiungere e rimuovere le classi CSS di un elemento.

La proprietà classList è di sola lettura, tuttavia, è possibile modificarla applicando i metodi .add (), .remove () e toggle().

Nota: La proprietà classList non è supportato in IE9 e precedenti.

className

La proprietà className restituisce o imposta il contenuto dell’attributo class di un elemento.

Questa proprietà è utile per aggiungere e rimuovere le classi CSS di un elemento.

Costituisce l’aternativa a classList per i browser che non la supportano..

style

La proprietà style viene utilizzata per leggere o impostare lo stile in-line di un elemento.

Nota: La proprietà style è un oggetto. Le varie regole CSS si assegnano modificando, aggiungendo e togliendo una proprietà "CSS" allo stile e specificare un valore:

element.style.backgroundColor = "red";

I nomi utilizzati in JavaScript per l'impostazione delle proprietà CSS è leggermente diverso  da quello CSS (backgroundColor invece di background-color). Il

• La proprietà style restituisce solo le dichiarazioni CSS in-line, impostate nell’attributo style dell'elemento. Non è possibile utilizzare questa proprietà per ottenere informazioni sulle regole di stile dalla sezione <head> del documento o fogli di stile esterni.

RELAZIONE TRA NODI

parentNode

proprietà che restituisce il riferimento al nodo che contiene il nodo corrente. Ogni nodo ha un solo parentNode. Quando il nodo non ha padre la proprietà restituisce

null.

nodoPadre = nodo.parentNode;

childNodes

proprietà che restituisce una nodeList di riferimenti ai nodi che discendono direttamente dal nodo corrente. I nodi sono nello stesso ordine in cui appaiono nella pagina.

I nodi di testo (il contenuto di testo degli elementi) vengono restituiti come textNode separati.

nodiFigli = nodo.childNodes;

children

proprietà che restituisce una nodeList di riferimenti agli elementi che discendono direttamente dal nodo corrente, compreso il testo che contengono.

Gli elementi sono nello stesso ordine in cui appaiono nella pagina.

var nodiFigli = nodo.children;

firstChild

proprietà che restituisce il riferimento al primo dei figli che discendono direttamente dal nodo corrente.

Corrisponde a childNodes[0]

primoFiglio = nodo.firstChild;

lastChild

proprietà che restituisce il riferimento all'ultimo dei figli che discendono dal nodo corrente. Corrisponde a childNodes[childNodes.length - 1].

ultimoFiglio = nodo.lastChild;

previousSibling

proprietà che restituisce il riferimento al nodo "fratello" precedente a quello al quale è applicato. Se il nodo non ha "fratelli maggiori", la proprietà restituisce null.

nodoFratello = nodo.previousSibling;

nextSibling

proprietà che restituisce il riferimento al nodo "fratello" successivo a quello al quale è applicato. Se il nodo non ha "fratelli minori", la proprietà restituisce null.

nodoFratello = nodo.nextSibling;

nodeValue

proprietà che, se applicata ad un element (tag) restituisce null, mentre se applicata ad un textNode restituisce il testo che contengono. È una proprietà read/write.

testo = nodoDiTesto.nodeValue;

nodoDiTesto.nodeValue = "Ciao!";

hasChildNodes()

Questo metodo se il nodo contiene altri nodi restituisce true altrimenti false.

La sintassi è:

nodo.hasChildNodes();

appendChild()

Il metodo inserisce un nuovo nodo alla fine della lista dei figli del nodo al quale è applicato.

La sintassi è:

nodo.appendChild(nuovoFiglio);

insertBefore()

Questo metodo consente di inserire un nuovo nodo nella lista dei figli del nodo al quale è applicato, appena prima di un nodo specificato.

La sintassi è:

nodo.insertBefore(nuovoFiglio,figlio);

Esempio:

var nuovo = document.createElementi("p");

nuovo.innerHTML = "Ciao sono un nuovo paragrafo";

nodo.insertBefore(nuovo, nodo.children[0]);

// Inserisce un nuovo paragrafo come primo elemento nel contenitore

replaceChild()

questo metodo consente di inserire un nuovo nodo al posto di un altro nella struttura della pagina.

La sintassi è:

nodo.replaceChild(nuovoFiglio, vecchioFiglio);

removeChild()

il metodo elimina e restituisce il nodo specificato dalla lista dei figli del nodo al quale è applicato.

La sintassi è:

figlioRimosso = nodo.removeChild(figlioDaRimuovere);

cloneNode()

il metodo restituisce una copia del nodo a cui è applicato, offrendo la possibilità di

scegliere se duplicare il singolo nodo, o anche tutti i suoi figli.

La sintassi è:

copia = nodo.cloneNode(copiaFigli);