In una delle lezioni precedenti abbiamo imparato ad usare le finestre di dialogo, tra cui il confirm. L'esempio fornito tuttavia non funzionava nel modo corretto, perché il confirm non arrestava l'azione nel caso in cui l'utente cliccasse su "cancel":
<a href="http://www.html.it" onClick="confirm('Sei sicuro di voler uscire dalla pagina?');" TARGET="_blank">testo link</a>
Il confirm restituisce true nel caso in cui l'utente clicchi su ok, restituisce false in caso contrario. Dovrebbe esserci chiaro a questo punto come sfruttare un if per utilizzare correttamente il confirm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function conferma () {
chiediConferma = confirm('Sei sicuro di voler uscire dalla pagina?');
if (chiediConferma == true){
location.href="#"; //ricarica la pagina
}
/* o anche nella forma più sintetica:
if (confirm('Sei sicuro di voler uscire dalla pagina?')){
location.href="#"; //ricarica la pagina
}
*/
}
</script>
</head>
<body>
<A href="#" onClick="conferma();">testo link</a>
</body>
</html>
Sono moltissime le occasioni in cui possiamo utilizzare un if per "aggiustare" la pagina, oppure verificare una qualche azione compiuta dall'utente.
Premesso che in molti casi possiamo cavarcela egregiamente utilizzando le dimensioni delle celle (o dei box css) in percentuale. Ad esempio così:
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80%" height="80%" bgcolor="#FF0000"> </td>
</tr>
<tr>
<td height="20%"> </td>
</tr>
</table>
Poniamo ad esempio di voler scrivere l'altezza di una cella in pixel e in modo variabile a seconda della risoluzione. Vogliamo far sì ad esempio che la nostra cella abbia un'altezza di:
- 80 px a 640x480
- 100 px a 800x600
- 150 px a 1024x768
- 200 px a 1152x864 o risoluzioni maggiori
perché prove empiriche ci dicono che questa altezza si adatta perfettamente al layout che stiamo sviluppando. Consideriamo allora la larghezza dello schermo che ci indica la risoluzione. Nella pagina avremo uno script di questo genere:
<html>
<head>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<script type="text/javascript">
/* quando c'è una sola istruzione non c'è bisogno
di parentesi graffe e può essere scritto tutto
sulla medesima riga */
if (screen.width==640) altezzaCella=80;
else if (screen.width==800) altezzaCella=100;
else if (screen.width==1024) altezzaCella=150;
else altezzaCella=200;
document.write("<TD height=""+altezzaCella+"">");
</script>
<no script>
<td width="100">
</no script>
prova</td>
<tr>
</table>
</body>
</html>
come si vede l'if ci permette di impostare l'altezza in modo variabile a seconda della risoluzione.
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 |