外観の設計(実行ボタンとログ表示エリア)

実行ボタン

実行ボタンの設置はもはや説明が要らないであろうが下記の通り設置した。

<input type="button" style="width:75px;" id="exec" value="Execute" onclick="execute();">

ボタンを押すとexecute関数が実行される仕組みである。execute関数はナンプレの問題を解く関数であり、現在は空の状態である。外観の設計とナンプレの解き方の考え方の説明が完了したら、主にexecute関数およびexecute関数から呼ばれる関数の説明が多数を占めることになると思う。

ログ表示エリア

これは基本的には文字列をImportするコンポーネントと作りは同じである。

<form name="myForm">
<textarea rows="20" cols="50" name="logArea">
</textarea>
</form>

myFormエリアという名前とした。ログ表示のため、各関数からここに文字を表示することになると考えられる。そのため、ここのエリアに文字列を表示するための関数および、ここのエリアの文字列をクリアする関数を用意した。

まずはクリアする関数。何が書かれていようと、強制的に”(空白)に書き換える仕組みとした。

function clearLog(){
	document.myForm.logArea.value = '';
}

次に文字を書き込む関数。引数に与えられた文字列をログに追記する仕組みとした。追記するにあたり、現在書かれている文字列を取得し、その後ろに引数を追加する処理としている。

function setLog(param){
	var str;
	str = document.myForm.logArea.value + param + CR;
    document.myForm.logArea.value = str;
} 

以下にclearLog()およびsetLog()を用いた例を作った。”消す!”ボタンはログの記述エリアに書かれている文字をクリアする処理で、実際にはclearLog()関数を呼んでいる。”書く!”ボタンはログの記述エリアに”書いた!”の文字を書く処理で、実際にはsetLog(‘書いた\n’)を呼んでいる。ナンプレを解くプログラムでは想定していないが、人がログの記述エリアに書いた場合もclearLog()、setLog()は文字を消したり、今まで書かれている文字を残して後ろに文字を書くような設計としている。試してもらいたい。
下記に使われているスクリプトを見るには、ブラウザ機能の「ソースコードを見る」を選択いただけると確認できるかと思う(申し訳ない、未検証です)。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です