Guida a JavaScript: tipi di variabili e Array

Guida a JavaScript: tipi di variabili e Array

di Pubblicato: 19 gennaio 2015 0 commenti

Dopo aver visto come si inserisce un javascript in una pagina e come si dichiara una variabile, entriamo nel dettaglio di quest’ultima. Javascript a differenza di altri linguaggi di programmazione non impiega un concetto di rigidità sul contenuto di una variabile poiché non richiede di definirne la tipologia. Tuttavia è bene comprendere i vari tipi per non incorrere in errori banali.

Numeri

Il più facile da gestire è sicuramente la variabile numerica, sia che sia di valore intero che decimale.

var numero = 7;
var numeroDecimale = 4.53827;

La cosidettà “virgola mobile” viene indicata da un punto e non dalla virgola come si potrebbe credere. I valori decimali possono avere un numero pressoché illimitato e possono anche essere di valore negativo.

La tipologia numerica può anche essere trattata direttamente con somma, sottrazione, moltiplicazione e divisione, attraverso i simboli  + – * /  chiamati operatori. Gli operatori è consigliato che siano distanziati da uno spazio prima e dopo i valori.

var somma = 3 + 2;
var sottrazione = 10 - 6;
var moltiplicazione = 3 * 2;
var divisione = 100 / 10;

Nel caso di operazione più complesse, cioè equazioni, vengono date in precedenza matematica la moltiplicazione, divisione, somma e sottrazione(da sinistra verso destra). Per contravvenire a tale regola valgono le parentesi tonde. Facciamo due esempi:

var equazioneTipica = 3 + 2 + 5 *2 - 100 / 10;
var equazioneComplessa = (3 + 2) + (5 * 2) - (100 / 10);

Nei calcoli si possono anche combinare numeri interi con virgola mobile, ovviamente il risultato se non diversamente trattato sarà sempre in virgola mobile. Si possono altresì mischiare variabili con valori numerici.

var dozzina= 12;
var mezza = dozzina / 2;
var dozzinaComposta = mezza + mezza;

Come abbiamo evidenziato nel capitolo precedente in Javascript si predilige la capacità di accorciare talune soluzioni per scrivere meno codice e renderlo più snello. Una delle funzionalità interessanti nel calcolo è la possibilità di utilizzare valori di incremento e decremento. Ad esempio conosciamo il valore di una variabile ma lo vogliamo aumentare di un certo step di valore.

 var anni = 30;
anni = anni + 1;

in questo caso il valore della variabile anni alla fine sarà 31 ma il codice può essere scritto anche in questi due modi:

var anni 30;
anni += 1;
//oppure
anni++;

Infatti gli operatori  += ++ -= —  permettono l’incremento o decremento di un certo step. Questo tipo di considerazione in questo momento non ha molto senso, ma vedremo in seguito che nelle iterazioni cicliche o nelle funzioni risulteranno molto utili.

Stringhe

Se abbiamo visto i numeri non possiamo non vedere le lettere, e le lettere con i numeri, insomma una stringa. La stringa ha lunghezza virtualmente infinita e può contenere numeri, lettere, caratteri speciali (@,%&) e spazi. La stringa è sempre racchiusa da apici sia singoli che doppi, purché il simbolo di apertura e chiusura sia lo stesso.

var apiceSemplice = 'ho utilizzato apici semplici';
var apiceDoppio = "ho utilizzato un apice doppio";

Va da se che se dovete utilizzare un apice o un doppio apice all’interno della stringa questa va ad interrompersi creando un errore di esecuzione. Come in PHP anche qui si può intervenire inserendo una backslash prima del simbolo.

var apostrofo = 'ho visto un\'anatra.';
var virgolette = "gli ho detto, passami quella \"cianfrusaglia\".";

In questo caso potremo tranquillamente richiamare la nostra variabile con un testo formattato con apostrofi e apici esattamente come li desideriamo.

Come per i numeri anche le stringhe si possono addizionare.

var nome = "Mario" + "Rossi";
//oppure
var nome = "Mario";
var cognome = "Rossi";
nome += cognome;

I due casi sopra riporteranno in stampa della variabile per entrambi MarioRossi (tutto attaccato perché non abbiamo messo spazi)
Le variabili come abbiamo detto non sono rigide e si possono mischiare le stringhe con i numeri.

var nato = "sono nato nel " + 1972;
//oppure
var natoStringa = "sono nato nel ";
var natoAnno = 1972;
natoStringa += natoAnno

la variabile stampata riporterà “sono nato nel 1972”.

Booleano

I valori booleano non c’è molto da riportare poichè possono venire dichiarati come falso o come vero. Infatti le parole  true false  sono parole riservate e non necessitano di essere racchiuse tra apici, se lo facessimo diventerebbero delle normali stringhe senza la proprietà booleana.

var laTerraEraPiatta = false;
var laTerraEraTonda = true;
var nonSonoUnBooleano = "true";

Array

Fino ad ora abbiamo visto delle dichiarazioni di valori tutto sommato semplici, ma capiterà piuttosto spesso di avere a che fare con insieme di dati, ad esempio un elenco, una serie di numeri o di stringhe, e gestirli può diventare molto, molto complicato. Gli Array assolvono proprio alla gestione semplificata di gruppi di variabili. Un Array è una sorta di cassettone dove ogni valore può avere il suo cassetto per riporre i dati. La variabile array è dichiarata con parentesi quadre aperte e chiuse.

var mese = [];
mese[0] = "gennaio";
mese[1] = "febbraio";
mese[2] = "marzo";

La prima riga viene chiamata indice le altre righe elementi. Si noti come gli elementi partano sempre dal valore zero che inizialmente può creare una certa confusione.

Come sempre Javascript va alla compressione per cui l’array precedente si può benissimo scrivere in questo modo:

var mese = ["gennaio", "febbraio", "marzo"];

In automatico i valori 0,1 e 2 saranno attribuiti in base alla loro posizione da sinistra verso destra.
Ora se volessimo richiamare nella classica alertbox il mese di febbraio da questo array, dovremo chiamare la variabile in questo modo:

alert (mese[1]);

Ovviamente negli array i tipi di dati possono essere quelli descritti in questo articolo, numeri e stringhe, ma un Array può contenere anche altri Array. In questo caso si tratta di un array multi dimensionale, cioè si possono creare gruppi di gruppi, o meglio sottogruppi. Vediamo un esempio:

var colori = ["rosso", "verde", "giallo"];
var frutta = ["mele", "pere", "arance"];
var indirizzi = ["via", "Roma", 123];
var superArray = [colori, frutta, indirizzi];

Come vediamo superArray contiene tutti i dati degli altri tre Array. Se vogliamo estrapolare un dato?

var dato = superArray[2][1];

In questo caso la risulta di dato sarà Roma, poiché con il valore 2 è stato selezionato il terzo array, mentre con 1 è stato selezionato il dato che è Roma. Assimilato questo ragionamento si può giocare con la dimensionalità, ovvero si possono fare Array di Array di Array eccetera.. sempre che poi non finiate con l’incasinarvi 🙂

Una cosa molto interessante è che ogni Array ha una sua lunghezza, ovvero il numero di elementi da cui è costituito. Tale lunghezza non è detto che possa essere nota a priori, ad esempio quando un array deriva da una funzione che ha trattato al volo certi dati. Si può conoscere la lunghezza attraverso l’estensione .lenght

var arrayNumerico = ["primo", "secondo", "terzo"];
var lunghezzaArray = arrayNumerico.lenght;

Il risultato della variabile lunghezzaArray sarà 3, poiché tre sono gli elementi dell’array. In questo modo saremo in grado di estrapolarne il contenuto sapendo quanti sono gli elementi e non correremo il rischio di chiamare un elemento che non esiste.

Array Associativi

L’ultima parte dell’articolo riguarda gli Array Associativi. Ovvero se gli Array possono contenere una notevole quantità di elementi magari non eterogenei tra loro, con l’associativo si definisce una coppia chiave – valore. Le chiavi saranno sempre delle stringhe, mentre i valori possono essere numeri, stringhe e perfino altri Array, sia normali che associativi.

var cap [];
cap["Roma"] = "00118" ;
cap["Milano"] = 20121;
cap["Udine"] = 33030;

In questo caso richiamare un array associativo è molto semplice dal punto di vista mnemonico, riutilizziamo il buon vecchio alert

alert (cap["Udine"]);

Conclusioni.
Le variabili possono essere gestite singolarmente o in gruppi, possono essere manipolate matematicamente o si può giocare con le stringhe. Nel prossimo capitolo vedremo come gestire queste informazioni in modo più organico ed in presenza di fattori decisionali attraverso le condizioni cicliche e di flusso.

Guida ai JavaScript - sommario

 

Ti è stato utile questo articolo?
Considera una piccola donazione: 1MVsPDJu9ctp8WfyiQHJCPjwFJKe7YWHek

Vuoi dire o aggiungere qualcosa?

sezione commenti aperta al pubblico

Non ci sono ancora commenti!

Puoi essere il primo a commentare.

Rispondi