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:
– 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.
Utilizziamo, per comodità, il metodo write di JavaScript per scrivere nella pagina html, così come nell’esempio sotto:
const pigreco = 3.14;
var r = 4, area;
area = pigreco * r * r;
document.write('L\'area del cerchio di raggio ' + r + ' è: ' + area);
Come potete notare in questo esempio ho dichiarato nella stessa riga la variabile r ed 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 scritto in un file JavaScript a parte:
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;
};
Nella pagina html dunque inseriamo questo codice, oltre al collegamento al file javascript:
<h1>Esempio di variabili</h1>
<input type="text" id="r">
<input type="button" id="ok" value="ok" onclick="calcola()">
<p id="risultato"></p>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. Ecco dunque il codice JavaScript di esempio:
var a = 5, b = 6;
var somma = a + b;
var media = somma / 2;
document.write('La media dei numeri ' + a + ' e ' + b + ' è ' + media);
Potremmo anche non utilizzare la variabile somma in quanto il valore della somma non lo utilizziamo più all’interno del programma. Quindi utilizzo una variabile generica di nome operazione.
Quindi potremmo anche scrivere in questo modo:
var a = 5, b = 6;
var operazione = a + b;
var operazione = operazione / 2;
document.write('La media dei numeri ' + a + ' e ' + b + ' è ' + media);
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
Introduzione al tutorial JavaScript
Come utilizzare JavaScript alert
