JS的組成
JS由ECMAscript(es)，dom，bom組成
ECMAScript: (3/5/6/7)它是JS語言的標準,規定了JS的編程語法和基礎核心知識
DOM: document object model 文檔對象模型,提供給JS很多操作頁面中元素的屬性和方法
BOM: browser object model 瀏覽器對象模型 ,提供了很多操作瀏覽器 的屬性方法,而這些方法都存放在window瀏覽器對象上
JS的使用
在 HTML 中，JS 代碼必須位於 <script> 與 </script> 標籤之間。
舊的 JS例子也許會使用 type 屬性：<script type="text/javascript">。。type 屬性不是必需的。JS 是 HTML 中的默認腳本語言。
JS代碼塊可以放在head，body標籤中，或者html標籤之外（不推薦），最好放在body和html標籤之間，這樣可以減少頁面呈現時間，有更好的用戶體驗。
JS代碼同樣可以外部引用，使用src屬性配置路徑（絕對路徑，相對路徑，同文件夾不加路徑也可）
<script src="https://域名/js/javascript1.js"></script>
<script src="/js/javascript1.js"></script>
<script src="javascript1.js"></script>
JS輸出
使用 window.alert() 寫入警告框
使用 document.write() 寫入 HTML 輸出
使用 innerHTML 寫入 HTML 元素
使用 console.log() 寫入瀏覽器控制檯
JS數據類型
Undefined、Null、Boolean、Number和String，Object（包含數組，函數等等，本質是無序鍵值對）
var firstName; // undefined
var bool = true; // boolean
var obj = null; // null
var length = 7; // 數字
var lastName = "Gates"; // 字符串
var dogs = ["a", "b", "c"]; // 數組
var x = {firstName:"Bill", lastName:"Gates"}; // 對象 訪問：x.firstName or x['firstName']
JS字面量和變量
3
3.33
"string"
'string'
var a = 1;
var b = "123";
JS註釋和標識符
//我是單行註釋123
/*12334
我是多行註釋
*/
在大多數編程語言中，合法名稱的規則大多相同。
在 JS 中，變量命名必須是數字、字母、下劃線（-）或美元符號（$）。
首字母不能爲數字(不推薦$和_開頭，這往往會產生衝突，比如jquery)。
變量命名可以遵循大小駝峯法則，並且大小寫敏感
var firstName = 1;
var FirstName = 2;
JS的運算符“+”
//數字和數字
var x = 3 + 5;//8
//字符串和字符串
var x = "a" + " " + "b";//"a b"
//數字和字符串，順序問題
var x = "8" + 3 + 5;//"835"
var x = 3 + 5 + "8";//"88"
JS的typeof
typeof "Bill" // 返回 "string"
typeof 3.14 // 返回 "number" 整數小數都是number
typeof true // 返回 "boolean"
typeof false // 返回 "boolean"
typeof x // 返回 "undefined" (假如 x 沒有值)
typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4] // 返回 "object" 數組即對象
typeof null // 返回 "object"
typeof function myFunc(){} // 返回 "function"
JS事件
| 事件名 | 事件介紹 |
|---|---|
| onabort | 圖像的加載被中斷。 |
| onblur | 元素失去焦點。 |
| onchange | 域的內容被改變。 |
| onclick | 當用戶點擊某個對象時調用的事件句柄。 |
| ondblclick | 當用戶雙擊某個對象時調用的事件句柄。 |
| onerror | 在加載文檔或圖像時發生錯誤。 |
| onfocus | 元素獲得焦點。 |
| onkeydown | 某個鍵盤按鍵被按下。 |
| onkeypress | 某個鍵盤按鍵被按下並鬆開。 |
| onkeyup | 某個鍵盤按鍵被鬆開。 |
| onload | 一張頁面或一幅圖像完成加載。 |
| onmousedown | 鼠標按鈕被按下。 |
| onmousemove | 鼠標被移動。 |
| onmouseout | 鼠標從某元素移開。 |
| onmouseover | 鼠標移到某元素之上。 |
| onmouseup | 鼠標按鍵被鬆開。 |
| onreset | 重置按鈕被點擊。 |
| onresize | 窗口或框架被重新調整大小。 |
| onselect | 文本被選中。 |
| onsubmit | 確認按鈕被點擊。 |
| onunload | 用戶退出頁面。 |
JS事件觸發的重要屬性，方法
event.clientX
event.clientY
event.screenX
event.screenY
event.type//返回事件名稱
event.stopPropagation()//阻止事件冒泡
event.preventDefault()//阻止默認事件
JS字符串方法
length屬性返回字符串長度
var str = '123456';
var len = str.length;
轉義字符
’
"
\
\n 換行
\r 回車
字符串搜索
indexOf() 方法返回字符串中指定文本首次出現的索引（位置）
lastIndexOf() 方法返回指定文本在字符串中最後一次出現的索引
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
兩種方法都接受作爲檢索起始位置的第二個參數。
search和indexOf
search() 方法搜索特定值的字符串，並返回匹配的位置
search() 方法無法設置第二個開始位置參數。
indexOf() 方法無法設置更強大的搜索值（正則表達式）。
字符串切片
slice(start, end) //提取字符串的某個部分並在新字符串中返回被提取的部分，如果某個參數爲負，則從字符串的結尾開始計數
substring(start, end) //substring() 類似於 slice()。不同之處在於 substring() 無法接受負的索引
substr(start, length) //substr() 類似於 slice()。不同之處在於第二個參數規定被提取部分的長度。
字符串替換
replace('old','new')//返回的是新字符串，只替換首個匹配，可以使用正則
大小寫轉換
toUpperCase()//轉大寫
toLowerCase()//轉小寫
字符串連接，類似+
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
去除字符串兩端空白符
var str = " Hello World! ";
alert(str.trim());
字符串轉數組
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗號分隔
字符串索引
var str = "HELLO WORLD";
str.charAt(0); // 返回 H
str[0]; // 返回 H
// []索引的缺陷
/*
不適用 Internet Explorer 7 或更早的版本
它讓字符串看起來像是數組（其實並不是,字符串一創建就不可變）
如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。
它是隻讀的。str[0] = "A" 不會產生錯誤（但也不會工作！）
*/
JS== 和 ===
== 基本類型比較的是值，對象比較的是地址
=== 不但比較值還比較類型
NaN - 非數值 和 Infinity無窮大
NaN 的類型還是數，typeof NaN 返回 number
數字+NaN = NaN
字符串+NaN = 字符串
Infinity （或 -Infinity）是 JavaScript 在計算數時超出最大可能數範圍時返回的值。
Infinity還是數字類型
除以 0（零）也會生成 Infinity：
var x = 2 / 0; // x 將是 Infinity
var y = -2 / 0; // y 將是 -Infinity
Number方法
toString() 以字符串返回數值。 所有 JavaScript 對象都擁有 toString() 方法
toFixed() 返回字符串值，它包含了指定位數小數的數字，toFixed(2)就是保留兩位小數（四捨五入）
toPrecision() 返回字符串值，它包含了指定長度的數字
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
強制類型轉換(全局方法)
Number() 方法
parseInt() 方法 解析一段字符串並返回數值。允許空格。只返回首個數字
parseFloat() 方法 解析一段字符串並返回數值。允許空格。只返回首個數字(浮點)
數組屬性方法
基本方法
var cars = [1,2,3,4,5,6];
var x = cars.length; // length 屬性返回元素的數量
var y = cars.sort(); // sort() 方法對數組進行排序
var a = cars[0]; // 索引 值爲1
cars.forEach(myFunction) //遍歷數組，可以使用函數作爲參數
cars.push(7); //在數組結尾加一個元素 返回新數組的長度
cars.pop(); //pop() 方法從數組中刪除最後一個元素 返回“被彈出”的值
cars.shift(); //刪除首個元素
cars.unshift(8); //增加元素到數組首位
cars.splice(2, 0, 9, 10) // 可用於向數組添加新項 第一個參數（2）定義了應添加新元素的位置 第二個參數（0）定義應刪除多少元素 其餘參數定義要添加的新元素 返回一個包含已刪除項的數組
delete cars[0]; // 把 數組 中的首個元素改爲 undefined 留下未定義的空洞（不推薦使用）
Array.isArray(cars); // 返回 true 判斷是否爲數組 如果直接用typeof，返回的是oject
cars instanceof Array; //返回 true 另一種判斷方法
使用 splice() 來刪除元素
js刪除數組任意索引元素用delete會留下undefined空洞，而使用splice(x, 1);方法就可以刪除索引爲x的元素，並且不留空洞
數組轉字符串
var lst = [1,2,3];
lst.join(','); // '1,2,3'
合併（連接）數組
如果直接使用+號，返回的不是連接的數組，而是數組元素的字符串
[1]+[2,3,4]
"12,3,4"
concat方法 不會更改現有數組，它總是返回一個新數組 可以使用任意數量的數組參數
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // 將arr1、arr2 與 arr3 連接在一起
數組切片
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
數組和對象的區別
在 JavaScript 中，數組使用數字索引。
在 JavaScript 中，對象使用命名索引。
數組是特殊類型的對象，具有數字索引。
數組排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // 對 fruits 中的元素進行排序 按字符串順序對值進行排序
fruits.reverse(); // 反轉元素順序
//數字排序 sort方法如果數字按照字符串來排序，則 "25" 大於 "100"，因爲 "2" 大於 "1"
//比值函數
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
//使用相同的技巧對數組進行降序排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
//隨機排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});