js基础运用 day2

1.Java中switch语句只能用于选择byte、int等整数类型,char类型和jdk7新增的String类型。而js支持所有类型 

<!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>JS语言演示---流程控制语句讲解</title>

<style>
table {
	border: 1px solid red;
	border-collapse: collapse;
}

td {
	border: 1px solid red;
	width: 30px; 
}
</style>
<script type="text/javascript">
	function a1() {
		var x = -3;
		if (x - 1) {//"非0"即是true
			alert("yes...."); //除"x+3"外都会执行,如当x,x-1,... 
		} else {
			alert("no....");//只有当x+3时才会执行
		}

		x = 4;
		if (x > 1) {
			alert("a");
		} else if (x > 2) {
			alert("b");
		} else if (x > 3) {
			alert("c");
		} else {
			alert("d");
		}
		//这一段代码只会执行alert("a")
		//if-else if-else语句中,只会进入一个条件块执行
	}

	function a2() {
		/*Java中switch语句只能用于选择byte、int等整数
		     类型,char类型和jdk7新增的String类型。而js支持所有类型 */
		var x = document.getElementById("t1").value;//读取编辑框中的内容
		switch (x) {
		case "aa":
			alert("aa");
			break;
		case "bb":
			alert("bb");
			break;
		case "cc":
			alert("cc");
			break;
		default:
			alert("dd");
		}
	}

	function a3() {
		var i = 1, s = 0;
		while (i <= 100) {
			s += i;
			i++;
		}
		//document.write("s="+s+"<br/>");
		alert("s=" + s);

		i = 1;
		s = 0;
		do {
			s += i;
			i++;
		} while (i <= 100);
		alert("s2=" + s);
	}

	function a4() {
		a: for ( var x = 0; x < 3; x++) {
			for ( var y = 0; y < 4; y++) {
				document.write("y=" + y);
				if (y % 2 == 0) {
					//break; //continue;
					break a;
				}
			}
			document.write("<br/>");
		}
	}

	function a5() {
		for ( var x = 1; x <= 9; x++) {
			for ( var y = 1; y <= x; y++) {
				document.write(x + "*" + y + "=" + x * y);
				if (y == x) {
					document.write("<br/>");
				} else {
					document.write("&nbsp;");
				}
			}
		}
	}
</script>
</head>
<body>
	<input type="button" value="if-else演示" onclick="a1();">
	<br />
	<br /> 选项:
	<input id="t1" type="text">
	<input type="button" value="switch-case演示" onclick="a2();">
	<br />
	<br />

	<input type="button" value="while,do-while演示" onclick="a3();">
	<br />
	<br />

	<input type="button" value="for演示" onclick="a4();">
	<br />
	<br />

	<input type="button" value="99乘法表演示1" onclick="a5();">
	&nbsp;&nbsp;

	<h3>99乘法表演示2</h3>
	<script type="text/javascript">
		//用for循环实现在页面写一个99乘法表,且用表格封装
		document.write("<table>");
		for ( var x = 1; x <= 9; x++) {
			document.write("<tr>");
			for ( var y = 1; y <= x; y++) {
				document.write("<td>" + x + "*" + y + "=" + x * y + "</td>");
			}
			document.write("</tr>");
		}
		document.write("</table>");
	</script>

</body>
</html>

 

2JS中的数组非常重要,因为JS中只有一个容器---数组,它是Java中的数组与集合的综合

3JS中的数组长度可变,元素类型任意

4.数组定义方式1: 定义时直接赋初值

5.数组定义方式2: 用new对象的方式创建

6在创建时给参数:1个参数时是长度,2个及以上参数为元素初始值。

<!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>JS语言演示---数组用法讲解</title>

<script type="text/javascript">
	//JS中的数组非常重要,因为JS中只有一个容器---数组,它是Java中的数组与集合的综合
	//JS中的数组长度可变,元素类型任意

	///数组定义方式1: 定义时直接赋初值
	 function a1(){
	    	 var arr = [1,3,5]; //※与Java不一样的地方1:  类型中没有"[]",数据是用"[]"封装   ,Java方式是: int[] arr={1,3,5}
	         //alert( typeof(arr) ); //object
	         alert(arr); //1,3,5  js中可以直接用数组名来输出它的内容
	         var x = arr[0]+arr[2]; //x=6  对数组元素的引用和Java是一样的
	         alert("x="+x);
	     }
	     function a2(){
	    	 var arr=[1,3,5];
	    	 arr[0]=8;
	    	 
	    	 //※Js的数组有集合的功能,长度可以自动增长
	    	 arr[5]=7;//Java中是数组下载越界的,Js中不会
	    	 alert(arr); //1,3,5, , ,7
	    	 alert(arr[3]);//undefined
	    	 
	    	//※Js的数组有集合的功能,元素类型可以任意
	    	 arr[4] = "abc";
	    	 alert(arr);
	    	 arr[4]=23.5;
	    	 alert(arr);
	     }
	     function a3(){
	    	//可以先声明一个空数组,然后往里面不断赋值,因为JS中的数组长度是可变的
	    	 var arr = []; 
	    	 arr[0]=1;
	    	 arr[5]=3;  arr[2]="abc"; arr[4]=true;
	    	 arr[10]=7;  arr[6]=3.14;
	    	 //可以用arr.length读取数组当前的长度
	    	 alert(arr.length); //11
	    	 
	    	 for(var i=0;i<arr.length;i++){
	    		 document.write(arr[i]+"&nbsp;");
	    	 }
	     }
	     
	      ///数组定义方式2: 用new对象的方式创建
	     function a4(){
	    	 var arr = new Array(); //等价于: var arr=[];
	    	 arr[0]=3.4;
	    	 arr[1]="aa";
	    	 arr[2]=false;
	    	 alert(arr.length);
	    	 alert(arr);
	     }
	     function a5(){
	    	 /*
	    	        在创建时给参数:
	    	        1个参数时是长度,2个及以上参数为元素初始值
	    	 */
	    	 var arr = new Array(3); //内容: undefined,undefined,undefined
	    	 alert(arr.length); //3
	    	 
	    	 var arr2 = new Array(3,4); //内容: 3,4
	    	 alert(arr2.length); //2
	    	 
	    	 var arr3 = new Array(3,4,7); //内容: 3,4,7
	    	 alert(arr3.length); //3
	     }
	     
	     function a6(){
	    	 //二维数组
	    	 var arr =[];
	    	 arr[0]=[1,3,5];
	    	 arr[1]=[2,1,4,6,8,99];
	    	 arr[2]="abc";
	    	 arr[3]=10;
	    	 for(var i=0;i<arr.length;i++){
	    		 for(var j=0; j<arr[i].length;j++){
	    			 document.write(arr[i][j]+"&nbsp;");
	    		 }
	    		 document.write("<br/>");
	    	 }
	    	 document.write("arr[3]:"+arr[3]);
	     }
</script>
</head>
<body>
   <input type="button" value="演示1" onclick="a1();"> <br/><br/>
	   <input type="button" value="演示2" onclick="a2();"> <br/><br/>
	   <input type="button" value="演示3" onclick="a3();"> <br/><br/>
	   
	   <input type="button" value="演示4" onclick="a4();"> <br/><br/>
	   <input type="button" value="演示5" onclick="a5();"> <br/><br/>
	   
	   <input type="button" value="演示5" onclick="a6();"> <br/><br/>
</body>
</html>

 

7.与Java不一样的地方:  类型中没有"[]",数据是用"[]"封装   ,Java方式是: int[] arr={1,3,5}
   js中可以直接用数组名来输出它的内容
    对数组元素的引用和Java是一样的

<!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>JS语言演示---数组用法讲解</title>

<script type="text/javascript">
	//JS中的数组非常重要,因为JS中只有一个容器---数组,它是Java中的数组与集合的综合
	//JS中的数组长度可变,元素类型任意

	///数组定义方式1: 定义时直接赋初值
	 function a1(){
	    	 var arr = [1,3,5]; //※与Java不一样的地方1:  类型中没有"[]",数据是用"[]"封装   ,Java方式是: int[] arr={1,3,5}
	         //alert( typeof(arr) ); //object
	         alert(arr); //1,3,5  js中可以直接用数组名来输出它的内容
	         var x = arr[0]+arr[2]; //x=6  对数组元素的引用和Java是一样的
	         alert("x="+x);
	     }
	     function a2(){
	    	 var arr=[1,3,5];
	    	 arr[0]=8;
	    	 
	    	 //※Js的数组有集合的功能,长度可以自动增长
	    	 arr[5]=7;//Java中是数组下载越界的,Js中不会
	    	 alert(arr); //1,3,5, , ,7
	    	 alert(arr[3]);//undefined
	    	 
	    	//※Js的数组有集合的功能,元素类型可以任意
	    	 arr[4] = "abc";
	    	 alert(arr);
	    	 arr[4]=23.5;
	    	 alert(arr);
	     }
	     function a3(){
	    	//可以先声明一个空数组,然后往里面不断赋值,因为JS中的数组长度是可变的
	    	 var arr = []; 
	    	 arr[0]=1;
	    	 arr[5]=3;  arr[2]="abc"; arr[4]=true;
	    	 arr[10]=7;  arr[6]=3.14;
	    	 //可以用arr.length读取数组当前的长度
	    	 alert(arr.length); //11
	    	 
	    	 for(var i=0;i<arr.length;i++){
	    		 document.write(arr[i]+"&nbsp;");
	    	 }
	     }
	     
	      ///数组定义方式2: 用new对象的方式创建
	     function a4(){
	    	 var arr = new Array(); //等价于: var arr=[];
	    	 arr[0]=3.4;
	    	 arr[1]="aa";
	    	 arr[2]=false;
	    	 alert(arr.length);
	    	 alert(arr);
	     }
	     function a5(){
	    	 /*
	    	        在创建时给参数:
	    	        1个参数时是长度,2个及以上参数为元素初始值
	    	 */
	    	 var arr = new Array(3); //内容: undefined,undefined,undefined
	    	 alert(arr.length); //3
	    	 
	    	 var arr2 = new Array(3,4); //内容: 3,4
	    	 alert(arr2.length); //2
	    	 
	    	 var arr3 = new Array(3,4,7); //内容: 3,4,7
	    	 alert(arr3.length); //3
	     }
	     
	     function a6(){
	    	 //二维数组
	    	 var arr =[];
	    	 arr[0]=[1,3,5];
	    	 arr[1]=[2,1,4,6,8,99];
	    	 arr[2]="abc";
	    	 arr[3]=10;
	    	 for(var i=0;i<arr.length;i++){
	    		 for(var j=0; j<arr[i].length;j++){
	    			 document.write(arr[i][j]+"&nbsp;");
	    		 }
	    		 document.write("<br/>");
	    	 }
	    	 document.write("arr[3]:"+arr[3]);
	     }
</script>
</head>
<body>
   <input type="button" value="演示1" onclick="a1();"> <br/><br/>
	   <input type="button" value="演示2" onclick="a2();"> <br/><br/>
	   <input type="button" value="演示3" onclick="a3();"> <br/><br/>
	   
	   <input type="button" value="演示4" onclick="a4();"> <br/><br/>
	   <input type="button" value="演示5" onclick="a5();"> <br/><br/>
	   
	   <input type="button" value="演示5" onclick="a6();"> <br/><br/>
</body>
</html>

 

8.可以用new的方式创建函数 ---动态函数,功能类似于Java中的类反射 

9.JS的函数内部可以再定义函数,而Java不允许这样

10.以后事件注册时写成下面形式
                    btnObj.οnclick=function(){
                          函数体.....
                    };

<!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>JS语言演示---函数讲解3</title>
<script type="text/javascript">
	/* 可以用new的方式创建函数 ---动态函数,功能类似于Java中的类反射   */
	function a1() {
		var add = new Function("x,y", "var sum;sum=x+y;return sum;");
		var s = add(10, 20);
		alert("s=" + s);
	}

	function a2() {
		var p1 = document.getElementById("param").value;
		var p2 = document.getElementById("fun1").value;
		var f = new Function(p1, p2);
		alert(f(10, 20));
	}

	//JS的函数内部可以再定义函数,而Java不允许这样
	//匿名函数
	function a3() {

		var abc = function(a, b) {
			return a * b;
		};
		/*上面的代码等价于:
				 function ff(a,b){
				     return a*b;
			     }
			     var abc = ff;
		 */

		alert(abc(2, 5)); //通过别名调用匿名函数
	}

	function a4() {
		/*以后事件注册时写成下面形式
				    btnObj.onclick=function(){
					      函数体.....
				    };
		 */
		var btnObj = document.getElementById("btn1");
		btnObj.onclick = function() {
			alert("aaaa....");
		};
		alert("功能添加完毕!");
	}
</script>
</head>
<body>
	<input type="button" value="演示1" onclick="a1();">
	<br />
	<br /> 参数列表:
	<input type="text" id="param" />
	<br /> 函数体:
	<input type="text" id="fun1" />
	<br />
	<input type="button" value="演示2" onclick="a2();">
	<br />
	<br />

	<input type="button" value="匿名函数" onclick="a3();">
	<br />
	<br />
	<input type="button" value="没功能" id="btn1"> &nbsp;&nbsp;
	<input type="button" value="以后注册事件响应时常用匿名函数--给btn1注入功能" onclick="a4();">
	<br />
	<br />
</body>
</html>

10. js函数的一些小细节---与Java不一样的地方:

  1) 函数调用与参数

  2)  js中的函数不存在重载。定义了函数,只要通过该函数名就可以调用它, 调用不调用跟参数没有关系。参数匹配时,对应参数有数据传递时就接收,没用就是undefined,多余的就不接收。
               
 3) js中的函数只以函数名来识别调用,跟参数没关系,参数只是用于传递数据。
               
 4) 每个函数内部都有一个arguments[]用于接收并存储所有实参, 不管函数定义时的参数列表有没有定义或接收。

11. js函数的一些小细节---与Java不一样的地方:

函数有别名:
          函数名只是函数对象的一个引用(变量),同一个函数对象可以有多个引用指向它(非声明时的名称就是别名),  通过别名可以和原函数名一样访问该函数对象。
             

<!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>JS语言演示---函数讲解2</title>
<script type="text/javascript">
 /* js函数的一些小细节---与Java不一样的地方:
			   1. 函数调用与参数
			   js中的函数不存在重载。定义了函数,只要通过该函数名就可以调用它,
			      调用不调用跟参数没有关系。参数匹配时,对应参数有数据传递时就接收,
			      没用就是undefined,多余的就不接收。
			   
			   js中的函数只以函数名来识别调用,跟参数没关系,参数只是用于传递数据。
			   
			       每个函数内部都有一个arguments[]用于接收并存储所有实参,
			       不管函数定义时的参数列表有没有定义或接收。
			   */
       function show(x,y){
			   alert(x+","+y);
		   }
		   function a1(){
			   show(1,8); //1,8
			   show(1); //1, undefined
			   show(1,2,3); //1,2
			   show("aa",0.6,3); //aa,0.6
		   }
		   
		   
		   function show2(x,y){
			   alert(x+","+y);
			   for(var i=0; i<arguments.length;i++){
				   document.write(arguments[i]+"&nbsp;");
			   }
		   }
		   function a2(){
			   show2("aa", 0.6, 3, true); 
		   }
</script>
<script type="text/javascript">
/* js函数的一些小细节---与Java不一样的地方:
		   2. 函数有别名
		             函数名只是函数对象的一个引用(变量),
		             同一个函数对象可以有多个引用指向它(非声明时的名称就是别名),
		             通过别名可以和原函数名一样访问该函数对象。
		   */
		   
		   function getNum(){
			 return 100;
		   }
		   
		   function b1(){
			   var v = getNum();
			 alert( v );
		   }
		   
		   function b2(){
			   //alert(getNum); //getNum.toString()
			   var aa=getNum;
			   //alert( aa ); //aa.toString()
			   alert( aa() ); //aa()和getNum()效果一样
		   }
</script>
</head>
<body>
       <input type="button" value="演示1-1" onclick="a1();"> <br/><br/>
	   <input type="button" value="演示1-2" onclick="a2();"> <br/><br/>
	  
	   <input type="button" value="演示2-1" onclick="b1();"> <br/><br/>
	   <input type="button" value="演示2-2" onclick="b2();"> <br/><br/>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值