Sesta lezione del modulo Javascript per il corso di WebMaster & WebDesigner

1. Javascript [6]
Matteo Magni

2. BOM
Browser Object Model

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

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

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

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

7. Finestre
result = window.confirm('Sei bello?');
window.alert(result);
result = window.prompt('chi sei?');
window.alert(result);

8. 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");

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

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

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

12. Proprietà window
• lenght: numero di frame in cui è divisa la
finestra
• location: URL della pagina corrente
window.location = "http://www.mozilla.org";

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

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

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

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

17. Oggetto location [3]
//cambia url
window.location.assign('http://google.com');
//cambia url e nella cronologia sostituisce la
pagina che c'era prima di replace
window.location.replace('http://google.com');
//ricarica pagina
window.location.reload();

18. History
Rappresenta la cronologia di navigazione
history.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...)

19. Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me