Trascrizione: (click per espandere)

salve a tutti in questo video andrò a
seguire tre dei vostri suggerimenti
il primo suggerimento e cercare di
usare dei font e un po più grandi quindi
qui è ingrandito un po' al 110%
spero di ricordarmi anche negli altri
video il secondo suggerimento è di non
italianizzare la pronuncia della parola
array quindi cercherò di dirla sempre
più o meno come lo dicono gli inglesi
e il terzo suggerimento
è di fare più esercizi e quindi questo
video è dedicato agli esercizi
questo è il primo di tre video
dedicati agli esercizi in questo video
vado a presentare sei esercizi
nel secondo video andrò a risolvere i
primi 3 e nel terzo video andro' a
risolvere gli ultimi tre ho fatto questo
per questioni di tempo di me altrimenti
diventa troppo lungo tutto il video
allora andiamo a vedere intanto
che esercizio ho ideato allora nei
primi tre esercizi io voglio usare un
input un input di tipo text fino ad
adesso non li ho mai fatto vedere come
si può maneggiare un input text usando
javascript però qui sopra
vi faccio vedere cosa si può fare si può
dare un'id al mio input e poi si può
usare document.getelementbyid quindi id
dell'input e la proprietà value la
proprietà value ritorna che è stato inserito la stringa che e'
inserita dentro l'input e quindi si può
andare a salvare dentro ad una variabile
stessa cosa le si può assegnare un
valore quindi value uguale e io assegno
il mio valore e vado ad assegnare una
stringa all'input semplicissimo premetto
che questi esercizi possono essere
risolti o meglio per risolvere questi
esercizi
basta aver guardato i video del
tutorial ho cercato di coprire un po'
tutti gli argomenti
che ho trattato con i miei video quindi in
teoria non dovreste avere problemi per
risolverli
io poi quando andrò a risolverli cercherò
di farvi vedere qualcosa di nuovo
qualcosa che magari non vi ho mai
fatto vedere però ogni esercizio può
essere risolto con le nozioni che avete
appreso fino ad ora
allora il primo esercizio e l'esercizio
classico che trovate un po' ovunque è
creare una tabellina con un numero
io l'ho un po' modificato che quindi
lascio la possibilità all'utente di
inserire il numero quindi
l'utente può inserire un numero che ne
so
4 cliccando su calcola viene
visualizzata la tabellina del 4 se mette
46 clicca su calcola e tabellina del 46 se
mette 468 e così via tabellina e questo
è un esercizio molto semplice diciamo un
esercizio di riscaldamento poi passiamo
all'esercizio numero 2 visualizzare e
invertire una stringa allora inserire
una stringa e visualizzare ogni
carattere a mano a mano che si
sta inserendo la stringa e vado a
visualizzare il carattere sotto io ho
messo un div sotto qui
e poi quando clicca sul bottone inverti
voglio invertire i caratteri della
stringa andiamo a
vedere un esempio allora per esempio
cominciò a scrivere qwerty e come vedete
a mano a mano che scrivo automaticamente
mi viene stampata la lettera sotto così
poi clicco su inverti e mi viene
invertita la stringa qui vi do un
suggerimento su questo su questo
esercizio vi suggerisco di usare
l'evento onkeyup vi suggerisco questo
perché appunto questo non l'abbiamo mai
visto come evento anche se nel video
dove parlo degli eventi vi avevo
messo un link dove potete trovare
anche l'evento onkeyup qui io voglio
solo dare un suggerimento di usare
l'evento onkeyup esercizio numero 3
esercizio numero 3 qui a inserire una
stringa e poi farla scorrere cliccando
sul bottone scorri o fermarla quando
clicco su ferma andiamo a vedere
sempre metto dentro una stringa non so
qwerty e quando clicco su scorri come
vedete qui mi sta scorrendo la stringa
poi clicco su ferma e la blocco scorri
ferma scorri ferma esercizio
numero 4 creare una tabella 10 x 10 con
un numero diverso da 1 a 100 inserito in
ogni cella
quindi la mia tabella abbiamo già
visto un video dove io vado a creare la
tabella quindi non dovrebbero essere
problemi per fare quello poi dovete un
po' pensare come fare a
inserire questo numero da 1 a 100 dentro
alle celle della tabella poi
visualizzare in console il tempo che
javascript ci impiega per creare la
tabella quindi apro anche la console così
potete vedere allora io quando clicco su
creata tabella mi viene generata questa
tabella 10 x 10 e come vedete al
suo interno c'è un numero diverso e
parte dall'1 che e' questo qui e arriva
fino al 100 che è questo qui e javascript
ci ha messo 0.45 millisecondi poi se
io schiaccio ancora crea tabella ci ha
messo stavolta 0.87 millisecondi e così
via
e questo è l'esercizio numero 4
esercizio numero 5 premere un bottone e
che sarebbe questo qua è creare un
bottone per ogni safe color per chi non
sa cosa sono i safe colors ho messo qui
un link che parla di safe colors and
safe color è una combinazione di colori
216 colori è una combinazione di colori
né esadecimali dove i valori del red
del green e del blu possono essere o 00
o 33 o 66 o 99 o cc o ff quindi ci sono
6 combinazioni per ogni colore per tre
colori quindi 6 x 6 x 6 fa 216 colori
quindi io qui cosa chiedo creare quando
io clicco su sto bottone voglio creare
216 bottoni, un bottone per ogni safe
color e quando io clicco su quel bottone
voglio colorare il background della mia
pagina allora io click qui e come vedete
ho creato 216 bottoni ogni bottone ha associato una combinazione di
colori allora per esempio se clicco questo è un blu questo è un blu più chiaro
questo è un porpora questo è un
azzurrino questo
rosa elettrico che ne so questo come
vedete comunque ci sono tutti i colori
l'ultimo colore è il bianco è il primo
colore nero e questo è l'esercizio
numero 5 ultimo esercizio è stati con
l'euro usare una API per visualizzare
il numero totale di stati che usano l'euro
io qui vi ho messo l'Url
della API eccola qui questa è la API da usare
allora io la vedo in maniera molto
leggibile perché sto
usando una specifica estensione di
chrome che si chiama è questa qui si
chiama json view ci sono molte altre
plugin per chrome che fanno questo
lavoro per esempio c'è json formatter
potete usarlo oppure potete anche
non usarlo e se non lo usate potreste
vedere tutti questi dati in maniera
compatta quindi poco leggibile chi usa
firefox ha già uno strumento built in
simile a questo quindi va benissimo
e cosa mi ritorna a questa AP come
vedete mi ritorna un array che ha degli
elementi ogni elemento è un oggetto e
ogni oggetto ha diverse proprietà e
quindi diverse informazioni cosa voglio
fare gli ho detto allora io voglio
visualizzare quando clicco su usa API
voglio visualizzare il numero di stati
che usano l'euro che sarebbe il numero
degli elementi di questo array
allora io clicco usa API e come vedete
totale ci sono 36 stati che usano l'euro
tramite un prompt voglio che l'utente
inserisca il nome
di uno stato il nome dovrà essere in
inglese e poi un alert con
un messaggio informerà l'utente se
quello stato usa l'euro oppure no
il tutto deve funzionare con lettere sia
con lettere maiuscole che con lettere
minuscole quindi andiamo a vedere io
click su stato qui c'è il mio prompt
inserire un nome di stato è per esempio
ci metto dentro italy poi
clic su ok e adesso io ho l'alert
lo stato italy usa l'euro
come ho detto deve funzionare con
lettere maiuscole e minuscole quindi se io
clicco su stato e metto tutto dentro in
lettere maiuscole come in questo caso
continua a funzionare se io
metto dentro uno stato che non ha euro
per esempio il cile lo stato cile
no non usa euro e questo è il sesto
esercizio come vi dicevo io ho già
coperto nei vari video del tutorial
tutto quello che serve per completare
questi esercizi
non ho altro da aggiungere
spero che riusciate a risolverli
vi metto tutti il link in
descrizione quindi vi metto anche questo
file in descrizioni quindi potete
scaricarvi già tutte le descrizioni
degli esercizi eccetera potete scaricare
i file con questo è tutto
ci sentiamo la prossima ciao