リアルタイム 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");