initial commit

3 files changed, 638 insertions, 0 deletions

diff --git a/files/it/learn/javascript/oggetti/basics/index.html b/files/it/learn/javascript/oggetti/basics/index.html
new file mode 100644
index 0000000000..539df5c2e0
--- /dev/null
+++ b/files/it/learn/javascript/oggetti/basics/index.html
@@ -0,0 +1,242 @@
+---
+title: Basi degli oggetti JavaScript
+slug: Learn/JavaScript/Oggetti/Basics
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Nel primo articolo sugli oggetti JavaScript, vedremo la sintassi fondamentale degli oggetti JavaScript, e rivedremo alcune funzionalità di JavaScript che abbiamo già esamintato in precedenza in questo corso, rimarcando il fatto che molte delle funzionalità che abbiamo già incontrato son di fatto oggetti.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscenza basilare dei computers, comprensione di base di HTML e CSS, familiarità con le basi di JavaScript (vedi <a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Costruire blocchi</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivo:</th>
+   <td>Capire le basi della teoria che stà dietro alla programmazione object-oriented, come questa si relazione con JavaScript ("la maggior parte delle cose sono oggetti"), e come incominciare a lavorare con gli oggetti JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Basi_degli_oggetti">Basi degli oggetti</h2>
+
+<p>Un oggetto è una collezione di dati e/o funzionalità correlati (che di solito consiste in alcune variabili e funzioni — che sono chiamate proprietà e metodi quando fanno parte di oggetti.) Proviamo con un esempio per vedere come si comportano.</p>
+
+<p>Per incomiciare, facciamo una copia locale del nostro file <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. Questo contiene un piccolissimo — elemento {{HTMLElement("script")}} che possiamo usare per scrivere il nostro sorgente, un elemento {{HTMLElement("input")}} per insrire istruzioni di esempio quando la pagina viene visualizzata, alcune definizioni di variabili, ed una funzione che invia ciò che si inserisce in input in un elemento {{HTMLElement("p")}}. Useremo questo come base per esplorare i concetti fondamentali della sintassi degli oggetti.</p>
+
+<p>Come molte cose in JavaScript, creare un oggetto spesso inizia definendo ed inizializzando una variabile. Prova ad inserire ciò che segue sotto al codice JavaScript già presente nel file, quindi salva e ricarica:</p>
+
+<pre class="brush: js">var person = {};</pre>
+
+<p>Se scrivi person nella casella di testo e premi il pulsante, dovresti ottenere il seguente risulatato:</p>
+
+<pre class="brush: js">[object Object]</pre>
+
+<p>Congratulazioni, hai appena creato il tuo primo oggetto. Ben fatto! Ma questo è un oggetto vuoto, perciò non ci possiamo fare molto. Aggiorniamo il nostro oggetto in questo modo:</p>
+
+<pre class="brush: js">var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+</pre>
+
+<p>Dopo aver salvato e ricaricato la pagina, prova ad inserire alcuni di questi nella casella di input:</p>
+
+<pre class="brush: js">person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()</pre>
+
+<p>Ora hai ottenuto alcuni dati e funzionalità nel tuo oggetto, ed ora puoi accedere ad essi con alcune sintassi semplici e graziose!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se hai problemi ad ottenere questo risultato, prova comparare quello che hai scritto con la nostra versione — vedi <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (e anche <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">la versione funzionante</a>). Un errore comune quando si inizia con gli oggetti è quello di mettere una virgola dopo l'ultimo elenemto — questo genera un errore.</p>
+</div>
+
+<p>Quindi che cosa è successo qui? Bene, un oggetto è composto da svariati membri, ogniuno dei quali ha un nome (es. name e age sopra), ed un valore (es, <code>['Bob', 'Smith']</code> e <code>32</code>). Ogni coppia nome/valore deve essere separata da una virgola, ed ogni nome e valore devono essere separati dai due punti. La sintassi segue sempre questo schema:</p>
+
+<pre class="brush: js">var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+}</pre>
+
+<p>Il valore di un membro di un oggetto può essere qualsiasi cosa — nel nostro oggetto persona abbiamo una strigna, un numero, due array e due funzioni. I primi quatto elementi sono dati e ad essi ci si riferisce come le proprietà <strong>(properties)</strong> del oggetto. Gli ultimi due elementi sono funzioni che consentono all'oggetto di fare qualcosa con i dati, e ad esse ci si riferisce come i metodi <strong>(methods)</strong> dell'oggetto.</p>
+
+<p>Un oggetto come questo viene considerato un <strong>oggetto letterale</strong> — noi abbiamo scritto letteralmente il conenuto dell'oggetto nel momento che lo abbiamo creato. Questo è in contrasto con l'istanziazione di oggetti da classi, che vedremo un po' più avanti.</p>
+
+<p>È molto comune creare oggetti letterali quando si desidera trasferire una serie di dati relazionati e strutturati in qualche maniera, ad esempio per inviare richieste al server per inserire i dati nel database. Inviare un singolo oggetto è molto più efficiente che inviare i dati individualmente, ed è più facile lavorarci rispetto agli array, perché i dati vengono identificati per nome.</p>
+
+<h2 id="Notazione_puntata">Notazione puntata</h2>
+
+<p>Sopra, abbiamo acceduto alle proprietà ed ai metodi degli oggetti utilizzando la notazione puntata. Il nome dell'oggetto (person) serve da <strong>namespace</strong> — e deve essere insirito prima per accedere a qualsiasi cosa <strong>incapsulata</strong> nell'oggetto. Quindi si scrive il punto seguito dell'elemento a cui si vuole accedere — <br>
+ questo può essere il nome di una proprietà semplice, un elemento di una proprietà di tipo array, o una chiamata ad uno dei metodi dell oggetto, ad esempio:</p>
+
+<pre class="brush: js">person.age
+person.interests[1]
+person.bio()</pre>
+
+<h3 id="Namespaces_nidificati">Namespaces nidificati</h3>
+
+<p>È anche possibile assegnare un altro oggetto ad un membro di un oggetto. Ad esempio prova a cambiare la property name da</p>
+
+<pre class="brush: js">name: ['Bob', 'Smith'],</pre>
+
+<p>a</p>
+
+<pre class="brush: js">name : {
+  first: 'Bob',
+  last: 'Smith'
+},</pre>
+
+<p>In questo modo abbiamo effettivamente creato un  <strong>sotto-namespace</strong>. Può sembrare complesso, ma non lo è veramente — per accedere a questi devi solo concatenare un ulteriore passo alla fine con un altro punto. Prova questi:</p>
+
+<pre class="brush: js">person.name.first
+person.name.last</pre>
+
+<p><strong>Importante</strong>: A questo punto devi anche cambiare il codice dei tuoi metodi e cambiare ogni istanza di</p>
+
+<pre class="brush: js">name[0]
+name[1]</pre>
+
+<p>con</p>
+
+<pre class="brush: js">name.first
+name.last</pre>
+
+<p>Altrimenti i tuoi metodi non funzioneranno più.</p>
+
+<h2 id="Notazione_con_parentesi_quadre">Notazione con parentesi quadre</h2>
+
+<p>C'è un altro modo per accedere alle proprietà degli oggetti — usando la notazione delle parentesi quadre. Invece di usare questi:</p>
+
+<pre class="brush: js">person.age
+person.name.first</pre>
+
+<p>Puoi usare</p>
+
+<pre class="brush: js">person['age']
+person['name']['first']</pre>
+
+<p>Questo assomiglia molto al modo in cui accedi agli elementi di un array, ed è sostanzialmente la stessa cosa — invece di usare un indice numerico per scegliere un elemento, stai usando il nome associato ad ogni valore membro. Non c'è da meravigliarsi che gli oggetti a volte vengono chiamati <strong>array associativi</strong> — essi infatti associano le stringhe ai valori nello stesso modo in cui gli arrays associano i numeri ai valori.</p>
+
+<h2 id="Assegnare_i_membri_degli_oggetti">Assegnare i membri degli oggetti</h2>
+
+<p>Fino a qui abbiamo solo recuperato (<strong>get</strong>) valori dei menbri degli oggetti — si possono anche assegnare (<strong>set</strong>) i valori ai menbri degli oggetti semplicemente dichiarando i membri che si desidera assegnare (usando la notazione puntata o con quadre), cone ad esempio:</p>
+
+<pre class="brush: js">person.age = 45;
+person['name']['last'] = 'Cratchit';</pre>
+
+<p>Prova ad inserire queste linee e poi rileggi i dati nuovamente per vedere che cosa è cambiato:</p>
+
+<pre class="brush: js">person.age
+person['name']['last']</pre>
+
+<p>Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these:</p>
+
+<pre class="brush: js">person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }</pre>
+
+<p>Ora possiamo provare i nostri nuovi membri:</p>
+
+<pre class="brush: js">person['eyes']
+person.farewell()</pre>
+
+<p>Un utile aspetto della notazione con parentesi quadre è che non solo può essere usata per assegnare valori dinamicamente, ma anche per assegnare i nomi dei mebri. Ad esempio se desideriamo che gli utenti siano in grado di assegnare tipi di dato personalizzati scrivendo il nome della proprietà ed il suo valore in due campi di input, possiamo oggenere questi valori in questo modo:</p>
+
+<pre class="brush: js">var myDataName = nameInput.value;
+var myDataValue = nameValue.value;</pre>
+
+<p>e possiamo aggiungere questi nomi e valori nel nostro oggetto <code>person</code> in questo modo:</p>
+
+<pre class="brush: js">person[myDataName] = myDataValue;</pre>
+
+<p>Puoi testare questo aggiungendo le linee seguenti nel tuo codice appena prima della parentesi graffa chiusa nel oggetto <code>person</code>:</p>
+
+<pre class="brush: js">var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;</pre>
+
+<p>Ora prova s salvare e ricaricare la pagina ed inserisci ciò che segue nella casella di testo:</p>
+
+<pre class="brush: js">person.height</pre>
+
+<p>Non è possibile aggiungere proprità ad oggetti con il metodo descritto usando la notazione puntata, che accetta solo nomi aggiunti in modo letterale e non valori di variabili puntate da un nome.</p>
+
+<h2 id="Che_cos'è_this">Che cos'è "this"?</h2>
+
+<p>Forse ti sei accorto di qualcosa di leggermente strano nei nostri metodi. Guarda questo per esempio:</p>
+
+<pre class="brush: js">greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}</pre>
+
+<p>Forse ti sei chiesto che cos'è "this". La parola chiave <code>this</code> fa riferimento all'oggetto in cui abbiamo scritto il codice — perciò in questo caso <code>this</code> è equivalente a <code>person</code>. Quindi perché non scrivere invece semplicemente <code>person</code>? Come vedrai nell'articolo <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript per principianti</a> quando incominceremo a creare costruttori ecc., <code>this</code> è molto utile — perché garantisce sempre che venga trovato il valore corretto quando il contesto cambia (es. due diverse istanze dell'oggetto <code>person</code> possono avere nomi diversi, ma vogliamo accedere al nome corretto quando vogliamo fargli gli auguri).</p>
+
+<p>Proviamo ad illustrare ciò che intendiamo con un paio di oggetti <code>person</code> semplificati:</p>
+
+<pre class="brush: js">var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>In questo caso, <code>person1.greeting()</code> visualizza "Hi! I'm Chris."; e <code>person2.greeting()</code> "Hi! I'm Brian.", anche se il codice del metodo è esattamente identico. Come abbiamo detto prima, <code>this</code> fa riferimento al valore interno all'oggetto — questo non è molto importante per gli oggetti letterali scritti a mano, ma lo diventa quando gli oggetti vengono generati dinamicamente (per esempio usando i costruttori). Diventerà più chiaro in seguito.</p>
+
+<h2 id="Finora_hai_usato_oggetti_tutto_il_tempo">Finora hai usato oggetti tutto il tempo</h2>
+
+<p>Avendo provato questi esempi, probabilmente hai pensato che la notazione a punto fin qui usata è molto familiare. Questo perché l'hai già usata durante il corso! Tutte le volte che abbiamo lavorato con un esempio che usa le API built-in del browser o oggetti JavaScript, abbiamo usato oggetti, perché quelle funzionalità sono state costruite usando lo stesso tipo di strutture di oggetti che stiamo vedendo qui, anche se molto più complesse dei nostri semplici esempi.</p>
+
+<p>Quindi quando ha usato un metodo di stringa come:</p>
+
+<pre class="brush: js">myString.split(',');</pre>
+
+<p>Non hai fatto altro che usare un metodo disponibile in una istanza della classe <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Ogni volta che crei una stringa nel tuo codice, viene automaticamente creata una istanza di <code>String</code>, che ha ha disposizione alcuni metodi/proprietà comuni.</p>
+
+<p>Quando hai acceduto al modello di oggetto documento usando righe come queste:</p>
+
+<pre class="brush: js">var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');</pre>
+
+<p>Tu hai usato i metodi disponibili in una istanza della classe <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. Per ogni pagina web caricara viene crata una istanza di <code>Document</code> chiamata document, che rappresenta l'intera struttura della pagina, il contenuto e le altre funzionalità come il suo URL. Nuovamente questo significa che ci sono diversi metodi/proprietà comuni disponibili.</p>
+
+<p>Questo è vero anche per molti degli altri oggetti/API built-in che hai usato — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, ecc.</p>
+
+<p>Nota che gli Oggetti/API built-in non sempre creano le istanze di oggetto automaticamente. Ad esempio, le <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — che consentono ai browsers moderni di attivare notifiche di sistema — richiedono che venga instanziato una nuova istanza utilizzando il costruttore per ogni notifica che vuoi avviare. Prova scrivendo questo nella tua console JavaScript:</p>
+
+<pre class="brush: js">var myNotification = new Notification('Hello!');</pre>
+
+<p>Spiegheremo i costruttori in un prossimo articolo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: È utile pensare al modo in cui gli oggetti comunicano come ad un <strong>passaggio di messaggi</strong> — quando un oggetto ha bisogno che un altro oggetto faccia qualcosa, spesso manda un messaggio all'altro oggetto usando uno dei suoi metodi, ed aspetta la risposta sottoforma di valore restituito.</p>
+</div>
+
+<h2 id="Sommario">Sommario</h2>
+
+<p>Congratulazioni, hai raggiunto la fine del nostro primo artocolo sugli oggetti JS — ora dovresti avere una buona idesa di come lavorare con gli oggetti in JavaScript — compresa la creazione di tuoi semplici oggetti. Dovresti anche apprezzare che gli oggetti sono molto utili come strutture per memorizzare dati e funzionalità correlati — se hai provato a tenere traccia delle proprietà e dei metodi del nostro oggetto <code>person</code> in forma di variabili e funzioni separate, dovrebbe essere stato inefficente e frustrante, ed hai corso il rischio di confondere i dati con altre variabli con lo stesso  nome. Gli oggetti ci permettono di tenere le informazioni confinate in modo sicuro nel proprio pacchetto senza rischio.</p>
+
+<p>Nel prossimo articolo incominceremo ad introdurre la teoria della programmazione object-oriented (OOP), ed in che modo queste tecniche possono essere usate in JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
diff --git a/files/it/learn/javascript/oggetti/index.html b/files/it/learn/javascript/oggetti/index.html
new file mode 100644
index 0000000000..5fa859db74
--- /dev/null
+++ b/files/it/learn/javascript/oggetti/index.html
@@ -0,0 +1,51 @@
+---
+title: Introduzione agli oggetti in JavaScript
+slug: Learn/JavaScript/Oggetti
+tags:
+  - Articolo
+  - Guida
+  - JavaScript
+  - Oggetti
+  - Principiante
+  - Tutorial
+  - Verifica
+  - imparare
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">In JavaScript molte cose sono oggetti, a partire da caratteristiche base di JavaScript come stringhe ed array, fino alle API del browser costruite in JavaScript. Potete anche creare i vostri oggetti, incapsulando funzioni e variabili tra loro correlate in pacchetti funzionalmente efficienti e che funzionano da comodi contenitori di dati. Se volete progredire nella vostra conoscenza di JavaScript, è importante comprendere la sua natura <em>object-oriented</em> (orientata agli oggetti), perciò abbiamo approntato questo modulo per aiutarvi. Qui parleremo in dettaglio della teoria e della sintassi degli oggetti; successivamente vedremo come creare i vostri oggetti personalizzati.</p>
+
+<h2 id="Prerequisiti">Prerequisiti</h2>
+
+<p>Prima di iniziare questo modulo, dovreste avere una qualche familiarità con HTML e CSS. Vi consigliamo di seguire i moduli <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduzione a HTML</a> e <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduzione a CSS</a> prima di cimentarvi con JavaScript.</p>
+
+<p>Dovreste anche avere qualche familiarità con i fondamenti di JavaScript prima di affrontare in dettaglio gli oggetti in JavaScript. Prima di procedere con questo modulo vi consigliamo di seguire i moduli <a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi con JavaScript</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se state lavorando su un computer, tablet o altro dispositivo sul quale non fosse possibile creare i vostri file, potete sperimentare buona parte del codice di esempio in un programma di scrittura codice online, come ad esempio <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Fondamenti sugli oggetti</a></dt>
+ <dd>Nel primo articolo riguardante gli oggetti JavaScript vedremo la sintassi fondamentale degli oggetti, e rivisiteremo alcune caratteristiche di JavaScript che abbiamo già introdotto durante il corso, verificando che molte delle caratteristche con cui avete già avuto a che fare sono di fatto oggetti.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript per principianti</a></dt>
+ <dd>Una volta acquisite le basi ci focalizzeremo sul JavaScript orientato agli oggetti (<em>object-oriented JavaScript</em>, OOJS) — questo articolo illustra i fondamenti della programmazione orientata agli oggetti (<em>object-oriented programming</em>, OOP), per poi esplorare come JavaScript emuli le classi di oggetti tramite le funzioni costruttore, e come creare istanze di un oggetto .</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototipi di oggetto (object prototypes)</a></dt>
+ <dd>I prototipi sono il meccanismo tramite il quale gli oggetti JavaScript ereditano caratteristiche tra di loro, e funzionano diversamente dai meccanismi di ereditarietà presenti nei classici linguaggi orientati agli oggetti. In questo articolo esploreremo questa differenza, spiegheremo come funzionano le catene di prototipi, e vedremo come la proprietà di prototipo può essere usata per aggiungere metodi a costruttori esistenti..</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Ereditarietà in JavaScript</a></dt>
+ <dd>Dopo aver spiegato buona parte delle frattaglie dell'OOJS, questo articolo mostra come creare classi di oggetti "figli" che ereditano caratteristiche dalle loro classi "antenate". Presentiamo inoltre alcuni consigli circa quando e dove potreste usare OOJS.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Lavorare con i dati JSON</a></dt>
+ <dd>JavaScript Object Notation (JSON) è un formato standard per rappresentare dati strutturati come oggetti JavaScript. Esso è comunemente usato per rappresentare e trasmettere dati sui siti web (ad esempio inviare alcuni dati dal server al client, cosicché venga visualizzato in una pagina web). Poiché lo incontrerete piuttosto spesso, in quest'articolo vi daremo tutto ciò di cui avete bisogno per lavorare con JSON usando JavaScript, incluso come accedere agli elementi di dati in un oggetto JSON e come scrivere il vostro JSON.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Pratica della costruzione di oggetti</a></dt>
+ <dd>Negli articoli precedenti abbiamo descritto la teoria essenziale degli oggetti JavaScript e i dettagli sulla sintassi, dandovi una base solida da cui Partire. In questo articolo ci cimenteremo in un esercizio pratico, in cui costruirete oggetti JavaScript personalizzati che producono qualcosa di divertente e colorato — alcune palline colorate rimbalzanti.</dd>
+</dl>
+
+<h2 id="Verifiche">Verifiche</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Aggiungere caratteristiche alla demo "bouncing balls"</a></dt>
+ <dd>In questa verifiche userete la demo delle palline rimbalzanti come punto di partenza, aggiungendole alcune nuove ed interessanti caratteristiche.</dd>
+</dl>
diff --git a/files/it/learn/javascript/oggetti/json/index.html b/files/it/learn/javascript/oggetti/json/index.html
new file mode 100644
index 0000000000..71cf166e15
--- /dev/null
+++ b/files/it/learn/javascript/oggetti/json/index.html
@@ -0,0 +1,345 @@
+---
+title: Lavorare con JSON
+slug: Learn/JavaScript/Oggetti/JSON
+translation_of: Learn/JavaScript/Objects/JSON
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">JavaScript Object Notation (JSON) è un formato testuale standard, usato per rappresentare dati strutturati basati sulla sintassi degli oggetti in JavaScript. E' usato comunemente per la trasmissione dati nelle applicazioni web (ad es. inviare dati dal server al client in modo da visualizzarli in una pagina web o viceversa). Ti imbatterai abbastanza spesso in questo formato, così in questo articolo ti forniremo tutto ciò che ti occorre per lavorare con JSON usando JavaScript, incluso la lettura (parsing) del JSON in modo da accedere ai dati in esso contenuti, così come a generare JSON.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisiti:</th>
+   <td>Conoscenza informatica di base, comprensione base di HTML e CSS, familiarità con i concetti base di JavaScript (vedi <a href="/en-US/docs/Learn/JavaScript/First_steps">Primi passi</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Costruzione blocchi</a>) e con i concetti base degli oggetti JS (vedi <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduzione agli oggetti</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Obiettivi:</th>
+   <td>Comprendere il funzionamento dei dati megorizzati in JSON e creare i tuoi oggetti JSON.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="No_davvero_cosè_JSON">No, davvero, cos'è JSON?</h2>
+
+<p>{{glossary("JSON")}} è un formato dati testuale che segue la sintassi degli oggetti JavaScript, reso popolare da <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. Anche se richiama da vicino la sintassi letterale degli oggetti JavaScript, può essere usato indipendentemente da JavaScript, e molti ambienti di programmazione supportano la lettura (parsing) e la generazione di JSON.</p>
+
+<p>JSON esiste sotto forma di una stringa — utile quando vuoi trasmettere dati in una rete. Deve essere poi convertito in un oggetto javaScript nativo quando vuoi accedere ai dati che rappresenta. La conversione tra i due è piuttosto banale —  grazie ai metodi dell'oggetto globale <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> di JavaScript.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Convertire una stringa in un oggetto nativo è chiamata <em>deserializzazione</em>, mentre convertire un oggetto nativo in una stringa in modo da poterlo trasmettere in rete, è chiamata <em>serializzazione</em>.</p>
+</div>
+
+<p>Un oggetto JSON object può essere memorizzato in un file dedicato, essenzialmente un file di testo con estensione <code>.json</code>, e un {{glossary("tipo MIME")}} <code>application/json</code>.</p>
+
+<h3 id="Struutura_di_un_JSON">Struutura di un JSON </h3>
+
+<p>Come descritto sopra, un JSON non è altro che una stringa il cui formato è molto simile al formato letterale di un oggetto JavaScript. E' possibile includere in JSON gli stessi tipi di dato base possibili in un oggetto standard di JavaScript — stringhe, numeri, arrays, booleani e altri oggetti letterali. Questo ti consente di costruire una gerarchia dei dati, ad esempio:</p>
+
+<pre class="brush: json">{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}</pre>
+
+<p>Se carichiamo questo oggetto in un programma, processato in una variabile chiamata <code>superHeroes</code> per esempio, potremmo accedere ai dati che contiene usando la medesima notazione punto/parentesi vista nell'articolo <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Fondamentali degli oggetti JavaScript</a>. Per esempio:</p>
+
+<pre class="brush: js">superHeroes.homeTown
+superHeroes['active']</pre>
+
+<p>Per accedere ai dati gerarchicamente inferiori, occorre semplicemente concatenare i nome delle proprietà e gli indici degli array.  Ad esempio, per accedere al terzo superpotere del secondo eroe nella lista dei membri, procedi come segue:</p>
+
+<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre>
+
+<ol>
+ <li>Per primo abbiamo il nome della variabile — <code>superHeroes</code>.</li>
+ <li>All'interno della variabile vogliamo accedere alla proprietà <code>members</code>, così utilizziamo <code>["members"]</code>.</li>
+ <li><code>members</code> contiene un array popolato da oggetti. Noi vogliamo accedere al secondo oggetto dell'array, quindi usiamo <code>[1]</code>.</li>
+ <li>all'interno dell'oggetto così trovato, vogliamo poi accedere alla proprietà <code>powers</code> e per ciò usiamo <code>["powers"]</code>.</li>
+ <li>La proprietà <code>powers</code> contiene a sua volta un array in cui sono elencate i superpoteri dell'eroe selezionato. Noi vogliamo la terza in lista, usiamo quindi <code>[2]</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Abbiamo reso disponibile il JSON visto sopra, in una variabile del nostro esempio <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> (vedi il <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">codice sorgente</a>). Prova a caricarlo e poi accedi alla variabile dalla console JavaScript del tuo browser.</p>
+</div>
+
+<h3 id="Arrays_as_JSON">Arrays as JSON</h3>
+
+<p>Above we mentioned that JSON text basically looks like a JavaScript object, and this is mostly right. The reason we said "mostly right" is that an array is also valid JSON, for example:</p>
+
+<pre class="brush: json">[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]</pre>
+
+<p>The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example <code>[0]["powers"][0]</code>.</p>
+
+<h3 id="Other_notes">Other notes</h3>
+
+<ul>
+ <li>JSON is purely a data format — it contains only properties, no methods.</li>
+ <li>JSON requires double quotes to be used around strings and property names. Single quotes are not valid.</li>
+ <li>Even a single misplaced comma or colon can cause a JSON file to go wrong, and not work. You should be careful to validate any data you are attempting to use (although computer-generated JSON is less likely to include errors, as long as the generator program is working correctly). You can validate JSON using an application like <a href="http://jsonlint.com/">JSONLint</a>.</li>
+ <li>JSON can actually take the form of any data type that is valid for inclusion inside JSON, not just arrays or objects. So for example, a single string or number would be a valid JSON object.</li>
+ <li>Unlike in JavaScript code in which object properties may be unquoted, in JSON only quoted strings may be used as properties.</li>
+</ul>
+
+<h2 id="Active_learning_Working_through_a_JSON_example">Active learning: Working through a JSON example</h2>
+
+<p>So, let's work through an example to show how we could make use of some JSON data on a website.</p>
+
+<h3 id="Getting_started">Getting started</h3>
+
+<p>To begin with, make local copies of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML:</p>
+
+<pre class="brush: html">&lt;header&gt;
+&lt;/header&gt;
+
+&lt;section&gt;
+&lt;/section&gt;</pre>
+
+<p>Plus a {{HTMLElement("script")}} element to contain the JavaScript code we will be writing in this exercise. At the moment it only contains two lines, which grab references to the {{HTMLElement("header")}} and {{HTMLElement("section")}} elements and store them in variables:</p>
+
+<pre class="brush: js">const header = document.querySelector('header');
+const section = document.querySelector('section');</pre>
+
+<p>We have made our JSON data available on our GitHub, at <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p>
+
+<p>We are going to load it into our page, and use some nifty DOM manipulation to display it, like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Obtaining_the_JSON">Obtaining the JSON</h3>
+
+<p>To obtain the JSON, we use an API called {{domxref("XMLHttpRequest")}} (often called <strong>XHR</strong>). This is a very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. This has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.</p>
+
+<ol>
+ <li>To start with, we store the URL of the JSON we want to retrieve in a variable. Add the following at the bottom of your JavaScript code:
+  <pre class="brush: js">let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre>
+ </li>
+ <li>To create a request, we need to create a new request object instance from the <code>XMLHttpRequest</code> constructor, using the <code>new</code> keyword. Add the following below your last line:
+  <pre class="brush: js">let request = new XMLHttpRequest();</pre>
+ </li>
+ <li>Now we need to open the request using the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code> method. Add the following line:
+  <pre class="brush: js">request.open('GET', requestURL);</pre>
+
+  <p>This takes at least two parameters — there are other optional parameters available. We only need the two mandatory ones for this simple example:</p>
+
+  <ul>
+   <li>The HTTP method to use when making the network request. In this case <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> is fine, as we are just retrieving some simple data.</li>
+   <li>The URL to make the request to — this is the URL of the JSON file that we stored earlier.</li>
+  </ul>
+ </li>
+ <li>Next, add the following two lines — here we are setting the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code> method:
+  <pre class="brush: js">request.responseType = 'json';
+request.send();</pre>
+ </li>
+ <li>The last bit of this section involves waiting for the response to return from the server, then dealing with it. Add the following code below your previous code:
+  <pre class="brush: js">request.onload = function() {
+  const superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+ </li>
+</ol>
+
+<p>Here we are storing the response to our request (available in the <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code> property) in a variable called <code>superHeroes</code>; this variable now contains the JavaScript object based on the JSON! We are then passing that object to two function calls — the first one fills the &lt;<code>header&gt;</code> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <code>&lt;section&gt;</code>.</p>
+
+<p>We have wrapped the code in an event handler that runs when the load event fires on the request object (see <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that <code>request.response</code> will definitely be available when we come to try to do something with it.</p>
+
+<h3 id="Populating_the_header">Populating the header</h3>
+
+<p>Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:</p>
+
+<pre class="brush: js">function populateHeader(jsonObj) {
+  const myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  const myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}</pre>
+
+<p>We named the parameter <code>jsonObj</code>, to remind ourselves that this JavaScript object originated from JSON. Here we first create an {{HTMLElement("h1")}} element with <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, set its <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to equal the <code>squadName</code> property of the object, then append it to the header using <code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the <code>homeTown</code> and <code>formed</code> properties of the object.</p>
+
+<h3 id="Creating_the_hero_information_cards">Creating the hero information cards</h3>
+
+<p>Next, add the following function at the bottom of the code, which creates and displays the superhero cards:</p>
+
+<pre class="brush: js">function showHeroes(jsonObj) {
+  const heroes = jsonObj['members'];
+
+  for (let i = 0; i &lt; heroes.length; i++) {
+    const myArticle = document.createElement('article');
+    const myH2 = document.createElement('h2');
+    const myPara1 = document.createElement('p');
+    const myPara2 = document.createElement('p');
+    const myPara3 = document.createElement('p');
+    const myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    const superPowers = heroes[i].powers;
+    for (let j = 0; j &lt; superPowers.length; j++) {
+      const listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}</pre>
+
+<p>To start with, we store the <code>members</code> property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.</p>
+
+<p>Next, we use a <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a> to loop through each object in the array. For each one, we:</p>
+
+<ol>
+ <li>Create several new elements: an <code>&lt;article&gt;</code>, an <code>&lt;h2&gt;</code>, three <code>&lt;p&gt;</code>s, and a <code>&lt;ul&gt;</code>.</li>
+ <li>Set the <code>&lt;h2&gt;</code> to contain the current hero's <code>name</code>.</li>
+ <li>Fill the three paragraphs with their <code>secretIdentity</code>, <code>age</code>, and a line saying "Superpowers:" to introduce the information in the list.</li>
+ <li>Store the <code>powers</code> property in another new constant called <code>superPowers</code> — this contains an array that lists the current hero's superpowers.</li>
+ <li>Use another <code>for</code> loop to loop through the current hero's superpowers — for each one we create an <code>&lt;li&gt;</code> element, put the superpower inside it, then put the <code>listItem</code> inside the <code>&lt;ul&gt;</code> element (<code>myList</code>) using <code>appendChild()</code>.</li>
+ <li>The very last thing we do is to append the <code>&lt;h2&gt;</code>, <code>&lt;p&gt;</code>s, and <code>&lt;ul&gt;</code> inside the <code>&lt;article&gt;</code> (<code>myArticle</code>), then append the <code>&lt;article&gt;</code> inside the <code>&lt;section&gt;</code>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you are having trouble getting the example to work, try referring to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> source code (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">running live</a> also.)</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a> article for more information on dot and bracket notation.</p>
+</div>
+
+<h2 id="Converting_between_objects_and_text">Converting between objects and text</h2>
+
+<p>The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:</p>
+
+<pre class="brush: js">request.responseType = 'json';</pre>
+
+<p>But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> object is available in browsers, which contains the following two methods:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: Accepts an object as a parameter, and returns the equivalent JSON string form.</li>
+</ul>
+
+<p>You can see the first one in action in our <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> example (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">source code</a>) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used <code>parse()</code> to convert it to an actual JavaScript object. The key snippet of code is here:</p>
+
+<pre class="brush: js">request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  const superHeroesText = request.response; // get the string from the response
+  const superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<p>As you might guess, <code>stringify()</code> works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:</p>
+
+<pre class="brush: js">let myJSON = { "name": "Chris", "age": "38" };
+myJSON
+let myString = JSON.stringify(myJSON);
+myString</pre>
+
+<p>Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using <code>stringify()</code> — saving the return value in a new variable — then checking it again.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON">Test your skills: JSON</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+ <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>