あなたの知らないjavascriptの基本

あなたの知らない
javascriptの基本
---
自己紹介
・名前：アベヒロキ (<a href="http://twitter.com/hATrayflood">@hATrayflood</a>)
・職業：自宅サーバ管理者
・<a href="http://rayflood.org/diary-temp/">http://rayflood.org/diary-temp/</a>
---
前説
---
2月の
顛末
---
体調不良で中座
したわけですが
---
O-1
O-25
---
ですた
---
<a href="http://rayflood.org/diary-temp/mozilla.xhtml">about:mozilla</a>
はレビューが通らなくて
まだ入ってないですorz
---
本題
---
Q. 次のうち
「javascript」
はどれか
---
1.
var d = new Date();
---
2.
var w = open('http://example.com/');
---
3.
var id = document.getElementById('id');
---
4.
var xhr = new XMLHttpRequest();
---
A. 1
---
Q. 次のうち
「javascript」
はどれか
---
1.
var id = setTimeout(fn, 10);
---
2.
var o = JSON.parse('{"a":1}');
---
3.
var l = new Uint8Array(10);
---
4.
$('#id').load('http://example.com');
---
A. 2, 3
---
解説
---
var d = new Date();
　
Dateはjs組み込み
オブジェクト
---
var w = open('http://example.com/');
　
open()はwindow.open()の省略形
windowはブラウザオブジェクトで
それのjsインターフェイス
---
var id = document.getElementById('id');
　
DOM APIのjsインターフェイス
---
var xhr = new XMLHttpRequest();
　
元々はmsxmlコンポーネントの
追加オブジェクトで、それを真似たもの
---
var id = setTimeout(fn, 10);
　
window.setTimeout()の省略形
setInterval()も同様
---
var o = JSON.parse('{"a":1}');
　
組み込みオブジェクトだが
window.JSONの省略形でもある
---
var l = new Uint8Array(10);
　
型付き配列は組み込み
---
$('#id').load('http://example.com');
　
jQuery
---
jsかそうじゃないのか
の判定について
---
jsshellで実行する
<a href="ftp://ftp.mozilla.org/pub/firefox/nightly/latest-mozilla-central/jsshell-win32.zip">ftp://ftp.mozilla.org/pub/firefox/nightly/</a>
<a href="ftp://ftp.mozilla.org/pub/firefox/nightly/latest-mozilla-central/jsshell-win32.zip">latest-mozilla-central/jsshell-win32.zip</a>
---
一言に「jsで書ける」と言っても
このあたりの区別がついてないと
何ができて何ができないのか
わからなくなる
---
<a href="http://ja.wikipedia.org/wiki/Windows_Script_Host">wsh</a>や<a href="http://ja.wikipedia.org/wiki/Node.js">node.js</a>でありがち
---
本題2
---
function Fn(){
    return 0;
}
var fn1 = Fn;
---
fn1();
→ 0
Fn();
→ 0
---
関数は
「関数」型
の変数
---
function Fn(){
    this.num = 0;
}
var fn1 = new Fn();
---
fn1.num
→ 0
---
関数は
コンストラクタ
---
fn1.func = function(){
    return 1;
}
---
fn1.func();
→ 1
---
インスタンスに
メソッドを追加できる
あとから勝手に
---
関数は変数だから
---
Fn.prototype.func2 = function(){
    return 2;
}
---
fn1.func2();
→ 2
---
メソッドはprototypeで
定義するのがお薦め
---
newしたあとからでも
定義すればすぐ使える
---
var o = new Object();
　
var o = {};
---
どっち
も同じ
---
o.num = 1;
　
o['num'] = 1;
---
どっち
も同じ
---
オブジェクトはハッシュであり
ハッシュはオブジェクトである
---
var o = {};
o['fn1'] = function(){
    return 1;
}
---
o['fn1']();
→ 1
---
これ以上はこっちの資料を見てね
<a href="http://www.slideshare.net/yuka2py/javascript-23768378"></a>
---
蛇足
---
"1" && false
→ false
"1" && 0
→ 0
---
bool値を使わない
論理演算は
bool値を返さない
---
Boolean("1") && Boolean(0)
にするのが正確
---
new Date(1374282805605).toString()
→ "Sat Jul 20 2013 10:13:25 GMT+0900"
　
new Date("Sat Jul 20 2013 10:13:25").toString()
→ "Sat Jul 20 2013 10:13:25 GMT+0900"
　
new Date("2013/7/20 10:13:25").toString()
→ "Sat Jul 20 2013 10:13:25 GMT+0900"
---
割と何でもイケる
---
new Date(1374282805605)
→ [object Date]
　
new Date(1374282805605).toString()
→ "Sat Jul 20 2013 10:13:25 GMT+0900"
　
Date(1374282805605)
→ "Sat Jul 20 2013 10:35:15 GMT+0900"
---
関数としてDate()を実行すると
現時刻の文字列が返るうえ
引数は無視されてしまう
---
(chromeで時差がうまく反映されない)
(バグは解消されたらしい)
---
try{
    null.toString();
}
catch(e if e instanceof TypeError){
    console.log('TypeError');
}
catch(e){
    console.log(e);
}
---
catch()に
条件式が書ける
---
instanceof演算子で
エラー内容ごとに
振り分け可能
---
最近の愛読書
<img src="http://ec2.images-amazon.com/images/I/41j3P54vLfL._SL500_AA300_.jpg"><img src="http://ec2.images-amazon.com/images/I/517aDKNaZwL._SL500_AA300_.jpg"><img src="http://ec2.images-amazon.com/images/I/51hbbDoLYoL._SL500_AA300_.jpg">
---
・リンク集
twitter @hATrayflood
<a href="http://twitter.com/hATrayflood"></a>
NSEG 第36回勉強会
<a href="http://nseg.jp/?%E7%AC%AC36%E5%9B%9E%E5%8B%89%E5%BC%B7%E4%BC%9A">http://nseg.jp/?第36回勉強会</a>
O-1 O-25
<a href="http://ja.wikipedia.org/wiki/%E8%85%B8%E7%AE%A1%E5%87%BA%E8%A1%80%E6%80%A7%E5%A4%A7%E8%85%B8%E8%8F%8C">http://ja.wikipedia.org/wiki/腸管出血性大腸菌</a>
about:mozilla案
<a href="http://rayflood.org/diary-temp/mozilla.xhtml"></a>
Mozilla Developer Network JavaScript リファレンス
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference"></a>
jsshell
<a href="ftp://ftp.mozilla.org/pub/firefox/nightly/latest-mozilla-central/jsshell-win32.zip"></a>
Windows Script Host
<a href="http://msdn.microsoft.com/ja-jp/library/cc364455.aspx"></a>
node.js
<a href="http://nodejs.org/"></a>
最強オブジェクト指向言語 JavaScript 再入門！
<a href="http://www.slideshare.net/yuka2py/javascript-23768378"></a>