JavaScriptを使ってページを彩る。 ■JavaScriptとは・・ JavaScriptとはNetscape社の開発したHTML内に埋め込めるオブジェクト指向スクリプト言語です。 ＣＧＩやＰＨＰなどの言語とは異なりブラウザだけで作動するためＨＴＭＬの知識さえあれば簡単にインタラクティブなページを制作することが可能になります。 現在インターネット上には様々なフリーウエアのJavaScriptが流通しています、自分でプログラムを組むことが出来なくても、それらのフリーウェアをくみ込むことさえ出来ればほぼ思ったとおりのページ制作が可能です。 たとえばどんなスクリプトが流通しているのかざっとあげてみましょう。

■JavaScript小技集−http://www.msu.edu/user/okadakat/jskowaza.htm

複数のページからリンクしている場合でも１つのボタンでリンク前のページに戻れる リンクの部分にマウスを合わせると画面下のステータスバーに説明が表示される ファイルの最終更新年月日を表示（2000年対応・IE対応） 時間帯ごとに違ったメッセージを表示 テキスト入力欄にテロップを流す クイズの答え合わせ テキスト入力欄に時計を表示（午前／午後） テキスト入力欄に時計を表示（２４時間表示） 日付のカウントダウン メッセージを一定時間ごとに切り替える パスワードで他のページに飛ぶ（１） パスワードで他のページに飛ぶ（２） プルダウンメニュー式のリンク（１） プルダウンメニュー式のリンク（２） 自動的に次のページを読み込む 秒数のカウントダウン 誕生日のカウントダウン（１） 誕生日のカウントダウン（２） ２つ以上のプルダウンメニュー式リンク 2002. 3. 2 訪問回数の表示 2002. 3.25 マウスを乗せると画像が変わる リロードするたびに表示内容が変わる クリッカブルマップに連動して説明を表示 2002. 8. 1 年齢表示を自動的に更新する 2003. 1. 1 順番に問題が出てくる３択式テスト 2003. 3.11 今月のカレンダーを小窓で表示 2003. 4.30 一定時間ごとに画像を切り替える 2003. 6.17 画面右端から画像が出てきて減速して止まる 2003. 8. 9 ページ最上部まで減速しながらスクロールして止まる 2003. 8.23

■すえぽんさいと−http://www.suepon.com/jsm/

文字の連続表示 本日の日付を表示する 時刻ごとのメッセージ 時計 各種ダイアログの表示 ラジオボタン値の取得 選択ボックス値の取得 テキストフォーム・スクロール ステータスバー・電光表示 ウインドウの制御 開いたウィンドウを任意の位置に移動する 開いたウィンドウを任意の大きさに変更する 一定時間毎にウィンドウを開いて閉じる マウスアクション パスワード認証 経過(残り)時間表示 ランダムリンク 画像式ランダムリンク1 画像式ランダムリンク2 背景のフェードイン／アウト 画面の自動スクロール クッキーカウンター2002（名前表示機能付） 汎用クッキー関数 ページを表示する度に背景画像を変える ルーレット式ランダムリンク 別ページ間でフォームデータをやりとりする フォームデータの取得時に複数のパラメータを扱う 日付から曜日を調査する 画像式スロットマシン ジュークボックス レイア内のドキュメント変更 レイア内のドキュメント変更２ 窓を開いてリンクの案内を表示 ツリー式メニュー マウスでレイアを移動する レイアを常に同じ位置に表示する 万年カレンダー クリップボードにコピー（Windows+IEのみ有効） 横スクロールを使った改ページ効果 レイアを使ったタブインデックス シンクロするスクロールバー JavaScriptでURLエンコード フォームの入力チェック フォームボタンを押せなくする JavaScriptでプリンタを動かす（印刷する） 徐々に大きくなるタイトル文字列 リンク先を開くウィンドウを一括変更する

■JavaScriptの設置方法

ここでは簡単なJavaScriptの設置方法を例をとって解説して行きます。 下のプログラムは上であげた「すえぽんさいと」の「時計」のスクリプトです。 このスクリプトをページ内に設置すると ↑このようになります。

<script> function clock(){ setTimeout("clock()",1000); datec = new Date(); y = datec.getYear(); M = datec.getMonth()+1; d = datec.getDate(); h = datec.getHours(); m = datec.getMinutes(); s = datec.getSeconds(); if (h < 10) h = "0" + h; if (m < 10) m = "0" + m; if (s < 10) s = "0" + s; if (y < 2000) y += 1900; time = y + "年" + M + "月" + d + "日" + h + "時" + m + "分" + s + "秒"; document.timeform.timetext.value = time; } if(navigator.appName.charAt(0) == "M") document.write("<form name='timeform'>現在の日時：<input size='35' name='timetext'></form>"); else document.write("<form name='timeform'>現在の日時：<input size='28' name='timetext'></form>"); clock(); </script>

この<script>から</script>までがプログラムの本体になりますので、まずは<script>から</script>をコピーします。 次にスクリプトを設置したい場所にマウスでカーソルを持って行きます。 設置したい部分でカーソルを点滅させたら「ＨＴＭＬソース」タブをクリックしてソースを表示させます。 ソース内でカーソルが点滅していますので先ほどコピーしたJavaScriptのプログラムを貼り付けます。 保存して設置完了です。さっそく「プレビュー」画面で確認してみましょう。