initial commit

1 files changed, 340 insertions, 0 deletions

diff --git a/files/it/web/javascript/guida/loops_and_iteration/index.html b/files/it/web/javascript/guida/loops_and_iteration/index.html
new file mode 100644
index 0000000000..c677151181
--- /dev/null
+++ b/files/it/web/javascript/guida/loops_and_iteration/index.html
@@ -0,0 +1,340 @@
+---
+title: Cicli e iterazioni
+slug: Web/JavaScript/Guida/Loops_and_iteration
+tags:
+  - Guide
+  - JavaScript
+  - Loop
+  - Sintassi
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">I cicli offrono un modo semplice e rapido per fare cose ripetutamente. Questo capitolo della <a href="/en-US/docs/Web/JavaScript/Guide">guida al JavaScript</a> introduce i diversi metodi di iterazione disponibili in JavaScript.</p>
+
+<p>Si può pensare al loop come ad una versione computerizzata di un gioco dove si dice a qualcuno di andare X passi in una direzione e Y passi in un'atra; per esempio "vai 5 passi a est" può essere espresso in questo modo con un loop:</p>
+
+<pre class="brush: js notranslate">var passi;
+for (passi = 0; passi &lt; 5; passi++) {
+  // Viene eseguito 5 volte, con un valore di passi che va da 0 a 4.
+  console.log('Fai un passo verso est');
+}
+</pre>
+
+<p>Ci sono differenti tipi di ciclo, ma sono essenzialmente tutti la stessa cosa: ripetono un'azione o un insieme di azioni un certo numero di volte (è possibile che questo numero sia anche 0).</p>
+
+<p>I diversi meccanismi di ciclo offrono differenti modi di determinare l'inizio e la fine del ciclo. Ci sono casi che si prestano più ad un tipo di ciclo rispetto ad altri.</p>
+
+<p>Le istruzioni per i loop foriti in JavaScript sono:</p>
+
+<ul>
+ <li>{{anch("ciclo for")}}</li>
+ <li>{{anch("ciclo do...while")}}</li>
+ <li>{{anch("ciclo while")}}</li>
+ <li>{{anch("labeled statement")}}</li>
+ <li>{{anch("break statement")}}</li>
+ <li>{{anch("continue statement")}}</li>
+ <li>{{anch("ciclo for...in")}}</li>
+ <li>{{anch("ciclo for...of")}}</li>
+</ul>
+
+<h2 id="Istruzione_for">Istruzione <code>for</code></h2>
+
+<p>Il {{jsxref("statements/for","ciclo for")}} continua finché la condizione valutata non è falsa. Il fir loop JavaScript è simile a quello del Java e de C. L'istruzione <code>for</code> è definita come segue:</p>
+
+<pre class="syntaxbox notranslate">for ([espressioneIniziale]; [condizione]; [incremento])
+  istruzione
+</pre>
+
+<p>Quando viene eseguito un ciclo <code>for</code>, questo è ciò che accade:</p>
+
+<ol>
+ <li><code>espressioneIniziale</code>, se esiste, viene eseguita. L'espressione di solito inizializza uno o più indici, ma la sintassi permette di scrivere espressioni con diversi gradi di compessità. Questa espressione può anche dichiarare delle variabili.</li>
+ <li>La <code>condizione</code> viene verificata. Se il suo valore è true, l'espressione <code>istruzione</code> viene eseguita. Se invece <code>condizione</code> è false, il ciclo finisce. Se <code>condizione</code> è omessa, l'espressione si assume sia true.</li>
+ <li><code>istruzione</code> viene esguita. Per eseguire diverse istruzioni, è necessario usare il blocco (<code>{ ... }</code>) per raggrupparle.</li>
+ <li>Viene incrementata la l'espressione <code>incremento</code>, se esiste, eseguita, e il ciclo <code>for</code> va al passo successivo.</li>
+</ol>
+
+<h3 id="Esempio"><strong>Esempio</strong></h3>
+
+<p>Il seguente esempio contiene un ciclo <code>for</code> che conta il numero di opzioni selezionate in una lista a scorrimento (a {{HTMLElement("select")}} che permette selezioni multiple). L'istruzione <code>for</code> dichiara una variabile <code>i</code> e la inizializza a zero. Controlla che <code>i</code> sia minore del numero di opzioni dell'elemento <code>&lt;select&gt;</code> , esegue l'istruzione <code>if</code> e incrementa <code>i</code> di uno alla fine di ogni ciclo.</p>
+
+<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="Quanti sono selezionati?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="Istruzione_do...while">Istruzione<code> do...while</code></h2>
+
+<p>Il ciclo {{jsxref("statements/do...while", "do...while")}} si ripete finché la <code>condizione</code> non è falsa. Il <code>do...while</code> è viene definito come segue:</p>
+
+<pre class="syntaxbox notranslate">do
+  istruzione
+while (condizione);
+</pre>
+
+<p>l'<code>istruzione</code> viene eseguita una volta prima che la <code>condizione</code> venga controllata. Per eseguire più istruzioni, è necessario usare il blocco (<code>{ ... }</code>) . Se la <code>condizione</code> è vera l'<code>istruzione</code> viene eseguita nuovamente. Alla fine di ogni esecuzione di <code>istruzione</code>, <code>condizione</code> viene controllata. Quando <code>condizione</code> è falsa l'esecuzione del ciclo <code>do..while</code> termina.</p>
+
+<h3 id="Esempio_2"><strong>Esempio</strong></h3>
+
+<p>Nel seguente esempio il ciclo do..while itera almeno una volta e continua finché il valore di <code>i</code> è minore di 5.</p>
+
+<pre class="brush: js notranslate">var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="Istruzione_while">Istruzione <code>while</code></h2>
+
+<p><code><font face="Open Sans, arial, sans-serif">Il ciclo</font> </code>{{jsxref("statements/while","while")}} esegue un'<code>istruzione</code> fino a quando una <code>condizione</code> è true. Ecco un esempio si un ciclo <code>while</code>:</p>
+
+<pre class="syntaxbox notranslate">while (condizione)
+  istruzione   //...statement
+</pre>
+
+<p>Se <code>condizione</code> diventa false, <code>istruzione</code> non viene eseguita a si passa ad eseguire i comandi successivi.</p>
+
+<p>Durante il ciclo c<code>ondizione</code> viene testata prima di eseguire <code>istruzione</code>. Se c<code>ondizione </code>è true, <code>istruzione</code> viene esguita e c<code>ondizione</code> viene verificata nuovamente. Se <code>condizione</code> è false il ciclo di ferma e viene eseguito il codice successivo al ciclo <code>while</code>.</p>
+
+<p>Per eseguire istruzioni multiple, è necessario usare il blocco ({ ... }) così da raggruppare le istruzioni.</p>
+
+<h3 id="Esempio_1"><strong>Esempio 1</strong></h3>
+
+<p>Il seguente esempio di ciclo <code>while</code> si ripete fino a quando <code>n</code> è minore di tre:</p>
+
+<pre class="brush: js notranslate">var n = 0;
+var x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>Ad ogni iterazione, il ciclo incrementa n e aggiunge quel valore a x. Pertanto,<code>x</code> e <code>n</code> assumono i seguenti valori:</p>
+
+<ul>
+ <li>Dopo il primo passaggio: <code>n</code> = 1 and <code>x</code> = 1</li>
+ <li>Dopo il secondo passaggio: <code>n</code> = 2 and <code>x</code> = 3</li>
+ <li>Dopo il terzo passaggio: <code>n</code> = 3 and <code>x</code> = 6</li>
+</ul>
+
+<p>Dopo aver completato il terzo passaggio, la condizione <code>n &lt; 3</code> non è più vera, quindi il ciclo termina.</p>
+
+<h3 id="Esempio_2_2"><strong>Esempio 2</strong></h3>
+
+<p>Evita loop infiniti. Assicurati che la condizione in un loop alla fine diventi falsa; altrimenti, il ciclo non terminerà mai. Le istruzioni nel seguente ciclo <code>while</code> vengono eseguite per sempre perché la condizione non diventa mai falsa:</p>
+
+<div class="blockIndicator warning">
+<pre class="brush: js notranslate">//I loop infiniti non vanno affatto bene
+while (true) {
+  console.log("Buongiorno, Mondo");
+}</pre>
+</div>
+
+<h2 id="Istruzione_etichettata">Istruzione "etichettata"</h2>
+
+<p>Un {{jsxref("statements/label","label")}} fornisce un'istruzione con un identificatore che ti consente di fare riferimento ad esso altrove nel tuo programma. Ad esempio, è possibile utilizzare un'etichetta per identificare un ciclo e quindi utilizzare le istruzioni <code>break</code> o <code>continue</code> per indicare se un programma deve interrompere il loop o continuare la sua esecuzione.</p>
+
+<p>La sintassi dell'istruzione etichettata è simile alla seguente:</p>
+
+<pre class="syntaxbox notranslate">label :
+   istruzione // statement
+</pre>
+
+<p>Il valore dell'etichetta <code><em>label </em></code>può essere qualsiasi identificatore JavaScript che non sia una parola riservata. L'affermazione che ti identifichi con un'etichetta <code><em>statement</em></code> può essere una qualsiasi affermazione.</p>
+
+<h3 id="Esempio_3"><strong>Esempio</strong></h3>
+
+<p>In questo esempio, la label <code>markLoop</code> identifica un ciclo <code>while</code>.</p>
+
+<pre class="brush: js notranslate">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="Istruzione_break">Istruzione <code>break</code></h2>
+
+<p>Utilizzare l'istruzione {{jsxref("statements/break","break")}} per terminare un ciclo, uno <code>switch</code> o in congiunzione con un'istruzione etichettata.</p>
+
+<ul>
+ <li>Quando si utilizza <code>break</code> senza un'etichetta, termina l'enclosure più interno <code>while</code>, <code>do-while</code>, <code>for</code>, o <code>switch</code> immediatamente e trasferisce il controllo alla seguente istruzione.</li>
+ <li>Quando usi la <code>break</code> con un'etichetta, termina l'istruzione etichettata specificata.</li>
+</ul>
+
+<p>La sintassi dell'istruzione <code>break</code> è simile a questa:</p>
+
+<pre class="syntaxbox notranslate">break [<em>label</em>];
+</pre>
+
+<p>La prima forma della sintassi termina il ciclo <code>switch</code> di chiusura più interno; la seconda forma della sintassi termina l'istruzione dell'etichettata specificata.</p>
+
+<h3 id="Esempio_1_2"><strong>Esempio</strong> <strong>1</strong></h3>
+
+<p>L'esempio seguente esegue iterazioni attraverso gli elementi di un array (una matrice) fino a quando non trova l'indice di un elemento il cui valore è <code>theValue</code>:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="Esempio_2_Breaking_to_a_label_-_Interruzione_su_unetichetta"><strong>Esempio 2: </strong>Breaking to a label - Interruzione su un'etichetta</h3>
+
+<pre class="brush: js notranslate">var x = 0;
+var z = 0;
+labelCancelLoops: while (true) {
+  console.log("Outer loops: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Inner loops: " + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}</pre>
+
+<h2 id="Istruzione_continue">Istruzione <code>continue</code></h2>
+
+<p>The {{jsxref("statements/continue","continue")}} statement can be used to restart a <code>while</code>, <code>do-while</code>, <code>for</code>, or <code>label</code> statement.</p>
+
+<ul>
+ <li>Quando usi <code>continue</code> senza un'etichetta, termina l'iterazione corrente dell'istruzione racchiudente, mentre <code>while</code>, <code>do-while</code>, o <code>for</code> continua l'esecuzione del ciclo con l'iterazione successiva. In contrasto con l'istruzione <code>break</code>, <code>continue</code> non termina interamente l'esecuzione del ciclo. In un ciclo <code>while</code>, torna alla condizione. In un ciclo <code>for</code>, salta all'espressione di incremento <code>increment-expression</code>.</li>
+ <li>Quando si utilizza <code>continue</code> con un'etichetta, si applica all'istruzione looping identificata con tale etichetta.</li>
+</ul>
+
+<p>La sintassi dell'istruzione <code>continue</code> ha il seguente aspetto:</p>
+
+<pre class="syntaxbox notranslate"><code>continue</code> [<em>label</em>];
+</pre>
+
+<h3 id="Esempio_1_3"><strong>Esempio 1</strong></h3>
+
+<p>L'esempio seguente mostra un ciclo <code>while</code> con un'istruzione <code>continue</code> che viene eseguita quando il valore di <code>i</code> è tre. Quindi, <code>n</code> assume i valori uno, tre, sette e dodici.</p>
+
+<pre class="brush: js notranslate">var i = 0;
+var n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}</pre>
+
+<h3 id="Esempio_2_3"><strong>Esempio 2</strong></h3>
+
+<p>Una dichiarazione etichettata <em><code>checkiandj</code> </em>contiene una dichiarazione etichettata <em><code>checkj</code></em>. Se si incontra <code>continue</code> il programma termina l'iterazione corrente di <em><code>checkj</code></em> e inizia la successiva iterazione. Ogni volta che si incontra <code>continue</code>, <em><code>checkj</code></em> viene reiterato finché la condizione non restituisce <code>false</code>. Quando viene restituito <code>false</code>, il resto dell'istruzione <em><code>checkiandj</code></em> è completato e <em><code>checkiandj</code></em> reiterate fino a quando la condizione non restituisce <code>false</code>. Quando viene restituito <code>false</code>, il programma continua con la seguente istruzione <em><code>checkiandj</code></em>.</p>
+
+<p>Se <code>continue</code> ha un'etichetta di <em><code>checkiandj</code></em>, il programma continuerà nella parte superiore del <em><code>checkiandj</code></em> istruzione.</p>
+
+<pre class="brush: js notranslate">var i = 0;
+var j = 10;
+checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + ' is odd.');
+      }
+      console.log('i = ' + i);
+      console.log('j = ' + j);
+}</pre>
+
+<h2 id="Istruzione_for...in">Istruzione <code>for...in</code></h2>
+
+<p>L'istruzione {{jsxref("statements/for...in","for...in")}} itera una variabile specificata su tutte le proprietà enumerabili di un oggetto. Per ogni proprietà distinta, JavaScript esegue le istruzioni specificate. L'istruzione <code>for...in</code> ha il seguente aspetto:</p>
+
+<pre class="syntaxbox notranslate">for (variabile in oggetto) {
+  istruzione
+}
+// for (variable in object) {
+//  statements
+// }
+</pre>
+
+<h3 id="Esempio_4"><strong>Esempio</strong></h3>
+
+<p>La seguente funzione prende come argomento un oggetto e il nome dell'oggetto. Quindi itera su tutte le proprietà dell'oggetto e restituisce una stringa che elenca i nomi delle proprietà e i loro valori.</p>
+
+<pre class="brush: js notranslate">function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
+  }
+  result += "&lt;hr&gt;";
+  return result;
+}
+</pre>
+
+<p>Per un oggetto <code>car</code> con proprietà <code>make</code> e <code>model</code>, <code>result</code> sarebbe:</p>
+
+<pre class="brush: js notranslate">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="Arrays_Matrici"><strong>Arrays / Matrici</strong></h3>
+
+<p>Anche se può essere allettante usarla come un modo per iterare sugli elementi {{jsxref("Array")}} , l'istruzione the <strong>for...in</strong> restituirà il nome delle proprietà definite dall'utente oltre agli indici numerici. Quindi è meglio usare un ciclo tradizionale {{jsxref("statements/for","for")}} con un indice numerico quando si itera su array, perché l'istruzione <strong>for...in</strong> itera sulle proprietà definite dall'utente oltre agli elementi dell'array, se si modifica l'oggetto Array, (come ad esempio l'aggiunta di proprietà o metodi personalizzati).</p>
+
+<h2 id="Istruzione_for...of">Istruzione <code>for...of</code></h2>
+
+<p>L'istruzione {{jsxref("statements/for...of","for...of")}} crea un ciclo che itera su <a href="/en-US/docs/Web/JavaScript/Guide/iterable">oggetti iterabili</a> (inclusi oggetti di tipo {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} e così via), richiamando un aggancio di iterazione personalizzato con istruzioni da eseguire per il valore di ogni proprietà distinta.</p>
+
+<pre class="syntaxbox notranslate">for (<em>variabile</em> di <em>oggetto</em>) {
+  <em>istruzione
+</em>}</pre>
+
+<p>Il seguente esempio mostra la differenza tra un ciclo <code>for...of</code> e un {{jsxref("statements/for...in","for...in")}} ciclo continuo. Mentre <code>for...in</code> itera sopra i nomi delle proprietà, <code>for...of</code> itera sui valori delle proprietà:</p>
+
+<pre class="brush:js notranslate">let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs "3", "5", "7"
+}</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>