JavaScript variabili e costanti come utilizzarle – In quest’articolo parleremo di variabili in JavaScript e introdurremo anche il concetto di costante.

JavaScript variabili e costanti – Area del cerchio

Facciamo un esempio creando un semplice script dove inseriamo:

– la costante pigreco dove memorizziamo il valore costante 3.14;

– una variabile raggio dove memorizziamo il valore del raggio;

– e la variabile area dove memorizziamo il risultato dell’operazione.

Dopo aver effettuato i calcoli il risultato verrà visualizzato nella pagina web.

Abbiamo scelto di utilizzare il dato variabile per il raggio in quanto in genere è un valore che viene inserito in input e di volta in volta può variare, ma in questo esempio potrebbe essere anche una costante. Ricordiamo che un valore costante teoricamente non può essere cambiato ed in effetti è così in alcuni linguaggi di programmazione. In realtà in JavaScript l’uso della parola chiave const ha un senso più largo del termine, come vedremo in maniera più approfondita andando avanti nel tutorial.

Inseriamo, sempre per comodità, il codice JavaScript all’interno della pagina html, così come nell’esempio sotto.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Le variabili in JavaScript</title>
  </head>
  <body>
    <h1>Esempio di variabili</h1>

    <script type="text/javascript">
      const pigreco = 3.14;
      var r = 4, area;
      area = pigreco * r * r;
      document.write('<p>L\'area del cerchio di raggio ' + r + ' è: ' + area + '</p>');
    </script>

  </body>
</html>

Come potete notare in questo esempio ho utilizzato una stessa riga per dichiarare la variabile r e area, questo solo per compattare il codice, si potrebbe infatti scrivere anche in questo modo:

var r = 4;
var area;

JavaScript variabili e costanti – Secondo esempio

In questo secondo esempio facciamo inserire all’utente il valore del raggio e, dopo aver cliccato sul pulsante ok, il programma calcolerà l’area del cerchio.

Questo metodo presuppone però la conoscenza del metodo getElementById, spiegato in questa lezione: metodo getElementById.

Quindi creiamo un input per il testo ed un pulsante che al click richiami la funzione calcola.

La funzione calcola() si occupa inizialmente di dichiarare la costante pigreco. Dopo rileva il dato di input raggio tramite il metodo getElementById che restituisce l’elemento della pagina HTML, avente l’id uguale a ciò che è specificato tra parentesi.

Una volta ottenuto questo valore la funzione calcola il valore dell’area. Poi, sempre utilizzando lo stesso metodo, getElementById, visualizziamo il valore ottenuto nel paragrafo p.

Ecco dunque il codice completo:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Le variabili in JavaScript</title>
  </head>
  <body>
    <h1>Esempio di variabili</h1>
    <input type="text" id="r">
    <input type="button" id="ok" value="ok" onclick="calcola()">
    <p id="risultato"></p>

    <script type="text/javascript">
    function calcola() {
      const pigreco=3.14;
      var r = document.getElementById("r").value;
      var area=pigreco*r*r;
      document.getElementById("risultato").innerHTML ="L\'area del cerchio di raggio " + r +' è:' + area;
    };
    </script>

  </body>
</html>

JavaScript variabili e costanti – Terzo esempio

In questo esempio memorizziamo in due variabili (a e b) dei valori interi e dopo calcoliamo la media.

Quindi abbiamo bisogno delle variabili a, b, somma e media.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Le variabili in JavaScript</title>
  </head>
  <body>
    <h1>Esempio di variabili</h1>
    <script type="text/javascript">
      var a = 5, b = 6;
      var somma = a + b;
      var media = somma / 2;
      document.write('La media dei numeri ' + a + ' e ' + b + ' è '  + media);
    </script>
  </body>
</html>

Potremmo anche non utilizzare la variabile somma in quanto il valore della somma non lo utilizziamo più all’interno del programma.

Quindi potremmo anche scrivere in questo modo:

  <script type="text/javascript">
      var a = 5, b = 6;
      var media = a + b;
      var media = media / 2;
      document.write('La media dei numeri ' + a + ' e ' + b + ' è '  + media);
    </script>

In questa lezione abbiamo parlato di variabili e costanti in JavaScript, nella prossima lezione parleremo di istruzioni condizionali e faremo degli esempi.

Alcuni link utili

Indice tutorial JavaScript

Introduzione al tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Come utilizzare JavaScript confirm

Utilizzare JavaScript prompt