Nseg41 あなたの知らないjavascriptの基本
-
Upload
hatrayflood -
Category
Technology
-
view
312 -
download
1
Transcript of Nseg41 あなたの知らないjavascriptの基本
2013/7/20 Maker Party@NSEG#41
あなたの知らないjavascriptの基本
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
⾃⼰紹介・名前:アベヒロキ (@hATrayflood)・職業:⾃宅サーバ管理者・http://rayflood.org/diary-temp/
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
前説by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
2⽉の顛末
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
体調不良で中座したわけですが
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
O-1O-25
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
ですたby ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
about:mozillaはレビューが通らなくてまだ⼊ってないですorz
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
本題by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
Q. 次のうち「javascript」はどれか
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
1.var d = new Date();
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
2.var w = open('http://example.com/');
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
3.var id = document.getElementById('id');
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
4.var xhr = new XMLHttpRequest();
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
A. 1by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
Q. 次のうち「javascript」はどれか
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
1.var id = setTimeout(fn, 10);
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
2.var o = JSON.parse('{"a":1}');
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
3.var l = new Uint8Array(10);
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
4.$('#id').load('http://example.com');
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
A. 2, 3by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
解説by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
var d = new Date();
Dateはjs組み込みオブジェクト
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
var w = open('http://example.com/');
open()はwindow.open()の省略形windowはブラウザオブジェクトでそれのjsインターフェイス
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
var id = document.getElementById('id');
DOM APIのjsインターフェイス
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
var xhr = new XMLHttpRequest();
元々はmsxmlコンポーネントの追加オブジェクトで、それを真似たもの
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
var id = setTimeout(fn, 10);
window.setTimeout()の省略形setInterval()も同様
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
var o = JSON.parse('{"a":1}');
組み込みオブジェクトだがwindow.JSONの省略形でもある
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
var l = new Uint8Array(10);
型付き配列は組み込み
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
$('#id').load('http://example.com');
jQuery
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
jsかそうじゃないのかの判定について
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
jsshellで実⾏するftp://ftp.mozilla.org/pub/firefox/nightly/latest-mozilla-central/jsshell-win32.zip
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
⼀⾔に「jsで書ける」と⾔ってもこのあたりの区別がついてないと何ができて何ができないのかわからなくなる
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
wshやnode.jsでありがち
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
本題2by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
function Fn(){ return 0;}var fn1 = Fn;
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
fn1();→ 0Fn();→ 0
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
関数は「関数」型の変数
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
function Fn(){ this.num = 0;}var fn1 = new Fn();
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
fn1.num→ 0
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
関数はコンストラクタ
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
fn1.func = function(){ return 1;}
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
fn1.func();→ 1
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
インスタンスにメソッドを追加できるあとから勝⼿に
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
関数は変数だから
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
Fn.prototype.func2 = function(){ return 2;}
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
fn1.func2();→ 2
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
メソッドはprototypeで定義するのがお薦め
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
newしたあとからでも定義すればすぐ使える
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
var o = new Object();
var o = {};
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
どっちも同じ
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
o.num = 1;
o['num'] = 1;by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
どっちも同じ
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
オブジェクトはハッシュでありハッシュはオブジェクトである
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
var o = {};o['fn1'] = function(){ return 1;}
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
o['fn1']();→ 1
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
これ以上はこっちの資料を⾒てねhttp://www.slideshare.net/yuka2py/javascript-23768378
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
蛇⾜by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
"1" && false→ false"1" && 0→ 0
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
bool値を使わない論理演算はbool値を返さない
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
Boolean("1") && Boolean(0)にするのが正確
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
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"
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
割と何でもイケる
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
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"
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
関数としてDate()を実⾏すると現時刻の⽂字列が返るうえ引数は無視されてしまう
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
(chromeで時差がうまく反映されない)(バグは解消されたらしい)
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
try{ null.toString();}catch(e if e instanceof TypeError){ console.log('TypeError');}catch(e){ console.log(e);}
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
catch()に条件式が書ける
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
instanceof演算⼦でエラー内容ごとに振り分け可能
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
最近の愛読書
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Party@NSEG#41
・リンク集twitter @hATrayfloodhttp://twitter.com/hATrayfloodNSEG 第36回勉強会http://nseg.jp/?第36回勉強会O-1 O-25http://ja.wikipedia.org/wiki/腸管出⾎性⼤腸菌about:mozilla案http://rayflood.org/diary-temp/mozilla.xhtmlMozilla Developer Network JavaScript リファレンスhttps://developer.mozilla.org/ja/docs/Web/JavaScript/Referencejsshellftp://ftp.mozilla.org/pub/firefox/nightly/latest-mozilla-central/jsshell-win32.zipWindows Script Hosthttp://msdn.microsoft.com/ja-jp/library/cc364455.aspxnode.jshttp://nodejs.org/最強オブジェクト指向⾔語 JavaScript 再⼊門!http://www.slideshare.net/yuka2py/javascript-23768378
by ABE Hiroki aka hATrayflood