JavaScript Console

JavaScript コンソール ホーム目次

実行環境の詳細について

JavaScript

　JavaScript は、プログラム言語です。ここでは、JavaScript を利用してプログラムの記述、実行ができます。

実行環境

　このサイトでは、HTML5 の表示と JavaScript が動作するブラウザが必要です。解説と実行環境をサイドバイサイドで表示するには、ディスプレイの幅が1280ピクセル以上表示できることが望ましいです。また、全てのブラウザでの動作を保障していません。

動作原理

　プログラムは文字列として保存され、プログラムの実行とは、プログラム文字列を JavaScript の関数である eval を利用して評価し、結果を得ることを指しています。
　プログラムの実行結果を表示するエリアとして、テキストコンソール(table)とグラフィックエリア(Canvas)を用意しました。この２つのエリアに表示することでプログラムの実行結果を得ます。
　テキストコンソールへの出力には、JavaScript の標準的な関数である、console.log を利用します。プログラム実行時に、console.log を内部関数である jsclog に置き換えて、ログ出力先をブラウザ標準出力先からテキストコンソールに変更しています。
　グラフィックの表示には、テキストコンソールと同じエリアに、jsccanvas と ID 付した Canvas (640x400 pixel)を利用します。また、三次元グラフィックスの表示用に jscthreed と ID 付けしたタグを用意しました。
　コンソールと称するには、プログラム実行時の入力もコンソールからできるようにしたかったのですが、まだ、実現出来てません。プログラム実行時のパラメータ入力には、JavaScript の標準的な関数である window.prompt 等を利用します。この関数を用いると、ダイアログが表示され、パラメータの入力が促されます。

単体での実行

　本環境で作成したプログラムを、単体で動作させる方法について述べます。

コンソール出力プログラム

　本環境を利用しない場合、コンソールの出力はブラウザのコンソールへの出力となります。

二次元グラフィックプログラム

　二次元グラフィックの出力先である canvas 要素を用意することで、グラフィック表示が可能となります。

三次元グラフィックプログラム

　三次元グラフィックプログラムは、threejs に依存しているので、three.js のサイトを参照して下さい。

単体での組み込み例

　以下のような、canvas 要素(二次元グラフィックを利用しない場合には不要)が含まれている HTML を用意し、その中に、JavaScript プログラムをコピーします。三次元グラフィックプログラム以外は、基本的には単体で動作するはずです。


<html>
<body>
<div id="jscscreen" tabIndex="0">
<canvas id="jsccanvas" width="640px" height="400px" style="background:black;">
</canvas>
</div>
<script language="javascript">
ＪＡＶＡＳＣＲＩＰＴのプログラム
</script>
</body>
</html>

　上述した簡便な方法では、JavaScript 実行時に全てのプログラムがブラウザに読み込まれておらずエラーになる場合もあります。その様な場合には、JavaScript のプログラムを初期呼び出し関数とし、その関数を以下の様な方法で呼び出すようにします。


<script language="javascript">
<!--
window.onload = function() { 初期呼び出し関数名(); }
-->
</script>

または、以下の様にします。


<body onload="初期呼び出し関数名()">

環境実現のための JavaScript プログラム

　本環境を実現するために、以下の変数、関数 JavaScript で利用しています。本環境で JavaScript のプログラムを作成する際には、以下の jscで始まる変数や関数には注意してください。

jsctd	変数	テキストコンソールの出力文字を保存
jsccursormaxx	変数	テキストコンソールの最大幅
jsccursormaxy	変数	テキストコンソールの最大高
jsccursorx	変数	テキストコンソールのカーソル位置 x
jsccursory	変数	テキストコンソールのカーソル位置 y
jscsetintervalid	変数	setInterval の ID 保存
jscrequestanimationid	変数	requestAnimationFrame の ID 保存
jscprogram	変数	プログラム保存用
jscinit	関数	実行環境初期化関数
jscrun	関数	プログラムの実行
jsclist	関数	プログラムの表示
jscedit	関数	プログラム編集領域の表示制御
jsccls	関数	表示エリア消去、ループ停止
jscscrollup	関数	テキストコンソールのスクロールアップ
jscbackspace	関数	テキストコンソールでのバックスペースの実現
jscenter	関数	テキストコンソールでの改行の実現
jscfiles	関数	Web storage 内プログラムの表示
jscsave	関数	Web storage へのプログラムの保存
jscload	関数	Web storage からプログラムの読込
jsckill	関数	Web storage からプログラムの削除
jsccommand	関数	テキストコンソールでのコマンド処理
jscputchar	関数	テキストコンソールへの１文字出力
jscputs	関数	テキストコンソールへの文字列出力
jsconkey	関数	テキストコンソールでのキーボード入力処理
jsclog	関数	テキストコンソールへのログ出力
jscprompt	関数	テキストコンソールからの入力(未実現)
jschtmlspecialchars	関数	HTML特殊文字変換処理
jscbtnrun	関数	プログラムコピー＆実行ボタン処理
jscbtnclsrun	関数	プログラムコピー＆画面消去＆実行ボタン処理

ボタンについて

　Cls ボタンを押すと、プログラム実行エリアに表示されているテキスト・グラフィックの実行結果が消去されます。
また、three.js で追加したノードを削除し、以下のように保存されたアニメーション ID をキャンセルし、アニメーションを停止します。

　・ jscsetintervalid = setInterval
　・ jscrequestanimationid = requestAnimationFrame

三次元グラフィックスについて

　三次元グラフィックスの表示には、https://threejs.org/ で提供されている、three.min.js, TrackballControls.js, OrthographicTrackballControls.js ライブラリを使用しているものがあります。これらのライブラリの著作権やライセンスについては、ご提供元を参照してください。

既知の動作不具合

　以下の不具合が存在します。

・テキストコンソールの日本語出力には対応していません。
・３次元表示用のプログラムを実行すると、その度に表示領域が追加されます。追加された領域は、Cls ボタンを押すことで消去されます。
・TrackballControls, OrthographicTrackballControls ライブラリを利用した後では、テキストコンソールをクリックしても、テキストコンソールにフォーカスが当たりません。

目次へ