Utilizzo di JavaScript e moduli

Javascript indossa molti cappelli. Puoi utilizzare JavaScript per creare effetti speciali. Puoi utilizzare JavaScript per rendere le tue pagine HTML "più intelligenti" sfruttandone le capacità decisionali. E puoi usare JavaScript per migliorare i moduli HTML. Quest'ultima applicazione è di particolare importanza. Di tutti i cappelli che JavaScript può indossare, le sue caratteristiche di elaborazione della forma sono tra le più ricercate e utilizzate.

Niente fa più paura nel cuore di un editore Web di queste tre lettere: CGI. CGI (che sta per common gateway interface), è un meccanismo per il trasporto sicuro dei dati da un client (un browser) a un server. In genere viene utilizzato per trasferire dati da un modulo HTML al server.

Con JavaScript al tuo fianco, puoi elaborare semplici moduli senza richiamare il server. E quando è necessario inviare il modulo a un programma CGI, è possibile fare in modo che JavaScript si occupi di tutti i requisiti preliminari, come la convalida dell'input per garantire che l'utente abbia puntato ogni i. In questa colonna esamineremo da vicino la connessione JavaScript-form, incluso come utilizzare l'oggetto form di JavaScript, come leggere e impostare il contenuto del modulo e come attivare eventi JavaScript manipolando i controlli del modulo. Tratteremo anche come utilizzare JavaScript per verificare l'input del modulo e sommare il modulo a un programma CGI.

Imparare JavaScript

Questo articolo fa parte dell'archivio dei contenuti tecnici di JavaWorld. Puoi imparare molto sulla programmazione JavaScript leggendo gli articoli della serie JavaScript , ma tieni presente che alcune delle informazioni potrebbero essere obsolete. Vedere "Uso degli oggetti incorporati di JavaScript" e "Debug di programmi JavaScript" per ulteriori informazioni sulla programmazione con JavaScript.

Creazione del modulo

Ci sono poche differenze tra un modulo HTML semplice e un modulo ottimizzato con JavaScript. Il principale è che un modulo JavaScript si basa su uno o più gestori di eventi, come onClick o onSubmit. Questi invocano un'azione JavaScript quando l'utente fa qualcosa nel modulo, come fare clic su un pulsante. I gestori di eventi, che vengono inseriti con il resto degli attributi nei tag del modulo HTML, sono invisibili a un browser che non supporta JavaScript. A causa di questa caratteristica, è spesso possibile utilizzare un modulo per browser JavaScript e non JavaScript.

I tipici oggetti di controllo del modulo, chiamati anche "widget", includono quanto segue:

  • Casella di testo per inserire una riga di testo
  • Pulsante per selezionare un'azione
  • Pulsanti di opzione per effettuare una selezione tra un gruppo di opzioni
  • Caselle di controllo per selezionare o deselezionare una singola opzione indipendente

Non mi preoccuperò di enumerare tutti gli attributi di questi controlli (widget) e come usarli in HTML. Quasi tutti i riferimenti sull'HTML ti forniranno i dettagli. Per l'uso con JavaScript, dovresti sempre ricordarti di fornire un nome per il modulo stesso e per ogni controllo che utilizzi. I nomi ti consentono di fare riferimento all'oggetto nella tua pagina ottimizzata con JavaScript.

La forma tipica è simile a questa. Si noti che ho fornito attributi NAME = per tutti i controlli del modulo, incluso il modulo stesso:

 Enter something in the box:

  • FORM NAME = "myform" definisce e nomina il modulo. Altrove nel JavaScript puoi fare riferimento a questo modulo con il nome myform . Il nome che dai al tuo modulo dipende da te, ma dovrebbe essere conforme alle regole di denominazione di variabili / funzioni standard di JavaScript (senza spazi, senza caratteri strani eccetto il trattino basso, ecc.).
  • ACTION = "" definisce come si desidera che il browser gestisca il modulo quando viene inviato a un programma CGI in esecuzione sul server. Poiché questo esempio non è progettato per inviare nulla, l'URL del programma CGI viene omesso.
  • METHOD = "GET" definisce i dati del metodo che vengono passati al server quando il modulo viene inviato. In questo caso l'atttibute è puffer in quanto il modulo di esempio non invia nulla.
  • TIPO DI INPUT = "testo" definisce l'oggetto casella di testo. Questo è il markup HTML standard.
  • TIPO DI INPUT = "pulsante" definisce l'oggetto pulsante. Questo è il markup HTML standard ad eccezione del gestore onClick.
  • onClick = "testResults (this.form)" è un gestore di eventi - gestisce un evento, in questo caso facendo clic sul pulsante. Quando si fa clic sul pulsante, JavaScript esegue l'espressione tra virgolette. L'espressione dice di chiamare la funzione testResults in un altro punto della pagina e passarle l'oggetto form corrente.

Ottenere un valore da un oggetto modulo

Proviamo a ottenere valori da oggetti modulo. Carica la pagina, quindi digita qualcosa nella casella di testo. Fare clic sul pulsante e ciò che hai digitato viene visualizzato nella casella di avviso.

Listato 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

Ecco come funziona lo script. JavaScript chiama la funzione testResults quando fai clic sul pulsante nel modulo. La funzione testResults viene passata all'oggetto form utilizzando la sintassi this.form (la parola chiave this fa riferimento al controllo pulsante; form è una proprietà del controllo pulsante e rappresenta l'oggetto form). Ho dato all'oggetto form il nome form all'interno della funzione testResult, ma puoi usare qualsiasi nome tu voglia.

La funzione testResults è semplice: copia semplicemente il contenuto della casella di testo in una variabile denominata TestVar. Notare come è stato fatto riferimento al contenuto della casella di testo. Ho definito l'oggetto form che volevo usare (chiamato form ), l'oggetto all'interno del form che volevo (chiamato inputbox ) e la proprietà di quell'oggetto che volevo (la proprietà value ).

Altro da JavaWorld

Vuoi più tutorial e novità sulla programmazione? Ricevi la newsletter JavaWorld Enterprise Java consegnata nella tua casella di posta.

Impostazione di un valore in un oggetto modulo

La proprietà value della casella di input, mostrata nell'esempio precedente, è sia leggibile che scrivibile. Cioè, puoi leggere tutto ciò che viene digitato nella casella e puoi riscrivere i dati al suo interno. Il processo di impostazione del valore in un oggetto modulo è esattamente l'opposto della lettura. Ecco un breve esempio per dimostrare l'impostazione di un valore in una casella di testo del modulo. Il processo è simile all'esempio precedente, tranne che questa volta ci sono due pulsanti. Fai clic sul pulsante "Leggi" e lo script legge ciò che hai digitato nella casella di testo. Fare clic sul pulsante "Scrivi" e lo script scrive una frase particolarmente lurida nella casella di testo.

Listato 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • Quando si fa clic sul pulsante "Leggi", JavaScript chiama la funzione readText, che legge e visualizza il valore immesso nella casella di testo.
  • Quando fai clic sul pulsante "Scrivi", JavaScript chiama la funzione writeText, che scrive "Buona giornata!" nella casella di testo.

Lettura di altri valori di oggetti modulo

La casella di testo è forse l'oggetto modulo più comune che leggerai (o scriverai) utilizzando JavaScript. Tuttavia, è possibile utilizzare JavaScript per leggere e scrivere valori dalla maggior parte degli altri oggetti (si noti che JavaScript non può attualmente essere utilizzato per leggere o scrivere dati utilizzando la casella di testo della password). Oltre alle caselle di testo, JavaScript può essere utilizzato con:

  • Casella di testo nascosta (TYPE = "hidden").
  • Pulsante di opzione (TYPE = "radio")
  • Casella di controllo (TYPE = "checkbox")
  • Area di testo ()
  • Liste ()

Utilizzo di caselle di testo nascoste

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

Le aree di testo vengono utilizzate per l'immissione di testo su più righe. La dimensione predefinita della casella di testo è 1 riga per 20 caratteri. È possibile modificare la dimensione utilizzando gli attributi COLS e ROWS. Ecco un tipico esempio di un'area di testo con una casella di testo larga 40 caratteri per 7 righe:

È possibile utilizzare JavaScript per leggere il contenuto della casella dell'area di testo. Questo viene fatto con la proprietà value. Ecco un esempio: