Le variabili in Javascript

Nel precedente articolo abbiamo introdotto javascript come linguaggio, iniziato a conoscerne le origini e il suo contesto di utilizzo.

In questo articolo ci dedicheremo maggiormente alla sintassi pertendo appunto dal concetto base di variabile.

Premessa

Una variabile non è altro che una porzione di memoria definita sulla macchina dell’utente dove è possibile salvare un dato e richiamarlo attraverso il nome della variabile in successivi punti dello script.

Bisogna ricordare che Javascript viene interpretato ed eseguito all’interno del browser dell’utente, l’hardware fisico che lo script utilizzerà per essere eseguito è quello della macchina utente, limitato dal possibile utilizzo di risorse del browser o del sistema operativo.

In caso di errori “gravi” è possibile che uno script possa bloccare il browser dell’utente molto più raramente è possibile riuscire ad bloccare il sistema operativo in quanto la disponibilità di risorse per il browser è normalmente limitata e gestita dal sistema operativo.

Le variabili in Javascript

Per definire una variabile possiamo utilizzare var seguito dal nome della variabile.

var miavariabile;

In questo caso abbiamo definito una variabile vuota ovvero priva di valore o dati al suo interno. Per fare una prova più pratica proviamo ad assegnare una stringa testuale a questa variabile utilizzando =.

var miavariabile = "una stringa alfanumerica";

Avendo definito la variabile e associato una stringa ad essa possiamo ora provare a riutilizzare la stringa insieme ad alert() che avevamo utilizzato negli esempi precedenti.

var miavariabile = "una stringa alfanumerica";
alert(miavariabile);

In questo caso aprendo il browser vedremo un popup con all’interno il testo “una stringa alfanumerica”.

Alcune osservazioni importanti, da notare l’utilizzo del punto e virgola (;) utilizzato per separare le due istruzioni, pur non essendo obbligatorio in questo caso è utile ricordarsi di separare correttamente le istruzioni per facilitare il mantenimento e mantenere il codice ordinato. Normalmente il browser riesce ad interpretare il codice Javascript basandosi sulla sintassi e sui ritorno carrello (a capo) presenti nel codice ma è bene evitare di fare troppo affidamento su questo modo di scrivere codice che può causare più facilmente errori in script più prolissi o soggetti a frequenti cambiamenti.

Torneremo in seguito ad esaminare nel dettaglio simili soluzioni sintattiche con eventuali pro e contro.

Le costanti in Javascript

Il nome “variabile” fa capire immediatamente che questa entità può cambiare valore durante l’esecuzione dello script, considerati gli innumerevoli contesti bisogna ricordare che oltre alle variabili è possibile definire delle costanti, ovvero dati che rimarranno immutati per tutta l’esecuzione dello script. Per definire una costante normalmente si utilizza un nome totalmente maiuscolo.

var MIACOSTANTE = "un dato che non cambierà mai";

Nomenclatura delle variabili

Sugli standard di nomenclatura in Javascript esistono molte opinioni differenti dovute soprattutto alle specifiche esperienze ed abitudini del singolo programmatore.

Senza iniziare una discussione sulle formalità cerco di riassumere i principali aspetti da tenere in considerazione per decidere una corretta nomenclatura.

Utilizzare termini espliciti per lo scopo della variabile

Il mio primo consiglio è di scegliere nomi che permettano di capire facilmente che cosa conterrà la variabile, ad esempio miavariabile è un nome troppo generico mentre testopopup mi permette di capire immediatamente dove andrà quel dato.

In generale è utile dare nomi di senso compiuto ed evitare termini troppo generici.

Evitare termini riservati

In javascript esistono metodi, funzioni, eventi, oggetti predefiniti all’interno del browser che permettono di compiere diversi operazioni, in nomi che definiscono queste entità sono detti “riservati” quindi è sconsigliabile utilizzare questi termini per definire una variabile.

Sul seguente link è presente una lista completa dei termini riservati.

Ogni variabile deve avere un nome univoco

Per quanto banale possa sembrare le variabili devono avere nome univoco per evitare di sovrascrivere la variabile durante lo script. Oltre a questo avere variabili univoche permette di rintracciare e gestire più facilmente lo script. Questo ovviamente non vale nel caso si desideri sovrascrivere una variabile nel corso dello script.

Utilizzare uno strandard di nomeclatura

Per migliorare la leggibilità delle singole variabili è opportuno scegliere uno standard di nomenclatura, questo migliorerà la leggibilità dei nomi delle variabili e faciliterà successivi interventi. Prendiamo per esempio la nostra variabile miavariabile, potrebbe essere scritta in Camel Case miaVariabile o con un underscore mia_variabile. Non utilizzare mai gli spazi nel nome di una variabile o si incontrerà un errore di sintassi.

La scelta del tipo di nomeclatura come dicevo è arbitraria e dipende dal singolo programmatore, uno standard molto usato è il Douglas Crockford’s code conventions in generale è possibile fare la propira scelta tra varie soluzioni per lo stile del codice, la cosa importante è adottare e mantenere sempre lo stesso standard quantomeno nel singolo script.

Essere coerenti con la nomenclatura

L’aspetto più importante rimane la coerenza nelle scelte prese, stessa nomenclatura, stessa lingua, stessa logica per la scelta dei termini. Ovviamente su questa base si possono definire innumerevoli convenzioni più o meno flessibili ma fondamentali soprattutto per creare codice ordinato ed utilizzabile anche da altri.

Per concludere possiamo aggiornare il nostro script per renderlo più chiaro e leggibile

var testoPopUp = "una stringa alfanumerica";
alert(testoPopUp);

Tipi di variabile

Oltre al nome, una variabile possiede di norma un dato associato, questo dato normalmente definisce la tipologia della stringa.

Prendendo l’esempio precedente, la nostra variabile testoPopUp è di tipo stringa ovvero un insieme di caratteri alfanumerici racchiuso a scelta tra apici doppi o singoli.

Un altro tipo di variabile è il numero, suddiviso in due sottinsiemi  interi e decimali, questo tipo di variabile non richiede apici.

var mioIntero = 4;
var mioDecimale = 0.7;

Da notare che i decimali utilizzano il punto invece della virgola e possono essere definiti come numeri a separatore mobile (il separatore in questo caso è il punto).

Altro aspetto da considerare è l’utilizzo degli apici singoli o doppi, in caso di utilizzo degli apici la variabile sarà considerata comunque una stringa.

var mioInteroNumerico = 3;
var mioInteroStringa = "3";

Questa differenza può sembrare banale al momento ma in seguito diventerà molto importante.

Un altro tipo di stringa può contenere valori booleani ovvero Vero e Falso, questo tipo di variabile viene normalmente utilizzato per semplificare un output e valutare l’esecuzione dello script.

var mioBooleano = true;
var mioBooleano = false;

Anche in questo caso l’utilizzo di apici trasformerebbe la variabile in stringa.

Come detto all’inizio di questo articolo una variabile non è altro che uno slot di memoria a cui associare dei dati per poterli riutilizzare in seguito.

Possiamo quindi utilizzare tipi di dati più strutturati come ad esempio gli array.

Un array non è altro che un insieme di stringhe, numeri o booleani indentificati da un index numerico.

var mioArray = new Array("stringa alfanumerica",4,false, "alatra stringa");

Un sistema alternativo per definire l’array è il seguente

var mioArray = ["stringa alfanumerica",4,false, "alatra stringa"];

In seguito vedremo come utilizzare al meglio gli array per il momento è importante apprendere i principali tipi di dato disponibili in javascript.

Un tipo dato ancora più strutturato e assegnabile ad una varibile sono gli oggetti.

Su questo fronte si rischia molta confusione avendo affermazioni come “programmare ad oggetti” e “javascript è un linguaggio oggetti”, per il momento limitiamo a considerare gli oggetti come un tipo di dato da associare ad una variabile, in seguito esamineremo altri aspetti più complessi.

var mioDocument = document;

In questo caso salvo l’oggetto document del browser in una variabile per riutilizzarlo in seguito. Document è un oggetto creato di default dal browser al rendering della pagina web, volendo è possibile creare ed assegnare alla variabile un oggetto custom.

var myObject = {"nome":"John","cognome":"Snow"};

oppure

var myObject = new Person();

oppure

var myObject = function(){...}

Per il momento consideriamo solo i diversi tipi di dato, senza soffermarci su come gestire ogni singola tipologia, nelle prossime lezioni affronteremo meglio la sintassi e vedremo come utilizzare al meglio questi dati.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli, Tutorial e contrassegnata con . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>