JavaScript variabili e costanti

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 una costante pigreco, una variabile raggio e una variabile area.

Nella costante pigreco memorizziamo il valore costante 3.14, nella variabile raggio memorizziamo un valore qualunque, ad esempio 4 e nella variabile area andremo a memorizzare il calcolo effettuato. Dopo 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 non può essere cambiato.

Inseriamo, 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 visualizza il valore ottenuto nel paragrafo p, sempre utilizzando lo stesso metodo getElementById.

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 memorizzeremo in due variabili dei valori numerici e calcoleremo la media.

Quindi utilizzeremo le 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

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *