Differenze tra le versioni di "JavaScript/Oggetto document"

m
Update syntaxhighlight tags - remove use of deprecated <source> tags
m
m (Update syntaxhighlight tags - remove use of deprecated <source> tags)
 
 
Ad esempio:
<sourcesyntaxhighlight lang=html4strict>
<body>
<p>Testo<br />
Testo</p>
</body>
</syntaxhighlight>
</source>
genererà il codice:
<sourcesyntaxhighlight lang=html4strict>
<body>
<p>Testo<br /><a href="pagina.html">link</a>
Testo</p>
</body>
</syntaxhighlight>
</source>
 
== Proprietà ==
== Accedere ai link nella pagina ==
Il primo attributo che ci permette realmente di accedere agli elementi della pagina è l'array <code>links</code> che restituisce un riferimento agli oggetti &lt;a&gt; presenti nel documento:
<sourcesyntaxhighlight lang=javascript>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</sourcesyntaxhighlight>
Ciascun oggetto link presenta le seguenti proprietà:
* <code>href</code>: restituisce o imposta il valore dell'attributo <code>href</code> del link. A partire da esso derivano alcuni attributi relativi all'URL a cui punta il link:
* <code>target</code>: il valore dell'attributo <code>target</code> del link
Ad esempio possiamo decidere di impostare il target di tutti i link nella pagina a <code>_blank</code>:
<sourcesyntaxhighlight lang=javascript>
for (i in document.links) {
document.links[i].target = "_blank"; //imposta l'attributo target
}
</syntaxhighlight>
</source>
 
== L'array images ==
Analogamente all'array <code>links</code>, esiste anche un array <code>images</code> che permette di accedere a tutte le immagini presenti nella pagina.<br/>
Rispetto a <code>links</code>, questo array presenta una differenza: è possibile accedere agli elementi della pagina anche attraverso il loro attributo <code>name</code>. Ad esempio:
<sourcesyntaxhighlight lang=html4strict><img name="logo" src="logo.png" width="130px" height="130px" /></sourcesyntaxhighlight>
Possiamo accedere a quell'immagine tramite l'indice numerico oppure tramite il nome, in questo modo:
<sourcesyntaxhighlight lang=javascript>document.images["logo"]</sourcesyntaxhighlight>
 
L'oggetto <code>image</code> espone come proprietà gli attributi di qualsiasi immagine HTML, come <code>src</code>, <code>border</code>, ecc... Presenta inoltre un'interessate proprietà <code>complete</code> che restituisce true se l'immagine è già stata caricata dal browser.
 
Per accedere a ciascun form nella pagina possiamo utilizzare tre metodi:
<sourcesyntaxhighlight lang=javascript>
document.forms[0] //accede al primo form nella pagina
document.forms["dati"] //accede al form con name="dati"
document.dati //forma abbreviata
</syntaxhighlight>
</source>
 
Il metodo presenta due interessanti metodi:
 
Questo da la possibilità di inviare il modulo, per esempio al semplice click di un collegamento oppure di anticipare il normale invio dei dati:
<sourcesyntaxhighlight lang=html4strict>
<form name="opz">
<select name="opzione" onchange="document.opz.submit()">
</select>
</form>
</syntaxhighlight>
</source>
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.
 
=== I campi dei moduli ===
Analizziamo infine, tra le proprietà dell'oggetto form, l'utile array <code>elements[]</code> che permette di accedere a tutti i campi contenuti form:
<sourcesyntaxhighlight lang=javascript>
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
</syntaxhighlight>
</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''. Tuttavia tutti i campi condividono:
 
Per quanto riguarda i ''radio'', il discorso è simile, ma bisogna anche considerare che diversi elementi di opzione normalmente condividono lo stesso attributo <code>name</code>; per accedere quindi ai singoli elementi è necessario quindi appoggiarsi ad un array:
<sourcesyntaxhighlight lang=javascript>
// supponiamo di avere 5 opzioni con name="età"
document.dati.età[1].checked=true; //seleziona la seconda opzione
// cioè il valore della casella selezionata
alert(document.dati.età[3].value); //restituisce il valore del quarto elemento
</syntaxhighlight>
</source>
 
==== Liste ====
Analizziamo per ultimo gli elementi <code>&lt;select&gt;</code>, che servono per creare liste e menu a tendina. Prendiamo il seguente spezzone di codice HTML in un ipotetico form chiamato "dati":
<sourcesyntaxhighlight lang=html4strict>
<select name=città size=5>
<option value=mi>Milano</option>
<option value=pa>Palermo</option>
</select>
</syntaxhighlight>
</source>
Questo codice crea un oggetto ''select'' accessibile come sempra con la sintassi <code>document.dati.città</code>. Questo espone alcune proprietà interessanti:
* '''value''' è il valore del campo del modulo (nel nostro caso potrà essere ''mi'', ''to'', ecc...)
* '''index''' restituisce la sua posizione nell'array.
Ad esempio, associamo all'evento ''onchange'' del campo "città" alla seguente funzione:
<sourcesyntaxhighlight lang=javascript>
function mostraCittà() {
var testo = document.dati.città.options[document.dati.città.selectedIndex].text;
}
</syntaxhighlight>
</source>
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:
<sourcesyntaxhighlight lang=javascript>
var nuovaOpzione = new Option("Bologna", "bo");
document.dati.città.options[0] = nuovaOpzione;
</syntaxhighlight>
</source>
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'':
<sourcesyntaxhighlight lang=javascript>
document.dati.città.options[2] = null;
</syntaxhighlight>
</source>
La seguente funzione aggiunge una città come ultimo elemento nella lista:
<sourcesyntaxhighlight lang=javascript>
function aggiungiCittà () {
var testo = prompt("Che città vuoi aggiungere?");
document.dati.città.options[document.dati.città.options.length] = nuovaCittà
}
</syntaxhighlight>
</source>
[[Categoria:JavaScript|Document]]
{{avanzamento|100%}}
266

contributi