(Notare la all'interno della condizione nell'istruzione if. La barra verticale indica Or, in Java; & avrebbe indicato AND)

Transcript

1 Oggetto navigator L'oggetto navigator è figlio dell'oggetto window. Per anni i due principali browser, Internet Explorer e Netscape Navigator, hanno recepito gli standard HTML e Java Script attraverso proprie modalità. Poiché i vari browser supportano funzionalità differenti, è possibile utilizzare l'oggetto navigator per rilevare quale browser sta utilizzando l'utente e quindi, se necessario, reindirizzare l'utente verso una pagina web configurata per il browser corretto. Proprietà dell'oggetto navigator La proprietà appname dell'oggetto navigator identifica il nome dell'applicazione browser (il nome del browser). La proprietà appversion ne identifica la versione. Esempio di pagina adatta alla rilevazione di questi dati. rileva.htm <htlm><head> <script language = "javascript"> if (navigator.appname == "Netscape" navigator.appname == "Microsoft Internet Explorer") document.write("appname vale <b>" + navigator.appname + "</b> Versione -> " + navigator. appversion); else document.write("browser particolare"); </html> (Notare la all'interno della condizione nell'istruzione if. La barra verticale indica Or, in Java; & avrebbe indicato AND) Oggetto location L'oggetto location è un altro figlio dell'oggetto window. Ogni finestra contiene un oggetto location, che fornisce informazioni sull'url del documento corrente. I metodi associati all'oggetto location vengono utilizzati per reindirizzare la finestra del browser verso un altro URL. E' anche possibile recuperare l'oggetto location dall'oggetto document utilizzando la proprietà location di quest'ultimo (document.location) Proprietà dell'oggetto location file:///c /Documenti-Disco-40/DatiSalvati/utilità/appuntiHTMLSCRIPT/Pag3_appuntijavascript.htm (1 di 7)05/10/

2 Esistono diverse proprietà associate all'oggetto location. La proprietà HREF identifica l'indirizzo URL completo della pagina web. La proprietà host è una combinazione del nome dell'host e del numero di porta (Normalmente la porta è la 80. La maggior parte dei siti web non specifica il numero della porta, perché utilizza quello di default). La proprietà pathname rappresenta il percorso per raggiungere il file e include il nome di quest'ultimo. Es. pagina web che visualizza le proprietà dell'oggetto location proprieta.htm <title>proprieta di location</title> <script language = "javascript"> var b = "<br>"; document.write("document.location = "); document.write(document.location + b); document.write("href = "); document.write(location.href + b); document.write("protocol = "); document.wite(location.protocol + b); document.write("host = "); document.write(location.host + b); document.write("hostname = "); document.write(location.host +b); document.write("port = "); document.write(location.port +b); document.write("pathname = "); document.write(location.pathname + b); </body></html> metodi dell'oggetto location Il tag HTML meta consente di reindirizzare il browser verso un'altra pagina web. Questo tag consente anche di impostare il numero di secondi da far trascorrere prima di dar avvio al reindirizzamento. Il tag meta può essere usato in alternativa alla proprietà location.href per reindirizzare la pagina: <script language = "javascript"> location.href = " Lo script precedente permette di reindirizzare il browser verso la pagina indicata (è la pagina index.htm del sito indicato) L'esempio seguente permette di ottenere un reindirizzamento utilizzando il tag meta. In particolare, l'esempio file:///c /Documenti-Disco-40/DatiSalvati/utilità/appuntiHTMLSCRIPT/Pag3_appuntijavascript.htm (2 di 7)05/10/

3 permette di capire come sia possibile far comparire una finestra che automaticamente, dopo alcuni secondi, si chiude automaticamente. compari.htm <script language="javascript"> window.open ("compari10sec.htm","","scrollbars=no,resizable=no,width=473,height=370,top=200, left=40"); <h2>pagina che ne apre un'altra con window.open</h2> </body></html> la pagina compari10sec.htm sarà così impostata: <title>pagina compari-scompari</title> <meta content="10; url=docud.htm" http-equiv="refresh"> <h1>pagina che rimane attiva 10 secondi</h1> </body></html> la pagina docud.htm chiude, dopo 10 secondi, la pagina compari10sec.htm <title></title> <script language="javascript"> window.close(); </body> </html> Il metodo reload, senza argomenti passati o con argomento true, forza il browser a ricaricare la pagina Web attuale nella finestra corrente Il metodo replace sostituisce l'url corrente con uno nuovo. Il metodo sostituisce la voce del documento corrente nell'elenco della cronologia del browser. location.replace(" Oggetto History file:///c /Documenti-Disco-40/DatiSalvati/utilità/appuntiHTMLSCRIPT/Pag3_appuntijavascript.htm (3 di 7)05/10/

4 L'oggetto history è un altro figlio dell'oggetto window. Ciascun oggetto window contiene un oggetto history, che fornisce informazioni relative agli URL visitati di recente. L'oggetto history permette soltanto di utilizzare la cronologia generata durante la sessione del browser corrente. Proprietà dell'oggetto history la proprietà length identifica il numero di voci contenute nell'oggetto history. La proprietà previous e next non sono abilitate. Avrebbero indicato gli URL visitati, il precedente e il successivo rispettivamente, ma questo per motivi di sicurezza non è consentito (Si potrebbe sapere chi ha richiesto la pagina) Metodi dell'oggetto history Per navigare verso altre pagine contenute nell'elenco della cronologia, si utilizzano i metodi forward, back e go. Per motivi di sicurezza, l'oggetto history non fornisce i nomi degli elementi presenti nell'elenco, perciò gli sviluppatori di siti Web non possono recuperare gli URL dei visitatori dagli elenchi di cronologia.tuttavia, i metodi dell'oggetto history permettono di accedere all'elenco di cronologia e rimandare alla pagina precedente (back), seguente (forward), o a un numero di voci avanti o indietro nella cronologia. L'esempio seguente mostra due pagine: crono1.htm crono2.htm,le quali contengono un link ad un'altra pagina: cronosucc.htm. In quest'ultima pagina è presente un link che rimanda alla pagina da cui si è giunti <a href="javascript:history.back();">fai click qui per tornare alla pagina precedente</a> L'attributo href di questo link non indica in modo esplicito un URL. Indica invece il metodo window.history.back (). Davanti a history.back() è stato posto javascript: per indicare che non si fa riferimento ad un URL direttamente, ma che sarà un metodo java-script a fornire ad href il valore necessario. Nel successivo esempio vengono creati due pulsanti che inviano il browser verso l'elemento successivo, o a quello precedente, della cronologia. <form> <input type = "button" name = "back" value = "<-- Torna indietro" onclick = "history.back()"> <input type = "button" name = "forward" value = "Vai avanti -->" onclick = "history.forward()"> </form> La stessa possibilità viene offerta utilizzando il metodo go <form> <input type = "button" name = "back" value = "<-- Torna indietro" onclick = "history.go(-1)"> <input type = "button" name = "forward" value = "Vai avanti -->" onclick = "history.go(1)"> </form> file:///c /Documenti-Disco-40/DatiSalvati/utilità/appuntiHTMLSCRIPT/Pag3_appuntijavascript.htm (4 di 7)05/10/

5 Oggetto document L'oggetto document è figlio dell'oggetto window, e mentre l'oggetto window rappresenta la finestra del Browser attuale, l'oggetto document rappresenta la pagina Web corrente all'interno della finestra. La sintassi per l'oggetto document può essere specificata completamente tramite window.document.nomeproprietà o window. document.metodo. Tuttavia, non essendo necessario specificare l'oggetto window per fare riferimento alla finestra corrente, si può scrivere semplicemente: document.nomeproprietà o document.metodo. L'oggetto document contiene molti figli. Poiché questi ultimi possono essere multipli (e dello stesso tipo), vengono memorizzati in collezioni, indicate anche con il nome di array. Proprietà dell'oggetto document I tag HTML, quali title e body, possono essere utilizzati per impostare l'aspetto di una pagina Web. Per lo stesso scopo si può utilizzare l'oggetto document, con il vantaggio di poter modificare le proprietà della pagina "al volo". Nell'esempio seguente, in documento1.htm, vengono impostati il titolo e le proprietà del colore della pagina dell'oggetto document. Successivamente vengono poi visualizzate le proprietà correnti della pagina. (Per specificare il colore si può utilizzare il suo nome - esiste una tabella di nomi validi - oppure il suo valore esadecimale - RBG. L'oggetto document visualizza i valori del colore utilizzando il codice esadecimale) <script language="javascript"> document.title = "Pagina documento1"; document.bgcolor = "silver"; document.fgcolor = "maroon"; document.writeln("bgcolor vale " + document.bgcolor + "<br>"); document.writeln("fgcolor vale " + document.fgcolor + "<br>"); document.writeln("alinkcolor vale " + document.alinkcolor + "<br>"); document.writeln("vlinkcolor vale " + document.vlinkcolor + "<br>"); document.writeln("linkcolor vale " + document.linkcolor + "<br>"); alinkcolor background bgcolor cookie defaultclientscript Il colore dei collegamenti ipertestuali attivi sulla pagina Web. Il default è rosso. Un collegamento ipertestuale attivo è un collegamento su cui è stato posizionato il puntatore del mouse e premuto il pulsante, senza rilasciarlo ancora. Identifica un'immagine di sfondo da utilizzare. Il colore dello sfondo. Se c'è un'immagine di sfondo, allora questa proprietà non va a coprire l'immagine. Il cookie del documento. Il linguaggio di script di default del client, solitamente JavaScript. file:///c /Documenti-Disco-40/DatiSalvati/utilità/appuntiHTMLSCRIPT/Pag3_appuntijavascript.htm (5 di 7)05/10/

6 defaultserverscript domain fgcolor lastmodified linkcolor referrer text title url vlinkcolor Il linguaggio di script di default lato server, solitamente VBScript. Il nome del dominio del server Web che fornisce la pagina. Il colore utilizzato per il testo. La data in cui è stata modificata o cambiata per l'ultima volta la pagina Web. Il colore dei collegamenti ipertestuali sulla pagina Web. Il colore di default è il blu. L'URL della pagina di riferimento. Il colore del testo di default. La stringa di testo visualizzata nella barra del titolo del browser L'URL della pagina corrente. Il colore dei collegamenti ipertestuali visitati sulla pagina Web. Il colore di default è il porpora. Due modi per cambiare il colore di sfondo della pagina Cambia1.htm <input type = "button" name = "Silver" value = "SILVER" onclick = 'document.bgcolor = "silver"'> Cambia2.htm <a href = "Javascript:void(0)" onclick = 'document.bgcolor = "silver"'> SILVER</a> Metodi dell'oggetto document Write e writeln sono i metodi più usati dell'oggetto document. Questi due metodi consentono di scrivere il codice HTML nella propria pagina. La sintassi per usare questi metodi è: document.write("string"); Si può utilizzare testo, tag html, espressioni e variabili, ma tutto va ricondotto ad un'unica stringa. Per unire assieme gli elementi, si utilizza un operatore di concatenazione. Il testo e i tag HTML appaiono sempre racchiusi tra doppi apici. In javascript l'operatore di concatenazione è il segno più (+). Il metodo writeln differisce dal metodo write poichè inserisce uno spazio a fine stringa (per andare effettivamente a capo occorre aggiungere alla stringa il tag br - "stringa" + "<br>". Altri due metodi a disposizione dell'oggetto document sono open e close. Il metodo open agisce come una lavagna bianca, ovvero rimuove il vecchio contenuto dal documento corrente in modo da prepararlo per il nuovo contenuto. Il metodo close chiude il flusso, bloccando qualsiasi ulteriore output verso il documento. Gestori di eventi dell'oggetto document file:///c /Documenti-Disco-40/DatiSalvati/utilità/appuntiHTMLSCRIPT/Pag3_appuntijavascript.htm (6 di 7)05/10/

7 L'oggetto document, come tutti gli oggetti, risponde agli eventi grazie ai gestori di eventi. Quando l'utente fa click sulla pagina, viene innescato l'evento onclick. Nella tabella seguente sono descritti gli eventi che possono verificarsi: onabort onblur onchange onclick ondblclick onerror onfocus onload onkeydown onkeypress onkeyup onmouseover onmouseout onmousemove onresize onsubmit onmouseup Si verifica quando si interrompe il caricamento di un'immagine. Si verifica quando un oggetto sulla pagina perde il focus, ovvero quando viene deselezionato. Si verifica quando un campo di testo in un form viene modificato. Si verifica quando l'utente fa click su un pulsante. Si verifica quando si fa un doppio click su un elemento. Si verifica quando un documento o un'immagine non possono essere caricate correttamente. Si verifica quando un oggetto sulla pagina acquista il focus, ovvero viene selezionato. Si verifica quando una pagina o un'immagine finisce il suo caricamento. Si verifica quando l'utente preme un tasto sulla tastiera. Utilizzato con onkeydown; azione eseguita mentre l'utente tiene premuto un tasto. Si verifica quando l'utente rilascia un tasto sulla tastiera. Si verifica quando quando il mouse si posiziona su un elemento nella pagina. Si verifica quando il mouse si allontana da un elemento nella pagina. Si verifica quando il mouse si sposta. Si verifica quando la finestra attiva viene ridimensionata. Si verifica alla pressione di un tasto Submit di un form. Si verifica quando l'utente rilascia il pulsante del mouse. Es. Nella pagina pagevent.htm, della quale si puo vedere qui sotto il contenuto html, sono state inserite due istruzioni java all'interno di un tag <a>. In pratica è stato disabilitato il passaggio all'url, che l'attributo href avrebbe dovuto indicare, ed è stato inserito onmouseover ad indicare che dovrà apparire una fiestra di alert non appena il puntatore del mouse verrà posizionato su "link" <html> <head> <p><a href="javascript:void(0);" onmouseover="alert('il mouse è sopra il link');">link</a></p> </body> </html> file:///c /Documenti-Disco-40/DatiSalvati/utilità/appuntiHTMLSCRIPT/Pag3_appuntijavascript.htm (7 di 7)05/10/