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
Manipolazione dei dati
Oggetto e Tipi
- L’oggetto è una grandezza informatica in grado di rappresentare i dati.
- Nella programmazione OOP tutte i dati si rappresentano e si elaborano tramite oggetti.
- Quando scrivo:
pippo = new Date();
pippo = ″Ciao gente!″;
- non assegno semplicemente un valore a una variabile. Creo un dato complesso detto oggetto che oltre al valore contiene tutti gli strumenti necessari ad elaborarlo.
- Nella programmazione OOP i tipi di oggetto (il tipo è, in generale, determinato dal tipo di dati che l’oggetto è destinato ad elaborare) si chiamano classi.
- La classe, cioè, è l’insieme di regole che determinano come funziona un oggetto di una determinato tipo (o, i termini OOP, un istanza di una determinata classe).
- In Javascript non si fa menzione espressa del temine class (che per altro è una parola riservata che non può essere usata dall’utente). Per noi quindi oggetto (inteso come tipo di oggetto) e classe saranno sinonimi.
- Esistono oggetti (classi) predefinite dal linguaggio, oggetti (classi) create dalla comunità dei programmatori e che posso caricare e utilizzare nelle mie pagine Web e, infine, noi stessi possiamo creare le nostre classi per risolvere i nostri problemi.
Proprietà e Metodi
Ogni tipo di dato (classe) è caratterizzato da:
- Proprietà che ci consentono di leggere o modificare determinate caratteristiche di un individuo della classe
- Metodi che ci mettono a disposizione determinate azioni che gli oggetti possono compiere o subire
Le proprietà contengono un valore (come le variabili) che rappresenta una caratteristica dell'oggetto a cui la proprietà è riferita.
- Inizializzando una varibile le assegno un tipo (o classe)
pippo = ″Ciao gente!″;
- E posso accedere alle PROPRIETÀ E AI METODI DEFINITI DA QUEL TIPO.
- Usando l’operatore di appartenenza ˝•˝
- Usando le parentesi quadre che racchiudano il nome della proprietà come stringa di caratteri.
// Operatore di appartenenza
var len = pippo.length;
// Parentesi quadre
var len = pippo[″length″];
- In entrambi i casi
len conterrà il numero di caratteri di cui è composta la variabile stringa pippo
Alcune proprietà sono a sola lettura, non possono cioè essere modificate. Se scrivo:
pippo.length = 3;
otterrò un errore perché la proprietà length non può essere modificata.
Mentre se scrivo:
elemento.innerHTML = ″Ciao gente!″;
modificherò il contenuto HTML dell’elemento della pagina elemento (che un elemento HTML definito nella pagina) e le modifiche avranno un immediato effetto sul rendering della pagina stessa.
I metodi contengono codice eseguibile (come le funzioni), e ci consentono di eseguire azioni sull'oggetto.
- Una volta che una variabile contiene un oggetto
pippo = new Date();
- Posso accedere ai suoi metodi.
- Come le funzioni i metodi possono ricevere parametri e ritornare valori. Normalmente quando è previsto il passaggio di parametri i metodi modificano l'oggetto quando restituiscono valore restituiscono informazioni sull'oggetto.
- Uso l’operatore di appartenenza
. e faccio seguire l’identificatore dalle parentesi tonde, l'operatore di esecuzione ()
/*
il metodo getDate restituisce il giorno del mese della data contenuta in pippo che viene memorizzato nella variabile giorno.
*/
var giorno = pippo.getDate();
- Quando un metodo prevede dei parametri normalmente serve a modificare l'oggetto:
/*
Modifico la data contenuta nella variabile pippo: il giorno del mese sarà 3.
*/
pippo.setDate(3);
Funzioni
Cosa è una funzione
- Una funzione (o metodo) è una costrutto presente in tutti i linguaggi di programmazione progettato per eseguire un compito particolare.
- Il codice contenuto in una funzione JavaScript viene eseguita quando "qualcosa" invoca la funzione.
Sintassi
Una funzione JavaScript viene dichiarata (creata) con la parola chiave function seguita da una coppia di parentesi () e da un blocco di codice (serie di comandi separati da ;) racchiuso tra parentesi graffe {}.
/* Funzione che calcola la media tra due numeri */
function (a, b) {
return (a + b) / 2;
}
Le parentesi possono includere nomi di parametro separati da virgole: (parametro1, parametro2, ... )
Funzione con nome
Posso creare una funzione con nome facendo seguire un identificativo alla parola chiave function.
/* Funzione che calcola la media tra due numeri */
function media(a, b) {
return (a + b) / 2;
}
Funzione anonima
Posso assegnare una funzione a una variabile come un qualsiasi altro valore.
/* Funzione che calcola la media tra due numeri */
var media = function (a, b) {
return (a + b) / 2;
}
In entrambi i casi media conterrà la funzione e, dal punto di vista funzionale il risultato sarà in molti casi identico.
- Con parametri della funzione si indicano i nomi elencati tra parentesi nella definizione.
- Con argomenti della funzione si indicano i valori ricevuti dalla funzione, tramite i parametri, quando viene richiamata (eseguita).
- All'interno del corpo della funzione, i parametri si comportano come variabili locali.
Invocazione (esecuzione)
- Mentre il codice contenuto nelle altre parti di un programma JavaScript viene eseguito non appena il browser lo incontra, il codice all'interno della funzione verrà eseguito solo quando "qualcosa" esegue la funzione. Una funzione può essere invocata in tre modi:
- La funzione viene espressamente richiamata dal codice, come qualsiasi altro comando JavaScript
- La funzione viene associata ad un evento (ad esempio il click su un pulsante) e viene richiamata automaticamente ogni volta che l'evento si verifica
- Infine una funzione può essere self invoked (cioè richiamarsi da sola)
- Nel primo e nel terzo caso (quando, cioè, la funzione non è eseguita automaticamente) ciò che scatena l'esecuzione è l'operatore di esecuzione, una coppia di parentesi tonde
(), che seguono la funzione e che possono contenere gli argomenti (i valori) che la funzione elabora.
- Il comando
return nel corpo della funzione arresta l'esecuzione di una funzione.
- Se la funzione viene richiamata da uno script, una volta eseguita, l'esecuzione del codice principale continua dal punto in cui la funzione è stata richiamata.
- Le funzioni possono restituire un valore che normalmente è un calcolo o una elaborazione svolta sui valori passati ala funzione attraverso i parametri. Il valore di ritorno viene "restituito" al "chiamante" con il comando
return.
/* Funzione che calcola la media tra due numeri */
function media (a, b) {
return (a + b) / 2;
}
// Calcolo la media tra 34 e 78
var m = media(34, 78);
// E comunico il risultato cambiando il contenut html dell'elemento con id="demo"
document.getElementById('demo').innerHTML = "La media è " + m;
Utilità delle funzioni
L’uso di funzioni ha due vantaggi:
- È possibile riutilizzare il codice: Definire il codice di una volta, e utilizzarlo più volte.
- È possibile utilizzare lo stesso codice con argomenti diversi, per produrre risultati diversi.
L'operatore ()
Per richiamare (eseguire) la funzione devo fare seguire il nome della funzione dall'operatore () che può contenere l'elenco degli argomenti che passo alla funzione, se previsti.
La funzione non seguita dall'operatore di esecuzione restituisce il contenuto della funzione stessa (la definizione) anziché il risultato