JavaScript/Oggetto document: differenze tra le versioni
m + moduli |
Nessun oggetto della modifica |
||
Riga 71: | Riga 71: | ||
== Accedere ai moduli == |
== Accedere ai moduli == |
||
{{vedi anche|HTML/Moduli}} |
|||
Per ultimo trattiamo, in quanto introduce un argomento piuttosto vasto, l'array <code>document.forms[]</code> che, come si potrà facilmente intuire, permette di accedere a tutti gli elementi <form> nella pagina (moduli HTML). |
Per ultimo trattiamo, in quanto introduce un argomento piuttosto vasto, l'array <code>document.forms[]</code> che, come si potrà facilmente intuire, permette di accedere a tutti gli elementi <form> nella pagina (moduli HTML). |
||
Riga 96: | Riga 97: | ||
In questo modo il form si invia automaticamente quando l'utente sceglie un'opzione dal menu a discesa, senza l'utilizza del pulsante di invio. |
In questo modo il form si invia automaticamente quando l'utente sceglie un'opzione dal menu a discesa, senza l'utilizza del pulsante di invio. |
||
L'oggetto presenta anche alcune proprietà corrispondenti agli attributi dell'oggetto HTML <form>, quali '''action''', '''encoding''', '''method''', '''name''' e '''target'''. |
L'oggetto presenta anche alcune proprietà corrispondenti agli attributi dell'oggetto HTML <form>, quali '''action''', '''encoding''', '''method''', '''name''' e '''target'''. |
||
⚫ | |||
=== I campi dei moduli === |
|||
⚫ | |||
<source lang=javascript> |
<source lang=javascript> |
||
document.dati.elements[0] //accede al primo elemento del form |
document.dati.elements[0] //accede al primo elemento del form |
||
Riga 104: | Riga 107: | ||
</source> |
</source> |
||
L'oggetto restituito da questo array dipende dal tipo di oggetto a cui accede: potrà essere un campo di testo, un pulsante oppure una ''textarea''. |
L'oggetto restituito da questo array dipende dal tipo di oggetto a cui accede: potrà essere un campo di testo, un pulsante oppure una ''textarea''. Tuttavia tutti i campi condividono: |
||
* una proprietà '''form''' che restituisce un rimando al form genitore; |
|||
* una proprietà '''value''' che permette di ottenere o impostare al valore del campo, in modo diverso a secondo dei singoli tipi di campo; |
|||
* la proprietà '''type''' che ne specifica il tipo |
|||
* due metodi '''focus()''' e '''blur()''' che rispettivamente attribuiscono e tolgono il ''focus'' dall'elemento |
|||
==== Caselle di testo ==== |
|||
Questi elementi sono creati utilizzando il tag HTML <code><input></code> impostando l'attributo <code>type</code> ai valori ''text'', ''password'' o ''hidden'': la differenza è che il secondo mostra degli asterischi al posto dei caratteri reali e il terzo è invisibile, ma noi li tratteremo insieme in quanto condividono proprietà e metodi. |
|||
Questi tre tipi di moduli restituiscono come attributo '''type''' il valore rispettivamente ''text'', ''password'' e ''hidden''. Hanno poi due proprietà, '''size''' e '''maxlength''', che corrispondono ai rispettivi attributi HTML. |
|||
Per quanto riguarda i metodi, invece, presentano '''select()''', che seleziona l'intero testo contenuto nel campo (ovviamente non serve per i campi di testo nascosti). |
|||
==== Aree di testo ==== |
|||
Le aree di testo sono create tramite l'utilizzo del tag <code><textarea></code>, |
|||
[[Categoria:JavaScript|Oggetto document]] |
[[Categoria:JavaScript|Oggetto document]] |
Versione delle 13:53, 18 nov 2007
Oltre alle proprietà elencate nel modulo precedente, l'oggetto globale window
espone altre importanti proprietà, tra le quali l'oggetto window.document
.
Questo oggetto permette di ottenere un riferimento al documento HTML e agli elementi in essa contenuti.
Metodi
L'oggetto espone solo pochi metodi:
- open() e close() rispettivamente aprono e chiudono un flusso di informazioni per l'uso dei metodi elencati sotto
- write() e writeln() scrivono nella pagina la stringa (formattata in HTML) passata come parametro:
- se la pagina è già stata caricata:
- se è stato aperto il flusso di informazioni, il testo verrà inserito alla fine della pagina
- se il flusso non è stato aperto, il testo sostituirà il testo della pagina
- se la pagina non è ancora stata caricata, se si usando blocchi <script> all'interno del <body>, le informazioni si inseriscono nel punto in cui è presente lo script
Ad esempio:
<body>
<p>Testo<br />
<script type="application/x-javascript">
document.write('<a href="pagina.html">link</a>');
</script>
Testo</p>
</body>
genererà il codice:
<body>
<p>Testo<br /><a href="pagina.html">link</a>
Testo</p>
</body>
Proprietà
Le proprietà dell'oggetto document possono essere relative:
- agli attributi dell'elemento
<body>
della pagina
- al contenuto vero e proprio del corpo del documento
- altre proprietà del documento HTML
Nel primo gruppo, troviamo proprietà come:
fgColor
e bgColor
: indicano rispettivamente il colore di primo piano e di sfondo della pagina. Corrispondono agli attributi text
e background
.
linkColor
, alinkColor
, valinkColor
: il colore rispettivamente dei link allo stato normale, dei collegamenti attivi e dei collegamenti visitati. Corrisponde agli attributi HTML link
, alink
e vlink
.
Tra le proprietà del documento HTML la più rilevante è document.title
, che permette di accedere al titolo del documento (etichetta <title&t;
.
Accedere ai link nella pagina
Il primo attributo che ci permette realmente di accedere agli elementi della pagina è l'array links
che restituisce un riferimento agli oggetti <a> presenti nel documento:
var l = document.links[0]; //restituisce un riferimento al primo link nella pagina
alert('Nella pagina ci sono ' + document.links.length + ' link'); //ricordiamoci che è un array
Ciascun oggetto link presenta le seguenti proprietà:
href
: restituisce o imposta il valore dell'attributo href
del link. A partire da esso derivano alcuni attributi relativi all'URL a cui punta il link:
hostname
: indica il nome dell'host dell'URL
pathname
: indica il percorso oggetto indicato dell'URL
port
: indica la porta dell'URL
protocol
: indica il protocollo della risorsa a cui punta l'URL (per esempio FTP o HTTP)
search
: restituisce l'eventuale querystring (ad esempio pagina.htm?name=Mario&cognome=Rossi
)
target
: il valore dell'attributo target
del link
Ad esempio possiamo decidere di impostare il target di tutti i link nella pagina a _blank
:
for (i in document.links) {
document.links[i].target = "_blank"; //imposta l'attributo target
}
L'array images
Analogamente all'array links
, esiste anche un array images
che permette di accedere a tutte le immagini presenti nella pagina.
Rispetto a links
, questo array presenta una differenza: è possibile accedere agli elementi della pagina anche attraverso il loro attributo name
. Ad esempio:
<img name="logo" src="logo.png" width="130px" height="130px" />
Possiamo accedere a quell'immagine tramite l'indice numerico oppure tramite il nome, in questo modo:
document.images["logo"]
L'oggetto image
espone come proprietà gli attributi di qualsiasi immagine HTML, come src
, border
, ecc... Presenta inoltre un'interessate proprietà complete
che restituisce true se l'immagine è già stata caricata dal browser.
Accedere ai moduli
Per approfondire, vedi HTML/Moduli.
Per ultimo trattiamo, in quanto introduce un argomento piuttosto vasto, l'array document.forms[]
che, come si potrà facilmente intuire, permette di accedere a tutti gli elementi <form> nella pagina (moduli HTML).
Per accedere a ciascun form nella pagina possiamo utilizzare tre metodi:
document.forms[0] //accede al primo form nella pagina
document.forms["dati"] //accede al form con name="dati"
document.dati //forma abbreviata
Il metodo presenta due interessanti metodi:
- reset() che resetta i valori dei campi nei moduli (come cliccare sul pulsante "reset" del form)
- submit() invece invia il form (come cliccare sul pulsante "submit" o "invia" del modulo)
Questo da la possibilità di inviare il modulo per esempio al semplice click di un collegamento oppure di aniticipare il normale invio dei dati:
<form name="opz">
<select name="opzione" onchange="document.opz.submit()">
<option value="modifica">modifica</option>
<option value="elimina">elimina</option>
<option value="...">...</option>
</select>
</form>
In questo modo il form si invia automaticamente quando l'utente sceglie un'opzione dal menu a discesa, senza l'utilizza del pulsante di invio.
L'oggetto presenta anche alcune proprietà corrispondenti agli attributi dell'oggetto HTML <form>, quali action, encoding, method, name e target.
I campi dei moduli
Analizziamo infine, tra le proprietà dell'oggetto form, l'utile array elements[]
che permette di accedere a tutti i campi contenuti form:
document.dati.elements[0] //accede al primo elemento del form
document.dati.elements["opzione"] //accede al campo con name="opzione"
document.dati.opzione //forma abbreviata
L'oggetto restituito da questo array dipende dal tipo di oggetto a cui accede: potrà essere un campo di testo, un pulsante oppure una textarea. Tuttavia tutti i campi condividono:
- una proprietà form che restituisce un rimando al form genitore;
- una proprietà value che permette di ottenere o impostare al valore del campo, in modo diverso a secondo dei singoli tipi di campo;
- la proprietà type che ne specifica il tipo
- due metodi focus() e blur() che rispettivamente attribuiscono e tolgono il focus dall'elemento
Caselle di testo
Questi elementi sono creati utilizzando il tag HTML <input>
impostando l'attributo type
ai valori text, password o hidden: la differenza è che il secondo mostra degli asterischi al posto dei caratteri reali e il terzo è invisibile, ma noi li tratteremo insieme in quanto condividono proprietà e metodi.
Questi tre tipi di moduli restituiscono come attributo type il valore rispettivamente text, password e hidden. Hanno poi due proprietà, size e maxlength, che corrispondono ai rispettivi attributi HTML.
Per quanto riguarda i metodi, invece, presentano select(), che seleziona l'intero testo contenuto nel campo (ovviamente non serve per i campi di testo nascosti).
Aree di testo
Le aree di testo sono create tramite l'utilizzo del tag <textarea>
,