Trascrizione: (click per espandere)

salve a tutti in questo video parlerò
degli oggetti di javascript questo video
sarà solo un introduzione agli oggetti
a cui dedicherò un'intera sezione del
corso perché essendo javascript un
linguaggio orientato agli oggetti essi
svolgono un ruolo fondamentale
comunque adesso andiamo a dare una
rapida occhiata cos'è un oggetto e così
potrete seguire tutti gli altri video
dopo di questo bisogna dichiarare un
oggetto come una qualsiasi variabile
posso si può mettere la keyword const o
la keyword let
facciamo keyword let e dichiariamo il
nome della variabile diciamo persone
persona poi si aprono le parentesi
graffe e si mette il punto virgola
questo è l'oggetto più semplice che si
può creare si usa e si usano le
parentesi graffe si potrebbe usare anche
il l'oggetto object che è un oggetto
built in in javascript con la keyword
avanti però vi sconsiglio di farlo oggi
però vi sconsiglio di farlo usate sempre
le parentesi graffe e questa maniera di
creare gli oggetti si dice creare un
oggetto in maniera letterale e andiamo a
vedere cosa c'è dentro un oggetto un
oggetto ha delle caratteristiche che si
richiamano proprietà e si può mettere
qualsiasi cosa dentro una proprietà si
possono mettere stringhe si possono
mettere numeri si possono mettere
booleani si possono mettere arrai si
possono mettere altri oggetti e si
possono mettere funzioni andiamo a
vedere questo oggetto persona
sicuramente avrà una proprietà che si
chiama nome la proprietà si scrive così
com'è senza apici perché non è una stringa
è il nome della proprietà è come avere
scrivere un nome di una variabile e poi
si mette il suo valore e il suo valore
per esempio in questo caso mette una
stringa e la chiamo marco per scrivere
un'altra proprietà si mette una virgola
e scrive un'altra proprietà cognome due
punti altra proprietà rossi
adesso possiamo mettere un'altra
proprietà che si dice si chiama età
in questo caso mettiamo un numero 30
adesso io voglio che questa questo
oggetto questa persona faccia delle
azioni e quindi creerà una proprietà con
un azione quando si creano proprietà che
tra virgolette sono azioni si dice che
io creo un metodo quindi adesso io
chiamo un metodo presentarsi per esempio
presentarsi presentarsi sempre i due
punti e poi qui dentro ci mette una
funzione non dovete capire perfettamente
la sintassi nella funzione perché la
vedremo più avanti comunque tutte le
funzioni hanno la keyword function parentesi
tonde e poi le piccole parentesi graffe
si delimita il blocco di codice
questa funzione io voglio che visualizzi
sulla mia pagina la presentazione di
questo oggetto quindi vado a creare come
abbiamo già visto document.getelementbyid display inner html uguale
è qui metto back tick e vado a scrivere
la mia iniziare il mio saluto di
presentazione e salve io sono adesso io
devo voglio mettere questo questo valore
di questa proprietà dentro alla mia anni
saluto per per riferirsi alle proprietà
dello stesso oggetto intanto usiamo il
segno del dollaro e le parentesi graffe
come vi ho fatto vedere quando si
vogliono inserire le variabili i valori
delle variabili dentro una stringa per
riferirsi alle proprietà dello stesso
oggetto si mette la keyword this che in
inglese significa questo e poi il nome
della proprietà di nome
poi mettiamo il cognome cognome e poi
mettiamo l'età ed ecco qui che ho fatto
il mio metodo ricordatevi
che quando una funzione è dentro una
proprietà si dice metodo dell'oggetto se
adesso io voglio andare a visualizzare
il mio saluto
devo invocare il metodo presentarsi
dell'oggetto persona per fare questo io
scrivo persona punto presentarsi
presentarsi e poi metto le parentesi
quando si invocano metodi o funzioni si
devono sempre mettere le parentesi se
adesso io vado a salvare
qua probabilmente colazione errore ecco
qui eccomi qua salve io sono marco rossi
da 30 anni praticamente io usando il
metodo dell'oggetto persona vado a
visualizzare i valori delle proprietà
dell'oggetto persona c'è un'altra
maniera
posso possono visualizzare direttamente
anche le proprietà dell'oggetto per
esempio io devo sempre specificare che
oggetto voglio e poi il punto e poi
scrivo il nome della proprietà quindi se
adesso io vado a vedere qui mi trovo il
nome
stessa cosa vale per se vogliono
visualizzare l'età metto il nome della
proprietà
e c'è un'altra maniera per accedere alle
proprietà di un oggetto invece di usare
il punto come sto facendo qui ed è
usando le parentesi quadrate
quindi io devo sempre specificare il
nome dell'oggetto parentesi quadrate e
poi io qui ci devono inserire una
variabile la variabile poi la chiamo
proprietà e come valore ha il nome della
proprietà cognome per esempio poi prendo
questa variabile la passo dentro alle
parentesi quadrate
ed ecco qua riesco a visualizzare il
cognome c'è una se io avessi una
un'altra proprietà qui la chiamo età 2
per esempio e ci metto un altro numero
ecco qui posso usando le parentesi
quadrate possa fare una cosa del genere
praticamente io metto età come vedete io
qui non sto specificando il numero
perché dentro le parentesi quadra de si
possono fare una sorta di espressione
quindi per esempio io qua vado a mettere
prop 2 sommato ha il valore 2 e vediamo
cosa succede ecco qua 56 riesco a
concatenare stringhe dentro a le parentesì quadrate e riesco quindi ad accedere
alle proprietà dell'oggetto volendo io
posso aggiungere proprietà all'oggetto
da fuori
per esempio se io solo l'oggetto persona
e voglio aggiungersi una una proprietà
posso tranquillamente invocare scrivere
il nome dell'oggetto e aggiungersi la
proprietà che voglio aggiungere diciamo
persona su indirizzo e poi ci metto il
valore via roma ecco qui se adesso
io vado a visualizzare questo questo
questa proprietà io mi trovo via roma
per cancellare proprietà dell'oggetto si
deve usare la keyword delete è il
nome della proprietà
se adesso io vado a visualizzarlo
un'altra volta ho indefinito perché la
proprietà non esiste più quindi
javascript mi ritorna indefinito ho
detto tutto solo una tra le cose da
aggiungere sulla keyword this
importantissima quando si
lavora con gli oggetti ed è anche non
troppo facile da capire tutte le sue
sfaccettature
io vi darò un
infarinatura di come si usa la this
perché non voglio andare troppo in
profondità con l'argomento perché questo
è solo un corso base o passiamo adesso
al esercizio per voi ho ideato questo
semplicissimo esercizio
eccolo qui io adesso vi spiegherò
l'esercizio poi contero' fino a 3 potete
mettere in pausa il video provare a
svolgere l'esercizio e poi rimettete in
play il video e non andremo a correggere
insieme allora l'esercizio è creare un
nuovo oggetto lo chiameremo gatto che
avrà tre proprietà razza colore e nome e
poi avrà un azione quindi un metodo che
sarà visualizzare un output
l'output voglio che venga visualizzato
qui e l'output deve essere un nuovo
gatto di nome pippo è un gatto grigio di
razza siamese quindi come avete visto
qui dovrete passare il valore delle
variabili direttamente dentro la stringa
una cosa che lo rende un po più
difficile è che io voglio che il nome
venga inserito dentro la proprietà in le
per minuscole però voglio che venga
visualizzato in lettere maiuscole dentro
la mia frase ok adesso conto fino a 3 e
poi il buon lavoro
123
eccoci qua andiamo a risolvere
l'esercizio allora creiamo il nuovo
oggetto chiamiamolo gatto come abbiamo
detto segno di assegnazione
abbiamo detto ciò le proprietà a razzo e
la proprietà razza e abbiamo detto a
e' siamese poi c'è il colore e
abbiamo detto che è grigio
poi c'è il nome e abbiamo detto che lo
vogliamo o scritto in piccolo che
abbiamo di tutti i pochi
e poi c'è l'azione che l'output la
chiamo azione giusto per e allora
function come abbiamo fatto prima
document.getelementbyid i display inner
html è qui il back tick e cominciamo
a scrivere l'output o un nuovo gatto di
nome e qui mettiamo il this nome virgola
gatto e qui mettiamo this colore perché
deve essere grigio di razza e qui
mettiamo la ultima proprietà che razza
se razza razza ok punto e virgola e
abbiamo fatto questo facendo così cosa
sto sbagliando
bisogna andare invocare il gatto azione
e qui io ho il mio output come vedete io ancora
il mio nome e lettere minuscole
permettono in lettere maiuscole si va a
usare la dovreste avere guardato la la
funzione delle stringhe toUppercase ecco
qui se adesso io vado a ri visualizzare
me lo trovo a lettere maiuscole volendo
c'è un metodo migliore per risolvere
questo per convertire lettere minuscole a
lettere maiuscole invece di usare il touppercase
direttamente dentro la proprietà
perché se poi io voglio accedere a
questa proprietà da un'altra posizione
mi troverò sempre la proprietà e lettere
maiuscole cosa che non è desiderabile
io tiro via qui è la inserisco
direttamente dentro qui come vedete
l'output non cambia però la conversione
a lettere maiuscole è solo se accedo e
se usano l'azione
altrimenti se io voglio accedere alla
proprietà del gatto nome mi verrà
visualizzato sempre in lettere minuscole
una cosa che non vi ho detto quando si
usano le back tick e questa maniera per
inserire le variabili di valore delle
variabili dentro a una stringa dentro
dentro alle parentesi graffe si possono
invocare funzioni come in questo caso si
possono fare somme si possono fare
qualche espressione algebrica quindi c'è
c'è parecchia via libera ad usare i back
tick quando si vogliono creare e stringhe
un po' complesse con questo è tutto
riguardo agli oggetti e ne riparleremo
di una specifica sezione come vi ho
detto e ci sentiamo alla prossima