Use the left/right arrow keys to navigate, 's' to enable/disable scrolling.

Javascript

Obiettivi della lezione

Conoscere

  • conoscere le peculiarità di Javascript
  • conoscere le origini e le influenze di Javascript
  • conoscere i paradigmi di programmazione supportati e le regole di sintassi base
  • conoscere la differenze tra Javascript ed ECMAScript
  • conoscere i problemi e le potenzialità di Javascript
  • conoscere le diverse implementazioni

Sapere

  • saper scrivere un semplice programma in Javascript
  • saper utilizzare l’interprete interattivo
  • saper utilizzare i tipi di dato fondamentali
  • saper utilizzare le strutture di controllo
  • saper utilizzare le closure e le funzioni anonime

Javascript: l’altra dimensione del web

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?

Effetti speciali per tutti!

Gli effetti speciali, le animazioni e il gioco che avete ammirato nella slide precedente

  • utilizzano esclusivamente una combinazione di HTML, CSS, SVG e Javascript
  • rispettano i principi dell’open web
  • possono essere visualizzati da qualunque browser conforme agli standard
  • non necessitano la presenza Flash

Java? No, Javascript!

Javascript è

  • Un linguaggio di programmazione

    • di alto livello
    • interpretato
    • debolmente tipizzato
    • dinamico
    • orientato agli oggetti

Javascript non è:

  • Java

Linguaggi di “alto livello”

Sono linguaggi la cui costruzione sintattica è molto più vicina a quella del linguaggio umano piuttosto che a quella della macchina.

Linguaggi interpretati e linguaggi compilati

  • Un programma scritto in un linguaggio interpretato viene eseguito linea per linea.
  • Un programma scritto in un linguaggio compilato prima subisce un’elaborazione preliminare poi viene eseguito.
  • Un programma che interpreta un linguaggio si dice interprete di quel linguaggio.
  • Un programma che compila un linguaggio si dice compilatore di quel linguaggio.
  • C, C++, Java sono linguaggi compilati
  • Ruby, Python, Javascript sono linguaggi interpretati

Linguaggi debolmente tipizzati

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.

Linguaggi dinamici

  • 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.

Linguaggi orientati agli oggetti

  • 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.

Javascript e HTML/CSS: che c’azzecca?

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.

Le Origini

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…

Le influenze… (1/2)

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

Le influenze… (2/2)

The diktat from upper engineering management was that the language must "look like Java". That ruled out Perl, Python, and Tcl, along with Scheme.

From Brendan Eich's Roadmap Updates: Popularity

…e le Fonti di Ispirazione (1/2)

I'm not proud, but I'm happy that I chose Scheme-ish first-class functions and Self-ish (albeit singular) prototypes as the main ingredients. The Java influences, especially y2k Date bugs but also the primitive vs. object distinction (e.g., string vs. String), were unfortunate.

From Brendan Eich's Roadmap Updates: Popularity

…e le Fonti di Ispirazione (2/2)

E’ fu così che il progetto inizialmente chiamato Mocha e successivamente chiamato Livescript raggiunse l’inclusione nella versione 2.0 del browser di Netscape:

  • con il nome di Javascript
  • con una sintassi C-like a mascherare un dialetto scheme con estensioni per OOP derivate da Self
  • con una serie di piccoli ma subdoli problemi di coerenza dovuti all’estrema rapidità del passaggio dal prototipo all’ingresso sul mercato (meno di 1 anno!!!)

ECMAScript: la standardizzazione (1/2)

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.

ECMAScript: la standardizzazione (2/2)

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:

  • ECMA-290: Components (INUTILIZZATO)
  • ECMA-327: Compact Profile, riduzione dello standard allo scopo di adattarlo a contesti con risorse carenti
  • ECMA-357: E4X (ECMAScript for XML), aggiunge l’xml come first-class-object

ECMAScript: le varianti e le implementazioni (1/4)

Da ECMAScript (oltre a Javascript e JScript) derivano altri linguaggi di scripting, oltre a essere presenti diverse varianti dello stesso dialetto:

  • Javascript (es. SpiderMonkey, Rhino, V8, JavascriptCore/Nitro)
  • ActionScript (es. Adobe Flash)
  • Laszlo ECMAScript (es. OpenLaszlo)
  • HaXe ECMAScript (es. HaXe)

ECMAScript: le varianti e le implementazioni (2/4)

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)…

ECMAScript: le varianti e le implementazioni (3/4)

… 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.

ECMAScript: le varianti e le implementazioni (4/4)

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.

General syntax rules

  • C-like syntax rules
  • commenti in stile C
  • ogni istruzione termina con un punto e virgola ( ”;” )
  • i blocchi di codice sono racchiusi dalle parentesi graffe ( ”{}” )

Javascript Basics

L’interprete interattivo (1/3)

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_shells

L’interprete interattivo (2/3)

  • Javascript Shell
  • Bookmarklet
  • Spidermonkey JS
  • XULRunner xpcshell
  • MozREPL
  • Firebug
  • Venkman
  • Rhino

L’interprete interattivo - JS (3/3)

Il laboratorio integrato accessibile dalle slide di questo corso è dotato di un semplice interprete interattivo (basato su FirebugLite):

Ora provalo nell'interprete interattivo

Variabili

In Javascript le variabili possono essere dichiarate esplicitamente (mediante la parola chiave var ) o essere utilizzate senza nessuna dichiarazione esplicita:

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 interattivo

Tipi di dati

  • Number
  • String
  • Object / HashTable
  • Array
  • Boolean

Tipi di dati - Number (1/2)

Javascript 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):

Ora provalo nell'interprete interattivo

Tipi di dati - Number (2/2)

Infinity rappresenta tutti i numeri più grandi di 1.79769313486231570e+308

Ora provalo nell'interprete interattivo

Math, parseInt e isNaN

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 interattivo

Tipi di dati - String

In Javascript le stringhe sono sequenze di caratteri (Unicode a 16-bit)

Ora provalo nell'interprete interattivo

Tipi di dati - Object/HashTable (1/2)

In Javascript gli oggetti e i dizionari (HashTable) sono sinonimi e costituiscono uno dei concetti fondamentali del linguaggio:

Ora provalo nell'interprete interattivo

Tipi di dati - Object/HashTable (2/2)

Mentre la chiave (o nome) deve essere necessariamente una stringa, il valore puo’ essere un qualunque oggetto.

Ora provalo nell'interprete interattivo

Tipi di dati - Array

Un Array è uno speciale oggetto built-in:

Ora provalo nell'interprete interattivo

Tipi di dati - Boolean

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:

  • FALSE: false, 0, la string vuota (””), NaN, null, e undefined
  • TRUE: tutti gli altri valori

Operatori (1/4)

Javascript è dotato di tutti gli operatori dei linguaggi con sintassi C-like;

Operatori (2/4)

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:

Ora provalo nell'interprete interattivo

Operatori (3/4)

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:

NOTA : per questo motivo è sempre consigliabile usare gli operatori ”===” e ”!==” che non effettuano conversioni forzate e silenziose.

Ora provalo nell'interprete interattivo

Operatori (4/4)

typeof ed instanceof sono due particolari operatori il cui compito è rispettivamente identificare il tipo di un valore e verificare se è istanza di un determinato prototipo:

Ora provalo nell'interprete interattivo

Strutture di Controllo

  • if, switch
  • while, do…while
  • for, for…in
  • try…catch

Strutture di Controllo - if

Le strutture di controllo di Javascript sono simili alle strutture di controllo classiche dei linguaggi C-like:

Ora provalo nell'interprete interattivo

Strutture di Controllo - switch

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 ===:

Strutture di Controllo - while / do…while

Javascript Basics: Strutture di Controllo - for

Ora provalo nell'interprete interattivo

Strutture di Controllo - for…in

for…in è una variante della struttura di controllo for utili per iterare su Array ed Object:

Ora provalo nell'interprete interattivo

Strutture di Controllo - try…catch (1/2)

Javascript è dotato di un sistema di gestione delle eccezioni con una sintassi del tutto simile agli altri linguaggi C-like:

Javascript Basics: Strutture di Controllo - try…catch (2/2)

Funzioni

  • definire una funzione
  • scope delle variabili
  • functions as objects
  • anonymous functions
  • inner functions
  • closures

Funzioni - definire una funzione

Le funzioni sono sicuramente, insieme agli Object/Hashtables, uno dei costrutti fondamentali per Javascript.

Ora provalo nell'interprete interattivo

Funzioni - scope delle variabili (1/2)

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:

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 interattivo

Funzioni - scope delle variabili (2/2)

Ora provalo nell'interprete interattivo

Funzioni - anonymous functions, arguments e arguments.callee (1/2)

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):

Funzioni - anonymous functions, arguments e arguments.callee (2/2)

Funzioni - functions as objects (1/2)

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.

Funzioni - functions as objects (2/2)

Ora provalo nell'interprete interattivo

Funzioni - inner functions

In Javascript è consentito dichiarare una funzione all’interno di un’altra funzione:

NOTA: non ha importanza dove vengono dichiarate le inner function , è come se tutte le funzioni fossero valutate all’inizio della funzione.

Funzioni - closures (1/3)

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.

Funzioni - closures (2/3)

Ora provalo nell'interprete interattivo

Funzioni - closures (3/3)

Ora provalo nell'interprete interattivo

Javascript Bad Parts

Special values

Ci sono alcuni valori in Javascript che hanno comportamente particolarmente poco amichevoli:

Special Values

  • undefined
  • null
  • NaN
  • Infinity
  • true, false

Special Values

  • undefined e null hanno significati diversi
  • typeof null ritorna ‘object’
  • NaN non è un numero ma typeof lo riporta come number,
  • NaN, undefined e Infinity non sono parole registrate e possono erroneamente essere ridefinite :-( … cosa che è meglio evitare :-D

primitive vs. object

Se questo non bastasse… Javascript ha ereditato da Java la differenza fra primitiva e istanza del relativo oggetto:

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

Bibliografia

Javascript The Good Parts (O’Reilly)

Copyright (C) 2010 - Alca Società Cooperativa

http://learn.alcacoop.it - learn@alcacoop.it

released under CreativeCommons 2.5 by-nc-sa