Variabili

Le variabili JavaScript sono contenitori per memorizzare valori.

  • In questo esempio, prezzo1, prezzo2, e totale, sono variabili:
var prezzo1 = 10;
var prezzo2 = 12;
var totale = prezzo1 + prezzo2;
  • Nella programmazione, proprio come in algebra, usiamo le variabili (come prezzo1) per contenere i valori.
  • Nella programmazione, proprio come in algebra, usiamo le variabili nelle espressioni (totale = prezzo1 + prezzo2).

Nomi delle variabili

  • Tutti le variabili devono essere identificate con nomi univoci .
  • Questi nomi unici sono chiamati identificatori .
  • Gli identificatori possono essere nomi brevi (come x e y) o nomi più descrittivi (somma, codiceFiscale).
  • Le regole generali per la costruzione di nomi per le variabili (identificatori unici) sono:
    • oI nomi possono contenere lettere, cifre, sottolineature, e segni di dollaro.
    • oI nomi devono iniziare con una lettera, con $ o _
    • oNomi sono case sensitive (y e Y sono variabili diverse)
    • oLe parole riservate (come le parole chiave JavaScript) non possono essere utilizzati come nomi

Assegnazione di un valore

  • In JavaScript, il segno di uguale (=) è un operatore assegnazione, non significa uguale a.
  • La seguente espressione non ha senso in algebra:
x = x + 5;
  • In JavaScript, invece assegna il valore dell'espressione x + 5 a x (Viene calcolato il valore di x + 5 e il risultato viene posto in x,  in altri termini il valore di x viene incrementato di 5).
  • Le variabili JavaScript possono contenere numeri (come 5) e testi come "Ciao da Javascript".
  • In programmazione, i valori di testo sono chiamati string.
  • Le variabili JavaScript possono contenere qualsiasi tipo di dato. Per ora parleremo di numeri (Number) e stringhe (String).
  • Le stringhe di testo sono scritte tra virgolette doppie o singole. I numeri sono scritti senza virgolette.
  • Se si mette un numero tra virgolette, si sarà trattato come una stringa di testo.

Dichiarazione

La creazione di una variabile in JavaScript si chiama "dichiarazione". Si dichiara una variabile utilizzando il comando var:

  

var carName;

Dopo la dichiarazione, la variabile non ha alcun valore. (per essere precisi il valore speciale undefined). Per assegnare un valore alla variabile, si utilizza il segno =.

carName = "Fiat 500";

Posso anche assegnare un valore alla variabile all'atto della dichiarazione.

 

var carName = "Fiat 500";

Nell'esempio qui sotto, creiamo una variabile denominata carName, assegniamo alla variabile il valore "Fiat 500". Infine mettiamo il valore di carName all'interno di un paragrafo HTML con id = "demo":

<p id="demo"></p>
<script>
  var carName = "Fiat 500";
  document.getElementById("demo").innerHTML = carName;
</script>

Posso anche dichiarare più variabili con un unico comando var. In questo caso separo le variabili con una virgola.

var x = 5, y = 6, z;

Operatori

Gli operatori sono elementi del linguaggio composti di uno o più caratteri speciali o da una parola che applicati a uno o più operandi (che possono essere letterali o variabili) producono un risultato.

Operatori aritmetici

Operatore Funzione Espressione Valore di y Valore di x
    Valore iniziale: y=5
+ Addizione x = y + 2 y = 5 x = 7
- Sottrazione x = y - 2 y = 5 x = 3
* Moltiplicazione x = y * 2 y = 5 x = 10
/ Divisione x = y / 2 y = 5 x = 2.5
% Resto intero (Modulo) x = y % 2 y = 5 x = 1
++ Incremento x = ++y y = 6 x = 6
x = y++ y = 6 x = 5
-- Decremento x = --y y = 4 x = 4
x = y-- y = 4 x = 5

Precedenza degli operatori

Una operazione aritmetica si può operare su letterali:

var x = 100 + 50;

variabili:

var x = a + b;

espressioni:

var x = (100 + 50) * a;

Come nella matematica appresa a scuola la moltiplicazione (*) e la divisione (/) hanno una maggiore priorità di addizione (+) e sottrazione (-).

La precedenza può essere modificato utilizzando parentesi:

var x = (100 + 50) * 3;
Precedenza Operatore Descrizione Esempio
19 () Operatore di raggruppamento (3 + 4)
18 ., [] Operatori di appartenenza persona.nome, persona["nome"]
17 (), new Richiamo di una funzione, creazione di un oggetto myFunction(), new Date()
16 ++, -- Incremento e decremento postfissi i++, i--
15 ++, -- Incremento e decremento prefissi ++i, --i
15 ! not logico !(x == y)
15 typeof Individuazione del tipo typeof x
14 *, /, % Moltiplicazione, divisione, modulo 10 * 5, 10 / 5, 10 % 5
13 +, - Addizione, sottrazione 10 + 5, 10 - 5
12 <<, >>, >>> Shift binario x << 2, x >> 2, x >>> 2
11 <, <=, >, >= Confronto (maggiore e minore) x < y, x <= y, x > y, x >= y
10 ==, ===, !=, !== Confronto (uguale e non uguale) x == y, x === y, x != y, x !== y
6 && and logico x && y
5 || or logico x || y
3 =, +=, -=, *=, /=, %=, ecc. Operatori di assegnazione x = y, x += y, x -= y, x += y, x /= y, x %= y

Operatori di assegnazione

Operatore Espressione Espressione equivalente Valore assegnato a x
  Valori di partenza: x = 10; y = 5;
= x = y x = y 5
+= x += y x = x + y 15
-= x -= y x = x - y 5
*= x *= y x = x * y 50
/= x /= y x = x / y 2
%= x %= y x = x % y 0

Tipi di dato

 

Nella programmazione, il tipo di dato è un concetto centrale.

A secondo del tipo di dato contenuto il browser tratterà diversamente  i valori delle variabili.

  var x = 10 + 5;       // x vale 15
  var x = "10" + "5";   // x vale "105"

Contrariamente ad altri linguaggi il tipo dei dati delle variabili si adatta automaticamente ai dati contenuti:

  var x;                              // il tipo di dati di x è undefined
  x = 16;                             // il tipo di dati di x è Number
  x = "Ciao gente!";                  // il tipo di dati di x è String
  x = {nome:"John", cognome:"Doe"};   // il tipo di dati di x è Object

L'operatore + consente sia di sommare numeri che di concatenare stringhe di caratteri. Quando mescolo i due tipi in una espressione i numeri saranno convertiti in stringa: 

Operazione Espressione Conversione Risultato
Somma numero con numero x = 5 + 5; Nessuna conversione 10
Somma numero in una stringa con numero x = '5' + 5; x = '5' + '5' ’55’
Somma una stringa con un numero x = 'Carlo'+ 5; x = 'Carlo'+ '5'; ‘Carlo5’

Bisogna comunque tener conto dell'ordine con cui vengono risolte le operazioni che compongono l'espressione. La conversione avverrà solo quando necessario:

Operazione Espressione Conversioni Risultato
La somma tra numeri precede una somma con una stringa x = 5 + 10 + "Pippo"; x = 15 + "Pippo";
x = "15" + "Pippo";		 "15Pippo"
La somma tra numeri segue una somma con una stringa x = "Pippo" + 5 + 10; x = "Pippo" + '5' + '10'; ’Pippo510’
Uso delle parentesi x = "Pippo" + (5 + 10); x = "Pippo" + 15; x = "Pippo" + "15"; ‘Pippo15’

String

  • Una stringa è una sequenza di caratteri che permette di rappresentare testi. Le stringhe sono racchiuse tra apici singoli o apici doppi.
/* String. Tra apici semplici o doppi */
x = 'Ciao da Javascript'; // Stringa tra apici semplici
x = "Ciao da Javascript"; // Stringa tra apici doppi
x = 'Il nome è "Pietro"'; // Stringa tra apici semplici (che contiene apici doppi)
x = "Il nome è 'Pietro'"; // Stringa tra apici semplici (che contiene apici semplici
  • Per inserire ritorni a capo, tabulazioni, particolari caratteri o informazioni di formattazione si utilizzano speciali sequenze di caratteri dette sequenze di escape. Una sequenza di escape è formata da un carattere preceduto dal simbolo “\” (backslash). La sequenza di escape inserisce un carattere che non sarebbe altrimenti rappresentabile in una stringa.

Principali sequenze di escape   

sequenza carattere corrispondente
\n nuova riga;
\r ritorno a capo;
\t tabulazione orizzontale;
\‘ apostrofo (o apice singolo);
\" doppio apice;
\\ backslash (essendo un carattere speciale deve essere inserito  con una sequenza di escape).

Numbers

Contrariamente d altri linguaggi JavaScript ha un solo tipo di numeri.

I numeri possono essere scritti con, o senza decimali. Il separatore tra la parte intera e la parte decimale è il punto.

  var x1 = 34.00;     // Con decimali
  var x2 = 34;        // Senza decimali

Numeri molto grandi o molto piccoli possono essere scritti in notazione scientifica (esponenziale):

  var y = 123e5;      // 1230000
  var z = 123e-5;     // 0.00123