In questa lezione risolveremo degli esercizi sugli oggetti in JavaScript.
Continuiamo innanzitutto con l’esempio che abbiamo visto nella precedente lezione e facciamo altre operazioni, come ad esempio la cancellazione di una proprietà o l’eliminazione di un oggetto dall’array di oggetti.
Esercizi sugli oggetti – primo esercizio
Progettare un array di automobili che contiene alcuni oggetti. Ogni oggetto contiene delle proprietà: marca, modello, colore, alimentazione, anno e cavalli (quest’ultima proprietà la inseriamo solo in alcune auto). Inserire poi alcuni dati a piacere e visualizzare con un ciclo tutti i dati. Dopo cancellare da tutte le auto la proprietà cavalli e modificare la proprietà anno solo nelle auto di colore bianco, impostando il valore a 2020.
Quindi innanzitutto costruiamo il nostro array di oggetti, come abbiamo fatto nella lezione precedente:
Dopo con un ciclo for sull’array auto cancelliamo la proprietà cavalli. In seguito, dopo aver controllato che il colore dell’auto sia bianco, modifichiamo l’anno in 2020.
for (var i = 0; i < auto.length; i++){
delete auto[i].cavalli;
if (auto[i].colore == 'bianco'){
auto[i].anno = 2020;
}
}
Esercizi sugli oggetti – secondo esercizio
Eliminare dall’array di oggetti precedentemente creato tutti gli oggetti con marca fiat, utilizzando un ciclo.
Possiamo eliminare gli elementi di un array in vari modi. Possiamo ad esempio utilizzare delete oppure slice. Se utilizziamo delete non variamo la lunghezza del nostro array, e al posto degli elementi verrà lasciato un posto vuoto. Se invece utilizziamo splice la lunghezza dell’array cambia ed inoltre una volta eliminato un elemento, quello successivo pernde il suo posto.
Vediamo dunque entrambe le soluzioni per questo esercizio sugli array e oggetti in JavaScript. La prima che utilizza delete è questa:
for (var i = 0; i < auto.length; i++){
if (auto[i].marca == 'Fiat'){
delete auto[i];
}
}
Chiaramente senza ciclo conoscendo l’array potevo anche scrivere:
delete auto[0];
delete auto[1];
Ma immaginate un array con tantissimi oggetti, sarebbe impensabile utilizzare questo metodo.
Risolviamo adesso lo steso algoritmo utilizzando splice.
Per eliminare tutti gli elementi che soddisfano quel criterio parto dalla fine dell’array, dato che questo metodo, dopo l’eliminazione, sposta l’elemento successivo in quello precedente.
Ecco dunque il codice completo:
var lunghezza = auto.length - 1;
for (var i = lunghezza; i >= 0; i--){
if (auto[i].marca == 'Fiat'){
auto.splice(auto[i],1);
}
}
Al posto di inserire auto.splice(auto[i],1), si può determinare anche la posizione dell’indice in questo modo:
for (var i = lunghezza; i >= 0; i--){
var index = auto.indexOf(auto[i]);
if (auto[i].marca == 'Fiat'){
auto.splice(index,1);
}
}
In questa lezione ho proposto dei semplici esercizi sugli oggetti in JavaScript, nelle prossime lezioni continueremo ancora ad esercitarci.
Nella console del browser, si visualizzerà l’elenco di prima senza l’elemento inserito dall’utente.
Shift e Unshift in JavaScript – secondo esempio
Facciamo un esempio utilizzando l’array giorni che abbiamo già utilizzato negli esempi precedenti.
Questa volta però toglieremo i giorni all’inizio dell’array, quindi iniziando da lunedì.
Provate a cliccare sul pulsante sotto per ottenere l’effetto:
Ecco dunque il codice completo utilizzato per risolvere questo semplice algoritmo che utilizza il metodo shift() per eliminare elementi all'inizio dell'array.
var giorni=["lunedì","martedì","mercoledì","giovedì","venerdì","sabato","domenica"];
function tolgo() {
giorni.shift();
alert("Ho tolto un giorno");
//stampo ciascun giorno
for (var i = 0; i < giorni.length; i++) {
alert(giorni[i]);
}
}
Dopo nella pagina html inserisco il seguente codice:
Allo stesso modo utilizzo unshift() per aggiungere elementi all'inizio dell'array.
Ecco un semplice esempio:
var giorni=["lunedì"];
giorni.unshift("martedì");
Chiaramente questi sono solo dei semplici esempi sui metodi shift e unshift in JavaScript, utili per iniziare ad utilizzare gli array in JavaScript. Nelle prossime lezioni affronteremo altri metodi.
Infatti sottraendo alla lunghezza dell’array il valore 1, ottengo sempre l’ultimo elemento.
Proprietà length JavaScript – secondo esempio
Creiamo un array di elementi e dopo visualizzare ciascun elemento utilizzando il ciclo for.
Questo secondo esempio è simile al precedente ma utilizza la proprietà length sull’array come condizione del ciclo for.
Creo dunque l’array in questo modo:
var oggettiScolastici = ['gomma', 'quaderno', 'matita'];
Dopo scorro l’array attraverso un semplice ciclo for, fermandomi quando la varaibile contatore i è inferiore a giorni.length.
Infatti, come osservato nell’esempio precedente, l’ultimo elemento ha la posizione giorni.length – 1, che nel nostro caso specifico ha valore 2.
Ecco dunque il ciclo for utile per scorrere tutto l’array e stampare ciascun elemento nella pagina web.
for (var i=0; i < oggettiScolastici.length; i++) {
document.write(oggettiScolastici[i] + “<br>”);
}
In questa lezione abbiamo analizzato alcuni esempi d’uso della proprietà length negli array in JavaScript, nelle prossime lezioni affronteremo altri esempi con l’utilizzo di questa proprietà.
Il metodo includes in JavaScript permette di verificare se un elemento è presente in un array o anche in una stringa di testo, come spiegato in questa lezione: https://www.codingcreativo.it/includes-in-javascript/.
La sintassi di questo metodo è la seguente:
nomeArray.includes(element)
Dove element è l’elemento da ricercare nell’array.
Opzionalmente si può anche indicare la posizione dalla quale iniziare la ricerca, aggiungendo un secondo parametro come argomento del metodo includes di js.
nomeArray.includes(element, start).
Il metodo restituisce un valore booleano: true se l’elemento è presente nell’array, false se invece l’elemento non è stato trovato.
includes JavaScript – primo esempio
Cerchiamo un elemento in un array con il metodo includes().
Supponiamo dunque di avere il seguente array:
var oggettiScolastici = ['gomma', 'quaderno', 'matita'];
Applichiamo il metodo includes per ottenere il valore booleano di ritorno memorizzato in una variabile.
var risultato = oggettiScolastici.includes('gomma');
In questo caso se proviamo a fare il console.log di risultato avremo di ritorno il valore booleano true.
Se invece ricerchiamo un valore non presente:
var risultato = oggettiScolastici.includes('temperino');
Il valore della variabile risultato sarà false.
includes JavaScript – secondo esempio
Creare un array di numeri interi a piacere. Dopo generare un numero random compreso tra 1 e 100. Se il numero non è presente nell’array lo inseriamo, altrimenti restituiamo il messaggio “numero già presente“.
Quindi innanzitutto creiamo un array di numeri interi a piacere. Dopo generiamo un numero random utilizzando le funzioni Math.floor e Math.random.
Dopo utilizzando una semplice istruzione condizionale con l’operatore logico not verifichiamo se il numero non è presente ed in questo modo lo inseriamo nel nostro array. Altrimenti visualizziamo il messaggio con un semplice alert.
Ecco dunque il codice di esempio che utilizza il metodo includes di js:
var arrayNumeri = [6,12,34,67,89,98,5,2,7,13];
var numeroRandom = Math.floor(Math.random() * 100) + 1;
if (!arrayNumeri.includes(numeroRandom)){
arrayNumeri.push(numeroRandom);
} else {
alert('Numero già presente');
}
In questa lezione abbiamo semplicemente visto degli esempi sull’utilizzo del metodo includes in JavaScript, nelle prossime lezioni proporrò tanti altri esempi.
In questa lezione affronteremo il metodo pop in JavaScript, utile a cancellare elementi in un array.
Nella lezione precedente abbiamo affrontato il metodo push e abbiamo visto come aggiungere elementi al nostro array in coda, adesso vedremo come eliminarli.
Quindi per togliere o aggiungere elementi alla fine di un array in JavaScript si possono utilizzare i metodi pop() e push().
La sintassi del metodo pop è la seguente:
nomeArray.pop();
Pop JavaScript – primo esempio
Creare un array che contiene degli elementi ed eliminare l’ultimo elemento.
In questo primo esempio sull’utilizzo del metodo pop() creo innanzitutto un array che contiene ad esempio oggetti scolastici, come nell’esempio precedente del push.
Dopo con il metodo pop elimino l’ultimo elemento.
Ecco dunque il semplice codice di esempio:
var oggettiScolastici = ['gomma', 'quaderno', 'matita'];
oggettiScolastici.pop();
console.log(oggettiScolastici);
Pop JavaScript – secondo esempio
Facciamo un esempio dimostrativo del metodo pop().
Supponiamo ad esempio di avere i giorni della settimana da lunedì a domenica memorizzati in un array. Ogni volta che clicco su un pulsante inserito nella pagina html, tolgo un giorno, l’ultimo.
Fate pure la prova cliccando sul pulsante sotto più volte, noterete che ogni volta verrà tolto l’ultimo giorno:
Per realizzare lo script quindi creo un array che contiene i giorni della settimana, ad esempio giorni = ["lunedì", "martedì","mercoledì", "giovedì", "venerdì", "sabato", "domenica"].
Dopo, definisco una funzione di nome tolgo e inserisco le istruzioni per richiamare il metodo pop() che cancella i giorni dall'array e avvisa l'utente con un alert che l'operazione è andata a buon fine. Quindi con un ciclo for visualizzo tutti i giorni rimasti.
Ecco il codice JavaScript di esempio che utilizza il metodo pop di JavaScript:
var giorni = new Array("lunedì", "martedì","mercoledì", "giovedì", "venerdì", "sabato", "domenica") ;
function tolgo() {
giorni.pop();
alert("Ho tolto un giorno");
for (var i = 0; i < giorni.length; i++) {
alert(giorni[i]);
}
}
Per richiamare questa funzione inserisco l'azione quando si effettua il click sul pulsante tolgo giorno.
Quindi nella pagina html utilizzo il seguente codice:
