技 巧 鍵 盤 ─ KeyNavi：キーボードを活用してホームページを快適に─    
■ キー割当表示[Shift-H]        
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ [1] JavaScriptで注意すること ・サイトマップ [Shift-S]

■ JavaScriptで注意すること

このページでは 他の言語と比較してJavaScriptが変わっている点、特に注意する点について書きます。

JavaScriptは for,while,if,switch文が使える、「/*...*/」や 「//...」 でコメントできるなど 他の言語との共通点が多いものの同じではありません。

オブジェクトの上書きに注意
一度定義(設定)されたオブジェクトは 後から同名のオブジェクトの設定があれば 型の相違に関わらず上書きされます。

JavaScriptでは別のモジュールを読み込む時に 名前空間を別にすることはできません。 それらで使われている変数名はそのままJavaScriptの大域的な名前空間 (JavaScript的にはselfオブジェクト)に属します。

開発に携わる人数が複数の場合、第三者のスクリプトを使う場合は 既存のオブジェクトを誤って上書きしてしまわないよう 変数や関数の命名規則を決めておきましょう。

KeyNaviで作成するオブジェクトは 必ず「KL_」(KL=KeynaviLibraryの頭文字) で始めて名前の重複を避けています。

逆に この簡単に上書きできるという性質を使って 既存の関数の動作を変えることもできます。 これにより書き換えられた関数を参照している コード(既存モジュール含む)の動作をカスタマイズできます。

status出力をリダイレクト：kl_status(s,opt) では ステータスバーに文字列を出力する関数「kl_status(s,opt)」 を再定義し 出力先をページの中心に表示する半透明レイヤーにしています。

この利用法は C++的な見方をすると仮想関数に近い意味合いがあります。 派生クラスを作らなくても (そもそも現在のJavaScriptにはその仕組みはありませんが...) 利用者側で既存モジュールの動作変更が簡単にできるので便利です。

KeyNaviのカスタマイズでも 大元のファイル「keynavi_ja.js」は そのままで 既存関数の再定義により行うのをお勧めします。 バージョンUp、コード管理が容易になります。

イベントハンドラも上書きに注意
マウスクリックやキー入力など ページ表示中に何かのイベントが 起こったときに 指定した動作をさせることができます。

これは「<body onclick="処理内容">」とするか JavaScriptで 「document.onclick=ハンドラ関数」などとすればOKです。

ここで別のJavaScriptモジュールでもクリックのハンドラを追加するとします。 うっかり「document.onclick=ハンドラ関数」とすると 前の指定を上書きしてしまいます。 その結果、クリック時には最後に追加されたハンドラしか動作しません。

この問題を避けるには 既定のハンドラ関数を保持して 旧いもの、追加するもの両方が実行されるよう工夫します。

「kl_addhandler()/delhandler()」により実現されています。
イベントハンドラの登録：kl_addhandler()

JavaScript実行のタイミング
JavaScriptの実行は その記述がページ内 or 外部ファイルにあるか否かに 関わらず ページの読み込みに合わせて実行されます。 例えばスクリプト中に「document.write(文字列)」というコマンドがあれば HTML内でそのスクリプトの指定タグがある位置に 該当文字列が挿入されます。

一方、前項のようにイベントハンドラを指定し 特定のイベント発生に合わせて 実行することもできます。よく使われるものとして「onLoad」ハンドラがあり これを指定すると ページの内容が全て(画像類含む) 読まれたあとに実行されます。

onLoadハンドラの指定は 一般的に <body onload="処理内容">や window.onload=ハンドラ関数 とします。 先述の関数を使うと 「kl_addhandler(window,"onload",ハンドラ関数 or "処理内容")」 となります。

ページのロード中でも実行させたい場合は 起動スクリプトをスクリプト内で実行、 ページ内容が確定してから実行したい場合はonLoadで実行しましょう。

KeyNaviではスクリプトが読まれた時点で「kl_setup()」 onLoadの段階で「kl_onload()」２つの関数を実行しています。 直ぐに実行したいものは「kl_setup()」 ページ内容が確定後に実行したいものは「kl_onload()」に記述されています。

KeyNaviのカスタマイズでは 拡張用関数「kl_setup_ex()」「kl_onload_ex()」を定義しておくと 両者のタイミングに合わせて自動で実行されます(ハンドラ登録不要)。

複数環境での動作確認
現在主に使われているブラウザは IE4-6、Netscape4,6-7、Mozilla、Operaなど多用です。 動作もブラウザのバージョン・稼動OSによって異なる場合があります。

それら全てで動作するスクリプトを書くのはとても大変です。 新たに追加した機能を 毎回 複数のPCで動作確認するのは面倒なので １台のPCで複数のWindows､Linux環境を利用できる VMwareやVirtualPCなどを使うといいでしょう。

要らぬお世話の副作用
他のページで触れていますが JavaScriptでは直感的にコードが書けるよう 様々な配慮？！ がなされています。

関数内で作成した変数は「var」をつけ忘れると 大域変数の定義,上書きになります。 型の扱いも緩く 「if(1=="1")...」は真です。 また、IEやOperaでは タグに「id」や「name」指定をすると 同名のオブジェクトが大域的な名前空間内にできてしまいます。

なかなかバグが取れないと思ったら 実はこれらが 原因ということもあるので注意しましょう。




【JavaScript@Keynavi.Net ： 基本編 】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。

  - JavaScriptで注意すること
  - ブラウザ互換性問題について
  - デバッグなど開発効率を上げるための工夫
  - 関数の可変引数、デフォルト引数、動的作成など
  - JavaScriptでのオブジェクトの扱いについて
  - ブラウザ判別：KL_IE/NS/OP/MZ
トップへ戻る [1] Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印]  
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ [1] JavaScriptで注意すること ・サイトマップ [Shift-S]
■ キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─