JavaScript 基礎語法

一、JavaScript 簡介

1.1 JavaScript 概述

1.1.1 介紹

JavaScript 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 Web，更可廣泛用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。
JavaScript 是一種輕量級的編程語言，可插入 HTML 頁面的編程代碼，並且插入 HTML 頁面後，可由所有的現代瀏覽器執行。
JavaScript 由 Brendan Eich 發明，它於 1995 年出現在 Netscape 中（該瀏覽器已停止更新），並於 1997 年被 ECMA（一個標準協會）採納。

1.1.2 ECMAScript 版本

年份	名稱	描述
1997	ECMAScript 1	第一個版本
1998	ECMAScript 2	版本變更
1999	ECMAScript 3	添加正則表達式，添加 try/catchECMAScript 4 沒有發佈
2009	ECMAScript 5	添加 “strict mode”，嚴格模式，添加 JSON 支持
2011	ECMAScript 5.1	版本變更
2015	ECMAScript 6	添加類和模塊
2016	ECMAScript 7	增加指數運算符 (**)，增加 Array.prototype.includes

1.2 JavaScript 使用

1.2.1 <script> 標籤

JavaScript 的代碼內容在HTML裏面必須寫在<script>JavaScript代碼內容</script>中，而整個JavaScript代碼可以放在HTML的任何位置，甚至可以不用放到HTML頁面中，而是單獨編寫一個JavaScript文件，然後在HTML中引入這個文件。
<script></script>表示JavaScript代碼從什麼位置開始到什麼位置結束。

示例1：javascript在<head></head>標籤中

<head>
	<script>
		function test(){
			var a = 1;
			var b = 2;
			var c = a + b;
			return c;
		}
	</script>
</head>

示例2：javascript在<body></body>標籤中

<body>
	<script>
		function test(){
			var a = 1;
			var b = 2;
			var c = a + b;
			return c;
		}
	</script>
</body>

示例3：javascript在外部

<script>
	function test(){
		var a = 1;
		var b = 2;
		var c = a + b;
		return c;
	}
</script>

1.2.2 JavaScript 輸出
JavaScript 本身是沒有輸出或者打印得到函數的，但是可以用下面的方式來顯示要輸出的內容：

window.alert()：這種方式會一一個彈出框的形式彈出顯示，一般用於警告、提示等。
document.write()：這種方式會將內容寫到 HTML 文檔中。
innerHTML：這種方式會將要輸出的內容寫入到 HTML 元素。
console.log()：這種方式會顯示數據在瀏覽器的控制檯，在瀏覽器按F12即可看到。

示例1：window.alert()

<body>
	<script>
		window.alert("這是JavaScript");
	</script>
</body>

彈出框顯示結果

示例2：document.write()

<body>
	<script>
		document.write("This is JavaScript");
	</script>
</body>

頁面顯示結果

示例3：innerHTML

<body>
	<p>This is JavaScript</p>
	<p id="test">This is JavaScript</p>
	<script>
		document.getElementById("test").innerHTML = "This is not JavaScript";
	</script>
</body>

頁面顯示結果

示例4：console.log()

<body>
	<script>
		console.log("This is JavaScript");
	</script>
</body>

控制檯顯示結果

1.2.3 JavaScript 註釋
類似Java，JavaScript 也有自己的註釋格式

單行註釋 //
單行註釋 /**/

<script>
	/* 定義一個函數，計算傳入的兩個參數的和
	 然後返回這個和的值
	*/
	function test(a, b){
		//求和
		var c = a + b; 	
		return c;	//返回和c的值
	}
	/* 調用函數 */
	var c = test(1, 2);
	/* 控制檯顯示函數的值 */
	console.log("c = " + c);
</script>

控制檯顯示結果

1.3 JavaScript 關鍵字

語句	描述
break	用於跳出循環。
catch	語句塊，在 try 語句塊執行出錯時執行 catch 語句塊。
continue	跳過循環中的一個迭代。
do … while	執行一個語句塊，在條件語句爲 true 時繼續執行該語句塊。
for	在條件語句爲 true 時，可以將代碼塊執行指定的次數。
for … in	用於遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。
function	定義一個函數
if … else	用於基於不同的條件來執行不同的動作。
return	退出函數
switch	用於基於不同的條件來執行不同的動作。
throw	拋出（生成）錯誤。
try	實現錯誤處理，與 catch 一同使用。
var	聲明一個變量。
while	當條件語句爲 true 時，執行語句塊。

二、JavaScript 變量與數據類型

2.1 JavaScript 變量

2.1.1 介紹
類似JAVA語言，JavaScript也有自己的變量格式

變量必須以字母開頭
變量也能以 $ 和 _ 符號開頭（一般實際運用中不推薦這麼做）
變量名稱對大小寫敏感（y 和 Y 是不同的變量）

在JavaScript語言中，無論是普通語句還是變量，都是區分大小寫的。

2.1.2 創建變量
在JavaScript中創建變量也叫做聲明變量，用var關鍵字，聲明的變量如果不賦值，默認爲空，實際顯示爲undefined
示例：

<script>
	var a;
	var b;
	b = 1;
	var $c = 2, _d = 3, B = 4;
	console.log("a = " + a);
	console.log("b = " + b);
	console.log("$c = " + $c);
	console.log("_d = " + _d);
	console.log("B = " + B);
</script>

輸出結果爲

2.2 JavaScript 數據類型

2.2.1 數據類型分類
JavaScript語言與Java語言的數據類型有共通之處，但是又不完全相同，下面是JavaScript的數據類型。

基本數據類型
- 字符串類型（String）
- 數字類型（Number）
- 布爾類型（Boolean）
- 空類型（Null）
- 未定義類型（Undefined）
- Symbol類型
引用數據類型
- 對象（Object）：對象由花括號分隔，在括號內部，對象的屬性以鍵值對的形式 (name : value) 定義，多個屬性由逗號分隔。
- 數組（Array）
- 函數（Function）

如果JavaScript在聲明變量的時候沒有指定數據類型，其數據類型要看聲明的變量的值的類型，所以聲明的變量可以動態的用作不同的數據類型，如：

var a;               //a爲undefined類型
var a = 1;           //a爲數字類型
var a = "This is JavaScript";      //a爲字符串類型

2.2.2 查看數據類型
查看數據類型可以使用typeof，示例如下

<script>
	var a = 5;
	var b = "5";
	var c;
	var d = true;
	var e = [1,2,3,4,5];
	var f = {name:"張三",sex:"男"};
	var g = null;
	var h = NaN;
	var i = new Array(1,2,3,4,5);
	var j = new Date;
	console.log("a的數據類型爲：" + typeof(a));
	console.log("b的數據類型爲：" + typeof(b));
	console.log("c的數據類型爲：" + typeof(c));
	console.log("d的數據類型爲：" + typeof(d));
	console.log("e的數據類型爲：" + typeof(e));
	console.log("f的數據類型爲：" + typeof(f));
	console.log("g的數據類型爲：" + typeof(g));
	console.log("h的數據類型爲：" + typeof(h));
	console.log("i的數據類型爲：" + typeof(i));
	console.log("j的數據類型爲：" + typeof(j));
</script>

輸出結果爲

注意：

NaN 的數據類型是 number
數組(Array)的數據類型是 object
日期(Date)的數據類型爲 object
null 的數據類型是 object
未定義變量的數據類型爲 undefined

從上面的示例中，可以發現typeof在分辨數據的數據類型時有一定的侷限性，所以我們可以使用constructor屬性來查看，constructor 屬性返回所有 JavaScript 變量的構造函數。
示例：

<script>
	var a = 5;
	var b = "5";
	var d = true;
	var e = [1,2,3,4,5];
	var f = {name:"張三",sex:"男"};
	var h = NaN;
	var i = new Array(1,2,3,4,5);
	var j = new Date;
	console.log("a的constructor爲：" + a.constructor);
	console.log("b的constructor爲：" + b.constructor);
	console.log("d的constructor爲：" + d.constructor);
	console.log("e的constructor爲：" + e.constructor);
	console.log("f的constructor爲：" + f.constructor);
	console.log("h的constructor爲：" + h.constructor);
	console.log("i的constructor爲：" + i.constructor);
	console.log("j的constructor爲：" + j.constructor);
</script>

輸出結果爲

注意：constructor屬性不能查看undefined和null的構造函數

2.2.3 數據類型示例

<script>
	//未定義（Undefined）數據類型
	var a;
	
	//數字(Number)數據類型
	var b = 1;
	var b = 1.1;
	
	//字符串（String）數據類型
	var c = "I'm Love It!"
	
	//布爾(Boolean)數據類型
	var flag = true;
	var flag = false;
	
	//空（Null）數據類型
	var d = null;
	
	//Symbol數據類型
	var mySymbol = Symbol();
	var a = {};
	a[mySymbol] = 'Hello!';
	
	//對象類型
	var student1 = {name: "Mike", sex: "men"};
	var student2 = {
		name: "Mary",
		sex: "women"
	}
	
	//數組類型
	var arr1 = new Array(1, 2, 3);
	var arr2 = new Array();
	arr2[0] = "太陽";
	arr2[1] = "月亮";
</script>

在聲明變量的時候指定數據類型

<script>
	var a = new Number;
	var b = new String;
	var c = new Boolean;
	var arr = new Array;
	var student = new Object;
</script>

2.3 數據類型轉換

2.3.1 數字與字符串的轉換
（1）數字轉字符串
數字轉字符串有多種方法：

與空串""拼接
toString()方法：全局方法
toExponential()方法：屬於Number()方法，把對象的值轉換爲指數計數法
toFixed() ：屬於Number()方法，把數字轉換爲字符串，結果的小數點後有指定位數的數字
toPrecision()：屬於Number()方法，把數字格式化爲指定的長度

示例

<script>
	console.log("用toString()方法轉換：")
	console.log("5轉換成字符串 = " + (5).toString() + ", 數據類型爲：" + typeof((5).toString()));
	console.log("5.5轉換成字符串 = " + (5.5).toString() + ", 數據類型爲：" + typeof((5.5).toString()));
	console.log("5+5轉換成字符串 = " + (5+5).toString() + ", 數據類型爲：" + typeof((5+5).toString()));
	
	console.log("\n用toExponential()方法轉換：")
	console.log("5轉換成字符串 = " + (5).toExponential() + ", 數據類型爲：" + typeof((5).toExponential()));
	console.log("5.5轉換成字符串 = " + (5.5).toExponential() + ", 數據類型爲：" + typeof((5.5).toExponential()));
	console.log("5+5轉換成字符串 = " + (5+5).toExponential() + ", 數據類型爲：" + typeof((5+5).toExponential()));
	
	console.log("\n用toFixed()方法轉換：")
	console.log("5轉換成字符串 = " + (5).toFixed(2) + ", 數據類型爲：" + typeof((5).toFixed(2)));
	console.log("5.5轉換成字符串 = " + (5.5).toFixed(2) + ", 數據類型爲：" + typeof((5.5).toFixed(2)));
	console.log("5+5轉換成字符串 = " + (5+5).toFixed(2) + ", 數據類型爲：" + typeof((5+5).toFixed(2)));
	
	console.log("\n用toPrecision()方法轉換：")
	console.log("5轉換成字符串 = " + (5).toPrecision(4) + ", 數據類型爲：" + typeof((5).toPrecision(4)));
	console.log("5.5轉換成字符串 = " + (5.5).toPrecision(4) + ", 數據類型爲：" + typeof((5.5).toPrecision(4)));
	console.log("5+5轉換成字符串 = " + (5+5).toPrecision(4) + ", 數據類型爲：" + typeof((5+5).toPrecision(4)));
</script>

輸出結果爲

（2）字符串轉數字
字符串轉數字可以用：

Number()方法：全局方法
parseInt()：屬於Number()方法，得到的時一個整數
parseFloat()：屬於Number()方法，得到的是一個浮點數

示例

<script>
	console.log("用Number()方法轉換：")
	console.log("字符串'5'轉爲數字 = " + Number("5"));
	console.log("字符串'5.11'轉爲數字 = " + Number("5.11"));
	console.log("字符串' '轉爲數字 = " + Number(" "));
	console.log("字符串''轉爲數字 = " + Number(""));
	console.log("字符串'this'轉爲數字 = " + Number("this"));
	
	console.log("\n用parseInt()方法轉換：")
	console.log("字符串'5'轉爲數字 = " + parseInt("5"));
	console.log("字符串'5.11'轉爲數字 = " + parseInt("5.11"));
	console.log("字符串' '轉爲數字 = " + parseInt(" "));
	console.log("字符串''轉爲數字 = " + parseInt(""));
	console.log("字符串'this'轉爲數字 = " + parseInt("this"));
	
	console.log("\n用parseFloat()方法轉換：")
	console.log("字符串'5'轉爲數字 = " + parseFloat("5"));
	console.log("字符串'5.11'轉爲數字 = " + parseFloat("5.11"));
	console.log("字符串' '轉爲數字 = " + parseFloat(" "));
	console.log("字符串''轉爲數字 = " + parseFloat(""));
	console.log("字符串'this'轉爲數字 = " + parseFloat("this"));
</script>

輸出結果爲

2.3.2 布爾值字符串的轉換
（1）布爾值轉字符串
布爾值轉換成字符串可以用

String()方法：全局方法
toString()方法：屬於Boolean方法

示例

<script>
	console.log("用String()方法轉換：")
	console.log("true轉換成字符串 = " + String(true) + ", 數據類型爲：" + typeof(String(true)));
	console.log("false轉換成字符串 = " + String(false) + ", 數據類型爲：" + typeof(String(false)));
	
	console.log("\n用toString()方法轉換：")
	console.log("true轉換成字符串 = " + (true).toString() + ", 數據類型爲：" + typeof((true).toString()));
	console.log("false轉換成字符串 = " + (false).toString() + ", 數據類型爲：" + typeof((false).toString()));
</script>

輸出結果爲

2.3.3日期與字符串的轉換
（1）日期轉字符串
日期轉字符串可以用：

String()方法：全局方法
Date() 方法：屬於Date 方法，直接返回一個返回字符串
toString()：Date 方法

示例

<script>
	console.log("用Date()方法轉換：")
	console.log("日期轉換成字符串 = " + Date() + ", 數據類型爲：" + typeof(Date()));
	
	console.log("\n用String()方法轉換：")
	console.log("日期轉換成字符串 = " + String(new Date()) + ", 數據類型爲：" + typeof(String(new Date())));
	
	console.log("\n用toString()方法轉換：")
	console.log("日期轉換成字符串 = " + (new Date()).toString() + ", 數據類型爲：" + typeof((new Date()).toString()));
</script>

輸出結果爲

在Date方法裏面，除了用上面說的Date()方法外，還有很多獲取日期並直接返回一個字符串的方法：

方法	描述
getDate()	從 Date 對象返回一個月中的某一天 (1 ~ 31)
getDay()	從 Date 對象返回一週中的某一天 (0 ~ 6)
getFullYear()	從 Date 對象以四位數字返回年份
getHours()	返回 Date 對象的小時 (0 ~ 23)
getMilliseconds()	返回 Date 對象的毫秒(0 ~ 999)
getMinutes()	返回 Date 對象的分鐘 (0 ~ 59)
getMonth()	從 Date 對象返回月份 (0 ~ 11)
getSeconds()	返回 Date 對象的秒數 (0 ~ 59)
getTime()	返回 1970 年 1 月 1 日至今的毫秒數

2.3.4 布爾值與數字的轉換
（1）布爾值轉數字
布爾值轉數字可以用

Number()方法：全局方法

示例

<script>
	console.log("用Number()方法轉換：")
	console.log("true轉換成數字 = " + Number(true) + ", 數據類型爲：" + typeof(Number(true)));
	console.log("false轉換成數字 = " + Number(false) + ", 數據類型爲：" + typeof(Number(false)));
</script>

輸出結果爲

2.3.5 日期與數字的轉換
（1）日期轉數字
日期轉數字可以用：

Number()方法：全局方法
getTime()方法：屬於Date 方式，得到一個數字
前面列舉的其他屬於Date的方法都和getTime一樣能夠得到一個數字

示例

<script>
	console.log("用Number()方法轉換：")
	console.log("日期轉換成數字 = " + Number(new Date()) + ", 數據類型爲：" + typeof(Number(new Date())));
	console.log("日期轉換成數字 = " + new Date().getTime() + ", 數據類型爲：" + typeof(new Date().getTime()));
	console.log("日期轉換成數字 = " + new Date().getDate() + ", 數據類型爲：" + typeof(new Date().getDate()));
	console.log("日期轉換成數字 = " + new Date().getDay() + ", 數據類型爲：" + typeof(new Date().getDay()));
	console.log("日期轉換成數字 = " + new Date().getFullYear() + ", 數據類型爲：" + typeof(new Date().getFullYear()));
	console.log("日期轉換成數字 = " + new Date().getHours() + ", 數據類型爲：" + typeof(new Date().getHours()));
	console.log("日期轉換成數字 = " + new Date().getMonth() + ", 數據類型爲：" + typeof(new Date().getMonth()));
</script>

輸出結果爲

2.3.6 其他類型的轉換
（1）一元運算符 +
+可用於將變量轉換爲數字

示例

<script>
	var a = "5";
	var b = "this";
	var c = + a;
	var d = + b;
	console.log("一元運算符轉換 = " + c + ", 數據類型爲：" + typeof(c));
	console.log("一元運算符轉換 = " + d + ", 數據類型爲：" + typeof(d));
</script>

輸出結果爲

（2）其他自動轉換
示例

<script>
	console.log("5 + null 自動轉換 = " + (5 + null) + ", 數據類型爲：" + typeof((5 + null)));
	console.log("'5' + null 自動轉換 = " + ('5' + null) + ", 數據類型爲：" + typeof(('5' + null)));
	console.log("'5' + 1 自動轉換 = " + ('5' + 1) + ", 數據類型爲：" + typeof(('5' + 1)));
	console.log("'5' - 1 自動轉換 = " + ('5' - 1) + ", 數據類型爲：" + typeof(('5' - 1)));
</script>

輸出結果爲

三、JavaScript 運算符

3.1 算術運算符

3.1.1 算術運算符介紹
算術運算符顧名思義就是對數據做算術運算的符號

3.1.2 算術運算符列舉

運算符	描述	例子
+	加法	x=y+2 7
-	減法	x=y-2
*	乘法	x=y*2
/	除法	x=y/2
%	取模（餘數）	x=y%2
++	自增	x=++y，x=y++
–	自減	x=–y，x=y–

3.1.3 算術運算符示例

<script>
	var a = 10;
	var b = 4;
	var z1 = a + b;
	var z2 = a - b;
	var z3 = a * b;
	var z4 = a / b;
	var z5 = a % b;
	var z6 = a++;
	var z7 = ++a;
	var z8 = a--;
	var z9 = --a;
</script>

3.2 賦值運算符

3.2.1 賦值運算符介紹
賦值運算符用於給 JavaScript 變量賦值。

3.2.2 賦值運算符列舉

運算符	例子	等同於
=	x=y
+=	x+=y	x=x+y
-=	x-=y	x=x-y
*=	x*=y	x=x*y
/=	x/=y	x=x/y
%=	x%=y	x=x%y

3.2.3 賦值運算符示例

<script>
	var a = 10;
	var b = 4;
	var b = a;
	var b += a;	//var b = b + a;
	var b -= a;	//var b = b - a;
	var b *= a;	//var b = b * a;
	var b /= a;	//var b = b / a;
	var b %= a;	//var b = b % a;
</script>

+運算符的另一個作用：用於拼接字符串

<script>
	var a = "This is my book";
	var b = "It's a nice book!";
	var c = a + "," + b;
	console.log("c = " + c);
</script>

輸出結果爲

數字和字符串的運算：數字和字符串類型進行運算，結果會變成字符串類型。

<script>
	var a = 10 + 5;
	var b = "10" + 5;
	var c = "nice" + 5;
	console.log("a="+a+" b="+b+" c="+c);
</script>

輸出結果爲

3.3 比較運算符

3.3.1 比較運算符介紹
比較運算符用於比較兩個變量或者值的大小

3.3.2 比較運算符列舉

運算符	描述	比較
==	等於	x==8
===	絕對等於（值和類型均相等）	x===“5”
!=	不等於	x!=8
!==	不絕對等於（值和類型有一個不相等，或兩個都不相等）	x!==“5”
>	大於	x>8
<	小於	x<8
>=	大於或等於	x>=8
<=	小於或等於	x<=8

3.3.3 比較運算符示例
示例代碼

<script>
	var a = 10;
	var b = "10";
	var c = 5;
	console.log("(a == b)的結果 = " + (a == b))
	console.log("(a === b)的結果 = " + (a === b))
	console.log("(a != b)的結果 = " + (a != b))
	console.log("(a !== b)的結果 = " + (a !== b))
	console.log("(a > c)的結果 = " + (a > c))
	console.log("(a < c)的結果 = " + (a < c))
	console.log("(a >= c)的結果 = " + (a >= c))
	console.log("(a <= c)的結果 = " + (a <= c))
</script>

輸出結果爲

3.4 邏輯運算符

3.4.1 邏輯運算符介紹
邏輯運算符用於判斷兩個變量或值之間的邏輯。

3.4.2 邏輯運算符列舉

運算符	描述	例子
&&	and	(x < 10 && y > 1) 爲 true
`\|\|`	or	(x5 `\|\|`y5) 爲 false
!	not	!(x==y) 爲 true

3.4.3 邏輯運算符示例

<script>
	var a = 10;
	var b = 15;
	console.log("(a > 10 && b > 10) 的結果 = " + (a > 10 && b > 10));
	console.log("(a > 5 && b > 10) 的結果 = " + (a > 5 && b > 10));
	console.log("(a > 10 || b > 10) 的結果 = " + (a > 10 || b > 10));
	console.log("!(a == b) 的結果 = " + !(a == b));
</script>

輸出結果爲

3.5 條件運算符

3.5.1 條件運算符介紹
條件運算符的運算指當運算結果出現不同的值時執行不同的結果。

3.5.2 條件運算符列舉

運算符	描述
?	條件運算符

3.5.3 條件運算符示例

<script>
	var a = 10;
	var b = 15;
	var c = a > b ? (a - b):(a + b);
	console.log("c = " + c);
</script>

輸出結果爲

JavaScript（一）—— JavaScript 基礎語法（標籤、輸出、註釋、關鍵字、變量、數據類型及轉換、運算符）

JavaScript 基礎語法

一、JavaScript 簡介

1.1 JavaScript 概述

1.2 JavaScript 使用

1.3 JavaScript 關鍵字

二、JavaScript 變量與數據類型

2.1 JavaScript 變量

2.2 JavaScript 數據類型

2.3 數據類型轉換

三、JavaScript 運算符

3.1 算術運算符

3.2 賦值運算符

3.3 比較運算符

3.4 邏輯運算符

3.5 條件運算符

電子科技大學計算機科學與技術就讀體驗

Golang爬蟲代理接入的技術與實踐

JavaScript（一）—— JavaScript 基礎語法（標籤、輸出、註釋、關鍵字、變量、數據類型及轉換、運算符）

JAVA 數據結構與算法（五）—— 樹結構之二叉樹

JAVA 數據結構與算法（三）—— 查找算法（順序/線性查找、二分查找/折半查找、插值查找、斐波那契查找）

JAVA 數據結構與算法（四）—— 哈希算法

JAVA 數據結構與算法（二）—— 排序算法（冒泡、選擇、插入、希爾、快速、歸併、計數、基數、堆排序和桶排序）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結