初心者のためのホームページ作り 第59号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

プレーンテキスト版バックナンバー

今週<第59号>マガジンのおさらい

                   毎週金曜日配信 What's New 2003/7/18
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
 今週の課題 ■ JavaScript講座 プルダウンメニューの作成

JavaScript講座 プルダウンメニュー

今回の講座では、いくつかのプルダウンメニューを作成します。簡単なものから、非常に凝った階層式メニューを含めて JavaScriptを作成します。

スクリプト、および HTML構文は今週のメールマガジン「第59号」を参照してください。ここでは補足説明のみとなります。

プルダウンメニュー その1

まず最初は、最も簡単なプルダウンメニューを作成します。

Element オブジェクトの selectedIndex プロパティを利用してメニュー項目が選択された値(URL)から、指定されたページにリンクさせるスクリプトです。

関数を設定し、選択された値を documentオブジェクトの location プロパティによってリンク先に移動します。

利用するオブジェクトとそのプロパティ

プルダウンメニューを作成するために、以下のオブジェクトとそのプロパティ(メソッドを含む)を利用済ます。

オブジェクトプロパティ 機能
Element selectedIndex選択されたメニュー項目
options select要素で示されるメニュー項目を参照
value(メソッド) 入力フィールドの value属性の値を参照
documentlocation 移動先の URLの設定

プルダウンメニュー その1 (詳しい構文は今週のメールマガジン「第59号」をお読みください。)

プルダウンメニュー その2

次に、先ほどのメニューにボタンをつけて、ボタンがクリックされたらリンクするという、イベントを利用します。

イベント属性は、onclick、または、onkeypress を利用します。無論、両方を記述しても差し支えありません。

今回は、特にスクリプトをヘッダに記述しません。フォームを利用して、イベント属性の中でスクリプトを記述し、ボタンが押されたときに動作させます。

プルダウンメニュー その2

画像を変えるプルダウンメニュー

今度は同じプルダウンメニューから画像を買えて表示させるスクリプトです。

やはり、selectedIndex プロパティを利用しますが、その際に、関数は if構文によって条件分岐し、選択された項目によって表示させる画像を読み込んで表示します。

ボタンで示されるイベント属性 onclickの属性値に関数を呼び出します。以前にも説明したとおり、スクリプトで示されている関数は、それだけでは何もしません。ページに読み込ませるだけでは意味がないわけです。関数は、そのほとんどがイベント属性によって呼び出され実行します。

画像を変えるプルダウンメニュー

階層ポップアップメニュー

非常に複雑なスクリプトとスタイルシートの組み合わせ(俗にいう Dynamic-HTML)によって、階層ポップアップメニューを作成します。スクリプトは配列と関数によって組み合わされ、イベントによって実行させます。

なお、スクリプト、スタイルシート、および画像を当サイト内からダウンロードできますので、ご利用ください。ダウンロード先はこちらの 講座教材 になります。

HTMLで示すリンク先や、利用する画像などは自由に改造してください。ただし、スタイルシートの改造は慎重にお願いします。特に div要素に関連した変更を加えた場合、スクリプトとの連動がおかしくなる場合があります。

JavaScript文書では、項目別に解説を示していますので、参考になると思います。当方の検証では、視覚系ブラウザのほとんどで動作します。

階層ポップアップメニュー (HTML構文は今週のメールマガジン「第59号」をお読みください。)

JavaScriptのリンクメニューにおける注意点

リンクメニューを示すスクリプトを利用する場合、ユーザ環境に配慮してください。

ユーザのブラウザがすべて JavaScriptに対応しているわけではありません。非視覚系ブラウザではもちろん、ユーザによってはスクリプトを「オフ」にしていることも少なくありません。

そういったユーザのために、テキストによるリンクを併記するように心がけましょう。JavaScriptを使うための最低限のマナーを守ることも、ページ作りには必要なことです。

(ただし、今回のサンプルページでは、あくまでサンプルとして掲載している関係で、テキストによるリンクは併記していません。ご了承ください、)



Copyright(C) 2002-2003 ばんばん banban@scollabo.com