学习笔记——day31(函数)

函数

是一段可以复用的代码块

1、声明函数的三种方法

1）function命令

function print(s){
document.write(s+"<br/>");
}

2）函数表达式

var printStr =function(str){
document.write(str+"<br/>");
}

3）Function 构造函数 : 入门级别用的不多…

var add = new Function('x','y','return (x + y)');

2、函数的调用

print()
printStr("goodgoodstudy");
var result =add(1,2);

3、参数

function square(x) { //x 为形参
return x * x;
}
square(2) // 4 2 为实参

或 ||

/*
		 * 默认值，非真为1
		 */
			function test(a){
				a = a||1;
				return a;
			};
			
			//调用''
			var rs1 = test('');
//			alert(rs1);
			//0
			var rs2 = test(0);
//			alert(rs2);
			//不传
			var rs3 = test();
//			alert(rs3);

4、eval &jsonp

eval执行字符串，将字符串当作语句执行。

<script>
		/*
		 js是动态语言
		 * */
			/*var str = "var a = 1";
			eval(str);
			console.log(a);
			var str2 = "function add(a,b){return a+b;}";
			eval(str2);
			var rs = add(10,20);
			console.log(rs);
//			var rs2 = window.prompt("输入一个函数名称为test：");
//			eval(rs2);
//			test();
			var rs3 = window.prompt("你可以调用我的函数add，可以传递参数a,b，将返回a+b：");
			//str = "add(1,2)";
			var rs4 = eval(rs3);
//			alert(rs4);
			
			
			//请求http://www.baidu.com?callback=add
			//响应 "add({'id':100})"   
			function add(jsonp){
				console.log(jsonp.id)
			};
			var str = "add({'id':100})";
			eval(str);*/
			
		</script>
		<script type="text/javascript" src="js/test.js" ></script>
		<script>
//			alert(a);
			//调用函数
//			alert(test());
			function add(a,b){
//				alert("a+b="+(a+b))
			};
			/**
			 * 传递参数为json格式对象，要求有name，age属性
			 * @param {Object} obj
			 */
			function jsonp(obj){
				alert(obj.name+"--"+obj.age);
			}
		</script>
		<!--test2.js-->
		<!--script可以跨域-->
		<script type="text/javascript" src="js/test2.js" ></script>
		<script type="text/javascript" src="localhost:8080/hi/user?cb=jsonp" ></script>
		<!--<script>
			jsonp({"name":'zs',"age":18});
		</script>-->

5、 匿名函数

没有名字的函数，只调用一次

<script>
		/*匿名函数：
		 立刻调用*/
			/*var a = function(){
				
			};
			a();*/
			/*无参*/
			/*(function(){
				alert("helloworld");
			})();*/
			
			/*加法*/
			(function(a,b){
				alert(a+b);
			})(1,2);
		</script>

6、函数的闭包

定义：
在函数体内部的函数。闭包只在声明它的函数内部有效。
扩大了声明周期，所以消耗资源。

<script>
			function outter(){
				var a = 100;
				function inner(){
					//内部函数可以调用外部资源
					alert("inner"+a);
				};
//				inner();
				return inner;
			};
			
			
			//如何执行inner呢？
			//可扩大局部变量生命周期
			var i = outter();
			i();
			function outter2(){
				var count = 0;
				function inner(){
					count+=1;
					return count;
				};
				return inner;
			};
			
			var i2 = outter2();
			console.log(i2());
			console.log(i2());
			console.log(i2());
			console.log(i2());
			console.log(i2());
			console.log(i2());
			console.log(i2());
			
			//带参数的闭包
			function outter3(c){
				function inner(){
					c+=1;
					return c;
				};
				//返回内部函数丶引用，而不是调用！！！
				return inner;
			};
			
			var i3 = outter3(100);
			console.log(i3());
			console.log(i3());
			console.log(i3());
			console.log(i3());
			console.log(i3());
			console.log(i3());
			console.log(i3());
			
			
		</script>

7、递归

<script>
			/*
			 Σ100=1+2+3+....100
			 * */
			/*var sum = 0;
			for(var i = 1;i<=100;i++){
				sum+=i;
			};
			console.log("Σ100="+sum);*/
			
			/*
			 * 要点：
			 * 	递归头：
			 * 		开始返回值
			 * 		Σ1 = 1;
			 * 	递归体：
			 * 		重复执行的代码
			 * 		Σn=Σ(n-1) +n
			 * 
			 Σ100=1+2+3+....100
			 Σ100=Σ99+100;
			 Σ99=Σ98+99;
			 ....
			 Σn=Σ(n-1) +n
			 
			 Σ1 = 1;
			 * */
			/**
			 * 求Σn的和
			 * @param {Object} n
			 */
			function sum(n){
				if(n==1){
					return 1;
				}
				return sum(n-1)+n;
			};
			
			var s100 = sum(100);
			alert(s100);
		</script>

8、汉诺塔

<script>
			/*
			 * n：汉诺塔
			 * 1.头：
			 * 	n==1
			 * 2.体：
			 * 	前n-1:从开始--》临时
			 * 	n：从开始--》目标
			 * 	前n-1：从临时--》目标
			 */
			/**
			 * n层汉诺塔移动攻略
			 * @param {Object} n：层
			 * @param {Object} a：开始
			 * @param {Object} b：临时
			 * @param {Object} c：目标
			 */
			var count = 0;
			function hanoi(n,a='A',b='B',c='C'){
				
				if(n==1){
					count++;
					console.log(count+"次:"+n+":"+a+"-->"+c);
					return ;
				}
				hanoi(n-1,a,c,b);
				count++;
				console.log(count+"次:"+n+":"+a+"-->"+c);
				hanoi(n-1,b,a,c);
				
			};
			hanoi(3);
			console.log(count);
		</script>

9、7个台阶

<script>
			/*
			 * 七个台阶：
			 * 	第一步：
			 * 		1： + 6
			 * 		2：+5
			 *  6：
			 * 		第二步：
			 * 			1：5
			 * 			2：4
			 * 5:
			 * f(n)=f(n-1)+f(n-2)   (n>2)
			 * 		
			 * f(7)=f(6)+f(5);
			 * f(6)=f(5)+f(4);
			 * f(5)= f(4)+f(3);
			 * 头：
			 * f(1)=1
			 * f(2)=2;
			 */
			function step(n){
				if(n==1){
					return 1;
				}else if(n==2){
					return 2;
				}
				return step(n-1)+step(n-2);
			};
			
			console.log(step(7));
		</script>

10、创建追加节点

<script>
			var container = document.getElementById("container");
			
			/*1.向container追加一个p标签，内容为我是一个段落*/
			var p = document.createElement("p");
			var txt = document.createTextNode("我是一个段落");
			p.appendChild(txt);
			container.appendChild(p);
			/*2.向cotainer追加一个span，内容为我是span*/
			var span = document.createElement("span");
			var txt2 = document.createTextNode("我是span");
			//关联
			span.appendChild(txt2);
			//span与container
			container.appendChild(span);
			
			//3.div
			var div = document.createElement("div");
			div.innerHTML="我是div";
			container.append(div);
			//为div添加id属性
			div.setAttribute("id","dv");
			console.log(div.getAttribute("id"));
			//设置title属性
			div.title="我是title";
			console.log(div.getAttribute('title'));
			//设置class属性,设置className
			div.className="cls";
			console.log(div.className);
			
			div.setAttribute("class",div.getAttribute('class')+"  cls2");
		</script>