サンプルをダウンロードしてください。

1-3.HTMLタグ解説、JavaScript解説

今回の講座は非常に解説する部分が少ないので、HTMLタグ解説とJavaScript解説を同時にやります。 まずHTMLタグ部分ではテキストフィールドtextfield1の作成とtextfield1を空にする関数empty()を 呼び出すボタンの作成をしています。

JavaScriptについて解説します。

<script language="JavaScript">
<!--

function keyput(){
　document.text.textfield1.value+=String.fromCharCode(event.keyCode);
}
function empty(){
　document.text.textfield1.value="";
}

document.onkeydown=keyput;

-->

</script>

まずkeyput()関数内をみてください

document.text.textfield1.value+=String.fromCharCode(event.keyCode);

という記述があります。まずはevent.keyCodeについてですがこれはキーボードが押されたときに その最後に押したアスキーコードを取得するものです。event.keyCode()とするとエラーになるので 注意してください。

次にString.fromCharCode()ですが、これは引数のキーコードで与えられる文字を得る為の関数 です。つまりここではString.fromCharCode(event.keyCode)ですので最後に打ったキーの アスキーコードを文字に変換したものと読み替える事ができます。

つまりさきほどの

document.text.textfield1.value+=String.fromCharCode(event.keyCode);

はテキストフィールドtextfield1に入っている文字列に最後に打ったキーを足してそれを再度 テキストフィールドtextfield1に入れるということです。

empty()関数やテキストフィールド、ボタンなどはすでに学習したのでやりません。
最後に関数内では宣言されておらず、たった一行で

document.onkeydown=keyput;

と記述されている部分が最後にあります。
これはキーボードが押されるとkeyput()関数を呼び出すという処理で、

document.onkeydown=関数名;

と書きます。関数名の後に()をつけると動作しないので気をつけてください。

今回の講座終了です。 これだけで終わるんだったらもう少し詰め込めばよかったですね・・・。