`

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>
  • 大小: 37.9 KB
  • 大小: 35.8 KB
  • 大小: 46 KB
分享到:
评论

相关推荐

    狂神Java学习笔记————前端入门——html、css、JavaScript学习代码

    【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料,这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...

    web学习笔记 —— javascript基础

    这篇“web学习笔记——javascript基础”将带你走进JavaScript的世界,理解其基本概念和常用语法。 JavaScript语法基础: 1. 变量:在JavaScript中,变量用于存储数据。声明变量使用`var`关键字,例如`var myVar = ...

    前端学习(四)——javascript学习笔记(二)函数

    前端学习——javascript学习笔记(二)函数

    Cocos2d-x学习笔记——完全掌握C++ API与游戏项目开发.zip

    本学习笔记旨在帮助开发者全面掌握Cocos2d-x的C++ API以及游戏项目的开发流程。 一、Cocos2d-x框架基础 Cocos2d-x是Cocos2d-x系列的C++版本,它提供了丰富的图形绘制、动画制作、音频播放、物理引擎等功能。Cocos2d...

    Javascript学习笔记___自学实用

    JavaScript学习笔记——深入理解基础与函数 在JavaScript中,学习基础知识是至关重要的,因为它是所有进一步编程技巧的基础。首先,我们需要了解JavaScript中的数据类型。在JavaScript中,有五种简单的数据类型:...

    JavaScript学习笔记

    #### 全局对象——Window 在JavaScript中,全局对象通常是`window`对象(在浏览器环境中)。所有未声明作用域的变量都被视为全局变量,并成为`window`对象的属性。 ```javascript var objectA = { name: "myName" ...

    AngularJS学习笔记——与用户交互的动态清单列表

    AngularJS是一种强大的JavaScript框架,它提供了丰富的功能,使开发者能够轻松构建动态Web应用。在这个实例中,我们将关注以下几个核心概念: 1. **双向数据绑定**:AngularJS的核心特性之一就是双向数据绑定,它...

    编程词典软件——函数词典!

    《编程词典软件——函数词典》是一款专为编程初学者和高级开发者设计的实用工具,它集成了各种编程语言的函数、方法和概念解释,是编程学习与实践中不可或缺的助手。这款软件不仅有助于初学者快速理解编程基础知识,...

    javascript入门学习笔记

    这些只是JavaScript学习笔记的一部分,深入理解并熟练运用这些概念,将为JavaScript编程打下坚实的基础。随着学习的深入,还会接触到更多高级特性和框架,如闭包、原型链、AJAX、jQuery、Vue.js、React.js等,这些都...

    JavaScript基础教程笔记

    ### JavaScript基础教程笔记知识点 #### 一、JavaScript简介 - **定义**:JavaScript是一种轻量级的编程语言,主要用于Web浏览器中的网页交互控制。 - **发展历史**:1995年由Netscape公司的Brendan Eich设计并...

    Javascript学习笔记之 函数篇(三) : 闭包和引用

    如`Counter`函数所示,它接收一个起始值`start`,然后返回两个闭包——`increment`和`get`。这两个闭包都保有对外部`count`变量的引用,使得它们能够增加或获取`count`的值,但外部无法直接修改`count`,从而实现了...

    javascript从入门到跑路—–小文的js学习笔记(7)——–js函数

    javascript从入门到跑路—–小文的js学习笔记(1)———script、alert、document。write() 和 console.log 标签 … … javascript从入门到跑路—–小文的js学习笔记目录 ** 在说函数前,补充一个函数的作用域的知识...

    js学习笔记——(15)jQuery选择器、样式操作、效果

    - `$(element).animate({property1: value1, property2: value2}, duration, [easing], [callback])`:自定义动画,可以改变多个CSS属性,duration指定时长,easing指定缓动函数,callback是动画完成后执行的函数。...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4...

    张孝祥JAVASCRIPT笔记

    他的笔记涵盖了JavaScript的核心概念、语法、数据类型、控制结构、函数、对象、数组、字符串、正则表达式、DOM操作、BOM处理以及事件处理等多个方面。这些知识点对于初学者和有经验的开发者来说都是十分重要的。 ...

    学习笔记 MHT2

    【学习笔记 MHT2】是一份综合性的IT学习资料,主要涵盖了JavaScript编程、软件开发工具、Web服务器技术、编码解码方法以及设计模式等多个领域的知识。以下是对这些知识点的详细阐述: 1. **JavaScript经典技巧**:...

    JavaScript基础笔记-尚硅谷视频自己总结

    - 微软公司也在其浏览器IE3中引入了自己的JavaScript实现——JScript。 - 为了统一标准,几个主要的软件公司合作制定了ECMAScript标准。 #### 三、JavaScript的核心组成部分 - **ECMAScript**: 定义了语言的...

Global site tag (gtag.js) - Google Analytics