第五章：JavaScript（第一話）
文章目錄
第一節：JavaScript簡介
關於JavaScript
JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別的語言。是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能的。
在1995年時，由Netscape(網景公司)的Brendan Eich(布蘭登)，與Sun公司合作開發的一門指令碼語言，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它和Java完全是兩樣東西
為了取得技術優勢，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript同樣可在瀏覽器上執行。為了統一規格，因為JavaScript兼容於ECMA標準，因此也稱為ECMAScript。
名字變化：Mocha ——LiveScript——JavaScript
JavaScript的作用
JavaScript的主要目的是，驗證發往伺服器端的資料、增加Web互動、加強使用者體驗度等，可用於開發網站、遊戲、移動端APP等
JavaScript的組成
1、核心（ECMAScript）
2、流覽器物件模型（BOM）
3、文件物件模型（DOM）
更多詳細介紹，可參考JavaScript百度百科
JS的編寫位置
內部JS
和CSS一樣，JS就是以script標籤，寫在HTML內部的。JS只有這麼一樣標籤可以寫。但是值得注意的是標籤內部是否有src.帶有src的script標籤叫外鏈JS。在外鏈JS裡寫的程式碼將被忽略。
內部JS可以寫在head標籤內，也可以寫在body標籤的任意位置。更多人會選擇寫在body內所有標籤的最後部位。
外部JS
內部JS能用自己的方法實現JS程式碼的編寫，但在實際開發中，很多也是分離的。更多地會把JS程式碼寫在JS檔案當中.這種寫在檔案外部的程式碼檔案，叫外部JS(也叫外鏈JS)。
呼叫外部JS檔案，會在script標籤新增路徑。
【屬性】
src—— JS檔案路徑
在往下的例子中，為了方便會全部以內部JS說明內容，也會經使用常見的方法把script標籤寫在body的最後。
JS的程式碼規範
【變數的命名規範】
變數名必須是數字,字母,下劃線_和美元符$組成;
第一個字元不能為數字
不能使用關鍵字或保留字
【程式碼可讀性】
識別符號區分大小寫，如：age和Age是不同的變數。但強烈不建議用同一個單詞的大小寫區分兩個變數。
變數命名儘量遵守駝峰原則: myStudentScore
變數命名儘量見名知意
保持程式碼縮排
JS語句的末尾儘量寫上分號;
◦運算子兩邊都留一個空格, 如 var n = 1 + 2 ;
第二節：變數與資料類形
JS變數的定義
【變數定義】(使用var關鍵字)：變數是儲存資料的容器
var age; //var 是關鍵字，age是變數名
【賦值】
age = 20;
【定義的同時賦值】
var age=20;
【一次定義多個變數】
var name=“zhangsan”, age=18, weight=108;
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>變數與資料類形</title>
</head>
<body>
<script type="text/javascript">
//定義的同時賦值
var name = "張小寶";
var age = 18;
//一次定義多個變數
var rmb = 2000,number = 1001,gender = "男";
</script>
</body>
</html>
JS的註釋與輸出
註釋
JavaScript 不會執行註釋。我們可以添加註釋來對 JavaScript 進行解釋，或者提高程式碼的可讀性。
單行註釋以//開頭。
多行註釋以/*開始，以*/結尾。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>註釋</title>
</head>
<body>
<script type="text/javascript">
// 我是單行註釋
/*我是多行註釋第一行
我是多行註釋第二行
我是多行註釋第三行
我是多行註釋第N行*/
</script>
</body>
</html>
輸出
輸出的內容，就是變數內容。
alert()—— 彈窗輸出（測試時可用，但使用不是最多）
console.log()—— 輸出到控制檯（一般用於測試）
innerHTML—— 輸出到雙標籤元素內容
value—— 輸出到表單元素
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>變數與資料類形</title>
</head>
<body>
<script type="text/javascript">
var name = "張小寶";
var age = 18;
var rmb = 2000,number = 1001,gender = "男";
alert(name);
alert(age);
alert(rmb);
alert(number);
alert(gender);
</script>
</body>
</html>
瀏覽器結果：
例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>變數與資料類形</title>
</head>
<body>
<script type="text/javascript">
var name = "張小寶";
var age = 18;
var rmb = 2000,number = 1001,gender = "男";
console.log(name); //輸出一個變數
console.log(age,rmb,number,gender) //輸出多個變數
</script>
</body>
</html>
瀏覽器及控制檯結果：
JS資料型別
基本資料型別
1、Number —— 數字型別
NaN ——除了阿拉伯數字外，還有NaN。它是一個特殊的值，即非數值(Not a Number)。數學運算無法得到數字時，就會返回NaN,它不代表任何值，也不等於任何值，甚至自己都不等於自己，任何資料與它運算都返回NaN，isNaN(a)：用來判斷a到底是不是非數字,返回布林值
2、String —— 字串型別
用引號（單/雙引號）括起來的內容
3、Boolean —— 布林型別
Boolean 型別有兩個值：true和false
引用資料型別
Array—— 陣列
Object—— 物件
特殊資料型別
Null
Null 型別是一個只有一個值的資料型別，即特殊的值 null。它表示一個空物件引用(指標)
Undefined
Undefined型別只有一個值，即特殊的 undefined，在使用 var 宣告變數，但沒有對其賦值，這個變數的值就是 undefined
資料型別判斷與轉換
資料型別判斷 typeof
例：
<script type="text/javascript">
console.log(typeof name);
console.log(typeof age);
console.log(typeof true);
console.log(typeof null);
</script>
控制檯結果：
資料型別轉換
1、基本資料型別轉換：利用內建函式進行轉換(主動)
Number()—— 強轉為Number型別
Boolean()—— 強轉為布林型別
toString() 或 String()—— 強轉為字串型別
【區別】
typeof String(null)是String
typeof String(undefined)是String
例：
<script type="text/javascript">
var word = '10'; //定義一個字串
console.log(typeof word); //word的資料型別是字串
word2 = Number(word); //把字串強轉為Number型別
console.log(typeof word2);
word3 = Boolean(word); //把字串強轉為布林型別
console.log(typeof word3);
</script>
控制檯結果：
2、隱式轉換(被動)
如果運算不能進行下去，內部就會嘗試進行資料型別的轉換
支援隱式轉換的運算：邏輯運算、關係運算、算術運算
第三節：數學運算
基本數學運算
【運算子】
+—— 加法
-—— 減法
*—— 乘法
/—— 除法
%—— 取餘
【運算函式】
NumObject.toFixed(digit)—— 四捨五入，
(在數字物件後面呼叫，digit為小數數位1-20，得到一個字串)
parseInt()—— 取整
獲取到第一個不為數字的字元(小數點、負號)為止。
parseInt(Q-ary，digit)可以把一個多進位制數轉化為十進位制整數
parseFloat()—— 函式可解析一個字串，並返回一個浮點數。
例：
<script type="text/javascript">
var a = 7,b = 3;c = 5.634
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
console.log('');
var c2 = c.toFixed(0); //對C進行四捨五入，0表示保留0位小數
console.log(c2,typeof c2);
console.log(parseInt(c)); //取整
console.log(parseInt('AF',16)); //把十六進位制AF轉為十進位制
</script>
控制檯結果：
一個逗號引發的破產（字串拼接）
例：
<script type="text/javascript">
var title1 = "逗號引發的",title2 = "破產";
console.log(title1 + title2); //字串拼接
//1號元工的工資
var staff1 = 5000;
//2號元工的工資
var staff2 = '8000';
//3號元工的工資
var staff3 = 10000;
console.log(staff1+staff2+staff3); //字串與數字的相加
</script>
瀏覽器控制檯結果：
賦值操作與關係運算
賦值操作
=—— 賦值符號
+=—— 加等於，即在原來的內容基礎上追加內容
-=—— 減等於
*=—— 乘等於
/=—— 除等於
%=——
關係運算（返回布林值）
【關係符號】
==—— 等於
!=—— 不等於
<—— 小於
>—— 大於
<=—— 小於等於
>=—— 大於等於
===—— 恆等於/全等於，比較的時候要求值和型別都相等（不會進行型別隱式轉換）
!==—— 不全等於
【關係運算符的比較規則】
1、 數字和數字比較, 直接比較大小
2、數字和字串比較, 字串轉換為數字後再比較
3、字串和字串比較, 進行字元的ASCII碼值比較
邏輯運算
邏輯運算“與或非”
&&—— 邏緝“與”
||—— 邏緝“或”
!—— 邏緝“非”
案例：閏年判斷
【獲取頁面元素（節點）】
document.getElementById()—— 獲取id名，得到的是節點
document.getElementsByClassName()—— 獲取類名，注意getElement帶了s,得到節點陣列
document.getElementsByTagName()—— 獲取i標籤名，注意getElement帶了s,得到節點陣列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>與或非</title>
</head>
<body>
<h1>閏年判斷</h1>
請輸入年份：<input type="number" id="year"><br/>
<br/>
<button id="btn"> 查詢 </button>
<br/><br/>
<div id="rest"></div>
<script type="text/javascript">
// 獲取所有元素
var getYear = document.getElementById('year');
var getButt = document.getElementById('btn');
var getRest = document.getElementById('rest');
//繫結點選事件
getButt.onclick = function(){
// 獲取使用者輸入的元素值（獲取DOM節點）
var fyear = getYear.value*1;
//邏緝判斷（整四不整百，或整四百，才是閏年）
if((fyear%4==0 && fyear%100!=0)|fyear%400==0){
rest.innerHTML = '查詢結果：' + fyear + '年是閏年';
}else{
rest.innerHTML = '查詢結果：' + fyear + '年是平年';
};
}
</script>
</body>
</html>
瀏覽器結果：
一元運算
++—— 自增1（在原來的數值基礎上加1）
--—— 自減1（在原來的數值基礎上減1）
注意：一元運算有前置與後置之分，返回值是完全不同的。
【前置】返回值：返回值是減1（加1）之後的值
【後置】返回值：返回值是沒減1（加1）之前的值
例：
<script type="text/javascript">
var a = 10;
//前置
console.log(++a);
var b = 20
console.log(--b);
//後置
var c = 30
console.log(c++);
var d = 40
console.log(d--);
</script>
控制檯結果：
