Realizziamo alcuni esercizi sugli oggetti in JavaScript utilizzando gli oggetti letterali. L’utilizzo di questo metodo è il modo più semplice ed utilizzato per creare e manipolare oggetti in JavaScript.
In particolare in questa lezione studieremo come creare oggetti nidificati.
Esercizi con gli oggetti in JavaScript – esercizio 1
Progettare l’oggetto canzoni che contiene delle proprietà: canzone1, canzone2, ecc…Queste proprietà a sua volta sono degli oggetti che hanno altre proprietà: titolo, nomeCantantee anno. Inserire poi alcuni dati a piacere e visualizzarli. Dopo fare inserire all’utente delle nuove canzoni attraverso il prompt dei comandi. Visualizzare il nuovo oggetto così costruito.
Come prima cosa memorizziamo in una variabile il riferimento all’oggetto canzoni. All’interno specifichiamo le due proprietà canzone1 e canzone 2 che a loro volta sono degli oggetti con il titolo, il nome del cantante e l’anno di produzione.
Dopo creiamo un’altra struttura analoga alla precedente, ma facciamo inserire i dati all’utente.
Infine utilizziamo object.assign per aggiungere questi dati all’oggetto creato in precedenza.
Ecco dunque 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);
var canzoneAggiunta = {
canzone3 : {
titolo : prompt('Inserisci il titolo'),
nomeCantante: prompt('Inserisci il titolo'),
anno: prompt('Inserisci l\'anno'),
}
}
Object.assign(canzoni,canzoneAggiunta);
console.log(canzoni);
Se invece volessimo stampare solo l’ultimo oggetto inserito, potrei scrivere:
console.log(canzoni.canzone3);
Esercizi con gli oggetti in JavaScript – esercizio 2
Progettare un oggetto rubrica che ha come proprietà gli utenti. Dopo, per ogni utente, specificare altre proprietà: utente, 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.
Ecco dunque un altro esempio che utilizza gli oggetti nidificati in JavaScript.
In questa lezione abbiamo visto come utilizzare gli oggetti nidificati in JavaScript attraverso dei semplici esercizi dimostrativi. Nella prossima lezione studieremo gli array di oggetti.
Il metodo splice in JavaScript aggiunge e rimuove elementi ad un array partendo da una posizione specificata.
La sintassi è la seguente: nomeArray.splice(indice, q, elemento1, …, elementoN).
Dove indice rappresenta l’indice da cui partire e può essere un valore negativo, il che sta ad indicare che si parte dalla fine dell’array.
La quantità q rappresenta la quantità di elementi da eliminare e se è impostata a 0, oppure un valore non specificato, non viene eliminato alcun elemento. Altrimenti vengono eliminati tanti elementi quanti specificati.
Infine elemento1 … elementoN sono gli elementi da inserire nell’array.
Il parametro indice è richiesto, mentre q e gli elementi sono parametri opzionali.
splice JavaScript – primo esempio
Eliminare 3 elementi da un array di 7 elementi, partendo dalla posizione 1, utilizzando il metodo splice().
Partiamo dal seguente array di 7 numeri:
var numeri = [5,4,3,2,6,9,62];
Adesso per eliminare gli elementi partendo dalla posizione 1, utilizziamo il metodo splice() e poi visualizziamo il risultato, per comodità, nella console del browser.
numeri.splice(1,3); console.log(numeri);
Quindi abbiamo utilizzato il metodo splice utilizzando il parametro opzionale q.
splice JavaScript – secondo esempio
Aggiungere 2 elementi ad un array di 7 numeri, partendo dalla posizione 3 ed eliminando solo il terzo.
Quindi, partendo sempre da questo array di numeri:
var numeri = [5,4,3,2,6,9,62];
Applichiamo il metodo splice per inserire due valori, ad esempio 15 e 20 ed eliminare il terzo, nel nostro caso il numero 3.
Dopo visualizziamo il risultato sempre nella console del browser.
Di seguito ecco il codice di esempio:
numeri.splice(2,1,15,20);
console.log(numeri);
In questa lezione abbiamo visto come utilizzare il metodo splice di JavaScript, nella prossima lezione vedremo come affrontare altri metodi attraverso numerosi esempi.
Class JavaScript – In questa lezione impareremo ad utilizzare le classi in JavaScript introdotte nella versione ES6 (ECMAScript 2015) per la prima volta.
È dunque possibile utilizzare la parola chiave class in JavaScript, come in altri linguaggi di programmazione, per definire una nuova classe.
Questo modo di creare gli oggetti si aggiunge ai precedenti analizzati nelle lezioni precedenti dove, tra gli altri, abbiamo utilizzato il costruttore di funzioni, il costruttore object ma soprattutto gli oggetti letterali che rappresentano il modo più comune, fin’ora utilizzato, per creare e gestire gli oggetti, grazie alla sua semplicità di utilizzo.
Un costruttore può usare anche la parola chiave super che serve a richiamare il costruttore della classe padre.
Class JavaScript – esempio per creare un oggetto auto
Creiamo lo stesso oggetto auto d’esempio delle stesse lezioni, al fine di comparare i vari metodi fin qui proposti.
Utilizziamo la parola chiave class, seguita dal nome della classe, nel nostro caso auto.
Utilizziamo poi il costruttore, un metodo speciale usato per creare un oggetto, specificando i parametri tra parentesi tonde.
Ci deve essere un solo metodo con il nome constructor, altrimenti si avrà un’eccezione di tipo SyntaxError.
Ecco dunque un esempio dove creiamo una classe auto, specificando 3 proprietà: marca, modello e anno.
Utilizziamo anche una funzione visualizza che richiameremo come metodo sull’oggetto auto per visualizzare le proprietà dell’oggetto.
L’ereditarietà è una caratteristica importante della programmazione ad oggetti.
Con il termine di ereditarietà si intende la possibilità di estendere una classe genitore attraverso una classe figlia che eredita tutte le caratteristiche dalla classe genitore.
Questo metodo serve per evitare ridondanze, ma anche per generare codice funzionale.
La parola chiave extends consente proprio di sfruttare questa caratteristica.
Quindi dopo aver definito una classe persone con il costruttore a cui passiamo come parametri il nome, il cognome e l’età, andiamo a costruire la classe mestieri come estensione di persone.
Questo vuol dire che eredita dalla classe persone le 3 proprietà specificate.
All’interno del costruttore invochiamo super per richiamare le proprietà del genitore ereditate. In definitiva super ci consente di fare riferimento alla superclasse.
Ecco dunque l’esempio completo:
class persone {
constructor(nome, cognome, eta) {
this.nome = nome;
this.cognome = cognome;
this.eta = eta;
}
}
class mestieri extends persone {
constructor(nome, cognome, eta, mestiere) {
super(nome, cognome, eta);
this.mestiere = mestiere;
}
}
var cantante = new mestieri('coding', 'creativo', 32, 'cantante');
console.log(cantante.mestiere);
Commenti recenti