Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2013/7/20 Maker Part y@NSEG#41
あなたの知らない
javascriptの基本
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
⾃⼰紹介
・名前:アベヒロキ (@hATrayflood)
・職業:⾃宅サーバ管理者
・http://rayflood.org/diary-temp/
by ABE Hiroki aka...
2013/7/20 Maker Part y@NSEG#41
前説by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
2⽉の
顛末by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
体調不良で中座
したわけですが
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
O-1
O-25by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
ですた
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
about:mozilla
はレビューが通らなくて
まだ⼊ってないですorz
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
本題by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
Q. 次のうち
「javascript」
はどれか
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
1.
var d = new Date();
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
2.
var w = open('http://example.com/');
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
3.
var id = document.getElementById('id');
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
4.
var xhr = new XMLHttpRequest();
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
A. 1by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
Q. 次のうち
「javascript」
はどれか
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
1.
var id = setTimeout(fn, 10);
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
2.
var o = JSON.parse('{"a":1}');
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
3.
var l = new Uint8Array(10);
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
4.
$('#id').load('http://example.com');
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
A. 2, 3
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
解説by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
var d = new Date();
Dateはjs組み込み
オブジェクト
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
var w = open('http://example.com/');
open()はwindow.open()の省略形
windowはブラウザオブジェクトで
それのjsインターフ...
2013/7/20 Maker Part y@NSEG#41
var id = document.getElementById('id');
DOM APIのjsインターフェイス
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
var xhr = new XMLHttpRequest();
元々はmsxmlコンポーネントの
追加オブジェクトで、それを真似たもの
by ABE Hiroki aka hATra...
2013/7/20 Maker Part y@NSEG#41
var id = setTimeout(fn, 10);
window.setTimeout()の省略形
setInterval()も同様
by ABE Hiroki aka hAT...
2013/7/20 Maker Part y@NSEG#41
var o = JSON.parse('{"a":1}');
組み込みオブジェクトだが
window.JSONの省略形でもある
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
var l = new Uint8Array(10);
型付き配列は組み込み
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
$('#id').load('http://example.com');
jQuery
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
jsかそうじゃないのか
の判定について
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
jsshellで実⾏する
ftp://ftp.mozilla.org/pub/firefox/nightly/
latest-mozilla-central/jsshell-win32...
2013/7/20 Maker Part y@NSEG#41
⼀⾔に「jsで書ける」と⾔っても
このあたりの区別がついてないと
何ができて何ができないのか
わからなくなる
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
wshやnode.jsでありがち
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
本題2
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
function Fn(){
return 0;
}
var fn1 = Fn;
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
fn1();
→ 0
Fn();
→ 0
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
関数は
「関数」型
の変数
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
function Fn(){
this.num = 0;
}
var fn1 = new Fn();
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
fn1.num
→ 0
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
関数は
コンストラクタ
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
fn1.func = function(){
return 1;
}
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
fn1.func();
→ 1
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
インスタンスに
メソッドを追加できる
あとから勝⼿に
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
関数は変数だから
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
Fn.prototype.func2 = function(){
return 2;
}
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
fn1.func2();
→ 2
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
メソッドはprototypeで
定義するのがお薦め
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
newしたあとからでも
定義すればすぐ使える
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
var o = new Object();
var o = {};
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
どっち
も同じby ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
o.num = 1;
o['num'] = 1;
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
どっち
も同じby ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
オブジェクトはハッシュであり
ハッシュはオブジェクトである
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
var o = {};
o['fn1'] = function(){
return 1;
}
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
o['fn1']();
→ 1
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
これ以上はこっちの資料を⾒てね
http://www.slideshare.net/yuka2py/javascript-23768378
by ABE Hiroki aka hAT...
2013/7/20 Maker Part y@NSEG#41
蛇⾜by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
"1" && false
→ false
"1" && 0
→ 0
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
bool値を使わない
論理演算は
bool値を返さない
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
Boolean("1") && Boolean(0)
にするのが正確
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
new Date(1374282805605).toString()
→ "Sat Jul 20 2013 10:13:25 GMT+0900"
new Date("Sat Jul ...
2013/7/20 Maker Part y@NSEG#41
割と何でもイケる
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
new Date(1374282805605)
→ [object Date]
new Date(1374282805605).toString()
→ "Sat Jul 20 20...
2013/7/20 Maker Part y@NSEG#41
関数としてDate()を実⾏すると
現時刻の⽂字列が返るうえ
引数は無視されてしまう
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
(chromeで時差がうまく反映されない)
(バグは解消されたらしい)
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
try{
null.toString();
}
catch(e if e instanceof TypeError){
console.log('TypeError');
}
cat...
2013/7/20 Maker Part y@NSEG#41
catch()に
条件式が書ける
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
instanceof演算⼦で
エラー内容ごとに
振り分け可能
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
最近の愛読書
by ABE Hiroki aka hATrayflood
2013/7/20 Maker Part y@NSEG#41
・リンク集
twitter @hATrayflood
http://twitter.com/hATrayflood
NSEG 第36回勉強会
http://nseg.jp/?第36回勉強...
Upcoming SlideShare
Loading in …5
×

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

606 views

Published on

Published in: Technology, Business
  • Be the first to comment

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

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

×