Come modificare automaticamente pagine
web con il Javascript
I grandi portali, i siti con centinaia di pagine strutturalmente simili tra di loro (con un menù identico, delle stesse dimensioni e degli stessi colori), in mancanza di un software appropriato, si troverebbero di fronte a titanici problemi nel caso volessero, ad esempio, modificare il colore di un elemento “fisso”, o addirittura rinnovare la veste grafica e rivoluzionare tutte le tabelle (chi crea le pagine web scrivendo in HTML sa quanto importanti siano le tabelle quando lo scheletro di una pagina web raggiunge una certa complessità).
Supponiamo per esempio di voler creare un sito di ricette per la cucina, dove ogni pagina contiene una ricetta e dove da ogni pagina sono accessibili tutte le altre tramite un comodo menù sulla sinistra. Nel caso volessimo aggiungere al nostro sito un’altra pagina, dovremo prima intervenire su tutte le pagine che avevamo precedentemente per inserire il link relativo all’ultima arrivata.
Per ovviare a questi problemi esistono linguaggi di programmazione che funzionano lato-server: il modem “chiede” al server una certa pagina e quest’ultimo la restituisce già pronta per l’utilizzo, dopo aver egli stesso implementato gli elementi “fissi” (il menù e la veste grafica comuni a tutte le pagine di un certo tipo) con quelli “mobili” (il testo della pagina e le informazioni specifiche che contiene). Oltre alla loro complessità, questi linguaggi non funzionano sui cosiddetti domini di secondo livello (del tipo www.nomehosting/nomemiosito) generalmente acquistabili gratutitamente dal webmaster.
La mia idea (di cui credo di possedere l’esclusiva) consiste nell’usare il Javascript per creare pagine web lato-client (cioè le singole pagine vengono create dal PC del visitatore al momento del caricamento). Anche se fino a pochi minuti fa non avevate mai sentito parlare di Javascript vi basterà seguire le istruzioni e potrete modificare miriadi di pagine web con la stessa veste grafica intervenendo su un singolo file.
Ciò che è invece indispensabile da parte vostra è una minima conoscenza di HTML: è il linguaggio di programmazione (in realtà non lo è) più cretino del mondo e in un pomeriggio o due raggiungerete senz’altro il livello di conoscenza necessario per usare la mia tecnica. Sono facilmente reperibili guide gratuitamente scaricabili da internet provate su www.html.it o www.manuali.net) .
Se siete utenti esperti in materia di Javascript questa guida vi servirà soltanto per stimolare la vostra fantasia, se invece di tutto quello che ho detto finora non avete capito niente questa guida vi consentirà di modificare su tutte le pagine che volete la struttura del menù e null’altro.
Ora vi indicherò come creare poche pagine web che facciano uso del Javascript per controllare alcuni elementi “fissi” come il menù dei links. Successivamente interverrete su questo “modellino” (decisamente brutto) per creare gli effetti grafici che maggiormente stimolano la vostra sensibilità estetica. Per prima cosa aprite il vostro bel blocco note (o notepad) e fateci un copia incolla di tutto questo senza cambiare una virgola:
var voci=new Array("homepage","voce1","voce2","eccc...","ultima
voce")
var linkvoci=new
Array("index.html","p1.html","p2.html","p3.html","p4.html")
var larghezzaMenù="200"
var coloreCelle="0000ff"
var coloreCorpo="00ff00"
var coloreLink="ffff00"
var colorefondotesto="ffffff"
var parteFissaTitolo="Mio sito"
if
(voci.length!=linkvoci.length) {alert("Avviso per il webmaster! Gli
elementi in \”voci\” non corrispondono a quelli in \”linkvoci\”. Controlla
meglio e cerca di non fare casini!")}
document.write("<table border=2 cellpadding=0
cellspacing=0 width=100%><tr><td width="+larghezzaMenù+"
valign=top><table border=0 cellpadding=2 cellspacing=5 width=100%
bgcolor="+coloreCorpo+">")
for (var
a=0;a<voci.length;a++) {
if (document.location.toString().indexOf(linkvoci[a])!=-1)
{document.title=parteFissaTitolo+" - "+voci[a]}
else {
document.write("<tr><td
bgcolor="+coloreCelle+"><p align=center><a
href="+linkvoci[a]+"><font size=4
color="+coloreLink+">"+voci[a]+"</font></a></td></tr>")}
}
document.write("</table></td><td
valign=top bgcolor="+colorefondotesto+"><table border=0
cellpadding=15 cellspacing=0 width=100%
height=100%><tr><td>")
var
fine="</td></tr></table></td></tr></table>"
Ora salvate questo file con il nome controllo.js (quando salvate il file del box NomeFile dovrete digitare per esteso controllo.js, altrimenti verrà usato il formato predefinito per il blocco note. I files con estensione js contengono codice Javascript e sono accessibili da qualsiasi pagina web. Capirete che se in ogni pagina web avrei dovuto inserire un affare del genere l’utilità di questa guida era pressoché nulla. Ora controllo.js è la nostra postazione di controllo, e tutte le future modifiche avverranno su questo file. Ora non ci resta che implementarlo nelle nostre pagine web. Il programma è pronto per funzionare su 5 files di nome: homepage.html , p1.html , p2.html , p3.html e p4.html. Creiamo quindi questi 5 files con il Notepad salvandoli esattamente con i nomi e estensioni html (e ovviamente nella stessa cartella di controllo.js). Tutti e cinque dovranno essere strutturati nel seguente modo:
<html>
<body
leftmargin=0 topmargin=0>
<!-- prima parte -->
<script src="controllo.js"></script>
<!-- seconda parte -->
<font size=4 face=verdina>Qui scrivete quello che volete, è la pagina vera e propria </u>in normale formato HTML</u></font>
<!-- terza parte -->
<script>document.write(fine)</script>
</body></html>
Trovate il lavoro già bello e pronto nella cartella esempio1. Non vi basta che aprire i files e verificare che per qualche strana ragione le pagine web possiedono degli elementi che non avevate scritto esattamente in quel file HTML.
I files index.html p1.html ecc. fanno tutti riferimento allo stesso file controllo.js, e se quest’ultimo “ordina” di fare una certa cosa tutti i files cui è collegato si comporteranno in quel determinato modo. Il programmino che abbiamo scritto crea pagine web il cui codice HTML è idealmente diviso in tre parti: la prima scaturisce dall’esecuzione delle istruzioni di controllo.js, la seconda è diversa per ogni pagina e compare all’interno del suo stesso codice, la terza scrive nella pagina il codice HTML contenuto in fine, che è una parte di controllo.js.
Sono consapevole che il
risultato non è graficamente un granché. Ho cercato la soluzione grafica più
semplice per rendere la comprensione del meccanismo più immediata. Utilizzate
sempre il mini-sito che avete appena creato come modello di riferimento per
tutte le future modifiche. Ora vedremo come modificarlo secondo i vostri
desideri (a patto che conosciate un po’ di HTML)
In tutte le pagine HTML che abbiamo creato, all’interno dei TAG body, il codice
<script src="controllo.js"></script>
serve per
far eseguire al browser tutte le operazioni che sono contenute in controllo.js. Ora analizziamole una per
una:
var voci=new
Array("homepage","voce1","voce2","eccc...","ultima
voce")
var linkvoci=new
Array("index.html","p1.html","p2.html","p3.html","p4.html")
Tra “ e “, dopo voci vanno inserite separate da virgola le parole che compariranno poi con lo stesso ordine nel menù. Attenzione! Se provate a inserire in una voce segni come “ o ‘ o \ le pagine non verranno caricate perché i tre simboli sono funzionali e non semplici caratteri in Javascript. Per farlo usate \’ \\ e \”. Una barra \ dice al computer che ciò che segue è un carattere e non un istruzione. Se dunque nel vostro menù volete far comparire la voce Presentazione dell’opera dovrete fare una cosa del genere:
var voci=new Array(“primo titolo”,altre voci,”Presentazione dell\’opera”)
In linkvoci inserirete invece il percorso dove il browser andrà a prendere le pagine quando l’utente clicca su ciò che voi avete scritto in voci. In pratica, ciccando sull’n-simo elemento di voci si aprirà la n-sima pagina di linkvoci. Vi ricordo (e spero che sia inutile) che tutte le pagine del vostro sito che vorrete dotare dello scheletro che stiamo preparando dovranno avere la prima e la terza parte identica a quella che vi ho proposto.
var larghezzaMenù="200"
var coloreCelle="0000ff"
var coloreCorpo="00ff00"
var coloreLink="ffff00"
var colorefondotesto="ffffff"
var parteFissaTitolo="Mio sito"
In larghezzaMenù scrivete tra “ e “ la larghezza in pixels che il vostro menù andrà ad occupare. Scrivendo sempre all’interno dei doppi apici (“ e “), che se omessi bloccano l’esecuzione del programma, inserite in formato esadecimale il colore dei rettangoli che ospitano le voci del menù, della tabella in cui sono contenute, dei link nel menù e il colore che farà da sfondo al testo della pagina. Se non siete pratici in esadecimali provate a inserire tra gli apici il nome inglese di alcuni colori predefiniti dal browser: mi sembra ci siano una dozzina tra cui black yellow lime maroon blue red green ecc. In ogni pagina avrete un titolo del tipo parteFissaTitolo – nomevoce. Aprendo la pagina homepage.html per esempio il titolo sarà Mio sito – homepage. Modificate parteFissaTitolo per avere quella che desiderate.
document.write("<table border=2 cellpadding=0
cellspacing=0 width=100%><tr><td width="+larghezzaMenù+"
valign=top><table border=0 cellpadding=2 cellspacing=5 width=100%
bgcolor="+coloreCorpo+">")
In Javascript il metodo document.write(“testo”) serve banalmente per scrivere all’interno di una pagina web:
<script>document.write(“<b>Bhau!</b>”)</script>
è identico a:
<b>Bhau!</b>
Ciò che cambia è che se
generalmente eravamo abituati a scrivere in HTML width=200 all’interno di document.write(“”)
possiamo scrivere width=”+larghezzaMenù+”
se precedentemente abbiamo scritto var
larghezzaMenù=200. Si noti che potevamo scrivere direttamente width=200, ma questo nuovo tipo di
scrittura, oltre che rendere più rapide le modifiche del codice, è obbligatorio
per la porzione di codice che segue. Tutto ciò che inserirete tra i doppi apici
costituirà la parte iniziale di tutte le pagine del vostro sito. Fate ancora
attenzione a non inserire i caratteri “ ‘ e \, ma \” \’ e \\. Quindi se in HTML
vi piace scrivere width=”100%” ora
dovrete fare width=\”100%\”. Fermiamoci
prima di immettere le voci del menù, e precisamente prima di quella parte di
codice che andrà ripetuta per ogni voce del menù.
for (var
a=0;a<voci.length;a++) {
…
document.write("<tr><td
bgcolor="+coloreCelle+"><p align=center><a
href="+linkvoci[a]+"><font size=4
color="+coloreLink+">"+voci[a]+"</font></a></td></tr>")}
}
Questo metodo fa sì che per ogni voce del menu venga eseguita l’operazione
document.write("<tr><td bgcolor="+coloreCelle+"><p align=center><a href="+linkvoci[a]+"><font size=4 color="+coloreLink+">"+voci[a]+"</font></a></td></tr>")
Quindi il codice <tr><td bgcolor=... </td></tr> viene scritto nella pagina web tante volte quante sono le voci del menù. Nel nostro caso, la prima volta a linkvoci[a] corrisponde index.html e a voci[a] corrisponde homepage, la seconda volta a essi corrispondono rispettivamente p1.html e voce1 e così via. Potete modificare tutto il resto che si trova tra i doppi apici liberamente. In pratica con questa operazione andiamo a comporre la parte di codice relativa ai links, che genera l’elenco delle pagine che possiamo aprire.
document.write("</table></td><td
valign=top bgcolor="+colorefondotesto+"><table border=0
cellpadding=15 cellspacing=0 width=100%
height=100%><tr><td>")
Questa porzione di codice riutilizza il metodo document.write e tra i doppi apici inseriamo tutto il codice per chiudere la tabella del menù e arrivare fino al contenuto vero e proprio della pagina.
Noterete che non vi ho spiegato tutto ciò che avevo scritto in controllo.js. Ad esempio vi sarete accorti che la voce relativa alla pagina che visualizzate sul browser è automaticamente esclusa dal menù. Anche se la parte che non vi ho spiegato è quella più bella e complicata da un punto di vista logico mi solleverò dall’incarico di rendervela comprensibile, perché questo esula da ciò che mi ero proposto e anche perché tra un paio di settimane ho l’esame di geometria e non mi va di fare ciò che un bel manuale di Javascript può fare per voi.
Attenzione: se nel file controllo.js vi dimenticate un apice, o
un ritorno a capo, o una virgola, oppure chiamate una variabile (come larghezzaMenu) in modo errato il
risultato sarà catastrofico per l’aspetto delle vostre pagine web. Cercare un
errore in un codice Javascript può essere molto noioso; quindi, quando
interverrete su controllo.js di testa
vostra, vi consiglio di aggiungere una variabile o una voce per volta, salvare
e controllare subito se le pagine si vedono bene in modo tale da capire con
certezza dove si trovi l’eventuale errore.
Se avete capito quanto detto fin qui dovreste aver già capito quello che spiego in questo paragrafo. Tornando ai files HTML, quello che scriveremo dopo
<script src="controllo.js"></script>
andrà a costituire il corpo vero e proprio delle pagine web. Andremo a inserire come siamo abituati, cioè in normale codice HTML, il contenuto delle nostre pagine.
Anche se
non è strettamente necessario, è bene concludere ciò che si inizia. Se avete seguito
la stesura del codice, ricorderete che il testo della nostra pagina (la nostra
seconda parte) si trovava all’interno di una tabella che a sua volta si trovava
all’interno di una tabella aperta nella prima parte. Dato che, così come
l’apertura, anche la chiusura delle tabelle è identica in tutte le pagine del
nostro sito, anche essa merita di stare nel file controllo.js. La stringa (cioè la sequenza di lettere, cioè la
porzione di codice) che mi serve per
concludere le mie pagine la scrivo tra doppi apici come segue:
var
fine="</td></tr></table></td></tr></table>"
Per “dire” alle vostre pagine web far caricare al browser il codice contenuto in fine scriviamo (ripeto, non in controllo.js ma nei files HTML!):
<scirpt>document.write(fine)</script>
Ora salvate
tutto e sbizzarritevi a creare le vostre pagine web.
Come avevo già detto, coloro che trarranno maggior godimento da questa guida sono gli esperti Javascriptisti. Non ho mai trovato sul web un impegno del Javascript simile a quello che vi sto proponendo e ciò mi sembra strano se penso a quale varietà di utilizzi si possono ottenere con poche righe di codice. Non conosco i linguaggi lato-server, ma con brevi porzioni di codice il Javascript può soppiantarli laddove non ci sia la necessità di interazione con l’utente.
Nella directory esempio2 trovate la tesina che mi ha fatto fare la prof d’italiano per il figlio. Mi sono impegnato per non rendere la grafica troppo accattivante, ma oltre alle funzionalità già spiegate chi si intende un po’ di Javascript potrà ammirare un secondo menù sulla destra e un semplice gioco di variabili per non dover ricopiare il file .js in tutte le sottocartelle. Per non occupare troppo spazio vi ho lasciato solo spezzoni dei files di italiano, latino e storia.
Nella directory esempio3 c’è un mio vecchio sito dove potrete vedere come una grafica apprezzabile si abbini perfettamente a questo sistema di controllo Javascript. Inoltre c’è un metodo carino che definisce secondo due livelli prestabiliti la distanza tra le voci del menù anche se la voce che doveva produrre il “salto” maggiore non è visualizzata nel menù perché relativa alla pagina attualmente caricata dal browser. Anche lì ho soppresso la maggior parte delle pagine.