Esercizi in JavaScript, parte 3 di 3

In questo video vedremo come possono essere risolti gli ultimi 3 esercizi che avevo presentato nel video 10 della sezione 9.
Per completare gli esercizi, andrò ad usare: cicli "for" e "for..of", il metodo random() dell'oggetto built-in Math, il metodo push() e some() degli array, la fetch() API e infine un alert() e un prompt().
Prenderò l'occasione durante l'esercizio numero 4 per parlare delle funzioni ricorsive e vedremo come, a volte, sia possibile usarle al posto di un ciclo "for" o un ciclo "while".
Con l'esercizio 5 vedremo come possono essere usati i Web Safe Colors e con l'esercizio 6 vedremo come usare i dati provenienti da una API pubblica: stati che usano l'euro.

Trascrizione: (click per espandere)
salve a tutti in questo video vado a
risolvere gli ultimi tre esercizi che
avevo proposto un paio di video fa
allora l'esercizio e' l'esercizio numero 4
creare una tabella 10 x 10 con un numero
diverso da 1 a 100 inserito in ogni
cella e andiamo a vedere come si può
fare questo allora io facciamo esercizio
4
io ho già un div dove visualizzare la
tabella è un bottone con la funzione
crea tabella associata all'evento
onclick quindi adesso vado a crearmi una
funzione che chiamo crea tabella
abbiamo già visto come si può creare una
tabella con un ciclo for innestato
dentro ad un ciclo for e quindi vado a
fare lo stesso table e qui metto border
uguale uno è qui e qui metto il ciclo
for let i uguale a zero e i minore di 10, i++
e poi comincio a scrivere dentro la mia
riga della tabella allora simbolo di
concatenazione tag della riga della
tabella tr e poi ci metto dentro
secondo for let ii uguale a zero, ii
minore di dieci e poi ii++ ecco qui e adesso
ancora vado a crearmi la cella una per
una allora simbolo di concatenazione qui
usi backtics e poi ci metto dentro il
tag della cella qui per
inserire il numero andrò a creare una
funzione che mi ritornerà un numero da 1
a 100 quindi posso chiamarla estrai
numero
questa è la mia funzione che adesso andrò
a costruirmi e poi chiudo la cella poi
fuori dal mio ciclo for vado a chiudere
la mia riga e poi vado a
chiudere la tabella bello e poi vado a
visualizzare la tabella dentro il div
getElementById di abbiamo già visto farlo
quindi non c'è niente di nuovo tabella
numero innerHTML dentro ci metto tab
questa funzione mi crea questa
questa tabella 10 x 10 adesso devo
andarmi a costruire la funzione che mi
ritorna il numero da inserire dentro
allora se dovessi scegliere un ciclo per
fare questa funzione sceglierei un do..while
però colgo l'occasione per farvi vedere
qualcosa di nuovo allora io vado a
crearmi una una cache che conterrà
un array scusate e allora qui
cache gli assegno l'array vuoto e poi la
funzione estrai numero vado a costruirmela qui function estraiNumero
quindi io voglio che questa funzione mi
generi questo numero random da 1 a 100 e
lo ritorni dentro alla mia cella
l'idea adesso qui è crea un
numero random da uno a 100 controllo che
non sia già stato estratto bene allora lo ritorno
dentro la cella se già stato estratto
faccio un'altra estrazione
di un altro numero random finchè non
trovero' un numero che non è stato
estratto quando trovo un numero che non
è stato estratto lo vado ad inserire
dentro al mio array che diventerà una
memoria dei numeri estratti fino a
quel momento
allora io adesso devo costruirmi
l'espressione che mi ritorna il numero
random da 1 a 100
non voglio perdere tempo a pensare come
fare cosa faccio vado online e scrivo js
random eccolo qui trovate un bel
link per w3school che vi ho messo
molto link verso questo questo sito
qui perché c'è molto materiale come
vedete c'è già un espressione che mi
dice il ritorno al numero random da 1 a
100 che è proprio quello che serve a me
e quindi copio e non devo stare lì a
perdere tempo a pensare come farlo
allora adesso io creo la mia
variabile numero dove vado a salvare il
numero random e poi cosa faccio se la
mia cache include quindi vuol dire se
dentro al mio array c'è il numero random
che è stato estratto fa qualcosa se non
c'è salvalo dentro la cache e quindi
metto push il numero quindi vado a
salvare il numero dentro al mio array e
poi anche lo ritorno in maniera che
possa andare a inserirlo dentro alla mia
cella cosa faccio se il numero random
hai già stato estratto e quindi è già
dentro la mia cache
faccio questo ritorno estraiNumero
praticamente se il numero è già stato
inserito dentro la cache e quindi vuol
dire che e' già stato estratto richiama la
funzione richiama se
stessa questo tipo di funzioni si
chiamano ricorsive quando una funzione
richiama se stessa si dice ricorsiva e
questa è una maniera per creare un ciclo
senza dover usare o un ciclo for o un ciclo
while un ciclo do while
si potrebbe risolvere lo stesso esercizio usando per esempio un
do/while però in questo caso ho preso
l'occasione per farvi vedere qualcosa di
diverso che era funzione ricorsiva
comunque andiamo a vedere se funziona
tutto come dovrebbe
eccola qua io c'ho la mia tabella 10 x
10 con un numero random da 1 a 100 e
con un numero random diverso in ogni in
ogni cella poi io avevo messo anche
che voglio visualizzare
quando tempo ci mette javascript per
creare la tabella e questo lo posso fare
con un console time che l'abbiamo già
visto console.time e ci
metto un flag tab e poi lo stesso lo
metto anche sotto qui timeEnd che
quando ha finito di fare tutto questo
lavoro mi fa vedere quanto tempo ci ha
messo è un'altra cosa che potrebbe
essere interessante è quanti tentativi
fa estrazione la chiamo quanti tentativi
fa javascript per trovare 100 numeri
random che non siano uguali tra di loro
e quindi posso fare così e quello metto
dentro qua estrazione++ andiamo a vedere
allora adesso apro la mia console
crea tabella non sta visualizzando però
riproviamo eccolo qua allora per creare
questa tabella js ci ha messo
0.69 millisecondi è ha fatto 429
iterazioni di questa funzione per
trovare 100 numeri random quindi cosa vuol dire ha estratto 429 numeri per
trovarne cento che non siano uguali tra
di loro andiamo a fare un altro esempio
in questo caso 622 in questo caso 337
ecco qui e questo all'esercizio numero 4
andiamo a vedere l'esercizio numero 5
allora l'esercizio numero 5 cliccando sul bottone vado a creare un
bottone per ogni safe color e cliccando
su uno di quei bottoni voglio colorare
il background abbiamo visto l'altra
volta vi ho fatto vedere velocemente
cosa sono i web safe color sono
la combinazione di di 216 colori e ogni
colore quindi rgb può avere
il numero esadecimale può
essere 00 33 66 99 CC FF quindi la
combinazione di questi numeri per
ogni colore quindi per ogni per il
rosso per il verde per il blu quindi 6 x
6 x 6 mi genera 216 colori andiamo a
vedere come si può risolvere l'esercizio
allora esercizio 5
allora io qui ho già questa funzione
crea bottoni colori che quando che hanno
associata all'evento onclick del
bottone e poi c'è un div dove andrò
visualizzare i bottoni
allora prima di tutto io creo un array
che lo chiamo colori con le varie
combinazioni di valori esegesimali
allora abbiamo detto 00 poi abbiamo 33
poi abbiamo 66 poi abbiamo 99 poi
abbiamo CC e poi abbiamo FF quindi abbiamo sei combinazioni per 3
colori e quindi adesso io creo la mia
funzione function crea bottone con
colore e cosa faccio qui creo tre cicli
for innestati allora il primo è per il
colore
red quindi r di colori poi dentro ci
annido un altro un altro ciclo for e
questo è per il green e quindi rg
e poi ci annido un altro ciclo
for per il blu quindi rgb
eccolo qua quindi rgb tutte le
combinazioni
mi verranno eseguite da questi tre cicli
for innestati e poi vado a creare una
variabile la chiamo
bottone che è una stringa vuota e qui
vado a popolare questo bottone simbolo
di concatenazione back ticks e dentro
ci metto subito il tag html per il
bottone quindi button e ci metto anche
subito un evento onclick associato qui
è l'evento onclick posso
associare la funzione la chiamo
colora background che accetta un
argomento è l'argomento sarà il colore i
valori esegesimali quindi metto ci
metto già hash e poi ci metto
back tick e quindi metto r più g più b quindi
io ci passò direttamente dentro la
funzione l'argomento coi colori in
esegesimale poi lo stesso vado a
visualizzarlo come testo del bottone
eccolo qui e poi chiudo il tag del
bottone e poi vado a inserire dentro al
mio div che ho chiamato bottoni
vado a inserirci tutti i bottoni che ho
generato e adesso vado a crearmi la
funzione colora background la funzione
colora background posso metterla qua
sotto
allora function colora background che mi
accetta un colore e cosa fa
semplicissimo document body style
background color e dentro ci metto il
colore che sto passando qui
andiamo a vedere se funziona tutto come
dovrebbe
ok qui allora ho generato i miei 216
bottoni come vedete c'ho tutte le
combinazioni di colori e poi se io click
qui coloro background
blu qui c'è un verdino
qui c'è verde un po più verde
qui c'è un porpora e vari colori
l'arancione ecco e questi sono 216
bottoni creati con cos'è 4 5 righe di
codice
andiamo a vedere l'ultimo
esercizio l'esercizio 6
ecco allora l'esercizio 6 dice usare una
e api per visualizzare il numero
totale di stati che usano l'euro la api
è questa qui allora questo api
ritorna un array e questo array
ogni elemento è un oggetto che ha
tantissime proprietà vedete tantissimi
dati a me interesserà solo la proprietà
name quindi ogni oggetto avrà la
proprietà name quindi andrò a lavorare
con la proprietà name e poi cosa dice
tramite un prompt
inserire il nome di uno stato
e visualizzare in un alert un
messaggio di conferma errore se lo stato
nella lista e tutto deve funzionare sia
con lettere maiuscole e minuscole
allora andiamo a lavorare con
l'esercizio 6
allora io qui ho già creato il bottone
usa api dove
ho messo un evento onclick per la
funzione fetch data quindi adesso io vado
a crearmi la funzione fetch data allora
intanto qui ciò data che si scrive in inglese
e quindi la mia funzione fetch data allora
io qui voglio andare a lavorare con una
richiesta a un server quindi normalmente
è un lavoro che si fa in maniera
asincrona quindi questa funzione sarà
una funzione asincrona e allora qui
metto data uguale await e poi uso
la fetch() api che abbiamo
già visto come funziona qui si passa
solo url che mi serve è questo qui
ecco qui e quindi questa
richiesta al server mi ritornerà
tutti questi dati sottoforma di promise
adesso io devo andare a estrapolare
il valore in formato json e come
faccio data uguale await data
punto json ecco qui quindi e poi questo
data qui avrà tutto il mio array con tutti
gli elementi e tutti gli oggetti
inseriti dentro al mio array adesso
vado a visualizzare che mi sa che
l'avevo chiesto il numero totale di
stati che usano l'euro e quindi dove lo
vado a visualizzare lo vado a
visualizzare
intanto copio questo
allora io ho messo un div che ho
chiamato totale paesi e lo metto qui
totale paesi e dentro ci metto data anzi
facciamo qualcosa un po più lunga
ci metto in totale ci sono data dot length
che
usano
euro che usano l'euro
eccolo qua e quindi io vado a
visualizzare siccome so che è un array
vado a visualizzare il numero totale
degli elementi dell'array quindi
posso crearmi questa scritta, fatto
questo dico voglio che l'utente possa
inserire il nome di uno stato e quindi
vado a usare il bottone stato qui c'è
associato una funzione mostra prompt
all'evento onclick quindi adesso faccio
function mostra prompt
ecco quindi cosa faccio vado a creare un
prompt quindi const stato prompt e
metto un messaggio inserire un nome di
stato ecco qui
e poi cosa vado a fare quando l'utente
avra' inserito il nome di uno stato lo
vado a salvare dentro qui adesso cosa
devo andare a fare devo andare a
controllare che dentro al mio array data
ci sia il nome di quello stato
come faccio allora metto un'altra
variabile e la chiamo euro vado a
usare un metodo degli array il
metodo some e quindi io metto data punto
some e questo metodo accetta una call
back che andiamo a scrivere subito
allora visto che un paio di
video fa ho fatto vedere come usare le
arrow function in maniera molto sintetica
andiamo a usare la stessa maniera quindi
elemento dell'array e poi che
mi ritornerà l'elemento
elemento punto name la proprietà name
perché io qui voglio andare a lavorare
con la proprietà name del mio elemento
quindi l'elemento sarà tutto l'oggetto e
la proprietà name sarà questa proprietà
poi ho detto che deve essere case
insensitive quindi voglio trasformare
tutto
in lettere minuscole e vado a compararla
contro allo stato che è stato inserito
dall'utente stato è anche questo e lo
vado a trasformare in lettere minuscole
toLowerCase e quindi usando
trasformando tutto in lettere
minuscole a me non interessa come è
stato inserito il nome dall'utente se
l'ha scritto in lettere maiuscole
minuscole e non mi interessa come è
stato scritto dentro la api perché trasformo
tutte le lettere in minuscole
allora se vi ricordate il metodo some
esegue questa funzione per tutti
gli elementi dell'array se trovo un
elemento che corrisponde
alla comparazione all'espressione che
sto passando mi ritorna vero quindi se
c'è un elemento dentro al mio array che
ha un nome che corrisponde al nome
inserito dall'utente
la mia variabile euro
diventerà vera e quindi dopo io vado a
fare euro
quindi se è vero posso stampare abbiamo
detto che faccio un alert anzi qui uso
backticks stato inserito
usa euro altrimenti
non usa l'euro ecco qui andiamo a vedere
se funziona tutto come ci aspettiamo
allora io clicco usa api e come vedete
adesso qui mi ha stampato in totale
ci sono 36 che usano l'euro ho dimenticato
di scrivere stati 36 stati che usano l'euro
andiamo a riprovare
in totale ci sono 36 stati che usano
l'euro poi io faccio stato prompt
per esempio l'utente
inserisce italy
ok lo stato italy usa l'euro
adesso faccio di vedere se io
scrivo anche tutto in di lettere
maiuscole lo stato italy usa l'euro
se io metto uno stato che non esiste
che non ha euro per
esempio che ne so il cile lo stato
cile non usa l'euro ecco qui abbiamo
risolto anche il sesto esercizio io
spero di avervi fatto vedere qualcosa di
nuovo spero che comunque voi
siate riusciti a completare gli
esercizi da voi stessi e adesso potete
andare a complicarvi la vita
complicare gli esercizi che vi ho fatto
vedere in maniera da cercare di
migliorare le vostre le vostre nozioni
non lo so per esempio potete fare
interagire l'utente per esempio con
esercizio 6 chiedere più informazioni riguardo agli stati
oppure con l'esercizio 2 e 3 metterli
insieme vedete voi spazio alla
fantasia con questo è tutto ci sentiamo
alla prossima ciao
File del video: