Corso JavaScript – Le Variabili

L’argomento che andremo a trattare nel seguente articolo del nostro corso JavaScript riguarderà uno degli strumenti principali su cui si basa il linguaggio di programmazione del web, cioè le variabili: a cosa servono, come funzionano, come si creano e tutto quello che le riguarda.

La comprensione di questa guida del corso è fondamentale per il proseguimento del corso di JavaScript, poiché molti aspetti della programmazione (non solo di JS) si appoggiano sulla costruzione delle variabili.

Se non hai ancora chiari i concetti di base di JavaScript, ti consiglio di seguire i precedenti articoli del corso partendo dalle basi. Inoltre, sono richieste conoscenze di base anche di HTML e possibilmente di CSS, essendo JS un linguaggio basato sullo sviluppo di pagine web.

Clicca qui per visualizzare il programma completo del corso JavaScript

Le variabili JavaScript

Descrizione

Le variabili, in JavaScript come in altri linguaggi di programmazione, possono essere definite come contenitori di dati e di valori (personalizzati). Ogni variabile può essere creata, modificata ed eliminata in qualsiasi momento durante l’esecuzione del programma/codice a proprio piacimento.

Il nome stesso “variabile“, sta ad indicare proprio la variazione del valore in base alle esigenze. Ad esempio, se creiamo una variabile con un valore originario di 2, in seguito potrà essere modificato a 4 o a qualsiasi altro valore desiderato, sovrascrivendo il precedente.

I campi di applicazione delle variabili sono molti e non hanno limiti, come andremo a vedere nei prossimi capitoli. Inoltre, in un listato possono essere definite un numero illimitato di variabili.

L’uso di questo strumento aiuta anche a ordinare e semplificare l’intero codice, perché in una variabile possono essere definiti dati ed espressioni molto lunghe e complesse, riducendole ad una singola parola.

Per capire meglio le variabili in JavaScript, vediamo in dettaglio come crearle ed usarle nel codice.

Creare una variabile

Nelle ultime versioni di JavaScript, la creazione delle variabili è molto semplice, infatti basta digitare la stringa “var” seguita dal nome e i valori personalizzati, con questa sintassi.

var mia_variabile = 1;

Esaminando il codice:

• La variabile è stata creata con “var” all’inizio della stringa.
• È stato assegnato il nome “mia_variabile” per indicarla. Questo servirà a richiamare la variabile in qualsiasi momento nel resto del codice.
• 1 (numero) è il valore della variabile ma possono essere anche altri tipi (che vedremo qui in basso).
• Il simbolo “=” (uguale) serve ad assegnare il valore (1 in questo caso) alla variabile.

JavaScript è case sensitive: distingue le minuscole dalle maiuscole, fai attenzione durante la scrittura.

Ricorda che alla fine di ogni stringa è molto importante inserire il punto e virgola “;“.

Come puoi vedere dall’esempio, creare una variabile è semplice e ti permette di assegnare il nome e il valore che vuoi (numerico, letterale o logico). Dopo averla definita portai richiamarla nella posizione (o riga) che preferisci anche più di una volta.

Eseguendo l’output sulla variabile attraverso “document.write()“, il sistema restituirà il valore inserito precedentemente.

var mia_variabile = 1;
document.write(mia_variabile); //output = 1

“//” indica un commento di codice, leggi qui per saperne di più.

Modifica delle variabili

Come spiegato negli articoli precedenti, le istruzioni in JavaScript sono eseguite “a cascata” cioè, durante l’esecuzione/caricamento della pagina verranno eseguiti prima i codici in alto al documento, fino a scendere.

Ogni variabile può cambiare valore in ogni istante se indicato, quindi se ne viene creata una ad inizio del documento, essa può cambiare valore già dall’istruzione successiva.

Per capire meglio osserva l’esempio:

var mia_variabile = 1;
mia_variabile = 8;
document.write(mia_variabile); // output = 8;

Il valore originario (1) è stato sovrascritto dalla seconda istruzione (8). Questo serve a farti capire che ogni dato può essere alterato e modificato qualora tu voglia, senza che vengano generati errori e secondo le esigenze del tuo programma.

Per creare una variabile devi usare la keyword “var“. Successivamente non ne avrai più bisogno e potrai ometterla, perché già inizializzata dal sistema.

Richiamare una variabile

Creare una variabile, ci consente in seguito di riutilizzarla a nostro piacimento ovunque vogliamo, come all’interno di una funzione.

Per richiamare o utilizzare una variabile in un secondo momento ci basterà riscrivere lo stesso nome precedentemente creato nella riga desiderata.

Guarda l’esempio qui in basso per capire meglio, poiché è più facile scriverlo che spiegarlo.

var anno = 1994;
document.write(anno); // 1994

var mille = anno - 994;
document.write(mille); // 1000

Come puoi vedere, le variabili “anno” e “mille” sono state create e riutilizzate semplicemente riscrivendo il nome assegnato inizialmente, omettendo la keyword “var” o il valore numerico.

Tipi di valori

Ad ogni variabile JavaScript è possibile assegnare diversi tipi di valori, questo varierà in base alle esigenze di programmazione o all’uso a cui sono destinate. I valori più importanti da imparare sono i seguenti:

Numerici

I valori di tipo numerico sono per l’appunto “numeri“, che a loro volta possono essere suddivisi in interi e decimali. Per dichiarare un numero basterà scrivere in questo modo:

var num = 10; //intero
var num2 = 3.56;  //decimale

I numeri non hanno bisogno di essere inseriti nelle virgolette o apici. Leggi in basso per capire meglio.

Testuali

I valori di tipo testuale sono tutti quelli che comprendono delle stringe di testo, come lettere, simboli, parole, frasi o interi paragrafi.

Per definire una stringa di testo, si dovrà fare uso degli apici (‘…’) o delle doppie virgolette (“…”) e digitare il valore desiderato al loro interno.

var nome = "Giacomo";
var cognome = 'Rossi';
var anno_nascita = "1985";

Anche i numeri possono essere convertiti in stringhe semplicemente digitandoli all’interno degli ‘apici‘ o “virgolette“.
JavaScript convertirà questi valori da stringhe a numeri in automatico se necessario.

Logici/booleani

Tra gli ultimi tipi troviamo gli operatori logici o booleani. Questa tipologia si basa su due differenti valori opposti tra logo, prestabiliti dal sistema: true/false, yes/no, on/off.

Utili per la verifica delle condizioni e spesso utilizzati indirettamente nelle operazioni logiche.

var wifi = true;
var bluetooth = false;

Nelle variabili è possibile definire ogni tipologia di valore, ma inizialmente, per comprendere meglio i concetti di base, ci fermeremo a questi.

Avanti nel corso avremo modo di approfondire l’argomento.

Codice di esempio

Qui in basso alcuni codici di esempio utili per comprendere meglio le variabili JavaScript.

var x = 100;
var y = x - 10;

document.write(y); // 90
document.write(x-y); //10

var nome = "Mario";
var cognome = "Bianchi";

document.write(nome + cognome); // MarioBianchi
document.write(nome + " " + cognome); // Mario Bianchi

var nome = "Alice";
var anno_nascita = "27 Marzo 1970";

document.write("Nome: "+nome+", nata il: "+anno_nascita+ "." ); 
//Nome: Alice, nata il: 27 Marzo 1970.

Esercitati nella scrittura delle variabili come negli esempi precedenti, e se hai bisogno di aiuto scrivi un commento in basso.

Torna al corso JavaScript completo cliccando qui.

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle