表示部の作成 仕切り直し…
では、改めて説明していきます。
<form>要素と<input>要素の利用
HTMLには、ページ内から特定のデータを特定のプログラムに送信するために<form>要素が用意されています。 また、<form>要素から送信できる形式のデータとしてテキストがあり、テキストを入力させられる要素も用意されています。 JavaScriptでは、この<form>要素と<input>要素を利用して、<input>要素に表示される内容を操作することができるようになっています。 これを利用してみましょう。
JavaScriptで処理した内容を表示させるためにこれらの要素を利用する場合には、それぞれの要素を特定するための識別子をあらかじめそれぞれのタグの中に記述しておく必要があります。 識別子はname属性もしくはid属性によって定義することができます。 実例を見ましょう。
ソース例： <form action="" name="f1" id="f1"> <input type="text" name="b1" id="b1" size="20"> </form>
例では、<form>要素に「f1」、<input>要素に「b1」という名前が付けられています。 これらの名前は、JavaScriptからこの要素にアクセスするときに利用されます。
上記のようなソースを<body>内に記述したとき、スクリプトの側にはデータ内容を表示させるために以下のような記述を追加します。
例：
document.f1.b1.value=ntime;
これを前掲の関数内にあるコメントのみの行のところに記述します。 この記述は、documentの中にあるf1という名前を持つ<form>要素を探し、さらにその中にあるb1という名前を持つ<input>要素にアクセスして、その内容(value)を変数ntimeにする、という指定になっています。 これで、時間を格納した変数の内容を、<input>要素の内容として表示させることができるようになりました。 以下に実装例を置いておきます。 なお、Netscapeではこの表示部が本文よりも小さな文字で表示されたり、枠内に納まっていなかったりする例があります。 その場合は、<input>要素にスタイルシートなどを導入して、枠を少し広げたりすることで、ある程度対応できると思います。
DHTML的に特定要素の表示内容を変える
DOM(Document Object Model)という概念(私もしっかり説明ができるほど理解できていませんが)に対応しているブラウザでは、それを利用してHTMLで表示されている内容を書き換えることで、時計を動的に表示させることができます。 こちらを利用すると、本文中の内容と同等の表示を行わせることができます。 なお、こちらの手法は、私の手元ではIE5.5以降、Netscape 6以降、Opera7以降で対応していることを確認しています。 それ以外のブラウザでは、動作しない可能性があります。
こちらの方法を利用する場合は、時計を表示させたい位置に文章を定義する要素のどれかを配置しておき、その要素の開始タグにid属性を記述しておきます。 たとえば、以下のようにソースを記述します。
ソース例 <p>現在時刻 <span id="watch1">JavaScriptで表示しています</span></p>
上記では、<span>要素にwatch1というidを与えています。 このid属性は、JavaScriptでアクセスするときに要素を特定する識別子になります。 ちなみに、id属性はCSSで固有の要素を識別する際にも利用できます。
例のようなソースを<body>内に記述したとき、スクリプトの側にはデータ内容を表示させるために以下のような記述を追加します。
例：
document.getElementById("watch1").innerHTML=ntime;
これを前掲の関数内にあるコメントのみの行のところに記述します。 この記述は、id名「watch1」を持つ要素にアクセスし、その内側に含まれるHTMLを変数ntimeの内容にする(変える)という指定になっています。 これにより、特定の要素の中に、スクリプトで取得した時間を書き出すことができます。 以下に実装例を置いておきます(時計部分がわかりやすいように、特にCSSを適用しています)。
現在時刻：JavaScript/DOMを利用して表示しています
なお、こちらの方法をとる場合は、DOMに対応していないブラウザでエラーが起きないように、この表示を指定する部分か、もしくはスクリプトを起動する部分で「if (document.getElementById){処理内容}」という形で対応していないブラウザではこの処理を行わないように指定するほうが無難です。
仕上げ
これでスクリプトの動作に必要な部分は揃いました。 後は、最後の仕上げです。 今回のスクリプトは、関数で定義してあります。 関数で定義された内容は、自動的に処理されることはありません。 ですので、始めに関数の処理を呼び出す仕掛けが必要になります。 これを記述しないと、関数の処理は絶対に起動されません。 一度関数を呼び出せば、後は関数自体が再帰してくれるので、関数を呼び出すのは1回で十分です。 ここでは、ページロードされたときに自動的にスクリプトが起動するように、<body>要素の開始タグに「onLoad」のイベントハンドラを記述します。
例： <body onLoad="clok()">
これを記述すれば、完成です。
上記の2パターンの時計表示をするページのテンプレートは、別ページにそれぞれまとめておきます。 すっきりとまとまったソースを参照したい方はそちらへどうぞ。