JavaScript のオブジェクト処理と関連する重要な機能

  new 演算子で作成するオブジェクトの定義方法(オブジェクトと継承)






  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>JavaScript オブジェクト</title>

<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// 足し算関数( オブジェクトメソッド用 : 単独呼び出しも可能 )
// *********************************************************
function __ensan_tasu(a,b) {
	alert("__ensan_tasuの名前は "+this.name+" です");
	return( a + b );
}

// *********************************************************
// 演算オブジェクト( 足し算しかできない )
// *********************************************************
function enzan(name) {
	// プロパティに名前をセット
	this.name = name;
	// メソッドにセット
	this.tasu = __ensan_tasu;
}

// *********************************************************
// 引き算関数( オブジェクトメソッド用 : 単独呼び出しも可能 )
// *********************************************************
function __ensan_hiku(a,b) {
	return a - b;
}

// *********************************************************
// 演算オブジェクト
// 1) 足し算を継承
// 2) 引き算を追加
// *********************************************************
function enzan_ex(name) {
	// enzan の継承
	enzan.call(this, name);
	// メソッドにセット
	this.hiku = __ensan_hiku;
}


// *********************************************************
// 実行テスト( 足し算 )
// *********************************************************
function test_1() {

	var objBase = new enzan("【足し算のみのオブジェクト】");
	var str = "名前は "+objBase.name+" で、1+9 は "+objBase.tasu(1,9)+" です";
	alert(str);

	// 単独で呼んでも、オブジェクト( objBase ) は参照されない
	alert(__ensan_tasu(1,9));

}
// *********************************************************
// 実行テスト( 足し算と引き算 )
// *********************************************************
function test_2() {

	var objBase = new enzan_ex("【足し算と引き算のオブジェクト】");
	var str = "名前は "+objBase.name+" で、1+9 は "+objBase.tasu(1,9)+" です";
	str += "、1-9 は "+objBase.hiku(1,9)+" です";
	alert(str)

	var objBase2 = new enzan_ex("【足し算と引き算のオブジェクト2】");
	var str = "名前は "+objBase2.name+" で、25+78 は "+objBase2.tasu(25,78)+" です";
	str += "、33-8 は "+objBase2.hiku(33,8)+" です";
	alert(str)
}

</SCRIPT>

</head>

<body>

<INPUT
	style='width:300px;'
	type="button"
	value="演算オブジェクト(足し算のみ)"
	onClick='test_1();'
><br>
<INPUT
	style='width:300px;'
	type="button"
	value="演算オブジェクト(足し算を継承)"
	onClick='test_2();'
><br>

</body>
</html>
  



  動的な関数の引数と動的な関数作成






  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>JavaScript 動的引数と動的関数</title>

<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// 動的引数の扱い
// *********************************************************
function test_1() {

	var i,str = "";
	var len = arguments.length;

	for( i = 0; i < len; i++ ) {
		if ( i != 0 ) {
			str += ","
		}
		str += arguments[i]
	}

	alert(str);

}
// *********************************************************
// 動的関数の作成
// *********************************************************
var myFunc = null;
function test_2() {

	myFunc = new Function( "a", "b", "c", "return( a+b+c );" );

}

</SCRIPT>

</head>

<body>

<INPUT
	style='width:300px;'
	type="button"
	value="関数に引数を動的に追加で与える"
	onClick='test_1("a",1,"漢字");'
><br>
<INPUT
	style='width:300px;'
	type="button"
	value="動的関数の作成"
	onClick='test_2();alert(myFunc(1,2,3));'
><br>

</body>
</html>
  



  連想配列とその初期化



  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>JavaScript 連想配列の初期化</title>

<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// 動的引数の扱い
// *********************************************************
function test_1() {

	a = {
		A: 8,
		B: 9,
		C: 12,
		D: 13
	}

	alert("C:"+a["C"]);

	s = "";
	for ( key in a )   {
		if ( s != "" ) {
			s += "|";
		}
		s += key;
	}
	
	alert(s);

}

</SCRIPT>

</head>

<body>

<INPUT
	style='width:300px;'
	type="button"
	value="初期化された連想配列の使用"
	onClick='test_1();'
><br>

</body>
</html>
  



  連想配列に関数をセットして呼び出す

lbox["tasu"](1,2) は、
function(a,b){ return a+b } を呼び出しています

lbox.tasu(1,2) も、
function(a,b){ return a+b } を呼び出しています



  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>JavaScript 連想配列に関数をセットして使用</title>

<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// 連想配列に関数をセット
// *********************************************************
var lbox = null;
function test_1() {

	lbox = {
		tasu: function(a,b){ return a+b },
		hiku: function(a,b){ return a-b }
	}
}

</SCRIPT>

</head>

<body>

<INPUT
	style='width:300px;'
	type="button"
	value="連想配列に関数をセットして使用"
	onClick='test_1();alert(lbox["tasu"](1,2));alert(lbox.tasu(1,2));'
><br>

</body>
</html>
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ