みゆっき☆Think#7 「本気で学ぶJavascript」

  • 11,494 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • みゆっき☆Think#7 「本気で学ぶJavascript」
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
11,494
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
64
Comments
1
Likes
15

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • > var obj = {}\n> obj\n{}\n> typeof obj\n'object'\n> Object.prototype.call.toString(obj);\nTypeError: Cannot call method 'toString' of undefined\n at [object Context]:1:23\n at Interface.<anonymous> (repl.js:171:22)\n at Interface.emit (events.js:64:17)\n at Interface._onLine (readline.js:153:10)\n at Interface._line (readline.js:408:8)\n at Interface._ttyWrite (readline.js:585:14)\n at ReadStream.<anonymous> (readline.js:73:12)\n at ReadStream.emit (events.js:81:20)\n at ReadStream._emitKey (tty_posix.js:307:10)\n at ReadStream.onData (tty_posix.js:70:12)\n> Object.prototype.toString.call(obj);\n'[object Object]'\n> obj.toString()\n'[object Object]'\n> obj\n{}\n> obj.name = 'miyukki'\n'miyukki'\n> obj.age = 18\n18\n> obj.age = '18'\n'18'\n> obj\n{ name: 'miyukki', age: '18' }\n> obj.age = 18\n18\n> obj['age']\n18\n> var key = 'age'\n> obj[key]\n18\n> obj.sayHello = function(){ console.log('hi!') }\n[Function]\n> obj\n{ name: 'miyukki', age: 18, sayHello: [Function] }\n> obj.sayHello()\nhi!\n> obj['sayHello']()\nhi!\n> obj.child = { name: 'Miyukki Jr', age: 0 };\n{ name: 'Miyukki Jr', age: 0 }\n> obj.child\n{ name: 'Miyukki Jr', age: 0 }\n> obj\n{ name: 'miyukki',\n age: 18,\n sayHello: [Function],\n child: { name: 'Miyukki Jr', age: 0 } }\n> \n> \n> \n> \n> \n> \n> \n> \n> \n> \n> new Date();\nThu, 01 Sep 2011 09:48:31 GMT\n> var today = new Date();\n> today.name = 'kyou no namae'\n'kyou no namae'\n> today\n{ Thu, 01 Sep 2011 09:48:35 GMT name: 'kyou no namae' }\n> today.name\n'kyou no namae'\n> today.originalFunction = function(){ console.log('original function') } \n[Function]\n> today.originalFunction()\noriginal function\n
  • > var obj = {}\n> obj\n{}\n> typeof obj\n'object'\n> Object.prototype.call.toString(obj);\nTypeError: Cannot call method 'toString' of undefined\n at [object Context]:1:23\n at Interface.<anonymous> (repl.js:171:22)\n at Interface.emit (events.js:64:17)\n at Interface._onLine (readline.js:153:10)\n at Interface._line (readline.js:408:8)\n at Interface._ttyWrite (readline.js:585:14)\n at ReadStream.<anonymous> (readline.js:73:12)\n at ReadStream.emit (events.js:81:20)\n at ReadStream._emitKey (tty_posix.js:307:10)\n at ReadStream.onData (tty_posix.js:70:12)\n> Object.prototype.toString.call(obj);\n'[object Object]'\n> obj.toString()\n'[object Object]'\n> obj\n{}\n> obj.name = 'miyukki'\n'miyukki'\n> obj.age = 18\n18\n> obj.age = '18'\n'18'\n> obj\n{ name: 'miyukki', age: '18' }\n> obj.age = 18\n18\n> obj['age']\n18\n> var key = 'age'\n> obj[key]\n18\n> obj.sayHello = function(){ console.log('hi!') }\n[Function]\n> obj\n{ name: 'miyukki', age: 18, sayHello: [Function] }\n> obj.sayHello()\nhi!\n> obj['sayHello']()\nhi!\n> obj.child = { name: 'Miyukki Jr', age: 0 };\n{ name: 'Miyukki Jr', age: 0 }\n> obj.child\n{ name: 'Miyukki Jr', age: 0 }\n> obj\n{ name: 'miyukki',\n age: 18,\n sayHello: [Function],\n child: { name: 'Miyukki Jr', age: 0 } }\n> \n> \n> \n> \n> \n> \n> \n> \n> \n> \n> new Date();\nThu, 01 Sep 2011 09:48:31 GMT\n> var today = new Date();\n> today.name = 'kyou no namae'\n'kyou no namae'\n> today\n{ Thu, 01 Sep 2011 09:48:35 GMT name: 'kyou no namae' }\n> today.name\n'kyou no namae'\n> today.originalFunction = function(){ console.log('original function') } \n[Function]\n> today.originalFunction()\noriginal function\n
  • \n
  • \n
  • node は駄目\n\n\n
  • var obj の __proto__ が Object.prototype であること\n\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • なんの変哲もない関数ですね\n
  • なんの変哲もない関数ですね\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

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