JSは対象及びモジュール向けに開発する.

オブジェクト指向の構成

var arr = [];

arr.number = 10;  //       ：       

//alert( arr.number );
//alert( arr.length );

arr.test = function(){  //        :        
	alert(123);
};

arr.test();

arr.push();
arr.sort();

最初のオブジェクト指向プログラムを作成します.

//var obj = {};

var obj = new Object();  //         
obj.name = '  ';  //  
obj.showName = function(){  //  
	alert(this.name);
};

obj.showName();


var obj2 = new Object();  //         
obj2.name = '  ';  //  
obj2.showName = function(){  //  
	alert(this.name);
};

obj2.showName();

工場方式

//     :     

function createPerson(name){
	
	//1.  
	var obj = new Object();
	//2.  
	obj.name = name;
	obj.showName = function(){
		alert( this.name );
	};
	//3.  
	return obj;
	
}

var p1 = createPerson('  ');
p1.showName();
var p2 = createPerson('  ');
p2.showName();

// new        :         this         ,             this (    )

//new        :       

function CreatePerson(name){
	
	this.name = name;
	this.showName = function(){
		alert( this.name );
	};
	
}

var p1 = new CreatePerson('  ');
//p1.showName();
var p2 = new CreatePerson('  ');
//p2.showName();

alert( p1.showName == p2.showName );  //false

var arr = new Array();
var date = new Date();

オブジェクトの参照

/*var a = [1,2,3];
var b = [1,2,3];

alert( a == b );  //false*/

//var a = 5;
//var b = a;
//b += 3;
alert(b); //8
//alert(a); //5        :            


//var a = [1,2,3];
//var b = a;
//b.push(4);
alert(b);  //[1,2,3,4]
//alert(a);  //[1,2,3,4]        :          ，         

//var a = [1,2,3];
//var b = a;
//b = [1,2,3,4];
alert(b); //[1,2,3,4]
//alert(a); //[1,2,3]

//var a = 5;
//var b = 5;
//
//alert(a == b);  //     :       


//var a = [1,2,3];
//var b = [1,2,3];

//alert( a == b );  //false  //     :          

var a = [1,2,3];
var b = a;
alert( a==b );  //true

原型

//   :                  ,                    (      )

//   : CSS  class
//     : CSS  style

//   : prototype :           

/*var arr = [1,2,3,4,5];
var arr2 = [2,2,2,2,2];

arr.sum = function(){
	
	var result = 0;
	for(var i=0;i<this.length;i++){
		result += this[i];
	}
	return result;
	
};
arr2.sum = function(){
	
	var result = 0;
	for(var i=0;i<this.length;i++){
		result += this[i];
	}
	return result;
	
};

//alert( arr.sum() );  //15
//alert( arr2.sum() );  //10*/

var arr = [1,2,3,4,5];
var arr2 = [2,2,2,2,2];

Array.prototype.sum = function(){
	var result = 0;
	for(var i=0;i<this.length;i++){
		result += this[i];
	}
	return result;
};

alert( arr.sum() );  //15
alert( arr2.sum() );  //10

var arr = [];
//arr.number = 10;
Array.prototype.number = 20;

alert(arr.number);

工場法の原型

// new        :         this         ,             this (    )

//new        :       

function CreatePerson(name){
	
	this.name = name;
	
}
CreatePerson.prototype.showName = function(){
	alert( this.name );
};

var p1 = new CreatePerson('  ');
//p1.showName();
var p2 = new CreatePerson('  ');
//p2.showName();

alert( p1.showName == p2.showName );  //true

var arr = new Array();
var date = new Date();

対象向けの書き方

function     (){
	this.  
}

    .  .   = function(){};


var   1 = new     ();
  1.  ();

オブジェクト向けのタブ

/*window.onload = function(){
	var oParent = document.getElementById('div1');
	var aInput = oParent.getElementsByTagName('input');
	var aDiv = oParent.getElementsByTagName('div');
	
	for(var i=0;i<aInput.length;i++){
		aInput[i].index = i;
		aInput[i].onclick = function(){
			for(var i=0;i<aInput.length;i++){
				aInput[i].className = '';
				aDiv[i].style.display = 'none';
			}
			this.className = 'active';
			aDiv[this.index].style.display = 'block';
		};
	}
	
};*/

//   :
//            
//       
// onload               


var oParent = null;
var aInput = null;
var aDiv = null;

window.onload = function(){
	
	oParent = document.getElementById('div1');
	aInput = oParent.getElementsByTagName('input');
	aDiv = oParent.getElementsByTagName('div');

	init();
	
};

function init(){
	for(var i=0;i<aInput.length;i++){
		aInput[i].index = i;
		aInput[i].onclick = change;
	}
}

function change(){
	for(var i=0;i<aInput.length;i++){
		aInput[i].className = '';
		aDiv[i].style.display = 'none';
	}
	this.className = 'active';
	aDiv[this.index].style.display = 'block';
}






	
    
    
    
11111
    
22222
    
33333

/*window.onload = function(){
	var oParent = document.getElementById('div1');
	var aInput = oParent.getElementsByTagName('input');
	var aDiv = oParent.getElementsByTagName('div');
	
	for(var i=0;i<aInput.length;i++){
		aInput[i].index = i;
		aInput[i].onclick = function(){
			for(var i=0;i<aInput.length;i++){
				aInput[i].className = '';
				aDiv[i].style.display = 'none';
			}
			this.className = 'active';
			aDiv[this.index].style.display = 'block';
		};
	}
	
};*/

//   :
//            
//       
// onload               


/*var oParent = null;
var aInput = null;
var aDiv = null;

window.onload = function(){
	
	oParent = document.getElementById('div1');
	aInput = oParent.getElementsByTagName('input');
	aDiv = oParent.getElementsByTagName('div');

	init();
	
};

function init(){
	for(var i=0;i<aInput.length;i++){
		aInput[i].index = i;
		aInput[i].onclick = change;
	}
}

function change(){
	for(var i=0;i<aInput.length;i++){
		aInput[i].className = '';
		aDiv[i].style.display = 'none';
	}
	this.className = 'active';
	aDiv[this.index].style.display = 'block';
}*/

//      :
//        
//      
//Onload     

// this     :         ,         this    

window.onload = function(){
	
	var t1 = new Tab();
	t1.init();
	
};

function Tab(){
	this.oParent = document.getElementById('div1');
	this.aInput = this.oParent.getElementsByTagName('input');
	this.aDiv = this.oParent.getElementsByTagName('div');
}

Tab.prototype.init = function(){
	var This = this;
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].index = i;
		this.aInput[i].onclick = function(){
			This.change(this);
		};
	}
};

Tab.prototype.change = function(obj){
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].className = '';
		this.aDiv[i].style.display = 'none';
	}
	obj.className = 'active';
	this.aDiv[obj.index].style.display = 'block';
};






	
    
    
    
11111
    
22222
    
33333

/*var arr = [4,7,1,3];
arr.sort();  // 1 3 4 7

var arr2 = [4,7,1,3];
arr2.push(5);
arr2.sort(); // 1 3 4 5 7
*/

window.onload = function(){
	
	var t1 = new Tab('div1');
	t1.init();
	t1.autoPlay();
	
	var t2 = new Tab('div2');
	t2.init();
	t2.autoPlay();
	
};

function Tab(id){
	this.oParent = document.getElementById(id);
	this.aInput = this.oParent.getElementsByTagName('input');
	this.aDiv = this.oParent.getElementsByTagName('div');
	this.iNow = 0;
}

Tab.prototype.init = function(){
	var This = this;
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].index = i;
		this.aInput[i].onclick = function(){
			This.change(this);
		};
	}
};

Tab.prototype.change = function(obj){
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].className = '';
		this.aDiv[i].style.display = 'none';
	}
	obj.className = 'active';
	this.aDiv[obj.index].style.display = 'block';
};

Tab.prototype.autoPlay = function(){
	
	var This = this;
	
	setInterval(function(){
		
		if(This.iNow == This.aInput.length-1){
			This.iNow = 0;
		}
		else{
			This.iNow++;
		}
		
		for(var i=0;i<This.aInput.length;i++){
			This.aInput[i].className = '';
			This.aDiv[i].style.display = 'none';
		}
		This.aInput[This.iNow].className = 'active';
		This.aDiv[This.iNow].style.display = 'block';
		
		
	},2000);
	
};






	
    
    
    
11111
    
22222
    
33333



	
    
    
    
11111
    
22222
    
33333

オブジェクトに向かってドラッグ

/*var arr = [4,7,1,3];
arr.sort();  // 1 3 4 7

var arr2 = [4,7,1,3];
arr2.push(5);
arr2.sort(); // 1 3 4 5 7
*/

window.onload = function(){
	
	var t1 = new Tab('div1');
	t1.init();
	t1.autoPlay();
	
	var t2 = new Tab('div2');
	t2.init();
	t2.autoPlay();
	
};

function Tab(id){
	this.oParent = document.getElementById(id);
	this.aInput = this.oParent.getElementsByTagName('input');
	this.aDiv = this.oParent.getElementsByTagName('div');
	this.iNow = 0;
}

Tab.prototype.init = function(){
	var This = this;
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].index = i;
		this.aInput[i].onclick = function(){
			This.change(this);
		};
	}
};

Tab.prototype.change = function(obj){
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].className = '';
		this.aDiv[i].style.display = 'none';
	}
	obj.className = 'active';
	this.aDiv[obj.index].style.display = 'block';
};

Tab.prototype.autoPlay = function(){
	
	var This = this;
	
	setInterval(function(){
		
		if(This.iNow == This.aInput.length-1){
			This.iNow = 0;
		}
		else{
			This.iNow++;
		}
		
		for(var i=0;i<This.aInput.length;i++){
			This.aInput[i].className = '';
			This.aDiv[i].style.display = 'none';
		}
		This.aInput[This.iNow].className = 'active';
		This.aDiv[This.iNow].style.display = 'block';
		
		
	},2000);
	
};






	
    
    
    
11111
    
22222
    
33333



	
    
    
    
11111
    
22222
    
33333

包装の対象

/*function Aaa(){
	this.name = '  ';
}
Aaa.prototype.showName = function(){
	alert( this.name );
};

var a1 = new Aaa();
a1.showName();


var arr = new Array();
arr.push();
arr.sort();

// JS   :              

function Array(){
	this.lenglth = 0;
}
Array.prototype.push = function(){};
Array.prototype.sort = function(){};*/


//                       

var arr = [1,2,3];

Array.prototype.push = function(){
	
	//this : 1,2,3
	//arguments : 4,5,6
	
	for(var i=0;i<arguments.length;i++){
		this[this.length] = arguments[i]
	}
	
	return this.length;
};

arr.push(4,5,6);

alert( arr );

//pop shift unshift splice sort

/*var str = 'hello';

alert( typeof str );

str.charAt(0);
str.indexOf('e');*/

//null undefined
//     :                 : String  Number  Boolean 

/*var str = new String('hello');

//alert( typeof str );

alert(str.charAt(1));

String.prototype.charAt = function(){};*/



//var str = 'hello';
//str.charAt(0);  //                ，                     ，        


/*var str = 'hello';

String.prototype.lastValue = function(){
	return this.charAt(this.length-1);
};

alert( str.lastValue() );  //o*/


var str = 'hello';

str.number = 10;

alert( str.number );  //undefined

原型チェーン

//    :             ，     

//        : Object.prototype

function Aaa(){
	//this.num = 20;
}
//Aaa.prototype.num = 10;
Object.prototype.num = 30;

var a1 = new Aaa();
alert(a1.num);

ハスOwnProperty

//hasOwnProperty :              

var arr = [];
arr.num = 10;
Array.prototype.num2 = 20;

//alert(  arr.hasOwnProperty('num')  );  //true

alert(  arr.hasOwnProperty('num2')  );  //false

トラック 

//constructor :          

/*function Aaa(){
}

var a1 = new Aaa();

alert( a1.constructor );  //Aaa

var arr = [];
alert( arr.constructor == Array );  //true*/


/*function Aaa(){
}
//Aaa.prototype.constructor = Aaa;   //         ，       

//Aaa.prototype.constructor = Array;

var a1 = new Aaa();
alert( a1.hasOwnProperty == Object.prototype.hasOwnProperty );  //true*/


/*function Aaa(){
}

Aaa.prototype.name = '  ';
Aaa.prototype.age = 20;

Aaa.prototype = {
	constructor : Aaa,
	name : '  ',
	age : 20
};

var a1 = new Aaa();
alert( a1.constructor );*/


function Aaa(){
}

Aaa.prototype.name = 10;
Aaa.prototype.constructor = Aaa;

for( var attr in Aaa.prototype ){
	alert(attr);
}

instance of

//instanceof :                  

function Aaa(){
}

var a1 = new Aaa();

//alert( a1 instanceof Object );  //true


var arr = [];

alert( arr instanceof Array );

toString

//toString() :             ,               object   

/*var arr = [];
alert( arr.toString == Object.prototype.toString ); //false*/

/*function Aaa(){
}
var a1 = new Aaa();
alert( a1.toString == Object.prototype.toString );  //true*/


//toString() :         

/*var arr = [1,2,3];

Array.prototype.toString = function(){
	return this.join('+');
};

alert( arr.toString() );  //'1,2,3'*/


//var num = 255;
//alert( num.toString(16) );  //'ff'


//  toString       : 

/*var arr = [];

alert( Object.prototype.toString.call(arr) == '[object Array]' ); */ //'[object Array]'

window.onload = function(){
	
	var oF = document.createElement('iframe');
	document.body.appendChild( oF );
	
	var ifArray = window.frames[0].Array;
	
	var arr = new ifArray();
	
	//alert( arr.constructor == Array );  //false
	
	//alert( arr instanceof Array );  //false
	
	alert( Object.prototype.toString.call(arr) == '[object Array]' );  //true
	
	
};

引き継ぐ

//   :        ，              (      )

//      :           call

//      : for in :       (jquery        extend)

function CreatePerson(name,sex){   //  
	this.name = name;
	this.sex = sex;
}
CreatePerson.prototype.showName = function(){
	alert( this.name );
};

var p1 = new CreatePerson('  ',' ');
//p1.showName();


function CreateStar(name,sex,job){  //  
	
	CreatePerson.call(this,name,sex);
	
	this.job = job;
	
}

//CreateStar.prototype = CreatePerson.prototype;

extend( CreateStar.prototype , CreatePerson.prototype );

CreateStar.prototype.showJob = function(){
};

var p2 = new CreateStar('   ',' ','  ');

p2.showName();


function extend(obj1,obj2){
	for(var attr in obj2){
		obj1[attr] = obj2[attr];
	}
}

オブジェクトのコピー

/*var a = {
	name : '  '
};

var b = a;

b.name = '  ';

alert( a.name );*/


/*var a = {
	name : '  '
};

//var b = a;

var b = {};

extend( b , a );

b.name = '  ';

alert( a.name );


function extend(obj1,obj2){
	for(var attr in obj2){
		obj1[attr] = obj2[attr];
	}
}*/


var a = [1,2,3];
var b = a;
//b.push(4);

b = [1,2,3,4];

alert(a);

継承のドラッグ

window.onload = function(){
	var d1 = new Drag('div1');
	d1.init();
	
	var d2 = new ChildDrag('div2');
	d2.init();
};

function Drag(id){  //  
	this.obj = document.getElementById(id);
	this.disX = 0;
	this.disY = 0;
}
Drag.prototype.init = function(){
	
	var This = this;
	
	this.obj.onmousedown = function(ev){
		var ev = ev || window.event;
		This.fnDown(ev);
		
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			This.fnMove(ev);
		};
		document.onmouseup = function(){
			This.fnUp();
		};
		return false;
	};
	
};

Drag.prototype.fnDown = function(ev){
	this.disX = ev.clientX - this.obj.offsetLeft;
	this.disY = ev.clientY - this.obj.offsetTop;
};
Drag.prototype.fnMove = function(ev){
	this.obj.style.left = ev.clientX - this.disX + 'px';
	this.obj.style.top = ev.clientY - this.disY + 'px';
};
Drag.prototype.fnUp = function(){
	document.onmousemove = null;
	document.onmouseup = null;
};


function ChildDrag(id){   //  
	Drag.call(this,id);
}

extend( ChildDrag.prototype , Drag.prototype );

ChildDrag.prototype.fnMove = function(ev){
	
	var L = ev.clientX - this.disX;
	var T = ev.clientY - this.disY;
	
	if(L<0){
		L = 0;
	}
	else if(L>document.documentElement.clientWidth - this.obj.offsetWidth){
		L = document.documentElement.clientWidth - this.obj.offsetWidth;
	}
	
	this.obj.style.left = L + 'px';
	this.obj.style.top = T + 'px';
};

function extend(obj1,obj2){
	for(var attr in obj2){
		obj1[attr] = obj2[attr];
	}
}

类式继承

//  : JS         ,  JS          
	
//            ，     
	
function Aaa(){   //  
	this.name = [1,2,3];
}	
Aaa.prototype.showName = function(){
	alert( this.name );
};

function Bbb(){   //  
	
	Aaa.call(this);
	
}

var F = function(){};
F.prototype = Aaa.prototype;
Bbb.prototype = new F();
Bbb.prototype.constructor = Bbb; //      

var b1 = new Bbb();
//b1.showName();
//alert( b1.name );
//alert( b1.constructor );
b1.name.push(4);

var b2 = new Bbb();

alert( b2.name );

原型引継ぎ

var a = {
	name : '  '
};

var b = cloneObj(a);

b.name = '  ';

//alert( b.name );
alert( a.name );

function cloneObj(obj){
	
	var F = function(){};
	
	F.prototype = obj;
	
	return new F();
	
}


    :         new  new      

    :  new    

    :   new