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
[modifica | modifica sorgente]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
- se la pagina è già stata caricata:
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à
[modifica | modifica sorgente]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
ebgColor
: indicano rispettivamente il colore di primo piano e di sfondo della pagina. Corrispondono agli attributitext
ebackground
.linkColor
,alinkColor
,valinkColor
: il colore rispettivamente dei link allo stato normale, dei collegamenti attivi e dei collegamenti visitati. Corrisponde agli attributi HTMLlink
,alink
evlink
.
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
[modifica | modifica sorgente]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'attributohref
del link. A partire da esso derivano alcuni attributi relativi all'URL a cui punta il link:hostname
: indica il nome dell'host dell'URLpathname
: indica il percorso oggetto indicato dell'URLport
: indica la porta dell'URLprotocol
: indica il protocollo della risorsa a cui punta l'URL (per esempio FTP o HTTP)search
: restituisce l'eventuale querystring (ad esempiopagina.htm?name=Mario&cognome=Rossi
)
target
: il valore dell'attributotarget
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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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à
}