1) alert
- 名前
- 所属は window
- 種類は メソッド
- メソッドを呼び出す記号
- 間に何かある場合は、メソッドにそれを引き渡す
- 見たままの場合は、"(ダブルクォーテーション)で挟まれる
- 変数の場合は、挟まれない
alert( window.alert ) を実行すると以下のようになります
function alert() { [native code] }
以下の alert は先頭の文字列のみ表示されます
alert("A","B","C")
|
|
1) alert
alert( window.alert ) を実行すると以下のようになります
function alert() { [native code] }
以下の alert は先頭の文字列のみ表示されます
alert("A","B","C")
|
リファレンスalert ( Microsoft )
alert ( Mozilla ) 多くの処理を部分部分で確かめたい場合は、Firebug の console.log を使用して ログを取るほうが有効ですが、一つ一つ確実に確かめるには alert が最も有効です。 ( ※ IE では、alert(); はエラーになりません )
confirm ( Microsoft )
confirm ( Mozilla ) 戻り値として true または false が返るので、if 文の条件式に直接使う事になります。
if ( confirm("更新しますか?") ) { console.log("更新"); } else { console.log("キャンセル"); }
以下は、IE 用の console.log の簡易的な代替えです。
<script type="text/javascript"> var console = { log: function(str) { document.getElementById("message").innerHTML += (str + "<br />"); }} </script> <div id="message"></div>
1) クリックの代替( イベントの呼び出し )とクロスブラウジング 通常、IE とそれ以外のブラウザでは片方にあって片方に無いメソッドが存在 する場合があり、それ自身を条件にしてクロスブラウジングする事もあります が、ブラウザの種類を示す文字列から直接判断するのが基本です。 2) 同一階層(または下の階層)の要素を親経由で参照する id や name 指定の無い一般的な要素を共通の親経由で参照する事が可能です 3) 正規表現置換基本テスト HTML の特殊キャラクタを一括で置換して HTML 上で表現する事は良くあります 4) ブラウザの表示を半透明で暗くする方法 これにも、ブラウザによる違いがありますが、効果として良く使われるテクニ ックです
どちらも同じものです。Microsoft が this ステートメント で、Mozilla が this 演算子 として説明しています。 オブジォクトを定義して、インスタンスを作った時にそのオブジェクト自身を指しますが、 それ以外はグローバルオブジェクトとして最上位のオブジェクトを指します。 Microsoft では、Window オブジェクトだと書いてありますが、結果としては同じ事です。
<script type="text/javascript"> function scriptTest(evt) { alert(this.a + " / " + this.b); alert(window.a) } </script> <input type="button" value="実行" onclick='scriptTest(event);'> <script type="text/javascript"> var a = "001"; window.b = "002"; </script>
リアルタイム 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");