JavaScriptをブラウザだけで作成＆テスト出来る環境を作った(JS.nanobench)

<div id="scratchPad">
	<div id="title">JS.nanoBench</div>
 
	<h3>プログラム:</h3>
	<textarea id="txtSrc">console.log( 2 * 3.14 );</textarea>
	<br />
	<input type="submit" id="btnRun"   value="実行"       onclick="runScript();">
	<input type="button" id="btnClear" value="出力クリア" onclick="clearOutput();">
	<br />
 
	<h3>出力結果:</h3>
	<div id="txtOutput"></div>
 
	<h3>エラー:</h3>
	<div id="txtError"></div>
</div>

// コンソール出力を乗っ取る
console.log = function(msg){
	document.getElementById('txtOutput').innerHTML += msg + '<br />';
}
 
// スクリプトの実行
var runScript = function() {
	// 出力結果を一旦クリア
	clearOutput();
 
	// 入力されたテキストを実行する
	try {
		var srcStr = document.getElementById( 'txtSrc' ).value;
		eval( srcStr );
		document.getElementById('txtError').innerHTML = 'エラーは有りません';
	}catch( e ){
		document.getElementById('txtError').innerHTML = e;
	}
};
 
// 出力エリアのクリア
var clearOutput = function() {
	document.getElementById( 'txtError'  ).innerHTML = '';
	document.getElementById( 'txtOutput' ).innerHTML = '';
};

#scratchPad {
	border:1px solid #ccc;
	padding:10px;
	width:600px;
}
 
#scratchPad #title {
	text-align:center;
	color:#666;
	background-color:#e0e0f0;
	border-bottom:1px solid #aaf;
	width:100%;
	padding:10px;
	margin: -10px -10px 0 -10px;
}
 
#scratchPad h3 {
	font-weight:normal;
	margin-bottom:2px;
}
 
#txtSrc {
	width:98%;
	height:10em;
}
#btnRun, #btnClear {
	padding:10px 20px;
}
 
#txtOutput, #txtError {
	border:1px solid #eee;
	padding:10px;
}
#txtOutput {
	background-color: #eef;
	border:1px solid  #ccf;
	font-family: "MS ゴシック";
}
#txtError {
	background-color: #fee;
	border:1px solid  #fcc;
}