1. JavaScript is a scripting language that originated from LiveScript and was developed by Netscape in 1995 to make web pages more interactive. It was later standardized by Ecma International as ECMAScript. 2. Objects in JavaScript can be created using object literals or the Object constructor. All objects in JavaScript inherit properties and methods from the Object prototype. 3. Functions in JavaScript are objects that allow for abstraction and code reuse. Functions can be defined using function declarations or expressions. All functions have a prototype property that is used to implement prototype-based inheritance.

1. JavaScript

2. JavaScript

3. JavaScript

5. • (id: tlync)
•
•
• … 3

8. “JavaScript is the only language that
people think they can program without
actually learning it.”
- Douglas Crockford

9. k?

10. “JavaScript
HAHA” ( )
-
( )

13. …

14. jQuery
≠
JavaScript

18. JavaScript

20. 3

22. 1. Object
Object
Object

23. 1. Object
Object
Object
2. Function
Function 2
- prototype __proto__

24. 1. Object
Object
Object
2. Function
Function 2
- prototype __proto__
3. Closure
-

26. •
…
… Mozilla

27. •
…
… Mozilla
•
… DOM Ajax
… IE (ry

28. •
…
… Mozilla
•
… DOM Ajax
… IE (ry
• ECMA Script 5
…
…

29. Agenda
•5 JavaScript
•Object JavaScript
•Function 2
•Closure
•

30. 5 JavaScript

31. 5 JavaScript
※ :

32. @bad_at_math
http://www.slideshare.net/badatmath/js-shistory

33. 1995 …

34. Netscape Navigator 2.0

35. JavaScript
( LiveScript )

36. Mozilla CTO

37. Java ( )

38. •Java Applet
•

39. … …

40. !

41. Netscape Navigator
!

42. Mozilla CTO
http://brendaneich.com/tag/history/

43. Scheme …
http://brendaneich.com/tag/history/

44. !? !
※SICP
http://brendaneich.com/tag/history/

45. http://brendaneich.com/tag/history/

46. Java
http://brendaneich.com/tag/history/

47. !? Scheme …?
※SICP
http://brendaneich.com/tag/history/

48. • …
•Java ……
•Gabage Collection !? ………

49. Scheme Self Java
( ) (Prototype OOP) ( )
JavaScript

51. “
Global Object
…”
http://brendaneich.com/tag/history/

52. JavaScript

53. MS

54. JScript
•Netscape
•JavaScript

55. JScript
•Netscape
•JavaScript
…

56. …

57. IE 3.0 Beta
JavaScript !

58. IE 3.0
JavaScript !

59. IE 3.0

60. IE 3.0

61. Netscape
• MS …
•

62. W3C?

63. … …

64. … …
※W3C

65. …

66. …

67. ECMA

68. ECMA
•
•Microsoft

69. ECMA Script(ES)

70. ※
JavaScript
ECMA

71. ES 1
•
•
•
• IEEE754 ( …)
•

72. ES 2
•
•

73. ES 3
※
•
• String
• try/catch
•

74. ES 4
•
•
•
• …
•

75. ES 4
•
•
•
• …
•

76. ES 4

78. ( )

79. ES 5
※
• ES 3.1
•
• strict
• JSON
•
http://kangax.github.com/es5-compat-table/

80. ES Harmony
• Class ES 4 ?
•2 ?
• wiki
http://wiki.ecmascript.org/doku.php?id=harmony:harmony

81. 5 JavaScript

82. Object
JavaScript

83. Object

84. …

85. Object
Object
Object
string Function
null
number Array
undefined
boolean String
Number
※ Boolean
RegExp
Date
etc...

86. …

87. Object
JavScript

88. Object
JavScript
※

89. Object
JavaScript

90. Object ?

91. Object

92. Object

93. Object
…

94. • Object
…
…
•
… ?

95. • Object {} new Object()
{} new Object()
Java
• Object
Object

97. Object
Object

98. (__proto__)
miyukki Object.prototype
name miyukki toString
age 18 …
__proto__ __proto__

99. (__proto__)
miyukki Object.prototype
name miyukki toString
age 18 …
__proto__ __proto__
※ __proto__
IE
ES 5

101. Object

102. Object
• Object
null, undefined Object
Object

103. Object
• Object
null, undefined Object
Object
• Object (= )
( ) ( )

104. Object
• Object
null, undefined Object
Object
• Object (= )
( ) ( )
• Object (__proto__)
OK

105. Function 2

106. function sayHello(){
console.log('Hello!');
}

107. > typeof sayHello

108. > typeof sayHello
'function'

110. > typeof Object

111. > typeof Object
'function'

113. 'function' ?

114. Object
Object
Function
Array
String
Number
Boolean
RegExp
Date
etc...

115. Object
typeof Object => 'function'
typeof Function => 'function'
typeof Array => 'function'
typeof String => 'function'
typeof Number => 'function'
typeof Boolean => 'function'
typeof RegExp => 'function'
typeof Date => 'function'
...

116. Object
Object instanceof Function=> true
Function instanceof Function => true
Array instanceof Function => true
String instanceof Function => true
Number instanceof Function => true
Boolean instanceof Function => true
RegExp instanceof Function => true
Date instanceof Function => true
...

117. Function

118. …

119. Function 2

122. new
Function

124. 1. Object
2. [[Class]]
3. prototype Object
__proto__
4. Object this
5. Object

126. var miyukki = new Person('miyukki');
miyukki.toString(); // Object.prototype
Person Function Object
__proto__ Function.prototype __proto__ Object.prototype __proto__
sayHello <function> … <function> … <function>
__proto__

128. Function

129. Function
• Function new
- prototype
(__proto__)
- Prototype Chain

130. Function
• Function new
- prototype
(__proto__)
- Prototype Chain
• 2
- Function prototype
- Object __proto__
( )

132. • ES5 new Object.create
• ES3 null prototype
Object

133. Closure ?

134. Closure ?
※

135. …

136. JavaScript

137. 2
•
•

138. 2
•
•
※ with

139. <script type="text/javascript">
// => =>
var count = 10;
console.log(count); //=> 10
var hello = function(){
// => =>
var hoge = 'hoge';
// =>
console.log(hoge); //=> hoge
// =>
console.log(count); //=> 10
}
</script>

140. <script type="text/javascript">
// => =>
var count = 10;
console.log(count); //=> 10
=>
var hello = function(){
// => =>
var hoge = 'hoge';
// =>
=>
console.log(hoge); //=> hoge
// =>
console.log(count); //=> 10
}
</script>

144. ※

145. <script type="text/javascript">
var hoge = ‘hoge’;
function add(n1, n2){
var sum = n1 + n2;
return sum;
}
add(10, 20);
</script>

146. n1 10
<script type="text/javascript"> n2 20
var hoge = ‘hoge’; sum undefined
arguments {0: 10, 1: 20,...}
function add(n1, n2){
var sum = n1 + n2;
return sum;
}
add(10, 20);
</script>

147. n1 10
<script type="text/javascript"> n2 20
var hoge = ‘hoge’; sum undefined
arguments {0: 10, 1: 20,...}
function add(n1, n2){
var sum = n1 + n2;
return sum;
}
add(10, 20); hoge 'hoge'
</script>
add <function>

148. n1 10
hoge 'hoge'
n2 20
add <function>
sum undefined
arguments {0: 10, 1: 20,...}

150. Closure

153. Closure +

154. Closure +
• 2
-
- =

155. Closure +
• 2
-
- =
•
-
Activation
-

156. Closure +

157. Closure +
• Closure
-
- jQuery
-

160. 1. Object
Object

161. 1. Object
Object
2. Function
Function
2

162. 1. Object
Object
2. Function
Function
2
3. Closure
2

163. ?