javascript - 6 | webmaster & webdesigner

of 19/19
Javascript [6] Matteo Magni

Post on 28-Nov-2014

382 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

Sesta lezione del modulo Javascript per il corso di 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 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. Loggetto window un oggetto globale, il che significa che non necessario specificarlo per utilizzare i suoi metodi: ne un esempio luso che abbiamo sempre fatto del metodo window.alert(), che abbiamo sempre richiamato senza specificare loggetto 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. Finestreresult=window.confirm(Seibello?);window.alert(result);result=window.prompt(chisei?);window.alert(result);
  • 8. Metodi Window [2] print(): stampa la pagina contenuta nella finestra del browser open(): apre una nuova finestra nel browserwindow.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 dellapagina.Il primo metodo richiede le coordinate x e y della finestradel punto che si desidera visualizzare con lo scrolling.Il secondo metodo relativo e richiede un numero positivoo negativo che indichi di quanto scrollare la pagina inorizzontale o in verticale//saledi200pxwindow.scrollBy(200);
  • 12. Propriet window lenght: numero di frame in cui divisa la finestra 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. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: [email protected]