javascript - 6 | webmaster & webdesigner

19
Javascript [6] Matteo Magni

Upload: matteo-magni

Post on 28-Nov-2014

412 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Javascript - 6 | WebMaster & WebDesigner

Javascript [6]Matteo Magni

Page 2: Javascript - 6 | WebMaster & WebDesigner

BOM

Browser Object Model

Page 3: Javascript - 6 | WebMaster & WebDesigner

Browser Object Model

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

Page 4: Javascript - 6 | WebMaster & WebDesigner

BOM

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

Page 5: Javascript - 6 | WebMaster & WebDesigner

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

Page 6: Javascript - 6 | WebMaster & WebDesigner

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

Page 7: Javascript - 6 | WebMaster & WebDesigner

Finestre

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

window.alert(result);

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

window.alert(result); 

Page 8: Javascript - 6 | WebMaster & WebDesigner

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

Page 9: Javascript - 6 | WebMaster & WebDesigner

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

Page 10: Javascript - 6 | WebMaster & WebDesigner

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

Page 11: Javascript - 6 | WebMaster & WebDesigner

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

Page 12: Javascript - 6 | WebMaster & WebDesigner

Proprietà window

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

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

Page 13: Javascript - 6 | WebMaster & WebDesigner

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

Page 14: Javascript - 6 | WebMaster & WebDesigner

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

Page 15: Javascript - 6 | WebMaster & WebDesigner

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

Page 16: Javascript - 6 | WebMaster & WebDesigner

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

Page 17: Javascript - 6 | WebMaster & WebDesigner

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

Page 18: Javascript - 6 | WebMaster & WebDesigner

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

Page 19: Javascript - 6 | WebMaster & WebDesigner

Domande?

Slide:

http://cypher.informazione.me/

Code:

https://github.com/inFormazione/Cypher/

mail:

[email protected]