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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

JavaScript

JavaScript

JavaScript

• (id: tlync)

•
•
• … 3

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

...

“JavaScript
HAHA” ( )

-

( )

jQuery
≠
JavaScript

JavaScript

1. Object
Object
Object

1. Object
Object
Object

2. Function
Function 2
- prototype...

1. Object
Object
Object

2. Function
Function 2
- prototype...

•
…
… 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_math

http://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

JScript

•Netscape
•JavaScript

JScript

•Netscape
•JavaScript

…

IE 3.0 Beta

JavaScript !

IE 3.0

JavaScript !

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 ?

• wiki

http://wiki.ecmascript.or...

5 JavaScript

Object
JavaScript

Object

Object
Object
Object
string Function
null
number ...

Object
JavScript

Object
JavScript
※

Object
JavaScript

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, undeﬁned Object
Object

Object
• Object
null, undeﬁned Object
Object

• Object ...

Object
• Object
null, undeﬁned Object
Object

• Ob...

Function 2

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

> typeof sayHello

> typeof sayHello
'function'

> typeof Object

> typeof Object
'function'

'function' ?

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

Object
typeof Object => 'function'
typeof Function => 'function'
typeof Array => 'function'
typeof String => 'functio...

Object
Object instanceof Function=> true
Function instanceof Function => true
Array instanceof Function => true
Stri...

Function

Function 2

new
Function

1. Object

2. [[Class]]

3. prototype Object
__proto__

4. Object ...

var miyukki = new Person('miyukki');
miyukki.toString(); // Object.prototype

Person ...

Function

Function
• Function new

- prototype

(__proto__)
- Prototype Chain

Function
• Function new

- prototype

(__proto__)
- Prototype...

• ES5 new Object.create

• ES3 null prototype
Object

Closure ?

Closure ?
※

JavaScript

2

•
•

2

•
•

※ with

<script type="text/javascript">
// => =>
var count = 10;
console.log(count); //=> 10

var hel...

<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...

n1 10

<script type="text/javascript"> n2 20

var hoge = ‘hoge’; sum ...

n1 10

<script type="text/javascript"> n2 20

var hoge = ‘hoge’; su...

n1 10
hoge 'hoge'
n2 20
...

Closure

Closure +

Closure +
• 2
-
- =

Closure +
• 2
-
- =

•
-
Activation

-

Closure +

Closure +
• Closure
-
- jQuery
-

1. Object
Object

1. Object
Object

2. Function
Function
2

1. Object
Object

2. Function
Function
2

3. Closure
2

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Trait とは? その使い道を考えてみる by Takuya Fujimura 15136 views
10分で分かる最近のCakePHP by Masashi Shinbara 4121 views
traitを使って楽したい話 by infinite_loop 27117 views

View on Slideshare

1 of 163 Ad

View on Slideshare

1 of 163 Ad