JavaScript(2)文法學習

3.語句(與Java語句格式相同)

1.判斷結構(if語句)

注：var x = 3;

if(x==4)//可以進行比較運算。

if(x=4)//可以進行指派運算，而且可以同樣進行判斷。不報錯。

因為在Js中0或者null就是false，

非0或者非null就是true（通常用1表示）。

是以if(x=4)結果是true；

可以通過if(4==y)來解決該問題。因為4=y不會進行判斷，而是會報錯。

2.選擇結構(switch語句)

與java不同的是：因為弱類型，也可以對字元串進行選擇。

3.循環結構(while語句，do…while語句，for語句)。

注：不同的是，沒有了具體資料類型的限制，使用時要注意。

<span style="font-family:Times New Roman;font-size:14px;"><!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>
	</head>
	<body>
		<script type="text/javascript">
		   //☆6.6 ?号表達式
		   var x=3;
		   document.write( x>2 ? "abc" : "nonono"  );
		   document.write("<font color='red'> x="+ x +"</font>");
		   document.write("<hr/>");
		   
		   //☆6.7 選擇語句
		   if(3==x){  //if(x=3){//if(x-3){//if(x==3){
		      document.write("yes");
		   }else{
		      document.write("no");
		   }
		   
		   document.write("<br/>");
		   x=3; //if- else if - else   多選一的結構
		   if(x>0){
		      document.write("a");
		   }else if(x>1){
		      document.write("b");
		   }else if(x>2){
		      document.write("c");
		   }else{
		      document.write("d");
		   }
		   
		   /*
		   var x="aac";
		   switch(x){
		     case "aa":
		       alert("11"); break;
		     case "bb":
		       alert("22"); break;
		     case "abc":
		       alert("33"); break;
		     default:
		       alert("other");
		   }
		   */
		   
		</script>
		
		<script type="text/javascript">
		   //☆6.8 循環結構
			//while語句
			var x=1;
			var sum=0;
			document.write("<br/><font color='red'>");
			while(x<=10){
			  sum +=x;
			  document.write("x=" + x + "<br/>");
			  x++;
			}
			document.write("</font>");
			document.write("sum="+sum);
			
			//do-while語句
			x=1;
			do{
			  document.write("x=" + x + "<br/>");
			  x++;
			}while(x<=10);
			
			document.write("<hr/>");
			//for循環
			for(var x=1;x<=10;x++){
			  document.write("x=" + x + "<br/>");
			}
			
			a:for(var x=0; x<3; x++){
			    for(var y=0; y<4; y++){
			       document.write(x+","+y+" ");
			       break a;//continue;//break;
			    }
			    document.write("<br/>");
			}
			
		</script>
		
		
	</body>
</html></span>

利用JS在網頁上輸出九九乘法表

<span style="font-family:Times New Roman;font-size:14px;"><!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輸出9*9乘法表</title>
		<style type="text/css">
		  table{
		     width=70%;
		     border: 1px solid blue;
		     border-collapse: collapse;
		  }
		  td{
		     border: 1px solid blue;
		     padding:5px;
		  }
		</style>
	</head>
	<body>
	   <script type="text/javascript">
	      for(var x=1; x<=9; x++){
	        for(var y=1; y<=x; y++){
	          //3*4=12
	          document.write(x + "*" + y + "=" + x*y +" ");
	        }
	        document.write("<br/>");
	      }
	   	
	   	  document.write("<hr/>");
	   	  document.write("<table>");
	   	  for(var x=1; x<=9; x++){
	        document.write("<tr>");
	        for(var y=1; y<=x; y++){
	          //3*4=12
	          document.write("<td>"+x + "*" + y + "=" + x*y +"</td>");
	        }
	        document.write("</tr>");
	      }
	   	  document.write("</table>");
	   	  
	   </script>
	   
	   
	</body>
</html></span>

效果展示：

JavaScript(2)文法學習

4.函數

1.一般函數

格式：

function 函數名(形式參數...)

{

執行語句；

return 傳回值；

}

函數是多條執行語句的封裝體，隻有被調用才會被運作。

注意：調用有參數的函數，但沒有給其傳值，函數一樣可以運作，或者調用沒有參數的函數，給其傳值，該函數也一樣運作。

說的簡單點：隻要寫了函數名後面跟了一對小括号，該函數就會運作。那麼傳遞的參數呢？

其實，在函數中有一個參數數組對象（arguments），該對象将傳遞的參數都封裝在一個數組中。

例：

function demo()//定義函數。

{

alert(arguments.length);

}

demo(“hello”,123,true);//調用函數。

那麼彈出的對話框結果是3，如果想得到所有的參數值，可以通過for循環周遊該數組。

for(var x=0; x<arguments.length; x++)

{

alert(arguments[x]);

}

為了增強閱讀性，最好按照規範，按定義好的形式參數傳遞實際參數。

函數在調用時的其他寫法：

var show = demo();//show變量接收demo函數的傳回值。

var show = demo;//這種寫法是可以的，意為show和demo代表同一個函數。

//那麼該函數也可以通過show()的方式運作。

動态函數

通過Js的内置對象Function實作。

例：var demo = new Function(“x,y”,”alert(x+y);”);

demo(4,6);

如同：

function demo(x,y)

{

alert(x+y);

}

demo(4,6);

不同的是，動态函數，參數以及函數體都可以通過參數進行傳遞，可以動态指定。

匿名函數

格式：function(){...}

例：var demo = function(){...}

demo();

通常在定義事件屬性的行為時較為常用。

例：

function test()

{

alert(“load ok”);

}

window.onload = test;

可以寫成匿名函數的形式：

window.onload = function()

{

alert(“load ok”);

}

匿名函數就是一種簡寫格式。

<span style="font-family:Times New Roman;font-size:14px;"><!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">
		   /*
		   function aaa(){
			   alert("頁面加載完畢!");
		   }
		   οnlοad=aaa;
		   */
		   
		   onload = function(){
			   alert("頁面加載完畢!");
		   };
		   
		</script>
	</head>
	<body>
	<!-- 

		函數定義格式：
			function 函數名(形式參數...)
			{
				執行語句；
				return 傳回值；
			}

	-->
		
		<script type="text/javascript">
		   //※1 函數定義與調用
		
		   //空參、無傳回值
		   function hello(){
				alert("hello funcion...");			   
		   }//定義
		   
		   //hello();//調用
		   //hello();//調用
		
		   //有參數、有傳回值
		   function add(x, y){
			   return x+y;
		   }
		   var sum = add(12,23);
		   document.write( "sum="+ sum );
		   
		   //1+2+...+n
		   function sum2( n ){
			   var s=0;
			   for(var i=1;i<=n;i++){
				   s +=i;
			   }
			   return s;
		   }
		   
		   document.write( "sum2="+ sum2(10) );
		   
		</script>
		
		<script type="text/javascript">
		  //※2 函數的一些細節1: js中的函數是沒有重載的，參數是按順序自動比對，并且參數是由函數内置的arguments數組來接收值的
		  function show(x,y){
			  alert(x+ ":" + y);
		  }
		  //show(1,2);// 1:2
		  //show(1);// 1:undefined
		  //show();//undefined:undefined
		  //show(1,2,3);// 1:2
		  
		  //有關函數參數的内部原理: 函數内部通過“内置的arguments數組”來接收外面傳入的參數，如果函數聲明了參數，那麼會按順序依次把arguments中的元素賦給這些參數
		  document.write("<hr/>");
		  function aa(){
			for(var i=0; i<arguments.length;i++){
				document.write(arguments[i]+" ");
			}
			document.write("<br/>");
		  }
		  aa();
		  aa(1);
		  aa(1,3);
		  aa(1,3,5);
		  
		</script>
		
		<script type="text/javascript">
		  //※2 函數的一些細節2: 函數在記憶體中的存儲形式：棧區中存入函數名(引用)，所對應的function對象存放在堆記憶體中。	如果進行了引用指派，那麼多個引用都同樣指向該function對象
		  function fun(){
			  return 100;
		  }
          var x = fun();
          //alert("x:"+ x );
          var y= fun; //函數引用fun和y捆綁，等價
          //alert( y ); //alert( fun );
          //alert("y:"+ y() );
          
		</script>
		
		動态函數功能：<input type="text" οnblur="ac();">
		
		<script type="text/javascript">
		   //動态函數---思想，類似java中的類反射
		    var ssum = new Function("x,y", "var sum; sum=x+y; return sum;");
			var s = ssum(100,200);
			//alert("s="+ s);
		   
			/*
			  function ssum(x,y){
				var sum; sum=x+y; return sum;
			  }
			*/
			
			function ac(){
				var obj = document.getElementsByTagName("input")[0];
				var text = obj.value;
				//alert(text);
				var dd = new Function("x,y", text);
				var s = dd(10,20);
				alert("s="+ s);
			}
		</script>
		
		<script type="text/javascript">
		   //匿名函數
		   var xyz = function(a,b){
			   return a+b;
		   };
		   alert( xyz(12,21) );
		   function aa(){
			   alert("aaa...");
		   }
		</script>
		<input type="button" value="别點我" οnclick="aa();">
		
	</body>
</html>

</span>

5.數組

友善操作多元素的容器，可以對其中的元素進行編号。

特點：可以存任意元素，長度是可變的。

格式：

var arr = new Array();

arr[0] = “hello”;

arr[1] = 123;

var arr = [‘hello’,123,true,”abc”];

通過周遊即可對數組進行基本操作。

for(var x=0; x<arr.length; x++)

{

alert(arr[x]);

}

<span style="font-family:Times New Roman;font-size:14px;"><!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>
	</head>
	<body>
		<script type="text/javascript">
		   //7 數組
		   //var ar[] = {1,3,5};//錯錯錯--這是java
		   var ar=[1,3,5,8]; //這裡不能用“var[] ar”的方式聲明數組，因為“[]”是代表數組類型，而js是弱類型，所有資料類型都是var
		   //alert( typeof(ar) ); 
		   //alert(ar.length); //4
			for(var i=0;i<ar.length;i++){
			   document.write(ar[i]+" ");
			}//1 3 5 8 
			
			document.write("<br/>");
			ar[2] = 100;
			for(var i=0;i<ar.length;i++){
			   document.write(ar[i]+" ");
			} //1 3 100 8 
			
			document.write("<br/>");
			ar[5] = 100;
			for(var i=0;i<ar.length;i++){
			   document.write(ar[i]+" ");
			} //1 3 100 8 undefined 100
			//js數組知識點1: 長度可以是任意的
			
			document.write("<br/>");
			ar[1]=true;//"abc";
			for(var i=0;i<ar.length;i++){
			   document.write(ar[i]+" ");
			} //1 3 100 8 undefined 100
			//js數組知識點2: 元素的資料類型也可以是任意的
			
			//總之，js中沒有集合，數組就是集合----js中的數組 等于java中的數組+集合
			
		</script>
		
		<script type="text/javascript">
		   //使用Array對象定義數組
		   var ar2 = new Array();//相當于: var ars=[];
		   ar2[0]=2;
		   ar2[3]=20;
		   document.write("<br/>");
			for(var i=0;i<ar2.length;i++){
			   document.write(ar2[i]+" ");
			}//2 undefined undefined 20  
		   
		   var ar3 = new Array(4); //一個參數代表的是長度。本例是聲明初始長度為4的數組
		   document.write("<br/>");
			for(var i=0;i<ar3.length;i++){
			   document.write(ar3[i]+" ");
			}// 
		   
		   var ar4 = new Array(4,5,6);//如果參數個數大于1，則代表的是元素
		   document.write("<br/>");
			for(var i=0;i<ar4.length;i++){
			   document.write(ar4[i]+" ");
			}

		</script>
		
		
		<script type="text/javascript">
		   var arr=[];//聲明一個空數組， 注意不能聲明成：var arr;
		   //var arr;//要聲明成上面的方式，才是數組
		   arr[0] = 1;
		   arr[1] = 2;
		   //alert(arr);
		   
		   //兩維數組
		   arr[0] = [1,3,5];//等價于:  arr[0] = new Array(1,3,5);
		   arr[1] = [2,4,6,99];
		   //alert(arr[0]);//1,3,5
		   document.write("<hr/>");
		   for(var i=0;i<arr.length;i++){
		       for(var j=0; j<arr[i].length; j++){
			     document.write(arr[i][j]+" ");
		       }
		       document.write("<br/>");
		   }
		   
		</script>
		
		
	</body>
</html></span>

JavaScript(2)文法學習

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條