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 [textmarker color=”CFCFCF”] + – * / [/textmarker] 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;
var resto = 10 % 3;
// var resto sarà uguale a 1
// ovvero 3 è contenuto 3 volte in 10
// 3 x 3 = 9, quindi per arrivare a 10
// il resto è 1
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 * 2;
// il risultato sarà 7
// perché prima viene moltiplicato 2 * 2
// poi il risultato viene addizionato a 3
var equazioneComplessa = (3 + 2) * 2;
// il risultato sarà 10
// perché 3+2 è contingentato
// e solo il suo risultato viene moltiplicato * 2Nei 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 [textmarker color=”CFCFCF”] += ++ -= — [/textmarker] 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 [textmarker color=”CFCFCF”] true false [/textmarker] 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:
window.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
window.alert (cap["Udine"]);
Evoluzione della specie
Con l’arrivo di ECMA6 o Javascript ES6 del 2015 le variabili sono state riviste. Ovvero quanto esposto sopra rimane valido e funzionale, tuttavia si era reso necessario migliorare il sistema introducendo due nuove indicazioni per le variabili che sono let e const.
La differenza non è per nulla complicata, partiamo da const che poi ci permette di comprendere meglio sia let che la differenze con var. Dichiarando una variabile con const questa non può essere modificata, è come se ci fosse una sorta di blocco in scrittura o riscrittura. Con let si dichiara una variabile che invece può essere modificata, sostanzialmente possiamo vederla simile a var anche se in realtà ci sono delle differenze.
// non posso modificarla
const pippo = "sono pippo e nessuno mi cambia";
// posso modificarla
let pluto = "sono modificabile";
// posso anche questa modificarla
var paperino = "sono modificabile anche io";
Infatti ad esempio se dichiariamo una variabile con var all’interno di un ciclo ripetitivo (ad esempio un ciclo for), questa potrà essere chiamata anche all’esterno dello stesso, mentre nel caso di let non sarà valida al di fuori del ciclo. Si veda questo esempio:
for (var a = 0; a < 3; a++) {
var b = a * 2;
}
console.log(a); // 3
console.log(b); // 4
for (let c = 0; c < 3; c++) {
let d = c * 2;
}
console.log(typeof c); // undefined
console.log(typeof d); // undefined
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.
