TOP サイトマップ タイピングゲームを作る講座 ゲーム DIABLO
チャット BBS リンク集 顔文字 逆アクセスランキング

JavaScriptでタイピングゲームを作ろう講座
〜HTMLタグの説明〜

まずはサンプルをダウンロードしてください。
これ以降の講座はサンプルを元に解説していきます。

1-1.全体の流れ

まずはJavaScriptタイピングのHTMLファイルの全体の流れを見ていきます。
HTMLファイルの構造としては

<html>
<head>
<title>HTMLファイルのタイトル</title>
<script language="JavaScript">
スクリプトの記述
</script>
</head>
<body>
テキストフィールドなどの表示
</body>
</html>

という流れになります。ここでHTMLタグをコメントとして扱う事ができる<!--〜-->を
<script>
<!--
スクリプトの記述
-->
</script>

のようにスクリプト記述部分がコメントとなるようにしておきます。 これはJavaScriptを有効にしてない人がページを開くとソースを開いてしまう事を避ける為です。 JavaScriptを有効にしてあればJavaScriptは動作します。

<noscript>〜</noscript>を使うとJavaScriptを有効にしてない場合に その中身が実行されます。

1-2.実際のタグを見る

ここではHPを作るうえで使うHTMLタグについての詳細はやりませんが、実際に使用している ものをいくつか紹介します。

まずサンプルファイルの一行目にかかれている<meta>についてですが、 これはこれから記述するドキュメントHTMLのいろいろな設定を指定するものです。

JavaScriptを記述しHTMLファイルとして開くと文字化けを起こすことがよくあるので、 ここでコードの指定などを行っています。 理解しなくてもそのまま記述で大丈夫です。 通常では<head>〜</head>内に記述します。

次に<body>〜</body>内を見ていきます。
最初の方は希望の街J_TOWN（わたしのHP）の上部のリンク部分を記述した部分ですので、 この部分は削除してかまいません。

その次にタイトルやテキストフィールド、ボタンを表示する部分の記述があります。
ここではテキストフィールドとボタンの作り方について解説します。

まずはテキストフィールドの作り方です。
まずテキストフィールどやボタンを作成する場合<form>〜</form>内に 記述しなければなりません。 そのフォームには後で操作する為に名前をつけます。

<form name="名前">

これでテキストフィールドやボタンの記述ができるようになるので、その中にテキストフィールド、 ボタンの記述をします。

<input type="text"name="input"size="10">

テキスト内にタイプ可能：

テキスト内にタイプ不可能：

上のようにするとテキストフィールドが作成できます。 テキストフィールドを後で操作する為に、テキストフィールドに名前をつけておきます。 名前はname="名前"で指定できます。 テキストフィールドの長さを調整したい場合はsize="長さ"の部分の数値を変更すればできます。

これでテキストフィールドの作成ができました。オプション指定としてonFocus="this.blur()"を 指定するとマウスでテキストフィールド内をクリックしてテキストの中身を書き換えることが できなくなります。
なので、問題を出力するテキストフィールドや結果を出力するテキストフィールドはこのオプション 指定をしておくことをお勧めします。

もうひとつ重要なオプションがありそれはvalue="10"などと使います。
これはテキストフィールドに初期値として与えるデータを指定することができます。

さて次はボタンの作り方ですが、これは簡単です。
さきほどのテキストフィールドの作り方で
type="text"としていたところをtype="button"と変更するだけです。
実際には

<input type="button"value="クリックするとエラー発生"onClick="start()">

テキストフィールドとオプション指定で違うところはvalue="文字列"とするとボタンの上に その文字列が表示されることになります。
あとはonClick="start()"の部分ですがこれはボタンが押されたときにJavaScriptで定義されている start()という関数を呼び出すという処理です。
実際にボタンを押して試してみてください。
JavaScriptでstart()という関数を記述してないのでボタンを押すとエラーが発生します。

非常にさらっとやりましたがHTMLについてはこのぐらいで十分だと思います。
次の講座ではそれぞれの関数について述べていきます。お楽しみに

JavaScriptについて 講座のTOPへ戻る 使用している関数の概要