Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 6 di 49
  • livello principiante
Indice lezioni

Gli oggetti

Il browser può essere sezionato in vari elementi o oggetti.: il DOM
Il browser può essere sezionato in vari elementi o oggetti.: il DOM
Link copiato negli appunti

In questo articolo vedremo alcuni oggetti che fanno parte del DOM e che incontriamo facilmente sviluppando con JavaScript per il Web. Possiamo immaginare la pagina HTML formata da alcuni elementi in varia relazione fra loro. Il browser infatti (con all'interno il documento HTML) può essere infatti "sezionato" in varie parti:

Oggetto Descrizione
navigator Eappresenta il browser stesso
window È la finestra che contiene tutto quanto
document È il documento HTML vero e proprio
document.forms["nomeForm"] Sono i moduli per raccogliere l'input dell'utente
document.images["nomeImmagine"] Le immagini
document.cookie["nomeCookie"] I cookie
document.getElementById("idElemento") gli elementi della pagina definiti con attributo id
location La barra degli indirizzi
status La barra di stato, nella parte bassa del browser
window.frames contiene gli eventuali frames
document.applets["nomeApplet"] Le applet

Ce ne sono molti altri e tutti gli oggetti presenti vediamo nel browser sono in relazione gerarchica fra di loro (ci sono elementi-padre ed elementi-figlo). Grazie a JavaScript possiamo interrogare questi elementi, leggerne le proprietà e in taluni casi anche modificarne il valore.

Facciamo un esempio. Prendiamo il seguente codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Esempio</title>
</head>
<body>
  <forum name="mioForm">
    <input type="text" name="testoProva" value="paradiclorobenzoro">
  </form>
</body>
</html>

La pagina contiene un campo di input di tipo text (che in genere serve all'utente per scrivere dei dati). Per conoscere la lunghezza del testo contenuto nel modulo, utilizzando il modello a oggetti e le proprietà utilizzate da JavaScript, scriviamo:

document.mioForm.testoProva.value.length

che è un modo sintetico di scrivere:

window.document.forms['mioForm'].testoProva.value.length

La riga che abbiamo scritto precedentemente significa:

"prendiamo la finestra del browser, consideriamo il documento attuale, consideriamo i form presenti nel documento e facciamo riferimento a quello che si chiama mioForm, consideriamo poi il campo chiamato testoProva. Una volta individuato testoProva, prendiamo il valore di questo campo e infine ricaviamo la lunghezza del valore di questo campo.

Infatti se scriviamo un codice come questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Esempio</title>
</head>
<body onLoad="alert(document.mioForm.testoProva.value.length)">
  <form name="mioForm">
    <input type="text" name="testoProva" value="paradiclorobenzoro">
  </form>
</body>
</html>

al caricamento della pagina vedremo un messaggio che indica la lunghezza di paradiclorobenzoro (18).

Non vi preoccupate se l'esempio adesso non è del tutto chiaro: esamineremo subito nelle prossime pagine la sintassi introdotta nelle righe di codice scritte poc'anzi (vedremo subito cosa significano le parole onLoad e alert).

L'importante è comprendere il concetto, che cioè una pagina Web viene scomposta da JavaScript in un modello ad oggetti (ognuno con le sue proprietà) in relazione reciproca.

Ovviamente la sintassi per richiamare gli oggetti non è dovuta al nostro estro, ma - visto che JavaScript ha la struttura di un linguaggio di programmazione - deve essere espressa in maniera rigorosa, secondo la struttura del linguaggio (non potremmo scrivere, ad esempio, document.testoProva.length.mioForm.value senza incorrere in errori).

Ti consigliamo anche