ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

４．イベントドリブン

今度はいままでとは異なり、ボタンからアラートを表示します。

オブジェクト指向のプログラミングは
ボタンを押して結果を確認するというプログラミングが基本です。

これをイベントドリブン(駆動)といいます、
プログラミングの実行がマウスクリックなどのイベントから始まるときがあります。

古典のプログラミングの実行は

下に流れるだけで実行結果が出てきますが

現代のイベントドリブンでの実行は

ユーザーの動作→イベント→メソッド→結果

と実行されます。

それでは実際の例です
まずHTMLファイルの方にフォームを使ってボタンを作ります。

そこにイベントを記述します。

「onなんちゃら」がイベントです。

<form>
<input type="button" value="ボタンから始まるよ" onclick="alert('マヤ！恐ろしい子!!')">
</form>

イベントは、ユーザーの操作を待っています。
そのためボタンが押された時、イベントに関連ずけた
メソッドを呼び出します。

onClickイベントは

alert()メソッドを呼び出します。

これは簡単ですね。

次は、javasciriptファイル側にメソッドを記述し
ボタンを押した時に、そこから呼び出されるように記述してみましょう。

今回使用するソースコード event.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<SCRIPT src="javascript.js"></SCRIPT>
</head>
<body>
<form>
<input type="button" value="ボタンから始まるよ" onclick="MyFunc()">
</form>

</body>
</html>

今回使用するソースコード javascrpt.js

//メソッドはhtml側から呼び出せる
function MyFunc() {
　　　alert("「onclick」イベントからMyFuncメソッドが呼ばれました");
}

上記のようになります。

実行結果

コラム：
documentが結局なんなのかというと
documentに関連するクラスが生成する、静的(static)なオブジェクトです。
そのページに一つしかないオブジェクトです。

グローバルなオブジェクトであるともいえます。

そのため、new演算子を使わなくても、オブジェクトを直接呼び出せます。

また、C言語に慣れていると、オブジェクト.メソッド()と呼び出す方式に
違和感を覚えやすいですので慣れが必要です。