tatsuya / programming_memo / javascript_junk_codes

tatsuya/programming_memo

javascript junk code †

javascript

arguments †

setTimeoutで引数ありの関数を指定時間後に実行 †

	function a() {
		window.alert("arguments: " + arguments.length);
		for( var i=0; i<arguments.length; i++ ) {
			window.alert("arg:" + arguments[i]);
		}
	}
			
	function b(x,y) {
				
		args = arguments;
				
		func = "a('";
		func += args[0]; 
		func += "','";
		func += args[1];
		func +=  "')";
				
		setTimeout(func,20);
				
	}
			
	b(3,4);

setTimeout関数の第一引数に文字列を渡すと、呼び出し後、その解釈が入るので実行に時間がかかる。

argumentsを配列に †

	  
	function nyo() {
	  
		window.alert("this is " + this);
		this.q = 10;
	  
	  
	}
	
	var a = new nyo();
	window.alert("some nyo is constructed");
	window.alert("now this instance of nyo has q, which value is " + a.q);
	a.w = 2; // add w to the instance of nyo
	window.alert("add boo to the instance of nyo");
	a.boo = null;
	a.boo = function() {};
	window.alert("change boo to function");
	a.boo();
	window.alert(" pass "); // Yes! it works.
	/*
	a = null;
	window.alert("now a is null(=false)");
	a.boo(); // it doesn't work
	window.alert(" pass 2");
	*/
	
	a.foo = (function(a) { 
		window.alert(typeof(arguments));
		var k = Array.prototype.slice.call(arguments, 0, arguments.length);
		if(k.length>1) k.splice(1,1);
		window.alert("yes:" + k.length); 
	});
	window.alert("function foo is added to the instance of nyo");
	a.foo();
	a.foo("aaa");
	a.foo("bbb",2);

配列 †

動的に長さが変わる(Array) †

	var a = new Array();
			
	window.alert("length of array: " + a.length);
			
	a[a.length] = 2;
			
	window.alert("length of array: " + a.length);

Canvas(html5) †

clip()はパスによる図形指定で実行する †

rect()後のclip()は動作がおかしい気がする。

クラス †

new演算子は関数からオブジェクトを作る †

	var ABC = function() {
	    this.a = 1;
	
	    // return this;
	}
	
	var def = function() {
	     //window.alert("aaaaa");
	}
	
	def.prototype.k = 10;
	
	var abc = new ABC();
	//ABC.prototype.def = def; // k is undefined
	ABC.prototype.def = new def(); // k is 10;
	
	window.alert("k is " + abc.def.k);
	
	window.alert("abc.def is " + typeof(abc.def));
	//abc.def();
	
	var d = new abc.def();
	
	window.alert("eof");

プロトタイプで指定されたメンバーは、オブジェクトの作成時にオブジェクトから呼び出せるようになる。

擬似多重継承 †

	function child1() {
		var a = "hello";	
		this.k = "hogehoge";
		this.pop = function(e) {
			window.alert(e);
		}
				
		return this;
	}
			
	child1.prototype.show = function() { window.alert("a");};		&t;//child1.kick = function() {window.alert("b");};
			
	function child2() {
		var b = "foo";
				
		return this;
	}
			
	function parent() {
		this.base1 = child1;
		this.base1();
		this.base2 = child2;
		this.base2();
	}
			
	var c = new parent();
	window.alert("a: " + c.k);
	c.pop("nice");
	//c.show(); it doesn't work
	c.kick();

相互継承 †

	var a = function() {
		this.text = "message";
				
		return this;
	};
			
	//a.prototype = new b();
			
			
	var b = function() {
				
		this.show = function() {
			window.alert("text is " + this.text);
		}
					
		return this;
	};
			
	b.prototype = new a();
	a.prototype = new b();
			
	var instance = new a();
			
	instance.show();
			

擬似配列 †

	var A = function() {
						
		this[1] = new Array(2);
		this[1][1] = 3;
				
		window.alert("ok");
				
		return this;
	}
			
	var a = new A();
	//a[1] = 10; // it works.
	window.alert("a[1][1] is " + a[1][1]);
			
	//but what is a
	window.alert("a is " + typeof(a));
	window.alert("a length is " + a.length);

プロトタイプチェーン †

	function a() {
		this.innerVariable = "inner";
				
		return this;
	}
			
	a.prototype.show = function(message) {
		window.alert(this.innerVariable + message);
	}
			
	a.prototype.someobject = someobject;
			
	function someobject() {
		this.some = "some";
	}
			
	someobject.prototype.panch = function() {
		window.alert("panch");
	}
			
	//a.show(); // it doesn't work
	//var b = new a();
	//b.show();
			
			
	function b() {
		//this.prototype.hogehoge = "hogehoge";
		this.hogehoge = "hogehoge";
	}
			
	b.prototype = new a();
			
	/*
	b.prototype.show = function() {
		window.alert(this.hogehoge);
	}
	*/
			
			
	/*
	var c = new b();
	window.alert("hogehoge: " + c.hogehoge);
	c.show();
			
	var d = new b();
	d.show = function() { window.alert("aaaaaaa");};
	//a.prototype.show = function() { window.alert("aaaaaaa");};
	d.show();
			
	var e = new b();
	e.show();
	*/
			
	a.prototype.show("momo");
			
	var s = new a.prototype.someobject();
			  
	//window.alert("s" + s.some);
	s.panch();
			
	window.alert("eof");

Mathはfunctionではなくオブジェクト(object) †

	window.alert(typeof(Math));

構文 †

スクリプトの実行タイミング/実行順序 †

<head>
	<script type="text/javascript" >
		window.alert( "header script");
	</script> 

<body>	
	<script type="text/javascript" >
	
		window.alert("body script top");
	
	/*
		body.onload = function() {
		window.alert("body onload");
		window.alert("body onload end");
		}
	*/
	
		window.onload = function() {
			window.alert("window onload");
			window.alert("window onload end");
		}
	
		window.alert("body script end");
	</script>

for-in構文で連想配列を走査 †

	function parent() {
		//this.k = 0;
		var k = 0;
				
		return this;
	}
			
	parent.prototype.c = 3;
			
	a.prototype = new parent();
			
	function a() {
		this.a = 1;
		this.b = 2;
		//window.alert("k is " + k);
	}
			
			
	for( i in new a() ) {
		window.alert(i);
	}

いろいろなオブジェクトを足し算できるのはtoString()のおかげ †

	var array = new Array(3);
	array[0] = 8;
	array[1] = 7;
	array[2] = 5;
	Array.prototype.toString = function() {
		return 5;
	}
			
	var a = new String("aaa");
	//String.prototype.toString = function() {
	//	window.alert("aaaa");
	//}
	//window.alert("+ is " + typeof(a["+"]));
	window.alert(1 + 2 + array);

DOMスクリプティング †

remove/append †

	window.alert("this is located " + location.href);
	var root = document.getElementsByTagName( 'html' )[0];
	window.alert("root is " + root.innerHTML);
	var body = document.getElementsByTagName( 'body' )[0];
	root.removeChild(body);
	window.alert("root is " + root.innerHTML);
	var frameset = document.createElement( 'frameset' );
	frameset.cols = "*,100";
	var frame1 = document.createElement( 'frame' );
	var frame2 = document.createElement( 'frame' );
	frameset.appendChild( frame1 );
	frameset.appendChild( frame2 );
	root.appendChild( frameset );
	window.alert("root is " + root.innerHTML);
	window.alert("dead");

innerText †

	<body>
		
		window.alert("aaa");
		dddddddd;
		bbbbbb;
		
		<script type="text/javascript">
			
			var body = document.getElementsByTagName('body')[0];
			
			window.alert("innerText:" + body.innerText);
			window.alert("innerHTML:" + body.innerHTML);
			window.alert("outerHTML:" + body.outerHTML);
			
			var text = body.innerText;
			
			var lines = text.split(" ");
			
			window.alert("length of lines: " + lines.length);
			
			window.alert(lines[0]);
			
			eval(lines[0]);
			
		</script>
	</body>