Javascript [6]Matteo Magni

BOM

Browser Object Model

Browser Object Model

Per esso si intendono l'oggetto window tutti gli oggetti che da essi dipendono.

BOM

Il BOM non è uno standard, questo vuol dire che ogni produttore di browser potrebbe implementarlo in maniera diversa

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.

http://it.wikibooks.org/wiki/JavaScript/BOM

Metodi window

• alert(): apre una casella di messaggio con un pulsante Ok

• confirm(): apre una casella di messaggio con pulsanti OK e Annulla

• prompt(): apre una casella di dialogo dove è possibile scrivere un testo

Finestre

result = window.confirm('Sei bello?');

window.alert(result);

result = window.prompt('chi sei?');

window.alert(result); 

Metodi Window [2]

• print(): stampa la pagina contenuta nella finestra del browser

• open(): apre una nuova finestra nel browser

window.open ("http://magni.me", "mywindow","location=1,status=1,scrollbars=1, width=100,height=100");

Metodi window[3]

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

window.resizeTo(200, 200);

Metodi window[4]

• 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.//sposta la finestra del browser nell'angolo superiore

window.moveTo(0,0);

Metodi window [5]

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

Proprietà window

• lenght: numero di frame in cui è divisa la finestra

• location: URL della pagina correntewindow.location = "http://www.mozilla.org";

setTimeout e setInterval

Consentono di invocare codice javascript in base a un determinato periodo temporale.

//esegue il codice allo scadere di un intervallo di tempo

var t=setTimeout(function(){alert('Hello')},3000);

//esegue il codice ripetutamente allo scadere dell'intervallo

var t=setInterval(function(){alert('Pippo'},1000);

Oggetto Navigator

E' l'oggetto, proprietà di window, che consente di ottenere informazioni sul browser.//Nome browser

alert(window.navigator.appName);

// Versione browser

alert(window.navigator.appVersion);            

//stringa con informazioni che il browser invia come richiesta http

alert(window.navigator.userAgent);

Oggetto location

//url completo

alert(window.location.href);

//protocollo utilizzato, esempio http

alert(window.location.protocol);

//nome di dominio

alert(window.location.host);

//

alert(window.location.hostname);

Oggetto location [2]

//http://localhost:81 stampa 81

alert(window.location.port);

//http://localhost/pippo.html stampa /pippo.html

alert(window.location.pathname);

//http://localhost?s=pippo stampa ?s=pippo

alert(window.location.search);

//http://localhost#pippo stampa #pippo

alert(window.location.hash);

Oggetto location [3]

//cambia urlwindow.location.assign('http://google.com');//cambia url e nella cronologia sostituisce la pagina che c'era prima di replacewindow.location.replace('http://google.com');//ricarica paginawindow.location.reload();

History

Rappresenta la cronologia di navigazionehistory.length //quante voci ci sono nella cronologia della sessione corrente

history.back() //carica pagina precedente

history.forward() //carica pagina successiva

history.go(pos) //carica la pagina che si trova nella cronologia nella posizione di pos (1, ­1, ­2, ecc...)

Sosacroniro

Con queste proprietà possiamo mettere un po' di interazione con l'utente nelle pagine di sosacroniro

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

matteo@magni.me