Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript
JavaScript
JavaScript
•   (id: tlync)•••         …       3
“JavaScript is the only language thatpeople think they can program without         actually learning it.”                 ...
k?
“JavaScript                          HAHA” (   )              -                  (   )
…
jQuery        ≠JavaScript
JavaScript
3
1. Object                     Object            Object
1. Object                       Object              Object2. Function     Function    2                  - prototype   __p...
1. Object                       Object              Object2. Function     Function    2                  - prototype   __p...
•    …    …   Mozilla
•    …    …         Mozilla•    … DOM    Ajax    …   IE   (ry
•    …    …          Mozilla•    … DOM    Ajax    …   IE    (ry• ECMA Script 5    …    …
Agenda•5          JavaScript•Object                  JavaScript•Function    2•Closure•
5   JavaScript
5         JavaScript    ※ :
@bad_at_mathhttp://www.slideshare.net/badatmath/js-shistory
1995   …
Netscape Navigator 2.0
JavaScript(   LiveScript       )
Mozilla CTO
Java   (   )
•Java Applet•
…   …
!
Netscape Navigator                 !
Mozilla CTO       http://brendaneich.com/tag/history/
Scheme              …         http://brendaneich.com/tag/history/
!?        !※SICP         http://brendaneich.com/tag/history/
http://brendaneich.com/tag/history/
Java       http://brendaneich.com/tag/history/
!? Scheme        …?  ※SICP            http://brendaneich.com/tag/history/
•     …•Java                ……•Gabage Collection   !?   ………
Scheme               Self          Java(            )   (Prototype     OOP)   (   )                  JavaScript
“    Global Object                               …”                    http://brendaneich.com/tag/history/
JavaScript
MS
JScript•Netscape•JavaScript
JScript•Netscape•JavaScript                        …
…
IE 3.0 BetaJavaScript     !
IE 3.0JavaScript   !
IE 3.0
IE 3.0
Netscape•     MS       …•
W3C?
…   …
…   …※W3C
…
…
ECMA
ECMA••Microsoft
ECMA Script(ES)
※JavaScript    ECMA
ES 1••••   IEEE754 (      …)•
ES 2••
ES 3              ※•• String• try/catch•
ES 4••••   …•
ES 4••••   …•
ES 4
(   )
ES 5    ※• ES 3.1•• strict• JSON• http://kangax.github.com/es5-compat-table/
ES Harmony• Class       ES 4                           ?•2               ?•         wikihttp://wiki.ecmascript.org/doku.ph...
5   JavaScript
Object    JavaScript
Object
…
Object                     Object                      Object            string   Function  null           number      Arr...
…
Object  JavScript
Object  JavScript     ※
ObjectJavaScript
Object   ?
Object
Object
Object         …
•       Object    …    …•    …            ?
•        Object      {}   new Object()    {}            new Object()           Java• Object                               ...
Object   Object
(__proto__)         miyukki              Object.prototype  name         miyukki     toString  age              18         ...
(__proto__)         miyukki                     Object.prototype  name         miyukki            toString  age           ...
Object
Object•      Object     null, undefined   Object             Object
Object•                Object               null, undefined        Object                       Object• Object             ...
Object•                   Object                  null, undefined           Object                          Object• Object ...
Function   2
function sayHello(){  console.log(Hello!);}
> typeof sayHello
> typeof sayHello    function
> typeof Object
> typeof Object   function
function ?
Object ObjectFunction  Array  StringNumberBoolean RegExp   Date  etc...
Object typeof Object => functiontypeof Function => function  typeof Array => function  typeof String => functiontypeof Num...
Object  Object instanceof Function=> trueFunction instanceof Function => true  Array instanceof Function => true  String i...
Function
…
Function   2
new      Function
1.       Object2.           [[Class]]3. prototype                      Object     __proto__4.           Object       this5...
var miyukki = new Person(miyukki);               miyukki.toString(); // Object.prototype            Person                ...
Function
Function• Function     new -                             prototype     (__proto__) -           Prototype Chain
Function• Function         new -                                   prototype     (__proto__) -            Prototype Chain•...
• ES5   new          Object.create• ES3         null   prototype         Object
Closure   ?
Closure   ?     ※
…
JavaScript
2••
2         •         •※ with
<script type="text/javascript">//               =>               =>var count = 10;console.log(count); //=> 10var hello = f...
<script type="text/javascript">//               =>               =>var count = 10;console.log(count); //=> 10             ...
※
<script type="text/javascript">var hoge = ‘hoge’;function add(n1, n2){  var sum = n1 + n2;  return sum;}add(10, 20);</scri...
n1              10<script type="text/javascript">      n2              20var hoge = ‘hoge’;                  sum         u...
n1               10<script type="text/javascript">       n2               20var hoge = ‘hoge’;                   sum      ...
n1              10                                 hoge     hoge   n2              20                                 add ...
Closure
Closure +
Closure +•           2--               =
Closure +•           2--                            =•-                Activation-
Closure +
Closure +• Closure - - jQuery -
1. Object            Object
1. Object                Object2. Function     Function     2
1. Object                    Object2. Function     Function     23. Closure                2
?
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
第7回みゆっき☆Think 本気で学ぶ JavaScript
Upcoming SlideShare
Loading in …5
×

第7回みゆっき☆Think 本気で学ぶ JavaScript

1,163 views

Published on

Published in: Technology
  • Be the first to comment

第7回みゆっき☆Think 本気で学ぶ JavaScript

  1. 1. JavaScript
  2. 2. JavaScript
  3. 3. JavaScript
  4. 4. • (id: tlync)••• … 3
  5. 5. “JavaScript is the only language thatpeople think they can program without actually learning it.” - Douglas Crockford
  6. 6. k?
  7. 7. “JavaScript HAHA” ( ) - ( )
  8. 8.
  9. 9. jQuery ≠JavaScript
  10. 10. JavaScript
  11. 11. 3
  12. 12. 1. Object Object Object
  13. 13. 1. Object Object Object2. Function Function 2 - prototype __proto__
  14. 14. 1. Object Object Object2. Function Function 2 - prototype __proto__3. Closure -
  15. 15. • … … Mozilla
  16. 16. • … … Mozilla• … DOM Ajax … IE (ry
  17. 17. • … … Mozilla• … DOM Ajax … IE (ry• ECMA Script 5 … …
  18. 18. Agenda•5 JavaScript•Object JavaScript•Function 2•Closure•
  19. 19. 5 JavaScript
  20. 20. 5 JavaScript ※ :
  21. 21. @bad_at_mathhttp://www.slideshare.net/badatmath/js-shistory
  22. 22. 1995 …
  23. 23. Netscape Navigator 2.0
  24. 24. JavaScript( LiveScript )
  25. 25. Mozilla CTO
  26. 26. Java ( )
  27. 27. •Java Applet•
  28. 28. … …
  29. 29. !
  30. 30. Netscape Navigator !
  31. 31. Mozilla CTO http://brendaneich.com/tag/history/
  32. 32. Scheme … http://brendaneich.com/tag/history/
  33. 33. !? !※SICP http://brendaneich.com/tag/history/
  34. 34. http://brendaneich.com/tag/history/
  35. 35. Java http://brendaneich.com/tag/history/
  36. 36. !? Scheme …? ※SICP http://brendaneich.com/tag/history/
  37. 37. • …•Java ……•Gabage Collection !? ………
  38. 38. Scheme Self Java( ) (Prototype OOP) ( ) JavaScript
  39. 39. “ Global Object …” http://brendaneich.com/tag/history/
  40. 40. JavaScript
  41. 41. MS
  42. 42. JScript•Netscape•JavaScript
  43. 43. JScript•Netscape•JavaScript …
  44. 44.
  45. 45. IE 3.0 BetaJavaScript !
  46. 46. IE 3.0JavaScript !
  47. 47. IE 3.0
  48. 48. IE 3.0
  49. 49. Netscape• MS …•
  50. 50. W3C?
  51. 51. … …
  52. 52. … …※W3C
  53. 53.
  54. 54.
  55. 55. ECMA
  56. 56. ECMA••Microsoft
  57. 57. ECMA Script(ES)
  58. 58. ※JavaScript ECMA
  59. 59. ES 1•••• IEEE754 ( …)•
  60. 60. ES 2••
  61. 61. ES 3 ※•• String• try/catch•
  62. 62. ES 4•••• …•
  63. 63. ES 4•••• …•
  64. 64. ES 4
  65. 65. ( )
  66. 66. ES 5 ※• ES 3.1•• strict• JSON• http://kangax.github.com/es5-compat-table/
  67. 67. ES Harmony• Class ES 4 ?•2 ?• wikihttp://wiki.ecmascript.org/doku.php?id=harmony:harmony
  68. 68. 5 JavaScript
  69. 69. Object JavaScript
  70. 70. Object
  71. 71.
  72. 72. Object Object Object string Function null number Arrayundefined boolean String Number ※ Boolean RegExp Date etc...
  73. 73.
  74. 74. Object JavScript
  75. 75. Object JavScript ※
  76. 76. ObjectJavaScript
  77. 77. Object ?
  78. 78. Object
  79. 79. Object
  80. 80. Object …
  81. 81. • Object … …• … ?
  82. 82. • Object {} new Object() {} new Object() Java• Object Object
  83. 83. Object Object
  84. 84. (__proto__) miyukki Object.prototype name miyukki toString age 18 …__proto__ __proto__
  85. 85. (__proto__) miyukki Object.prototype name miyukki toString age 18 …__proto__ __proto__※ __proto__ IE ES 5
  86. 86. Object
  87. 87. Object• Object null, undefined Object Object
  88. 88. Object• Object null, undefined Object Object• Object (= ) ( ) ( )
  89. 89. Object• Object null, undefined Object Object• Object (= ) ( ) ( )• Object (__proto__) OK
  90. 90. Function 2
  91. 91. function sayHello(){ console.log(Hello!);}
  92. 92. > typeof sayHello
  93. 93. > typeof sayHello function
  94. 94. > typeof Object
  95. 95. > typeof Object function
  96. 96. function ?
  97. 97. Object ObjectFunction Array StringNumberBoolean RegExp Date etc...
  98. 98. Object typeof Object => functiontypeof Function => function typeof Array => function typeof String => functiontypeof Number => functiontypeof Boolean => function typeof RegExp => function typeof Date => function ...
  99. 99. Object Object instanceof Function=> trueFunction instanceof Function => true Array instanceof Function => true String instanceof Function => trueNumber instanceof Function => trueBoolean instanceof Function => true RegExp instanceof Function => true Date instanceof Function => true ...
  100. 100. Function
  101. 101.
  102. 102. Function 2
  103. 103. new Function
  104. 104. 1. Object2. [[Class]]3. prototype Object __proto__4. Object this5. Object
  105. 105. var miyukki = new Person(miyukki); miyukki.toString(); // Object.prototype Person Function Object__proto__ Function.prototype __proto__ Object.prototype __proto__ sayHello <function> … <function> … <function> __proto__
  106. 106. Function
  107. 107. Function• Function new - prototype (__proto__) - Prototype Chain
  108. 108. Function• Function new - prototype (__proto__) - Prototype Chain• 2 - Function prototype - Object __proto__ ( )
  109. 109. • ES5 new Object.create• ES3 null prototype Object
  110. 110. Closure ?
  111. 111. Closure ? ※
  112. 112.
  113. 113. JavaScript
  114. 114. 2••
  115. 115. 2 • •※ with
  116. 116. <script type="text/javascript">// => =>var count = 10;console.log(count); //=> 10var hello = function(){ // => => var hoge = hoge; // => console.log(hoge); //=> hoge // => console.log(count); //=> 10}</script>
  117. 117. <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>
  118. 118.
  119. 119. <script type="text/javascript">var hoge = ‘hoge’;function add(n1, n2){ var sum = n1 + n2; return sum;}add(10, 20);</script>
  120. 120. n1 10<script type="text/javascript"> n2 20var hoge = ‘hoge’; sum undefined arguments {0: 10, 1: 20,...}function add(n1, n2){ var sum = n1 + n2; return sum;}add(10, 20);</script>
  121. 121. n1 10<script type="text/javascript"> n2 20var 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>
  122. 122. n1 10 hoge hoge n2 20 add <function> sum undefinedarguments {0: 10, 1: 20,...}
  123. 123. Closure
  124. 124. Closure +
  125. 125. Closure +• 2-- =
  126. 126. Closure +• 2-- =•- Activation-
  127. 127. Closure +
  128. 128. Closure +• Closure - - jQuery -
  129. 129. 1. Object Object
  130. 130. 1. Object Object2. Function Function 2
  131. 131. 1. Object Object2. Function Function 23. Closure 2
  132. 132. ?

×