javascript 学习笔记——函数

记录以下网址的javascript core crash章节http://courses.coreservlets.com/Course-Materials/ajax-basics.html
1、

（代码统一放在后面）
2、高级

3、特殊函数

源代码1

<!-- LCTestJS_functions.html  version: 2012_01_11 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试javascript的函数 version: 2012_01_11</title>
<style>
h3 {
	color: #FFF;
	background-color: #09F;
	font-style: normal;
	font-weight: bold;
}

h4 {
	font-weight: bolder;
	color: #d00;
	background-color: #CCC;
}

h5{
	background-color: #FFC;
	color: #000;
	font-size: 18px;
}
</style>
</head>
<body>
	<h2>测试javascript的函数 version: 2012_01_11</h2>

	<h3>函数赋值给变量（也可以赋值给对象的成员变量）</h3>
	<h5>
		function square(x){return x*x;}
		<br>var funcVar=square;
		<br>或者 var funcVar=function(x){return (x*x);};
	</h5>
	<script type="text/javascript">
		function square(x) {
			return x * x;
		}
		//var funcVar = square;
		var funcVar=function(x){return (x*x);};
		document.write("<p>funcVar(5)=" + funcVar(5));
	</script>
	
	<!--        ----------------------         -->
	<h3>函数数组</h3>
	<h5>
		function sqrt(x){return Math.sqrt(x);}
		<br>var funcArray=[square,sqrt];
	
	</h5>
	<script type="text/javascript">
		function sqrt(x){return Math.sqrt(x);}
		//var funcVar2 = sqrt;
		var funcArray=[square,sqrt];
		document.write("<p>funcArray[0](4)=" + funcArray[0](4));
		document.write("<br>funcArray[1](4)=" + funcArray[1](4));
	</script>
	
	<!--        ----------------------         -->
	<h3>函数作为其他函数的参数</h3>
	<h5>
		function func1SubFunc2(func1,func2,x){return func1(x)-func2(x);}
	</h5>
	<script type="text/javascript">
		function func1SubFunc2(func1,func2,x){return func1(x)-func2(x);}
		document.write("<p>func1SubFunc2(square,sqrt,4)=" + func1SubFunc2(square,sqrt,4));

	</script>
	
	<!--        ----------------------         -->
	<h3>函数作为返回值</h3>
	<h5>
		function returnFunc(x){if(x==1)return square;else return sqrt;}
	</h5>
	<script type="text/javascript">
		function returnFunc(x){if(x==1)return square;else return sqrt;}
		document.write("<p>returnFunc(1)(4)=" + returnFunc(1)(4));
		document.write("<p>returnFunc(2)(4)=" + returnFunc(2)(4));
	</script>
	
	<!--        ----------------------         -->
	<h3>匿名函数</h3>
	<h5>
		 (function(x) {return(x+7);})(10); ->  17
	</h5>
	<script type="text/javascript">
		document.write("<p>(function(x) {return(x+7);})(10)=" + (function(x) {return(x+7);})(10));
	</script>
	
</body>
</html>

源代码2

<!-- LCTestJS_functionsAdvanced.html  version: 2012_01_11 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试javascript的函数 (高级) version: 2012_01_11</title>
<style>
h3 {
	color: #FFF;
	background-color: #09F;
	font-style: normal;
	font-weight: bold;
}

h4 {
	font-weight: bolder;
	color: #d00;
	background-color: #CCC;
}

h5{
	background-color: #FFC;
	color: #000;
	font-size: 18px;
}
</style>
<script type="text/javascript">
function printSpace(n){//输出n个空格
	if(n==null)
	document.write();
	else for(var i=0;i<n;i++)document.write('&nbsp;');
}
function print(str,description){//新起一段输出str，之后空10格，再输出description
	document.write("<p>"+str);
	printSpace(10);
	if(description!=null)
		document.write("//"+description);
}
</script>
</head>
<body>
	
	<h2>测试javascript的函数(高级) version: 2012_01_11</h2>
	
	<h3>闭包——Anonymous Function with Captured Data</h3>
	<h4>注意返回的内层匿名函数的参数才是minus7的参数！即minus7(n)=n-7</h4>
	<h5>
		function makeMinusFunc(x){return (function(n){return n-x;});};
		<br>var seven=7;
		<br>var minus7=makeMinusFunc(7);
		<br>seven=8;//不影响上面的函数，函数已经生成！！minus7(n)还是n-7！
	</h5>
	<script type="text/javascript">
		function makeMinusFunc(x){return (function(n){return n-x;});};
		var seven=7;
		var minus7=makeMinusFunc(seven);
		seven=8;//不影响上面的函数，函数已经生成！！minus7(n)还是n-7！
		document.write("<p>minus7(6)=\t" + minus7(6));
	</script>
	
	<!--        ----------------------         -->
	<h3>函数.apply()——将参数以数组方式传递</h3>
	<h4>apply()的第一个参数为this指针，第二个为参数的数组表示</h4>
	<h5>
		var obj1={p:1};    var obj2={p:2};
		<br>function minus(x,y){return (this.p+x-y);}
	</h5>
	<script type="text/javascript">
		var obj1={p:1};    var obj2={p:2};
		function minus(x,y){return (this.p+x-y);}
		document.write("<p>minus.apply(obj1,[9,4,100])=" + minus.apply(obj1,[9,4,100]));
		printSpace(10);document.write("//第三个参数(100)其实没用到");
		document.write("<p>minus.apply(obj2,[9,4,100])=" +minus.apply(obj2,[9,4,100]));
		document.write("<p>minus.apply(null,[3])=" + minus.apply(null, [3]));
		printSpace(10);document.write("//因为minus方法需要两个参数！");
	</script>
	
	<!--        ----------------------         -->
	<h3>函数.call()</h3>
	<h4>与 函数.apply() 类似，但之后为不定个数的参数</h4>
	<script type="text/javascript">
		document.write("<p>minus.call(obj1,9,4)=" + minus.call(obj1,9,4));
	</script>
	
</body>
</html>

源代码3

<!-- LCTestJS_functionsSpecial.html  version: 2012_01_11 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试javascript的函数 (evel等特特殊函数) version: 2012_01_11</title>
<style>
h3 {
	color: #FFF;
	background-color: #09F;
	font-style: normal;
	font-weight: bold;
}

h4 {
	font-weight: bolder;
	color: #d00;
	background-color: #DDD;
}

h5{
	background-color: #FFC;
	color: #000;
	font-size: 18px;
}
</style>
<script type="text/javascript">
function printSpace(n){//输出n个空格
	if(n==null)
	document.write();
	else for(var i=0;i<n;i++)document.write('&nbsp;');
}
function print(str,description){//新起一段输出str，之后空10格，再输出description
	document.write("<p>"+str);
	printSpace(10);
	if(description!=null)
		document.write("//"+description);
}
</script>
</head>
<body>
	
	<h2>测试javascript的函数(evel等特特殊函数) version: 2012_01_11</h2>
	
	<h3>instanceof——测试是否为某类的实例</h3>
	<h4>类别可为：Number（数字）,Object（类）,String（字符串）,Function(函数),Array(数组)等；<br> 不可为：undefined(未定义)</h4>
	<script type="text/javascript">	
		document.write("<p>7 instanceof Array=\t" +(7 instanceof Array));//(7 instanceof Array)的括号必须！！！
		document.write("<p>[2,3] instanceof Array=\t" +([2,3] instanceof Array));
	</script>
	
	<!--        ----------------------         -->
	<h3>typeof——返回变量的类型(字符串表示)</h3>
	<h4>与类名不同，返回的字符串首字母是小写的</h4>
	<h5>
		var obj1={p:1};    var arr=[2,3];
		<br>function minus(x,y){return (this.p+x-y);}
	</h5>
	<script type="text/javascript">
	var obj1={p:1};    var arr=[2,3];
		function minus(x,y){return (this.p+x-y);}
		print("(typeof 1)="+ (typeof 1));
		print("(typeof 1)=='number' \t?\t"+ ((typeof 1)=='number'));
		print("(typeof 'str')="+ (typeof 'str'));
		print("(typeof obj1)="+ (typeof obj1));
		print("(typeof arr)="+ (typeof arr),"注意对于Array类型的变量返回object！！！");
		print("(typeof minus)="+ (typeof minus));
		print("(typeof zzz)="+ (typeof zzz));
	</script>
	
	<!--        ----------------------         -->
	<h3>eval——执行字符串</h3>
	<h5>	var test2 = "{ firstName: 'Jay', lastName: 'Sahn' }";
	<br>var person1=eval('test2');
	<br>var person2 = eval("(" + test2 + ")"); </h5>
	<script type="text/javascript">
	print("eval('2+3;')=\t"+eval('2+3;'));
	print("eval('2+minus.apply(obj1, [6,3]);')=\t"+eval('2+minus.apply(obj1, [6,3]);'));
	var test2 = "{ firstName: 'Jay', lastName: 'Sahn' }";
	var person1=eval('test2');
	var person2 = eval("(" + test2 + ")"); 
	print("typeof person1=\t"+typeof person1,"string类型！！大括号被当成了界线符号"); 
	print("typeof person2=\t"+typeof person2,"object类型，加小括号是必须的");
	</script>
	
	
		<!--        ----------------------         -->
	<h3>可变参数</h3>
	<h4>每个函数内均可使用arguments.length获取实际的参数数量<br>用arguments[i]获取第i+1个参数</h4>
	<h5>	
		var testFunc=function(x,y){
		<br>document.write("参数个数为：\t"+arguments.length);
		<br>if(arguments.length>0)document.write(";\t____参数为：");
		<br>for(var i=0;i&lt;arguments .length;i++)
		<br>	document.write("\t"+arguments[i]+" ;");
	<br>}
	</h5>
	<script type="text/javascript">
	var testFunc=function(x,y){
		document.write("参数个数为：\t"+arguments.length);
		if(arguments.length>0)document.write(";\t____参数为：");
		for(var i=0;i<arguments.length;i++)
			document.write("\t"+arguments[i]+" ;");
	}
	document.write("<p>testFunc()=");testFunc();	 
	document.write("<p>testFunc(1,2,3,4)=");testFunc(1,2,3,4);
	document.write("<p>testFunc([1,2,3,4])=");testFunc([1,2,3,4]);
	</script>
</body>
</html>

javascript 学习笔记——函数

猜你喜欢