Javascript 3

Per approfondire l'uso dei cicli in Javascript, si propone in questa pagina l'implementazione di un piccolo gioco.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Esempio 3.1</title>
  <script>
      var nmax;
      var x;
      var prova;
      var conta;
      var puo_iniziare = false;
      var indovinato = false;

      function nCasuale()
        {
          puo_iniziare = false;
          nmax = document.getElementById("campo_nmax").value;
          if (isNaN(nmax))
            {
              alert(nmax+" deve essere un numero intero.");
              return;
            }
          if (Math.floor(nmax) != nmax)
            {
              alert(nmax+" deve essere numero intero.");
              return;
            }
          if (nmax<100)
            {
              alert("nmax troppo piccolo: viene fissato a 100.");
              nmax = 100;
              document.getElementById("campo_nmax").value="100";
              return;
            }
          puo_iniziare = true;
          conta = 0;
          nmax++;
          x = Math.floor(Math.random()*nmax);
        }

      function gioco()
        {
          if (!puo_iniziare)
            {
              alert("Generare un numero casuale.");
              return;
            }
          indovinato = false;
          prova = 0;
          while (!indovinato)
            {
              conta++;
              prova = prompt("indovina il numero",prova);
              prova = parseInt(prova);
              conta++;
              if (prova == x)
                {
                  puo_iniziare = false;
                  indovinato = true;
                  alert("Hai indovinato con "+conta+" tentativi.");
                }
              else
                {
                  if (prova < x)
                    alert("x \xe8 maggiore di "+prova);
                  else
                    alert("x \xe8 minore di "+prova);
                }
            }
        }

  </script>
</head>

<body style="background-color:cyan; color:blue; text-align:center">
<h2>Indovina il numero
<form name="frm" id="frm" 
  style="position:relative; width:40%; left:30%; 
   background-color:azure; color:blue; 
   border-style:solid; border-color:blue; text-align:center">
<p>
<label for="campo_nmax">numero massimo 
<input type="text" id="campo_nmax" size="10" value = "0" />
</p>
<p><input type="button" value=" genera un numero casuale  " onclick = "nCasuale()" /></p>
<p><input type="button" value=" inizio gioco  " onclick = "gioco()" /></p>
<p><input type="reset" value=" reset " /></p>
</form>
</body>
</html>

Nella sezione javascript sono definite alcune variabili globali, accessibili anche dall'interno delle funzioni, e quindi le due funzioni nCasuale() e gioco().

La funzione gioco() rileva i dati dalla pagina HTML usando la funzione document.getElementById il cui argomento è il nome del campo di input nel quale l'utente deve avere scritto il massimo numero generabile dalla funzione. Se l'utente ha scritto qualcosa che non può essere intepretato come numero naturale positivo, il gioco non può avere inizio. La funzione isNaN (is Not a Number) controlla se una stringa non rappresenta un valore numerico.

Il numero da indovinare è prodotto dal metodo random() dell'oggetto Math che implementa le più comuni funzioni matematiche.

random() genera numeri pseudocasuali compresi tra 0 e 1. Per ottenere, ad esempio, numeri compresi tra 0 e 100, bisogna moltiplicare il valore generato da random() per 101. Se poi, come nel caso in esempio, si vuole un numero intero, allora si può usare il metodo floor() (letteralmemte pavimento) per ottenere l'intero immediatamente inferiore al numero generato dal prodotto. Ad esempio Math.floor(2.345) produce il numero 2.

Notare anche come vanno rese i caratteri non ASCII, come le lettere accentate, all'interno di una stringa di Javascript: nell'esempio il carattere è è reso da \xe8 dove e8 è il codice UNICODE esadecimale della e con accento grave.

Cicli 2