Corso di Informatica Multimediale

Il linguaggio JavaScript

Marco Comini

2021-10-07
JavaScript: Letterali

Booleani: true e false

Numeri: al contrario di altri linguaggi non si distingue fra numeri interi e
numeri in virgola mobile. In JavaScript c’è un unico tipo di numeri che si
denotano con la sintassi tipica, ad esempio
-345
4.33
4.33e-3 ≡ 0.00433
Sequenze di Caratteri (Stringhe): si denotano con la sintassi tipica di tutti
(o quasi) i linguaggi
caratteri “stampabili”: "abc" , "0123" , "$" , . . .
caratteri speciali: a capo "\n" , carattere " "\"" , carattere \ "\\"
caratteri non disponibili nell’encoding del file sorgente JavaScript
"\u{xxxx}" dove xxxx è la codifica Unicode del carattere che ci interessa.
Ad esempio "\u{1F639}" è uno smile.
Equivalentemente si possono usare i delimitatori ’ : ’abc’ , ’0123’ , ’$’ ,
’\n’ , ’\’’ , \ ’\\’ , ’"’ , . . .

Marco Comini Informatica Multimediale 2021-10-07 1 / 21

JavaScript: dichiarazione variabili
un identificatore in JavaScript è una sequenza di caratteri che inizia con un
carattere alfabetico e tutti gli altri caratteri devono essere
caratteri alfabetici oppure
caratteri numerici oppure
il carattere _
il carattere $
TRANNE le keyword del linguaggio ( if , while , . . . )
Quindi sono identificatori legali SonoUnaVariabile , sonounavariabile ,
sono_una_variabile , SONO$UNA$VARIABILE
le variabili si dichiarano usando la keyword var con i nomi separati da , e
terminando con ;
1 var id 1 , ..., id n ;
Si può aggiungere una espressione di inizializzazione. Ad esempio
1 var x =3 , y =4+ x , z , stop ;
le variabili non sono tipate e possono assumere valori di tipi diversi durante
l’esecuzione
Marco Comini Informatica Multimediale 2021-10-07 2 / 21
JavaScript: Espressioni: operazioni aritmetico-logiche/1

Le espressioni sono valutate da sinistra a destra.

Operazioni aritmetiche binarie: ci sono 4 operazioni aritmetiche + , - ,

* , / . Abbiamo inoltre ** per l’elevamento a potenza e % per il modulo
(resto della divisione).
Valgono le usuali regole di precedenza degli operatori per cui
3+4*5 = 3+(4*5) ̸= (3+4)*5
** associa a destra, per esempio 3**4**5 = 3**(4**5)
Tutte le altre associano a sinistra, per esempio 3/4/5 = (3/4)/5
- , * o / applicati ad (almeno) un argomento non numerico valgono NaN
(Not a Number)

Operazioni aritmetiche unarie: c’è la negazione aritmetica - . Essendo lo

stesso simbolo della sottrazione nascono problemi di ambiguità che si devono
risolvere usando esplicitamente delle parentesi. Ad esempio 3-(-2)

Marco Comini Informatica Multimediale 2021-10-07 3 / 21

JavaScript: Espressioni: operazioni aritmetico-logiche/2
JavaScript: Espressioni: operazioni booleane

Operazioni relazionali: anche queste si denotano con la sintassi tipica di

molti altri linguaggi.
< minore
> maggiore
<= minore o uguale
>= maggiore o uguale
== uguale (non basta un solo = )
!= diverso
Operatori booleani:
Congiunzione (AND): &&
Disgiunzione (OR): ||
Negazione logica (NOT): !
Vale la proprietà e1 != e2 ⇐⇒ !(e1 == e2) .

Marco Comini Informatica Multimediale 2021-10-07 4 / 21

JavaScript: Espressioni: precedenze e associatività

Tabella delle precedenze (dalla maggiore alla minore)

!
** associativo a destra
*, /, % associativi a sinistra
+ , - binario associativi a sinistra
< , <= , > , >= associativi a sinistra
== , != associativi a sinistra
&& associativo a sinistra
|| associativo a sinistra
Ad esempio ! x == y viene riconosciuto come (! x) == y non come
! (x == y) ≡ x != y
Ad esempio x+2<7 || !p && -z>5 viene riconosciuto come
((x+2)<7) || ((!p) && ((-z)>5))

Marco Comini Informatica Multimediale 2021-10-07 5 / 21

JavaScript: Espressioni: somme e confronti di stringhe

L’operazione + funziona anche fra stringhe, producendone la concatenazione.

Ad esempio "ab" + "cd" produce "abcd"
La relazione < funziona anche fra stringhe, secondo l’ordinamento
lessicografico: si confrontano i caratteri delle le stringhe partendo dall’inizio
se la seconda stringa finisce allora si restituisce false (indipendentemente
dalla fine della prima stringa)
se la prima stringa finisce (ma la seconda no) allora si restituisce true
se i caratteri analizzati nelle due stringhe sono uguali si procede con i caratteri
successivi
se i caratteri analizzati nelle due stringhe sono diversi si restituisce il confronto
delle loro codifiche Unicode
Analogamente per > <= >=
Ad esempio
"ab" < "cd" vale true perché il carattere a è minore di c
"ac" < "ab" vale false perché il carattere c è maggiore di b
"ac" < "a" vale false perché dopo il carattere a la seconda stringa è
finita
"13" < "2" vale true perché il carattere 1 è minore di 2

Marco Comini Informatica Multimediale 2021-10-07 6 / 21

JavaScript: Espressioni: Operazioni che coinvolgono stringhe

L’addizione di un numero n con una stringa s produce la concatenazione

della conversione in stringa del numero n con la stringa s. Ad esempio
13 + "cd" produce "13cd"
3.3e20+"a" produce "330000000000000000000a"
3.3e21+"a" produce "3.3e+21a"
3+4+"ciao" produce 7ciao
"ciao"+3+4 produce ciao34
Le altre operazioni aritmetiche invece convertono eventuali stringhe in
numeri. Una stringa vuota viene convertita in 0. Una stringa non numerica
viene convertita in NaN . Ad esempio
"33"-"3" produce 30 .
3/"" produce Infinity .
3*"3a" produce NaN
Anche le operazioni di confronto convertono eventuali stringhe in numeri.
Inoltre un confronto con un NaN è sempre false . Ad esempio
133 < "23" produce false ( mentre "133"< "3" produce true ).
sia 13 < "2a" che 13 > "2a" producono false .

Marco Comini Informatica Multimediale 2021-10-07 7 / 21

JavaScript: Espressioni: valutazione lazy operatori booleani

Gli operatori booleani sono valutati lazy:

Per valutare e1 && e2 si valuta e1 ; se vale false si restituisce false
(senza valutare e2 ), altrimenti si restituisce il valore della valutazione di e2 .
Per valutare e1 || e2 si valuta e1 ; se vale true si restituisce true
(senza valutare e2 ), altrimenti si restituisce il valore della valutazione di e2 .
Vale anche per argomenti non booleani, quindi
false && "ciao" vale false , mentre
true && "ciao" vale "ciao"

Marco Comini Informatica Multimediale 2021-10-07 8 / 21

JavaScript: Espressioni: valori booleani “rilassati”/1

Nel considerare espressioni booleane JavaScript “rilassa” i valori vero e falso.

Più precisamente JavaScript forza la conversione a tipo booleano di una
qualsiasi espressione che compare in un contesto booleano (le guardie di cicli
o condizionali).
Nella documentazione ufficiale si parla di truthy (veritiero) e falsy per
indicare il valore che viene considerato come vero o falso se compare in un
contesto booleano
falsy = uno dei valori
false la keyword false
0 il numero 0
-0 il numero 0 negato
"" la stringa vuota
null l’assenza di un valore
undefined il valore primitivo undefined
NaN il valore not a number
truthy = tutti gli altri valori

Marco Comini Informatica Multimediale 2021-10-07 9 / 21

JavaScript: Espressioni: valori booleani “rilassati”/2

Gli operatori booleani sono quindi valutati così:

Per valutare e1 && e2 si valuta e1 ; se vale un valore v falsy si restituisce v
(senza valutare e2 ), altrimenti si restituisce il valore della valutazione di e2 .
Per valutare e1 || e2 si valuta e1 ; se vale un valore v truthy si restituisce v
(senza valutare e2 ), altrimenti si restituisce il valore della valutazione di e2 .
Ad esempio
3*"a" || "hello" vale "hello" , perché 3*"a" vale NaN , che è falsy.
3*"a" && "hello" vale Ask students!

Marco Comini Informatica Multimediale 2021-10-07 10 / 21

JavaScript: Espressioni: valori booleani “rilassati”/2

Gli operatori booleani sono quindi valutati così:

Per valutare e1 && e2 si valuta e1 ; se vale un valore v falsy si restituisce v
(senza valutare e2 ), altrimenti si restituisce il valore della valutazione di e2 .
Per valutare e1 || e2 si valuta e1 ; se vale un valore v truthy si restituisce v
(senza valutare e2 ), altrimenti si restituisce il valore della valutazione di e2 .
Ad esempio
3*"a" || "hello" vale "hello" , perché 3*"a" vale NaN , che è falsy.
3*"a" && "hello" vale NaN

Marco Comini Informatica Multimediale 2021-10-07 10 / 21

JavaScript: Espressioni: espressioni condizionali
In JavaScript abbiamo l’espressione condizionale con la sintassi
r-expr1 ? r-expr2 : r-expr3
Per valutare il suo valore si valuta r-expr1 ,
se vale truthy allora il valore è quello di r-expr2
▶ più precisamente si procede valutando r-expr2 , se tale valutazione termina ad un
valore v allora il valore dell’espressione condizionale è v; se non termina la
valutazione dell’espressione condizionale non termina
se vale falsy allora il valore è quello di r-expr3
Ad esempio (x + (x>0 ? 2*x : 3)) > 5 ? 77 : 44
quando x = 2 produce Ask students!

Marco Comini Informatica Multimediale 2021-10-07 11 / 21

JavaScript: Espressioni: espressioni condizionali
In JavaScript abbiamo l’espressione condizionale con la sintassi
r-expr1 ? r-expr2 : r-expr3
Per valutare il suo valore si valuta r-expr1 ,
se vale truthy allora il valore è quello di r-expr2
▶ più precisamente si procede valutando r-expr2 , se tale valutazione termina ad un
valore v allora il valore dell’espressione condizionale è v; se non termina la
valutazione dell’espressione condizionale non termina
se vale falsy allora il valore è quello di r-expr3
Ad esempio (x + (x>0 ? 2*x : 3)) > 5 ? 77 : 44
quando x = 2 produce 77
▶ x>0 ? 2*x : 3 =⇒ 2>0 ? 2*x : 3 =⇒ true ? 2*x : 3 =⇒ 2*x
=⇒ 2*2 =⇒ 4
▶ (x + 4) > 5 ? 77 : 44 =⇒ (2 + 4) > 5 ? 77 : 44 =⇒
6 > 5 ? 77 : 44 =⇒ true ? 77 : 44 =⇒ 77

quando x = 0 produce Ask students!

Marco Comini Informatica Multimediale 2021-10-07 11 / 21

JavaScript: Espressioni: espressioni condizionali
In JavaScript abbiamo l’espressione condizionale con la sintassi
r-expr1 ? r-expr2 : r-expr3
Per valutare il suo valore si valuta r-expr1 ,
se vale truthy allora il valore è quello di r-expr2
▶ più precisamente si procede valutando r-expr2 , se tale valutazione termina ad un
valore v allora il valore dell’espressione condizionale è v; se non termina la
valutazione dell’espressione condizionale non termina
se vale falsy allora il valore è quello di r-expr3
Ad esempio (x + (x>0 ? 2*x : 3)) > 5 ? 77 : 44
quando x = 2 produce 77
▶ x>0 ? 2*x : 3 =⇒ 2>0 ? 2*x : 3 =⇒ true ? 2*x : 3 =⇒ 2*x
=⇒ 2*2 =⇒ 4
▶ (x + 4) > 5 ? 77 : 44 =⇒ (2 + 4) > 5 ? 77 : 44 =⇒
6 > 5 ? 77 : 44 =⇒ true ? 77 : 44 =⇒ 77
quando x = 0 produce 44
▶ x>0 ? 2*x : 3 =⇒ 0>0 ? 2*x : 3 =⇒ false ? 2*x : 3 =⇒ 3
▶ (x + 3) > 5 ? 77 : 44 =⇒ (0 + 3) > 5 ? 77 : 44 =⇒
3 > 5 ? 77 : 44 =⇒ false ? 77 : 44 =⇒ 44

Marco Comini Informatica Multimediale 2021-10-07 11 / 21

JavaScript: Espressioni: alcune primitive/1

prompt( string , string ) visualizza una dialog-box (finestra di dialogo) nel

browser che richiede dell’input all’utente, insieme a un pulsante OK e
Annulla. Visualizza la prima stringa e propone come input la seconda stringa.
(il suo tipo è String×String→String).

confirm( string ) visualizza una dialog-box (finestra di dialogo) nel browser

con un messaggio specificato, insieme a un pulsante OK e Annulla.
Premendo OK restituisce true altrimenti false .
(il suo tipo è String→Boolean).

alert( string , string ) visualizza una dialog-box nel browser con un

messaggio specificato e un unico pulsante close.

print( string ) visualizza la stringa in console.

Marco Comini Informatica Multimediale 2021-10-07 12 / 21

JavaScript: Espressioni: alcune primitive/2
alcune primitive matematiche

Number( string ) converte una rappresentazione di un numero nel numero

corrispondente
(il suo tipo è String→Number).

Number.MAX_VALUE il numero più grande possibile in JavaScript

(1.7976931348623157e+308)

Number.MIN_VALUE il numero più piccolo possibile in JavaScript (5e-324)

Number.POSITIVE_INFINITY Rappresenta +∞ (restituito in caso di

overflow)

Number.NEGATIVE_INFINITY Rappresenta −∞ (restituito in caso di

overflow)

Marco Comini Informatica Multimediale 2021-10-07 13 / 21

JavaScript: Espressioni: alcune primitive/3
alcune primitive matematiche

Math.max( number , number ) calcola il massimo fra due numeri. Analogo

per Math.min .
(il loro tipo è Number×Number→Number)

Math.sqrt( number ) La radice quadrata di un numero.

(il suo tipo è Number→Number)

Math.PI La migliore approssimazione possibile in Javascript del numero π

Math.sin( number ) Il seno di un valore espresso in radianti. Analogo per

Math.cos e Math.tan .
(il loro tipo è Number→Number)
Esempio Math.sin(Math.PI/2) = 1 e Math.sin(Math.PI) = 1.22e-16

Marco Comini Informatica Multimediale 2021-10-07 14 / 21

Corso di Informatica Multimediale
Il linguaggio JavaScript: Comandi

Marco Comini

2021-10-07
JavaScript: Comandi: Blocchi e assegnamenti

I blocchi iniziano con { e terminano con } . Possono contenere sequenze di

comandi e di dichiarazioni di variabili, anche “mescolati”. Comandi e
dichiarazioni sono tutti terminati da ; .
1 {
2 var x = 4;
3 print ( x );
4 var y = x *8;
5 x =y -3;
6 print ( x + Y );
7 }
Possono essere messi al posto di un qualsiasi altro comando
Gli assegnamenti seguono lo schema generale l-expr o= r-expr. Le
possibilità sono = , += , -= , *= , /= , %= .
Si valuta prima l-expr (e dopo r-expr )

Marco Comini Informatica Multimediale 2021-10-07 15 / 21

JavaScript: Comandi: esempio dichiarazioni e assegnamenti

Esempio artificiale.
1 var s = " ab " ;
2 s += " cd " ;
3 s += 1;
4 var x = 1;
5 x += s +3;
6 x += 2 > s ;
s
x

Marco Comini Informatica Multimediale 2021-10-07 16 / 21

JavaScript: Comandi: esempio dichiarazioni e assegnamenti

Esempio artificiale.
1 −→var s = " ab " ;
2 s += " cd " ;
3 s += 1;
4 var x = 1;
5 x += s +3;
6 x += 2 > s ;
s "ab"
x

Marco Comini Informatica Multimediale 2021-10-07 16 / 21

JavaScript: Comandi: esempio dichiarazioni e assegnamenti

Esempio artificiale.
1 var s = " ab " ;
2 −→s += " cd " ;
3 s += 1;
4 var x = 1;
5 x += s +3;
6 x += 2 > s ;

s "ab" "abcd"
x

eval "ab" + "cd" =⇒ "abcd"

Marco Comini Informatica Multimediale 2021-10-07 16 / 21

JavaScript: Comandi: esempio dichiarazioni e assegnamenti

Esempio artificiale.
1 var s = " ab " ;
2 s += " cd " ;
3 −→s += 1;
4 var x = 1;
5 x += s +3;
6 x += 2 > s ;

s "abcd" "abcd1"
x

eval "abcd" + 1 =⇒ "abcd1"

Marco Comini Informatica Multimediale 2021-10-07 16 / 21

JavaScript: Comandi: esempio dichiarazioni e assegnamenti

Esempio artificiale.
1 var s = " ab " ;
2 s += " cd " ;
3 s += 1;
4 −→var x = 1;
5 x += s +3;
6 x += 2 > s ;
s "abcd1"
x 1

Marco Comini Informatica Multimediale 2021-10-07 16 / 21

JavaScript: Comandi: esempio dichiarazioni e assegnamenti

Esempio artificiale.
1 var s = " ab " ;
2 s += " cd " ;
3 s += 1;
4 var x = 1;
5 −→x += s +3;
6 x += 2 > s ;
s "abcd1"
x 1 "1abcd13"

eval 1 + ("abcd1" + 3) =⇒ 1 + "abcd13" =⇒ "1abcd13"

Marco Comini Informatica Multimediale 2021-10-07 16 / 21

JavaScript: Comandi: esempio dichiarazioni e assegnamenti

Esempio artificiale.
1 var s = " ab " ;
2 s += " cd " ;
3 s += 1;
4 var x = 1;
5 x += s +3;
6 −→x += 2 > s ;
s "abcd1"
x "1abcd13" "1abcd13false"

eval "1abcd13" + (2 > "abcd1") =⇒ "1abcd13" + ("2" > "abcd1") =⇒

"1abcd13" + false =⇒ "1abcd13false"

Marco Comini Informatica Multimediale 2021-10-07 16 / 21

JavaScript: Comandi: condizionali semplici

La sintassi dei comandi condizionali semplici è

if ( expr ) stmt
if ( expr ) stmt else stmt
Per quanto detto prima stmt può essere un blocco.
L’ else viene associato all’ if più vicino.

Marco Comini Informatica Multimediale 2021-10-07 17 / 21

JavaScript: Comandi: esempio

Esempio
programma che chiede due numeri e stampa il loro massimo

versione 1

1 var n1 = Number ( prompt ( " Dammi un numero " ," " ));
2 var n2 = Number ( prompt ( " Dammi un altro numero " ," " ));
3

4 if ( n1 > n2 )
5 print ( " Massimo = " + n1 );
6 else
7 print ( " Massimo = " + n2 );

Si può evitare la ripetizione?

Marco Comini Informatica Multimediale 2021-10-07 18 / 21

JavaScript: Comandi: esempio

Esempio
programma che chiede due numeri e stampa il loro massimo

versione 2

1 var n1 = Number ( prompt ( " Dammi un numero " ," " ));
2 var n2 = Number ( prompt ( " Dammi un altro numero " ," " ));
3

4 print ( " Massimo = " + ( n1 > n2 ? n1 : n2 ) );

Si può calcolare diversamente il massimo?

Marco Comini Informatica Multimediale 2021-10-07 18 / 21

JavaScript: Comandi: esempio

Esempio
programma che chiede due numeri e stampa il loro massimo

versione 3

1 var n1 = Number ( prompt ( " Dammi un numero " ," " ));
2 var n2 = Number ( prompt ( " Dammi un altro numero " ," " ));
3

4 print ( " Massimo = " + Math . max ( n1 , n2 ) );

Si può compattare?

Marco Comini Informatica Multimediale 2021-10-07 18 / 21

JavaScript: Comandi: esempio

Esempio
programma che chiede due numeri e stampa il loro massimo

versione 4

1 print ( " Massimo = " + Math . max (

2 Number ( prompt ( " Dammi un numero " ," " )) ,
3 Number ( prompt ( " Dammi un altro numero " ," " )) ) );

Marco Comini Informatica Multimediale 2021-10-07 18 / 21

 JavaScript: Comandi: dichiarazioni e inizializzazioni
Vediamo quando le dichiarazioni di variabili sono effettivamente visibili e quando
viene eseguita l’inizializzazione con un esempio artificiale
1 print ( " 1 pippo = " + ( pippo +3));
2 print ( " 1 pippo = " + pippo +3);
3

4 var pippo = 7 , topolino = 3.5;

5

6 pippo += 5;
7

8 print ( " 3 pippo = " + pippo );

9 print ( " 3 pluto = " + pluto );
10 print ( " 3 pluto2 = " + pluto2 );
11

12 var pluto = 2 , pluto2 = 9;

13

14 print ( " 4 pluto = " + pluto );

15 print ( " 4 pluto2 = " + pluto2 );
16 print ( " 4 pippo = " + pippo );
Marco Comini Informatica Multimediale 2021-10-07 19 / 21
JavaScript: Comandi: switch

Abbiamo una variante del costrutto case

1 switch ( expr ) {
2 case v 1 : stmts 1
.
.
3 .
4 case v n : stmts n
5 default : stmts n+1
6 }
dove il caso default può essere omesso.
Gli stmts i sono sequenze di comandi, incluso anche il comando break
Semantica: si valuta l’r-value di expr e
se non coincide con nessun v i si esegue stmt n+1 , se il caso default è
presente, oppure non si fa nulla.
altrimenti, se v i è il primo caso che coincide con l’r-value si esegue la
sequenza stmts i . . . stmts n+1 interrompendosi alla prima occorrenza di un
eventuale comando break

Marco Comini Informatica Multimediale 2021-10-07 20 / 21

JavaScript: Comandi: simulare il costrutto case

Possiamo simulare un costrutto case

1 case expr {
2 v 1 : stmts 1
.
.
3 .
4 v n : stmts n
5 default : stmts n+1
6 }
con
1 switch ( expr ) {
2 case v 1 : stmts 1 break ;
.
.
3 .
4 case v n : stmts n break ;
5 default : stmts n+1
6 }

Marco Comini Informatica Multimediale 2021-10-07 21 / 21