Dalla A a Javascript

una serie a puntate sul "linguaggio di programmazione più incompreso di sempre"

- Douglas Crockford

Marco Patierno - @marcopatierno

Roberto Sasso - @imrobertosasso

Ti presento Javascript

Question time...

CHI E' BRENDAN EICH?

A CTO MOZZILA FAUNDATION

C HA UN FRANCHASING DI CAMICE

D IDEATORE DI JAVASCRIPT

B UN SERIAL KILLER

Un pò di storia

C'era una volta

Netscape Navigator 1.1

MochaScript/LiveScript

JScript

Un pò di storia

ECMA Script

Question time...

CHI E' DOUGLAS CROCKFORD?

A UN FAMOSO REGISTA

C HA IDEATO JSON

D IL CTO DI PAYPAL

B IL MANAGER DI CHUCK NORRIS

Il Grande Equivoco

Nome

LISP TRAVESTITO DA C

ERRORI DI PROGGETTAZIONE

PESSIME IMPLEMENTAZIONI

BRUTTI LIBRI

STANDARD AL DI SOTTO DEGLI STANDARD

DILETTANTI

JavaScript non è il fratellino scemo di Java

In effetti non centra (quasi) nulla con Java
( anzi somiglia più a LISP o Scheme )

Non è un mero linguaggio di Scripting

Ha un suo preciso formalismo, e andrebbe assecondato

Le caratteristiche fondamentali

È un linguaggio interpretato (non compilato)

È un linguaggio “Loosely Typed” ovvero scarsamente tipizzato o tipizzazione dinamica

È un linguaggio a scope lessicale
( scope a livello di definizione non a runtime )

È un linguaggio che supporta OOP, procedurale e funzionale

JavaScript

una visita guidata all’interno del linguaggio di
programmazione più stravagante di sempre

stravagante

[stra-va-gàn-te]

non com. --> estravagante

A agg. (pl. -ti)

1 Eccentrico, bizzarro: è un tipo s.; abitudini stravaganti

2 non com. Che è al di fuori delle regole, dei limiti abituali

Freedom??

Weak Typing

Il tipo della variabile dipende da come viene utilizzata

var foo = 'a-string:';
var number = 1;
var result = foo + number;

console.log(result);

Dynamic Typing 1/2

se cammina come un'anatra e starnazza come un'anatra, allora è un'anatra

var foo = 'a-string';
console.log(typeof(foo));

var foo = 1;
console.log(typeof(foo));

var foo = false;
console.log(typeof(foo));

Dynamic Typing 2/2

se cammina come un'anatra e starnazza come un'anatra, allora è un'anatra

var boolean = false;
obj = {}; //nuovo oggetto

obj.myMethod = function(param) {
  if(param) {
    obj = 3;
  }
  
  return obj;
};

console.log(obj.myMethod(false));
console.log('------------')
console.log(obj.myMethod(true));
console.log('------------')
console.log(obj.myMethod(false));

Paradigma procedurale

Una sequenza ordinata di istruzioni (organizzate per subroutine/funzioni)

atte a risolvere un problema

var nome = "foo",
    cognome = "bar",
    student = [nome, cognome],
    classroom = [];

classroom.push(student);
var studentUnderPopper = classroom.pop(); 

var x;
for(x in studentUnderPopper) {
  console.log(studentUnderPopper[x]);
}

O.O.P.

permette di definire oggetti software in grado di interagire gli uni con gli altri attraverso lo scambio di messaggi.

var student = {}; 

student.setName = function() {};
student.setSurname = function() {};

var classroom = {};
classroom.addStudent = function(student) {};

classroom.addStudent(student);

OOP Syntaxes – Object Literal Notation 1/3

var student = {
   name: “gianni“,
   accessories: [“watch“,“pencilcase“],
   dress: {
	pants: “jeans“,
 	topWear: “t-shirt“
   }
};

var student = {
    talk: function() { 
        //do something 
    },
    walk: function() {
        //do something other 
    },
    name: “gianni“,
    accessories: [“watch“,“pencilcase“],
    dress: {
	pants: “jeans“,
	topWear: “t-shirt“
    }
};

benefits: singleton nativo

svantaggi: non si può inizializzare una proprietà con il valore di un’altra proprietà; il costruttore non è accessibile;

OOP Syntaxes – Object Literal Notation 2/3

var student = {};

student.talk = function() {
    return "i'm talking"
};
student.walk = function() {
    return "i'm walking"
};
student.name = “gianni“;
student.accessories = [“watch“,“pencilcase“];
student.dress =  {};
student.dress.pants = “jeans“;
student.dress.topWear = “t-shirt“;

OOP Syntaxes – Object Literal Notation 3/3a

var student = {
    talk: function() {
	return "i'm talking";
    },
    walk: function() {
	return "i'm walking";
    },
    name: "gianni",
    accessories: ["watch","pencilcase"],    
    dress: {
	pants: "jeans",
	topWear: "t-shirt"
    }	
};

OLN syntax

OOP Syntaxes – Object Literal Notation 3/3b

var student = {};

student.talk = function() { 
    return "I'm talking";
};
student.walk = function() { 
    return "I'm walking";
};
student.name = "gianni";
student.accessories = ["watch","pencilcase"];
student.dress =  {};
student.dress.pants = "jeans";
student.dress.topWear = "t-shirt";

OLN syntax, duck-typed

OOP Syntaxes – Function Constructor

benefits: si possono creare più istanze

//constructor
function Student() {
};

var studentInstance = new Student();

In Javascript tutto è un oggetto, persino una function.

OOP – Function Constructor 1/2

//constructor
function Student() {
    //private
    var watch = “watch“;
    var pencilcase = “pencilcase“;

    //public
    this.accessories = [watch,pencilcase];
};

Una variabile è locale solo quando è specificata come var .
Quel che è this è di dominio pubblico.

OOP Syntaxes – Function Constructor 2/2

//constructor
function Student() {	
    //private
    var watch = 'watch';
    var pencilcase = 'pencilcase';

    function nonVisible() {
   	  return this.watch;
    }

    //public
    this.accessories = [watch,pencilcase];

    this.visibleFunction = nonVisible;
}

var studentInstance = new Student();

console.log(studentInstance.visibleFunction());

//constructor
function Student() {	
    //private
    var watch = 'watch';
    var pencilcase = 'pencilcase';

    function nonVisible() {
   	  return watch;
    }

    //public
    this.accessories = [watch,pencilcase];

    this.visibleFunction = nonVisible;
}

var studentInstance = new Student();

console.log(studentInstance.visibleFunction());

OOP – Anonymous Function Constructor

benefits: si possono creare più istanze

//constructor
var Student = function () {
};

var studentInstance = new Student();

OOP Syntaxes – Anonymous Function Constructor

benefit: si possono creare più istanze

//constructor
var Student = function () {
	this.x = 5;
};

Student.talk = function() {
	return this.x;
};

var studentInstance = new Student();

benefit: è necessario l’accesso al prototype

//constructor
var Student = function () {
	this.x = 5;
};

Student.prototype.talk = function() {
	return this.x;
};

var studentInstance = new Student();

OOP – Protochi ? Prototype 1/2

L’ereditarietà in JS non ha nulla a che fare con il «solito»:
Non esiste il concetto di ereditarietà classica.

Non esistono classi. Esistono solo oggetti.

Si basa sul clonaggio degli oggetti

L’oggetto di base clonato è sempre l’Object

Object contiene le proprietà di base constructor, prototype,
valueOf() e toString()

OOP – Protochi ? Prototype 2/2

var Student = function () {};

var studentInstance = new Student();

Quindi, cosa accade quando creo un nuovo oggetto?

1. Crea un nuovo oggetto

2. Setta la proprietà constructor con il contenuto della funzione Student

3. Associa Object.Prototype a Student.Prototype

4. Esegue la funzione anonima in Student

Questo & Quello

“In Javascript la keyword this è estremamente potente(*)”

(*)utilizzabile solo sotto prescrizione medica

- cit. anonimo

Definizione

In ogni contesto d’esecuzione l’utilizzo della keyword this fa riferimento
all’oggetto chiamante ed ha un cliclo di vita pari a quest’ultimo.

Questo & Quello

var student = {};
student.name = 'bob';
student.talk = function() { 
  return this.name; 
};

console.log(student.talk());

Questo & Quello

var studentFirst = {
    name: 'marco'
};

studentFirst.sayMyName = function() {
  return this.name;
};

console.log(studentFirst.sayMyName());

var studentSecond = {
    name: 'bob'
};
studentSecond.talk = studentFirst.talk;

console.log(studentFirst.sayMyName());

Questo & Quello

var studentFirst = {
  name: 'marco',
  hello: 'hello'    
};

studentFirst.sayMyName = function() {
  return this.name;
};

studentFirst.sayHello = function() {
  var f = function() {
    return this.hello;
  }
  return f(); 
};

console.log(studentFirst.sayMyName());
console.log(studentFirst.sayHello());

Questo & Quello

var studentFirst = {
  name: 'marco',
  hello: 'hello'    
};

studentFirst.sayMyName = function() {
  return this.name;
};

studentFirst.sayHello = function() {
  var that = this;
  var f = function() {
    return that.hello;
  }
  return f(); 
};

console.log(studentFirst.sayMyName());
console.log(studentFirst.sayHello());

Questo & Quello...

...e quell'altro, ve lo diciamo la prossima volta

Grazie

@marcopatierno

@imrobertosasso

https://github.com/patiernom

https://github.com/bobbino

Marco Patierno

Roberto Sasso