前のページメニュー次のページ

プルダウンメニューでページ内の表示を変える

拙著「逆引きJavaScript」にもこのバリエーションがいくつか紹介されていますし、当サイトのトップページにも使われています。プルダウンメニューで選んだ項目に従ってJavaScriptでスタイルシートのdisplay属性を変えることによって、ページ内に表示されるものを切り替えます。Ajaxでも同じようなことができますが、ここでの例のようにデータが小さいものはHTML上にすべて置いて、CSSで表示/非表示を切り替えるようにする方がスクリプト的にも簡単で、しかも動作が速くなります。

ここではdivタグで囲まれた3つの部分にそれぞれ「item1」、「item2」、「item3」というIDをつけ、ページのhead部分ですべてのIDについてスタイルシートのdisplay属性の初期値を「none」(非表示)にします。プルダウンメニューで呼び出されたshowthis関数の引数でIDを指定したオブジェクトのdisplay属性を「block」(ブロック表示)に変えることにより、表示されます。表示/非表示にするものはこの例のようにdivタグで囲まれたものだけに限らず、他のタグ(pやform、imgなど)にもそのまま応用できます。タグによっては「block」(ブロック表示)ではなく「inline」(インライン表示)にしたほうがいい場合もあります。

(使用例)

基礎からのJavaScript私の書いたJavaScript入門書です。JavaScriptは非常に簡単なスクリプト言語です。私自身、勉強し始めて3週間目で「JavaScript小技集」を作り上げました。この本の最初の2、3章を読んだだけでもアイデアしだいで様々な自作スクリプトが作れるようになります。自分で勉強してみたくなった方はぜひ買ってください。

第3版では記述の古い部分を書き直し、新たにAjaxやW3C DOMに関する章や節を加えました。2006年6月発売。

逆引きJavaScript機能別に分類された、逆引き実用スクリプト集です。JavaScriptプログラミングに関する知識がまったくない人でも自分のホームページにそのまま使えるように、第1章に最低限必要なJavaScript/DHTMLの解説があり、またそれぞれのスクリプトに詳しい使い方が付いています。

DHTML、W3C DOMやイベントオブジェクト、クッキー、クロスブラウザープログラミングのためのテクニックなど「基礎からのJavaScript」で扱っていない中上級者向けのプログラミング解説(テクニカル・ノート)も随所に盛り込んであり、JavaScriptの勉強にも役立ちます。

JavaScript 第5版 JavaScriptの基本を理解した上でさらに理解を深めたいという上級者向けの解説書。DOMスクリプティング、Ajax、オブジェクト指向プログラミングなど最近のJavaScriptの動向をすべて盛り込んで改訂された第5版。JavaScriptのオブジェクト、関数、配列、クラス、プロトタイプによる継承、クロージャを使った変数のプライベート化テクニック、名前空間、モジュールなど大規模プロジェクトに必要な概念が詳細に解説されています。2007年発行(原書は2006年発行)。