Spesso, in una web-page, può risultare molto utile alternare diverse scritte di testo in determinate aree: lo scopo, aggiungendo i necessari fogli di stile (CSS) può essere quello di ottenere una sorta di bacheca/display con informazioni che cambiano ad intervalli regolari.

La cosa può essere fatta senza troppa fatica utilizzando, lato client, le dovute funzioni javascript. Ovviamente, se le stringhe da alternare sono contenute nel codice (javascript), si va a perdere “materiale informativo”: in sostanza Google indicizzerà il sito in questione senza “valutare” le stringhe di testo aggiunte “by code” (lato client attraverso javascript).

Requisito: tutte le nostre stringhe che si alterneranno nella parte di visualizzazione dovranno, per forza di cose, essere presenti nel markup della pagina.

Qui di seguito espongo la mia soluzione, o meglio, l’inizio della mia soluzione: tempo permettendo spero di poter ampliare il codice riportato sotto fino ad ottenere una sorta di mini-libreria. Obiettivi finali del progetto:

• realizzare una soluzione “multi standard” che supporti sia pagine statiche (XHTML) che pagine dinamiche (ASP.NET e PHP);
• ottenere una soluzione flessibile che permetta di definire il testo in un file XML (per le pagine dinamiche);
• appoggiarsi alla libreria javascript jQuery.

Ecco la mia soluzione allo stato embrionale.

var current = -1
var max;

function timerEvent()
{
var Div = document.getElementById("bacheca");

if(Div != null)
{
var i;
var count;

if(current < 0)
{
for (i = 0, count = 0; i < Div.childNodes.length; ++i)
{
if(Div.childNodes[i].tagName == "DIV")
{
if(count < 1)
{
showDiv(Div.childNodes[i]);
}
else
{
hideDiv(Div.childNodes[i]);
}

++count;
}
}

current = 0;
max = count;
}
else
{
++current;
if(current >= max)
{
current = 0;
}

for (i = 0, count = 0; i < Div.childNodes.length; ++i)
{
if(Div.childNodes[i].tagName == "DIV")
{
if(count == current)
{
showDiv(Div.childNodes[i]);
}
else
{
hideDiv(Div.childNodes[i]);
}

++count;
}
}
}
setTimeout(timerEvent, 5000);
}
}

function showDiv(obj)
{
obj.style.display = "";
}

function hideDiv(obj)
{
obj.style.display = "none";
}

<div id="bacheca" style="height: 140px;">
<div>Text 0</div>
<div>Text 1</div>
<div>Text 2</div>
<div>...</div>
<div>Text n</div>
</div>

La funzione javascript [timerEvent] va collegata all’evento [onLoad] della pagina. Saranno visualizzate alternativamente ed in successione i vari DIV (contenuti nel DIV con id “bacheca”), quindi avremo: “Text 0”, “Text 1”, “Text 2”, …, “Text n”, “Text 0”, … Ovviamente il DIV “contenitore” va impostato ad un’altezza predefinita se si vogliono evitare ridimensionamenti (e riposizionamenti) ad ogni “cambio testo”.

In questo esmpio, il testo viene cambiato ogni 5 secondi (vedere linea 60 di codice javascript).

Giusto un mese fa, in Smashing Magazine, è comparso un post (che usa come “base della discussione” anche la libreria JavaScript jQuery) interessante che riporta una serie di linee guida nell’uso di JavaScript: in particolare viene posta molta attenzione sulla possibilità che il browser non sia in grado di eseguire il codice JavaScript (come spesso accade in molti PDA).

La mia attenzione è stata catturata in particolare dalla regola numero 2: NEVER Depend on Javascript.

Bad practice

<script language="javascript">
var now = new Date();
if(now.getHours() < 12)
document.write('Good Morning!');
else
document.write('Good Afternoon!');
</script>

Soluzione proposta

<p title="Good Day Message">Good Morning!</p>

var now = new Date();
if(now.getHours() >= 12)
{
var goodDay = $('p[title="Good Day Message"]');
goodDay.text('Good Afternoon!');
}

Non sono molto d’accordo circa il best practice proposto, motivo: una parte dei contenuti viene ancora generata dinamicamente via JavaScript , sottraendo quindi questi ultmi all’indicizzazione da parte dei motri di ricerca (ricordo che i motori di ricerca non “eseguono” gli script presenti o “invocati” nella pagina). In sostanza, come sostiene da tempo il mio caro amico Francesco Boschian: tutti i contenuti devono essere sempre presenti nella pagina, non generati “dinamicamente” via scripting (vedere come buon esempio il sito della Apple).

Qui di seguito propongo una soluzione molto “artiginale e grezza”, ma che nella sua modestia rappresenta un valido workaround per aggirare la cosa.

<input type="hidden" id="str1" value="Good morning!" />
<input type="hidden" id="str2" value="Good afternoon!" />
<p title="msg">Good Morning!</p>

var now = new Date();
if(now.getHours() >= 12)
{
var toSet = $('#str2').value;
}
else
{
var toSet = $('#str1').value;
}
var msg = $('#msg');
msg.text(toSet);

Evidente, purtroppo, la ripetizione della stringa “Good morning!”. Se però lato server possiamo sfruttare famework quali PHP o Asp.Net, il codice può diventare assai più “gradevole alla vista” .