脳log[20081024] 補助に徹する賢い JavaScriptの使い方

♪ [HTML][javascript] 補助に徹する賢い JavaScriptの使い方

基本はこう。

1. HTMLのみで情報を配置する。
2. CSSで見栄えを整える。
3. スクリプトで効果やアクションを付け加える。

Logicoolのサイトのタブコントロールはキーボードインターフェイスを具えていて偉い、と書いたばかりだが、スクリプトがオフだと、タブの切り替えができないばかりか、タブの中身、肝心の情報が表示されないのはイクナイ。

スクリプトで各タブの表示・非表示を切り替えているのだろうが

• タブの状態のデフォルトは非表示
• スクリプトで一つだけを表示に切り替え

ではなく

• タブの中身はデフォルトで表示
• スクリプトで一つ以外を非表示に切り替え

が、より良いやり方ではないか。(一瞬全ての情報が表示されてすぐに消える、というのは気にすることではないと思っている)

ロジのサイトのこのスクリプトは見栄えをいじるだけなので、HTMLとスクリプトを切り離して、最初に HTMLのみでページを作り、スクリプトは後からアタッチするものだと考えて欲しかった。

スクリプトに依存する要素があって切り離せない場合は、Amazon.co.jpがやっているように

• <noscript>の中に、スクリプトを使わない代替 HTMLを用意する (できなければないで仕方がない)
• <script>の中で、スクリプトを必要とする要素を、スクリプトを使って配置する

方法が賢いと思っている。

 ちょっとだけ関連

• Amazonの「204 NoContent」を使ったクレバーな新おすすめページ(20060407p01)