Javascript Tutorial Italiano 13 - Gli Oggetti in Javascript

un mentre da tutti episodio numero 13 del corso di javascript quest oggi guardiamo gli oggetti in preparazione a quello che sarà lo sviluppo ad oggetti in javascript allora lista del giorno cos'è un oggetto cosa sono le proprietà ei metodi come creare un oggetto leggerle proprietà che cos'è la dott notation e la bracket notation come aggiornare un oggetto è la parola chiave di un oggetto lo possiamo definire come una collezione di dati in relazione tra di loro ok questa è la definizione che dà anche la documentazione che cosa intendo per una collezione di dati correlati tra

di loro e adesso capite subito l'esempio prendiamo una persona ok ora hanno parlato di oggetti vogliamo appunto spesso mettere dei dati che hanno che hanno una certa correlazione appunto tra di loro che abbiano un senso messi insieme che vogliamo appunto contenere in una stessa variabile in questo caso appunto utilizziamo l'oggetto prendiamo per esempio la persona ok abbiamo una costante persona abbiamo questo oggetto l'oggetto si apre con le parentesi graffe l'abbiamo già visto e può avere dei dati al suo interno i dati sono leggibili tramite chiave valore quindi questa è la persona questa è la chiave

nome e il valore potrebbe essere luca ok quindi questa è la chiave e questo è il valore ogni volta che trovate qualcosa due punti qualcos'altro la relazione è chiave valore quindi questa è la chiave di una proprietà questo l'oggetto è questo il valore ok quindi chi e value ricordate quello che lo userete spesso anche nelle funzioni che useremo più avanti per lavorare sugli oggetti torniamo a noi che cosa sono una serata una serie di dati correlati noi abbiamo qua una persona una persona ha un nome ha chiaramente un cognome ok potrebbe avere un genere in

questo caso facciamo luca è chiaramente una femmina poi facciamo così mettiamo gli interessi interessi potremmo avere un array in cui mettiamo snowboard ho scritto male snowboard potrebbe avere basket e poi facciamo picnic al parco questo è un po più per la comicità un'altra cosa che potrebbe avere potrebbe per esempio a bere magari un un indirizzo una cosa del genere giusto per farvi vedere dei sotto dei soggetti l'indirizzo è composto da via in questo caso piazza roma chissà se esiste una piazza roma da qualche parte potrebbe avere un cap mettiamo un capo letteralmente a caso conti

sono cinque numeri ok e poi mettiamo amici se lo mettiamo in così perché altrimenti un problema e poi potrebbe avere una provincia magari provincia facciamo mi milano mi vengono solo è un peccato ammettiamo anche tasto punto servono anche di numeri facciamo età due punti 25 benissimo interessi cup provincia e mettiamo città e mettiamo chiaramente milano ok un'altra cosa che potrebbe fare il nostro amico potrebbe fare delle delle azioni ovvero saluta due punti function facciamo così facciamo così e dentro mettiamo con sol punto log facciamo alt 96 al 96 si compaiono i tic e noi prepariamo

ve lo dico subito ciao sono ciao sono luca ok oppure potremmo fare come abbiamo visto che i template literals potremo mettere nome non è nome scusatemi ma è persona punto nome ok vediamo che cosa abbiamo qui abbiamo un oggetto ok qui nel veneto che sono dati correlati tra di loro con un certo senso logico effettivamente abbiamo una persona questa persona è un oggetto che abbiamo già detto che abbiamo già parlato che l'oggetto è una rappresaglia essere una rappresentazione programmatica di qualcosa che può esistere effettivamente nella realtà e se noi prendiamo una persona una persona chiaramente

un nome e un cognome un genere un'età degli interessi un indirizzo può fare delle può fare delle azioni ok quindi a una serie di dati vedete qua non abbiamo messo colore del pelo ok perché è una persona non ha il pelo potremmo avere numero di scarpe samuele tutto quello che volete conto bancario altre cose sicuramente non ha dimensioni in pollici perché non è un uno schermo oppure non ha la potenza in watt ok quant'altro che mi avete capito cosa intendo quando parlo di dati correlati tra di loro con un certo senso logico e questa è

una persona qua però il palo di proprietà e di metodi un oggetto ha delle proprietà e dei metodi le proprietà non sono altro che le variabili ok queste sulle proprietà la proprietà nome della persona quindi una persona ha un nome si il nome è una proprietà di una persona sì il nome è luca poi abbiamo il cognome il genere mentre invece saluta è un metodo vi ricordate che avevo parlato durante le funzioni dei metodi ecco che entrano in scena i metodi i metodi sono le funzioni ma sono le funzioni di particolari oggetti abbiamo saluta è

il metodo di persona vuol dire che tutte le persone che andremo a creare più avanti nelle prossime prossime elezioni quando faremo poi le classi e javascript loro indotto gli oggetti avranno tutti il metodo saluta ok che altro non è che una funzione lo vedete semplicemente le variabili dentro dentro un oggetto sono proprietà le funzioni sono metodi l'oggetto abbiamo creato adesso vediamo come leggere le proprietà allora andiamo qua a schermo che facciamo con sol punto log e remo mandare come leggiamo queste proprietà è molto semplice persona punto nome andiamo a vedere in questo caso andiamo a

prendere persona che è questo oggetto punto in questo modo possiamo accedere alla sua proprietà ma anche al metodo adesso vi faccio vedere quindi vedete luca andiamo più a schermo di così molto bene quindi abbiamo l'accesso al suo nome ti faccio vedere età vi faccio vedere un po tutti vedete età 25 possiamo andare a prendergli interessi gli interessi in questo caso essendo un array vi ricordate come si accede agli arresti accede tramite indice in questo caso abbiamo prendere picnic al parco che è 2 andiamo qua e vedete picnic al parco è uno dei suoi interessi quindi

facciamo per l'oggetto punto la chiave che ci serve la proprietà che ci serve e poi eventualmente se dobbiamo prendere un array andiamo a mettere l'index se invece dobbiamo prendere un soggetto questo è un altro oggetto l'oggetto indirizzo è un soggetto dell'oggetto persona ok come andiamo a lavorare molto semplice utilizziamo la stessa cosa quindi andiamo a fare indirizzo indirizzo punto vedete i commi da cup mi può dare via ce lo suggerisce avrete che ci suggerisce le varie cose perfetto noi facciamo cup che era più bello da vedere andiamo a vedere bam e questo è il suo

cap quindi abbiamo preso tutto come facciamo però mandarà schermo una funzione molto semplice noi diciamo persona punto saluta facciamo così ovviamente una funzione quindi dobbiamo mandare a schermo così andiamo a vedere ciao sono luca quale problema qua ha giustamente scusatemi non dobbiamo andare a schermo così la funzione dove sennò c'è un problema di di console log mandiamo a schermo ciao sono luca perfetto e questa è la funzione punto e virgola ecco se lasciati punti e virgola se non metti di punti e virgola su una riga non è un problema se non li mettete su più

righe di codice comincia a diventare un problema quindi vedete che abbiamo chiamato la la funzione persona appunto saluta questa cosa qua l'abbiamo già usata vi ricordate quando abbiamo fatto string punto to string anzi avevamo fatto vediamo se riesco far così persone appunto nome punto to vedete to lower keys e che la stessa cosa in questo caso il nome è una stringa perciò abbiamo usato il metodo lower cayce ok perché la stringa mai detto che è un oggetto il javascript le stringhe essere un oggetto di conseguenza vedete che abbiamo già fatto la stessa cosa l'abbia usato

lower che sto per kate abbia usato su gli array push pop è lo stesso lo stesso discorso quindi quasi sarebbe un array che ha dentro dei metodi tra cui push pop in shift shift stessa cosa quindi in persona appunto saluta e con questo abbiamo letto sia le proprietà che i metodi abbiamo vedere però che cos'è la dott notation e la bracket notation quella che abbiamo usato fino adesso è la top notation ovvero a siamo andati a prendere le proprietà e i metodi di un di un oggetto tramite la dott notation perché il punto in inglese

è dott quindi dott notation ovvero accediamo utilizzando i punti ma noi potremo usare le bracket notation e per break ed notation parliamo delle square bracket ovvero delle parentesi quadrate per accedere alle parentesi quadrate in questo modo possiamo accedere solo al alle proprietà quindi andremo a fare oggetto in questo caso persona aperte parentesi quadre e andiamo a mettere tra virgolette il nome della chiave ok quindi in questo caso devo mettere il nome perfetto facciamo così giustamente non ho fatto console home console punto log andiamo qua tac facciamo così e noi abbiamo schermo il nostro look lo

vedete non fa alcuna differenza prima prendere interessi per prendere interessi tuttavia ci manda schermo più cose quindi per prendere gli interessi ricordatevi che è un array dobbiamo andare a fare doppio lavoro andiamo a prendere questa volta l'uno e ci manderà schermo basket ok vedete basket quindi questo qua è l'array ok persona interessi scritto così è questo array esattamente come persona persona appunto punto interessi che abbia sufficiente la sintassi e davanti mettiamo uno sono è esattamente la stessa cosa ok ed è esattamente scrivere persona appunto nome così è esattamente come scrivere persona appunto nomi sono modi

diversi di accedere e dico quella la differenza quando vi tornerà più utile uno che l'altro quindi persona appunto nome perfetto e se vogliamo accedere all'indirizzo la cosa è esattamente uguale facciamo indirizzo e poi andiamo qua e andiamo a prendere il cap andiamo a vedere perfetto ci ridà tutto quindi vi ho detto che saluta invece dobbiamo accedere sempre lo stesso modo le funzioni vanno chiamate sempre lo stesso modo con la colla dott notation questa è la bracket notation allora qual è una delle questo non dovrebbe esserci scritto sulla documentazione che è in descrizione ve lo dico

io come extra qual è una delle situazioni in cui potrebbe farci comodo questa notation rispetto a quella puntata allora molto semplice poniamo e vi succederà che dovrete prendere dinamicamente delle dovrete prendere dinamicamente delle proprietà vi succederà a ve lo posso garantire su un esempio così sulle piedino mi viene in mente ma ve lo posso garantire che l'uso spessissimo durante la programmazione dovete prendere qualcosa di una persona ok dovete bene anzi poniamo che questa persona ha la sua area privata ok alla sua privata e sta modificando qualcosa che noi non sappiamo cosa andrà a modificare la

persona potrà modificare il nome potrà modificare il cognome il cenare e gli interessi né non lo sappiamo quindi lo prenderà in base a quello che fa effettivamente l'utente sul sullo schermo quindi noi non possiamo dirgli e modifica all'indirizzo ok se realtà lui sta modificando il genere non possiamo dire modifica il nome se lui sta modificando il cognome quindi potrebbe essere che noi associamo la chiave in questo caso diciamo const chi che sarebbe la chiave o il nome della proprietà e li mettiamo come nome genere ok in questo caso abbiamo konsky non è non conviene scrivere

chiave abbiamo il genere ok ora noi sappiamo che vogliamo prendere il genere ma se ne andiamo a fare mandami a schermo persona appunto chiave uno potrebbe dire beh però persona punto chiave è questo quindi mi andrà a prendere il genere mi darà maschio andiamo a vedere no ande find perché scrivendo così noi sì li abbiamo dato questa chiave ma noi non la percepisce come se fosse la chiave per l'una dott notation perciò va a cercare chiave qua dentro se va da mettere chiave due punti e metto come se fosse una chiave particolare di sulla tela

virgola una chiave particolare un accesso è diventet che ci da questo quindi questa è la dott notation come possiamo fare per inserire dinamicamente la chiave di un oggetto senza saperlo prima dobbiamo per forza usare dobbiamo per forza usare lo vedete la bracket notation quindi abbiamo a vedere ed effettivamente ci dice che è maschio ok facciamo un esempio anche su indirizzo vi faccio vedere come nonché a scusatemi l'indirizzo quali facile come non cambia niente prendiamo lo 0 c uscirà snowboard ne facciamo così io vi mando schermo scusate non è in indirizzo ma è interessi piccolo errore

mio andiamo a schermo è evidente che mi da snowboard ok quindi questa è la bellezza della della bracket notation ed è una delle differenze più importanti gare la differenza più importante tra cui usare una accusare l'altra di solito se non devo mettere niente di dinamico uso la dott notation e quindi scrivo direttamente punto nome se lo farà qualcosa di dinamico vado a mettere la bracket notation quindi utilizzate questa questo modus operandi in queste varie situazioni ok ricordatevelo a mente perché ve lo posso garantire all'inizio nel del mio della mia casa di sviluppo non sapevo questa

differenza e smaltato a lungo smaltato veramente tanto mi ricordo mi ricordo ancora il giorno in cui ho avuto quel problema lì poi l'ho imparato e tutti i problemi sono solo andati via e stata un'eccellente scoperta perciò preferito dirvelo anche se hanno importato nella documentazione apprezzate e andiamo avanti come possiamo aggiornare un oggetto molto semplice pallone continua a mandare a schermo persona punto nome ma prima sappiamo come accedere a persona punto nome preso da un persona punto nome andiamo qua persona punto nome e scriviamo paolo perfetto paolo ok molto molto molto semplice qualcuno potrebbe dirmi però

giustamente come mai in una costante questo esula dalla dalla lezione attuale ma ve lo voglio spiegare per qualcuno potrebbe aver delle dei dubbi a riguardo come mai però su una costante noi stiamo andando a modificare il nome e ce lo fa fare mentre invece ci hai detto nella lezione delle variabili che la costante non cambia valore questo perché la costante è la persona ok ma questa è una cosa a parte c'è noi non possiamo che la persona in sé non può cambiare contenuto ma luca il contenuto del nome onestamente non so come spiegarvelo faccio prima

a farvelo vedere ok quindi io vado a scrivere persona persona la mettiamo uguale a un a un a un oggetto vuoto quindi stava andando a cambiare la natura dell'oggetto quindi base stiamo cambiando la persona ok siamo totalmente cambiando la natura dell'oggetto facciamo così e vedete che ci dà errore ok ci dà proprio rai non possiamo farlo stessa cosa se proviamo a cambiare la natura della persona apre o proviamo a farlo diventare un array c.da errore stessa cosa sia però farlo diventare un numero c.da errore ok ma se ne andiamo a cambiare se andiamo a cambiare

le proprietà di un oggetto non è un problema ok facciamo quindi un'altra prova andiamo a cambiare l'indirizzo punto cup e lo mettiamo chiaramente un due tre serve due zeri perfetto sono sempre di zena il cap facciamo così andiamo mandare a schermo indirizzo cap e vediamo un po perfetto torna tutto è così possiamo modificare tranquillamente il valore di i valori delle proprietà ovviamente vi faccio vedere anche magari su interessi così tanto per interessi punto 2 da picnic al parco diventa cazzeggiare ok prima prossimi avuto in mente perdonatemi ops ma andiamo a schermo soltanto gli interessi nemo

schermo gli interessi vediamo un po e abbiamo snowboard basket e cazzeggiare quindi vedete che possiamo accedere tranquillamente alle proprietà e possiamo cambiarle senza alcun problema ora con la stessa cosa possiamo aggiungere proprietà gli oggetti che non abbiamo magari messo prima e non avremmo comunque errore vi faccio vedere sulla stessa linea noi aggiungiamo persona punto colore preferito colore preferito uguale e ne mettiamo il ne mettiamo il blu e mandiamo a schermo tutta la persona che vi voglio far vedere e noi abbiamo un bellissimo paolo ok il cui colore preferito è il blu vedete quindi questo è

quello che possiamo fare con gli oggetti anche con costanti proseguiamo abbiamo aggiornato l'oggetto arriviamo alla parola this lo troverete spesso lo troverete spesso che cos'è la parola chiave diesel la parola chiave decisamente this dall inglese vuol dire questo quando noi usiamo teese facciamo riferimento all'oggetto in cui ci troviamo dentro ok facciamo riferimento allo stesso oggetto in questo caso vedete che io mando a schermo ma da schermo persona punto nome quindi facciamo saluta dove solo farvi vedere come funziona allora noi mandiamo a schermo ciò sono luca ma io cosa avrei potuto fare vedere che richiamiamo persona

punto nome anziché usare persona quindi possiamo andare a mettere disappunto nome e vedete che ci ridarà esattamente la stessa cosa fa vedere che è cambiato qualcosa mettiamo genere per sicurezza magari qualcuno cioè non ha aggiornato e invece ciao sono maschio giustamente efficiente sei maschio allora quindi this is va a prendere come context come contesto l'oggetto quindi ciao sono di nome e lui mi dice ok ma io dove sono dentro ci sono dentro a persona ok io sono dentro a persona quindi sono sono dentro a questa istanza del sono dentro a questo oggetto di snom e

vuol dire che è lo già think mi trovo quindi persona ok non potremo avere più nomi diversi potremmo avere edoardo potremmo avere un altro oggetto che consta luca che quindi ha come nome luca avete capito il senso in questo caso è più un persona generico ok però lo dice ok io sono dentro persona il nome di persona this è persona quindi dentro this di snom e questo nome è luca e quindi questo è il ragionamento che ci sta dietro di slow vedremo sempre sempre sempre quindi con questo abbiamo veramente fatto tutto abbiamo guardato nel dettaglio

le basi degli oggetti e vi ringrazio per essere ma sti come noi ci vediamo al prossimo episodio dove parleremo di come avevo già detto javascript object oriented per principianti e quindi ci sarà tanto di cui parlare allacciatevi per l'ennesima volta le cinture che qua la cosa si fa non seria ancora più seria e vi ringrazio ancora l'altra volta vi ricordo che in descrizione cioè tutto telegram se vi serve eccetera come supportare il canale in vari modi e niente alla prossima ciao ciao