JS

Transcript

1. JavaScript
2. “The World's Most Misunderstood Programming Language” Douglas Crackford
3. A Re-introduction to JavaScript
4. has nothing to do with Java JavaScript
5. runs not only in web browsers JavaScript
6. History
7. 1995 by Brendan Eich for Netscape LiveScript
9. “I had to be done in ten days or something worse than JS would have happened.” Brendan Eich
10. base on Scheme LiveScript
11. renamed JavaScript LiveScript
12. Standardized ECMAScript
13. Language Overview
14. No compilation Interpreter Based
16. No class Prototypical Inheritance
17. except for null and undefined Object Everything
18. My dad is Scheme Functional Programming
19. “Lisp in C's Clothing” Douglas Crackford
21. Not my business Input/Output?
22. Variable & Types
23. Object Array Function null Number Boolean String undefined
24. Number
25. var a = 42;
26. The only number type is Number Number
27. double-precision 64-bit IEEE 754 Number
28. var a = 0.1; // 0.1 a = 010; // 8 a = 0xab; // 171
29. String
30. var a = 'hello world';
31. 'qouted like this' ”double qouted” String
32. 'string'.length // 6 'string'[2] // 'r' 'hello'.substr(0, 2) // 'he'
33. 'hello' + 'world' // 'helloworld' 'string' + 2 // 'string2'
34. var a = 42; a = 'hello world';
35. JavaScript is loosely typed values are typed, variables are not
36. Boolean
37. var a = true;
38. true & false Boolean
39. '123' == 123 // true '123' === 123 // false
40. Content equality ==
41. Object identity ===
42. Null
43. var a = null; // null
44. Nothing Exists but nothing Null
45. Undefined
46. var a; // undefined
47. Not even nothing Undefined
48. var a; // undefined a = 5; // 5
49. Everything in JavaScript is undefined Until you assign something to it
50. [ ] Array
51. var a = [4, 5, 6];
52. Just a list Array
53. var a = [4, true, 'hello']; a[0] // 4 a[3] // undefined
54. var a = [4, 5, [6, 7]]; a[2] // [6, 7] a.push(7) // a → [4, 5, [6, 7], 7]
55. var a = [4, 5, , 6]; a.length // 4 a.toString() // '4,5,undefined,6'
56. { } Object
57. var a = {};
58. Hash table Object
59. var bob = { name: 'bob', Job: 'teacher', age: 36 };
60. Name-value pair { name: value } Object
61. var bob = { name: 'bob' };
62. dynamic Object
63. var bob = { name: 'bob' }; bob.hair = 'brown'; bob['hair'] = 'brown';
64. bob.hair; // 'brown' bob['name']; // 'Bob' Bob.banana; // undefined
65. delete bob.hair; delete bob['name']; // bob → {};
66. var alice = { name: 'alice', pet: { cat: 'bob', fish: ['a', 'b'] } }; alice.pet.fish[0] // 'a'
67. Now, what've we got?
68. JSON JS Object Notation
69. lightweight text-based human-readable
70. var alice = { name: 'alice', pet: { cat: 'bob', fish: ['a', 'b'] } };
72. Function
73. var lambda = function () {};
74. value Function
75. var a = function () {}, b = 5, c = function () { // ... };
76. Invoke using () Function
77. var five = function () { return 5; }; five; // undefined five(); // 5
78. Always return Function
79. var void = function () { // ... }; var a = void(); // a → undefined
80. Higher-order (a.k.a fantastic) Function
81. var chef = function (recipe, ingr) { return recipe(ingr); }; var pie = function (ingr) { return ingr + ' pie'; }; chef(pie, 'apple'); // 'apple pie'
82. Mom, I'm passing FUNCTIONS!!
83. var grandma = function () { return function () { Return 'lol'; }; }; grandma()(); // 'lol'
84. Closure Function
85. var add = function (a, b) { return a + b; };
86. var addHalf = function (a) { return function (b) { return a + b; }; }; var add4 = addHalf(4); add4(5); // 9;
87. Arguments Function
88. var addFirstThree = function () { return arguments[0] + arguments[1] + arguments[2]; }; Func(1, 2, 3, 2, 3); // 6;
89. Length Function
90. var func = function (a, b) { // ... }; func.length; // 2
91. Control Statements
92. C-like ; )
93. Scoping
94. var a = 2; // a → 2
95. var a = 2; if () { // a → 2 } // a → 2
96. if () { var a = 2; // a → 2 } // a → 2
97. var a = 2; // a → 2
98. No block scope
99. Only Functions can make scopes
100. var func = function () { var a = 2; } // a → undefined
101. var func = function () { var a = 2; } // a → undefined
102. Local variables Var
103. var a = 2; // a :: Local (in Global)
104. a = 2; // a :: Global
105. var func = function () { var a = 2; // a :: Local };
106. var func = function () { a = 2; // a :: Global };
107. Global is bad
108. Never drop your var Always use them
109. Scope Chains
110. Function var Closure var Global
111. var addHalf = function (a) { return function (b) { return a + b; }; }; var add4 = addHalf(4); add4(5); // 9;
112. Constructor Function
113. Function as Constructor
114. var Cat = function () { this.name = 'Bob'; }; var bob = new Cat; Bob.name; // 'Bob'
115. What is this ?
116. var Cat = function () { this; // Cat };
117. var foo = { name: 'bob', miaou: function () { this; // foo } };
118. var Cat = function (name) { this.name = name || 'Bob'; }; var bob = new Cat, alice = new Cat('Alice'); bob.name; // 'Bob' alice.name; // 'Alice'
119. var Cat = function () { this.name = 'Bob'; this.miaou = function () { return this.name }; }; var bob = new Cat; bob.miaou(); // 'Bob'
120. var Cat = function () { this.name = 'Bob'; }; Cat.prototype.miaou = function () { return this.name }; var bob = new Cat; bob.miaou(); // 'Bob'
121. An attribute of every object Prototype
122. mom Prototype
123. ancenstors Prototype Chain
124. me mom grandma
125. Q & A