La casella di testo

       data di oggi:
Classe 1a della scuola secondaria di  1° grado

Click col sinistro per interrompere l'audio

Click col sinistro per avviare l'audio

Zitto! Parla!

 

 

Corso di Javascript

La casella di testo è costituita da uno spazio rettangolare in cui l'utente può scrivere qualcosa. Anche se sembra strano, per scrivere qualcosa sul computer il programmatore, che poi saremmo noi, deve stabilire il punto in cui scrivere. Senza casella di testo non possiamo scrivere niente.

casella di testo non interattiva

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.

casella di testo interattiva

 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. 

casella di testo parlante italiano

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

casella di testo parlante francese

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

 

casella di testo che gioca a scopa

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 >.

Questo è un programma che mostra una casella di testo non interattiva.<br>

Puoi scrivere qui sotto ma non succede niente.<br>

<input type="text" >

 

listato di quarto.html

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:

evento significato
onkeydown è stato premuto un tasto
onkeyup il tasto è stato sollevato

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. 

Questo è un programma che mostra una casella di testo interattiva.<br>

Puoi scrivere qui sotto questa casella che si chiama prima.<br>

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

Non appena lasci un tasto il testo della casella di sopra viene ricopiato qui sotto, nella casella di nome seconda.<br>

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

listato di  quinto.html

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.

 

Corso Javascript per scuola media

Dizionario Javascript e html

prof. Pietro De Paolis

 

  

Lezioni tecnologia classe prima

Lezioni tecnologia classe prima

Esercizi tecnologia classe prima

Lezioni classe prima

Esercizi classe prima

Aula classe prima

Laboratorio tecnologia classe prima

©  ING. PIETRO DE PAOLIS - E' consentita la diffusione citando l'autore e il dominio: - Scuola Elettrica - www.scuolaelettrica.it

Pagina inferiore


Scuola Elettrica



Guida per navigare


Richiesta informazioni

 

Mappa per tipo di scuola

 

Indice di tutte le pagine del sito


Scuola Elettrica