JavaScript 入門 プログラムの流れ
出典: フリー教科書『ウィキブックス（Wikibooks）』
- JavaScript > 入門 プログラムの流れ
[編集] イベント駆動式プログラミング
[編集] 解説
※ここからのトピックはとくにWebブラウザ側の話題に傾いているので、その他の用途での利用を考えている場合は読み飛ばしてかまわない
Webブラウザ上でJavaScriptを実行する場合には、イベント駆動式プログラミングを知ってもらう必要がある。
イベント駆動式（イベントドリブン）プログラミングとは
- 規定の場所の上にマウスが来た
- ボタンをクリックした
等のイベント(出来事)が起きたときに、これに反応してプログラムを実行する方法である。
Windows等のGUIのインターフェースを持つOSではイベント駆動式のプログラミングが一般的に用いられており、Tcl等の言語は、言語の文法がこれと密着している。
[編集] 実例
以下のプログラムはボタンを押すことでWebページの背景色を変更するものである
<html>
<head>
<title>JavaScriptのサンプルソース</title>
<script type="text/javascript"><!--
function bg_red(){ document.body.style.backgroundColor="red"; }
function bg_blue(){ document.body.style.backgroundColor="blue"; }
--></script>
</head>
<body>
<button onclick="bg_red()">背景色を赤に変更</button>
<button onclick="bg_blue()">背景色を青に変更</button>
</body>
</html>
このようにHTML要素の中に「onclick="実行したいコード"」と書いて、イベントに反応してコードを実行する。
今回はonclickイベントを使ったがHTMLの標準規格では、次のようなものもある。
- onclick マウスのクリックに反応
- ondblclick マウスのダブルクリックに反応
- onmousedown マウスのキーが押されたときに反応
- onmouseup マウスのキーがあがったときに反応
- onmouseover マウスが指定した箇所の上に来たときに反応
- onmousemove マウスが移動したときに反応
- onmouseout マウスが指定した区域を出ていったときに反応
- onkeypress キーボードのキーが押されたときに反応
使える要素は他にもあるが、HTML要素ごとに違うので詳しくはW3Cの仕様書を参照してもらいたい
この様に、onclick等の文をHTML中に埋め込む方法は実際にWebページで利用することは実はあまり歓迎されない方法である。 理由はHTML中にプログラムを埋め込むと、デザインとコードが分離されないため全体的な構造が複雑になりがちであるためである。 ただし、初心者には圧倒的に分かりやすく、また実際の開発現場でも範囲分担の関係から編集できるファイルに制限がある場合、ツールによるコードの自動生成をする場合等、埋め込む方が適切である場合に現在でも開発の現場で見かけられる方法である。
HTML中に直書きしない方法に関しては後述をする。
