• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
第7回みゆっき☆Think 本気で学ぶ JavaScript
 

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

on

  • 1,017 views

 

Statistics

Views

Total Views
1,017
Views on SlideShare
1,017
Embed Views
0

Actions

Likes
6
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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. (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. (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. (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. (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

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

  • JavaScript
  • JavaScript
  • JavaScript
  • • (id: tlync)••• … 3
  • “JavaScript is the only language thatpeople think they can program without actually learning it.” - Douglas Crockford
  • k?
  • “JavaScript HAHA” ( ) - ( )
  • jQuery ≠JavaScript
  • JavaScript
  • 3
  • 1. Object Object Object
  • 1. Object Object Object2. Function Function 2 - prototype __proto__
  • 1. Object Object Object2. Function Function 2 - prototype __proto__3. Closure -
  • • … … 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.php?id=harmony:harmony
  • 5 JavaScript
  • Object JavaScript
  • Object
  • Object Object Object string Function null number Arrayundefined boolean String Number ※ Boolean RegExp Date etc...
  • Object JavScript
  • Object JavScript ※
  • ObjectJavaScript
  • Object ?
  • Object
  • Object
  • Object …
  • • Object … …• … ?
  • • Object {} new Object() {} new Object() Java• Object Object
  • Object Object
  • (__proto__) miyukki Object.prototype name miyukki toString age 18 …__proto__ __proto__
  • (__proto__) miyukki Object.prototype name miyukki toString age 18 …__proto__ __proto__※ __proto__ IE ES 5
  • Object
  • Object• Object null, undefined Object Object
  • Object• Object null, undefined Object Object• Object (= ) ( ) ( )
  • Object• Object null, undefined Object Object• Object (= ) ( ) ( )• Object (__proto__) OK
  • 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 Number => functiontypeof Boolean => function typeof RegExp => function typeof Date => function ...
  • 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 ...
  • Function
  • Function 2
  • new Function
  • 1. Object2. [[Class]]3. prototype Object __proto__4. Object this5. Object
  • var miyukki = new Person(miyukki); miyukki.toString(); // Object.prototype Person Function Object__proto__ Function.prototype __proto__ Object.prototype __proto__ sayHello <function> … <function> … <function> __proto__
  • Function
  • Function• Function new - prototype (__proto__) - Prototype Chain
  • Function• Function new - prototype (__proto__) - Prototype Chain• 2 - Function prototype - Object __proto__ ( )
  • • 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 = function(){ // => => var hoge = hoge; // => console.log(hoge); //=> hoge // => console.log(count); //=> 10}</script>
  • <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>
  • <script type="text/javascript">var hoge = ‘hoge’;function add(n1, n2){ var sum = n1 + n2; return sum;}add(10, 20);</script>
  • 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>
  • 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>
  • n1 10 hoge hoge n2 20 add <function> sum undefinedarguments {0: 10, 1: 20,...}
  • 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
  • ?