12. Applicazioni Web lato client

Nella PRIMA PARTE è stato descritto il linguaggio JavaScript di base;
ora procederemo con l'uso di JavaScript lato client.
JavaScript è il linguaggio di scripting più utilizzato per
per progettare applicazioni web
che girano all'interno del suo ambiente naturale,
e cioé il Browser Web.

L'oggetto Window del Browser Web,
è l'elemento principale delle applicazioni lato client
e rappresenta sia la finestra del browser
sia l'oggetto globale
le cui proprietà e metodi sono utilizzabili dagli script
del linguaggio di programmazione JavaScript incorporati nella pagina web.

È possibile farvi riferimento con l'identificatore window
e rappresenta lo strumento di programmazione fondamentale
che consente di dotare le pagine web di dinamicità,
ossia di cambiarne il contenuto predefinito e statico
in relazione all'interazione dell'utente;
oppure in automatico a seguito di appositi eventi di sistema.

13. BOM (Modello a Oggetti del Browser)

Il Browser Object Model è un modello a oggetti,
privo di una specifica, esposto da un browser che consente
di interagire e interfacciarsi con esso e con lo schermo del computer.
Attraverso l'oggetto globale Window definisce un assortimento di proprietà e metodi
per la programmazione lato client.

Esso espone le funzionalità di un browser attraverso
la definizione di una gerarchia di oggetti:

quali:
window,
location,
screen,
document,
history,
navigator.

con proprietà e metodi per manipolare l'ambiente di esecuzione della pagina web.

L'immagine che segue raffigura quanto appena detto

L'oggetto window racchiude tutto l'ambiente del browser,
compresi i bordi della finestra, la pagina web e le azioni effettuate dagli utenti.

L'oggetto window è l'oggetto di primo livello.
Tramite window si può impostare manualmente:
- la visualizzazione delle barre del browser,
- aprire una nuova finestra,
- ridimensionarne una già aperta,
- chiuderla e così via.

Le proprietà e i metodi di window possono essere suddivisi in
quattro categorie:

- Creazione e gestione di nuove finestre.

- Temporizzazione.

- Manipolazione del comportamento di finestre esistenti.

- Accesso agli oggetti definiti nella gerarchia del BOM.

Alla prima categoria appartengono tre metodi
che forniscono un meccanismo per visualizzare facilmente
tre tipi di finestre di pop-up
e un quarto che permette di creare una finestra
completamente personalizzata.

Finestre di dialogo

L'oggetto window mette a disposizione i metodi:
alert,
per visualizzare una piccola finestra contenente il messaggio fornito come argomento e un pulsante OK;

confirm,
per visualizzare una piccola finestra contenente il messaggio fornito come argomento con i pulsanti OK,
che se premuto fa ritornare al metodo il valore true,
e Cancel, che se premuto fa ritornare al metodo il valore false;

prompt,
per visualizzare una piccola finestra contenente il messaggio fornito come primo argomento,
un campo di testo con un eventuale valore di default fornito come secondo argomento, un pulsante OK
che se premuto fa ritornare al metodo il valore del campo di testo e un pulsante Cancel
che se premuto fa ritornare al metodo il valore null.

Tutti i metodi citati possono contenere come messaggio solo del testo semplice
senza alcuna formattazione e sono bloccanti,
ossia finché l'utente non preme il pulsante OK o Cancel
la sottostante pagina web non è utilizzabile.

È inoltre disponibile il metodo

showModalDialog
che permette di creare delle finestre di dialogo modali
più complesse e personalizzate di quelle create dai metodi prima citati.

Timer
I metodi setTimeout e setInterval
come proprietà dell'oggetto window consentono rispettivamente,
di invocare una funzione solo una volta e allo scadere di un determinato periodo temporale
e di invocare una funzione ripetutamente allo scadere di un determinato periodo temporale.

Finestre personalizzate
Ci sono molti buoni motivi per voler aprire una nuova finestra:
- per accedere a un sistema di help,
- per fornire un approfondimento su un certo tema,
- per verificare il contenuto di un carrello elettronico,
- per visualizzare un'animazione e così via.
Per aprire una nuova finestra e controllarne tutte le caratteristiche
usate il metodo open di windows.

Il metodo open,
crea una nuova finestra e vi carica la pagina specificata da un URL,
e ha la segnatur
open(url, target, features, replace):
- il parametro url
specifica l'URL della pagina da caricare nella nuova finestra,
- il parametro target
indica il nome di una finestra dove caricare la pagina di cui il parametro url,
- il parametro features
indica una serie di attributi:
(posizionamento, dimensione, barra di scorrimento e così via) che eventualmente la finestra deve possedere,

- il parametro replace
indica per una finestra già esistente e il cui nome è uguale a target
se il relativo URL deve essere sostituito (valore true) o meno
(parametro assente o valore false) dal nuovo URL nella cronologia di navigazione.

Alcuni dettagli:
- per il parametro url,
se esso è assente allora la nuova finestra sarà caricata con una pagina vuota (about:blank);

- per il parametro target,
se esiste già una finestra con quel nome allora la pagina sarà ivi caricata
altrimenti sarà creata una finestra con il nome indicato,
mentre se non è indicato alcun nome la finestra
creata avrà lo speciale nome _blank;

- per il parametro features
gli attributi indicabili non sono standard e per HTML5
sono da parte di un browser ignorabili;
inoltre per ragioni di sicurezza ogni browser include
per alcuni attributi delle restrizioni sul loro utilizzo.

- Infine, il metodo open
ritorna un riferimento all'oggetto window
che rappresenta la nuova finestra creata
o quella indicata dal parametro target.

L'oggetto location

L'oggetto location, proprietà dell'oggetto window, rappresenta l'URL correntemente visualizzato nella barra degli indirizzi di un browser.

Contiene informazioni sulla corrente URL completa.
E' un oggetto predefinito che costituisce una proprietà dell'oggetto window cui si riferisce, ed è accessibile tramite tale proprietà della window. Se non è referenziata la window di appartenenza, location si riferisce alla corrente finestra.

Principali tipi di protocolli URL

Tipi-Protocolli	DESCRIZIONE
javascript:	codice javascript. Es: javascript:back()
	Il protocollo javascript valuta l'espressione dopo i due punti
	e, se ve ne è una carica la pagina definita dall'espressione. Se
	l'espressione è indefinita (ad esempio javascript:void(0)) non
	carica nulla.
http:	www. Es: http://arcaonline.cjb.net
ftp:	file protocol transfert. Es.
	ftp://spazioweb.it/arcaonline/downloads
file:	file locali. Es: file:///c:/javascript/motore.php
mailto:	mailing. Es: maito:arcadp@neomedia.it
news:	news. Es: news://news.pippo.com/comp.lang.delphi

 LOCATION: PROPRIETÀ
Le proprietà dell'oggetto location riflettono le parti della URL
 
La struttura della URL completa è:
protocol//host:port/pathname#hash?search 
protocollo//dominio:porta/percorso#ancora?query

Le seguenti proprietà sono stringhe che 
riflettono le relative parti della URL.

hash
la stringa comincia con un cancelletto (#)

host
hostname
è la combinazione del dominio e della porta (host + port)

href
contiene l'intera URL

pathname 
port
protocol 
search
la stringa comincia con un punto interrogativo (?).

LOCATION: METODI 
reload([forza])
Ricarica la pagina corrente.
Se viene usato il parametro booleano forza 
passando il valore true,
viene forzato il caricamento della pagina
dal server 
anziché dalla cache 
(normalmente di default non ricarica
la pagina dal server).

replace(URL)
Carica la URL sovrascrivendo 
la corrente voce dell'history.
Per cui l'utente non può ricaricare 
la URL precedente con il tasto back.

L'oggetto screen

L'oggetto screen,
proprietà dell'oggetto window,
rappresenta lo schermo del computer dove sta girando l'attuale browser.
Esso mette a disposizione le seguenti proprietà,
che sono generalmente usate per ottimizzare o adeguare l'output di una pagina web a seconda della risoluzione e della quantità di colori correntemente in uso.

• availHeight:
  ritorna l'altezza disponibile in pixel dell'area dello schermo meno l'eventuale spazio verticale occupato da elementi del desktop del sistema operativo in uso come, per esempio, quello riempito da una barra delle applicazioni.


• availWidth:
  ritorna la larghezza disponibile in pixel dell'area dello schermo meno l'eventuale spazio orizzontale occupato da elementi del desktop del sistema operativo in uso.


• height:
  ritorna l'altezza totale in pixel dell'area dello schermo.


• width:
  ritorna la larghezza totale in pixel dell'area dello schermo.


• colorDepth:
  ritorna la profondità di colore dello schermo.

L'oggetto document

L'oggetto document,
proprietà dell'oggetto window,
rappresenta la porta di accesso principale al documento di una pagina web
inserito nella relativa finestra e agli elementi ivi contenuti.
Esso, a parte le proprietà che
saranno trattate quando parleremo del Document Object Model (DOM),
ha anche altre proprietà.

• body: ritorna l'elemento body.


• characterSet: ritorna una stringa contenente l'encoding di caratteri usati.


• cookie: permette di gestire in lettura e in scrittura i cookie.


• defaultView: ritorna l'oggetto window associato.


• designMode: consente tramite il valore "on" di rendere o meno (valore "off") l'intero documento editabile.


• doctype: ritorna l'elemento DOCTYPE.


• documentElement: ritorna l'elemento html.


• domain: ritorna o imposta la parte host name dell'URL da cui deriva il corrente documento.


• forms: ritorna una collezione di tutti gli elementi form presenti nel documento.


• images: ritorna una collezione di tutti gli elementi img presenti nel documento.


• links: ritorna una collezione di tutti gli elementi a e area presenti nel documento con l'attributo href impostato.


• referrer: ritorna una stringa contenente l'URL della pagina da cui si è avuto accesso alla pagina che contiene il corrente documento.


• scripts: ritorna una collezione di tutti gli elementi script del corrente documento.


• styleSheets: ritorna una collezione di tutti gli elementi che hanno incluso dei fogli di stile nel corrente documento (elementi style e link).


• title: ritorna o imposta il titolo di un documento così come specificato dall'elemento title.

Oggetto History

E' sostanzialmente un array i cui elementi contengono le URL visitate in quella finestra del browser.
Gli elementi sono creati nell'ordine di accesso, per cui history[0] contiene la prima URL visitata e history[history.lenght] contiene l'ultima.

  HISTORY: PROPRIETÀ
current
stringa contenente la URL corrente

lenght
il numero degli elementi dell'array history 
(partendo da zero).

next
stringa contenente la URL successiva a quella corrente,
se questa non è l'ultima.

previous
stringa contenente la URL precedente a quella corrente,
se questa non è la prima

       
  HISTORY: METODI
back()
carica la URL precedente. Equivale ad history.go(-1).
   
forward()
carica la URL successiva. Equivale ad history.go(1).
   
go(numero | stringa)
se il parametro fornito è un numero
(intero, positivo o negativo) carica la URL 
che è posta nell'elemento precedente (negativo)
o seguente quello corrente del 
numero di posti specificato.
Se il parametro è stringa,
tale stringa deve contenere la URL nella lista
o parte di essa.
Carica la URL posizionata 
nell'elemento più vicino a quello corrente 
che contiene quanto specificato nella stringa.

Oggetto Navigator

L'oggetto navigator, proprietà dell'oggetto window, consente di ottenere informazioni, attraverso le sue proprietà e metodi, in merito al browser in uso più altre supplementari.

• appName:
  ritorna come stringa il nome completo del browser corrente, come Netscape per Firefox, Opera per Opera e così via.


• appVersion:
  ritorna una stringa dettagliata del nome del browser, del produttore, del numero di versione, del sistema operativo in uso e così via.


• userAgent:
  ritorna una stringa dettagliata con delle informazioni come quelle riportate da appVersion più altre addizionali. Generalmente è la stessa stringa che il browser invia come intestazione di una richiesta HTTP (campo User-Agent).


• platform:
  ritorna una stringa che identifica il sistema operativo in uso.


• onLine:
  ritorna un valore booleano indicante se il browser è correntemente connesso a una rete.
• geolocation: ritorna un oggetto che fornisce delle API con cui si possono utilizzare dei servizi per la geolocalizzazione.


• javaEnabled():
  ritorna un valore booleano indicante se il browser può eseguire le applet Java.


• cookieEnabled:
  ritorna un valore booleano indicante se il browser può memorizzare dei cookie.