I 15 concetti e principi più importanti su JavaScript e sul mondo dello sviluppo lato client.

1. 15 Concetti importanti
su JavaScript

2. 1.
LEXICAL ENVIRONMENT
in collaborazione con15 concetti importanti
su JavaScript
2

3. in collaborazione con15 concetti importanti
su JavaScript
Il luogo o porzione del
programma dove scriviamo il
nostro codice è importante!
3
var a = 1;
function greet(){
var a = “Hello World!”;
}

4. 2.
EXECUTION CONTEXT
in collaborazione con15 concetti importanti
su JavaScript
4

5. Esistono molti lexical environment. Quello attualmente in esecuzione
viene gestito dal contesto di esecuzione. Al suo interno, trovano
posto molte altre cose non scritte da noi nel codice.
in collaborazione con15 concetti importanti
su JavaScript
5

6. 3.
NAME/VALUE PAIR
in collaborazione con15 concetti importanti
su JavaScript
6

7. Un nome associato ad un unico
valore. Il valore può essere usato
più volte, ma può avere un solo
nome in ogni contesto. Il valore
può essere, a suo volta, un’altra
coppia nome/valore.
in collaborazione con15 concetti importanti
su JavaScript
7
address = ‘Viale Ungheria, 22 Udine’

8. 4.
OBJECT
in collaborazione con15 concetti importanti
su JavaScript
8

9. Una collezione di coppie
nome/valore.
in collaborazione con15 concetti importanti
su JavaScript
9
address = {
street: {
type: ’Viale’,
name: ’Ungheria’,
},
number: 22,
city: ‘Udine’,
province: ‘Udine’,
state: ‘Italia’,
name: ‘IRES’
}

10. 5.
GLOBAL ENVIRONMENT
in collaborazione con15 concetti importanti
su JavaScript
10

11. in collaborazione con15 concetti importanti
su JavaScript
11
Contesto di esecuzione globale
Global
Object
this
Codice

12. 6.
FUNCTION ENVIRONMENT
in collaborazione con15 concetti importanti
su JavaScript
12

13. in collaborazione con15 concetti importanti
su JavaScript
13
Contesto di esecuzione
Function
Object
this
Link
all’ambiente
esterno
Codice

14. 7.
HOISTING
in collaborazione con15 concetti importanti
su JavaScript
14

15. in collaborazione con15 concetti importanti
su JavaScript
15
Contesto di esecuzione - fase di creazione
Global
Object
this
Link
all’ambiente
esterno
Imposta lo spazio in memoria per variabili e funzioni

16. in collaborazione con15 concetti importanti
su JavaScript
16
Contesto di esecuzione - fase di esecuzione
Global
Object
this
Link
all’ambiente
esterno
Il codice viene eseguito

17. 8.
THREADING & EXECUTION
in collaborazione con15 concetti importanti
su JavaScript
17

18. in collaborazione con15 concetti importanti
su JavaScript
JavaScript è un linguaggio single threaded, eseguito in modo sincrono.
Un comando alla volta, in ordine, riga per riga!
18

19. 9.
CHIAMATA A FUNZIONE &
STACK DI ESECUZIONE
in collaborazione con15 concetti importanti
su JavaScript
19

20. in collaborazione con15 concetti importanti
su JavaScript
20
function b(){
}
function a(){
b();
}
a();
Global Execution Context
a() Execution Context
b() Execution Context

21. in collaborazione con15 concetti importanti
su JavaScript
21
function b(){
var num;
}
function a(){
var num = 2;
b();
}
var num = 1;
a();
console.log(num);
Global Execution Context
a() Execution Context
b() Execution Context
num
1
num
2
num
undefined

22. 10.
SCOPE CHAIN
in collaborazione con15 concetti importanti
su JavaScript
22

23. in collaborazione con15 concetti importanti
su JavaScript
23
?
function b(){
console.log(num);
}
function a(){
var num = 2;
b();
}
var num = 1;
a();

24. in collaborazione con15 concetti importanti
su JavaScript
24
function b(){
console.log(num);
}
function a(){
var num = 2;
b();
}
var num = 1;
a();
Global Execution Context
a() Execution Context
b() Execution Context
num
1
num
2

25. in collaborazione con15 concetti importanti
su JavaScript
25
var a = 1;
var b = 2;
if(a > b){
var c = 3;
}
console.log(c);
// undefined
var a = 1;
var b = 2;
if(a > b){
let c = 3;
}
console.log(c);
// ReferenceError
ES6

26. 11.
FIRST CLASS FUNCTIONS
in collaborazione con15 concetti importanti
su JavaScript
26

27. In JavaScript, una funzione può essere assegnata ad una variabile,
passata come argomento ad un’altra funzione
oppure creata on-the-fly.
Le funzioni, in JavaScript, sono oggetti.
in collaborazione con15 concetti importanti
su JavaScript
27

28. in collaborazione con15 concetti importanti
su JavaScript
Le funzioni possono essere sia dichiarate (function statement) che
sotto forma di espressione (function expression).
28
//statement
function b(){ }
//expression
var a = function(){ }
//statement
b();
//expression
a();

29. 12.
BY VALUE &
BY REFERENCE
in collaborazione con15 concetti importanti
su JavaScript
29

30. in collaborazione con15 concetti importanti
su JavaScript
Valori primitivi
30
0x0001a
b = a
0x0002b

31. in collaborazione con15 concetti importanti
su JavaScript
Oggetti
31
0x0001a
b = a
b

32. 13.
ENVIRONMENT &
THIS
in collaborazione con15 concetti importanti
su JavaScript
32

33. in collaborazione con15 concetti importanti
su JavaScript
33
Contesto di esecuzione
Function
Object
this
Link
all’ambiente
esterno
Codice

34. in collaborazione con15 concetti importanti
su JavaScript
34
function b(){
console.log(this);
}
var a = function(){
console.log(this);
}
var c = {
name: ‘pippo’,
greet: function(){
console.log(this);
}
}
?

35. in collaborazione con15 concetti importanti
su JavaScript
35
?
var c = {
name: ‘pippo’,
greet: function(){
var setName = function(newName){
this.name = newName;
}
setName('Pluto');
}
}

36. in collaborazione con15 concetti importanti
su JavaScript
36
var c = {
name: ‘pippo’,
greet: function(){
var self = this;
var setName = function(newName){
self.name = newName;
}
}
}
var c = {
name: ‘pippo’,
greet: function(){
var setName = function(newName){
this.name = newName;
}.bind(this);
}
}

37. in collaborazione con15 concetti importanti
su JavaScript
37
ES6
var c = {
name: ‘pippo’,
greet: function(){
var setName = (newName) => {
this.name = newName;
};
}
}

38. 14.
CLOSURES
in collaborazione con15 concetti importanti
su JavaScript
38

39. in collaborazione con15 concetti importanti
su JavaScript
39
?
function a(name){
return function(lastName){
console.log(name + ‘ ‘ + lastName);
}
}

40. in collaborazione con15 concetti importanti
su JavaScript
40
function a(name){
return function(lastName){
console.log(name + ‘ ‘ +
lastName);
}
}
a(‘Pippo’)(‘Pluto’);
Global Execution Context
a() Execution Context
name
“Pippo”
() Execution Context
lastName
“Pluto”

41. 15.
PROTOTYPES
in collaborazione con15 concetti importanti
su JavaScript
41

42. in collaborazione con15 concetti importanti
su JavaScript
42
Prototype chain
obj
{…}
prop1
obj.prop1
obj.prop2
proto
{…}
prop2
obj.prop3
proto
{…}
prop3
obj2
{…}
obj2.prop2

43. in collaborazione con15 concetti importanti
su JavaScript
43
function Person() {
this.firstName = ‘Pippo’;
this.lastName = ‘Pluto’;
}
var pippo = new Person(); ?
Function constructor

44. in collaborazione con15 concetti importanti
su JavaScript
44
Function constructor & prototype
L’attributo
prototype non è
il prototipo
dell’oggetto
funzione!
function Person() {
this.firstName = ‘Pippo’;
this.lastName = ‘Pluto’;
}
Person.prototype.sayHi = function(){
return ‘Hi ’ + this.firstName;
}
var pippo = new Person();
console.log(pippo.sayHi());

45. in collaborazione con15 concetti importanti
su JavaScript
45
ES6
class Person = {
this.firstName;
this.lastName;
constructor(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
sayHi(){
return ‘Hi ’ + this.firstName;
}
}
var pippo = new Person(‘Pippo’, ‘Pluto’);
pippo.sayHi();

46. © 2017 - Giovanni Buffa
in collaborazione con15 concetti importanti
su JavaScript
46