Esercitazione JS

JS CASA JS Introduzione JS Dove si va Uscita JS Dichiarazioni JS Sintassi JS Commenti JS Variabili JS JS Let JS Cost Operatori JS JS aritmetica Assegnazione JS Tipi di dati JS Funzioni JS Oggetti JS Eventi JS Corde JS Metodi di stringa JS Ricerca di stringhe JS Modelli di stringhe JS Numeri JS Metodi numerici JS Matrici JS Metodi array JS Ordinamento matrice JS Iterazione dell'array JS Cost. array JS Date JS Formati data JS Metodi di acquisizione della data JS Metodi di impostazione della data JS JS matematica JS Casuale JS booleani Confronti JS Condizioni JS JS Switch Ciclo JS per JS Loop per In Ciclo JS per di JS Loop mentre JS Break Iterabili JS Insiemi JS Mappe JS Tipo JS Conversione del tipo JS JS bit a bit JS RegExp Errori JS Ambito JS JS sollevamento Modalità rigorosa JS JS questa parola chiave Funzione freccia JS Classi JS JS JSON Debug JS Guida allo stile JS Migliori Pratiche JS Errori di JS Prestazioni JS Parole riservate JS

Versioni JS

Versioni JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Storia di JS

Oggetti JS

Definizioni di oggetti Proprietà dell'oggetto Metodi dell'oggetto Visualizzazione di oggetti Accessori per oggetti Costruttori di oggetti Prototipi di oggetti Iterabili di oggetti Insiemi di oggetti Mappe degli oggetti Riferimento all'oggetto

Funzioni JS

Definizioni delle funzioni Parametri di funzione Invocazione di funzione Chiamata di funzione Funzione Applica Chiusure di funzioni

Classi JS

Introduzione alla classe Eredità di classe Classe statica

JS Async

Richiamate JS JS asincrono JS Promesse JS Async/Attendere

JS HTML DOM

DOM Introduzione Metodi DOM Documento DOM Elementi DOM DOM HTML Moduli DOM DOM CSS Animazioni DOM Eventi DOM Ascoltatore di eventi DOM Navigazione DOM Nodi DOM Collezioni DOM Elenchi di nodi DOM

Distinta base del browser JS

Finestra JS Schermo JS Posizione JS Storia di JS Navigatore JS Avviso popup JS JS tempismo Biscotti JS

API Web JS

Introduzione all'API Web API dei moduli Web API Cronologia web API di archiviazione Web API Web Worker API di recupero Web API di geolocalizzazione web

JS AJAX

Introduzione all'Ajax AJAX XMLHttp Richiesta AJAX Risposta dell'AJAX File XML AJAX AJAX PHP AJAX ASP Database AJAX Applicazioni AJAX Esempi AJAX

JS JSON

Introduzione JSON Sintassi JSON JSON contro XML Tipi di dati JSON Analisi JSON JSON Stringify Oggetti JSON Matrici JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Selettori jQuery jQuery HTML jQuery CSS jQuery DOM

Grafica JS

Grafica JS Tela JS JS Plotly JS Chart.js Grafico di Google JS JS D3.js

Esempi JS

Esempi JS JS HTML DOM Input HTML JS Oggetti HTML JS Eventi HTML JS Browser JS Editore JS Esercizi JS Quiz J.S Certificato JS

Riferimenti JS

Oggetti JavaScript Oggetti HTML DOM


JavaScript For Loop


I loop possono eseguire un blocco di codice un numero di volte.


Cicli JavaScript

I loop sono utili, se si desidera eseguire lo stesso codice più e più volte, ogni volta con un valore diverso.

Spesso questo è il caso quando si lavora con gli array:

Invece di scrivere:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

Tu puoi scrivere:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Diversi tipi di loop

JavaScript supporta diversi tipi di loop:

  • for - scorre un blocco di codice un certo numero di volte
  • for/in - scorre le proprietà di un oggetto
  • for/of - scorre i valori di un oggetto iterabile
  • while - scorre un blocco di codice mentre una condizione specificata è vera
  • do/while - scorre anche un blocco di codice mentre una condizione specificata è vera

Il ciclo For

Il forciclo ha la seguente sintassi:

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

L' istruzione 1 viene eseguita (una volta) prima dell'esecuzione del blocco di codice.

L' istruzione 2 definisce la condizione per l'esecuzione del blocco di codice.

L' istruzione 3 viene eseguita (ogni volta) dopo l'esecuzione del blocco di codice.

Esempio

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Dall'esempio sopra, puoi leggere:

L'istruzione 1 imposta una variabile prima dell'inizio del ciclo (sia i = 0).

L'istruzione 2 definisce la condizione per l'esecuzione del ciclo (i deve essere inferiore a 5).

L'istruzione 3 aumenta un valore (i++) ogni volta che il blocco di codice nel ciclo è stato eseguito.



Dichiarazione 1

Normalmente utilizzerai l'istruzione 1 per inizializzare la variabile utilizzata nel ciclo (let i = 0).

Questo non è sempre il caso, JavaScript non si preoccupa. L'affermazione 1 è facoltativa.

È possibile avviare molti valori nell'istruzione 1 (separati da virgola):

Esempio

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

E puoi omettere l'istruzione 1 (come quando i tuoi valori sono impostati prima dell'inizio del ciclo):

Esempio

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Dichiarazione 2

Spesso l'istruzione 2 viene utilizzata per valutare la condizione della variabile iniziale.

Questo non è sempre il caso, JavaScript non si preoccupa. Anche l'affermazione 2 è facoltativa.

Se l'istruzione 2 restituisce true, il ciclo ricomincia da capo, se restituisce false, il ciclo termina.

Se ometti l'istruzione 2, devi fornire un'interruzione all'interno del ciclo. Altrimenti il ​​ciclo non finirà mai. Questo andrà in crash il tuo browser. Leggi le interruzioni in un capitolo successivo di questo tutorial.


Dichiarazione 3

Spesso l'istruzione 3 incrementa il valore della variabile iniziale.

Questo non è sempre il caso, JavaScript non si preoccupa e l'istruzione 3 è facoltativa.

L'istruzione 3 può fare qualsiasi cosa come incremento negativo (i--), incremento positivo (i = i + 15) o qualsiasi altra cosa.

L'istruzione 3 può anche essere omessa (come quando incrementi i tuoi valori all'interno del ciclo):

Esempio

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

Ambito di applicazione

Usando varin un ciclo:

Esempio

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

Usando letin un ciclo:

Esempio

let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5

Nel primo esempio, utilizzando var, la variabile dichiarata nel ciclo ridichiara la variabile al di fuori del ciclo.

Nel secondo esempio, utilizzando let, la variabile dichiarata nel ciclo non dichiara nuovamente la variabile al di fuori del ciclo.

Quando letviene utilizzata per dichiarare la variabile i in un ciclo, la variabile i sarà visibile solo all'interno del ciclo.


Cicli For/Off e For/In

Il for/inciclo e il for/ofciclo sono spiegati nel capitolo successivo.


Mentre loop

Il whileciclo e il do/whilesono spiegati nei capitoli successivi.


Mettiti alla prova con gli esercizi

Esercizio:

Crea un ciclo che va da 0 a 9.

let i;
 ( = ;  < ; ) {
  console.log(i);
}