Finestre pop-up
Posted by vanni on Sunday, 22 April 2018
In questo video parleremo delle finestre pop-up di JavaScript. Cioè quelle piccole finestre che si aprono all'improvviso e si deve cliccare sui loro pulsanti per farle andare via.
In JavaScript ci sono 3 tipi di finestre pop-up e appartengono anch'esse all'oggetto window.
Ogni tipo di pop-up ha una funzione diversa e il programmatore può scegliere la finestra più opportuna a seconda delle esigenze:
- Alert, questo tipo di finestra viene usato per visualizzare un semplice messaggio. Il suo scopo è attirare l'attenzione dell'utente e non lascia lo schermo finchè l'utente non chiude il messaggio
- Prompt, questo tipo di finestra viene usato per dare la possibilità all'utente di inserire un valore che poi andremo a maneggiare all'interno del nostro codice
- Confirm, questo tipo di finestra permette all'utente di rispondere ad una domanda (con un si o con un no) o confermare un'azione, ritorna sempre un valore booleano "true/false"
In questo video vedremo i vari pop-up nel dettaglio e capiremo come scegliere il più appropriato in base alla situazione. Mi permetto di dire che l'uso dei pop-up, anche se in alcuni casi molto utili e facili da integrare, fa parte delle webpage un po' "vecchio stile" e nella programmazione degli ultimi anni si cerca di evitarne l'uso, perchè fastidiosi per l'utente. Inoltre, non si conciliano bene con pagine web che hanno un design responsive.
Trascrizione: (click per espandere)
salve a tutti in questo video parlerò
delle finestre pop up di javascript
ci sono tre tipi di finestre pop up 2 ve
le ho già fatte vedere comunque ve le
faccio rivedere e cominciamo allora
diciamo che le finestre popup una volta
erano molto usate adesso si tende ad
usarle un po' meno perché se l'utente sta
usando cellulari e robe del genere sono
un po' fastidiose quindi si tende a fare
in un'altra maniera però in alcune
occasioni sono ancora molto utili
ora intanto il primo è la l'alert vi
faccio vedere come funziona allora
facciamo che io ho un mettiamo sempre
window alert e dentro ci metto il
messaggio questo alert eccolo qui
anche in questo caso window non serve
quindi non e' obbligatorio quindi non si
mette perché normalmente non si usa mai
e andiamo a vedere come funziona allora
io salvo la pagina subito come vedete mi
viene caricato la mia finestra pop up
come vedete javascript quando trova un
alert lo esegue subito e il resto
della pagina non è ancora caricata infatti
qui vedete ancora che sta cercando di
caricare quando io clicco su ok
la pagina si finisce di essere caricata
io posso anche metterlo dentro una
funzione ad esempio possono mettere
function alert e lo chiamo
anzi no alert1 e dentro ci metto il
mio alert e poi posso fare invocare la
mia funzione per esempio un evento onload alert1 andiamo a rivedere questo
è un alert
ecco cosa succede io non posso mettere
direttamente codice html dentro la mia
finestra perché se io provo ad esempio
metterci un tag br per fare un accapo mi
viene visualizzato il br quindi se io
voglio andare a capo dentro a una
finestra pop up come faccio si deve
usare il back slash enne che vuol dire
new line
faccio vedere che ci mette un po di
testo ok
ed ecco come vedete ciò l'accapo vi
faccio vedere un altro tipo di finestre
pop up che si chiama prompt che l'
avete già visto in un paio di video
precedenti
allora facciamo sempre
function e la chiamo aprì e dentro
in questo caso io vado a salvare il
valore che mi ritorna il mio pop up
quindi metto il valore uguale
a prompt e dentro ti metto inserire un
valore e poi vado a fare la output di
questo valore console.log
intanto vi faccio vedere che tipo di
output quindi metto typeof così vedete
che dovrebbe essere una stringa e poi vi
faccio vedere anche l'output di valore
ok facciamo invocare questa funzione al
mio onload qui questa lo posso
commentare più
vediamo allora inserire un valore io
metto dentro una parola 3 ecco
qua come vedete adesso io ho una stringa
quindi ho salvato quello che l'utente ha
inserito dentro la mia variabile è la
variabile è una stringa e il suo valore
3 quindi io posso chiedere all'utente di
inserire dati e poi vado a lavorare con
i dati inseriti dall'utente
adesso vi faccio vedere l'ultimo tipo di
finestra pop up
si chiama "conferm" la chiamo apre questa
giusto per fare veloce e posso metterci
sempre il valore in questo caso se hai
detto si usa un conferm e quindi
normalmente è un sì o no la risposta
dell'utente quindi ha due bottoni da
cliccare che può essere o sì o no quindi
normalmente si fa una domanda tipo sei
maggiorenne punto di domanda e poi è come
sempre anzi facciamo così per
fare prima
salvare vi faccio vedere il tipo di
valore che dovrebbe essere un booleano
vero o falso e poi il valore
andiamo a vedere come vedete non è
l'utente non deve essere venire deve
solo schiacciare uno dei due pulsanti
che si clicca ok mi dice booleano ed è
vero se io ricarico e schiaccio cancel
mi dice booleano ed è falso
con questo è tutto riguardo alle
finestre pop up di javascript ci
sentiamo la prossima
delle finestre pop up di javascript
ci sono tre tipi di finestre pop up 2 ve
le ho già fatte vedere comunque ve le
faccio rivedere e cominciamo allora
diciamo che le finestre popup una volta
erano molto usate adesso si tende ad
usarle un po' meno perché se l'utente sta
usando cellulari e robe del genere sono
un po' fastidiose quindi si tende a fare
in un'altra maniera però in alcune
occasioni sono ancora molto utili
ora intanto il primo è la l'alert vi
faccio vedere come funziona allora
facciamo che io ho un mettiamo sempre
window alert e dentro ci metto il
messaggio questo alert eccolo qui
anche in questo caso window non serve
quindi non e' obbligatorio quindi non si
mette perché normalmente non si usa mai
e andiamo a vedere come funziona allora
io salvo la pagina subito come vedete mi
viene caricato la mia finestra pop up
come vedete javascript quando trova un
alert lo esegue subito e il resto
della pagina non è ancora caricata infatti
qui vedete ancora che sta cercando di
caricare quando io clicco su ok
la pagina si finisce di essere caricata
io posso anche metterlo dentro una
funzione ad esempio possono mettere
function alert e lo chiamo
anzi no alert1 e dentro ci metto il
mio alert e poi posso fare invocare la
mia funzione per esempio un evento onload alert1 andiamo a rivedere questo
è un alert
ecco cosa succede io non posso mettere
direttamente codice html dentro la mia
finestra perché se io provo ad esempio
metterci un tag br per fare un accapo mi
viene visualizzato il br quindi se io
voglio andare a capo dentro a una
finestra pop up come faccio si deve
usare il back slash enne che vuol dire
new line
faccio vedere che ci mette un po di
testo ok
ed ecco come vedete ciò l'accapo vi
faccio vedere un altro tipo di finestre
pop up che si chiama prompt che l'
avete già visto in un paio di video
precedenti
allora facciamo sempre
function e la chiamo aprì e dentro
in questo caso io vado a salvare il
valore che mi ritorna il mio pop up
quindi metto il valore uguale
a prompt e dentro ti metto inserire un
valore e poi vado a fare la output di
questo valore console.log
intanto vi faccio vedere che tipo di
output quindi metto typeof così vedete
che dovrebbe essere una stringa e poi vi
faccio vedere anche l'output di valore
ok facciamo invocare questa funzione al
mio onload qui questa lo posso
commentare più
vediamo allora inserire un valore io
metto dentro una parola 3 ecco
qua come vedete adesso io ho una stringa
quindi ho salvato quello che l'utente ha
inserito dentro la mia variabile è la
variabile è una stringa e il suo valore
3 quindi io posso chiedere all'utente di
inserire dati e poi vado a lavorare con
i dati inseriti dall'utente
adesso vi faccio vedere l'ultimo tipo di
finestra pop up
si chiama "conferm" la chiamo apre questa
giusto per fare veloce e posso metterci
sempre il valore in questo caso se hai
detto si usa un conferm e quindi
normalmente è un sì o no la risposta
dell'utente quindi ha due bottoni da
cliccare che può essere o sì o no quindi
normalmente si fa una domanda tipo sei
maggiorenne punto di domanda e poi è come
sempre anzi facciamo così per
fare prima
salvare vi faccio vedere il tipo di
valore che dovrebbe essere un booleano
vero o falso e poi il valore
andiamo a vedere come vedete non è
l'utente non deve essere venire deve
solo schiacciare uno dei due pulsanti
che si clicca ok mi dice booleano ed è
vero se io ricarico e schiaccio cancel
mi dice booleano ed è falso
con questo è tutto riguardo alle
finestre pop up di javascript ci
sentiamo la prossima
File del video:
