零、JS引入

外部引入

<script type="text/javascript" src="js/index.js"></script>  //寫到body內的最後面
複製程式碼

一、註釋

快捷鍵：ctrl+/ //單行註釋

快捷鍵：ctrl+shift+/ /*多行註釋*/

二、輸出

下面是三種不同的輸出方式：

var name = 'Petter';   //將字串Petter賦值給 變數name

1.控制檯輸出
console.log('Hello,world01');    //輸出字串  "Hello,world"
console.log(name);               //輸出變數  "Petter" 
console.log('Hello,' + name + '01!');  //輸出變數+字串 "Hello,Petter!"

2.頁面輸出 
document.write('hello,world02');     //能夠在HTML頁面裡面輸出內容

3.提示框輸出 
alert('hello,world03');
複製程式碼

1.控制檯輸出

2.頁面輸出

3.提示框輸出

以上三條是作為前端工程師以後除錯JS程式碼的利器。

三、變數

1.原始變數宣告賦值用法（宣告與賦值分開寫）

var a;   //宣告變數a，分配記憶體
a = 10;  //為變數a賦值
console.log(a);  //控制檯輸出為10
複製程式碼

2.簡化變數宣告賦值用法（宣告與賦值一起寫）

var a = 10; 
console.log(a);
複製程式碼

3.通過typeof來檢視變數的資料型別

var a;
a = 10;               // number
a = true;             // boolean
a = 'Henrry Browne'   // string
a = function(){};     // function
a = {age:26};         // object

console.log(a);  
console.log(typeof a); //輸出語句 
複製程式碼

四、識別符號命名

識別符號首字母可以用 abc _ $ 來開頭，用駝峰命名法的英文單詞
不能用關鍵字與保留字命名變數
變數名對大小寫敏感 a 和 A 不是一個物種

五、關鍵字與保留字

關鍵字

JS正在使用的名稱，用途包括：系統變數名、JS內建方法函式名、已知宿主環境提供的API

break	do	instanceof	typeof	if	else
case	var	new	finally	return	void
continue	for	switch	while	debugger	function
this	with	try	catch	throw	delete
default	in	implements	package	public	interface
private	static	let	protected	yield

保留字

將來javascript可能會用的名稱。

abstract	enum	int	short	boolean	export
byte	extends	long	super	native	synchronized
class	float	throws	const	goto	transient
volatile	double	import

六、全域性變數與區域性變數

var a = "local var";      //a 在函式外部建立的 為全域性變數
function print(){        
    console.log(a);       // a 為全域性變數，因為前面沒加var 
}

------

function test(y) {        // 引數y為區域性變數
    var x = "global var"  // x在函式內部建立 為區域性變數
}

console.log(x);           //x為區域性變數
console.log(y);           //y為區域性變數

----------
// 塊（block）
{
    var x1 = "hello,world";
}
console.log(x1); // hello,world 結論：js（ES5）沒有塊級作用域

var n1 = "123";  // 宣告全域性變數
console.log(n1); //123

(function () {
    var x2 = "Hi,boy";
    console.log("自呼叫函式執行");   //自呼叫函式執行
    console.log(n1); //123
})();
console.log(x2); x2為區域性變數，這裡無法訪問 
複製程式碼

全域性變數：函式外部定義的變數，其作用域（全域性作用域）範圍為整個檔案系統。
區域性變數：函式內部定義的變數/函式引數，其作用域範圍為函式內部。
函式作用域：作用域就是函式變數起作用的區域。

七、運算子與表示式

1. 基本運算子

+：加法運算子，如 a + b
-：減法運算子，如 a - b
*：乘法運算子，如 a * b
/：除法運算子，如 a / b
%：模運算（取餘數），如 a % b
++：自增運算子（自身+1）
--：自減運算子（自身-1）

var a = 'My name si:'; //字串相加
var b = 'laoYe';
console.log(a + b); //控制檯輸出：My name si:laoYe
複製程式碼

var a = 10;
var x = ++a; // x = 11, a = 11

var a = 10;
var x = a++; // x = 10, a = 11

console.log(x);
複製程式碼

不管++在前，還是++在後，變數自身都會+1

++在前，先自增再賦值；++在後，先賦值在自增

2. 賦值運算子

var num = 10;
num = num + 10;    //可以被簡寫為 num += 10;
console.log(num);
複製程式碼

賦值運算子是為JavaScript中的變數賦值，即將該運算子右方計算出的值賦予左側的變數。

=：賦值運算子，如 x = 10; ，將 10 賦值給變數 x
+=：變數與值相加，如 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. 關係運算子

關係運算子描述兩個變數的關係，其返回值型別為布林型別（boolean），即 true 和 false。

==：判斷兩個變數是否相等，如 'Henrry Lee' == 'Henrry Lee'，返回 true
>：判斷等號左邊的變數是否大於等號右邊的變數，如 20 > 10，返回 true
<：判斷等號左邊的變數是否小於等號右邊的變數，如 20 < 10 ，返回 false
>=：判斷等號左邊的變數是否大於等於等號右邊的變數，如 20 >= 10，返回 true
<=：判斷等號左邊的變數是否小於等於等號右邊的變數，如 20 <= 10，返回 false
===：恆等於，要求不僅資料型別要一致，值也要一致，如 1 === '1'，返回 false
!==：不恆等於，只要型別或值不一樣，結果為true，如 1 !== '1'，返回 true

4. 邏輯運算子

邏輯運算子是JavaScript用於判斷幾條語句成立情況的一種運算，該運算子的返回值型別為布林型別。

邏輯與：&& ，同時為真才為真，如 (1 > 2) && (2 > 3)，返回 false
邏輯或：|| ，同時為假才為假，如 (1 > 2) || (2 > 3)，返回 true
邏輯非：! ，取反，如 !(1 > 2)，返回 true

5. 三元運算子

var isLogin = false;
isLogin ? console.log('已登入') : console.log('未登入');

-----
var a = 40, b = 30;
var max = a > b ? a : b;
console.log("max = " + max);
複製程式碼

三元運算子：a ? b : c;

首先判斷表示式a的值（true false），如果為true，則執行語句b 如果為false，執行語句c。

八、基本資料型別

1. 數值型別(number)

“0”、正數、負數、浮點數（小數）

            var a = 0;   
            var b = 1;
            var c = -1;
            var d = 1.1;
            console.log(typeof a);  //控制檯輸出型別：number
            console.log(typeof b);  //控制檯輸出型別：number
            console.log(typeof c);  //控制檯輸出型別：number
            console.log(typeof d);  //控制檯輸出型別：number

複製程式碼

2. 字串型別(string)

放到 '' "" 單引號、雙引號裡面的就是字串型別 "Hi" 'hi'

            var a = '0';
            var b = '1';
            var c = '-1';
            var d = '1.1';
            console.log(typeof a);  //控制檯輸出型別：string
            console.log(typeof b);  //控制檯輸出型別：string
            console.log(typeof c);  //控制檯輸出型別：string
            console.log(typeof d);  //控制檯輸出型別：string
複製程式碼

注意：該型別特點是，引號內的值，你輸入什麼就顯示什麼。

3. 布林型別(boolean)

true false

            var a = true;
            var b = false;
            console.log(typeof a); //控制檯輸出型別：boolean
            console.log(typeof b); //控制檯輸出型別：boolean

複製程式碼

4. 物件型別(object)

陣列是物件、空值null也是物件 {}, []

console.log(typeof []); // object
console.log(typeof {}); // object
複製程式碼

5. 函式型別(function)

// 定義函式
function sum(a, b) {
    return a + b;
}
// 呼叫函式
var result = sum(10, 20);
console.log(result); // 30
複製程式碼

函式型別是JavaScript中最複雜的一個資料型別，但它在JavaScript中扮演中相當重要的作用，它也同是物件導向程式設計中一個非常核心的內容。函式的設計非常大程度地決定了一個網站或應用的效能。從程式設計角度來講，它直接影響到了程式碼的可複用性，程式碼量，可以維護性，可擴充套件性等因素。這個對於JavaScript的初學者來說也是最難掌握好的一個部分，就算一個已經工作了好幾年的Web前端開發工程師，在對函式的組織和優化上都會下不少功夫。

第一章基礎知識

零、JS引入

一、註釋

二、輸出

三、變數

四、識別符號命名

五、關鍵字與保留字

六、全域性變數與區域性變數

七、運算子與表示式

1. 基本運算子

2. 賦值運算子

3. 關係運算子

4. 邏輯運算子

5. 三元運算子

八、基本資料型別

1. 數值型別(number)

2. 字串型別(string)

3. 布林型別(boolean)

4. 物件型別(object)

5. 函式型別(function)

6. 未定義(undefined)

相關文章

第一章 基礎知識

零、JS引入

一、註釋

二、輸出

三、變數

四、識別符號命名

五、關鍵字與保留字

六、全域性變數與區域性變數

七、運算子與表示式

1. 基本運算子

2. 賦值運算子

3. 關係運算子

4. 邏輯運算子

5. 三元運算子

八、基本資料型別

1. 數值型別(number)

2. 字串型別(string)

3. 布林型別(boolean)

4. 物件型別(object)

5. 函式型別(function)

6. 未定義(undefined)

相關文章

第一章基礎知識