JavaScript/Oggetto document

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

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 anticipare 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'utilizzazione 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;
la proprietà name che ne restituisce il nome (attributo HTML name );
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).

L'evento associato normalmente a questi campi è onchange, che viene chiamato dopo la modifica del valore nel campo.

Aree di testo

Le aree di testo sono create tramite l'utilizzo del tag HTML <textarea> e sono rappresentante dall'omonimo oggetto textarea in JavaScript.

Questi oggetti presentano proprietà analoghe ai campi di testo: value imposta o restituisce il valore della casella di testo, rows e cols corrispondono ai rispettivi attributi HTML.
L'oggetto textarea permette di inserire anche degli "a capo" nel testo, ma in questo caso bisogna stare attenti, in quanto il carattere di accapo è espresso diversamente a seconda del sistema operativo in uso: su Windows è \n\r, su Linux è \n mentre su Mac è \r (\ è il carattere di commutazione visto in precedenza per gli apici singoli e doppi).

Pulsanti

Per quanto riguarda i pulsanti dei moduli, questi possono essere di tre tipi: submit, reset e button; tuttavia espongono lo stesso modello oggetto, che in realtà è molto semplice, in quanto non presenta proprietà o metodi particolari oltre a quelli condivisi da tutti i campi di modulo.

L'utilizzo di JavaScript con questi pulsanti è più che altro legato agli eventi del mouse (analizzati nel modulo precedente).

Pulsanti di opzione

Iniziamo ad analizzare ora alcuni elementi più complicati: i checkbox e i pulsanti radio (corrispondono rispettivamente ad <input type="checkbox" /> e <input type="radio" />).

Nel primo la proprietà più utile non è value come negli altri casi, bensì checked che indica se la casella è stata marcata o meno.

Per quanto riguarda i radio, il discorso è simile, ma bisogna anche considerare che diversi elementi di opzione normalmente condividono lo stesso attributo name; per accedere quindi ai singoli elementi è necessario quindi appoggiarsi ad un array:

// supponiamo di avere 5 opzioni con name="età"
document.dati.età[1].checked=true; //seleziona la seconda opzione
alert(document.dati.età.value); //restituirà il valore del campo
                                // cioè il valore della casella selezionata
alert(document.dati.età[3].value); //restituisce il valore del quarto elemento

Liste

Analizziamo per ultimo gli elementi <select>, che servono per creare liste e menu a tendina. Prendiamo il seguente spezzone di codice HTML in un ipotetico form chiamato "dati":

<select name=città size=5>
 <option value=mi>Milano</option>
 <option value=to>Torino</option>
 <option value=pe>Pescara</option>
 <option value=pa>Palermo</option>
</select>

Questo codice crea un oggetto select accessibile come sempre con la sintassi document.dati.città. Questo espone alcune proprietà interessanti:

value è il valore del campo del modulo (nel nostro caso potrà essere mi, to, ecc...)
options è un array contenente un riferimento a ciascun oggetto option appartenente all'elenco
selectedIndex restituisce l'indice dell'elemento selezionato dall'utente (Milano sarà 0, Torino 1, ecc.)

Ogni oggetto option espone le seguenti proprietà:

value indica il suo valore
text indica il testo che mostrerà all'utente
index restituisce la sua posizione nell'array.

Ad esempio, associamo all'evento onchange del campo "città" alla seguente funzione:

function mostraCittà() {
 var testo = document.dati.città.options[document.dati.città.selectedIndex].text;
}

Cliccando su ciascuna opzione otterremo così un'alertbox contenente la città selezionata.

Inserire e aggiungere elementi

Per inserire o aggiungere nuovi elementi è sufficiente creare un nuovo oggetto option e assegnarlo ad una posizione dell'array:

var nuovaOpzione = new Option("Bologna", "bo");
document.dati.città.options[0] = nuovaOpzione;

L'esempio appena visto aggiunge la città "Bologna" come primo elemento della lista. Il browser si occuperà poi di far scalare le posizioni degli altri elementi dell'array. Per eliminare un'opzione è sufficiente assegnare all'elemento dell'array il valore null:

document.dati.città.options[2] = null;

La seguente funzione aggiunge una città come ultimo elemento nella lista:

function aggiungiCittà () {
 var testo = prompt("Che città vuoi aggiungere?");
 var sigla = prompt("Inserisci la sigla della città");
 
 var nuovaCittà = new Option(testo, sigla);
 document.dati.città.options[document.dati.città.options.length] = nuovaCittà
}