javascript 学习笔记3

今天学习了几个引用类型及其它们的一些基础的操作，记录下来～～～

和之前的格式差不多，主要是代码～～～边看书边练习留下来的，和大家分享

/*============================================================================
#     FileName: ex6.js
#         Desc: 
#       Author: baobaoyeye
#        Email: bao.renyi@gmail.com
#     HomePage: http://karloo.com http://blog.csdn.net/baobaoyeye
#      Version: 0.0.1
#   LastChange: 2011-07-25 23:14:33
#      History:
#===========================================================================*/

//Object的声明有两种方式
function fun1(){
	var o1 = new Object();
	o1.name = "baobaoyeye";
	o1.age = 23;

	var o2 = {
		name: "baobaoyeye1",
		age: 24
	};

	var o3 = {};
	o3.name = "baobaoyeye2";
	o3.age = 25;

	document.getElementById("fun1show1").value = o1.name;
	document.getElementById("fun1show2").value = o1.age;
	document.getElementById("fun1show3").value = o2.name;
	document.getElementById("fun1show4").value = o2.age;
	document.getElementById("fun1show5").value = o3.name;
	document.getElementById("fun1show6").value = o3.age;

}


//函数需要大量可选参数的时候可以使用字面量来传递
function showNameAndAge(args){
	var output="";
	if(typeof args.name=="string" && args.name!="input your name"){
		output+="Your name is "+args.name;
	}
	if(!isNaN(args.age)){
		output+=" ,your age is "+args.age;
	}
	return output;
}

function fun2(){	
	var name = document.getElementById("fun2input1").value;
	var age = document.getElementById("fun2input2").value;
	var show = showNameAndAge({name: name,age: age});
	alert(show);
}

//Object的属性可以作为使用数组序号的方式访问

function fun3(){
	var o1 = new Object();
	o1.atr1 = 1;
	o1.atr2 = 2;
	o1.atr3 = 3;
	o1.atr4 = 4;
	o1.atr5 = 5;
	var str1 = "";
	var str2 = "atr";
	for(var i=1; i<6; i++){
		var str3 = str2 + i;
		str1 += o1[str3];
	}
	alert(str1);
}

//Array的各种初始化，赋值

function fun4(){
	var a1 = new Array();
	document.getElementById("fun4show1").value = a1.length;

	var a2 = new Array(2);
	document.getElementById("fun4show2").value = a2.length;
	document.getElementById("fun4show3").value = a2[1];
	
	var a3 = new Array("num1","num2","num3");
	document.getElementById("fun4show4").value = a3[2];

	var a4 = new Array("num4");
	var a5 = new Array(3);
	var a6 = new Array("4");
	
	alert("Array(\"num4\") len = "+a4.length+
		"\nArray(3) len = "+a5.length+
		"\nArray(\"4\") len = "+a6.length);
	
	var str1 = "";
	var a7 = ["num5","num6","num7"];
	for (var i = 0; i < a7.length; i++){
		str1 += a7[i] +" ";
	}
	alert(str1);
	alert("a7.length = "+a7.length);
	a7[a7.length] = "num8";
	alert("a7.length = "+a7.length);
}

//Array的输出转换

function fun5(){
	//toString() valueOf() 用法
	var a1 = ["num1","num2","num3"];
	alert("a1.toString() = "+a1.toString()+
		"\na1.valueOf() = "+a1.valueOf()+
		"\na1 = "+a1);

	//toLocaleString() toString() 用法
	var o1 = {
		toLocaleString: function(){
			return "tls1";
		},
		toString: function(){
			return "ts1";
		}
	};

	var o2 = {
		toLocaleString: function(){
			return "tls2";
		},
		toString: function(){
			return "ts2";
		}
	};

	alert("o1 ==>"+o1+
		"\no2 ==>"+o2+
		"\no1.toString ==>"+o1.toString()+
		"\no2.toString ==>"+o2.toString()+
		"\no1.toLocaleString ===>"+o1.toLocaleString()+
		"\no2.toLocaleString ===>"+o2.toLocaleString()
		);

	//join方法
	alert(a1);
	alert(a1.join("@"));
	alert(a1.join("!@#$%^&*((()*&^%$#@((((((((((((((((((((((\"___"));
}

//Array栈实现
var globalA1 = new Array();

function push(){	
	var arg1 = document.getElementById("fun6input1").value;
	var arg2 = document.getElementById("fun6input2").value;
	var count = 0;
	if(arg2.length>0){
		count = globalA1.push(arg1,arg2);
	}else{
		var count = globalA1.push(arg1);
	}
	alert(count);
}

function pop(){
	if(globalA1.length>0){
		var item = globalA1.pop();
		alert(item);
	}
	else{
		alert("it is empty");
	}
}
function fun6(){
	alert(globalA1);
}

//Array队列实现
var globalA2 = new Array();

function push(){	
	var arg1 = document.getElementById("fun7input1").value;
	var arg2 = document.getElementById("fun7input2").value;
	var count = 0;
	if(arg2.length>0){
		count = globalA2.push(arg1,arg2);
	}else{
		var count = globalA2.push(arg1);
	}
	alert(count);
}

function shift(){
	if(globalA2.length>0){
		var item = globalA2.shift();
		alert("shift : "+item);
	}else{
		alert("it is empty");
	}
}

function unshift(){	
	var arg1 = document.getElementById("fun7input1").value;
	var arg2 = document.getElementById("fun7input2").value;
	var count = 0;
	if(arg2.length>0){
		count = globalA2.unshift(arg1,arg2);
	}else{
		var count = globalA2.unshift(arg1);
	}
	alert(count);
}

function pop(){
	if(globalA2.length>0){
		var item = globalA2.pop();
		alert(item);
	}else{
		alert("it is empty");	
	}
}

function fun7(){
	alert(globalA2);
}

//sort()和reverse()方法

function fun8(){
	var a1 = new Array();
	var a2 = new Array();
	a1 = [1,2,3,4,5,6,7];
	a2 = [1,5,15,20,25];

	a1.reverse();
	alert("After a1.reverse() "+a1);
	a1.sort();
	alert("After a1.sort() "+a1);
	
	//默认sort()按照string排序,结果不一定是想要的！！！
	a2.sort();						
	alert("After a2.sort() "+a2);	
}

//带有compare的sort()

function compare(){
	return arguments[0] - arguments[1];
}

function fun9(){
	var a2 = [1,5,15,20,25];
	alert(a2);
	a2.sort(compare);
	alert("After a2.sort(compare) "+a2);
}

//concat()函数,复制原来数组到一个新的数组，并可以以参数的形式在
//新数组后追加其他的元素（数组）

function fun10(){
	var a1 = new Array("num1","num2","num3");
	alert("a1 = " + a1);
	var a2 = a1.concat("num5",["num4","num6"]);
	alert("a1 = " + a1+
		"\na2 = " + a2);
	var a3 = a1.concat();
	alert("a1 = " + a1+
		"\na2 = " + a3);
}

//slice()函数，通过当前数组一个或多个项创建一个新数组

function fun11(){
	var a1 = ["num1","num2","num3","num4","num5","num6"];
	var a2 = a1.slice(2);
	var a3 = a1.slice(1,4);
	alert("a1 = " + a1 +
		"\na2 = " + a2 +
		"\na3 = " + a3);
}

//splice()函数，删除任意数量的项splice(beginNum,count)
//				插入任意数量的项splice(beginNum,0,"Num1","Num2",...)
//				替换任意数量的项splice(beginNum,deleteNum,"Num1","Num2",...)

function fun12(){
	var a1 = ["num1","num2","num3","num4","num5","num6"];
	var rm_a1 = a1.splice(1,2);
	alert("a1    = " + a1 +
		"\nrm_a1 = " + rm_a1
		);
	
	var insert_a1 = a1.splice(2,0,"num7","num8","num9");
	alert("a1        = " + a1 +
		"\ninsert_a1 = " + insert_a1);

	var change_a1 = a1.splice(2,1,"num10","num11","num12");
	alert("a1        = " + a1 +
		"\nchange_a1 = " + change_a1);
}

对应的html应该没什么大问题，今天在html中加上了DOCTYPE 对它的解释放在另一个文章中

<!--==========================================================================
#     FileName: ex6.html
#         Desc: 
#       Author: baobaoyeye
#        Email: bao.renyi@gmail.com
#     HomePage: http://karloo.com
#      Version: 0.0.1
#   LastChange: 2011-07-25 23:14:25
#      History:
#==========================================================================-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test 3 of javascript</title>
<script src="ex6.js" defer="defer" type="text/javascript"></script>
</head>
<body>
<div>
<input type="button" value="fun1btn" id="fun1btn" οnclick="fun1()" />
<input type="text" id="fun1show1" value=""/>
<input type="text" id="fun1show2" value=""/>
<input type="text" id="fun1show3" value=""/>
<input type="text" id="fun1show4" value=""/>
<input type="text" id="fun1show5" value=""/>
<input type="text" id="fun1show6" value=""/>
</div>
<div>
<input type="text" id="fun2input1" value="input your name" />
<input type="text" id="fun2input2" value="input your age" />
<input type="button" id="fun2btn" value="fun2btn" οnclick="fun2()"/>
</div>
<div>
<input type="button" id="fun3btn" value="fun3btn" οnclick="fun3()"/>
</div>
<div>
<input type="button" id="fun4btn" value="fun4btn" οnclick="fun4()"/>
<input type="text" id="fun4show1" value=""/>
<input type="text" id="fun4show2" value=""/>
<input type="text" id="fun4show3" value=""/>
<input type="text" id="fun4show4" value=""/>
</div>
<div>
<input type="button" id="fun5btn" value="fun5btn" οnclick="fun5()"/>
</div>
<div>
<input type="text" id="fun6input1" value="" />
<input type="text" id="fun6input2" value="" />
<input type="button" id="fun6btn1" value="push" οnclick="push()"/>
<input type="button" id="fun6btn2" value="pop" οnclick="pop()"/>
<input type="button" id="fun6btn3" value="fun6btn" οnclick="fun6()"/>
</div>
<div>
<input type="text" id="fun7input1" value="" />
<input type="text" id="fun7input2" value="" />
(((((((((((((
<input type="button" id="fun7btn1" value="push" οnclick="push()"/>
<input type="button" id="fun7btn2" value="shift" οnclick="shift()"/>
)))))))))))))
<input type="button" id="fun7btn1" value="unshift" οnclick="unshift()"/>
<input type="button" id="fun7btn2" value="pop" οnclick="pop()"/>
<input type="button" id="fun7btn3" value="fun7btn" οnclick="fun7()"/>
</div>
<div>
<input type="button" id="fun8btn" value="fun8btn" οnclick="fun8()"/>
</div>
<div>
<input type="button" id="fun9btn" value="fun9btn" οnclick="fun9()"/>
</div>
<div>
<input type="button" id="fun10btn" value="fun10btn" οnclick="fun10()"/>
</div>
<div>
<input type="button" id="fun11btn" value="fun11btn" οnclick="fun11()"/>
</div>
<div>
<input type="button" id="fun12btn" value="fun12btn" οnclick="fun12()"/>
</div>
</body>
</html>

明天学习Date类型，然后结合这javascript画图，做个简单的动画时钟，嘿嘿！争取明天的这个时候能搞定！