da Cristina | Ago 18, 2020 | Javascript
In questa lezione svolgeremo altri semplici esercizi con il ciclo for in JavaScript.
Esercizi for JavaScript – primo esercizio
Stampare i primi N numeri dispari successivi ad un numero A preso in input.
Analizziamo innanzitutto i passi da compiere.
Il primo passo consiste nel prendere in input il valore A ed il valore N.
Dopo aver chiesto all’utente di inserire questi dati, si procede a realizzare un ciclo for che itera N volte. Analizziamo poi le istruzioni da inserire all’interno del ciclo per risolvere il nostro algoritmo.
Se A è un numero dispari allora occorre aggiungere semplicemente + 2, ad ogni iterazione, per ottenere i successivi N numeri dispari. Altrimenti, se è pari, occorre sottrarre prima 1, per farlo diventare dispari, e poi procedere con lo stesso ragionamento.
Quindi in effetti conviene trasformare il numero A in dispari prima del ciclo for in modo da svolgere in maniera più efficiente le istruzioni all’interno del for.
Ecco di seguito una possibile soluzione dell’algoritmo proposto:
// Stampare i primi N numeri dispari successivi ad un numero A preso in input.
var a = parseInt(prompt('Inserisci il valore di A? '));
var n = parseInt(prompt('Quanti numeri dispari successivi ad A vuoi visualizzare? '));
if (a % 2 == 0){
a--;
}
for (var i = 0; i < n; i++){
a = a + 2;
//in forma contratta posso scriver a += 2;
console.log(a);
}
Stampo i risultati semplicemente con un console.log.
Esercizi for JavaScript - secondo esercizio
Chiedere in input 10 numeri e sommare solo quelli positivi.
Ragioniamo sempre su quali sono i passi da eseguire per risolvere questo algoritmo.
Dapprima con un ciclo for chiediamo all'utente di inserire in input i 10 numeri. Dopo, per ciascun numero inserito controlliamo se è positivo, e se tale condizione è vera incrementiamo la variabile somma.
In questo caso è inutile controllare se il numero è negativo oppure nullo, in quanto l'algoritmo non ci chiede di verificare queste condizioni.
Ecco dunque una possibile soluzione dell'esercizio proposto in JavaScript:
// Chiedere in input 10 numeri e sommare solo quelli positivi.
var somma = 0;
var n;
for (var i = 0; i < 10; i++){
n = parseInt(prompt('Inserisci un numero '));
if (n > 0){
somma += n;
}
}
console.log(somma);
Questi sono solo alcuni semplici esercizi con il for in JavaScript, nel corso del nostro tutorial studieremo tanti altri esempi.
Alcuni link utili
Indice tutorial JavaScript
Introduzione al tutorial JavaScript
Il linguaggio JavaScript
Come utilizzare JavaScript alert
Come utilizzare JavaScript confirm
Utilizzare JavaScript prompt
Variabili in JavaScript
JavaScript substring
da Cristina | Ago 18, 2020 | Javascript
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.
Alcuni link utili
Indice tutorial JavaScript
Le funzioni di callback
Esempi funzioni di callback
Come utilizzare le callback e setTimeout
Cifrario di Cesare online
Come realizzare un convertitore da decimale a binario, ottale ed esadecimale
Come creare PDF con JavaScript
PDF da un form con JavaScript
Proprietà di un PDF con JavaScript
Libreria jsPDF
da Cristina | Ago 18, 2020 | Javascript
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, nomeCantante e 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.
Alcuni link utili
Indice tutorial JavaScript
Le funzioni di callback
Esempi funzioni di callback
Come utilizzare le callback e setTimeout
Cifrario di Cesare online
Come realizzare un convertitore da decimale a binario, ottale ed esadecimale
Come creare PDF con JavaScript
PDF da un form con JavaScript
Proprietà di un PDF con JavaScript
Libreria jsPDF
da Cristina | Ago 18, 2020 | Javascript
In questa lezione approfondiremo il ciclo for in JavaScript attraverso degli esempi pratici di utilizzo.
Ciclo for JavaScript – Primo esempio
Inseriti in input 20 numeri interi, attraverso un prompt, 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 if else che mi permette di impostare una condizione per verificare se un numero è pari oppure dispari.
Se prendo un numero intero e lo divido per 2 posso avere resto 0 oppure 1. Avrò resto 0 se il numero è pari, resto 1 se il numero è dispari. Dunque sfrutto questo ragionamento nella condizione dell’if.
Il conteggio dei pari e dei dispari deve essere memorizzato in due variabili che tengono il conto separatamente o in alternativa in una e poi sottrarre dal totale il risultato ottenuto.
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:
var numero;
var contap = 0, contad = 0;
for (var i = 0; i < 20; i++){
numero = parseInt(prompt('Inserisci un numero'));
if (numero % 2 == 0) {
contap++;
} else {
contad++;
}
}
alert(contap, contad);
Il risultato ottenuto lo visualizziamo semplicemente con un alert, ma chiaramente si potrebbe anche visualizzare nella pagina HTML, ad esempio utilizzando il DOM.
Ciclo for JavaScript – Secondo esempio
Inseriti in input 10 numeri interi, attraverso un prompt, 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.
Ecco dunque il codice di esempio:
var numero;
var contaPos = 0, contaNeg = 0, contaZero = 0;
for (var i = 0; i < 10; i++){
numero = parseInt(prompt('Inserisci un numero'));
if (numero > 0) {
contaPos++;
} else if (numero < 0){
contaNeg++;
} else {
contaZero++;
}
}
console.log(contaPos);
console.log(contaNeg);
console.log(contaZero);
Questa volta ho avuto bisogno di 3 variabili per memorizzare i differenti conteggi.
Visualizzo i risultati finali attraverso un semplice console.log solo a scopo di esempio, per verificare la correttezza del ragionamento.
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.
Alcuni link utili
Indice tutorial JavaScript
Introduzione al tutorial JavaScript
Il linguaggio JavaScript
Come utilizzare JavaScript alert
Come utilizzare JavaScript confirm
Utilizzare JavaScript prompt
Variabili in JavaScript
JavaScript substring
