Javascript - 6 | WebMaster & WebDesigner

393 views

Published on

Sesta lezione del modulo Javascript del corso per WebMaster & WebDesigner

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Javascript - 6 | WebMaster & WebDesigner

  1. 1. Javascript [6]Matteo Magni
  2. 2. BOMBrowser Object Model
  3. 3. Browser Object ModelPer esso siintendono loggettowindow tutti glioggetti che da essidipendono.
  4. 4. BOMIl BOM non è unostandard, questovuol dire che ogniproduttore dibrowser potrebbeimplementarlo inmaniera diversa
  5. 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. 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. 7. Finestreresult = window.confirm(Sei bello?);window.alert(result);result = window.prompt(chi sei?);window.alert(result); 
  8. 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. 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. 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.//sposta la finestra del browser nellangolo superiorewindow.moveTo(0,0);
  11. 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//sale di 200 pxwindow.scrollBy(­200);
  12. 12. Proprietà window• lenght: numero di frame in cui è divisa la finestra• location: URL della pagina correntewindow.location = "http://www.mozilla.org";
  13. 13. setTimeout e setIntervalConsentono di invocare codice javascript inbase a un determinato periodo temporale.//esegue il codice allo scadere di un intervallo di tempovar t=setTimeout(function(){alert(Hello)},3000);//esegue il codice ripetutamente allo scadere dellintervallovar t=setInterval(function(){alert(Pippo},1000);
  14. 14. Oggetto NavigatorE loggetto, proprietà di window, checonsente di ottenere informazioni sulbrowser.//Nome browseralert(window.navigator.appName);// Versione browseralert(window.navigator.appVersion);            //stringa con informazioni che il browser invia come richiesta httpalert(window.navigator.userAgent);
  15. 15. Oggetto location//url completoalert(window.location.href);//protocollo utilizzato, esempio httpalert(window.location.protocol);//nome di dominioalert(window.location.host);//alert(window.location.hostname);
  16. 16. Oggetto location [2]//http://localhost:81 stampa 81alert(window.location.port);//http://localhost/pippo.html stampa /pippo.htmlalert(window.location.pathname);//http://localhost?s=pippo stampa ?s=pippoalert(window.location.search);//http://localhost#pippo stampa #pippoalert(window.location.hash);
  17. 17. Oggetto location [3]//cambia urlwindow.location.assign(http://google.com);//cambia url e nella cronologia sostituisce la pagina che cera prima di replacewindow.location.replace(http://google.com);//ricarica paginawindow.location.reload();
  18. 18. HistoryRappresenta la cronologia di navigazionehistory.length //quante voci ci sono nella cronologia della sessione correntehistory.back() //carica pagina precedentehistory.forward() //carica pagina successivahistory.go(pos) //carica la pagina che si trova nella cronologia nella posizione di pos (1, ­1, ­2, ecc...)
  19. 19. Sosacroniro Con queste proprietà possiamo mettere un po di interazione con lutente nelle pagine di sosacroniro
  20. 20. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×