HTMLにシンプルなJavaScript編集・実行環境を埋め込むスニペット

jsrunner.html

<div id="jsrunner">
<textarea id="src" rows="8" style="width:100%;" onkeydown="
    var evt = event;
    if(evt.keyCode === 9){
        evt.preventDefault();
        var elm = evt.target;
        var val = elm.value;
        var pos = elm.selectionStart;
        elm.value = val.substr(0, pos) + '\t' + val.substr(pos, val.length);
        elm.setSelectionRange(pos + 1, pos + 1);
    }
">
now = new Date();
for(var i = 0; i < 200000000; i++){}
p(new Date() - now + 'ms');

/*
var name = window.prompt("hi, what's your name?");
p("hello, " + name + ". nice to meet you!");

var old = window.prompt("and, how old are you?") > 20 ? "adult":"young";
p("you are " + old);

undefined_variable;
*/
</textarea>
<div style="margin:1em 0;">
<input type="submit" value="Run" onclick="
    document.getElementById('stdout').innerHTML = '';
    document.getElementById('stderr').innerHTML = '';
    try {
        var p = 'function p(s){'
              + ' document.getElementById(\'stdout\').innerHTML += s+\'<br>\''
              + '}'
              + '\n';
        new Function(p + document.getElementById('src').value)();
    }catch(e){
        document.getElementById('stderr').innerHTML = e;
    }
">
<input type="submit" value="Clear" onclick="
    document.getElementById('stdout').innerHTML = '';
    document.getElementById('stderr').innerHTML = '';
">
</div>
<div id="stdout" style="border:1px solid silver;background:#f5f5f5;padding:0.5em;"></div>
<div id="stderr" style="color:red;padding:0.5em;"></div>
</div>

補足

テストコードはMac mini（mid 2011）のSafari6にて200000000回のループで計測。1000ms程度で実行完了。