ページ移動用のJavaScriptは…
先ほどのソース中で、ページ移動用のJavaScriptに当たる部分は、以下の「location.href=value;」の部分です。
2行目にあるselect要素のonChange属性の値がJavaScriptです。
記述量は、わずか20文字。
たったこれだけで、プルダウンメニューのページ移動機能が実現できます。
たったこれだけで移動できる説明
なぜこれだけで移動できるのかを、簡単に説明します。
■location.href
「 location.href 」(locationオブジェクトのhrefプロパティ)には、現在アクセスしてるページ(URL)が保持されています。 試しにこの値をJavaScriptで表示させてみると、現在のURLが格納されていることがわかります。
この「location.href」に別のURLを代入すれば、(ブラウザの表示を)そのURLに移動させることができます。
■value
「location.href」に代入する内容として、ここでは「value」とだけしか記述していません。
JavaScriptの関数を別途用意する場合だと、ただ「value」とだけ記述しても(何のvalueなのかが分からないため)使えません。 document.formname.elements['selectname'].options[num].value …のような感じで、「何の」valueを参照したいのかを記述する必要があります。
※ページ移動用スクリプトを関数にする場合は、value(URL)を引数で受け取るようにするのが楽でしょう。
しかし、ここではプルダウンメニューを作っているHTML(select要素)の中でJavaScriptを記述しているので、 ただ「value」と書くだけで、選択されているメニュー項目(option要素)のvalue属性の値を示すことができます。
■location.href = value;
「 = 」記号は、JavaScriptでは「代入」の意味です。右辺の値を左辺に代入します。 つまり、「 location.href = value; 」は、「 value を location.href に代入する 」という意味です。
このようにして、わずか20文字でプルダウンメニューのページ移動機能が実現できるわけです。
さて、最後に、プルダウンメニューのメニュー項目に背景色や文字色を付けて装飾してみましょう。