JavaScript è in grado di generare tre differenti tiplogie di "finestre implicite" (dette anche "finestre incorporate", "finestre modali", o "finestre di dialogo"), che avremo modo di utilizzare più volte nei nostri script (soprattutto l'alert).
Alert
Abbiamo già incontrato l'alert diverse volte nel corso delle nostre lezioni e si tratta senz'altro della finestra che vi capiterà di utilizzare più spesso: l'alert visualizza un avvertimento, un messaggio di errore che blocca qualsiasi azione dell'utente finché egli non dà il suo benestare cliccando sul bottone.
Sintassi di alert()
alert(messaggio)
Il contenuto dell'alert è una stringa (cioè una sequenza di caratteri), il che vuol dire che deve essere racchiuso tra virgolette oppure che deve essere un valore che JavaScript sia in grado di convertire in automatico in un valore letterale (come nel caso dei numeri).
Esempi di alert()
alert("Ecco il messaggio") // messaggio inserito direttamente
var messaggio = "Ecco il messaggio";
alert(messaggio); // messaggio inserito tramite variabile
Come per document.write(), in gererale per le stringhe, se bisogna usare le virgolette all'interno del messaggio è bene che usiate i caratteri di escape (cioè il back-slash), onde evitare errori.
Testo con sequenze di escape
alert("Marco disse \"Ciao Mondo!\"");
Ecco un esempio di alert:
<a href="http://www.html.it" onClick="alert('Stai per uscire');" target="_blank">testo link</a>
Come si può vedere, finché l'utente non clicca su "ok", la pagina non va verso il link indicato.
Da notare le virgolette ad apice semplice dentro le virgolette ad apice doppio, per evitare di "chiudere prematuramente" il contenuto dell'evento onClick.
Confirm
È una finestra che pone una domanda e chiede conferma dando la possibilità di scegliere tra due opzioni ("ok" e "annulla"). La sintassi è:
confirm("messaggio");
Mentre l'alert concede una sola possibilità di scelta ("ok"), il confirm dà la possibilità di scegliere tra due opzioni:
<a href="http://www.html.it" onClick="return confirm('Sei sicuro di voler uscire dalla pagina?');" target="_blank">testo link</a>
Prompt
È una finestra che pone una domanda e consente all'utente di dare la risposta che vuole. Può avere anche un valore di risposta predefinito. La sintassi è:
prompt("domanda","risposta predefinita");
la risposta predefinita è facoltativa.Ad esempio:
<body onLoad="prompt('Come ti chiami?');">
o anche:
<body onLoad="prompt('Come ti chiami?','inserisci qui il tuo nome');">
Per visualizzare il nome dell'utente nella pagina dovremo poi "catturarlo" in qualche modo. Vedremo più avanti come fare.
Nota a margine
Nell'ottica in cui abbiamo affrontato il corso finora è bene specificare che in realtà le finestre modali sono metodi dell'oggetto "window".
Quindi la sintassi estesa per visualizzare le finestre modali dovrebbe essere:
window.alert("messaggio");
window.confirm("messaggio");
window.prompt("domanda","risposta predefinita");
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |