JavaScript從入門到精通之入門篇（一）概念與語法

入門篇大綱

第一部分 概念與語法

1.JavaScript的歷史

2.基本概念

3.JavaScript的使用、調試和異常處理

4.基本詞法和變量

5.數據類型和類型轉換

6.運算符

算數運算符

賦值運算符

一元運算符

使用一元運算符，將會把所有的內容轉換爲數值運算，不使用字符運算
例子：

var i = “10”;
i++;  // 與 i += 1 或者 i = i + 1 類似
console.log(i) // 輸出： 11

注意： i++ 和 ++i 的區別

• i++和++i 獨立運算時，運算的結果是完全相同的；
• 但是如果將i++和++i進行賦值、打印、獲取時，運算的先後順序就會影響賦值的先後順序；
• 如果是i++，變量在前，先賦值，再運算
• 如果是++i，變量在後，先運算，再賦值

例子：

var i = '10';
i++;
console.log(i); // 輸出： 11
++i;
console.log(i); // 輸出： 12

var i = '10';
var x = i++;
var y = ++i;
console.log(x); // 輸出：10
console.log(y); // 輸出：12

位運算符

進制

2進制和16進制的互轉技巧: 8421法

二進制數值：        1101   0001   0011   0011   1101
二進制比值：        8421   8421   8421   8421   8421 
16進制下標：         13     1      3       3     13   
16進制結果：         d      1      3       3      d

所以：11010001001100111101（二進制） = d133d （16進制） 

位非運算符 ~

位與運算符 &

有一個0爲0，沒有0爲1

• 1 & 1 = 1， 1 & 0 = 0，0 & 1 = 0，0 & 0 = 0

var a = 20; // 轉成二進制：10100
var b = 10; // 轉成二進制：01010
            // 位與運算後：00000 轉成10進制 --> 0
console.log(a&b); // 輸出：0

位或運算符 |

有一個1爲1，沒有1爲0

• 1 | 1 = 1， 1 | 0 = 1，0 | 1 = 1，0 | 0 = 0

var a = 20; // 轉成二進制：10100
var b = 10; // 轉成二進制：01010
            // 位或運算後：11110  轉成10進制 --> 30
console.log(a|b); // 輸出：30

位異或運算符^

相同爲0，不同爲1

• 1 ^ 1 = 0， 1 ^ 0 = 1，0 ^ 1 = 1，0 ^ 0 = 0

var a = 20; // 轉成二進制：10100
var b = 10; // 轉成二進制：01010
            // 異或運算後：11110  轉成10進制 --> 30
console.log(a^b); // 輸出：30

左移位運算符、右移位運算符

console.log(8<<2); // 10000 --> 32
console.log(8>>2); // 10    --> 2
console.log(1<<n); // 可以求2的n次冪
console.log((0x0000FF<<16).toString(16)); // 顏色值

關係運算符

常見的關係運算符：< >
重點關注 == 和 === 的區別:

• == 自帶隱式轉換
  null == undefined
  0 == “” == false
  NaN與任何內容都不同，NAN也不等於NaN，常使用isNaN判斷某值是否爲數字

console.log(1 == "1");          // true
console.log(null == undefined);  // true
console.log(0 == "");           // true
console.log(0 == false);        // true
console.log(isNaN(parseInt('10a'))); // false

if(!x) { // 滿足條件的x值有： ""  0  false undefined null NaN
}

• === 表示兩者之間的類型和值是否都相等

邏輯運算符

常用的邏輯運算符有： ! && ||

7.循環語句

所謂循環，具體有以下幾個特點：

• 必須要有條件初始變量
• 必須要有進入循環的條件
• 必須有向條件外發展的表達式

while循環

例子：

<div id="btn0">按鈕0</div>
<div id="btn1">按鈕1</div>
<div id="btn2">按鈕2</div>
<div id="btn3">按鈕3</div>
<div id="btn4">按鈕4</div>
<div id="btn5">按鈕5</div>
<div id="btn6">按鈕6</div>
<div id="btn7">按鈕7</div>
<script>
var i = 0;
while (i <= 7) {
  var btn = document.getElementById("btn" + i);
  btn.onclick = function() {
  	console.log(i);    // 無論點擊哪個按鈕，始終輸出 8
	console.log(this); // 點擊按鈕時，會輸出你點擊的按鈕本身
  }
  i++;
}
</script>

do while循環

do while循環，先執行do的內容塊，然後纔去判斷條件，如果條件滿足時繼續循環，如果不滿足就不再循環；而while循環是先判斷條件纔去執行語句塊的

for循環

for (表達式1，表達式2， 表達式3)
表達式1： 一共運行了1次，循環之前運行
表達式2：是一個或者多個條件，不滿足一個就跳出循環，循環多少次就執行多少次，在運行循環之前先判斷條件
表達式3：循環多少次就執行多少次，循環語句塊中所有語句完成後再執行