In questa lezione svolgeremo altri semplici esercizi con il ciclo for in JavaScript.
Esercizi for JavaScript – primo esercizio
Esercizio: Stampare i primi N numeri dispari successivi ad un numero A preso in input.
Innanzitutto il programma chiede all’utente di inserire due valori: il numero di partenza numero e la quantità di numeri dispari successivi che desidera visualizzare quantitaNumeriDispari. Successivamente si verifica se il numero di partenza numeroA è pari controllando se il resto della sua divisione per 2 è uguale a 0 (numeroA % 2 === 0). Se numeroA è pari, viene decrementato di 1 in modo che diventi dispari.
Dopo utilizziamo un ciclo for per iterare per il numero di volte specificato dalla variabile quantita. Ad ogni iterazione, incrementiamo il valore di numeroDispariSuccessivo di 2, poiché i numeri dispari successivi sono separati da 2. Il valore aggiornato di numeroDispariSuccessivo viene quindi stampato a console.
Ecco di seguito una possibile soluzione dell’algoritmo proposto:
// Stampare i primi N numeri dispari successivi ad un numero A preso in input.
const numero = parseInt(prompt('Inserisci il valore di A: '));
const quantita = parseInt(prompt('Quanti numeri dispari successivi ad A vuoi visualizzare? '));
let numeroDispariSuccessivo = numero % 2 === 0 ? numero + 1 : numero;
for (let i = 0; i < quantita; i++) {
numeroDispariSuccessivo += 2;
// In forma contratta: numeroDispariSuccessivo += 2;
console.log(numeroDispariSuccessivo);
}
Esercizio: Chiedere in input 10 numeri e sommare solo quelli positivi.
Inizialmente il programma dichiara una variabile somma e le assegnando il valore iniziale di 0. Questa variabile conterrà la somma dei numeri positivi inseriti dall’utente. Dunque utilizzando un ciclo for, il programma richiede all’utente di inserire un numero per 10 volte. Ad ogni iterazione, il numero inserito viene memorizzato nella variabile numero. Il programma dunque verifica se il numero inserito è maggiore di 0 utilizzando un’istruzione condizionale if. Se il numero è positivo, viene aggiunto alla variabile somma utilizzando l’operatore di assegnamento composto +=.
Infine, il programma stampa la somma dei numeri positivi inseriti utilizzando console.log(). Questo fornisce all’utente il risultato finale.
Ecco dunque una possibile soluzione dell’esercizio con il for in JavaScript:
// Chiedere in input 10 numeri e sommare solo quelli positivi.
let somma = 0;
for (let i = 0; i < 10; i++) {
const numero = parseInt(prompt('Inserisci un numero: '));
if (numero > 0) {
somma += numero;
}
}
console.log('La somma dei numeri positivi inseriti è:', somma);
Conclusione
Questi sono solo alcuni semplici esercizi con il for in JavaScript, nel corso del nostro tutorial studieremo tanti altri esempi.
Il ciclo for in è utilizzato per elencare tutte le proprietà di un determinato oggetto in JavaScript.
Può essere utilizzato sugli oggetti ma anche sugli array. Utilizzando questo ciclo non serve precisare la lunghezza dell’array come abbiamo fatto utilizzando invece il ciclo for.
Attenzione: non utilizzare il ciclo for in sugli array quando l’ordine dell’indice è importante, in tal caso occorre infatti preferire il semplice ciclo for. Dunque, possiamo dire che il ciclo for in è più utilizzato con gli oggetti in JavaScript.
La sintassi è la seguente:
for (var in object)
istruzioni
Dove in è una parola chiave che serve a testare se la variabile specificata è presente nell’oggetto. Quindi l’espressione (var in object) restituisce un valore booleano. Finché questo valore sarà vero il ciclo sarà eseguito.
Facciamo alcuni esempi per comprenderne meglio il funzionamento:
Esempio 1 – ciclo for in
In questo primo esempio costruiamo un semplice oggetto utente con 3 proprietà.
utente = {
nome: 'Coding',
cognome: 'Creativo',
telefono: '333'
}
for (var k in utente){
console.log(k);
}
Nel nostro esempio k assumerà il valore di tutte le proprietà presenti nel nostro oggetto. Dunque nel console.log si visualizzerà: nome, cognome e telefono.
Al posto di k possiamo indicare qualsiasi nome di variabile. Il nome è puramente indicativo. Attenzione anche al fatto che va utilizzato var.
Il ciclo for viene eseguito dunque finché non trova proprietà all’interno dell’oggetto.
Se vogliamo visualizzare anche i valori delle proprietà, allora occorre indicare ciascun elemento.
In questo caso utilizziamo la notazione con le parentesi quadre, questo perché se scrivessi utente.k, k non è riconosciuta come proprietà dell’oggetto utente, quindi darebbe errore. Dunque l’unico modo per poter accedere al valore della chiave in un oggetto è la notazione con le parentesi quadre.
utente = {
nome: 'Coding',
cognome: 'Creativo',
telefono: '333'
}
for (var k in utente){
console.log(k + 'valore ' + utente[k]);
}
Nella console in questo modo visualizzerò: nome valore Coding, cognome valore Creativo e telefono valore 333.
Nel caso in cui ci troviamo ad utilizzare degli oggetti annidati, possiamo annidare il ciclo for all’interno di un altro, come da esempio sotto:
utente = {
nome: 'Coding',
cognome: 'Creativo',
telefono: '333',
indirizzo: {
via: 'dei tulipani',
citta: 'Modica'
}
}
for (var k in utente){
if (k == 'indirizzo'){
for (var j in utente.indirizzo){
console.log(j + ': ' + utente.indirizzo[j]);
}
} else {
console.log(k + ': ' + utente[k]);
}
}
Dunque per visualizzare gli elementi all’interno della proprietà indirizzo, che rappresenta un oggetto, utilizzo un altro ciclo for.
Notiamo che possiamo scrivere anche in questo modo:
for (var k in utente){
if (k == 'indirizzo'){
for (var j in utente[k]){
console.log(j + ': ' + utente[k][j]);
}
} else {
console.log(k + ': ' + utente[k]);
}
}
In questa lezione abbiamo introdotto questo nuovo ciclo iterativo, nelle prossime lezioni proporrò altri esempi.
In questa lezione affronteremo gli array di oggetti.
Abbiamo già visto nelle lezioni precedenti come un array può contenere numeri e stringhe.
Esercizio 1 – creare un array di oggetti
Progettare l’array canzoni che contiene degli oggetti: canzone1, canzone2, ecc… Ogni oggetto contiene delle proprietà, ad esempio: titolo, nomeCantantee anno. Inserire poi alcuni dati, direttamente da codice, a piacere e visualizzarli (anche semplicemente ocn il console.log per il momento). Dopo fare inserire all’utente delle nuove canzoni attraverso il prompt dei comandi con tutte le proprietà indicate. Visualizzare infine l’array cantanti così costruito.
Quindi creiamo un array con due oggetti: canzone1 e canzone2 e specifichiamo le proprietà per ciascun oggetto. Dopo con dei prompt facciamo inserire i dati all’utente. Tramite il metodo push inseriamo l’elemento in canzoni.
Infine visualizziamo l’array con i 3 elementi. Possiamo anche tralasciare i nomi canzone1, canzone2 ecc.. in quanto in un array gli elementi sono individuati tramite l’indice che, ricordiamo, parte da 0. In questo esempio scegliamo di lasciare i nomi.
Ecco di seguito il codice completo:
var canzoni = [
canzone1 = {
titolo: 'Stairway to Heaven',
nomeCantante: 'Led Zeppelin',
anno: '1971'
},
canzone2 = {
titolo: 'Wish you were here',
nomeCantante: 'Pink Floyd',
anno: '1975'
}
];
console.log(canzoni);
canzone3 = {
titolo : prompt('Inserisci il titolo'),
nomeCantante: prompt('Inserisci il nome del cantante o gruppo'),
anno: prompt('Inserisci l\'anno'),
};
canzoni.push(canzone3);
console.log(canzoni);
Possiamo anche inserire gli elementi in questo modo.
var canzoni = [
canzone1 = {
titolo: 'Stairway to Heaven',
nomeCantante: 'Led Zeppelin',
anno: '1971'
},
canzone2 = {
titolo: 'Wish you were here',
nomeCantante: 'Pink Floyd',
anno: '1975'
}
];
console.log(canzoni);
var t = prompt('Inserisci il titolo');
var n = prompt('Inserisci il nome del cantante o gruppo');
var a = prompt('Inserisci l\'anno'),
canzone3 = {
titolo : t,
nomeCantante: n,
anno: a,
};
canzoni.push(canzone3);
console.log(canzoni);
Esercizio 2 – creare un array di oggetti
Progettare un array rubrica che contiene degli oggetti: utente1, utente2, ecc… Dopo, per ogni utente, specificare altre proprietà: nome, cognome, telefono e indirizzo. Dove indirizzo è a sua volta un altro oggetto contenente altre proprietà. Quindi popolare la rubrica con dei dati a piacere. Dopo eliminare un elemento e visualizzare nuovamente la rubrica così ottenuta.
Questo esercizio è molto simile al precedente, occorre solo prestare attenzione perché ci troviamo di fronte ad un oggetto nidificato.
Dunque ci comportiamo come nell’esempio sopra, ma per quanto riguarda l’inserimento, potremmo lavorare in questo modo:
var rubrica = [
utente1 = {
nome: 'Coding',
cognome: 'Creativo',
telefono: '333',
indirizzo: {
via: 'delle rose',
citta: 'Modica'
}
},
utente2 = {
nome: 'Creativo',
cognome: 'Coding',
telefono: '124',
indirizzo: {
via: 'delle rose',
citta: 'Modica'
}
}
];
var utente3 = {
nome : prompt('Inserisci il nome'),
cognome: prompt('Inserisci il cognome'),
telefono: prompt('Inserisci il telefono'),
indirizzo: {
via: prompt('Inserisci il nome della via'),
citta: prompt('Inserisci la città')
}
};
rubrica.push(utente3);
console.log(rubrica);
Volendo fare dei controlli dell’input, potremmo utilizzare il ciclo while o do-while, come da esempio sotto:
var rubrica = [
utente1 = {
nome: 'Coding',
cognome: 'Creativo',
telefono: '333',
indirizzo: {
via: 'delle rose',
citta: 'Modica'
}
},
utente2 = {
nome: 'Creativo',
cognome: 'Coding',
telefono: '124',
indirizzo: {
via: 'delle rose',
citta: 'Modica'
}
}
];
do {
var n = prompt('Inserisci il nome');
} while (n == "");
var utente3 = {
nome : n,
cognome: prompt('Inserisci il cognome'),
telefono: prompt('Inserisci il telefono'),
indirizzo: {
via: prompt('Inserisci il nome della via'),
citta: prompt('Inserisci la città')
}
};
rubrica.push(utente3);
console.log(rubrica);
In questo caso se l’utente non inserisce nulla, lasciando dunque la stringa vuota, viene richiesto nuovamente di inserire il nome.
Chiaramente questo è solo un esempio di possibile soluzione del seguente esercizio, proponete pure la vostra nei commenti sotto.
In questa lezione abbiamo visto come lavorare con gli array di oggetti e abbiamo fatto alcuni esempi, nella prossima vedremo altri esempi.
In questa lezione approfondiremo il ciclo for in JavaScript attraverso degli esempi pratici di utilizzo. Attraverso gli esempi pratici, infatti, possiamo chiarire concetti e tecniche, permettendo agli studenti di acquisire una comprensione più completa di questo importante costrutto.
Ciclo for JavaScript – Primo esercizio
Esercizio: Inserite in input 20 numeri interi, attraverso un prompt e contare quanti di essi sono pari e quanti dispari.
Per risolvere questo algoritmo utilizzo innanzitutto un ciclo for che consente di prendere in input i 20 numeri interi. All’interno del ciclo utilizzo poi la struttura condizionale ifelse che mi permette di impostare una condizione per verificare se un numero è pari oppure dispari. Per verificare se un numero è pari, lo dividiamo per 2 e controlliamo il resto. Se il resto è 0 allora il numero è pari, altrimenti il resto è 1 ed il numero è dispari.
Per tenere traccia dei conteggi separati di numeri pari e dispari, useremo quindi due variabili distinte. Queste variabili conterranno i totali aggiornati man mano che il ciclo scorre attraverso i numeri inseriti. In alternativa possiamo sottrarre il conteggio dei numeri pari (o dispari) dal totale degli elementi, ottenendo così il conteggio dei numeri dispari (o pari).
Nel nostro caso scegliamo di utilizzare 2 variabili, contap per il conteggio dei pari, contad per il conteggio dei dispari. Entrambe le variabili devono essere inizializzate a 0 e poi incrementate quando soddisfano la condizione.
Ecco dunque una possibile soluzione all’algoritmo proposto che utilizza il ciclo for in JavaScript:
let numero;
let contap = 0;
let contad = 0;
for (let i = 0; i < 20; i++) {
numero = parseInt(prompt('Inserisci un numero'));
if (numero % 2 === 0) {
contap++;
} else {
contad++;
}
}
console.log(`Numeri pari: ${contap}\nNumeri dispari: ${contad}`);
Il risultato ottenuto lo visualizziamo semplicemente con un console.log, ma chiaramente si potrebbe anche visualizzare nella pagina HTML, utilizzando i metodi del DOM.
Ciclo for JavaScript – Secondo esercizio
Esercizio: Inserite in input 10 numeri interi, attraverso un prompt e contare quanti di essi sono positivi, quanti negativi e quanti nulli.
Questo algoritmo è una variante del primo. Difatti il ragionamento è identico, cambia solo la condizione da impostare all’interno dell’if.
Inoltre questa volta le condizioni sono 3, dunque serviranno 2 if.
Questa volta ho avuto bisogno di 3 variabili per memorizzare i differenti conteggi.
Innanzitutto dichiariamo le variabili: numero, contaPos, contaNeg e contaZero utilizzando il keyword let, in quanto cambieremo il valore più avanti. Dopo usiamo un ciclo for per iterare 10 volte. La variabile i viene inizializzata a 0 e viene incrementata ad ogni iterazione finché non raggiunge il valore 10. Durante ogni iterazione del ciclo, viene visualizzato un prompt che chiede all’utente di inserire un numero intero. Questo numero viene convertito in un intero utilizzando parseInt() e assegnato alla variabile numero.
Dopo il numero inserito viene valutato attraverso una serie di condizioni if-else:
Se il numero è maggiore di zero, incrementiamo contaPos.
Altrimenti se il numero è minore di zero, incrementiamo contaNeg.
Altrimenti se il numero è uguale a zero, incrementiamo contaZero.
Dopo che il ciclo è completato, vengono visualizzati i conteggi attraverso tre chiamate a console.log(), che mostrano il numero di numeri positivi, negativi e zeri inseriti dall’utente. Chiaramente potevamo stampare tutto nel console.log().
Ecco dunque il codice di esempio che utilizza il ciclo for in JavaScript:
let numero;
let contaPos = 0;
let contaNeg = 0;
let contaZero = 0;
for (let i = 0; i < 10; i++) {
numero = parseInt(prompt('Inserisci un numero'));
if (numero > 0) {
contaPos++;
} else if (numero < 0) {
contaNeg++;
} else {
contaZero++;
}
}
console.log(`Numeri positivi: ${contaPos}`);
console.log(`Numeri negativi: ${contaNeg}`);
console.log(`Zeri: ${contaZero}`);
In questa lezione abbiamo visto come svolgere alcuni semplici algoritmi con l’utilizzo del ciclo for in JavaScript, nelle prossime lezioni affronteremo tanti altri esercizi.
Commenti recenti