文章目錄
第一節：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>
控制檯結果：
