Scriviamo contenuti dinamici per una pagina...
Diversi messaggi per condizioni diverse...
Ti abbiamo ricordato in precedenza come ogni documento HTML, nel momento in cui viene caricato, sia interpretato mentre il browser legge in piu' dati. Per il codice HTML, questo significa che appena il browser ottiene abbastanza informazioni per visualizzare qualche cosa, questo cerca di farlo, anche se al contempo sta leggendo cio' che resta del documento.
Quando ci riferiamo ad un contenuto dinamico che e' possibile scrivere in JavaScript, significa che il web browser con questo puo' fare piu' del semplice "leggi e visualizza", "leggi e visualizza"... nel momento in cui esso legge nel codice JavaScript contenuto nel tuo HTML, il browser puo' prendere decisioni basate sulla modalita' con cui il codice e' organizzato, verificare alcune funzioni incluse, e quindi scrivere codici HTML diversi secondo le istruzioni con cui e' stato programmato. Esso puo' essere programmato anche per fare qualcosa di diverso secondo una logica casuale ogni volta che la pagina viene caricata.
Questo rende le tue web page un po' piu' intelligenti che semplicemente formattate!
Possiamo usare JavaScript per scrivere ogni altro tipo di contenuto HTML usando il formato:
document.write('xxxxxxxx xxxxxxxxxx');
document.write('xxxx xxxxxxx xxxxxxx xxxxx');
document.write('xx xx xxxxxxxxxxxx xx');
Ogni linea di questo codice scrive un pezzetto di
HTML, che e' tutto all'interno dei caratteri di apice singolo.
Questa serie di JavaScript statement
document.write('<h1>Grande Mondo di Formaggio</h1>')
document.write('<b><i>Nessuno a questo mondo ama il formaggio');
document.write('!<i>quanto me</b><br> -- Colby Jack (1903)');
produrra' lo stesso risultato a schermo di questo set di codice HTML:
<h1>Grande Mondo di Formaggio</h1> <b><i>Nessuno a questo mondo ama il formaggio quanto me!<i></b><br> -- Colby Jack (1903)Ora, se JavaScript si riducesse a cose di questo tipo, non staremmo certo cercando di insegnartelo! JavaScript fornisce altri tipi di informazioni che si possono visualizzare e che non sarebbero altrimenti disponibili con il solo HTML. Ci sono funzioni incluse che possono fornire la data e l'ora correnti, informazioni sul programma internet usato dall'utente ed altro, come vedremo presto. Ma ancora piu' di questo, possiamo costruire strutture logiche di verifica, in modo da poter fare cose tipo:
Se oggi e' Martedi' oppure Mercoledi' e l'ora e' posteriore alle 12:00 PM, allora visualizza questo messaggio di saluto personalizzato per il mattino; ma se l'ora e' precedente alle 12:00 PM, allora visualizza quest'altro messaggio per il pomeriggio. Ma se e' Venerdi', una qualsiasi ora, devi mostrare un diverso tipo di messaggio, non importa quale ora della giornata sia. Durante le altre giornate e gli altri orari, visualizza solo un messaggio standard di "Buona Giornata".Il codice JavaScript ci da' la flessibilita' necessaria per la creazione di contenuti dinamici che si possono comportare ed apparire diversamente in base al visitatore.
La prima cosa che faremo sara' quella di scrivere una serie di JavaScript statement che creeranno i footer per tutti i nostri documenti-- ma non come quelli che abbiamo scritto fino ad adesso, a mano; questo stesso blocco di HTML/JavaScript puo' essere tagliato & incollato in ogni documento ed altrettanto dinamicamente stampera' a video (con esempi per questa pagina mostrati tra parentesi):
Non tutti i web server forniscono date di modifica documenti accurate, elemento (c), e tipicamente, mentre si testano documenti sul desktop del proprio computer non si e' in grado di ottenere questa informazione ed esso stampa a video una qualche data sbagliata, del tipo Gennaio 1900. Ti mostreremo come verificare queste condizioni. L'elemento (d) e' estremamente utile in quanto se si ha bisogno di spostare le nostre web page ad un web server diverso o di riarrangiare il nostro site, l'URL sara' aggiornato automaticamente.
Il modello per il nostro footer "standard" per il progetto Volcano Web assomiglia al codice che segue. Lo presenteremo prima sezione per sezione con alcune spiegazioni. Non e' ul elemento critico che tu capisca esattamente come il tutto funzioni, dato che quando sara' il momento di incorporarlo alle pagine su cui hai lavorato, si trattera' di una semplice operazione di taglia & incolla.
| Footer JavaScript | |
|---|---|
| codice HTML | spiegazione |
<!-- inizio del Volcano Web standard footer --> <SCRIPT LANGUAGE="JavaScript"> <!-- nasconde gli script ai browser antiquati |
Definisce l'inizio dell'area del footer, con i tag JavaScript appropriati |
document.write('<p><hr>
<FONT FACE="helvetica,arial" size=-1>
<i>Volcano Web:</i> <B>');
|
Linea orizzontale inizio delle impostazioni per le dimensioni dei caratteri del testo e titolo principale del web site |
document.write(document.title + '</B><BR>'); |
scrive il titolo del documento corrente |
document.write('creato da Lorrie Lava, ');
document.write('<A HREF="mailto:lava@pele.bigu.edu?subject='
+ document.title + '">');
document.write('lava@pele.bigu.edu</A><br>');
|
Credits per la pagina con un e-mail link che inserisce automaticamente il titolo della pagina nella riga del soggetto. |
document.write('Volcanic Studies,
<A HREF="http://www.bigu.edu/">');
document.write('Big University</A><p>');</tt></font>
|
Altro contenuto statico. |
// apporta una modifica alla data solo se il
// server fornisce una data valida
if (Date.parse(document.lastModified) > 0) {
document.write('<B>ultima modifica: </B>'
+ document.lastModified + '<BR>');
}
|
Tutto questo puo' sembrare ingannevole. Abbiamo allestito una verifica condizionale sul valore che viene tornato da document.lastModified, e se eí valido (un risultato diverso da zero da una funzione che abbiamo usato e che eí chiamata Date.parse), noi scriviamo la data della modifica. Se non riceviamo una data valida, líintero blocco viene ignorato. |
document.write('<B>URL: </B>'
+ document.location.href + '</FONT><P>');
|
Scrive líURL del documento corrente dato dal valore tornato dalla variabile JavaScript document.location.href |
|
// nascosto dai browser antiquati --> </SCRIPT> <!-- end of Volcano Web standard footer -->
fine del blocco di codice per il footer. |
|
Per le informazioni che stiamo scrivendo nella pagina possiamo usare sia contenuto fisso come document.write (stringhe di testo tra apici) sia informazioni conservate in variabili JavaScript, come document.title, che uniamo tra loro con il simbolo "+" :
'Qui cíeí qualcosa di testo <b>HTML</b> fisso per la pagina:' + document.title + '! Forte, eh?'Il segno "+" unisce insieme il testo a formare una stringa piuí lunga, e quindi se noi lo stessimo usando in questa pagina del corso, avremmo come risultato:
|
| Qui cíeí qualcosa di testo HTML fisso per la pagina: 27b. JavaScript- Contenuto Dinamico! Forte, eh? |
Il nostro JavaScript footer utilizza anche un test ìcondizionaleî ("if this then do that") per la data della modifica, che risulta cosií:
if ( una condizione da verificare) {
JavaScript statement1;
JavaScript statement2;
:
:
JavaScript statementN;
}
che significa che se il test della parentesi alla prima riga torna un valore TRUE, noi seguiremo i passaggi tra le parentesi graffe "{" e "}"; se il test torna FALSE, noi salteremo gli statement. Con il potere di JavaScript, noi possiamo costruire dei test condizionali molto complessi, ma per adesso ci terremo sul semplice.Questo eí líaspetto del nostro JavaScript footer se fosse stato usato per questa pagina del corso:
|
Ora inseriremo il nostro footer nei nostri documenti HTML Volcano Web.
<HR> <ADDRESS><B>Volcano Web</B><br> creato da Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu">lava@pele.bigu.edu</A><p> Volcanic Studies, <A HREF="http://www.bigu.edu/">Big University</A><p> <TT>ultima modifica: Aprile 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/index.html</tt> <p>
<!-- start of Volcano Web standard footers -->
<SCRIPT LANGUAGE="JavaScript">
<!-- hide scripts from old browsers
document.write('<p><hr><FONT FACE="helvetica,arial" size=-1><i>Volcano Web:</i> <B>');
document.write(document.title + '</B><BR>');
document.write('creato da Lorrie Lava, ');
document.write('<A HREF="mailto:lava@pele.bigu.edu?subject=' + document.title + '">');
document.write('lava@pele.bigu.edu</A><br>');
document.write('Volcanic Studies, <A HREF="http://www.bigu.edu/">');
document.write('Big University</A><p>');
// append a modification date only if server provides a valid date
if (Date.parse(document.lastModified) > 0) {
document.write('<B>ultima modifica: </B>' + document.lastModified + '<BR>');
}
document.write('<B>URL: </B>' + document.location.href + '</FONT><P>');
// done hiding from old browsers -->
</SCRIPT>
<!-- end of Volcano Web standard footers -->
NOTA: Eí di importanza critica che i tuoi JavaScript statement siano su una linea singola, cominciando da document.write('... e finendo con ');. Se hai inserito dei caratteri di RETURN extra nel codice, questo non funzioneraí. E poi, assicurati che la struttura del blocco degli statement if (...) { sia esattamente come mostrato sopra.JavaScript eí ancora piuí pignolo del codice HTML per quanto riguarda i caratteri tipografici! E ci sono ancora piuí possibilitaí di errore col modo in cui sono usati gli apici.
|
<!-- start of Volcano Web standard footers -->
<SCRIPT LANGUAGE="JavaScript">
<!-- hide scripts from old browsers
document.write('<p><hr><FONT FACE="helvetica,arial" size=-1><i>Volcano Web:</i> <B>');
document.write('Project</B><BR>');
document.write('creato da Lorrie Lava, ');
document.write('<A HREF="mailto:lava@pele.bigu.edu?subject=Project">');
document.write('lava@pele.bigu.edu</A><br>');
document.write('Volcanic Studies, <A HREF="http://www.bigu.edu/">');
document.write('Big University</A><p>');
// append a modification date only if server provides a valid date
if (Date.parse(document.lastModified) > 0) {
document.write('<B>ultima modifica: </B>' + document.lastModified + '<BR>');
}
// estrae il vero URL da questo file name, assumendo questo file
// is "proj_footer.html" or "proj_footer.htm"
// and the proper URL for the frameset is "proj.html" or "proj.htm"
myURL = document.location.href;
// Get the suffix on the file name (everything after "_footer")
myExt = myURL.substring(myURL.indexOf("_footer") + 7, myURL.length)
// Get the part of the URL that goes up to "proj"
myUrl = myURL.substring(0,myURL.indexOf("_footer"))
// Assembla la stringa appropriata
document.write('<B>URL: </B>' + myUrl + myExt + '</FONT><P>');
// done hiding from old browsers -->
</SCRIPT>
<!-- end of Volcano Web standard footers -->
La prima cosa che devi fare eí quella di creare un oggetto Date in JavaScript:
var today = new Date();Ora noi abbiamo qualcosa chiamato "today" a cui ci possiamo riferire per ottenere le informazioni per quanto riguarda la data ed il tempo. JavaScript conserva queste informazioni internamente come se si trattasse del numero di secondi a partire da una data di riferimento, tipo il 1 Gennaio 1900. Ma líoggetto JavaScript Date ha proprietaí che ci permettono di ottenere esattamente il mese, il giorno, líanno, il minuto, il secondo correnti. Una delle piuí semplici da utilizzare eí Date.toLocaleString() che visualizzeraí la data in base a quelle che sono le disposizioni del computer dellíutente (dato che ci sono convenzioni diverse per la visualizzazione delle date a seconda del paese in cui ci si trova). In questo modo, potremmo scrivere un codice tipo:
var today = new Date();
document.write('Secondo il mio orologio JavaScript, sono le ' + today.toLocaleString() )'
da cui dovrebbe risultare:
|
Se tu fai un reload di questa pagina del corso, líora visualizzata saraí cambiata. Nota che la formattazione con cui viene tornata la data dipende dal tipo di computer.
JavaScript offre altre informazioni sul web browser usato dalla persona che sta vedendo la pagina, attraverso l'oggetto navigator, e quindi noi possiamo vedere sia di quale programma web si tratta (NetScape, Internet Explorer, etc) sia la versione installata. Tutto questo risulta utile se si stanno usando delle caratteristiche in una pagina web che richiedono un certo tipo di web browser-- si puo' usare del codice JavaScript per "testare" il set up e visualizzare informazioni specifiche per browser o versioni diverse.
Ora useremo gli oggetti JavaScript Date e navigator per fare comparire a video un saluto personalizzato nella nostra pagina principale e poi faremo un po' di lavoro extra perche' JavaScript mostri anche il giorno della settimana ("Lunedi', Martedi'", etc) e poi scriva un qualche messaggio se il visitatore usa una versione poco aggiornata del programma. Nelle righe seguenti abbiamo spiegato brevemente gli effetti che il codice produce, ma se vuoi vedere da solo come funziona, puoi copiarlo, incollarlo e testarlo nel tuo browser.
In questa lezione userai la Rete per cercare informazioni sui vulcani e poi scrivere il tuo resoconto sui risultati.e
<br clear=left> <hr> <p align=center>inserisci questo codice JavaScript:
<p>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from old browsers
// prende l'oggetto date
var today = new Date();
var days = new Array('Domenica', 'Luned&237;', 'Martedí', 'Mercoledí', 'Giovedí', 'Venerdí', 'Sabato');
// scrive la data
document.write('Un benvenuto in questa piacevole giornata di
');
document.write('' + days[today.getDay()] + ', '); document.write(today.toLocaleString() + '');
// scrive una stringa di benvenuto ricoscendo la versione del browser
document.write('Speriamo tu possa goderti le tue esperienze web con la tua versione di');
document.write(navigator.appName + ' ' + parseFloat(navigator.appVersion));
// scrive un avvertimento per i web browser antiquati
if ( parseInt( navigator.appVersion) < 3 ) {
document.write(' Hmmm.. questa risulta essere una versione piuttosto vecchia di');
document.write(navigator.appName + '! Forse che sia tempo di pensare ad un upgrade?');
}
// done hiding -->
</SCRIPT>
days[2]dove il numero tra parentesi quadre indica la posizione dell'elemento che stiamo cercando nell'array. Ma fai attenzione! JavaScript comincia a contare gli array da 0, quindi days[2] in realta' ritorna il terzo elemento, o "Martedí".
Il nostro codice scrive una stringa di testo di benevenuto e poi usa l'array per estrarre il nome esatto del giorno. La funzione today.getDay() dell'oggetto Date ritorna a numero da 0 a 6 che corrisponde al giorno della settimana attualmente corrente. Quindi noi possiamo combinare la funzione dell'oggetto Date ed il nostro array di nomi per stampare a video il nome del giorno corretto.
Seguendo questo, noi usiamo la formattazione fornita da today.toLocaleString() per scrivere la data completa.
Il blocco seguente stampa il nome del browser ("NetScape", "Internet Explorer") seguito dalla versione ritornataci dalla funzione navigator.appVersion , che torna un nome veramente lungo e descrittivo. Mettendolo dentro una funzione chiamata parseFloat, essa estrae o "parses" la parte di questa stringa che corrisponde al numero della versione. Per un confronto, vedi:
Quest'ultimo elemento fornisce una stringa di testo ben formattata e che ha lo scopo di visualizzare il tipo di programma ed il numero della versione. Il codice parseInt(navigator.appVersion) tira fuori dall'intero numero parte di questa informazione. Se vai a vedere l'ultima porzione del nostro codice appena elaborato, noi testiamo il valore parseInt e scriviamo un avvertimento extra se e' minore del nostro valore di prova, che e' 3. Per vedere la differenza, dovresti cambiare il 3 in un numero superiore a quello della presente versione del tuo browser.
Puoi pensare ad un modo per scrivere un codice JavaScript che riesca a visualizzare un messaggio di benvenuto diverso per ogni ora del giorno? Aiutino: Usa un array per creare il testo di tutti i tuoi messaggi, ed usa la funzione Date.getHours() per determinare l'ora corrente.
The Internet Connection at MCLI is
Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing
HTML