どうも、代数の試験でスランプの餌食となったC+Cです。
進級は問題なくできるので、来年度もよろしくお願いします…。
さて、一ヶ月課題を1月から施行したのですが…
少し難しすぎたのでしょうかねえ… まさかの提出者ZEROという結果になりました。(ToT)
というわけで、今月分の課題の概要及び解法を解説したいと思います。
課題内容
�‐絏爾貌鵑弔離謄�ストエリアA,B・その間に二つのボタンa,bを設置する。
このページに以下のような動きをするスクリプトを設定すること。
�▲謄�ストエリアAにテキストを入力する。
��Aへの入力後に、ボタンaをクリックするとテキストエリアBにAの内容をタイプライター
風に表示する。
�ぅ椒織�aを押して再生中に、ボタンbを押すと、B内のすべての文字を消去し、タイプラ
イター風表示を停止する。
�ズ得乎罎蓮�Aに書き込めないようにすること。（停止したら書き込めるようにする。）
�δ篁濔�態でAの内容を更新したら、新たに更新された内容で��が実行される。
�Л◆銑Δ瞭睛討浪寝鷦孫圓靴討癲�動作する内容自体は変わらないこと。
また、余裕があれば「一時停止ボタンを設置し、それまで表示した文字列までを表示しっぱなしにしてタイプライト動作を止め、再生ボタンを再び押せば再びすでに表示した続きの場所から表示を開始する」という内容も実装してみるとなお良い。また、文字列を更新した時の動作は�Δ暴爐困襪海函�
以上の課題を作成するという課題を出しました。作成に用いるコーディング言語は特に指定していませんが、JavaScriptを使用するのが一般的です。
今回の課題のポイントは
�．謄�ストエリアが持つ変数の値の操作。
��動作に間隔を持たせること
�Ｊ竸瑤涼佑砲茲辰読充┐気擦詈源�の分量を調節する。
の三つです。
それではコードを見てもらいましょう
<html>
<head>
<script language="JavaScript">
<!--
var str;
var i=0;
var typing=0;
function DispTypingStr(){
var strtmp;
str=document.f1.f2.value;
if(i<=str.length){
strtmp=str.substring(0,i)+"_";
document.f1.f3.value=strtmp;
i++;
}else{
i=0;
}
}
function startpref(){
if(!typing){
showing=setInterval('DispTypingStr()',100);
typing=1;
}
document.f1.f2.readOnly=true;
}
function finishproc(){
document.f1.f3.value='';
i=0;
typing=0;
document.f1.f2.readOnly=false;
clearInterval(showing);
}
//-->
</script>
</head>
<body>
<form name="f1">
↓ここにテキストを入力してください。<br>
<textarea name="f2" rows="10" cols="50"></textarea>
<br>
<input type="button" onClick='startpref()' value="再生">
<input type="button" onClick='clearInterval(showing);typing=0;document.f1.f2.readOnly=false;' value="一時停止">
<input type="button" onClick='finishproc()' value="初期化"><br>
上のエリアに入力したテキストを以下にタイプライター風に表示します。<br>
<textarea name="f3" rows="10" cols="50"></textarea>
</form>
</body>
</html>
まずは上の
DispTypingStr関数なのですがこの関数で、表示させる文字の分量を決定し、テキストエリアに表示させるようにします。また、表示している文字の長さを表す変数iが文字の最大長を超えてしまったらiを0にもどして何も表示していない状態に戻します。この関数を一度呼び出すと、表示させる文字列の分量が一つ増えるのでこの関数を繰り返し呼び出すことでタイプライター風に一文字づつ文字が表示され続けているように見えます。ちなみに文字列の最後には
_を表示するようにしております。
そして二つ目のstartpref関数は100ミリセカンド=0.1秒ごとにDispTypingStr関数を呼び出す関数となっております。
また、このときDispTypingStr関数の関数連続実行ハンドルを変数showingに格納しているため、このDispTypingStr関数の実行の操作をそのハンドルによってすることが可能です。
また、DispTypingStr関数を実行しているということは、タイプライター風の表示の再生まっただ中ということなのでその間に上のテキストボックスに書き込みが出きないように
document.f1.f2.readOnly=true;
という記述を使用して、テキストボックスをリードオンリーに設定します。
finishproc関数はテキストボックスのタイプライター風表示を停止して初期化する関数です。
関数連続実行ハンドルはshowingに格納されているためそれを使用してclearIntervalより関数連続実行の停止が可能です。
また、出力している文字数を格納している変数iも0に初期化し、テキストボックスの持つ変数の値(文字列)も空にします。
これらの関数を下にある三つのボタンで呼び出してJavaScriptのプログラムを実行します。
まず、再生する場合はstartproc関数を一度呼び出すだけでOKです。
停止する際には、finishproc関数を一度呼び出すだけでOKです。
また、応用課題とした一時停止ボタンは
clearInterval(showing);document.f1.f2.readOnly=false;
という具合に連続実行のクリア・リードオンリー解除を同時に行うだけで実はできてしまうんです。
このような具合に今回出した課題であるタイプライター風表示のプログラムは作ることが出来ます。
実際このスクリプトを動かしているページを転送しておきましたので試してみてください。
ここ
今月は頑張ってね！ かたちょ君！！