2010年08月30日


JavaScript はボタンのクリックから

リアルタイム JavaScript では入力したJavaScriptをその場で実行できます。
例えば alert("OK"); と入力して「実行ページの作成」ボタンをクリックすると、
「実行」ボタンが現れます。

この「実行ボタン」が alert("OK") を呼び出すように作られています。

※ 作成される HTML は以下のようになります。
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
<title>JavaScriptをその場で実行する</title>
<style>
* {
	font-size:16px;
}
</style>

<script	type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script	type="text/javascript">
google.load("prototype", "1.6.1.0");
</script>

<script type="text/javascript">
function parent_checge() {

	var height = document.body.scrollHeight;
	parent.document.getElementsByName("tool_js_frame")[0].style.height = ((height+100) + "px");

}

if (window.attachEvent){
	window.attachEvent('onload', parent_checge);
}
else {
	window.addEventListener('load', parent_checge, false);
}
</script>

</head>
<body>
<script type="text/javascript">
function scriptTest(evt) {
	alert("OK");
}
</script>
<input type="button" value="実行" onclick='scriptTest(event);'>

</body>
</html>

この中に記述されている「ボタンをクリック」に関係する部分は以下の部分です。
<script type="text/javascript">
function scriptTest(evt) {
	alert("OK");
}
</script>
<input type="button" value="実行" onclick='scriptTest(event);'>

処理される順序
1) ボタンがクリックされる

2) onclick というイベントが発生する

3) イベントに登録されていた処理が呼び出される
 ※ この場合は、scriptTest(event);

4) scriptTest という function が event というオブジェクトを
 引数として与えられて実行が開始される

5) scriptTest という function の内部が実行される
 ※ この場合は alert("OK");


posted by at 13:51 | Comment(0) | JavaScript : 重要(基本) | このブログの読者になる | 更新情報をチェックする


この記事へのコメント
コメントを書く
お名前:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。