JavaScriptコンソールを作ってみた
新年一発目のエントリがこれかよ、っていう感じが非常にしますが。
とある事情で書いてみたので、もしかしたらどこかの誰かが使うかもしれないと思いつつ上げてみます。
少々適当なものですが、以下のコードをコピペしてHTMLとして保存して、ブラウザで開いてみて下さいまし。でもって、テキストエリアにJavaScriptのコードを入力してexecuteボタンをポチっとするのみです。
特徴としては、print関数を定義していまして、引数(可変個与えられます)で渡した値をテキストエリアの上部に表示できます。
それから、シンタックスエラーの場合にはエラー行とエラー内容がalertで出るようになってます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Matsushita JavaScript Console</title> <script type="text/javascript"> function execute() { var src = document.getElementById('inputarea').value; var outputarea =document.getElementById('outputarea'); var print = function() { var i; var out = []; for (i = 0; i < arguments.length; i++) { out.push(arguments[i]); } if (outputarea.innerHTML) { outputarea.innerHTML += '<br />' + out.join('<br />'); } else { outputarea.innerHTML = out.join('<br />'); } }; var srcArray; var j; if (!src) { return; } outputarea.innerHTML = ''; srcArray = src.split('\n'); try { for (j = 0; j < srcArray.length; j++) { eval(srcArray[j]); } } catch(e) { alert('An error has occurred in line ' + String(j + 1) + '\n' + e); } }; </script> </head> <body> <div id="outputarea"></div> <div> <input type="button" value="execute" onclick="execute();" /> </div> <textarea id="inputarea" style="width:600px;height:400px;"></textarea/> </body> </html>
追記。
とっくの昔にどこかで誰かが作ってそうですよね。
ですがまあ、書いた方が早いんじゃ?っていうレベルだったので。
追記の追記。
エラー行検知のために行単位でevalしてますが、for文、if文、関数が記述しにくすぎるのでダメだなーと思った今日この頃。
両立は面倒だなー。