Quando programmate con JavaScript dovete immaginare che la pagina HTML sia formata da vari elementi in varia relazione fra loro. Il browser infatti (con all'interno il documento HTML) può essere infatti "sezionato" in vari elementi:
- prima di tutto c'è il browser stesso (l'oggetto navigator)
- poi la finestra che contiene tutto quanto (l'oggetto window)
- eventuali frames (l'oggetto window.frames)
- il documento HTML vero e proprio (document)
- i moduli per raccogliere l'input dell'utente (document.forms["nomeForm"])
- le immagini (document.images["nomeImmagine"])
- i cookie (document.cookie["nomeCookie"])
- i livelli
- le applet (document.applets["nomeApplet"])
- la barra degli indirizzi (location)
- la barra di stato, nella parte bassa del browser (status)
e via di seguito.
Tutti gli oggetti che vediamo nel browser sono in relazione gerarchica fra di loro (ci sono elementi-padre ed elementi-figli) e tramite JavaScript - utilizzando la corretta sintassi - è possibile interrogare questi elementi, leggerne le proprietà e in taluni casi anche cambiare il valore di queste proprietà.
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>
<FORM NAME="mioForm">
<input type="text" name="testoProva" value="paradiclorobenzoro">
</FORM>
</body>
</html>
La pagina contiene un campo di input text (che in genere serve all'utente per scrivere dei dati). Se volessi conoscere la lunghezza del testo contenuto nel modulo, utilizzando il modello a oggetti e le proprietà utilizzate da JavaScript, non avrei che da scrivere:
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'. Bene. 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>
Non vi preoccupate se l'esempio adesso non vi è del tutto chiaro: esamineremo subito nelle prossime pagine la sintassi introdotta nelle righe di codice scritte poc'anzi (vedremo subito cosa vuol dire "onLoad" e cosa vuol dire "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).
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |