initial commit

4 files changed, 676 insertions, 0 deletions

diff --git a/files/it/web/javascript/reference/classes/costruttore/index.html b/files/it/web/javascript/reference/classes/costruttore/index.html
new file mode 100644
index 0000000000..afc6c44526
--- /dev/null
+++ b/files/it/web/javascript/reference/classes/costruttore/index.html
@@ -0,0 +1,161 @@
+---
+title: costruttore
+slug: Web/JavaScript/Reference/Classes/costruttore
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Il metodo <code>constructor</code> è un metodo speciale usato per la creazione e l'inizializzazione di un oggetto creato da  una <code>classe</code>.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">constructor([argomenti]) { ... }</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>In una classe ci può essere un solo metodo con il nome "constructor". Se una classe contiene una o più occorrenze del metodo <code>constructor</code> viene sollevato un errore di tipo {{jsxref("SyntaxError")}}. </p>
+
+<p>Un costruttore può usare la keyword <code>super</code> per chiamare il costruttore di una classe genitore.</p>
+
+<p>Se non viene specificato un metodo <code>constructor</code>, verrà usato quello di default.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Usare_il_metodo_constructor">Usare il metodo <code>constructor</code></h3>
+
+<p>Questo pezzo di codice è stato preso da <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Chiama il costruttore della classe padre usando lo stesso valore length
+    // come altezza e come larghezza del Poligono
+    super(length, length);
+    // Nota: Nelle classi derivate, super() deve essere chiamato prima
+    // dell'utilizzo di 'this', altrimenti viene sollevato un reference error.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Costruttori_predefinito">Costruttori predefinito</h3>
+
+<p>Se non viene specificato un metodo costruttore, verrà usato quello di default. Per le classi base il costruttore di default è:</p>
+
+<pre class="brush: js">constructor() {}
+</pre>
+
+<p>Per le classi derivate invece è:</p>
+
+<pre class="brush: js">constructor(...args) {
+  super(...args);
+}</pre>
+
+<h2 id="Specifiche">Specifiche</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specifica</th>
+   <th scope="col">Stato</th>
+   <th scope="col">Commento</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_con_i_Browser">Compatibilità con i Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Specifica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supporto Base</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Costruttore predefinito</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Specifica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome per Android</th>
+  </tr>
+  <tr>
+   <td>Supporto Base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Costruttore predefinito</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/classes/extends/index.html b/files/it/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..ccf0cab627
--- /dev/null
+++ b/files/it/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,175 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classi")}}</div>
+
+<p>La parola chiave <strong>extends</strong> è utilizzata nella <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">dichiarazione</a> o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">espressione</a> di classe per creare una classe figlia di un'altra classe.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }
+
+/**
+*@desc La classe ChildClass estende la classe ParentClass
+*/
+</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>La parola chiave <code>extends</code> può essere utilizzata per creare una sottoclasse personalizzata basandosi su classi già esistenti e anche su oggetti nativi (cfr. <a href="en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> object).</p>
+
+<p>Il <code>.prototype</code> dell'estensione deve essere un {{jsxref("Object")}} oppure {{jsxref("null")}}.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<h3 id="Utilizzare_extends">Utilizzare <code>extends</code></h3>
+
+<p>Il primo esempio crea una classe chiamata <code>Square</code> dalla classe chiamata <code>Polygon</code>. Questo esempio è estratto da questo <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">demo live (sorgente)</a>.</p>
+
+<p> </p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // Qui chiama il constructor della classe che estende (parent)
+    // con le misure per la larghezza e altezza del poligono
+    super(length, length);
+    // Nota: In classi derivate, super() deve essere chiamato prima
+    // di poter utilizzare 'this', altrimenti causerà un errore di reference.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.height = this.width = Math.sqrt(value);
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="Utilizzare_extends_con_oggetti_nativi">Utilizzare <code>extends</code> con oggetti nativi</h3>
+
+<p>Questo esempio estende l'oggetto nativo {{jsxref("Date")}}. Questo esempio è estratto da questo <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">demo live (sorgente)</a>.</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
+  }
+}</pre>
+
+<h3 id="Estendere_null">Estendere <code>null</code></h3>
+
+<p>Estendere da {{jsxref("null")}} funziona come di norma, eccetto che l'oggetto prototipo non eredita da {{jsxref("Object.prototype")}}.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null</pre>
+
+<h2 id="Specificazioni">Specificazioni</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilità_Browser">Compatibilità Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>Array subclassing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/classes/index.html b/files/it/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..6b600be205
--- /dev/null
+++ b/files/it/web/javascript/reference/classes/index.html
@@ -0,0 +1,270 @@
+---
+title: Classes
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - Classes
+  - ECMAScript6
+  - Experimental
+  - Inheritance
+  - Intermediate
+  - JavaScript
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>Le classi JavaScript, introdotte in ECMAScript 2015, sono principalmente zucchero sintattico sull'esistente ereditarietà prototipale di JavaScript. La sintassi <em>non</em><strong> </strong>introduce un nuovo modello di eredità orientata agli oggetti in JavaScript.</p>
+
+<h2 id="Definizione_classi">Definizione classi</h2>
+
+<p>Le classi sono di fatto delle "<a href="/en-US/docs/Web/JavaScript/Reference/Functions">funzioni</a> speciali", e così come puoi definire <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>, la sintassi per la classe ha due componenti: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> e <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>.</p>
+
+<h3 id="Dichiarazione_classe">Dichiarazione classe</h3>
+
+<p>Un modo per definire una classe è quello di <strong>dichiararla</strong>. Per dichiarare una classe, usa la <em>keyword</em> <code>class</code> seguito dal nome della classe (in questo caso "Polygon").</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<h4 id="Hoisting">Hoisting</h4>
+
+<p>Un'importante differenza tra la <strong>dichiarazione di una funzione</strong> e la <strong>dichiarazione di una classe</strong> è che le dichiarazioni di funzione sono {{Glossary("Hoisting", "hoisted")}} mentre quelle per le classi no. Bisogna dichiarare la classe e poi si può usarla, altrimenti il codice solleva un'eccezione {{jsxref("ReferenceError")}}:</p>
+
+<pre class="brush: js example-bad">var p = new Polygon(); // ReferenceError
+
+class Polygon {}
+</pre>
+
+<h3 id="Class_expressions">Class expressions</h3>
+
+<p>Una <strong>class expression</strong> è un altro modo di definire una classe. In questo caso possono avere un nome o meno. Il nome dato è locale al corpo della classe.</p>
+
+<pre class="brush: js">// unnamed
+var Polygon = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+// named
+var Polygon = class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+</pre>
+
+<p><strong>Nota: </strong>anche le <strong>Class</strong> <strong>expressions </strong>soffrono degli stessi problemi di hoisting menzionati per le <strong>dichiarazioni di Classi.</strong></p>
+
+<h2 id="Corpo_della_classe_e_definizione_dei_metodi">Corpo della classe e definizione dei metodi</h2>
+
+<p>Il corpo di una classe è la parte inclusa tra le parentesi graffe <code>{}</code>. Qui si definiscono i membri della classe come il costruttore o i metodi.</p>
+
+<h3 id="Strict_mode">Strict mode</h3>
+
+<p>I corpi di <em>class declarations</em> e <em>class expression</em> sono eseguiti in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p>
+
+<h3 id="Costruttore">Costruttore</h3>
+
+<p>Il <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">costruttore</a></code> è un metodo speciale usato per creare ed inizializzare un oggetto. Ci può essere un solo metodo con il nome "constructor" in una classe. Se la classe contiene più di un'occorrenza del costruttore verrà sollevato un {{jsxref("SyntaxError")}}.</p>
+
+<p>Un costruttore può usare la parola chiave <code>super</code> per richiamare il costruttore della classe padre.</p>
+
+<h3 id="Prototipi">Prototipi</h3>
+
+<p>Guarda anche <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+
+  get area() {
+    return this.calcArea()
+  }
+
+  calcArea() {
+    return this.height * this.width;
+  }
+}</pre>
+
+<h3 id="Metodi_statici">Metodi statici</h3>
+
+<p>La parola chiave <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> definisce un metodo statico. I metodi statici sono chiamati senza istanziare la loro classe e <strong>non</strong> possono essere chiamati su una classe istanziata. Vengono usati per creare funzioni di utilità.</p>
+
+<pre class="brush: js">class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static distance(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.sqrt(dx*dx + dy*dy);
+    }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2));</pre>
+
+<h3 id="Inscatolamento_con_metodi_prototipo_e_statico">Inscatolamento con metodi prototipo e statico</h3>
+
+<p>Quando un metodo statico o prototipo è chiamato senza un oggetto valutato "this", allora il valore di "this" sarà <code><strong>undefined</strong></code> all'interno della funzione chiamata. L'autoinscatolamento non succederà. Il comportamento sarà lo stesso perfino se scriviamo il codice in modalità non-strict perché tutte le funzioni, metodi, costruttori, getter o setter sono eseguiti in modo strict. Così se non specifichiamo il valore <em>this</em>, allora sarà <code><strong>undefined.</strong></code></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">class</span> <span class="class-name token">Animal</span> <span class="punctuation token">{</span>
+  <span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">static</span> <span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">let</span> obj <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Animal</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+obj<span class="punctuation token">.</span><span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Animal {}</span>
+<span class="keyword token">let</span> speak <span class="operator token">=</span> obj<span class="punctuation token">.</span>speak<span class="punctuation token">;</span>
+<span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined</span>
+
+Animal<span class="punctuation token">.</span><span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="comment token">// class Animal</span>
+<span class="keyword token">let</span> eat <span class="operator token">=</span> Animal<span class="punctuation token">.</span>eat<span class="punctuation token">;</span>
+<span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined</span></code></pre>
+
+<p>Se scriviamo il codice soprascritto usando le tradizionali classi basate su funzioni, allora l'autoinscatolamento accadrà basato sul valore "this" peril quale la funzione è stata chiamata.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Animal</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">}</span>
+
+Animal<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>speak <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+Animal<span class="punctuation token">.</span>eat <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">let</span> obj <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Animal</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">let</span> speak <span class="operator token">=</span> obj<span class="punctuation token">.</span>speak<span class="punctuation token">;</span>
+<span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// global object</span>
+
+<span class="keyword token">let</span> eat <span class="operator token">=</span> Animal<span class="punctuation token">.</span>eat<span class="punctuation token">;</span>
+<span class="function token">eat</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// global object</span></code></pre>
+
+<h2 id="Sottoclassi_con_extends">Sottoclassi con <code>extends</code></h2>
+
+<p>La keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> viene usata<code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends"> </a></code>nelle <em>class declarations</em> o <em>class expressions </em>per creare una classe figlia di un'altra classe.</p>
+
+<pre class="brush: js">class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+</pre>
+
+<p>Si possono anche estendere le classi tradizionali basate su funzioni:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> Animal <span class="punctuation token">(</span>name<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">=</span> name<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+Animal<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>speak <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">' makes a noise.'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">class</span> <span class="class-name token">Dog</span> <span class="keyword token">extends</span> <span class="class-name token">Animal</span> <span class="punctuation token">{</span>
+  <span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">super</span><span class="punctuation token">.</span><span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">' barks.'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> d <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Dog</span><span class="punctuation token">(</span><span class="string token">'Mitzie'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+d<span class="punctuation token">.</span><span class="function token">speak</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Sub_classing_built-in_objects">Sub classing built-in objects</h2>
+
+<p>TBD</p>
+
+<h2 id="Chiamare_una_superclasse_con_super">Chiamare una superclasse con <code>super</code></h2>
+
+<p>La keyword <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> è usata per chiamare le funzioni di un oggetto padre.</p>
+
+<pre class="brush: js">class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(this.name + ' roars.');
+  }
+}
+</pre>
+
+<h2 id="ES5_inheritance_syntax_and_ES6_classes_syntax_compared">ES5 inheritance syntax and ES6 classes syntax compared</h2>
+
+<p>TBD</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>TBD</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibili">Browser compatibili</h2>
+
+
+
+<p>{{Compat("javascript.classes")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Fun</a>zioni</li>
+ <li>{{jsxref("Statements/class", "class declaration")}}</li>
+ <li>{{jsxref("Operators/class", "class expression")}}</li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li>
+</ul>
diff --git a/files/it/web/javascript/reference/classes/static/index.html b/files/it/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..7158316654
--- /dev/null
+++ b/files/it/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,70 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>La parola <strong>static</strong> è utilizzata per  definire un metodo statico di una classe.</p>
+
+<h2 id="Sintassi">Sintassi</h2>
+
+<pre class="syntaxbox notranslate">static nomeMetodo() { ... }</pre>
+
+<h2 id="Descrizione">Descrizione</h2>
+
+<p>La parola <strong>static</strong> definisce metodi statici per una classe. I metodi statici non sono invocati  sull'istanza della classe, ma sono invece invocati sulla classe stessa. Questi sono spesso metodi di supporto, as esempio funzioni per creare o clonare oggetti.</p>
+
+<h2 id="Esempi">Esempi</h2>
+
+<p>Il seguente esempio mostra diversi aspetti interessanti. Mostra come un metodo statico è implementato in una classe, e come una classe con metodi statici può essere estesa da altre classi. Infine da una dimostrazione di come un metodo statico può essere o non può essere invocato.</p>
+
+<pre class="brush: js notranslate">class Triplica {
+  static triplica(n) {
+    n = n | 1;
+    return n * 3;
+  }
+}
+
+class TriplicaAncora extends Triplica {
+  static triplica(n) {
+    return super.triplica(n) * super.triplica(n);
+  }
+}
+
+console.log(Triplica.triplica()); // 3
+console.log(Triplica.triplica(6));  // 18
+console.log(TriplicaAncora.triplica(3)); // 81
+var tp = new Triplica();
+console.log(tp.triplica()); //Logga 'tp.triplica is not a function' perché la classe è instanziata</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibili">Browser compatibili</h2>
+
+
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>