Ovviamente non tutte le caselle di testo sono uguali. Vi sono caselle di testo, diciamo non interattive, nelle quali tu ci scrivi dentro e non succede niente. Questo è dovuto al fatto che chi ha scritto il programma non ha previsto alcuna azione che scaturisca dal fatto di aver premuto un tasto della tastiera per scrivere.

Poi vi sono altre caselle di testo più intelligenti, caselle di testo che si dicono interattive; cioè, se noi scriviamo qualcosa dentro la casella, la casella si accorge che abbiamo scritto qualcosa e reagisce.

 La casella di testo di fianco si allarma se premiamo un tasto, cioè per ogni lettera che scriviamo nella casella ci indica il tasto che abbiamo premuto. 

La casella di testo di fianco pronuncia in italiano il tasto premuto.

La casella di testo di fianco pronuncia in francese il tasto premuto.

La casella di testo di fianco cala  una delle tre carte da gioco in mano se il mouse vi passa sopra.

Casella di testo non interattiva

Vediamo ora come ottenere una prima casella di testo non interattiva. Occorre dare una istruzione in html che è la seguente:

<input type="text">

Dove il termine: input va scritto con la n prima della p e significa che è una casella di ingresso, cioè dove l'utente scrive dei dati e il programma è in grado di leggere questi dati.

type vuol dire il tipo di ingresso che noi desideriamo; trattandosi di una casella di testo mettiamo la parola text tra virgolette.

Come tutti i comandi in html si comincia con < e si finisce con >.

Apriamo Word, ricopiamo il listato di sopra, e salviamolo come file di testo col nome di quarto.html

Poi apriamolo con internet explorer:

Per rendere una casella di testo interattiva occorre intanto dare un nome alla casella di testo, in modo da distinguerla dalle altre caselle e dagli altri elementi presenti nella pagina. Per darli il nome useremo la seguente istruzione:

<input type="text" name="prima">

Dove: name= vuol dire che gli stiamo assegnando un nome, e "prima" messo tra virgolette è proprio il nome che gli vogliamo dare a questa casella. I nomi, come al solito, cerchiamo di darli con poche lettere o numeri, ma senza spazi o caratteri speciali.

Esercizio

Scrivere un programma con due caselle di testo gemelle in cui se scriviamo in una casella il testo appare anche nell'altra casella.

Soluzione

Come prima cosa ci costruiamo le due caselle di testo.

<input type="text" name="prima">

Mi costruisce una casella di testo di nome: "prima".

<input type="text" name="seconda">

Mi costruisce una casella di testo di nome: "seconda".

Qui le cose cominciano ad essere più interessanti. Come fa la casella di testo ad accorgersi che abbiamo scritto dentro?

Ecco! Internet explorer segue sia i movimenti del mouse e sia i tasti che noi premiamo sulla tastiera. Si chiama evento ogni modifica che avviene dall'utente, cioè se preme un tasto si verifica un evento; se lascia un tasto si verifica un evento; se muove il mouse si verifica un evento.

Ad ogni evento corrisponde una istruzione particolare.

Esempio

Se premo un tasto si verifica un evento detto:

onkeydown

Cioè onkeydown vuol dire che è stato premuto un tasto.

Non appena sollevo il dito dal tasto premuto in precedenza, si verifica un altro evento, cioè il tasto è stato lasciato dalla persona che lo aveva premuto.

onkeyup vuol dire che il tasto è stato lasciato.

Riepilogando:

Noi useremo onkeyup per ricopiare il testo scritto nella prima casella, cioè aspetteremo che l'utente abbia sollevato il tasto.

Che facciamo quando l'utente solleva il tasto, cioè ha scritto un carattere nella prima casella?

Dobbiamo ricopiare il testo della prima casella nella seconda.

La copia deve essere fatta in due tempi.

Primo tempo

Dobbiamo leggere il testo contenuto nella prima casella; un pò come il copia e incolla che facciamo abitualmente.

La prima casella si chiama prima; per identificarla scriviamo la seguente istruzione javascript:

document.all.prima

Cosa vuol dire?

document è la pagina che stiamo utilizzando.

all vuol dire tutti gli elementi;

document.all

vuol dire tutti gli elementi della pagina.

document.all.prima vuol dire tra tutti gli elementi della pagina scegli proprio l'elemento che si chiama "prima".

Quindi document.all.prima è proprio la prima casella di testo che abbiamo chiamato prima.

Ovviamente

document.all.seconda

è proprio la casella di testo che abbiamo chiamato "seconda".

Che ci serve della prima casella di testo?

Ci serve conoscere il testo che è stato scritto, cioè il valore contenuto nella casella di testo di nome "prima". Se scrivo:

document.all.prima.value

la parola value vuol dire proprio il contenuto, il valore;

document.all.prima.value

vuol dire tutto il testo scritto nella casella di testo di nome prima.

Ovviamente:

document.all.seconda.value

vuol dire tutto il testo scritto nella seconda casella di testo; che poi sarebbe il testo che noi, come programmatori, dobbiamo scrivere nella seconda casella di testo; in quanto nella prima casella è l'utente a scrivere.

In pratica:

document.all.prima.value

copia il valore contenuto nella casella di nome "prima".

Secondo tempo

Ora dobbiamo incollare; cioè dobbiamo ricopiare il testo che conosciamo già della prima casella, cioè 

document.all.prima.value 

lo dobbiamo ricopiare nella seconda casella.

Operatore = ( uguale)

L'operatore uguale (=) è un operatore di assegnazione, che somiglia un poco all'uguale della matematica.

Se scrivo:

x=5

vuol dire che la variabile x ha il valore 5;

se scrivo:

document.all.seconda.value = 5

vuol dire che la casella di testo deve avere il valore 5;

questo comporta la cancellazione di tutto il contenuto della seconda casella di testo e la scritta del solo valore 5 nella seconda casella di testo.

Ma cosa devo scrivere nella seconda casella di testo?

Non devo scrivere 5 ma devo scrivere il valore contenuto nella prima casella di testo; che è appunto:

document.all.prima.value

In definitiva se scrivo:

document.all.seconda.value=document.all.prima.value

ottengo che il testo contenuto nella seconda casella sarà proprio uguale al testo scritto nella prima casella.

Vediamo quali sono le istruzioni del nostro quinto programma in javascript. 

L'istruzione più complicata è la seguente:

<input type="text" name="prima" onkeyup="document.all.seconda.value=document.all.prima.value">

Notiamo:

onkeyup= " ... "

indica al computer cosa deve fare quando l'utente preme un tasto; quello che deve fare va messo tra virgolette, e deve essere un comando in javascript; infatti:

document.all.seconda.value=document.all.prima.value

è una istruzione javascript che copia il contenuto della seconda casella nella prima casella.

Ricopiamo, quindi, l'itero listato con Word; salviamolo con il nome di quinto.html

Poi apriamo Internet explorer ed eseguiamolo. Come si vede dalla figura di sopra, io nella prima casella ho scritto:

quanto scrivi sopra

e contemporaneamente, mentre scrivevo sopra, il computer ricopiava sotto il testo che scrivevo sopra.

Questo è un esempio di due caselle interattive.

Osservazione

La seconda casella non è proprio interattiva; cioè se scrivo nella seconda casella il testo resta nella seconda casella, e non viene ricopiato nella prima casella.

Esercizio ( da fare da soli)

Completare il programma di sopra facendo in modo che anche la casella di sotto sia interattiva, cioè anche quello che scrivo sotto, nella casella seconda, mi deve apparire sopra nella casella prima.