doc drawn up: 2003-12-10 .. 2011-06-06

JavaScript サンプル集


ガイド | リファレンス | DOM リファレンス

表示するアイコン画像とプルダウンオプションの連動

ゲームに応用が効く技。注意点としては、XHTML では、form および img 要素について、「個々の要素を識別するため」には name 属性ではなく id 属性を使わなければならない点(IE 6 と Firefox 2 では既に対応済)である。(※ただし、form でサーバに送信するデータ(name=value の形式)の属性を識別するための name 属性の使用については従来のままなので混同しないこと)

アイコン画像

画像タイルのクリックとフォーム入力の連動

ゲームで地図上の座標をフォームで指定入力しなければならないような場合、地図上の画像タイルを直接クリックして指定できれば、ユーザインタフェース的な快適性に抜群に貢献する。

href="javascript: void(0)" という記述は、JavaScript の動作のためにクリック可能なリンクを用いつつも、実際にはどこかリンク先の別の URI へジャンプするわけでもないというような場合に、フェイク的手段としてよく用いられる手である。

もちろん、このテクニックは、画像タイルに対するリンクでなくとも、単なる文字リンクを用いる場合にも応用が利く技である。

(※ onclick 属性だけでも動作するが、W3C の「アクセス指針技術文書」に従い、onkeypress 属性も併記している)

X=0X=1
Y=0座標(0,0)座標(1,0)
Y=1座標(0,1)座標(1,1)

座標(x, y) = ( , )

ラジオボタンの選択クリックによる Submit ボタンへのジャンプ

location.replace(URI) という JavaScript メソッドを使って、URI にページ内のアンカーポイントを指定することによって、フォームの Submit ボタンへ一気にジャンプする。一番上の「Go to Submit」ボタンがそれだが、この技は、例えばその次にある「東京」から「仙台」に至る多数に連なったラジオボタンから一つだけ選択して Submit ボタンを押すような、縦長のフォームページにおいて、ユーザがページをスクロールダウンする手間を省くというようなユーザインタフェースの快適性の実現に応用できる。

(※ onclick 属性だけでも動作するが、W3C の「アクセス指針技術文書」に従い、onkeypress 属性も併記している)

北海道
青森県
岩手県
宮城県
秋田県
山形県
福島県
茨城県
栃木県
群馬県
埼玉県
千葉県
東京都
神奈川県
新潟県
富山県
石川県
福井県
山梨県
長野県
岐阜県
静岡県
愛知県
三重県
滋賀県
京都府
大阪府
兵庫県
奈良県
和歌山県
鳥取県
島根県
岡山県
広島県
山口県
徳島県
香川県
愛媛県
高知県
福岡県
佐賀県
長崎県
熊本県
大分県
宮崎県
鹿児島県
沖縄県

<Programming>