Può essere un'idea simpatica offrire ai propri visitatori un messaggio di benvenuto adatto ai vari momenti della giornata. Javascript offre una soluzione estremamente semplice grazie alla sua capacità di verificare l'ora locale dell'utente. Nell'esempio allegato ci siamo volutamente limitati ad un piccolo saluto, ma partendo da questo codice si possono realizzare messaggi ed effetti più complessi.
Lo script si compone di una sezione JavaScript direttamente inserita nel corpo della pagina.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
La sezione Javascript che gestisce la visualizzazione del messaggio di benvenuto è inserita nel corpo della pagina. Nel nostro caso, il saluto è compreso all'interno di un tag <h1>, ma nulla vieta di usare altri tag o strutture più complesse. L'importante è avere ben chiaro il funzionamento dello script.
Ecco il codice completo:
<h1>
<script language="javascript" type="text/javascript">
<!--
oracorrente = new Date
if (oracorrente.getHours() < 5) {
document.write("Cosa ci fai qui di notte??")
}
else if (oracorrente.getHours() < 12) {
document.write("Buongiorno!!")
}
else if (oracorrente.getHours() < 17) {
document.write("Buon pomeriggio!!")
}
else {
document.write("Buonasera!!")
}
-->
</script>
</h1>
Lo script, come detto all'inizio, è molto semplice ma efficace. L'unica funzione presente, attivata dal link presente nella pagina web, controllerà lo stato di visualizzazione dell'elemento associato (style.display) e lo cambierà: se lo stato è visibile lo renderà invisibile, se lo stato è invisibile lo renderà visibile.
Il nome dell'elemento da rendere visibile o invisibile è passato allo script dall'unica variabile che accetta (id) e lo si dovrà specificare al'interno della pagina web, come vedremo più avanti.
È possibile aggiungere tutte le risorse che si desidera anche se va precisato che il browser caricherà in memoria tutti gli elementi anche prima di visualizzarli. Lo script si limita solo a renderli visibili o invisibili. Ciò significa che se volessimo utilizzare lo script per una presentazione di fotografie in un'uica pagina web, va precisato che l'utente dovrà attendere, prima di rendere operativa la pagina e i link, il caricamento di tutte le immagini, visibili e non visibili, incluse nella galleria.
Per prima cosa si crea una variabile (oracorrente) e si assegna ad essa il valore dell'ora locale (grazie al metodo getHours) partendo dalla data (oggetto Date). Quindi, con una serie di espressioni condizionali (if/else if/else), si crea un messaggio ad hoc per ciascuna fase della giornata. Lo facciamo confrontando l'ora corrente con parametri che è ovviamente possibile personalizzare. Se il valore dell'ora, come nel primo caso, è inferiore a 5 (< 5), significa che siamo in piena notte e il messaggio si adegua di conseguenza. Così avviene per le possibilità successive.
La personalizzazione può avvenire innanzitutto per i valori delle ore prese come riferimento, ma anche nell'output. Ricordiamo infatti che con document.write si possono creare intere sezioni di codice HTML. Al posto del messaggio in forma di testo, per esempio, potremmo visualizzare un'immagine o un'icona ad hoc. L'unico limite diventa la fantasia.
