javascript - 6 | webmaster & webdesigner

Click here to load reader

Post on 24-Jun-2015

247 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

Sesta lezione del modulo Javascript del corso per WebMaster & WebDesigner

TRANSCRIPT

  • 1. Javascript [6]Matteo Magni

2. BOMBrowser Object Model 3. Browser Object ModelPer esso siintendono loggettowindow tutti glioggetti che da essidipendono. 4. BOMIl BOM non unostandard, questovuol dire che ogniproduttore dibrowser potrebbeimplementarlo inmaniera diversa 5. Oggetto Window Loggetto window rappresenta la finestra del browser checontiene la pagina stessa; nella pratica, questo vuol dire avereaccesso, per esempio, alle dimensioni della finestra del browser,al testo della sua barra di stato, e molto altro. Loggetto window un oggetto globale, il che significa che non necessario specificarlo per utilizzare i suoi metodi: ne unesempio luso che abbiamo sempre fatto del metodowindow.alert(), che abbiamo sempre richiamato senza specificareloggetto al quale apparteneva.http://it.wikibooks.org/wiki/JavaScript/BOM 6. Metodi window alert(): apre una casella di messaggio conun pulsante Ok confirm(): apre una casella di messaggiocon pulsanti OK e Annulla prompt(): apre una casella di dialogo dove possibile scrivere un testo 7. Finestreresult=window.confirm(Seibello?);window.alert(result);result=window.prompt(chisei?);window.alert(result); 8. Metodi Window [2] print(): stampa la pagina contenuta nellafinestra del browser open(): apre una nuova finestra nelbrowserwindow.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 cheindicano la larghezza e laltezza che si vogliono ottenere.Il secondo metodo invece relativo alle dimensioni correntidella finestra e accetta due valori interi positivi e negativi cheindicano 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 finestradel browser sullo schermo.Con il primo metodo possibile specificare le coordinate delloschermo da impostare come posizione dellangolo superioresinistro della finestraIl secondo metodo richiede un valore relativo che indichi diquanto spostare la finestra in orizzontale e in verticale.//spostalafinestradelbrowsernellangolosuperiorewindow.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 delpunto che si desidera visualizzare con lo scrolling.Il secondo metodo relativo e richiede un numero positivo onegativo che indichi di quanto scrollare la pagina in orizzontale oin verticale//saledi200pxwindow.scrollBy(200); 12. Propriet window lenght: numero di frame in cui divisa lafinestra location: URL della pagina correntewindow.location="http://www.mozilla.org"; 13. setTimeout e setIntervalConsentono di invocare codice javascript inbase a un determinato periodo temporale.//esegueilcodicealloscaderediunintervalloditempovart=setTimeout(function(){alert(Hello)},3000);//esegueilcodiceripetutamentealloscaderedellintervallovart=setInterval(function(){alert(Pippo},1000); 14. Oggetto NavigatorE loggetto, propriet di window, checonsente di ottenere informazioni sulbrowser.//Nomebrowseralert(window.navigator.appName);//Versionebrowseralert(window.navigator.appVersion);//stringaconinformazionicheilbrowserinviacomerichiestahttpalert(window.navigator.userAgent); 15. Oggetto location//urlcompletoalert(window.location.href);//protocolloutilizzato,esempiohttpalert(window.location.protocol);//nomedidominioalert(window.location.host);//alert(window.location.hostname); 16. Oggetto location [2]//http://localhost:81stampa81alert(window.location.port);//http://localhost/pippo.htmlstampa/pippo.htmlalert(window.location.pathname);//http://localhost?s=pippostampa?s=pippoalert(window.location.search);//http://localhost#pippostampa#pippoalert(window.location.hash); 17. Oggetto location [3]//cambiaurlwindow.location.assign(http://google.com);//cambiaurlenellacronologiasostituiscelapaginacheceraprimadireplacewindow.location.replace(http://google.com);//ricaricapaginawindow.location.reload(); 18. HistoryRappresenta la cronologia di navigazionehistory.length//quantevocicisononellacronologiadellasessionecorrentehistory.back()//caricapaginaprecedentehistory.forward()//caricapaginasuccessivahistory.go(pos)//caricalapaginachesitrovanellacronologianellaposizionedipos(1,1,2,ecc...) 19. SosacroniroCon queste proprietpossiamo mettere unpo di interazionecon lutente nellepagine disosacroniro 20. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cyphermail:[email protected]