2010年08月31日


alert("ABC") の意味



1) alert


2) ( [...] )
  • メソッドを呼び出す記号
  • 間に何かある場合は、メソッドにそれを引き渡す
3) "文字列"
  • 見たままの場合は、"(ダブルクォーテーション)で挟まれる
  • 変数の場合は、挟まれない
alert( window.alert ) を実行すると以下のようになります
function alert() {
    [native code]
}
以下の alert は先頭の文字列のみ表示されます
alert("A","B","C")
posted by at 22:11 | Comment(0) | JavaScript : 重要(基本) | このブログの読者になる | 更新情報をチェックする


2010年08月30日


デバッグには見て確かめる alert、キャンセルを可能にする confirm

リファレンス

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>


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



良く使う実用テクニックから学ぶ基本テクニック

1) クリックの代替( イベントの呼び出し )とクロスブラウジング

通常、IE とそれ以外のブラウザでは片方にあって片方に無いメソッドが存在
する場合があり、それ自身を条件にしてクロスブラウジングする事もあります
が、ブラウザの種類を示す文字列から直接判断するのが基本です。

2) 同一階層(または下の階層)の要素を親経由で参照する

id や name 指定の無い一般的な要素を共通の親経由で参照する事が可能です

3) 正規表現置換基本テスト

HTML の特殊キャラクタを一括で置換して HTML 上で表現する事は良くあります

4) ブラウザの表示を半透明で暗くする方法

これにも、ブラウザによる違いがありますが、効果として良く使われるテクニ
ックです


posted by at 19:32 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする



this ステートメントと this 演算子

どちらも同じものです。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>



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



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 : 重要(基本) | このブログの読者になる | 更新情報をチェックする