點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

JavaScript網頁編程之------基本運用語法(變量、運算符、語句)

來源：懂視網責編：小采時間：2020-11-27 20:27:20

JavaScript網頁編程之------基本運用語法(變量、運算符、語句)

JavaScript網頁編程之------基本運用語法(變量、運算符、語句):JavaScript 概述JavaScript是基于對象和事件驅動的腳本語言，主要應用在客戶端。特點：1. 交互性（它可以做的就是信息的動態交互）2. 安全性（不允許直接訪問本地硬盤）3. 跨平臺性（只要是可以解釋Js的瀏覽器都可以執行，和平臺無關）JavaScript與

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript網頁編程之------基本運用語法(變量、運算符、語句):JavaScript 概述JavaScript是基于對象和事件驅動的腳本語言，主要應用在客戶端。特點：1. 交互性（它可以做的就是信息的動態交互）2. 安全性（不允許直接訪問本地硬盤）3. 跨平臺性（只要是可以解釋Js的瀏覽器都可以執行，和平臺無關）JavaScript與

JavaScript 概述

JavaScript是基于對象和事件驅動的腳本語言，主要應用在客戶端。

特點：

1. 交互性（它可以做的就是信息的動態交互）

2. 安全性（不允許直接訪問本地硬盤）

3. 跨平臺性（只要是可以解釋Js的瀏覽器都可以執行，和平臺無關）

JavaScript與Java不同

1. JS是Netscape公司的產品，前身是LiveScript;Java是Sun公司的產品，現在是Oracle公司的產品。

2. JS是基于對象，Java是面向對象。

3. JS只需解釋就可以執行，Java需要先編譯成字節碼文件，再執行。

4. JS是弱類型，Java是強類型。

JavaScript語法

每一種語言都有自己的語法規則，JS語法與Java很像，所以學習起來比較容易。JS中也一樣有變量，語句，函數，數組等常見語言組成元素。

1. 變量

通過關鍵字var來定義，弱類型既是不用指定具體的數據類型。

例：var x = 3; x = “hello”;

注：JS中特殊的常量值：undefined，當變量沒有初始化就被使用，該變量的值就是undefined（未定義）。

注意：Javascript的語句在結尾處是可以不用分號結束的，非嚴謹語言的特點。

但為了符合編程規范，需要象java一樣定義結束符。

而且有些情況是必須寫分號的，如：var x = 3 ; var y =5如果兩條語句寫在同一行，就需要分號隔開。

1）關鍵字：幾乎跟Java一樣

2）標識符,分隔符：和Java一樣

3）注釋：用了Java當中的這兩種： // 和 /* */

4）數據類型：number類型、string類型、boolean類型、undefined(當變量聲明但沒有賦值)

5）變量：var (弱類型,類似于Java當中的Object)

6）在js當中，單引號和雙引號是一樣的，封裝的都是字符串（但同時有兩個引號封裝的，內部的要用單引號）

7）全局變量和局部變量

全局變量----只要不是函數內部聲明的，都是。并且不會以大括號來區分，也不會以<script>來區分

a、只要不在函數內部聲明，那么一個變量即使在導入的.js文件中聲明，在頁面腳本中同樣是有效的。

b、Java當中的變量的作用域是以大括號來區分，而JS不是。

局部變量----函數內部聲明的和形參

函數內部的形參也是局部的，里面更改的值只能在內部有效，函數返回之后就無效了

例：

<html>
<head>
	<title>javascript語言學習</title>
</head>
<body>
	<script type="text/javascript">
	//1 標識符,關鍵字,分隔符---幾乎和Java一樣
	 //2 注釋：只支持 //單行 和 /*多行*/
	 //3 變量：弱類型 ， 所有的變量都是用var來聲明---本質上就是Java當中的Object類型
	 var x=3;
	 var y="abc";
	 //alert(x+","+y);
	 x="xyz";
	 //alert(x);
	 x=true;//js當中的布爾類型和C一樣，有0 和 非0 的概念
	 x+=1;
	 //alert(x);
	 a=3.14;//因為瀏覽器有兼容性，所以一個變量不聲明類型也可以直接對期賦值(但不要去讀),因為是弱類型，都是var，寫不寫一樣
	 //alert(a);
	 //alert(aa);//由于變量aa沒有聲明也沒有賦值，所以這里是出錯的，沒有

輸出 a='aa'; //alert(a);//js當中，單引號和雙引號是一樣的，對應的變量都是字符串---js當中沒有字符類型--包含在字符串當中 //a=33223232323232332322323232323456; //alert(a); //alert(typeof(a));//number //由于瀏覽器有兼容性，一條語句的末尾不加分號，也可以正常執行，但這樣寫不規范，建議還是加上。 //另外，同一行當中的多條語句之間的分號不能省，否則不能正常執行 var m=1; var n=2; //alert(m+n); </script> <script type="text/javascript"> //4 基本數據類型 //alert( typeof("aaaa") );//string //alert( typeof('0') );//string //alert( typeof(false) );//boolean //alert( typeof(100) );//number //alert( typeof(1.23) );//number //alert( typeof('0')=="string" );//true //alert (typeof(x)=='number');//true --使用單引號和雙引號，效果是一樣的 //alert( typeof('0')=="String" );//false----※※※大小寫敏感※※※ //alert( typeof(x) ); //前面片段中定義的變量，在這里仍然是有效的 //alert( typeof(X) ); //undefined--代表該變量沒有定義--因為前面只定義了小寫的x </script> </body> </html>

2. 運算符

Javascript中的運算符和Java大致相同。

只是運算過程中需要注意幾點：

1， var x = 3120/1000*1000; x = 3120;而不是3000。

2， var x = 2.4+3.6 ; x = 6;而不是6.0

3， var x = “12” + 1; x = “121”; x = “12” – 1 ; x = 11;

加號對于字符串是連接符

4， && || 是邏輯運算符 & |是位運算符。

5，也支持三元運算符

6，特殊運算符 typeof : 返回一個操作表達式的數據類型的字符串。

var x = 3;

var y = “123”;

var z = false;

typeof(x); //number

typeof(y); //string

typeof(z); //boolean

例：

<html>
<head>
	<title>javascript語言學習</title>
</head>
<body>	
	<script type="text/javascript">
	//5 運算符：算術、賦值、比較、位運算、三元運算
 	//5.1算術運算
 	var a=3710;
 	//alert("a="+a/1000);
 	//alert("a="+a/1000*1000);
 	var b=2.3;
 	var c=5.7;
 	//alert(b+c);//8
 	//alert(11+23);//34
 	//alert("23"+11);//2311---string---加號為字符串連接
 	//alert("23"-11);//12 ---字符串遇到減號，自動會轉換成數值型進行運算
 	//alert(true);//true 和數值進行運算時，true為1，flase為0
 	//alert(true+1);//2
 	//alert(false+1);//1
 	//alert(100%3);//1
 	//alert(100%-3);//1
 	//alert(-100%3);//-1 如果有負數，結果和前面那個數同符號。---和Java是一樣的
 	
 	//5.2 賦值運算: = += -= *= /= %=
 	var n=3,m;
 	m=n++;//用法同Java
 	//alert("m="+m+",n="+n);//m=3,n=4
 	
 	var n=3,m;//和Java不同的是，變量可以重復聲明
	 m = ++n;//用法同Java
	 //alert("m="+m+",n="+n);//m=4,n=4
	 
	 var n;
 	//alert(n);//4---這里沒有對該變量重新賦值，所以用的還是前面的那個，不重新開內存
 	
 	var i=3;
 	i +=3;//其它的如：-= *= /= %= ，同理
 	//alert("i="+i);
 	
 	//5.3 比較運算符
 	var j=10;
 	//alert( j>5 ); //其它如 ：< >= <= == != 等，同理
	 //alert( j==10 );
	 //alert( j!=10 );
	 
	 //5.4 邏輯運算符 && || !
	 var k=4;
 	//alert(k>3 && k<10); //true
 	//alert( !(k>3) ); //false
 	//alert( !k );//k是“非0”，再非一下則是flase---0
 	
 	//5.5 位運算符 & | ^ >> << >>>(無符號右移) ---和Java一樣
 	var c = 6; //6: 110
 //3: 011
	 //alert( c&3 );// 010 --2
	 //alert(c^100^100); //c---6---一個數與兩個相同的數進行異或運算結果仍然等于原數
	 //alert(c>>>1);//3
	 
	 //5.6 三元運算符---?號表達式 ----和java一樣
	 //alert(3>0?100:300);
	 
	 var xxyy;
 	//alert(xxyy); //undefined---如果一個變量聲明之后沒有賦值，那么就是該值
 	alert(xxyy==undefined);//true ----這個undefined代表的是和true,false等一樣的，是一個值，因此不要用引號
 	alert(xxyy=="undefined");//false
	</script>
</body>
</html>

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語句)。

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

例：

<html>
<head>
	<title>javascript語言學習</title>
</head>
<body>
	<script type="text/javascript">
	/*
	//if語句
	var x=3;
	if (x>0){
	alert("yes");
	} else {
	alert("no");
	}
	
	if (x-4) {//非0 即是 true,除了0以外的數都是非零的數，即為true
	alert("yes2");
	} else {
	alert("no2");
	}
	
	if (x=4) {//一個“=”號是賦值，賦的值是4，該值同時也作為整個表達式的值---非0， 即是 true
	alert("yes3");
	} else {
	alert("no3");//如果把上面的4改為0，則

輸出: no3 } //根據上面的結果，建議如果是判斷某變量是否等于某值，寫成如下方式(把數字放在前面) if (4==x) {//這種方式能夠避免漏寫“=”號的bug alert("yes4"); } else { alert("no4"); } var b=(3,4+5);//逗號表達式中的最后一個式子的值作為整個的結果 alert(b); var c=5; if(c>1){ alert("a"); }else if(c>2){ alert("b"); }else if(c>3){ alert("c"); }else{ alert("d"); } //結果：a */ </script> <script type="text/javascript"> //Java語言：switch表達式支持的類型：byte,int等整數,char，jdk1.7之后增加了String類型 //JavaScript語言：支持所有類型，即所有類型的數據都能用于選擇 var x="x"; switch(x){ default:alert("c"); case "aa":alert("a");break; case "abc":alert("b"); }//常規的寫法就不說了，說說這種的，這種的顯示結果是c和a，因為在default處進入之后并沒有break所以會進入到case "aa"里面去 </script> </body> </html>

九九乘法表例子：

<html>
<head>
	<title>javascript語言學習</title>
	<link rel="stylesheet" href=table.css>
</head>
<body>
	
	<script type="text/javascript">
	a:for (var x=0;x<3;x++){
	for (var y=0;y<4;y++){
	document.write("x="+x+" ");
	break a;
	}
	document.write("<br/>");
	}
	</script>
	<hr/>
	<h2>九九乘法表</h2>
	<script type="text/javascript">
	for (var x=1;x<=9;x++){
	for (var y=1;y<=x;y++){
	document.write(y+"*"+x+"="+x*y+" ");
	}
	document.write("<br/>");
	}
	</script>
	<br/>
	<h2>九九乘法表</h2>
	<script type="text/javascript">
	document.write("<table>");
	for (var x=1;x<=9;x++){
	document.write("<tr>");
	for (var y=1;y<=x;y++){
	document.write("<td>"+y+"*"+x+"="+x*y+"</td>");
	}
	document.write("</tr>");
	}
	document.write("</table>");
	</script>
</body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com