|
Torniamo a esaminare la gerarchia del Document Object Model (DOM), che inizia con l'oggettto Window. Uno degli oggetti contenuti è Document, che comprende, tra l'altro, tutta la parte delle funzioni di intrerattività con l'utente. I Forms controllano la comunicazione con l'utente offrendo diverse possibilità di interazione. La sintassi della dichiarazione di un forms si scrive nel corpo del testo (body) e può avere questo aspetto.
Questo l'effetto Bene!.Così così!Si consiglia di crearsi un'area di lavoro aprendo una pagina vuota nella quale visualizzare gli esempi di cui qui enunciamo solo il codice. Con <textarea> si produce un'area di testo di cui è possibile specificare la dimensione in righe e colonne.
Nonostante il testo contenuto in textarea sia racchiuso tra i tag <textarea>, il suo valore può essere modificato sempre con il comando value, seguendo il relativo percorso gerarchico. Sui campi di testo si ottiene un controllo più accurato anche tramite l'ascolto degli eventi: le principali funzioni adatte a questo scopo sono onBlur, onFocus, e onChange. Con Focus si intende che l'utente ha cliccato sull'oggetto, con Blur si intende che l'oggetto ha perso il Focus e con Change che l'oggetto è stato modificato (in questo caso che il testo è cambiato). <input type="text" name="mio_testo" onFocus="scrivi('focus');" onBlur="scrivi('blur');" onChange="scrivi('modifica');"> In questo esempio la funzione scrivi(testo), inserita nel tag <head>, può segnalare il tipo di evento scrivendo il testo adeguato nel campo textarea. <script language="JavaScript">
// --> </script> Gli eventi possono essere provocati di proposito tramite le funzioni blur(), focus(), select(). <form name="mio_form"> <a href= "#"onMouseOver="window.document.mio_form.mio_testo.focus();">focus</a>
Il form, in quanto oggetto, ha suoi metodi, proprietà e controllo sugli eventi. Uno di questi è onSubmit.
<form onSubmit="return false;"> Cliccando sul pulsante non succede nulla a causa di return false. Ovviamente un'azione del genere può far sorridere, ma dato che la semplice pressione del tasto Invio produce un'azione di submit, ci sono casi in cui questa azione è indesiderata, oppure deve produrre qualcosa di diverso dall'invio di informazioni che, non trovando sbocco, creerebbero un fastidioso reload della pagina. <form name="mio_form" onSubmit="Invio(); return false;">La funzione Invio() function Invio()
Nel prossimo esempio analizziamo le principali proprietà di un Checkbox. <form name="form_1"> <a href= "#"onClick="window.document.form_1.check_1.checked=
true;return false;">Seleziona Checkbox</a> Se la casella è spuntata, il valore di checked
è true, altrimenti è false.
Il valore di checked può essere inserito
anche di proposito. Esercizio: creare uno script e,d un form
che siano in grado di cambiare il colore di background da bianco a nero e
il colore del testo da nero a rosso con un clic su una casella di checkbox.
Più input di tipo radio sono raggruppati
dallo stesso name, che permette una sola selezione
su una scelta multipla. Quando un form viene spedito identifica la posizione
della selezione nell'elenco degli input dello stesso radio,
e ne restituisce il valore. Nell'esempio che segue non viene effettuata nessuna
spedizione, ma l'azione rimane all'interno della pagina; in questo caso per
valutare lo stato degli input si usa un name
diverso e su ognuno di questi si effettua un controllo tramite le funzioni
spegni1 e accendi1.
function spegni1()
Questo tipo di operazione è molto simile al precedente, semplicemente
utilizza bottoni diversi. Passiamo ora alle liste prodotte dal comando <select>.
Ci sono due modi di rappresentare le liste: con menu a tendina o con la barra
di scorrimento. Entrambi i modi sono solo però una variazione dell'opzione
size. <form name="form_list"> Infatti l'unica differenza sta nel fatto che la prima lista ha l'opzione
size = 1, mentre la seconda l'opzione size = 3. window.document.form_1.lista_1.options[1].text = 'altro testo';Cambia il secondo elemento della lista Quale elemento nella lista è selezionato? Notare che il conto degli elementi parte da zero. <a href= "#"onClick="window.document.form_list.menu_1.options[1].text=
'altro testo'; return false;">Cambia il secondo elemento della lista</a>
Ora che conosciamo l'indice dell'elemento selezionato, possiamo leggerne il testo utilizzando la funzione leggi_indice(). leggi_indice()Esercizio: creare una lista di elementi e scrivere ogni selezione fatta dall'utente in un campo di testo, in forma di elenco. Se la lista deve consentire una selezione multipla, allora leggere le selezioni
diventa leggermente più laborioso, ma non troppo. <form name="form_1" onSubmit="multipla(); return false;>La funzione multipla() function multipla()Esercizio: ripetere l'esercizio precedente con la selezione multipla. Avventuriamoci ora verso uno script che richiede maggiore attenzione. <form name="form_categorie">La funzione liste_categorie passa come parametro il testo della selezione corrente nella prima lista; questo viene valutato dalla funzione eval, che è in grado di rendere compatibile una semplice stringa con un array di stringhe dichiarato con lo stesso nome. Con questo, le stringhe cani, gatti e pecore diventano gli array corrispondenti. Questa funzione è molto utile. Una volta avuto il nome dell'array, è facile copiarne il contenuto nella seconda lista. var cani = new Array("pastore tedesco","pastore belga","dalmata");NOTA: Non essendo argomento del corso l'utilizzo di linguaggi che fanno uso di CGI, è stata volutamente omessa la trattazione del comando Action, il quale ha il compito di spedire in fase di submit i dati contenuti nel form a un programma in grado di riceverli. Si riporta comunque una sintassi di esempio. <form name='form1' action='http://webserver/programmaCGI.exe?">
Esercizio: raccogliere in una sola pagina
tutti gli esempi presentati durante questo corso e renderli funzionanti. |