初學JavaScript的基本語法介紹(二)

2024-04-27 15:15:29

字體：大中小

來源：轉載

供稿：網友

上一篇博客我們簡單介紹了javaScript，并介紹了Javascript的特點及用途。現在我來說一說初次認識JavaScript程序及JavaScript的基本語法。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>初識JavaScript</title><script type="text/javascript">	alert("JavaScript，你好!");	document.write("JavaScript，你好!");</script></head><body></body></html>
        上面就是一個簡單的JavaScript的程序，它是嵌入在html頁面內，一般嵌入在HTML頁面內的JS程序片段存在兩個地方：1在<head></head>標簽內；2在<body></body>標簽內；3在<html></html>標簽內。JS程序一般以兩種方式存在：1是嵌入在html頁面中；2是以專門的.js文件存在。上面的JS程序是以<script type="text/javascript"></script>標簽開始的。其JS程序片段都在這個標簽里面。alert(“JavaScript, 你好!”)是在web瀏覽器頁面彈出window對話框顯示JavaScript，你好!。document.write(“JavaScript，你好！”)是在瀏覽器web頁面中輸出JavaScript，你好!。這就是一個簡簡單單的JS程序。
        下面我們來說一說JS的基本語法。
         1：注釋：//XXXXX單行注釋；/*  XXXXXX */多行注釋。它和Java的注釋一樣。代碼如下。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript注釋</title><script type="text/javascript">	document.write("下面是JS的單行注釋<br/>");	//alert("我被注釋掉了");	document.write("A<br/>");	//document.write("A1");	document.write("下面是JS的多行注釋<br/>");	/*	document.write("B");	document.write("B1");	*/	document.write("B2<br/>");</script></head><body></body></html>
         2：JS程序片段的存在方式：1是嵌入在HTML頁面內；2是由引入專門的.JS文件，其中.js文件是專門用來存儲JS程序片段的。上面的JS注釋就很好地演示了在HTML頁面內部的JS程序片段。下面的代碼是用來說明第二種情況。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JS外部引入</title><script type="text/javascript" src="MyJS.js" charset="GBK"></script></head><body></body></html>MyJS.js文件，默認GBK字符集alert("JavaScript，你好!");
         3：JavaScript的變量，由于JS是弱類型語言，故其用var來統一定義變量(數值型，字符型，數組型)。程序如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript的類型</title><script type="text/javascript">	var num = 1;	document.write("數值類型變量:num="+num+"<br/>");	var str = "JavaScript，你好!";	document.write("字符串類型變量:str="+str+"<br/>");</script></head><body></body></html>
       4：JavaScript的基本數據類型。基本數值類型有5類：數值類型，字符串類型，布爾類型，未定義類型(undefined)，置空類型(null)。程序如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript基本類型</title><script type="text/javascript">	var num = 1;	document.write("整型:num="+num+"<br/>");	var fnum = 3.14;	document.write("浮點類型:fnum="+fnum+"<br/>");	var str="JavaScript,你好!";	document.write("字符串類型:str="+str+"<br/>");	var boolean1 = true;	document.write("boolean類型:boolean1="+boolean1+"<br/>");	var no1;	document.write("未定義:no1="+no1+"<br/>");	var nu1 = null;	document.write("置空:nu1="+nu1+"<br/>");	var nu2 = "";	document.write("空值：nu2="+nu2+"<br/>");</script></head><body>	</body></html>
       5：JS運算符。JS的運算符和Java的運算符幾乎一樣。JS運算符有6大類：算術運算符，比較運算符，邏輯運算符，賦值運算符，連接運算符，三目運算符。具體代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JS運算符</title><script type="text/javascript">	//與Java語言的類似	//算術運算符	var num1 = 2, num2 = 1;	document.write("num1+num2="+(num1+num2)+"<br/>");	document.write("num1-num2="+(num1-num2)+"<br/>");	document.write("num1*num2="+(num1*num2)+"<br/>");	document.write("num1/num2="+(num1/num2)+"<br/>");	document.write("num1%num2="+(num1%num2)+"<br/>");	document.write("num1++="+(num1++)+"<br/>");	document.write("--num2="+(--num2)+"<br/>");	document.write("===========================<br/>");		//賦值運算符	var n1 = 6, n2 = 1;	document.write("n1+=n2, n1="+(n1+=n2)+"<br/>");	var n1 = 6, n2 = 1;	document.write("n1-=n2, n1="+(n1-=n2)+"<br/>");	document.write("===========================<br/>");		//比較運算符	var x = 10, y = 4;	document.write("x="+x+",y="+y+"<br/>");	document.write("x==10結果為"+(x==10)+"<br/>");		document.write("x=='10'結果為"+(x=='10')+"<br/>");	document.write("x===10結果為"+(x===10)+"<br/>");	document.write("x==='10'結果為"+(x==='10')+"<br/>");	document.write("x!=10結果為"+(x!=10)+"<br/>");	document.write("x!='10'結果為"+(x!='10')+"<br/>");	document.write("x!==10結果為"+(x!==10)+"<br/>");	document.write("x!=='10'結果為"+(x!=='10')+"<br/>");	document.write("x>y結果為"+(x > y)+"<br/>");	document.write("x<y結果為"+(x < y)+"<br/>");	document.write("x>=y結果為"+(x>=y)+"<br/>");	document.write("x<=y結果為"+(x<=y)+"<br/>");	document.write("===========================<br/>");		//邏輯運算符	var x = 10, y = 4;	document.write("x="+x+",y="+y+"<br/>");	document.write("(x<11&&y>4),結果為:"+(x<11&&y>5)+"<br/>");	document.write("(x<11||y>4),結果為:"+(x<11||y>5)+"<br/>");	document.write("!(x<11),結果為:"+!(x<11)+"<br/>");	document.write("===========================<br/>");		//三目元算符	var x = 10, y = 4;	document.write("(x>y?x:y)結果為"+(x>y?x:y)+"<br>");	document.write("===========================<br/>");		//字符串連接	var str1 = 2017, str2 = '0208';	document.write("str+str2="+(str1+str2)+"<br/>");</script></head><body></body></html>
        6：JS的循環語句。和Java類似有for循環，for...each循環：到數組時再介紹， while循環，do...while循環。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>循環語句</title></head><body>	<script type="text/javascript">		var i = 0;		while(i < 10){			document.write("i="+i+"<br/>");			i++;		}		for(var i = 0; i < 10; i++){			document.write("i="+i+"<br/>");		}		var j = 0;		do{			document.write("j="+j+"<br/>");			j++;		}while(j<10)	</script></body></html>
        7：JS的判斷語句。和Java類似，if...else...語句。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>if...else語句</title></head><body>	<script type="text/javascript">		var num = 10;		document.write("num="+num+"<br/>");		if(num > 9){			document.write("num大于9<br/>");		}else{			document.write("num小于9<br/>");		}		</script></body></html>
         8：JS的swicth...case語句。和JAVA類似。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>switch語句</title></head><body>	<script type="text/javascript">		var day = 3;		switch(day){			case 1:alert("周一"); break;			case 2:alert("周二"); break;			case 3:alert("周三"); break;			case 4:alert("周四"); break;			case 5:alert("周五"); break;			case 6:alert("周六"); break;			case 7:alert("周日"); break;			default :alert("輸入錯誤!");break;		}	</script></body></html>
        9：break語句和continue語句。break跳出當前循環，執行下面的語句；continue跳出當前循環，執行下一次循環。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>break VS continue</title></head><body>	<script type="text/javascript">		document.write("break:"+"<br/>");		for(var num = 0; num < 10; num++){			if(num==6){				break;			}			document.write("num="+num+"<br/>");		}		document.write("continue:"+"<br/>");		for(var num1 = 0; num1 < 10; num1++){			if(num1==6){				continue;			}			document.write("num1="+num1+"<br/>");		}		</script></body></html>
         10：JavaScript函數。與Java類似，有不帶參數函數，有帶一個參數函數，有帶多個參數函數。但因為其為弱類型，故不需要再函數參數列表聲明參數類型，因為JS的參數類型都是var來表示的。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript函數</title><script type="text/javascript">	function fun1(){		alert("我的第一個方法!");	}	function fun2(f1){		alert(f1);	}	function fun3(f1, f2){		alert(f1+" "+f2);	}		function fun4(f1, f2){		return f1+" "+f2;	}	fun1();	fun2("我的");	fun3("我的","第三個程序");	var result = fun4("我的","第四個程序");	alert(result);</script></head><body></body></html>         上面對JS基本語法的介紹你看懂了么?建議用手打一遍代碼比較好！