Come abbiamo visto in altri articoli, le pagine del nostro sito dovrebbero essere leggere e veloci da scaricare (cfr. Articoli: «Alleggerire le pagine di dati con i CSS» e «Il giusto peso delle pagine»). Molto spesso ciò non accade.
Alcune situazioni tuttavia ci consentono di usare trucchi in grado di diminuire il tempo di "scaricamento": è il caso delle pagine di dati. Si tratta di quelle pagine che contengono un layout comune ripetuto e una serie di link e testi esplicativi che rimandano ad altre risorse in rete. Sono, ad esempio, le classiche pagine che vengono visualizzate nella consultazione di un motore di ricerca interno a un sito.
In questo caso il tempo di visualizzazione è già di per sé superiore al normale: infatti a seguito della ricerca dell'utente, viene inoltrata una richiesta al database, che - a sua volta - deve restituire i risultati. Questi ultimi vengono presi e inseriti nella pagina tramite un linguaggio di scripting server-side (perl, asp, php, jsp). Il procedimento avviene in modo del tutto trasparente per l'utente, dal momento che tutto quello viene servito al browser è un canonico file HTML.
Sia che si tratti di pagine che derivano da un motore di ricerca, sia che si tratti di normalissimi elenchi di link, per velocizzare la visualizzazione possiamo sfruttare l'architettura stessa del web.
Le pagine web ci vengono "servite" da un computer che svolge la maggior parte del lavoro: oltre a spedire le pagine, si occupa di eseguire i codici di programmazione, di inoltrare le richieste al database (quando il database - come a volte accade - non si trova su un terzo computer), e molte altre cose. Viceversa il nostro computer di casa fa poco o nulla: semplicemente si limita a visualizzare la pagina completa attraverso un programma che consente la lettura (il browser).
Dal momento che attualmente i nostri computer domestici hanno una potenza paragonabile a quella degli elaboratori della NASA di qualche decennio fa, noi webmaster possiamo pensare di sfruttarli per fare eseguire loro qualche (piccola) operazione, e sveltire il caricamento della pagina.
L'idea è semplice: si tratta di spedire la nostra pagina HTML non del tutto completa, ma con i dati in parte impacchettati e far eseguire al computer client parte del lavoro di elaborazione dei dati, che consente la corretta visualizzazione.
Per eseguire questa operazione useremo JavaScript.
Vedremo dunque come scrivere il layout una sola volta, senza perderci in ridondanti linee di codice. Questa tecnica può essere dunque utilmente usata anche con i menu, e in genere con tutti gli elementi che hanno un layout che si ripete. Inoltre può essere utilizzata tanto in un'impaginazione tradizionale, quanto in un'impaginazione che utilizzi i CSS.
Quando usare JavaScript
Nell'articolo «Come includere codice esterno nelle pagine web» si è visto che non conviene scrivere il layout della pagina attraverso JavaScript se ci interessa che essa venga visitata dai motori di ricerca. Usando JavaScript, i motori di ricerca non sarebbero infatti in grado di leggere il contenuto della pagina, né di navigare di link in link.
Possiamo usare questa tecnica invece nelle pagine di gestione del sito (se ce ne sono), oppure in tutte le pagine di servizio, o anche nelle pagine di risposta a una ricerca interna al sito: i motori di ricerca non sono in grado infatti di interpellare autonomamente i moduli di ricerca di un sito. In questi casi quindi possiamo usare JavaScript senza timore di essere penalizzati.
Gli Array di Array
Per prima cosa è necessario memorizzare da qualche parte nella pagina i nostri dati, la parte cioè di link e di testi che non dipende dal layout.
Immaginiamo di avere una tabella, come questa:
[script]/js/javascript07_1.js[/script]
Il passo successivo, ovviamente, è quello di trasformare la nostra tabella in sintassi JavaScript.
Incominciamo con l'inserire ogni singola riga in un array (un array è una specie di successione ordinata di variabili). Così:
rigaArticolo = new Array("Come consentire al visitatore del nostro sito di scegliere il layout che preferisce",
"http://pro.html.it/view_articolo.asp?id=80&idcat=11",
"Wolfgang Cecchin");
In questo caso abbiamo creato un array composto da tre stringhe.
Nel creare le stringhe ricordiamoci di rispettare le regole che le contraddistinguono:
una stringa è racchiusa tra virgolette (sostituire eventuali virgolette presenti nel testo con la corrispondente sintassi HTML, cioè ")
una stringa non va a capo
Nel manipolare gli array, ricordiamoci inoltre che il primo elemento dell'array ha indice "0".
Potremmo ripetere il procedimento per tutti i dati che ci interessano, ottenendo altrettanti array. Ad esempio:
altraRigaArticolo=new Array("Il modulo "Suggerisci il sito ad un amico"",
"http://pro.html.it/view_articolo.asp?id=92&idcat=11",
"Lorenzo Forti");
Concatenare gli Array
Tuttavia a noi interessa anche un metodo per concatenare i vari array. Con la nostra tabella di prima abbiamo creato quella che in matematica viene normalmente definita come "matrice", e in programmazione come "vettore". JavaScript non supporta matrici o vettori, ma supporta benissimo gli array di array, che - per i nostri fini - sono l'ideale. Sono i cosiddetti "array multidimensionali". Si tratta dunque di creare un array, che sarà a sua volta formato da array.
Così:
articoli=new Array();
articoli[0]=new Array("Come consentire al visitatore del nostro sito di scegliere il layout che preferisce", "http://pro.html.it/view_articolo.asp?id=80&idcat=11","Wolfgang Cecchin");
articoli[1]=new Array("Il modulo "Suggerisci il sito ad un amico"", "http://pro.html.it/view_articolo.asp?id=92&idcat=11", "Lorenzo Forti");
Da notare che abbiamo utilizzato due tecniche differenti per creare l'array, ma che producono lo stesso risultato. In un caso abbiamo creato l'array e allo stesso tempo abbiamo assegnato il contenuto:
contenuto=new Array("Come consentire al visitatore del nostro sito di scegliere il layout che preferisce", "http://pro.html.it/view_articolo.asp?id=80&idcat=11", "Wolfgang Cecchin");
Nell'altro caso abbiamo utilizzato una sintassi estesa con la creazione dell'array, e l'assegnazione di un contenuto a un suo elemento (cioè articoli[0]):
articoli = new Array();
articoli[0]=contenuto;
È evidente che nel nostro array di array l'elemento con posizione [0] [0] sarà "Come consentire al visitatore del nostro sito di scegliere il layout che preferisce", l'elemento con posizione [0][1] "Il modulo "Suggerisci il sito ad un amico"", eccetera.
A questo punto non ci resta che inserire la sintassi da noi creata nella head, tra l'apertura e la chiusura del tag <script>.
Scorrere l'array
Dobbiamo ora scrivere il layout. Nell'articolo «Come includere codice esterno nelle pagine web» a pagina 6, abbiamo visto che per scrivere qualsiasi cosa attraverso JavaScript (non fa differenza che si tratti di semplice testo, o che sia invece codice HTML) bisogna utilizzare il metodo document.write(), che ci consente di scrivere all'interno del documento.
Ad esempio:
<script>
document.write("ciao");
</script>
Anche in questo caso bisogna prestare attenzione al fatto che il metodo document.write() accetta al suo interno soltanto delle stringhe (o dei valori che JavaScript converte in automatico in stringa). Dunque attenzione agli "a capo" e alle virgolette interne al testo.
Un layout di questo genere:
<font face="Verdana, Arial, Helvetica, sans-serif" color="#BA1B2A">
<strong>3.
<a href="http://pro.html.it/view_articolo.asp?id=62&idcat=11" target="_blank">Le finestre
chromeless</a>
</font></strong>
<font size="2" face="Verdana, Arial, Helvetica, sans-serif">
di <strong>Lorenzo Forti</strong>
</font>
diventa:
<script language="JavaScript">
document.write("<font face="Verdana,"+
"Arial, Helvetica, sans-serif""+
"color="#BA1B2A"><strong>3. "+
"<a href="http://pro.html.it/view_articolo.asp?id=62&idcat=11""+
"target="_blank">"+
"Le finestre chromeless</a></font></strong>"+
"<font size="2" face="Verdana, Arial, Helvetica, sans-serif">"+
"di <strong>Lorenzo Forti</strong></font>");
</script>
A questo punto abbiamo impostato una stringa che ci permette di scrivere il layout. Si tratta ora di far sì che il nostro layout venga ripetuto per tutti gli elementi dell'array. Come sempre - quando ci troviamo di fronte a un array - possiamo poi usare un ciclo di for per eseguire azioni ripetitive sugli elementi.
Nel nostro caso imposteremo il ciclo di for in questo modo:
for (n=0;n<articoli.length;n++) {
//codice da eseguire
}
Da notare che il ciclo di for viene impostato (per ragioni di praticità), non tanto sul numero degli elementi (es: "50") ma sulla lunghezza complessiva dell'array (articoli.length). In questo modo l'array potrà essere di due elementi, come di cinquanta, e non avremo bisogno di impostare ogni volta il ciclo di for.
A questo punto non ci resta che sostituire gli elmenti "fissi" con delle variabili e inserire la sintassi all'interno del ciclo di for. Così:
<script language="JavaScript">
for (n=0;n<articoli.length;n++) {
document.write("<font face="Verdana, Arial, Helvetica, sans-serif""+
"color="#BA1B2A"><strong>3. "+
"<a href=""+ articoli[n][1]+
"target="_blank">"+ articoli[n][0]+
"</a></font></strong>"+
"<font size="2" face="Verdana, Arial, Helvetica, sans-serif">"+
"di <strong>"+
articoli[n][2]+
+"</strong></font>");
}
</script>
Il che equivale a dire:
- creo n uguale a 0
- finché n è inferiore alla lunghezza dell'array
- aumento n di un'unità
- eseguo il codice all'interno, sostituendo n con il suo valore
Ogni volta che n viene aumentato di 1 il ciclo di for sostituirà articoli[n][1] con il corrispondente valore di n.
articoli[n][1] assumerà ad esempio il valore di articoli[0][1], che - a sua volta - contiene il testo "Come consentire al visitatore del nostro sito di scegliere il layout che preferisce".
Il codice che abbiamo esaminato va inserito nel punto della pagina in cui vogliamo avere l'elenco di link, o il menu. Tramite JavaScript riusciamo dunque a scrivere una sola volta il layout (evitando la sintassi ridondante) e a rendere il codice quanto più possibile compatto.
Un'impostazione ad oggetti
L'array multidimensionale esegue egregiamente il suo compito, ma non è né comodo ricordarsi che ad articoli[n][1] corrisponde il link e che a articoli[n][0] corrisponde invece il titolo, né tantomeno si tratta di una programmazione elegante.
Ci troviamo infatti in una tipica situazione in cui conviene utilizzare un approccio ad oggetti, e il nostro "array di array" può essere utilmente trasformato in un "array di oggetti".
Ciascuna riga - abbiamo detto - corrisponde a una array - così formato:
articoli[0] = new Array("Il mio articolo", "https://www.html.it/articolo.html", "Wolfgang Cecchin");
È evidente che in realtà stiamo descrivendo un oggetto dotato di tre proprietà: "titolo", "collegamento", "autore".
In JavaScript gli oggetti si creano mediante una funzione "costruttore", che contiene al suo interno la descrizione dell'oggetto attraverso l'identificazione delle sue proprietà:
function Articolo(var1,var2,var3) {
this.titolo=var1; //"Titolo"
this.collegamento=var2; //"Collegamento"
this.autore=var3; //"Autore"
}
Abbiamo creato un "modello" di articolo. Gli argomenti ( var1,var2,var3) servono per passare il valore che di volta in volta il nostro articolo assume.
Per creare un articolo sarà sufficiente richiamare la funzione costruttore (che contiene la descrizione del modello) e passargli i valori. Così:
mioArticolo= new Articolo ("Il mio articolo", "https://www.html.it/mioArticolo.html","Wolfgang Cecchin");
A questo punto dobbiamo soltanto creare un array di oggetti, nello stesso modo in cui abbiamo creato un array di array. Così:
articoli=new Array();
articoli[0]= new Articolo ("Il mio articolo","https://www.html.it/mioArticolo.html","Wolfgang Cecchin");
articoli[1]= new Articolo ("Il suo articolo","https://www.html.it/suoArticolo.asp","Lorenzo Forti");
Da notare che solo incidentalmente l'oggetto "Articolo" e l'array "articoli" hanno un nome simile. Il nome lo scegliamo noi e avremmo potuto attribuire all'oggetto e all'array qualsiasi altro nome senza che avere errori di alcun tipo.
Tenendo conto che le proprietà di un oggetto si richiamano attraverso l'operatore ".". Il ciclo di for esaminato in precedenza diventa:
<script language="JavaScript">
for (n=0; n<articoli.length; n++) {
document.write("<font face="Verdana, Arial, Helvetica, sans-serif""+
"color="#BA1B0A"><b>3. "+
"<a href=""+
articoli[n].collegamento+
"target="_blank">"+
articoli[n].titolo+
"</a></font></b>"+
"<br><BR>"+
"<font size="2" face="Verdana, Arial, Helvetica, sans-serif">"+
"di <b>"+
articoli[n].autore+
+"</b></font>");
}
</script>
È probabile che su oggetti dotati di numero di proprietà basso la differenza non si noti, ma se si vogliono creare oggetti con molte proprietà è senz'altro più immediato richiamare: articolo[n].categoria rispetto a articolo[n][9].
Differenziare la visualizzazione degli elementi
In alcuni layout si potrebbe scegliere di evidenziare gli elementi in maniera variabile a seconda della loro posizione. Ad esempio si potrebbe desiderare di usare due colori differenti per alternare lo sfondo delle righe di una tabella, rendendo così la pagina più leggibile.
Per ottenere un effetto di questo genere, è sufficiente fare dei controlli all'interno del ciclo di for. Basta verificare che "n" sia pari o dispari, e a seconda del valore di "n" impostare una variabile. Per verificare una simile condizione è sufficiente dividere "n" per 2: se il risultato contiene ".5" la riga è dispari in caso contrario è pari.
Si tratta di aggiungere all'interno del ciclo di for, il seguente codice:
//trasformo il risultato in una stringa
num = num.toString();
//se il risultato contiene ".5"... es: 1/2=0.5
if (num.indexOf(".5")>-1) {
... //codice
} else {
... //altro codice
}
Ad esempio:
for (n=0;n<articoli.length;n++) {
num=n/2;
num=num.toString();
if (num.indexOf(".5")>-1) {
colore="#EBEDC3";
}
else {
colore="#C3D1ED";
}
document.write("<TABLE WIDTH="100%""+
"CELLPADDING="5" CELLSPACING="0" BORDER="0">"+
"<tr>"+
"<td bgcolor="+colore+">"+
"<font face="Verdana, Arial, Helvetica, sans-serif""+
"color="#BA1B2A"><b>3. "+
"<a href=""+
articoli[n].collegamento+
"target="_blank">"+
articoli[n].titolo+
"</a></font></b>"+
"<br><BR>"+
"<font size="2" face="Verdana, Arial, Helvetica, sans-serif">"+
"di <b>"+
articoli[n].autore+
"</b></font>"+
"</td>"+
"</tr>"+
"</TABLE>");
}
Consigli per velocizzare il lavoro
Se siete dei programmatori, quel che dovrete fare è andare a scrivere il codice JavaScript (l'array di oggetti, o l'array di array) tramite il vostro linguaggio di programmazione (perl, asp, php, jsp, eccetera). Ricordatevi di sostituire le virgolette interne al testo con ".
Se invece volete utilizzare la tecnica descritta nell'articolo per comporre una pagina "statica", senza linguaggi di programmazione o connessione al database, vi possono essere utili alcuni consigli:
- Come detto più volte le stringhe non devono contenere virgolette: usate il "find / replace all" ("trova / sostituisci tutto") del vostro editor per sostituire le virgolette con ".
- Se dovete fare un elenco di link e di testi potete partire da un foglio di calcolo (ad esempio da una tabella Excel). È infatti possibile esportare il foglio di calcolo in formato "csv" ("comma separated values") con i valori separati da virgola. Potete anche chiedere ad Excel di separare i valori con una virgola e racchiudere tra virgolette i campi: in questo modo l'array è quasi pronto e vi risparmierete un sacco di lavoro. Con un po' di copia-incolla infatti potrete facilmente concludere la preparazione dell'array.
