Abbiamo già introdotto il Javascript in un articolo precedente,
parlando degli eventi, degli oggetti e delle funzioni.
A titolo di esempi si
è visto come far apparire la finestra di conferma "Sei sicuro di
voler entrare?", diffusissima nei siti vietati ai minori, e come generare
un testo scorrevole.
Questi esempi sono semplici abbellimenti, o sono
inutili, come la finestra di conferma, dato che basta fare una pagina in più
per ottenere lo stesso risultato.
Per gli abbellimenti, tra l'altro, è
decisamente meglio sfruttare delle belle immagini e applet java, le quali
possono visualizzare effetti speciali degni di un videogioco o di una
titolatrice. Questo però non significa che il javascript sia inutile, nè
che per fare qualcosa di serio occorra mettere mano al Java, ben più
complesso.
Piuttosto, dato che è facilmente manipolabile e copiabile (essendo
scritto direttamente nell'html), si può considerare come una estensione
naturale dell'html stesso, e in particolare come un set aggiuntivo di funzioni
personalizzabili.
Non è questa la sede per un corso completo di
javascript, sia per motivi di spazio, che per la presenza in articoli precedenti
di un corso completo di java, di cui il javascript è una sorta di subset.
Verranno dunque presentati tre esempi di utilizzo del javascript, il cui
risultato non si può ottenere con l'html, quindi veramente utili e
peculiari di questo linguaggio; il lettore potrà poi cambiare alcune
parti per personalizzare gli script secondo i propri interessi, senza doversi
imparare tutto il linguaggio.
Gli esempi proposti sono: una protezione di pagina tramite password (senza
necessità di supporto sul server), un listino prezzi col quale si può
calcolare un tele-preventivo (anche in questo caso senza bisogno di programmi
CGI), ed infine un sistema per rendere le pagine configurabili e
personalizzabili dal visitatore.
Protezione tramite password
Il listato 1 contiene uno script in grado di
criptare una stringa di testo qualsiasi tramite il vecchio metodo dello XOR (OR
logico esclusivo), e si può usare così com'è senza alcuna
modifica.
Il vantaggio è che in molti siti la protezione da server
non è disponibile, o ha un costo addizionale. Il principio è il
seguente: se si fornisce la nostra directory di un indice (normalmente
index.html o default.htm) non è più possibile listarne il
contenuto dal browser, infatti se si specifica la directory senza file, viene
caricato l'index.html.
In questo modo possiamo mettere una pagina "segreta", con un nome
che stabiliremo, senza linkarla da nessuna parte.
Per accederci occorre
saperne il nome, oppure, come nel caso di questo script, serve una password la
quale, una volta decriptata, generi il nome dell'html segreto e ci si autolinki.
Immaginate
di avere una home page molto visitata, e di avere delle foto o notizie un pò
più personali nella pagina nascosta: i visitatori che vogliono entrarci
dovranno lasciarvi una email, così voi concederete la password solo a chi
volete.
L'accesso non è meno sicuro della protezione da password con
supporto sul server: è vero che qualche traditore può linkarvi
direttamente la pagina segreta, bypassando la pagina di controllo, ma lo stesso
traditore può distribuire allo stesso modo la password di una pagina
protetta da server.
Basterà cambiare spesso password (e di
conseguenza anche il nome della pagina html). Per sapere l'html corrispondente
alla nuova password, basta immettere una parola, ad esempio con Pippo si ottiene
un tentativo di link alla pagina Stmmn.htm.
Se si vuole cambiare il suffisso in .html (o altro) basta modificare
l'ultima linea dello script.
Telepreventivi on-line
Una delle più spiccate proprietà del javascript è
quella di poter eseguire dei calcoli relativi a dati immessi dall'utente in un
form. Questo può servire sia a controllare che i dati siano corretti,
prima di mandarli al programma CGI col bottone di submit, sia ad evitare
totalmente la CGI sul server, calcolando direttamente tutto in javascript.
E'
evidente che ciò si può applicare solo a quei programmi CGI che
non accedono a grandi database, bensì eseguono dei calcoli su piccole
basi di dati.
Un'applicazione interessante può essere un form che
permetta di calcolare un preventivo, specificando che tipo di prodotti si
intenda comprare, il numero di pezzi desiderati per ogni tipo di prodotto, e
l'incidenza dell'IVA sul totale.
Questo compito è egregiamente svolto
dal listato 2, ed è interessante notare anche
l'utilità del controllo sui dati inseriti: se si scrive una parola anzichè
un numero nella casella dei quantitativi, o si specifica un quantitativo senza
dire di quale prodotto, compare immediatamente una finestra di avvertimento.
Se
tutto è a posto viene calcolato il totale, e se si desidera si può
aggiungere l'IVA
Non è difficile implementare anche l'invio
dell'ordine per e-mail, ma ciò non si rivelerebbe molto utile, in quanto
il pagamento non potrebbe avvenire automaticamente: per le transazioni di denaro
sono in via di determinazione standard specifici che riguarderanno sopratutto
Java.
L'utilità maggiore quindi è quella della consultazione
informativa; l'acquisto eventuale avverrà con la prassi arcaica
pre-internet, almeno finchè non cambierà la mentalità degli
acquirenti (e magari anche quella dei temibili hacker?).
Per personalizzare
il preventivo, occorre scrivere il nome dei prodotti nei menù a tendina <SELECT>,
e i costi relativi nei parametri passati alla funzione calcola().
Il numero
di prodotti e di menù a tendina può essere cambiato senza
problemi, basta ricordarsi di seguire la logica dei nomi: quanti0, prodotto0;
quanti1, prodotto1; e così via.
Pagine configurabili dal visitatore
Avrete sicuramente incontrato, nella vostra navigazione, dei siti con colori
e stili a voi non graditi, o addirittura illeggibili: queste pagine sono
obiettivamente mal costruite, però anche tra le pagine fatte da esperti
designer si trova sempre quella che non piace a qualcuno.
E' per questo che
tutti i programmi hanno la possibilità di configurare colori, stili e
tutto ciò che può essere modificato: certe persone amano
ambientazioni horror, con sfondi neri, scritte rosse ed eventuali teschi, altri
cercano i toni di grigio più informali, e così via.
Perchè
quindi dovremmo constringere i visitatori a sorbirsi certi colori e certi stili,
quando è possibile una configurazione interattiva preliminare?
Il
javascript ci permette di cambiare i colori di sfondo, testo in primo piano,
nonchè il colore di link attivi ed inattivi: in pratica si può
ridefinire ciò che si scrive nel tag <BODY>:
document.bgColor='0000FF'
document.fgColor='FF0000'
Queste due istruzioni cambiano il colore di sfondo
(bg=background) in blu, e il testo in primo piano (fg=foreground) in rosso. I
colori sono in formato RRGGBB esadecimale (rosso, verde, blu con gradazioni da
00 a FF, che equivale 255).
E' possibile anche cambiare le immagini:
document.images[indice].src = nomeimmagine;
Basta
sapere l'indice, ossia la posizione dell'immagine: la prima che si incontra nel
listato ha indice 0, la seguente ha indice 1 e così via.
Il
listato 3 è un menù di selezione per
cambiare il colore di sfondo e testo, e permette anche di scegliere le immagini
delle sferette, che solitamente si mettono come separatori o punti di inizio
paragrafo.
Il personaggio lugubre descritto prima può a qiesto punto
scegliere i teschi al posto della sferetta e mettersi il suo amato sfondo nero
con testo rosso; allo stesso modo faremo contenti le altre migliaia di
visitatori, specie se la nostra pagina contiene molto testo da leggere.
Con
alcune modifiche potremmo anche preparare dei "temi" già
pronti, e il menù di personalizzazione potrebbe essere in una finestra
esterna.
Una nota: se il colore del testo in primo piano non cambia, questo è
un bug del vostro browser, ad esempio ho riscontrato questo problema in Netscape
3.01.
Fabio Ciucci
fabioc@anfiteatro.it
http://www.anfiteatro.it/java.html
Torna all' indice degli articoli