初心者のためのホームページ作り 第51号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

プレーンテキスト版バックナンバー

今週<第51号>マガジンのおさらい

                   毎週金曜日配信 What's New 2003/5/16
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
 今週の課題 ■ JavaScript講座 関数とイベント

関数とイベント

JavaScriptによる関数を HTML文で実行させるキーワードは、イベントハンドラです。イベントとは、ユーザの操作に反応して関数を実行させる属性です。

関数

関数とは、ある小さなプログラムを任意の関数として格納し、必要に応じて何度でも実行させることができます。いわばサブルーチンのようなプログラムです。

JavaScriptで、関数を作成しますが、関数自体は何もしません。単にプログラムが格納されただけです。関数のプログラムを実行させる手段として、HTMLの要素内にイベント属性を埋め込んで実行させます。

イベント

HTMLで記述するイベント属性は以下のとおりです。
イベント属性 機能 適用要素
onmouseover マウスが重なったときに発生する ほとんどの要素
onmouseout マウスが離れたときに発生する ほとんどの要素
onmousedown マウスのボタンが押されたときに発生する ほとんどの要素
onmouseup マウスのボタンが離されたときに発生する ほとんどの要素
onclick 何らかのキーが押されたときに発生する ほとんどの要素
ondblclick ダブルクリックされたときに発生する ほとんどの要素
onkeypless 何らかのキーが押されたときに発生する ほとんどの要素
onload ページが読み込まれたときに発生する body、frameset
onunload 他にページに移動したときに発生する body、frameset
onblur フォーカスを失ったときに発生する select、text、textarea
onfocus フォーカスされたときに発生する select、text、textarea
onselect テキストがフォーカスされたときに発生する text、textarea
onchange ファーム内のデータが変更されて、
フォーカスを失ったときときに発生する
select、text、textarea
onsubmit フォームデータが送信されたときに発生する form
onreset フォームデータが取消されたときに発生する form
(注)ほとんどの要素とは、applet、base、bdo、frame、frameset、head内要素などを除くもの

関数は、このイベントと密接に関係し、イベントによって関数が呼び出され、そのプログラムが実行されます。

フォームで利用する関数とイベントのサンプル
HTMLソースは今週のメールマガジン 「第51号」 を参照してください。

クロスブラウザ

クロスブラウザとは、訪れたユーザの Webブラウザを判断し、そのブラウザにマッチするページに誘導する、いわばブラウザ別のページに振り分けるものです。

その昔、いわゆるダイナミック-HTMLなるスタイルシートとJavaScriptを利用した動的なページが流行したことがありました。しかし、実際には Webブラウザによってその仕様が大きく異なるため、わざわざクロスブラウザによって、切り分ける必要がありました。

特に、当時は MSIE4.0 と Netscape Navigator 4.0 が2大ブラウザとして多くのユーザを獲得していた時期だったため、2つのブラウザを切り分けていました。

ユーザのユーザエージェント(Webブラウザ、プロキシなどを含む)を判断する JavaScriptは、navigatorオブジェクトappNameプロパティを利用することで取得でき、これを元に条件分岐して、そのブラウザのためのページに誘導させます。

Webブラウザ別に切り替えるサンプル
HTMLソースは今週のメールマガジン 「第51号」 を参照してください。



Copyright(C) 2002-2003 ばんばん banban@scollabo.com