JavaScript/BOM

Arriviamo finalmente a scoprire le funzionalità di JavaScript che lo rendono il linguaggio di scripting per le pagine web tra i più diffusi: la possibilità di interagire con il browser e la pagina HTML.

Tutto questo è possibile grazie all'oggetto window e, più generalmente, a quello che è il BOM (Browser Object Model), il modello oggetto del browser: per esso si intendono l'oggetto window tutti gli oggetti che da essi dipendono.

L'oggetto window

L'oggetto window rappresenta la finestra del browser che contiene la pagina stessa; nella pratica, questo vuol dire avere accesso, per esempio, alle dimensioni della finestra del browser, al testo della sua barra di stato, e molto altro.

L'oggetto window è un oggetto globale, il che significa che non è necessario specificarlo per utilizzare i suoi metodi: ne è un esempio l'uso che abbiamo sempre fatto del metodo window.alert(), che abbiamo sempre richiamato senza specificare l'oggetto al quale apparteneva.

Proprietà

defaultStatus e status

Questa proprietà permette di ottenere o di impostare il testo predefinito della barra di stato del browser. Per esempio, sulla maggior parte dei browser, mostra la scritta "Completato" dopo l'avvenuto caricamento di una pagina.
Per usarla vi accediamo semplicemente:

window.defaultStatus = "Testo personalizzato";
//oppure anche
defaultStatus = "Testo personalizzato";

La seconda proprietà, status, indica invece il testo corrente nella barra di stato, ad esempio l'href di un link ipertestuale se vi sta passando sopra il mouse. Anche qui la sintassi è semplice:

window.status = "Testo personalizzato";

frames, length e parent

Queste tre proprietà sono legate all'uso di frame nelle pagine web.

Essendo l'uso dei frame una tecnica piuttosto obsoleta, sorpassata oramai da tecnologie lato server e deprecata dal W3C, il loro uso non sarà approfondito nel corso di questo libro.

opener

Questa proprietà restituisce un riferimento all'oggetto window che ha aperto la finestra corrente (si veda più avanti il metodo open()).

Oggetti come proprietà

La maggior parte delle proprietà dell'oggetto window sono a loro volta altri oggetti. I più importanti e utilizzati saranno trattati nel dettaglio più avanti in questo modulo e nei prossimi capitoli.

Metodi

alert(), confirm() e prompt()

Una finestra di confirm, questa volta in francese

Due di questi metodi, alert() e prompt(), sono già stati trattati in precedenza; è simile invece l'uso del metodo confirm(), in quanto anch'esso mostra una finestra di dialogo. La sua sintassi è:

window.confirm("testo");

Il metodo mostra una finestra di dialogo che mostra il testo indicato come parametro e due pulsanti, OK e Annulla), e restituisce true se l'utente clicca su OK, false negli altri casi.
Questo metodo serve per chiedere conferme all'utente prima di effettuare operazioni lunghe o importanti. Siccome un sito internet viene potenzialmente visitato da utenti di tutto il mondo, il testo sui pulsanti varia a seconda della lingua usata dal browser quindi Annulla in francese diventa Annuller, in inglese Cancel e via dicendo.

blur() e focus()

Questi due metodi rispettivamente tolgono il focus dalla finestra del browser e spostano il focus sul browser. Questo serve quando ad esempio sono aperte più finestre contemporaneamente.

resizeTo() e resizeBy()

Questi due metodi servono per ridimensionare la finestra.

Il primo è assoluto e richiede due valori interi positivi che indicano la larghezza e l'altezza che si vogliono ottenere.

Il secondo metodo invece è relativo alle dimensioni correnti della finestra e accetta due valori interi positivi e negativi che indicano di quanto si voglia ingrandire o rimpicciolire la finestra.

//rimpicciolisce la finestra del browser
window.resizeTo(200, 200);

moveTo() e moveBy()

Questi metodi servono per spostare a proprio piacere la finestra del browser sullo schermo.

Con il primo metodo è possibile specificare le coordinate dello schermo da impostare come posizione dell'angolo superiore sinistro della finestra

Il secondo metodo richiede un valore relativo che indichi di quanto spostare la finestra in orizzontale e in verticale.

Attenzione: lo spostamento della finestra porterà al ripristino delle dimensioni della finestra se questa si trova ingrandita a tutto schermo.

//sposta la finestra del browser nell'angolo superiore
window.moveTo(0,0);

scrollTo() e scrollBy()

Questi due metodi servono per effettuare lo scrolling della pagina.

Il primo metodo richiede le coordinate x e y della finestra del punto che si desidera visualizzare con lo scrolling.

Il secondo metodo è relativo e richiede un numero positivo o negativo che indichi di quanto scrollare la pagina in orizzontale o in verticale

//sale di 200 px
window.scrollBy(-200);

print()

Questo metodo serve per stampare la pagina corrente e non richiede parametri.

open()

Questo metodo apre una nuova istanza del browser, apre cioè una nuova finestra del browser in uso. La sua sintassi è:

window.open("url", "nome", "parametri")

Il primo parametro è l'indirizzo della pagina che sarà caricata nella nuova finestra; passando una stringa vuota si otterrà una pagina vuota (in pratica, viene aperta about:blank).

Il secondo parametro indica il nome della finestra che potrà essere usato ad esempio come valore per l'attributo target dei link o dei moduli HTML o ancora da altre istruzioni JavaScript.

Il terzo parametro è invece una stringa di parametri costruita con la sintassi:

nomeParametro=valore,nomeParametro2=valore2,

I principali parametri sono (non sono tutti compatibili con tutti i browser):

Nome parametro	Possibili valori	Descrizione
copyhistory	yes, no	Copia o meno la cronologia della finestra padre nella finestra figlia
width, height, top, left	numero intero	Indicano rispettivamente le dimensioni e la posizione sullo schermo della finestra
location	yes, no	Indica se mostrare la barra dell'indirizzo
menubar	yes, no	Indica se mostrare la barra dei menu
resizable	yes, no	Abilita il ridimensionamento della finestra
scrollbars	yes, no	Mostra/nasconde le barre di scorrimento laterali
status	yes, no	Mostra la barra di stato
toolbar	yes, no	Mostra la barra degli strumenti

La funzione restituisce un riferimento all'oggetto window appena aperto. Ad esempio:

finestra = window.open("pagina.html", "finestra1", "toolbar=no,location=yes");
finestra.defaultStatus = "Benvenuti nella nuova finestra!";

Potremo poi usare il nome finestra1 nel codice HTML:

<a href="pagina2.html" target="finestra1">Link</a>

Possiamo anche creare una generica funzione, per poi creare nuove finestre partendo dai link:

function apriFinestra(url, nome, width, height) {
var params = "width:" + width + ";height=" + height;
window.open(url, nome, params);
}

e poi per usarla la inseriamo per esempio in un link:

<a href="javascript:apriFinestra('pagina.html', 'Nuova_finestra', 200,200)">Apri</a>

In questo modo, grazie alla sintassi "javascript:istruzione", cliccando sul link verrà eseguita la funzione appena creata.

Dal codice della finestra aperta si potrà ottenere un riferimento alla finestra che la ha aperta tramite la proprietà window.opener.

close()

Chiude una finestra del browser.