path: root/files/it/web/javascript/javascript_technologies_overview/index.html

---
title: Il DOM e JavaScript
slug: Web/JavaScript/JavaScript_technologies_overview
tags:
  - DOM
  - JavaScript
  - Tutte_le_categorie
translation_of: Web/JavaScript/JavaScript_technologies_overview
original_slug: Web/JavaScript/Il_DOM_e_JavaScript
---
<h3 id="Il_Grande_Disegno" name="Il_Grande_Disegno">Il Grande Disegno</h3>

<p>Gli effetti visivi come muovere i layer sulla pagina, mostrare e nascondere layer, far comparire menu, eccetera, sono spesso indicati come "<a href="it/DHTML">DHTML</a>", o "Dynamic HTML". Alcuni hanno dubbi sull'effettiva utilità di queste tecnologie in pagine web che dovrebbero trasmettere del contenuto e non la presentazione, ma dobbiamo comunque prendere atto della loro larga diffusione.</p>

<p>Molti web master si limitano ad andare sui siti che offrono script DHTML e ricopiare il codice nelle loro pagine, senza interessarsi a come funzionano quegli script DHTML. Sfortunatamente la maggior parte di questi siti parlano di "javascript" e "DHTML", ma mai di DOM, il quale, sebbene sia un concetto introdotto da parecchio, solo di recente sta entrando nel gergo del web designer medio.</p>

<p>E' una grande sfida per un progetto come Mozilla convincere i possessori di questi siti che ***it is worth coding for the W3C DOM, which sometimes means a lot of work, and drops support for the older browsers. It is also a big challenge to get the facts straight concerning the support for the W3C DOM. *** Uno dei più grandi problemi che incontrano alcuni web developer è la confusione tra <a href="it/JavaScript">JavaScript</a>, <a href="it/DHTML">DHTML</a> e il <a href="it/DOM">DOM</a>. In questo articolo tenteremo di chiarire le cose, e di spiegare le relazioni fra queste utili ed elaborate tecnologie.</p>

<h3 id="JavaScript.2C_IL_Linguaggio_di_Web_Scripting" name="JavaScript.2C_IL_Linguaggio_di_Web_Scripting">JavaScript, IL Linguaggio di Web Scripting</h3>

<p><a href="it/JavaScript">JavaScript</a> è un "linguaggio di scripting di oggetti" sviluppato inizialmente alla Netscape Communications Corp. da Brendan Eich, che oggi è uno dei leader del progetto Mozilla. Il motore JavaScript usato da Mozilla si chiama <a href="it/SpiderMonkey">SpiderMonkey</a>, e aderisce alla specifica ECMA-262 3°revisione(di cui è un superset; guarda anche la pagina <a href="it/ECMAScript">ECMAScript</a>).</p>

<p>Contrariamente a diffuse errate credenze, JavaScript non è "Java Interpretato". Possiamo dire che JavaScript è un linguaggio di scripting dinamico che supporta la costruzione di oggetti basata su prototipi. La sintassi di base è volutamente simile sia a Java che a C++ per ridurre il numero di nuovi concetti richiesti per imparare il linguaggio. Il grande vantaggio di JavaScript è che è estremamente facile da imparare se vuoi fare programmazione di base (come quella richiesta per semplici DHTML). Niente tipi di variabili a vista, stringhe semplici da usare, neutralità totale della piattaforma,ecc. Per i programmatori avanzati può essere usato sia come linguaggio orientato agli oggetti che come linguaggio procedurale.</p>

<p>Gran parte di questo paragrafo su JavaScript è stato preso dalla <a class="external" href="http://mozilla.org/js">pagina JavaScript di Mozilla</a>. Puoi anche consultare <a class="external" href="http://www.mozilla.org/js/language/">la più recente specifica ECMA</a>.</p>

<h3 id="Il_Modello_a_Oggetti_del_Documento.2C_un_insieme_di_interfacce_indipendenti_dal_linguaggio" name="Il_Modello_a_Oggetti_del_Documento.2C_un_insieme_di_interfacce_indipendenti_dal_linguaggio">Il Modello a Oggetti del Documento, un insieme di interfacce indipendenti dal linguaggio</h3>

<p>Mentre Javascript è il linguaggio di programmazione che ti permette di operare sugli oggetti DOM, il DOM ti fornisce metodi e proprietà per recuperare, modificare, aggiornare ed eliminare parti del documento su cui stai lavorando. Per esempio, potresti recuperare il valore di un campo di testo e metterlo in una variabile stringa con il DOM; a questo punto puoi usare l'operatore Javascript di concatenazione <code>+</code> , per unire quella stringa ad un'altra, in base a ciò che vuoi ottenere. Potresti quindi usare il metodo <code><a href="it/DOM/window/alert">alert()</a></code> per mostrare la stringa all'utente attraverso una finestra di dialogo. Guarda anche gli altri esempi più sotto.</p>

<p>In che senso "indipendente dal linguaggio"? Non è javascript l'unico modo per accedere al DOM? No, ad esempio Mozilla usa il DOM sia col C++ che col Javascript per la sua interfaccia utente. Questi sono alcuni dei linguaggi che hanno un'implementazione del DOM: <a class="external" href="http://users.erols.com/enno/index.html">Perl</a>, <a class="external" href="http://www.docuverse.com/domsdk/index.html">Java</a>, <a class="external" href="http://www.vivid-creations.com/dom/index.htm">ActiveX</a>, <a class="external" href="http://fourthought.com/4Suite/4DOM">Python</a>; ciò è possibile grazie all'indipendenza del DOM dal linguaggio di programmazione.</p>

<h3 id="Il_DOM_e_Javascript_-_Chi_sta_facendo_cosa.3F" name="Il_DOM_e_Javascript_-_Chi_sta_facendo_cosa.3F">Il DOM e Javascript - Chi sta facendo cosa?</h3>

<p>Arriviamo al punto principale di questo documento: chi sta facendo cosa? In uno script che ho inserito nella mia pagina, dov'è il DOM, e dov'è Javascript? Guardiamo da vicino un piccolo esempio: il codice prende tutti i tag <span class="nowiki">&lt;a&gt;</span> della pagina e li mette in una NodeList che abbiamo chiamato "<code>anchorTags</code>". Quindi per ogni tag ancora facciamo comparire un avviso contenente il valore dell'attributo href del tag. In blu c'è Javascript, in rosso il DOM.</p>

<pre class="eval"><span class="highlightblue">var anchorTags = <span class="highlightred">document.getElementsByTagName("a")</span>;
for (var i = 0; i &lt; <span class="highlightred">anchorTags.length</span> ; i++)
{
   <span class="highlightred">alert</span>("Href of " + i + "-th element is : " + <span class="highlightred">anchorTags[i].href</span> + "\n");
}</span>
</pre>

<h4 id="Spiegazione" name="Spiegazione">Spiegazione</h4>

<p>Questo frammento di codice mostra cos'è Javascript, e cos'è DOM..</p>

<dl>
 <dt><span class="highlightblue">var anchorTags =</span></dt>
 <dd>Crea una variabile chiamata "<code>anchorTags</code>".</dd>
 <dt><span class="highlightred">document.getElementsByTagName("a")</span></dt>
 <dd>L'interfaccia <code>Document</code> è la prima interfaccia definita nel DOM1 Core, e <code>document</code> è l'oggetto che implementa l'interfaccia <code>Document</code>. L'oggetto document contiene tutto ciò che c'è nella pagina.<br>
 Il DOM1 Core definisce il metodo <code>getElementsByTagName()</code> Nell'interfaccia <code>Document</code>. Questo metodo mette in una NodeList(una sorta di array specifico per contenere i nodi del DOM)tutti i tag il cui nome corrisponde al parametro passato alla funzione, in ordine di apparizione nel codice sorgente del documento. La variabile <code>anchorTags</code> è quindi ora una NodeList.</dd>
 <dt><span class="highlightblue">;</span></dt>
 <dd>Il punto e virgola che chiude le istruzioni. Roba di Javascript.</dd>
 <dt><span class="highlightblue">for (var i = 0; i &lt;</span></dt>
 <dd>Tipico ciclo "for" in un linguaggio di programmazione. Ci consente di scorrere tutti i nodi contenuto nella NodeList salvata in <code>anchorTags</code>. "<code>i</code>" è una variabile temporanea di Javascript.</dd>
 <dt><span class="highlightred">anchorTags.length</span></dt>
 <dd>Nel DOM1 Core è definita la proprietà <code>length</code> dell'interfaccia <code>NodeList</code>. Restituisce un intero che è il numero di nodi contenuti nella NodeList.</dd>
 <dt><span class="highlightblue">; i++) {</span></dt>
 <dd>Tipica istruzione per incrementare di 1 una variabile. Javascript.</dd>
 <dt><span class="highlightred">alert(</span></dt>
 <dd><code>alert()</code> è un metodo del DOM che apre una finestrella in mezzo allo schermo con dentro la stringa che gli hai passato. Nota: questo metodo fa parte di ciò che viene chiamato DOM level 0, o DOM0; è un insieme di interfacce che non fanno parte di nessuna specifica DOM, ma sono comunque implementate da alcuni browser.</dd>
 <dt><span class="highlightblue">"Href of this a element is : " +</span></dt>
 <dd>Una stringa letterale e un operatore di concatenazione di stringhe. JavaScript.</dd>
 <dt><span class="highlightred">anchorTags{{ mediawiki.external('i') }}.href</span></dt>
 <dd>"<code>href</code>" è una proprietà definita dall'intefaccia <code>HTMLAnchorElement</code> della specifica DOM1 HTML. Restituisce il valore dell'attributo <code>href</code> dell'elemento ancora, se presente.<br>
 Usiamo anche <code>anchorTags{{ mediawiki.external('i') }}</code>, la stessa sintassi usata in Javascript per accedere all'i-esimo elemento di un array. Un modo più "linguaggio-indipendente" per accedere a un elemento di una NodeList è l'uso del metodo <code>item()</code>, definito nella interfaccia <code>NodeList</code>: <code>anchorTags.item(1).href</code>, ma la maggior parte delle implementazioni Javascript permettono di usare la più sbrigativa sintassi per array, che è ciò che la maggior parte dei programmatori usano.</dd>
 <dt><span class="highlightblue">+ "\n");</span></dt>
 <dd>Un'altra concatenazione di stringhe. Inserisce un ritorno del carrello alla fine della stringa.</dd>
 <dt><span class="highlightblue">}</span></dt>
 <dd>Fine del ciclo "for".</dd>
</dl>

<div class="originaldocinfo">
<p><strong>Original Document Information</strong></p>

<ul>
 <li>Author(s): Fabian Guisset &lt;fguisset at softhome dot net&gt;</li>
 <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
</ul>
</div>