Se non hai accesso ad un server web oppure non possiedi le conoscenze pregresse per la programmazione CGI, puoi continuare a creare form perfettamente funzionanti con JavaScript. Un vantaggio e' che tutto il "lavoro" e' fatto sul desktop del visitatore ("client-based", lato client) piuttosto che essere eseguito dal web server-- cosi' da avere meno domande-risposte avanti e indietro per la Rete. Un altro e' quello di poter creare pagine web funzionali che siano attive anche quando non sei collegato alla Rete. E poi, JavaScript prevede alcune funzionalita' extra per il controllo della validita' dei dati inseriti prima che questi siano processati.
Comunque ci sono performance che JavaScript non puo' sostenere-- non puo' scrivere o conservare nessun dato spedito attraverso un form web. Poi, il codice JavaScript deve essere implementato in una pagina web, cioe' script complessi da aggiungere alle dimensioni del tuo file (ed al tempo per scaricarlo dalla Rete). In piu', poiche' gli script sono parte di una pagina, ogni persona puo' vedere il codice risalendo al sorgente-- se fai un quiz con il JavaScript, da qualche parte del codice dovrai pure inserire le risposte!
Infine, potresti capitare in situazioni in cui i visitatori delle tue web page hanno browser vecchi che non supportano JavaScript.
Cosi' ora modificheremo i nostri documenti Volcano Web in modo che ci siano esempi di un form creato con JavaScript. La prima pagina e' il form a cui abbiamo lavorato nella lezione precedente, che, attraverso uno script CGI calcolava una stima della velocita' basata sull'altezza digitata nel campo di un form. La matematica e' abbastanza semplice, e' una cosa che si puo' tranquillamente gestire con il JavaScript.
Ma piuttosto che far visualizzare su un'altra pagina web i risultati dei nostri calcoli, come farebbe uno script in CGI, noi possiamo creare un campo di testo del form in cui inserire gli input e fare in modo che il codice JavaScript visualizzi n questa posizione il valore calcolato. Cosi' facendo, la persona che usa il form rimane nella stessa pagina e puo' provare una serie di numeri diversi.
<tr> <td valign=top align=right><tt><b>result</b></td> <td valign=top><input type="text" name="result" size="20"> </td> </tr>
<script language="JavaScript">
<!--
/* Velocity Calculation
Calcola la velocita' massima teorica basata su un'altezza data
facendo l'equazione tra energia cinetica e potenziale */
function calc_vel (form) {
// Controlla i dati perche' siano di tipo valido
if ( isNaN(form.height.value) || (form.height.value <= 0) ) {
alert('The entered height \''+ form.height.value + '\' is not valid.
To complete the calculation, the height must be a number greater than 0.');
form.result.value = '';
} else {
// Assume per primo il sistema metrico
var gravity = 9.8;
var myUnits = 'meters';
// Se sono stati scelti i piedi, aggiorna le unita' e la costante di gravita'
if (form.units[1].checked) {
gravity = 32.0;
myUnits = 'feet';
}
// Calcola la velocita' e inserisce il risultato nel campo
var velocity = parseInt(Math.sqrt( 2 * gravity * form.height.value));
form.result.value = velocity + ' ' + myUnits + '/second';
}
// ritorna valore FALSO cosi' il form non chiama il CGI
return false;
}
//-->
</script>
Abbiamo introdotto alcune cose che tu non hai mai visto prima!
Non devi necessariamente comprendere questo codice per farne un taglia&incolla, ma daremo una panoramica a quello che e' in grado di fare.
La prima parte del codice utilizza un marcatore di commento su piu' linee, /* ... */ per la descrizione dello script. La nostra funzione chiamata "calc_vel" mandera' alcune informazioni attraverso un parametro (quello tra parentesi) chiamato "form"-- questa sara' una struttura di dati JavaScript per tutto cio' che verra' selezionato o digitato all'interno del nostro web page form.
La prima cosa che fa il nostro script e' quella di assicurarsi che il numero inserito sia valido. Allora facciamo un test per vedere se e' un non-numero usando la funzione inclusa in JavaScript NaN per vedere se qualcosa e' "Not a Number" e verificheremo anche che il numero sia maggiore di 0. Se l'input rappresentato dal valore dell'altezza inserita non supera entrambi i test, genereremo un alert message.
Altrimenti (dopo else) procederemo con i calcoli, prima assumendo che l'input sia in unita' metriche. Poi controlleremo lo stato dei radio button, ed aggiusteremo questi valori se la selezione e' per le unita' non metriche. Poi, lo script usa diverse funzioni built-in di JavaScript per calcolare la risposta, ritornandolo in un formato intero. Poi possiamo mettere questo risultato come valore del campo del form che abbiamo creato allo step 2.
La funzione torna un valore "false" a qualsiasi cosa abbia chiamato questa funzione. Nel prossimo punto vedremo cosa vuol dire.
<form method=post action="http://www.mcli.dist.maricopa.edu/cgi-bin/tut/energy.pl" name="energy" onSubmit="return calc_vel(this)">
onSubmit e' una nuova opzione per questo tag che fa girare tutti i comandi JavaScript che sono tra i suoi apici quando viene premuto il Submit button. Lo fa prima di fare la chiamata allo script CGI dell'attributo ACTION=. Se il risultato di calc_vel(this) e' true, il CGI gira; se e' false, allora il CGI non viene chiamato. Questa e' una caratteristica che ti permette di far girare il codice JavaScript prima che il form sia mandato al CGI, in modo che tu possa usare JavaScript per verificare gli input data.
Un altro vantaggio di una simile combinazione e' che se l'utente utilizza un web browser dove JavaScript non e' attivo, esso ignora tutto il codice per onSubmit e manda i dati al CGI del web server perche' siano processati.
Mandare a calc_vel il parametro this, significa "manda a questa funzione tutti i dati nel mio form, i nomi ed i valori di tutti gli elementi del mio form".
Il nostro approccio e' quello di scrivere una funzione generale JavaScript che possa andare in ogni pagina che usa menu di navigazione, e poi apportare qualche cambiamento minore caso per caso.
function goPage (newURL) {
// Questa funzione e' chiamata dai pop-up menu per il trasferimento
// ad una pagina diversa. Ignora il valore tornato e' una stringa nulla
if (newURL != "") {
// salta le divisioni del menu e reimposta la selezione a quella
// di default
if (newURL == "-" ) {
resetMenu();
} else {
// manda la pagina all'URL stabilito
document.location.href = newURL;
}
}
}
function resetMenu() {
// reimposta la selezione dopo l'esecuzione di questa pagina
document.gomenu.selector.selectedIndex = 2;
}
Queste funzioni eseguono 3 diversi compiti. Se il valore inviato a function goPage e' vuoto (newURL=""), non faremo niente. Questo e' il caso in cui una persona selezioni la pagina attualmente attiva. La seconda possibilita' e' che il valore sia "-", che useremo per indicare una riga
"divider" nei nostri menu, in questo caso chiameremo allora una seconda funzione,
resetMenu() che reimposta il menu al suo valore di default (in questo caso, il terzo elemento nel menu-- Javascript comincia a contare da 0). Ed il terzo caso e' quello in cui ha luogo una qualche azione, col trasferimento del documento al valore dell'URL.
<H5>Volcano Web / <A HREF="index1.html">Indice</A> / <A HREF="term.html">avanti</A></H5>con:
<form name="gomenu"> <H5>Volcano Web / <select onChange="goPage(this.options[this.selectedIndex].value)" name="selector"> <option value = "index1.html">Volcano Web</option> <option value = "-"> --------------</option> <option value = "" selected>Introduzione</option> <option value = "term.html">Glossario</option> <option value = "usa.html">Luoghi Vulcanici negli USA</option> <option value = "mars.html">Luoghi Vulcanici su Marte</option> <option value = "proj.html">Progetti di Ricerca</option> </select> <noscript> <A HREF="index.html">Indice</A> / <A HREF="term.html">avanti</A> </noscript> </form> </H5>Abbiamo inserito il nome "gomenu" al form che contiene il menu a discesa chiamato "selector". L'evento Javascript onChange e' chiamato quando la selezione del menu e' cambiata, questo chiama la funzione goPage e gli manda il valore nella parte value che corrisponde alla selezione.
L'elemento del menu che corrisponde a questa pagina ("introduction") verra' selezionato quando la pagina caricata attraverso la parola chiave selected nel tag option. Nota anche che il valore per questo tag e' vuoto, o "", che significa cioe' che se questo elemento fosse scelto, la nostra funzione JavaScript non cambierebbe niente. Infine, abbiamo usato una riga di trattini sotto il primo elemento come divisione; questo elemento e' selezionato, la nostra funzione JavaScript chiama una seconda funzione chiamata resetMenu che ripristina semplicemente la selezione di partenza.
Il codice che mettiamo nei tag <noscript>...<.noscript> visualizza i nostri link originali, nel caso il surfer stia usando un web browser che non supporta JavaScript.
Cambia in questo modo il tag <body>:
<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666 onLoad="resetMenu()">
L'evento Javascript onLoad e' chiamato tutte le volte che la web page e' letta nel browser, in modo che questo chiami la nostra funzione di resetting tutte le volte che si carica la pagina Introduzione.
| JavaScript Menu Edit | |
|---|---|
| Glossario term.html | |
| |
| Luoghi Vulcanici negli USA usa.html | |
| |
| Luoghi Vulcanici su Marte mars.html | |
| |
| Progetti di Ricerca (documento di navigazione di questa pagina con frame) proj_nav.html | |
| |
dove lingua e':
function goPlanet () {
// Funzione per la navigazione verso parti diverse de
// Views of the Solar System site
// prendi il pianeta selezionato dal menu
var planet = document.solar.planets[document.solar.planets.selectedIndex].value;
// assicurati che la selezione sia di tipo valido
if (planet == "") {
alert ('Please select a planet!');
} else {
// determina quale language button e' selezionato
for (i=0; i<3; i++) {
if (document.solar.lang[i].checked) {
lang = document.solar.lang[i].value;
break;
}
}
// contruisci l'URL per il link al sito esterno
var url = 'http://www.hawastsoc.org/solar/' + lang + '/' + planet + '.htm';
// apri l'URL in una nuova finestra
var planet_window = window.open( url , "planets", "toolbar,status,location,menubar,scrollbars,resizable,width=550,height=450");
// Se siamo su NetScape, possiamo portare la finestra in primo piano
if (navigator.appName.substring(0,8) == "Netscape") planet_window.focus();
}
}
<p>Paragona le formazioni vulcaniche su Marte con gli altri pianeti<br> <form name="solar"> <center> <table border=0 cellpadding=10 cellspacing=2> <tr> <td valign=top><select name="planets"> <option value = "" selected>Seleziona un pianeta...</option> <option value = "mercury">Mercurio</option> <option value = "venus">Venere</option> <option value = "earth">Terra</option> <option value = "mars">Marte</option> <option value = "jupiter">Giove</option> <option value = "saturn">Saturno</option> <option value = "uranus">Urano</option> <option value = "neptune">Nettuno</option> <option value = "pluto">Plutone</option> </select> </td> <td valign=top>Informazioni in: <br> <input type="radio" name="lang" value="eng" checked>Inglese<br> <input type="radio" name="lang" value="span">Spagnolo<br> <input type="radio" name="lang" value="portug">Portoghese </td> <td valign=bottom><input type="button" value="Show Info" onClick="goPlanet()"></td> </tr> </table> </center> </form>
Abbiamo creato un nuovo web form che contiene un menu a tendina con i nomi dei pianeti e radio button per scegliere la lingua in cui visualizzare il contenuto. La nostra funzione JavaScript prende semplicemente gli elementi del form come da selezione, e costruisce un URL valido per un sito web esterno che contiene le informazioni cercate. Come bonus, questo lo apre in una nuova finestra JavaScript, come appreso alla lezione 27c.
Questo non e' che un esempio di tutto quello che si puo' fare con JavaScript. Ci sono numerosi web site che offrono codice JavaScript copiabile ed utilizzabile gratuitamente, e tu puoi anche non capire esattamente come funziona (anche se lo sai non guasta!). Visita alcuni di questi site, e prova a trovare un esempio di codice da poter includere nelle tue web page personali:
The Internet Connection at MCLI is Alan Levine --}
Comments
to mailto:levine@maricopa.edu?subject=Writing
HTML