Your SlideShare is downloading. ×
Mirko Ravaioli mirko.ravaioli@unibo.it 346.6635057
JavaScript
Si… può… fareee!!!
2Modena 18 Novembre 2010
Obiettivo di questo breve ma intenso talk:
Spunti per un utilizzo non comune delle potenzialità d...
3Modena 18 Novembre 2010
 JavaScript è un linguaggio di scripting sviluppato per dare
interattività alle pagine HTML
 Pu...
4Modena 18 Novembre 2010
5Modena 18 Novembre 2010
JavaScript e Java
 Al di la del nome Java è JavaScript sono due cose
completamente diverse
 L’u...
6Modena 18 Novembre 2010
Tipi primitivi: numeri e booleani
 Javascript prevede pochi tipi primitivi: numeri, booleani e
s...
7Modena 18 Novembre 2010
Oggetti
 Ogni cosa in JavaScript è o un valore primitivo o un oggetto.
 Gli oggetti sono entità...
8Modena 18 Novembre 2010
Oggetti
 Le proprietà non sono definite a priori: possono essere aggiunte
dinamicamente
 Vengon...
9Modena 18 Novembre 2010
10Modena 18 Novembre 2010
Stringhe? Oggetti o cosa?
 Potremmo dire che mentre in Java sono oggetti che sembrano
dati di t...
11Modena 18 Novembre 2010
Tipi valore e tipi riferimento
 Si può tentare di interpretare il sistema dei tipi di JavaScrip...
12Modena 18 Novembre 2010
Funzioni, costanti funzione, costrutture Function
 Ammettono parametri che sono privi di tipo
...
13Modena 18 Novembre 2010
Costruttori
 Un costruttore è una funzione che ha come scopo quello di
costruire un oggetto
 S...
14Modena 18 Novembre 2010
Costruttori
 Un costruttore è una funzione che ha come scopo quello di
costruire un oggetto
 S...
15Modena 18 Novembre 2010
Costanti oggetto
 Le costanti oggetto (object literal) sono racchiuse fra parentesi
graffe e co...
16Modena 18 Novembre 2010
Programmazione ad Oggetti
La programmazione orientata agli oggetti (OOP, Object Oriented
Program...
17Modena 18 Novembre 2010
function prova()
{
this.prop1 = 12;
this.prop2 = ‘valore’;
this.azione = function() {
}
}
18Modena 18 Novembre 2010
var Prova = {
prop1: 10,
prop2: ‘valore’,
metodo1: function() {
},
metodo2: function() {
}
}
19Modena 18 Novembre 2010
var Prova = function() {
var _prop1 = 1;
var _prop2 = 2;
function _metodoPrivato1() {
}
function...
20Modena 18 Novembre 2010
var Prova = Class.create({
prop1 : 10,
prop2 : 'valore',
metoto1 : function() {
},
metoto2 : fun...
21Modena 18 Novembre 2010
Cerchio TriangoloRettangolo Trapezio
.perimetro()
.area()
obj.perimetro()
obj.area()
Upcoming SlideShare
Loading in...5
×

Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)

1,252

Published on

Un'analisi di javascript dalle origini all'utilizzo del linguaggio in modalità object oriented.

http://fromthefront.it

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,252
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)"

  1. 1. Mirko Ravaioli mirko.ravaioli@unibo.it 346.6635057 JavaScript Si… può… fareee!!!
  2. 2. 2Modena 18 Novembre 2010 Obiettivo di questo breve ma intenso talk: Spunti per un utilizzo non comune delle potenzialità del linguaggio JavaSript NON parleremo di sintassi stretta del linguaggio NON parleremo dei vari framework nati negli ultimi anni basati sul linguaggio JavaScript (prototype, jquery, extjs…) Metteremo il focus sull’ingegnerizzazione del codice
  3. 3. 3Modena 18 Novembre 2010  JavaScript è un linguaggio di scripting sviluppato per dare interattività alle pagine HTML  Può essere inserito direttamente nelle pagine Web ed è in pratica lo standard client-side  Il suo nome ufficiale è ECMAScript  E’ diventato standard ECMA (ECMA-262) nel 1997  E’ anche uno standard ISO (ISO/IEC 16262)  Sviluppato inizialmente da Netscape da Brendan Eich (il nome originale era Mocha poi LiveScript) e introdotto in Netscape 2 nel 1995  In seguito anche Microsoft ha lavorato sul linguaggio producendo una sua variante chiamata JScript  L'ultimo standard, del dicembre 1999, è ECMA-262 Edition 3, e corrisponde a JavaScript 1.5  L’ultima versione 27 Luglio 2010, è 1.8.5 (supportato da Mozilla Firefox 4 e Explorer 9) Cos’è JavaScript?
  4. 4. 4Modena 18 Novembre 2010
  5. 5. 5Modena 18 Novembre 2010 JavaScript e Java  Al di la del nome Java è JavaScript sono due cose completamente diverse  L’unica similitudine è legata al fatto di aver entrambi adottato la sintassi del C  Esistono profonde differenze  JavaScript è interpretato e non compilato  JavaScript è object-based ma non class-based  Esiste il concetto di oggetto  Non esiste il concetto di classe  JavaScript è debolmente tipizzato (weakly typed):  Non è necessario definire il tipo di una variabile  Attenzione però: questo non vuol dire che i dati non abbiano un tipo (sono le variabili a non averlo in modo statico)  JavaScript è debolmente orientato ad oggetti
  6. 6. 6Modena 18 Novembre 2010 Tipi primitivi: numeri e booleani  Javascript prevede pochi tipi primitivi: numeri, booleani e stringhe (forse! ☺)  Numeri (number):  Sono rappresentati in formato floating point a 8 byte (64bit, formato IEEE)  Non c’è distinzione fra interi e reali  Esiste il valore speciali NaN (not a number) per le operazioni non ammesse  Esiste il valore infinite (ad esempio per la divisione per zero)  Booleani (boolean): ammettono i valori true e false  Non esistono né tipi interi né il tipo carattere
  7. 7. 7Modena 18 Novembre 2010 Oggetti  Ogni cosa in JavaScript è o un valore primitivo o un oggetto.  Gli oggetti sono entità dotate di unicità (sono uguali solo a sé stessi) e che associano nomi di proprietà a valori  Definendo un costruttore, è possibile definire oggetti.  JavaScript è un linguaggio orientato a oggetti basato su prototipi.  Ciò significa che l'eredità è fra oggetti, non fra classi (JavaScript non ha classi).  Gli oggetti ereditano le proprietà dai loro prototipi.
  8. 8. 8Modena 18 Novembre 2010 Oggetti  Le proprietà non sono definite a priori: possono essere aggiunte dinamicamente  Vengono creati usando l’operatore new var o = new Object() Attenzione: Object() è un costruttore e non una classe  Un oggetto appena creato è completamente vuoto: non ha né proprietà né metodi  Gli oggetti in realtà sono array associativi: strutture composite con i cui elementi sono accessibili mediante un indice di tipo stringa (nome) anziché attraverso un indice numerico
  9. 9. 9Modena 18 Novembre 2010
  10. 10. 10Modena 18 Novembre 2010 Stringhe? Oggetti o cosa?  Potremmo dire che mentre in Java sono oggetti che sembrano dati di tipo primitivo in JavaScript sono dati di tipo primitivo che sembrano oggetti  Sono sequenze arbitrarie di caratteri in formato UNICODE a 16 bit e sono immutabili come in Java  Esiste la possibilità di definire costanti stringa delimitate da apici singoli ('ciao') o doppi ("ciao").  E’ possibile la concatenazione con l’operatore +  E’ possibile la comparazione con gli operatori < > >= <= e !=  Possiamo invocare metodi su una stringa o accedere ai suoi attributi  Non sono però oggetti e la possibilità di trattarli come tali nasce da due caratteristiche:  Esiste un tipo wrapper String che è un oggetto  JavaScript fa il boxing in automatico come C#
  11. 11. 11Modena 18 Novembre 2010 Tipi valore e tipi riferimento  Si può tentare di interpretare il sistema dei tipi di JavaScript usando una logica simile a quella di C#  Si può quindi distinguere fra tipi valore e tipi riferimento  Numeri e booleani sono tipi valore  Array e Oggetti sono tipi riferimento  Per le stringhe abbiamo ancora una situazione incerta: Pur essendo un tipo primitivo sono un tipo riferimento  Le stringhe Javascript sono l’equivalente informatico dell’ornitorinco!
  12. 12. 12Modena 18 Novembre 2010 Funzioni, costanti funzione, costrutture Function  Ammettono parametri che sono privi di tipo  Restituisce un valore il cui tipo non viene definito  La mancanza di tipo è coerente con la scelta fatta per le variabili  Le funzioni possono essere definite utilizzando la parola chiave function  Esistono costanti funzione (function literal) che permettono di definire una funzione e poi di assegnarla ad una variabile con una sintassi decisamente inusuale: var sum = function(x,y) { return x+y; } Una funzione può essere anche creata usando un costruttore denominato Function (le funzioni sono quindi equivalenti in qualche modo agli oggetti) var sum = new Function("x","y","return x+y;");
  13. 13. 13Modena 18 Novembre 2010 Costruttori  Un costruttore è una funzione che ha come scopo quello di costruire un oggetto  Se viene invocato con new riceve l’oggetto appena creato e può aggiungere proprietà e metodi  L’oggetto da costruire è accessibile con la parola chiave this var obj = new Object(); obj.x = 12; obj.y = 3; obj.somma = function() {return this.x + this.y};
  14. 14. 14Modena 18 Novembre 2010 Costruttori  Un costruttore è una funzione che ha come scopo quello di costruire un oggetto  Se viene invocato con new riceve l’oggetto appena creato e può aggiungere proprietà e metodi  L’oggetto da costruire è accessibile con la parola chiave this function Rectangle(w, h) { this.w = w; this.h = h; this.area = function() { return this.w*this.h; } this.perimeter = function() { return 2*(this.w+this.h);} } var r = new Rectangle(5,4); alert(r.area());
  15. 15. 15Modena 18 Novembre 2010 Costanti oggetto  Le costanti oggetto (object literal) sono racchiuse fra parentesi graffe e contengono un’elenco di attributi nella forma nome: valore var nomeoggetto = {prop1: val1; prop2: val2...}  Usando le costanti oggetto creiamo un oggetto e le proprietà (valorizzate) nello stesso momento var obj = new Object(); obj.x = 12; obj.y = 3; Obj.tot = 15; var obj = { x : 12, y : 3, tot : 15 }
  16. 16. 16Modena 18 Novembre 2010 Programmazione ad Oggetti La programmazione orientata agli oggetti (OOP, Object Oriented Programming) è un paradigma di programmazione, che prevede la definizione di oggetti software che interagiscono gli uni con gli altri attraverso lo scambio di messaggi. In genere, un linguaggio di programmazione è definito a oggetti quando permetta di implementare i tre meccanismi seguenti:  Incapsulamento  Ereditarietà  Polimorfismo
  17. 17. 17Modena 18 Novembre 2010 function prova() { this.prop1 = 12; this.prop2 = ‘valore’; this.azione = function() { } }
  18. 18. 18Modena 18 Novembre 2010 var Prova = { prop1: 10, prop2: ‘valore’, metodo1: function() { }, metodo2: function() { } }
  19. 19. 19Modena 18 Novembre 2010 var Prova = function() { var _prop1 = 1; var _prop2 = 2; function _metodoPrivato1() { } function _metodoPrivato2() { } return { metodo1: function() { _metodoPrivato1(); }, metodo2: function() { _metodoPrivato2(); } } }
  20. 20. 20Modena 18 Novembre 2010 var Prova = Class.create({ prop1 : 10, prop2 : 'valore', metoto1 : function() { }, metoto2 : function() { } });
  21. 21. 21Modena 18 Novembre 2010 Cerchio TriangoloRettangolo Trapezio .perimetro() .area() obj.perimetro() obj.area()

×