INDICE

FORM CHE HA UN CAMPO INIZIALE DEFINITO DALLE SCELTE DELL'UTENTE

METODO CHE FUNZIONA ANCHE IN LINEA

Questo secondo metodo è più complicato del primo, ma è utilizzabile anche in linea, inoltre funziona anche con Netscape o Mozilla.

PASSO UNO

Prepariamo la pagina di destinazione. La nostra, molto semplificata, contiene un form con due caselle di testo; il form è stato preparato con il seguente codice:
<form name="MioForm" method="post">
<input type="text" name="testo1" value="">
<input type="text" name="testo2" value=""> </form>
Come si vede, il codice per il form è incompleto, ad esempio, manca il bottone di invio: a noi comunque in questo momento interessa solo il funzionamento della parte richiesta dall'utente.

PASSO DUE

Salviamo la pagina e controlliamone l'aspetto. Visualizziamone poi il codice HTML e copiamolo.

PASSO TRE

Prepariamo il codice JavaScript, che inseriremo fra i tags <HEAD> ed </HEAD> :

<script language="JavaScript">Dichiarazione del fatto che si sta inserendo un codice JavaScript
     function apri(t) { Dichiarazione della funzione che ci permette di ottenere il risultato. Notare che in parentesi è scritto t
     contenuto='';Introduciamo una variabile tipo stringa di nome contenuto: il suo valore iniziale è una stringa vuota.
contenuto='<HTML><TITLE>form che ha un campo iniziale definito dall\'utente - di Eliana Argenti e Tommaso Bientinesi </title><head></head><body bgcolor="#E0E4E3"< >a href="http://www.webfract.it/GUIDA/indexindi.htm" target="tutto"><IMG alt=INDICE src="http://www.webfract.it/GUIDA/indice1.gif" border=0 align=right></a><H3 ALIGN="center"><FONT color=red ><B><FORM CHE HA UN CAMPO INIZIALE DEFINITO DALL\'UTENTE</B></font< >/H3></FONT><p align="center"><IMG src="http://www.webfract.it/GUIDA/lineacolorata.gif" width="80%" height=3></p><p>Questa è la finestra che si apre quando si clicca su un collegamento della >a href="http://www.webfract.it/GUIDA/rispform1.htm">pagina</a<.>br><p><form name="MioForm" method="post"><input type="text" name="testo1" value='+t+'><br><input type="text" name="testo2" value=""></form></p><p><hr size=2 color=navy></p><P><center><a href="javascript:window.close()">CHIUDI QUESTA FINESTRA</a></P><p><font size=-2>©2002 <a href="http://www.webfract.it" target="tutto">www.webfract.it</font><font size=-2></a></center></body></html>';
Incolliamo nella variabile contenuto l'intero codice HTML della pagina che avevavo copiato prima. Curiamo però questi particolari:
  • Dobbiamo far precedere il codice dal carattere '. Questo è il carattere che conviene usare per indicare a JavaScript che si sta inserendo una stringa
  • Se dobbiamo inserire un'apice, lo dobbiamo far precedere dal carattere \, altrimenti JavaScript lo interpreta come fine stringa
  • Al posto di value="", che avevamo inserito inizialmente nel campo della prima casella di testo, inseriamo '+t+': questo è il codice che si inserisce quando si vuole aggiungere ad una stringa di testo una parte variabile. Ricordiamo che la nostra funzione si chiama apri(t) Per una migliore comprensione, abbiamo evidenziato con il colore navy le parti di codice da cambiare.
      nuovo=window.open('','risultato'); Viene memorizzato nella variabile nuovo l'oggetto window con il suo metodo open: questo è il comando JavaScript che serve per aprire un documento; nel nostro caso apriamo una pagina vuota di nome risultato.
     nuovo.document.write(contenuto); Nel documento della finestra che viene aperta viene scritto tutto ciò che è memorizzato nella variabile di nome contenuto quindi,, nel nostro esempio, anche il form con il campo iniziale uguale a t. (In seguito sarà spiegato questo punto).
     nuovo.document.close(); Si comunica al browser che è terminata la procedura di apertura della finestra e di scrittura del documento. Se non si include questa riga di codice non avrà luogo la stampa né altri eventuali comandi sulla pagina che abbiamo appena aperta.
} Parentesi di chiusura della funzione
</script>Fine script.
NOTA: come in tutti gli scripts javascript, occorre fare molta attenzione alla sintassi per non generare un messaggio d'errore. In particolare, javascript distingue fra maiuscole e minuscole.

Per varie opzioni di apertura delle finestre cliccare qui
Per approfondimenti sullla gerarchia degli oggetti in JavaScript cliccare qui

PASSO QUATTRO

Inseriamo fra i tags <BODY> e </BODY> un testo del tipo:
Scegli fra le seguenti opzioni:
<a href="javascript: apri('Società')">Società</a>
<a href="javascript: apri('Privato')">Privato</a>
<a href="javascript: apri('Collaboratore')">Collaboratore</a>

ED ECCO IL RISULTATO!

Scegli fra le seguenti opzioni:
Società
Privato
Collaboratore

Clicchiamo sul link Società: il link attiva la funzione apri(Società), cioè viene automaticamente sostituito al parametro t il termine che si scrive tra parentesi quando si chiama la funzione. Tale sostituzione viene effettuata per ogni occorrenza di t, e quindi il nostro codice è trasformato dall'interprete JavaScript nel seguente:
function apri(Società) {
     contenuto='';
     contenuto='<HTML>.....    ... anche in questa parte di codice al posto di t sarà sostituito il termine Società
     nuovo=window.open('','risultato');
     nuovo.document.write(contenuto);
     nuovo.document.close();
    }

In modo analogo, cliccando sugli altri links, verranno attivate le funzioni relative. Ogni volta otterremo che il primo campo del Form conterrà la parola sulla quale abbiamo cliccato.

INDICESTESSO TRUCCO FUNZIONANTE NON IN LINEAINDIETRO

©2002 www.webfract.it