結構 ：html構建
樣式：css控制
行爲：JavaScript實現
什麼是JavaScript？
JavaScript是一種跨平臺的腳本語言，平臺，即運行環境，一般指操作系統。
------------------------------------------------------------------------------------------------------------------------------------------------
JS語法基礎知識
<script>標籤
屬性：
type = 'text/javascript'
src屬性， 引入外部的JS代碼
（1）且一個文檔中可以有多個<script>標籤，執行的順序是依次由上而下執行
（2）一個script標籤只能引入，或者在標籤內部寫代碼
JS中的輸出方法：
(1). alert() 彈窗
(2). document.write() 在當前頁面上輸出內容
(3). console.log() 在控制檯輸出內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<script>
alert("this is ok")
</script>
<script>
document.write("hello world")
</script>
<script>
console.log("output on console")
/*可以用來調試，不會將內容輸出到瀏覽器，不印象用戶使用*/
</script>
</head>
<body>
</body>
</html>
JS中的常量和變量：
1. 常量：值不可以改變的叫做常量
數據類型：
基本數據類型：
a. 數字
b. 布爾值
c. 字符串
複合數據類型：
數組，列表，字典等
特殊數據類型：
null 空 undefined NaN 非數
2. 變量：值可以被修改的變量
申明變量的關鍵字：var
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<script>
var number = 100; /*申明 初始化*/
alert(number);
var num;
alert(num); /*此時的num是undefined*/
</script>
</head>
<body>
</body>
</html>
變量弱引用：
Javascript是弱引用語言，變量的數據類型在負值的時候才能確定，JS中的變量是弱引用類型的變量。
<script>
var number = 100; /*申明 初始化*/
alert(number);
number = "hello";
alert(number); /*此時的num是undefined*/
</script>
變量命名規則（太基礎跳過）
運算符（太基礎跳過）
強制數據類型轉換：
1. Number()：將其他數據類型強制轉換爲數字
2. Boolean()：將其他數據類型強制轉換爲布爾值
3. parseInt()：取整，也可以截取字符串中的數字且結果爲整數，還可以將其他的進制轉換爲十進制。
4. parseFloat()：截取字符串中的浮點數
<script>
var str = "110011";
alert(parseInt(str, 2)); /*將二進制轉換爲十進制*/
alert(parseInt("3.123")); /*3*/
alert(parseInt("3.12sfx")) /*3*/
alert(parseFloat("3.12sfx")) /*3.12*/
</script>
流程控制（三大結構，太基礎跳過）
循環：
<script>
for (let i=0; i<10; i++)
{
document.write("this is " + i)
}
</script>
<script>
let i = 0;
while (i<10)
{
document.write("This is " + i);
i++;
}
</script>
JS中的函數
語法：function 聲明
有無參數，有無返回值
<script>
print_info("chcoo")
changeInfo("helo")
alert(changeInfo("hello"))
function print_info(msg) {
for(let i=0; i<10; i++)
{
document.write(msg + "<br>");
}
}
function changeInfo(msg) {
if(msg === "hello")
{
document.write(msg + "world");
}
else
{
document.write("Other info");
}
return "done already";
}
arguments:
在封裝函數的時候，函數內部會自動生成一個arguments對象，arguments對象用於存儲傳入函數中的參數，例如arguments.length用於存儲參數的個數。arguments[i]表示第 i-1 個參數。
<script>
alert(changeInfo("hello"))
function changeInfo(msg) {
if(msg === "hello")
{
document.write(msg + "world");
}
else
{
document.write("Other info");
}
alert(arguments.length);
return "done already";
}
</script>
javascript中的數組：
數組的聲明方式：
1. 通過new運算符創建數組
2. 省略new運算符創建數組
3. 直接通過常量賦值
var arr1 = new Array(10, 20, 30);
var arr2 = Array(10, 20, 30);
var arr3 = [10, 20, 30];
var arr4 = new Array(10); /*長度爲10的空數組*/
/*數組遍歷*/
for (let i=0; i<arr1.length; i++)
{
document.write(arr3[i] + '<br>');
}
/*隨機數*/
for(let i=0; i<10; i++)
{
arr4[i] = Math.random();
}
for (let i=0; i<arr4.length; i++) /*這裏使用let聲明的是局部變量*/
{
document.write(arr4[i] + "<br>");
}
關於數組的方法：
棧結構：
1. push 向數組末尾添加元素，返回值爲添加後數組的長度
2.pop 在數組末尾刪除一個元素，返回值爲彈出的數組
隊列結構：
1. shift 從隊列前端彈出一個元素, 返回值爲彈出的元素
2. unshift 從數組的頭部插入元素，返回值爲數組的長度
數組拼接：
1 . concat()
<script>
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var newArr = arr1.concat(arr2, 5, 6);
alert(newArr)
</script>
數組切片：
.slice(start, end), 切片的區間是[start, end)，切片區間內的數組，返回值爲切片後的數組
.splice( start, length, var1, var2)： 從start位置開始，截取length個元素，並從start位置開始，插入後面的數據， 返回值是截取掉的元素。
<script>
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var newArr = arr1.concat(arr2, 5, 6);
var sliceArr = newArr.slice(2, 4);
newArr.splice(1, 1, "h");
alert(newArr)
alert(sliceArr)
</script>
.join()方法，將數組中的元素按照傳入的字符拼接成字符串，並返回拼接後的字符串。
.reverse() ，數組逆序，不生成副本
.sort(), 對數組進行排序，不生成副本
[注]： 數組按照數值排序需要傳入參數纔可以，sort()方法默認不是按照數值大小進行排序的。
<script>
var arr1 = [1,3,6,4,2];
arr1.sort(function (value1, value2) {
return value1 - value2;
});
alert(arr1);
</script>
<script>
var arr = new Array(30); //長度爲30的數組
for (let i=0; i<30; i++)
{
arr[i] = (i+1) * 2;
}
alert(arr);
//求平均數
var average = []; // 空數組
for (let i=0; i<6; i++)
{
let newArr = arr.slice(i*5, i*6+5); // 也可以使用splice，但是splice方法會修改原數組
let sum = 0;
for (let j=0; j<5; j++)
{
sum += newArr[j];
}
average[i] = sum / 5;
}
alert(average);
</script>
數組引用：
1. 基本數據類型在賦值和傳值的時候不會引用
2. 但是數組在賦值的時候會引用，即複合數據類型是一種引用數據類型。若要實現deepcopy，可以使用concat()方法。
變量的聲明提升和省略var：
預編譯，在代碼開始運行前，會爲所有需要分配內存的變量和函數分配內存。在當前作用域聲明的變量以及函數會提升到整個代碼的最前面去運行。
省略var聲明變量，變量會被強制聲明爲全局變量，這是一種不規範，不嚴格的寫法，但是由於JavaScript的限制較爲寬鬆，所以不算是錯的，但是不推薦這種寫法。
二維數組：
<script>
var arr1 = [1,2,3];
var arr2 = [11,22,arr1];
alert(arr2[2][1]);
</script>
javascript中的ECMA5嚴格模式：
1. 嚴格模式：
嚴格模式使得JavaScript的語法更加嚴格。嚴格模式的目的是爲了：
a.消除JavaScript語法的不合理，不嚴謹之處
b. 消除代碼運行的一些不安全之處，保證代碼安全運行。
c. 提高編譯器效率，增加運行速度。
在需要使用嚴格模式的作用域下：利用 ”user strict“即可，不推薦將嚴格模式寫在全局。
<script>
"use strict"; // 進入嚴格模式
var arr1 = [1,2,3];
var arr2 = [11,22,arr1];
alert(arr2[2][1]);
</script>
嚴格模式下的保留字：
implements, interface, let, package, private, protected, public, static, yield
ECMA5新增的數組方法：
.indexOf(item, start): 在數組中從start位置開始，查找元素item第一次出現的下標，start可以省略，默認值是0
.forEach()數組遍歷的方法：
<script>
"use strict"; // 進入嚴格模式
var arr1 = [1,2,3,4,5];
arr1.forEach(function (item, index, arr) {
document.write(item + "," + index + "," + arr + "<br>");
}); // forEach會自動生成三個參數
</script>
.map() ： 將某種對元素的操作映射到數組中：
<script>
"use strict"; // 進入嚴格模式
var arr1 = [1,2,3,4,5];
var newArr = arr1.map(function (item, index, arr) {
return item * 2;
});
alert(newArr);
</script>
.filter(): 對數組中的元素進行過濾，返回值是符合條件的元素組成的數組
<script>
"use strict"; // 進入嚴格模式
var arr1 = [1,2,3,4,5];
var newArr = arr1.filter(function (item, index, arr) {
return item > 2;
});
alert(newArr);
</script>
.some() 在數組中查找是否有符合條件的元素，返回值是布爾值
<script>
"use strict"; // 進入嚴格模式
var arr1 = [1,2,3,4,5];
var res = arr1.some(function (item, index, arr) {
return item > 2;
});
alert(res);
</script>
.erery(): 判斷數組中每個元素是否都滿足條件。
<script>
"use strict"; // 進入嚴格模式
var arr1 = [1,2,3,4,5];
var res = arr1.every(function (item, index, arr) {
return item > 2;
});
alert(res);
</script>
----------------------------------------------------------------------------------------------------------------------------