それすぐ実行！JavaScript！

思った JavaScript はすぐに実行してみましょう！

ブラウザの URL 入力欄に

javascript:(function() { /*実行したいコードを書く*/ })()

FireBug を使ってる人は、コンソール開いて実行したいコードを書く。

たとえばこんなことができます。

これらの例は僕が日頃使っているものです。

グローバルで使える関数を列挙する(Firefox Only)

• FireBug用

for(var n in window) if(typeof window[n]=='function')console.log(n);

• URL用

javascript:(function(){var b='';for(var n in window)if(typeof window[n]=='function')b+=n+"\n";alert(b)})()

Object.prototype の汚染を調べる

• FireBug用

for(var n in {})console.log(n);

• URL用

javascript:(function(){var b='';for(var n in {})b+=n+"\n"; alert(b)})()

このオブジェクトってどんなだっけ？って思ったとき(Firefox Only)

• FireBug用

console.log(obj.toSource());

• URL用

javascript:(function(){alert(obj.toSource())})()

この実態参照ってなんだっけ？

• FireBug用

document.body.innerHTML = '&';

• URL用

javascript:'&'

イベントがバブリングするかテストする

以下を実行したあとに実際にイベントを発生させてみる。

• FireBug用

document.onchange=function(){alert('changeイベントはバブリングするよ')};

• URL用

javascript:(function(){document.onchange=function(){alert('changeイベントはバブリングするよ')};})()

スクリプト読み込んでも大丈夫？

• FireBug用

var s=document.createElement('script');s.src='hoge.js';document.body.appendChild(s)

• URL用

javascript:(function(){var s=document.createElement('script');s.src='hoge.js';document.body.appendChild(s)})()

ページのチェックボックスを全て選択(無駄にFirefox Only)

• FireBug用

Array.prototype.forEach.call(document.getElementsByTagName('input'),function(e){if(e.type=='checkbox')e.checked=true;});

• URL用

javascript:(function(){Array.prototype.forEach.call(document.getElementsByTagName('input'),function(e){if(e.type=='checkbox')e.checked=true;});})()

ドキュメント内で起こったイベントを監視する(無駄にFirefox + FireBug Only)

• FireBug用

['onclick','onmousemove'].forEach(function(e){document[e]=function(){console.log(e)}});

などなど！可能性は無限大！

ぜひ、思ったことは即 JavaScript で実行しちゃいましょう。そこにブラウザがある限り！