Trascrizione: (click per espandere)

salve a tutti in questo video andremo a
risolvere tre degli esercizi che vi ho
presentato nel video precedente andrò a
risolvere i primi tre per questioni di
tempo gli altri 3 li vedremo nel
video successivo allora non esiste una
maniera giusta una maniera sbagliata per
risolverli l'importante è riuscire a
risolverli io prenderò l'occasione per
usare magari qualcosina di diverso farvi
vedere qualche
metodo qualche stratagemma che fino
adesso non vi ho fatto vedere ancora
però come vi avevo detto gli esercizi
possono essere risolti con
tutto quello che ho coperto nei vari
video del tutorial quindi non dovreste
avere avuto problemi
allora andiamo a vedere come risolvere
il primo esercizio primo esercizio è
creare una tabellina in base al numero
inserito dall'utente
io messo da 1 a 10 però può essere qualsiasi numero dall'1 al 10 e andiamo
a vedere come si può risolvere
io ho già messo per questioni di tempo
sempre gia' degli id all'input poi ho
messo un evento un click nel bottone con
la funzione calcola tabellina e poi ho
anche già messo un div sotto
l'input così da andare a visualizzare la
tabellina andiamo a vedere allora
esercizio 1
andiamo creare la funzione calcola
tabellina allora io voglio salvarmi il
valore che c'è dentro all'input quindi
vado a usare la proprietà value come vi
avevo detto l'altra volta e con
l'id dell'input tabellina poi creo
una variabile tab che è una stringa
vuota per il momento è adesso andiamo
popolare la stringa vuota con un ciclo
for let i è uguale a 1 perché voglio
cominciare da uno, i minore di 11 perché
voglio 10 iterazioni ++ e dentro qui
ci metto tab simbolo di concatenazione
back tiks comincia a scrivere il testo
allora val poi ci metto una ics e poi
ancora la i e poi uguale e poi vado a
proprio farmi il calcolo quindi il val
moltiplicato i e poi ci metto un accapo
ecco qui poi vado a visualizzare il
tutto dentro al mio div questo
e id visualizza tabellina è qui innerhtml
e dentro ci passo tab ecco qui andiamo a
vedere se funziona tutto come dovrebbe
perfetto semplicissimo questo era un
esercizio di riscaldamento un esercizio
classico che si trova un po' dappertutto
andiamo a vedere l'esercizio numero due
allora esercizio il numero 2
visualizzare una stringa voglio
visualizzare le lettere a mano a mano
che le digiti in input e poi quando clicco
inverti voglio invertire le lettere
della stringa
allora io ho già associato nel mio input
ho inserito un evento onkeyup
come vi avevo suggerito di usare e
una funzione visualizza stringa e adesso
andiamo a creare la funzione function
visualizza stringa e questa funzione mi
verrà invocata ogni volta che un tasto
della tastiera viene rilasciato quindi
io vado a prendere voglio andare a
visualizzare dentro al mio div che si
chiama mostra stringa voglio andare a
visualizzare il valore del mio input e
il mio input si chiama input stringa
ecco qua quindi prendo il valore dal mio
input e lo inserisco
direttamente dentro il mio div in
questa maniera
andiamo a vedere se funziona e come
vedete io a mano a mano che inserisco
le lettere mi vengono visualizzate
sotto
adesso andiamo a fare l'inversione della
stringa allora io ho già associato al
mio bottone inverti un evento onclick e una funzione inverti stringa andiamo a
vedere come si può costruire
questa funzione inverti stringa allora
io salvo sempre il valore del mio input
dentro una variabile val la chiamo ecco
qui quindi salvo e il valore dell'input
dentro alla mia variabile val poi
io uso il metodo split per separare
tutte le lettere della mia stringa e
salvarle come elementi di un array ci
metto anche un console.log cosi' potete
vedere con me come risulterà dopo questa operazione
quindi io qui vado a separare tutte le
lettere della stringa e il metodo
split mi ritorna un array che ha come
elementi le lettere della stringa e
quindi questa val
diventerà un array poi uso il metodo
reverse che il metodo degli array per
invertire gli elementi che ha al suo
interno e poi vi faccio un altro console.log
così potete vedere come funziona
e infine vado a ricongiungere la stringa
quindi col metodo join vado a
ricompattare gli elementi dell'array
quindi le lettere in una
stringa però in questo momento a questo
punto avrò le lettere invertite e poi
vado a visualizzarli allora vado a
visualizzarle sia dentro all'input e
quindi ci metto val che dentro al div
poi qui apro così si vede un po
andiamo a vedere allora come vedete qui
funziona tutto perfettamente quando
clicco inverti la stringa è stata
invertita e come vedete dopo il metodo
split mi trovo un array che ha
ogni elemento una lettera della
stringa e dopo il metodo reverse mi
trovo che gli elementi del mio array è sono stati invertiti
poi col metodo join vado a
ricompattare la stringa e come vedete
funziona tutto perfettamente
andiamo all'esercizio 3
ecco qui esercizio 3
dice voglio inserire una stringa e
quando clicco scorri la voglio far
scorrere qui sotto e quando clicco ferma
voglio farla fermare
allora io ho già creato questi due
bottoni a cui ho associato un evento
onclick
la funzione scorri stringa però la
funzione passa un argomento scorri
la stessa funzione lo associata
sempre ad un evento onclick per il
bottone ferma però in quel caso passa
ferma allora andiamo a vedere come si
può creare questa funzione
allora questo è l'esercizio 3
allora innanzitutto mi serve una
variabile in cui andrò a inserire
l'intervallo poi funzione
scorri stringa ed entro il parametro
azione che sarà ferma o scorri allora se
azione è uguale a scorri cosa vado a fare
quindi se voglio far
scorrere la stringa vado a prendere il
valore dell'input
qui e lo salvo dentro alla mia variabile
val poi creo l'intervallo quindi
intervallo lo salvo dentro alla
variabile int e quindi setinterval
l'intervallo mi serve per dare il senso
di scorrimento e ci passo dentro questa
funzione cosa voglio fare, voglio andare
a visualizzare il valore della stringa
dentro il mio div e quindi faccio così
allora è l'input a input stringa
scorrevole e lo metto qui è il div
stinga scorrevole come id e lo metto qui
allora vado a visualizzare la stringa
dentro al mio div
e poi cosa faccio per risolvere questo
esercizio ho deciso di usare il metodo
substring che è un metodo che non vi ho
mai fatto vedere e quindi vi faccio
vedere un po' come funziona allora per
esempio io ho una stringa che si chiama
sempre qwerty mettiamo e a me servono le lettere dall'indice se vi ricordate si
può accedere alle lettere della stringa
attraverso il loro indice come se fosse
un array quindi se a ma servono le
lettere dall'indice 1 fino all'indice 4
non compreso quindi le lettere w e r vado ad usare il metodo substring che mi
ritorna le lettere per esempio
dall'indice 1 abbiamo detto quindi la w
fino all'indice 4 non compresa
che sarebbe la t e come vedete mi
ritorna
la w la e e la r io posso usare anche
il metodo substring senza specificare
il secondo argomento e quindi in quel
caso mi ritorna tutte le lettere dall
indice che ho indicato qui fino alla
fine della stringa allora andiamo a
vedere allora io qui creo una
nuova variabile che la chiamo primo
carattere e ci salvo dentro la
prima lettera della stringa in questa
maniera qui poi vado a usare la funzione
substring partendo dall'indice 1
quindi vado a dire ok ritornami tutta
la stringa partendo dalla seconda
lettera e in coda ci aggiungo il primo
carattere in questa maniera
quindi mi ritroverò che dentro a questa
variabile avrò la stringa con la prima
lettera attaccata alla coda e poi ci
metto che l'intervallo delle girarmi
deve invocare questa funzione
ogni 150 millisecondi
nel caso quindi questo e' else io
invochi questa funzione con l'azione ferma vado a bloccare l'intervallo e quindi
per bloccare l'intervallo si usa clearinterval e dentro il nome della
variabile che mi contiene
l'intervallo ecco qui andiamo a vedere
se funziona tutto come dovrebbe
allora io ci metto dentro qwerty quando
clicco scorri come vedete mi scorre
quando clicco ferma
mi ferma scorri ferma scorri ecco qui
questi sono i primi tre esercizi
come avete visto è tutta roba che
avevamo già visto nei vari tutorial
a parte questo substring ma questo
esercizio poteva essere eseguito in
un'altra maniera nel prossimo video vedremo come eseguire
gli altri 3 esercizi e con questo è
tutto ci sentiamo la prossima ciao