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 640×480
  • 100 px a 800×600
  • 150 px a 1024×768
  • 200 px a 1152×864 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.
37 / 49

Lo switch

I Video di HTML.it

Cloud Conf 2017 e API Conf, intervista Gabriele Mittica

Gabriele Mittica è il CEO di Corley Srl, società che dal 2013 organizza Cloud Conf, evento che si rinnova sempre […]