Trascrizione: (click per espandere)

salve a tutti in questo video parlerò
della console
la console questa qui è uno strumento
importantissimo molto utilizzato dagli
sviluppatori anche se non tutti
conoscono a fondo tutte le
caratteristiche della console andando
andiamo a vedere come si può
visualizzare un output sulla console
mettiamo del testo qui del testo ecco
questa la maniera più semplice per
visualizzare del testo nella nella mia
console
però io posso visualizzare anche dei
valori di variabile dentro alla mia
console e quindi per esempio se io ho
una stringa la chiamo stringa e qui
metto stringa appunto e poi c'è una
variabile numero e metto un numero 10
e adesso voglio visualizzare questi
valori dentro al mio console log come
faccio allora ci sono tre metodi che
possono essere usati posso mettere una
virgola alla fine e poi mettere il nome
della variabili che voglio
visualizzare quindi ogni variabile deve
essere separata da una virgola
eccola qui quindi ho del testo poi
stringa 10 altro metodo è usando i back
tic in questa maniera
posso inserire i valori delle variabili
direttamente dentro al testo quindi il
progetto del e poi dentro ci metto il
valore della variabile stringa e poi ci
metto testo e poi ci metto il valore
della variabile numero e poi ci metto
puntini puntini giusto per far vedere che
riesco a metterli dentro al testo mentre
prima prima veniva visualizzato il testo
e poi valori delle variabili qui posso
mettere i valori variabili direttamente
dentro al testo e adesso andiamo a
vedere un terzo metodo una terza maniera
che l'insieme delle due si dice c-like
che vuol dire
simile al linguaggio di programmazione c
che si chiama c e come funziona allora
io le mie del e poi dentro ci metto
quando voglio visualizzare una stringa
metto %s percentuale s
mento ancora testo quando voglio
visualizzare un numero metto %d
ecco qui e poi mette i puntini
puntini
e poi metto separato dalle virgole i
nomi delle variabili che vogliono
visualizzare allora la prima una stringa
eccola qui quindi metto la stringa e poi
sarà un numero eccolo qui e come vedete
ho i miei valori di variabili inseriti
dentro il testo quindi s per la stringa
di per il numero
andiamo a vedere un'altra altre
caratteristiche della della mia console
la mia console fino adesso avete sempre
visto che uso il metodo log per scrivere
nella mia console però ci sono anche
altri metodi altri metodi utili ce ne
sono molti ve ne faccio vedere alcuni
quelli un po' più usati comunque
vi metto un link di iscrizione per
questa pagina
dove qui potete trovare tutti i metodi
della console
andiamo comunque andiamo a vedere per
esempio c'è il metodo un warning che
vuol dire attenzione e come vedete mi
gia' me lo mette in un colore diverso
perché così attira l'attenzione e poi
c'è il metodo error che è un metodo che
mi dice guarda che c'è un errore e melo
mette direttamente in rosso guarda che
c'è un errore
eccolo qui errore un caso utile in cui
può essere usato il warning o error
a differenza del log per esempio in un
blocco condizionale se la condizione è
vera
usa il console log se la condizione
falsa vuol dire che c'è qualcosa che non
va
usano il warning od usa l'errore giusto
per attirare l'occhio dello sviluppatore
dire che c'è qualcosa che non va andiamo
a vedere un altro metodo
assert, il metodo assert che vuol
dire asserisci assert
quindi per esempio gli dico io
asserisco che la mia variabile il numero
è maggiore di 30 e poi dico nel caso
questa espressione risulti vera
javascript ignora questo messaggio se
questa espressione risulta falsa
javascript
visualizza questo messaggio questo
messaggio qui quindi andiamo a vedere
mi dice numero e' maggiore di 30 falso
quindi visualizza questo messaggio
eccolo qui se io mettevo numero è minore
di 30
non vedevo niente quindi io asserivo che
numero era minore di 30
questo può essere usato per fare
debugging eccetera come avete visto
anche nel video precedente quando ho
parlato di come si fa debugging e può
essere usato il metodo assert e può
risultare molto utile andiamo a vedere
altri metodi
c'è il metodo time allora console time
a cui dove si dice do una etichetta do
una label quindi la chiamo loop perché
adesso vado a inserire un loop poi metto
un loop qui
let i = 0 poi metto i minore di un numero
grande se non si vede mettiamo qui e poi
metto i++ qui non mi interessa che
codice vario non mi interessa vedere e
poi vado a console timeEnd
uso la stessa etichetta
andiamo a vedere eccolo qui come vedete
quando io uso console time
io prendo il tempo e poi quando io uso
timeEnd vado a fare la differenza tra
il tempo tra nel momento in cui
javascript e raggiunge questa riga a
quando javascript aveva
iniziato questa riga
quindi per eseguire questo loop di un
miliardo di iterazioni javascript ci ha
messo 711 millisecondi
ve lo faccio rivedere così ve lo faccio
rivedere ricaricando la pagina eccolo qui
730 millisecondi e perché uso le
label perché potrei avere diversi
timer nel mio codice quindi
per dire inizia il timer per loop e
finisce il timer per loop devo usare la
stessa etichetta qui potrei avere altri
timer con differenti
etichette o un altro
un altro un altro metodo utile per
esempio il metodo group e lo uso qui e
anche qui ci mette un etichetta la
chiamo miei-logs e qui chiudo giusto per
vedere poi dove lo chiudo con il group end
e uso la stessa etichetta perché
anche qui potrei aver diversi console group
sparsi nel mio codice
andiamo a vedere ecco come vedete il log
compresi da group e groupEnd vengono
ora vengono diciamo
racchiusi dentro a
i miei-logs qui dalla mia etichetta
come vedete io posso anche chiuderli
aprili in questa maniera
io posso avere una console più ordinata
se ho molti output nella mia console e
posso raggrupparli in maniera da
tenere la mia console un po più
ordinata allora sei uso group qui la
mia la visualizzazione sarà aperta però
posso anche usare groupCollapsed
eccolo qui e quindi lei inizia
chiusa e poi io posso aprirla ecco la
guida come vedete il mio loop è fuori
dal dal gruppo e quindi lo si vede fuori
un altro esempio è console table
e io qui dentro ci posso passare
dentro un oggetto per esempio ci posso
mettere uno che vale 1 e 2 che vale 2
andiamo a vedere come viene visualizzato
ecco qua come vedete mi viene
visualizzato questo oggetto sotto forma
di tabella potrebbe essere anche un array
andiamo a vedere se io ho un array qui
array diciamo 1 2 e 3
facciamo anche 4 se lo scrivo
giusto
1234 andiamo a vedere ho sbagliato
qualcosa
sì perché non sto usando le stringhe
eccolo qua come vedete sotto forma di
tabella ho il mio
il mio output potrai anche usare un array
multidimensionale quindi se io chiudo
questi due valori qui dentro un altro
array come in questo caso vediamo cosa
succede eccolo qua come vedete adesso
c'è una tabella con tra colonne
ecco qui ci sono molti altri metodi per
la console
questi sono quelli più usati quelli un
po' più famosi comunque come vi ho
detto vi metto il link in descrizione e
vi faccio vedere un'altra cosa allora io
qualche tempo fa, svariato tempo fa ho
creato una piccola libreria per
lavorare con la console perché mi dava
noia ogni volta a dover scrivere console
log eccetera io volevo scrivere i miei i
miei output in maniera un po' più veloce
cosa ho fatto ho scritto una piccola
libreria che l'ho chiamata smart-console
eccola qui e la trovate in GitHub in
GitHub vi inviterò comunque il link
descrizione se non sapete cos'è GitHub è
un repository , un posto dove
tutti gli sviluppatori del mondo ci sono
migliaia di sviluppatori dentro qui che
mettono il loro codice e la gente lo può
copiare lo può scaricare eccetera può
anche aggiungerci delle funzionalità
eccetera
uno snodo importantissimo per lo
sviluppo trovate tutti i linguaggi di
programmazione
comunque nella mia pagina qui
potete trovare questa piccola libreria
qui c'è scritto tutto quello che serve
per usarla qui ci sono tutti i metodi
per usarla e adesso vi faccio vedere un
esempio voi potete provare usarla potete
fare diverse cose allora la libreria
sotto forma scritta in maniera normale
questa qui o c'è anche in maniera
minificata quindi in maniera compressa
che questa allora vi faccio vedere come
si può usare questa libreria allora
intanto vi faccio vedere che qua è già
scritto tutto cosa devete fare allora
dovete creare un file nella vostra
cartella che si chiama smart-console
come questo qui è dentro ci copiate il
codice potete copiare il codice da qui o
da qui non cambia niente io prendo
questo eccolo qui allora io copio il
codice e lo incollo qui e salvo il file
poi vado qui e cosa mi dicono qua mi
dice di inserire questa linea qui
nella mia head è posso usarla quindi
qui l'ho gia' messa dentro qui eccolo qui
e adesso vi faccio vedere come funziona
torno nella mia pagina
allora adesso io invece di usare console
log uso c che sta per console è l che
sta per log se adesso io vado a
visualizzare come vedete io con solo due
lettere faccio lo stesso lavoro della
mia console log e io ho creato dei
metodi diciamo delle scorciatoie per
ogni metodo quindi anche per esempio se
voglio usare il console warning faccio
così eccolo qua
warning e non solo per i
log potete anche visualizzarli in
maniera colorata ad esempio potete fare
c log e poi se la volete che ne so in
blu mettete la b in maniera maiuscola
e poi mettete un po' di testo dentro è
come vedete se la volete in blu se volete
blu e col background blu
mettete sempre lettere del colore in blu
la lettera maiuscola per il colore poi
bg per background andiamo a vedere
cosa succede
eccolo ma come vedete avete il
background blu potete usare guardatevi
un po gli esempi come vedete andiamo
scorriamo sotto qui ci sono tantissimi
esempi di colore e di anche potete
cambiare la dimensione eccetera quindi
dateci un'occhiata fate qualche
esperimento nessun problema con questo è
tutto ci sentiamo la prossima ciao