|
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) .
Modello predefinito
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.
Spiegazioni: come creare la propria struttura personalizzata
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)
Prima parte: il file controllo.js
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.
Seconda parte: il file HTML
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.
Terza parte: la stringa fine
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.
Conclusioni
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.
Per vedere gli esempi è necessario scaricare la guida qui.
Guida ideata e realizzata da Fernando Tabacchi
|