Webデザイン11回目

JavaScriptでページを操作　デジタル時計の制作

JavaScriptを使って、時間を取得し、ホームページで表示する。更に、DOMという技術を使ってデジタル時計を作る。

日付情報を取り出す。

次のファイルをダウンロードし、ブラウザで開くと現在の日時が表示される。この日時はコンピュータのカレンダーから取得したもので、表示される時間はブラウザを更新するまで変わらない。

日付の情報の扱い方

このファイルの中で日時情報を扱っている部分を示す。

d = new Date();       // 日付オブジェクトの作成
Y = d.getFullYear();  // 4桁の西暦年を取得
M = d.getMonth() + 1; // 月数を取得
D = d.getDate();      // 日にちを取得
Yo = d.getDay();      // 曜日を取得
H = d.getHours();     // 時数を取得
mm = d.getMinutes();  // 分数を取得

オブジェクトは対象物(ここでは日時)の性質(ここでは日時)とその性質の情報を操作する関数の両方を持つ対象物の実体である。この例ではdが日時の情報とそれを操作する関数を持つオブジェクトである。

関数を利用するときは次のように記す。オブジェクトの機能を利用するといった感じである。

オブジェクト名.関数名()

デジタル時計のように表示を自動的に更新する

JavaScriptのプログラムはページを読み込むときや、関数を呼び出したときに実行されるため、先ほどの例では人間がブラウザを更新するまで表示は変わらない。

デジタル時計の様に一定間隔で表示を変更するには関数を一定間隔で実行するように指示できればよい。JavaScriptでは一定間隔で指定した関数を実行させるためのsetIntervel()関数がある。この関数の機能をインターバルタイマーという。

次の例題をダウンロードし、ブラウザで表示するとフォーム内に表示した時間が進んでいくはずである。

dclock1.html(331)

setInterval()関数の使い方

例題のプログラムではsetInterval()関数は次に様に記されている。

t = setInterval("DspClk()", 500);

関数の引数は一定間隔で実行したい関数の名前と実行間隔をミリ秒単位で指定する。500は500ミリ秒=0.5秒である。

変数tはタイマーのIDを記憶する。

DOMを使う

先ほどの例題ではフォームに時間を表示しているが、フォームは入力用の部品なので本来の用途とは異なる使い方をしているが、フォーム以外の部分を動的に変更するのがより自然である。

これを実現するにはDOM(Document Object Model)という技術を使う。

次の例題はDOMを使ってHTML要素の値を変更している。

dclock3.html(343)

この例題は動的に変更させたい要素にid属性を指定し、getElementById?()関数を使ってその要素のオブジェクトを取得し、操作している。

// HTML要素のid属性からオブジェクトを取得
DC = document.getElementById('pt');
// オブジェクトの値を変更する
DC.firstChild.nodeValue = Hours + "時" + Minutes + "分" + Seconds +"秒";
<!-- id属性を設定-->
<p class="p1" id="pt">What time is it now?</p>

演習　 デジタル時計の制作

次のファイルをダウンロードし、空欄を埋めて動作するプログラム(デジタル時計)にしなさい。完成したらindex.htmlにこのファイルへのリンクを追加し、ファイルをサーバへアップロードする。

dclock_sec.html(444) 【参考　10秒間カウンタ】

dclock_ex.html(374) 演習用ファイル

count.zip(321) 数字の画像ファイル

[WebデザインH19]

Webデザイン11回目