JavaScript 7 - Il sito di Yoda
Transcript
JavaScript 7 - Il sito di Yoda
Loggetto navigator Proprietà di navigator 1 Rappresenta il browser in uso e permette di ottenere informazioni su nome, versione Ogni browser può avere proprietà non standard Per accedere ad una proprietà si usa la sintassi JavaScript 7 Oggetti client-side navigator.NomeProprietà Tecnologie di Sviluppo per il WEB Proprietà di navigator 2 userAgent stringa inviata dal browser al server nelle richieste HTTP nell'header di USER-AGENT platform cookieEnabled Mozilla sia per IE che NN appName nome ufficiale del browser Netscape per NN Microsoft Internet Explorer per IE appVersion Versione del codice del browser ed altri dati 2 Tecnologie di Sviluppo per il WEB Proprietà di navigator 3 Codice language var userLanguage javaEnabled() 3 browser = Browser Information: \n; (var propname in navigator) { browser += propname +:+ navigator[propname] +\n } alert(browser); for Lingua preferita dallutente (solo IE4+) equivalente di language Verifica se Java è disponibile e supportato dal browser sistema operativo dove gira il browser nome semplice del codice del browser 4.0 (compatible; MSIE 6.0; Windows NT 5.0) per IE6 5.0 (Windows; en-US) per NN7 lingua di default del browser (solo NN4+) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0) Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.0.1) Gecko/20020823 Netscape/7.0 (BDP) appCodeName Valore booleano indicante se i cookie sono abilitati Tecnologie di Sviluppo per il WEB 4 Tecnologie di Sviluppo per il WEB 5 Tecnologie di Sviluppo per il WEB 6 Loggetto navigator di IE Loggetto navigator di NN Tecnologie di Sviluppo per il WEB 7 Proprietà di screen 1 informazioni sulla risoluzione dello schermo dellutente e sul numero di colori che supporta Si potrebbero usare le informazioni contenute in screen per decidere la grandezza o numero di colori delle immagini da caricare nel documento Per accedere ad una proprietà si usa la sintassi screen.NomeProprietà Tecnologie di Sviluppo per il WEB 8 Tecnologie di Sviluppo per il WEB 9 Tecnologie di Sviluppo per il WEB 12 Esempio Proprietà di screen 2 colorDepth availHeight Specifica laltezza in pixel disponibile dello schermo (esclude laltezza della barra delle applicazioni se esiste) Loggetto screen Fornisce Specifica il logaritmo in base due del numero di colori allocati dal browser e disponibili per la visualizzazione delle immagini height Specifica laltezza in pixel dello schermo availWidth Specifica la larghezza in pixel disponibile dello schermo (esclude la larghezza di eventuali barre di applicazioni) Tecnologie di Sviluppo per il WEB 10 width Specifica schermo la larghezza in Tecnologie di Sviluppo per il WEB pixel dello 11 var intervalID=window.setInterval("rimbalza()", interval); Esempio di uso di screen - HTML Esempio di uso di screen - Rimbalza <head> <script type="text/javascript"> var x = 0, y = 0, w=200, h=200; //posiz. e grandezza della finestra var dx = 5, dy = 5; // "spostamento" della finestra var interval = 100; // velocità ms tra gliaggiornamenti var win = window.open("doc.html", "", "width=" + w + ",height=" + h); win.moveTo(x,y); Tecnologie di Sviluppo per il WEB function rimbalza() { if (win.closed) { clearInterval(intervalID); return; } if ((x+dx > (screen.availWidth - w)) || (x+dx < 0)) = -dx; if ((y+dy > (screen.availHeight - h)) || (y+dy < 0)) = -dy; x += dx; y += dy; win.moveTo(x,y); } </script> </head> 13 Loggetto location Tecnologie di Sviluppo per il WEB dx dy 14 lURL del documento che è correntemente mostrato nella finestra È possibile accedere a singole parti dellURL Tutte le proprietà sono accessibili in lettura e scrittura href URL completo del documento attualmente visualizzato host Altre proprietà sono protocol://hostname:port/pathname?search#hash basta modificarle per caricare un nuovo documento Tecnologie di Sviluppo per il WEB 16 esempio 15 http://www.abc.com:666/catalog/search.php?query=JS&match=2#result hostname e numero di porta dominio, host, ... Tecnologie di Sviluppo per il WEB Esempio Proprietà di location Rappresenta <body> <form> <input type="button" value="Ferma la finestra" onclick="clearInterval(intervalID); win.close();"> </form> </body> Tecnologie di Sviluppo per il WEB 17 protocol http: hostname www.abc.com port 666 host www.abc.com:1234 pathname /catalog/search.php search ?query=JS&match=2 hash #result Tecnologie di Sviluppo per il WEB 18 Metodi di location Loggetto history Loggetto frames[] 1 reload() Tiene Si ricarica l'URL corrente dalla cache o dal server replace() traccia della cronologia di navigazione del browser Possiede tre metodi riferisce ad una array di oggetti window ognuno dei quali rappresenta un frame della finestra corrente Se una finestra non ha frame loggetto frames[ ] è vuoto e frames.length è uguale a zero Una finestra può riferirsi al primo frame tramite frames[0], al secondo tramite frames[1], back() carica una nuova pagina passata come argomento Va indietro nella cronologia forward() Per caricare una nuova pagina nel browser è sufficiente scrivere Va avanti nella cronologia go(±Numero) Va ±Numero elementi avanti/indietro nella cronologia location.href = <URL> Tecnologie di Sviluppo per il WEB 19 Tecnologie di Sviluppo per il WEB 20 Tecnologie di Sviluppo per il WEB Loggetto frames[] 2 Frame e nomi Allinterno Possiamo Tecnologie di Sviluppo per il WEB 22 far riferimento ad un frame tramite il suo nome invece della sua posizione (molto più comodo ) Ad esempio se abbiamo il seguente frame <frame name=indice href=indice.html> Possiamo far riferimento ad esso da un qualsiasi frame suo fratello con parent.indice Graficamente . di un frame è possibile accede alla finestra genitore tramite parent ed alla finestra principale del browser tramite top Se una finestra è una finestra top-level e non è un frame allora vale che parent==self 21 Tecnologie di Sviluppo per il WEB 23 Tecnologie di Sviluppo per il WEB 24 Frame e variabili 1 Frame e variabili 2 Loggetto document Per Forse Se in un frame (frames[0]) è definita una variabile i, allora possiamo accedere ad i da qualsiasi frame (i è una proprietà di frames[0]). Ad esempio, dal secondo frame possiamo accedere nel seguente modo parent.frames[0].i = 4; Lo stesso vale per le funzioni j = parent.frames[0].f(3,4); Tecnologie di Sviluppo per il WEB 25 Metodi principali di document Tecnologie di Sviluppo per il WEB alinkColor, linkColor, vlinkColor bgColor, fgColor open() Colori dei link attivi, non visitati e visitati close() Serve per chiudere il documento. Inserire sempre una chiamata a questo metodo dopo che abbiamo finito di scrivere nella finestra del browser In caso contrario il browser non fermerà il simbolo di caricamento del documento (di solito in alto a destra). domain Dominio del documento. Usato per settare alcune proprietà di sicurezza per lo stesso dominio in finestre di un sito che vengono da web server differenti dello stesso dominio E.g., www.oreilly.com e search.oreilly.com Tecnologie di Sviluppo per il WEB 28 di implementare le caratteristiche dinamiche di HTML Alcune sue proprietà e metodi sono dipendenti dal browser close(), open(), write(), writeln() Tecnologie di Sviluppo per il WEB Tecnologie di Sviluppo per il WEB 27 Proprietà principali di document 2 lastModified referrer title URL URL del documento da cui si è provenuti (contenente il link del corrente documento). cookie Proprietà che permette di leggere e scrivere cookie associati al documento permette Contiene la data di ultima modifica del documento Colore di sfondo e di primo piano è loggetto più importante responsabile di tutto quello che compare sulla pagina 26 Proprietà principali di document 1 Apre il documento su cui andare a scrivere. Non è necessario: la prima write apre automaticamente il documento semplificare le cose potremmo scrivere var f = parent.frames[0].f; e poi usare f in frames[1] Att.ne allo scoping. Se nel frame parent sono definite vbl globali, quando f è invocata nel frame 1, lo scoping è quello del padre, 0. Il testo tra <TITLE> e </TITLE> Specifica lURL da cui il documento è stato scaricato location Sinonimo deprecato di URL 29 Tecnologie di Sviluppo per il WEB 30 Proprietà principali di document 3 Nota Proprietà principali di document 4 applets[] array delle applet contenute nel documento forms[] 31 Array images[] Tecnologie di Sviluppo per il WEB Uso: anchors.length e anchors[i].name links[] Array dei link di un documento Codificati con <A HREF= > Proprietà: le stesse di location 32 Tecnologie di Sviluppo per il WEB Proprietà di images[] Come accedere agli elementi? 1 Array di oggetti Image rappresentanti le immagini contenute nel documento border, height e width Per La prima immagine è in images[0], la seconda in images[1], hspace e vspace Possiamo assegnare ad una variabile un oggetto immagine src e lowsrc var img = new Image(); var img = new Image(larghezza, altezza); Per alcuni oggetti x esiste un costruttore X() per crearli Tutti gli array hanno la proprietà length che indica il numero di elementi contenuti anchors[] Array delle ancore di un documento (testo o immagine della pagina che è target di un link) Codificati con <A NAME= > Proprietà: length e name Analizzeremo le proprietà solo di alcuni oggetti (e.g., images[] e forms[]) per gli altri si rimanda al libro di testo Array dei moduli, maggiori dettagli in seguito Tecnologie di Sviluppo per il WEB Tutti gli array x[] di document possono essere considerati degli array di oggetti di tipo x, quindi sono associate ad essi delle proprietà Tecnologie di Sviluppo per il WEB far riferimento agli elementi di un documento (quelli rappresentati in DOM level 0 con degli array) possiamo utilizzare il loro indice spessore del bordo, altezza e larghezza dell'immagine spaziatura orizzontale e verticale La terza immagine del documento è posizionata in images[2] URL dell'immagine e immagine alternativa per bassa risoluzione Il name complete indica se l'immagine è stata caricata completamente problema con questo tipo di riferimento è che se il tag viene spostato lo script può generare un errore Nome dellimmagine Possiamo creare animazioni settando opportunamente alcune proprietà di Image 34 33 Tecnologie di Sviluppo per il WEB 35 Tecnologie di Sviluppo per il WEB 36 Come accedere agli elementi? 2 E con gli altri elementi? Rollover Esempio 1 (HTML) Se Esistono <BODY> <img width="70" height="60" name="foto" src="immagini/out.gif" onmouseover="over()" onmouseout="out()" onmousedown="giu()" onmouseup="su()" > <form name="info"> <input type="text" name="stato"> </form> </BODY> associamo a tali elementi un nome (attributo NAME del relativo tag) possiamo utilizzare direttamente il loro nome Se la terza immagine si chiama casa ci possiamo riferire ad essa come document.images[casa] oppure come document.casa tag HTML che non hanno associato nessun array Come possiamo accedere ai paragrafi (<P>) o alle sezioni (<DIV>)? Vedremo che con DOM level 1 potremo far riferimento ad un qualsiasi elemento HTML purché abbia un identificativo (attributo ID) elemento = document.getElementByID(id); Tecnologie di Sviluppo per il WEB 37 Rollover Esempio 1(JavaScript) <SCRIPT TYPE="text/javascript"> function out() { document.info.stato.value = "out"; document.foto.src = "immagini/out.gif"; } function giu() { document.info.stato.value = "giu"; document.foto.src = "immagini/giu.gif"; } 40 Tecnologie di Sviluppo per il WEB Tecnologie di Sviluppo per il WEB 39 Rollover Esempio 2(JavaScript) Rollover Esempio 2 (HTML) <SCRIPT TYPE="text/javascript"> function cambia(nome,stato) { document.info.stato.value = stato; img="immagini/"+nome+stato+".gif"; document.images[nome].src=img; } </SCRIPT> Nota document.images[...] e il precedente document.foto È necessario che le immagini abbiano un nome composto dal nome usato nellattributo NAME seguito dal loro stato Non cè pre-caricamento delle immagini. Quando si scatena levento, le immagini vengono caricate <form name="info"> <input type="text" name="stato" size="4"> </form></BODY> function su() { document.info.stato.value = "su"; document.foto.src = "immagini/su.gif"; } </SCRIPT> esempio 38 <BODY> <img width="70" height="60" name="foto" src="immagini/fotoout.gif" onmouseover="cambia('foto','over')" onmouseout="cambia('foto','out')" onmousedown="cambia('foto','giu')" onmouseup="cambia('foto','su')"> function over() { document.info.stato.value = "over"; document.foto.src = "immagini/over.gif"; } Tecnologie di Sviluppo per il WEB Tecnologie di Sviluppo per il WEB 41 Tecnologie di Sviluppo per il WEB esempio 42 Rollover ulteriore esempio <SCRIPT TYPE="text/javascript"> function Immagini() { } var ImgCaricate = new Immagini(); var directory = "immagini/"; function cambia(nome,stato) { document.info.stato.value = stato; document.images[nome].src=ImgCaricate[nome+stato]; } Pre-caricamento immagini function CaricaImmagini() { for(var i=0; i< document.images.length; i++) { nome = document.images[i].name; su = directory + nome + "su.gif"; giu = directory + nome + "giu.gif"; out = directory + nome + "out.gif"; over = directory + nome + "over.gif"; ImgCaricate[nome+"su"] = su; ImgCaricate[nome+"giu"] = giu; ImgCaricate[nome+"over"] = over; ImgCaricate[nome+"out"] = out; } } Bisogna aggiungere Per far pre-caricare al browser le immagini la cosa da fare è dichiarare un array di oggetti di tipo Image ed associare alla proprietà src il nome dellimmagine da pre-caricare var ImgCaricate = new Array(); nome = document.images[i].name; su = directory + nome + "su.gif"; ImgCaricate [nome+"su"] = new Image(); ImgCaricate [nome+"su"] .src = su; <BODY onload="CaricaImmagini()"> Tecnologie di Sviluppo per il WEB 43 Tecnologie di Sviluppo per il WEB esempio 44 Tecnologie di Sviluppo per il WEB 45