Javascript è un linguaggio di programmazione che porta il web in una nuova dimensione: la dimensione dell’interattività, della dinamicità e degli effetti speciali. Vale la pena conoscerlo, vero?
Gli effetti speciali, le animazioni e il gioco che avete ammirato nella slide precedente
Un linguaggio di programmazione
Sono linguaggi la cui costruzione sintattica è molto più vicina a quella del linguaggio umano piuttosto che a quella della macchina.
1 | alert("Indovinate cosa fa questo programma Javascript!"); |
Sono linguaggi che non costringono il programmatore ad assegnare preventivamente alle variabili un tipo specifico di dato. Il tipo di dato viene piuttosto dedotto dal valore a cui la variabile fa riferimento in uno specifico momento dell’esecuzione del programma. Javascript è un linguaggio debolmente tipizzato.
01 | // Qui si dichiara la variabile x |
02 | var x ; |
03 |
04 | // Qui x fa riferimento ad una stringa |
05 | x = "Hello!"; |
06 |
07 | // Qui x fa riferimento ad un numero intero |
08 | x = 10; |
09 |
10 | // Qui x fa riferimento ad un oggetto |
11 | x = { manufacturer: "Ferrari", model: "F355", color: "red" } |
Sono linguaggi che permettono di modificare lo stato di un programma durante l’esecuzione dello stesso (cioé a runtime).
Generalmente i linguaggi dinamici sono anche debolmente tipizzati.
Javascript è un linguaggio dinamico.
I programmi servono a risolvere problemi in modo efficiente e controllato.
I linguaggi orientati agli oggetti permettono di schematizzare il problema mediante una rappresentazione “ad oggetti” dello stesso.
Schematizzare un problema mediante oggetti può portare ad una risoluzione più intuitiva dello stesso.
Il punto precedente non è sempre vero.
Javascript è orientato agli oggetti.
Vi chiederete: cosa c’entra tutto questo con il web, gli effetti grafici e le animazioni?
Javascript permette di manipolare i contenuti e la visualizzazione della pagina in maniera programmatica. Senza l’intervento di un programma Javascript la struttura di una pagina web risulterebbe “congelata” nella sua scrittura iniziale. Un programma Javascript permette di “scongelare” la struttura di una pagina e di modificarla dinamicamente.
A metà degli anni ‘90, all’alba dell’esplosione del Web come IL servizio Internet per definizione, Brendan Eich entra in Netscape allo scopo di includere nel loro browser un interprete Scheme.
Al tempo in molti (tra cui Bill Joy di Sun) erano convinti e spingevano affinchè il Web avesse un linguaggio di scripting da includere in formato sorgente all’interno delle pagine HTML…
Purtroppo tutto questo interessamento finì per essere controproducente:
la visione del management (di Netscape e di Sun) era che Java (e le applet) sarebbe stato il linguaggio usato dai programmatori per scrivere i componenti mentre questo nuovo linguaggio di scripting sarebbe stato utilizzato dagli scripter per scrivere il codice collante
E’ fu così che il progetto inizialmente chiamato Mocha e successivamente chiamato Livescript raggiunse l’inclusione nella versione 2.0 del browser di Netscape:
Nel 1996 (lo stesso anno in cui Javascript è stato ufficialmente rilasciato con Netscape Navigator 2.0) Netscape sottopone Javascript alla ECMA International per la standardizzazione:
ECMAScript è il nome della standardizzazione del linguaggio contenuta nello standard ECMA-262 (arrivato alla terza revisione) a cui Javascript (Netscape), JScript (Microsoft) cercano di rimanere compatibili.
Oltre allo standard ECMA-262 (alla revisione 3 attualmente in uso) sono presenti altri 3 standard riguardanti Javascript oltre alla revision 4 dello standard ECMA-262:
Da ECMAScript (oltre a Javascript e JScript) derivano altri linguaggi di scripting, oltre a essere presenti diverse varianti dello stesso dialetto:
La quarta revisione dello standard ECMA-262 aveva in programma l’introduzione di una notevole quantità di caratteristiche nel linguaggio (tra cui classi e lo static typing)…
… Ma attualmente l’ultima versione dello standard (rilasciata nel Dicembre 2009 con il nome di Harmony) contiene solo alcune lievi modifiche (che costituiscono ora ECMAScript 5) allo scopo di stabilizzare alcune caratteristiche già implementate in diverse varianti, senza stravolgerne la sua natura corrente.
Come è possibile immaginare il cammino dello standard (ECMAScript) è sempre più lento di quello delle implementazioni dovendo mantenere la compatibilità con il passato e tra le varie versioni.
Ogni implementazione (soprattutto quando utilizzata in ambiti diversi delle pagine Web) ha introdotto (e continua ad introdurre) correttivi o nuove caratteristiche al proprio dialetto.
Tutti i linguaggi dinamici sono in genere dotati di un interprete interattivo con cui interagire con la Virtual Machine in maniere interattiva.
Javascript non fa ovviamente eccezione anzi sono molti i modi in cui è possibile ottenere una shell Javascript con cui interagire:
https://developer.mozilla.org/en/JavaScript_shellsIl laboratorio integrato accessibile dalle slide di questo corso è dotato di un semplice interprete interattivo (basato su FirebugLite):
1 | console.log("Hello, world!"); |
In Javascript le variabili possono essere dichiarate esplicitamente (mediante la parola chiave var ) o essere utilizzate senza nessuna dichiarazione esplicita:
1 | var b = "a string"; // CORRETTO |
2 | var c; |
3 |
4 | a = 5; // funziona... ma è SCONSIGLIATO |
5 |
6 | console.log("a: "+a) |
7 | console.log("b: "+b) |
8 | console.log("c: "+c) |
NOTA : E’ assolutamente consigliabile dichiarare sempre esplicitamente le variabili, in quanto quelle utilizzate senza dichiarazione esplicita finiscono nello spazio (“scope”) globale
Ora provalo nell'interprete interattivoJavascript ha un solo tipo di numero.
Non distingue quindi tra numeri interi e float ma è dotato di un unico type rappresento internamente come un floating point a 64 bit (identico ad un double Java):
1 | console.log(1 === 1.0); |
2 | console.log(1 === 1.0e0); |
3 |
4 | // ATTENZIONE A QUESTO PERO': |
5 | console.log(0.1 + 0.2); |
01 | 1 |
02 | 1.0 |
03 | 1.0e3 // 1000 |
04 | 1.0e-3 // 0.001 |
05 | 1 == 1.0 // true |
06 | 0.1 + 0.2 // 0.30000000000000004 |
07 | 0.2 + 0.09 // 0.29000000000000004 |
08 | 1 / 0 // Infinity |
09 | 1 / -0 // -Infinity |
10 | 1 / Infinity // 0 |
11 |
12 | (9.3).toFixed(0) // 9 |
13 | (9.6).toFixed(0) // 10 |
14 | (10).toString() // "10" |
Infinity rappresenta tutti i numeri più grandi di 1.79769313486231570e+308
Ora provalo nell'interprete interattivo01 | Math.PI // 3.141592653589793 |
02 | Math.sin(Math.PI/2) // 1 |
03 | Math.floor(2.0+4.5) // 6 |
04 | Math.ceil(2.0+4.5) // 7 |
05 |
06 | parseInt("10.0000") // 10 |
07 | parseInt("10.0JJJJ") // 10 |
08 | parseInt("AAAAAA 10") // NaN |
09 |
10 | 10 * "a" // NaN |
11 |
12 | isNaN(10) // false |
13 | isNaN(NaN) // true |
14 | isNaN(Infinity) // false |
15 |
16 | NaN == NaN // false |
Math è un built-in object che raccoglie costanti e funzioni matematiche utili, mentre parseInt e isNaN sono funzioni built-in nello “scope” globale.
Ora provalo nell'interprete interattivoIn Javascript le stringhe sono sequenze di caratteri (Unicode a 16-bit)
1 | "Hello, World!!!" |
2 | 'Hello, World!!!' |
3 |
4 | "Javascript".length // 10 |
5 | "Javascript".replace("script","") // "Java" |
6 | "js".toUpperCase() // "JS" |
In Javascript gli oggetti e i dizionari (HashTable) sono sinonimi e costituiscono uno dei concetti fondamentali del linguaggio:
01 | var flight = { |
02 | airline: "Oceanic", |
03 | number: 815, |
04 | departure: { |
05 | time: "2004-09-22 14:55", |
06 | city: "Sydney" |
07 | }, |
08 | arrival: { |
09 | time: "2004-09-23 10:42", |
10 | city: "Los Angeles" |
11 | } |
12 | }; |
13 |
14 | flight.status //undefined |
15 | flight.departure.city //Sydney |
16 | flight["departure"]["time"] //2004-09-22 14:55 |
1 | var flight = {}; |
2 |
3 | flight["status"] = "landed"; |
4 | flight.number = 815; |
Mentre la chiave (o nome) deve essere necessariamente una stringa, il valore puo’ essere un qualunque oggetto.
Ora provalo nell'interprete interattivoUn Array è uno speciale oggetto built-in:
01 | var values = [ 10, 20, 30, 40 ]; |
02 |
03 | values.length // 4 |
04 | values[0] // 10 |
05 | values[10] // undefined |
06 |
07 | values[50] = 5 |
08 | values.length // 51 |
09 |
10 | values.join(" - ") // "10 - 20 - 30 - 40" |
11 | values.slice(0,3) // [10,20,30] |
12 | values.push(50) // 5 |
13 | values.pop() // 50 |
Javascript è dotato di un tipo boolean, con valori (che costituiscono parole chiave) true and false. Tutti i valori possono essere convertiti in boolean secondo le seguenti regole:
01 | false |
02 | "" // false |
03 | 0 // false |
04 | NaN // false |
05 | null // false |
06 | undefined // false |
07 |
08 | true |
09 | "TEST" // true |
10 | 55 // true |
11 | {} // true |
12 | Infinity // true |
Javascript è dotato di tutti gli operatori dei linguaggi con sintassi C-like;
1 | + - * / % // basic arithmentic operations |
2 | = // assignment |
3 | += -= ++ -- // increment / decrement operatos |
4 | < > <= >= == != === !== // comparisons operators |
5 | && || // boolean operators |
6 | & | ^ ~ << >> >>> // bitwise operators |
Gli operatori incremento e decremento possono essere usati come operatori sia in prefix che in postfix
L’operatore ”+” viene utilizzato sia per la somma tra numeri che per la concatenazione di stringhe, in caso gli operatori siano di tipo diverso viene operata una conversione forzata, cosa che richiede particolare attenzione:
1 | "p" + 1 + 1 // "p11" |
2 | 1 + 1 + "p" // "2p" |
Gli operatori di test di uguaglianza in Javascript richiedono ancora più attenzione in quanto le versioni standard ( ”==” / ”!=” ) operano una conversione forzata e silenziosa che potrebbe non dare i risultati che ci si aspetterebbe:
1 | '' == '0' // false |
2 | 0 == '' // true |
3 | 0 == '0' // true |
4 | false == 'false' // false |
5 | false == '0' // true |
6 | false == undefined // false |
7 | false == null // false |
8 | null == undefined // true |
9 | ' \t\r\n ' == 0 // true |
NOTA : per questo motivo è sempre consigliabile usare gli operatori ”===” e ”!==” che non effettuano conversioni forzate e silenziose.
Ora provalo nell'interprete interattivotypeof ed instanceof sono due particolari operatori il cui compito è rispettivamente identificare il tipo di un valore e verificare se è istanza di un determinato prototipo:
1 | typeof 10 // number |
2 | typeof "test string" // string |
3 | typeof true // boolean |
4 | typeof {} // object |
5 |
6 | var c = {}; |
7 |
8 | c instanceof Object // true |
Le strutture di controllo di Javascript sono simili alle strutture di controllo classiche dei linguaggi C-like:
01 | var score = 100, message; |
02 |
03 | if (score < 50) { |
04 | message = "too low!!!"; |
05 | } else if (score > 100) { |
06 | message = "you are god!!!"; |
07 | } else { |
08 | message = "good score!"; |
09 | } |
10 |
11 | myvar = score >= 20 ? 20 : score; |
12 |
13 | myvar = obj && obj.name; |
14 | myvar = name || "default value"; |
Lo switch (analogo a quello presente nei linguaggi C-like) confronta l’espressione contenuta nella switch con l’espressione contenuta nelle singole clausole case mendiante l’operatore ===:
01 | switch(action_type) { |
02 | case 'left_button': |
03 | open_in_new_tab(); |
04 | break; |
05 | case 'right_button': |
06 | open(); |
07 | break; |
08 | default: |
09 | alert("unknown action type: "+action_type); |
10 | } |
1 | while (action_type != 'quit') { |
2 | // do something |
3 | } |
4 |
5 | do { |
6 | // do something |
7 | } while (action_type != 'quit') |
1 | for (var i = 0; i < 5; i++) { |
2 | // do something |
3 | } |
for…in è una variante della struttura di controllo for utili per iterare su Array ed Object:
1 | for (var i in [1,2,3]) { print(i); } |
2 |
3 | var obj = { key1: "value1", key2: "value2" } |
4 |
5 | for (var i in obj) { print(i); } |
Javascript è dotato di un sistema di gestione delle eccezioni con una sintassi del tutto simile agli altri linguaggi C-like:
01 | // ReferenceError: unknown_function is not defined |
02 | try { |
03 | unknown_function(); |
04 | } |
05 | catch(error) { |
06 | print(error); |
07 | } |
08 |
09 | try { |
10 | throw new Error("My personal ERROR"); |
11 | } |
12 | catch(error) { |
13 | print(error); |
14 | } |
1 | try { |
2 | throw new Error("My personal ERROR"); |
3 | } |
4 | finally { |
5 | print("cleaning!"); |
6 | } |
Le funzioni sono sicuramente, insieme agli Object/Hashtables, uno dei costrutti fondamentali per Javascript.
01 | function sum(a,b) { |
02 | return a+b; |
03 | }; |
04 |
05 | var mult = function mult(a,b) { |
06 | return a*b; |
07 | }; |
08 |
09 | sum(2,3); // 5 |
10 | sum(2,3,4); // 5 <----- I parametri aggiuntivi sono ignorati |
11 | mult(2,10); // 10 |
In Javascript le variabili dichiarate con var non sono legate al block scope come negli altri linguaggi C-like, ma sono in realtà legate al function scope:
01 | function test_var_scope() { |
02 | var a = 5; |
03 |
04 | for (var i = 0; i < a; i++) { |
05 | var tmp = 200; |
06 | // do something |
07 | } |
08 |
09 | print(a); |
10 | print(i); |
11 | print(tmp); |
12 | } |
Per questo motivo è opportuno dichiarare tutte le variabili utilizzate in una funzione in testa, oltre a non dimenticarsi di dichiararle con var …
Ora provalo nell'interprete interattivo1 | function add(a,b) { |
2 | tot = a+b; |
3 | return tot; |
4 | } |
5 |
6 | test = add(5,6); |
7 |
8 | test // 11 |
9 | tot // 11 <---- tot è finita nel global scope!!! |
In Javascript il nome delle funzioni è opzionale, per cui le funzioni anonime si dichiarano in maniera analoga alle funzioni dotate di un nome.
Inoltre all’interno dello scope di una funzione è possibile accedere ad una variabile simile ad un array che ci da accesso ai parametri e ad un riferimento alla funzione corrente (utile in caso di funzioni anonime):
01 | add = function (a,b) { return a+b; }; |
02 |
03 | tot = function (a,b) { return a*b; }(5,3); |
04 |
05 | count_parameters = function () { return arguments.length; } |
06 |
07 | fact = function (n) { |
08 | if (n == 1) return 1; |
09 | return n*arguments.callee(n-1); |
10 | } |
11 |
12 | fact(3) |
13 | fact(4) |
Le funzioni in Javascript sono First class object (possono essere passate come parametri e ritornate come valori dalle funzioni) e sono dotate di proprietà e metodi come gli altri oggetti.
01 | var add = function add(a,b) { |
02 | return a+b; |
03 | }; |
04 |
05 | add.length; // 2 (il numero di parametri) |
06 | add.call(null,2,3); |
07 | add.apply(null,[2,3]); |
08 |
09 | add.toString(); |
10 |
11 | var obj = { |
12 | sum: function (a,b) { return a+b; }, |
13 | mult: function (a,b) { return a*b; } |
14 | }; |
15 |
16 | obj.sum(5,6); |
17 | obj["mult"](3,2); |
In Javascript è consentito dichiarare una funzione all’interno di un’altra funzione:
01 | function do_alot_of_stuff(param1, param2) { |
02 | var tot; |
03 |
04 | // do stuff... |
05 | |
06 | tot = sum(param1,param2); |
07 |
08 | // do other stuff... |
09 | |
10 | return tot; |
11 |
12 | function sum(a,b) { return a+b; }; |
13 | } |
NOTA: non ha importanza dove vengono dichiarate le inner function , è come se tutte le funzioni fossero valutate all’inizio della funzione.
Le closure sono una importantissima caratteristica delle funzioni in Javascript, sulla quale si poggiano sia i meccanismi di Event Handling usati solitamente nello scripting Web, che molte delle tecniche per completare la OOP di Javascript o ovviare ad alcuni dei suoi difetti di design.
Le closure in Javascript sono costituite dalle normali funzioni, le quali portano con se il lexical scope nelle quali sono state definite.
01 | function mult(n) { |
02 | return function(a) { |
03 | return a*n |
04 | }; |
05 | }; |
06 |
07 | double = mult(2); |
08 |
09 | double(5); // 10 |
10 | double(4); // 8 |
11 |
12 | half = mult(0.5); |
13 |
14 | half(5); // 2.5 |
15 | half(4); // 2 |
16 |
17 | mult(0.5)(4); // 2 |
01 | var test_obj = function() { |
02 | var private_var = 100; |
03 |
04 | return { |
05 | get_private_var: function() { return private_var; }, |
06 | step: function() { private_var++;} |
07 | } |
08 | }(); |
09 |
10 | test_obj.get_private_var(); |
11 | test_obj.step(); |
12 | test_obj.get_private_var(); |
Ci sono alcuni valori in Javascript che hanno comportamente particolarmente poco amichevoli:
Se questo non bastasse… Javascript ha ereditato da Java la differenza fra primitiva e istanza del relativo oggetto:
01 | typeof "test string" // 'string' |
02 | typeof new String("test string") // 'object' |
03 | "test" instanceof String // false |
04 | new String("test string") instanceof String // true |
05 |
06 | typeof true // 'boolean' |
07 | typeof new Boolean(true) // 'object' |
08 |
09 | typeof 10 // 'number' |
10 | typeof new Number(10) // 'object' |
NOTA : per questo motivo è sempre meglio utilizzare esclusivamente le primitive per i tipi dati primitivi (string, boolean, number e function)
Ora provalo nell'interprete interattivo