| 両方とも前のリビジョン
前のリビジョン
次のリビジョン
|
前のリビジョン
|
blog:2020:1206_speaking_javascript [2020/12/06 15:46]
kijima [1 javascript quick start] |
blog:2020:1206_speaking_javascript [2020/12/10 23:30] (現在)
|
| {{tag>book 進行中}} | {{tag>book}} |
| |
| ====== Speaking JavaScript ====== | ====== Speaking JavaScript ====== |
| | |
| | 15 26 47 54 81 100 |
| | |
| | ''node''で対話実行しながら学ぶ。 |
| | |
| | 話題があまりに細かい内容なので実際動かして学べない。またいつか戻ってこよう…。 |
| |
| ===== 1 javascript quick start ===== | ===== 1 javascript quick start ===== |
| |
| primitive型とオブジェクト型。primitive型は変更できない。 | * primitive型とオブジェクト型。primitive型はプロパティを変更できず、オブジェクトは変更できる。 |
| primitiveはオブジェクトを作らない。(生成して比較してみるとわかる) | primitiveは値で比較し、オブジェクトは参照で比較する。 |
| |
| <code javascript> | <code javascript> |
| var obj0 = {} | var obj0 = {}; |
| var obj1 | var obj1 = {}; |
| | obj0 === obj1 # => false |
| | obj0 === obj0 # => true |
| </code> | </code> |
| |
| <code javascript> | <code javascript> |
| | var prim1 = 123; |
| | var prim2 = 123; |
| | prim1 === prim2 # => true |
| </code> | </code> |
| |
| | また、 |
| <code javascript> | <code javascript> |
| obj = {} | obj = {} |
| obj.str # => "a" | obj.str # => "a" |
| </code> | </code> |
| |
| ↑プロパティに代入。 | |
| |
| <code javascript> | <code javascript> |
| str.foo = "a" | str.foo = "a" |
| str.foo # => "undefined" | str.foo # => "undefined" |
| | </code> |
| | |
| | * ''typeof'': 型を判別する。 |
| | * ''typeof null # => object #これはバグらしい'' |
| | |
| | * メソッドだけ抜き出すと変数は保持されない。 |
| | <code javascript> |
| | var jane = { |
| | name: 'Jane', |
| | describe: function() { |
| | return 'Person named '+this.name; |
| | } |
| | }; |
| | |
| | jane.description() # => Person named Jane |
| | func = jane.description |
| | func() # => Cannot read property 'name' of undefined |
| | </code> |
| | |
| | そういうとき''bind''を使う。 |
| | |
| | var jane = { |
| | name: 'Jane', |
| | friends: [ 'Tarzan', 'Cheeta' ], |
| | logHiToFriends: function() { |
| | 'use strict'; |
| | this.friends.forEach(function (friend){ |
| | console.log(this.name+' says hi to '+friend); |
| | }); |
| | } |
| | } |
| | |
| | ===== 2 background ===== |
| | |
| | JavaScriptには明るい未来が待っていますと。 |
| | |
| | ===== 3 JavaScriptの本質 ===== |
| | |
| | 言語の特徴、影響を受けた言語など。Wikipediaの内容みたい。 |
| | |
| | ===== 4 どうやって作られたか ===== |
| | |
| | いろいろあってスーパーエンジニアがプロトタイプを10日で作った。 |
| | 名前もいろいろあって変わりまくって結局JavaScriptという紛らわしい名前に。 |
| | |
| | ===== 5 標準化 ===== |
| | |
| | ECMAScript |
| | |
| | ===== 6 マイルストーン ===== |
| | |
| | 歴史上はじめてのAjaxなアプリはGoogle Map。そこから派生した。 |
| | |
| | ===== 7 JavaScriptの文法 ===== |
| | |
| | まあ、いろいろあるんですね…。 |
| | |
| | strictモードの動きとかもある。 |
| | |
| | ===== 8 値 ===== |
| | |
| | 型とか。 |
| | |
| | 細かい！nullの歴史とか飛ばす。 |
| | |
| | 適当に読んだら最後らへん意味不明。 |
| | ?? |
| | <code javascript> |
| | > var n = { valueOf: function () { return 123} }; |
| | > Number(n) |
| | 123 |
| | > String(n) |
| | '[object Object]' |
| | </code> |
| | |
| | ?? |
| | <code javascript> |
| | > var s = { toString: function () { return '7'; } }; |
| | > String(s) |
| | '7' |
| | > Number(s) |
| | 7 |
| | </code> |
| | |
| | ===== 9 オペレータ ===== |
| | |
| | ほとんどのオペレータはprimitive value でしか働かない。 |
| | + とかそうだな。 |
| | |
| | 複合オペレータ。+=とか。 |
| | |
| | == の挙動。変換されてから比較される。 |
| | たとえば |
| | <code javascript> |
| | > '' == false // 0 === 0 |
| | true |
| | > '' == true // 1 === 1 |
| | true |
| </code> | </code> |
| |