寫在前面:本文用于快速學(xué)會簡易的JS，僅做掃盲和參考作用

1.JavaScript函數(shù)

什么是函數(shù):執(zhí)行特定任務(wù)的代碼塊

1.1定義：

使用function來進(jìn)行定義(類似于python里面的def 或者java和c++里面的void，int這些返回類型開頭)。定義規(guī)則如下:

function Func_1(para1, para2){//代碼塊
}

注意，para1和para2這種形式參數(shù)不需要給類型，返回值也不需要定義類型(屬于弱語言定義，和python是類似的效果)

1.2調(diào)用函數(shù):

1.2.1直接定義和調(diào)用：

function add(a, b){return a+b;
}
var m = add(1,2)

1.2.2直接定義的同時調(diào)用：

var add = function(a, b){return a+b;
}
var m = add(1,2)

2.JavaScript對象

JS和眾多的語言一樣，具備著面向?qū)ο缶幊痰奶攸c，所以我們在此章節(jié)討論JS里面的對象。JS有著各種各樣的對象，我們主要講比較重要的幾種對象。

對象模型	子模型
Array(數(shù)組模型)
String(字符串模型)
JSON(JavaScript Object Notation模型)
BOM(Browser Object Model)	window(瀏覽器窗口對象)，history(歷史對象)，location(獲取窗口、框架對象)，navigator(對Navigator對象的只讀引用)
DOM(Document Object Model)	Document(整個文檔的對象),Element(元素對象),Attribute(屬性對象),Text(文本對象),Comment(注釋對象)

2.1Array(數(shù)組):

2.1.1定義方式:

//第一種
var arr = new Array(1,2,3,4);
//第二種
var arr = [1,2,3,4];

2.1.2屬性和使用方式：

數(shù)組的長度是可變的，存放數(shù)據(jù)類型也可以改變，例子如下:

var arr = [1,2,3,4]
arr[10] = "50"
alert(arr)
alert(arr[5])

我們可以看到數(shù)組的輸出長度已經(jīng)變成了11，然后中間未定義的數(shù)組類型已經(jīng)變成了undefined類型(未定義類型)。

Array對象里面內(nèi)置了各種屬性和方法，我們介紹比較常見的屬性和方法:

屬性or方法	作用
length	返回數(shù)組的長度
forEach()	遍歷數(shù)組中每個有值的元素，返回值為依次彈出來的值
push()	往數(shù)組末尾添加新元素，返回新的長度
splice()	從數(shù)組中刪除元素，使用兩個參數(shù)，第一個為開始的位置(從0開始)，第二個為刪除的數(shù)量為多少

通過以下代碼即可看到各個函數(shù)的效果

arr = [1,2,3,4]
alert(arr.length) //獲取到數(shù)組的長度
arr.forEach(element=>{alert(element)
});
arr.push(2)
arr.splice(0,1)
alert(arr)

2.2String(字符串):

2.2.1定義方式：

//第一種
var a = new String("HelloJS")
//第二種
var a = "HelloJS"

2.2.2 屬性和方法

屬性or方法	作用
length	獲取字符串長度
charAt()	獲取下標(biāo)位置所在的字符
indexOf()	檢索字符串，輸入的參數(shù)為需要找到的字符串，返回的是找到的子字符串的開頭的下標(biāo)
trim()	去掉字符串兩邊的空格
substring()	截取字符串，參數(shù)為start和end，截取到start到end的字符串，和JAVA類似，截取到的僅包括start而不包括end

通過以下代碼可以看到各個函數(shù)的效果:

var str = new String(" HelloJS ")
console.log(str)
console.log(str.length)
console.log(str.charAt(1))
console.log(str.indexOf("ll"))
console.log(str.trim())
console.log(str.substring(1,2))

效果如下所示:

2.3JSON(JavaScript Object Notation):

2.3.1 定義方式:

當(dāng)我們定義普通的自定義類的時候，使用如下方式實現(xiàn)自定義類

var Json = {name:"Tom",age:18,zong:add(a,b){return a+b;}
};

JSON實際上是一種特殊的自定義類，它和自定義類的區(qū)別在于JSON對象的所有屬性都需要雙引號括起來(如下個示范代碼所示，單引號也是不行的，且最后一行的屬性不準(zhǔn)使用","，否則就不是格式正確的JSON格式，且JSON里面不包含自定義類的方法)

var json={"name":"Jerry","type":"rabbit","age":10
};

如果需要驗證自己的JSON格式是否正確，可以到這個網(wǎng)站來測試自己的JSON格式是否正確,如下圖所示則為正確的格式

2.3.2 如何使用:

JSON多用于數(shù)據(jù)載體，主要在網(wǎng)絡(luò)中進(jìn)行數(shù)據(jù)傳輸。在使用的時候，使用字符串進(jìn)行包裝然后進(jìn)行賦值給變量。如何獲得JSON對象的字符

//JSON字符串到JS對象
var jsObject = JSON.parse(userStr);
alert(jsObject.name)
//從JS對象到JSON字符串
var jsonStr = JSON.stringify(jsObject)

2.4BOM(Browser Object Model):

全稱為瀏覽器對象模型，被用于JS與瀏覽器進(jìn)行對話。主要有以下幾種模型

對象	作用
window	瀏覽器窗口對象(重點了解)
history	獲取History對象的只讀引用
location	獲取窗口或框架的Location對象(重點了解)
navigator	對navigator對象的只讀引用

2.4.1 window(窗口對象):

如何調(diào)用:

window.alert("Hello")
//由于默認(rèn)的Window會使用，所以可以直接省略window
alert("Hello")

window里面所能使用的方法為:

方法	作用
alert()	顯示帶有一段消息和一個確定按鈕的警告框
confirm()	顯示帶有一段消息以及確定按鈕和取消按鈕的對話框，點擊確定按鈕返回值為true，點擊取消返回的值為false
setInterval()	按照指定的周期(以毫秒計)來調(diào)用函數(shù)or計算表達(dá)式，周期性的執(zhí)行，調(diào)用方式為setInterval(function(){},2000)，每隔2000ms調(diào)用一次function()
setTimeout()	和setInterval()差不多，在指定的毫秒數(shù)后調(diào)用函數(shù)，但是setTimeout(function(){},2000)僅僅只執(zhí)行一次

需要注意的事，我們在使用setInterval的時候，里面的function(){}不能帶有形式參數(shù)，如果我們需要使用參數(shù)，可以在function里面調(diào)用別的函數(shù)來傳遞參數(shù)

2.4.2 location(地址欄對象):

如何調(diào)用:

window.location.屬性
或者
location.屬性

常用屬性:

屬性	作用
href	設(shè)置或者返回完整的URL

2.5 DOM(Document Object Model):

DOM為文檔對象模型，就是將標(biāo)記語言的各個組成部分封裝為對應(yīng)的對象。主要有以下幾種

對象	作用
Document	整個文檔構(gòu)成為一個對象
Element	元素對象，如(html)，(div)等都為元素對象
Attribute	屬性對象，如(div)里面的href=等即為Attribute對象
Text	文本對象，如div里面的文字屬性即為這個
Comment	注釋對象

JS通過DOM和事件監(jiān)聽行為來控制網(wǎng)頁端的變化，主要可以實現(xiàn)下列效果:
1.改變HTML的內(nèi)容
2.改變HTML的樣式(改變CSS)
3.對DOM事件做出反應(yīng)
4.添加或者刪除HTML語言

2.5.1獲取方式:

HTML中的Element可以通過Document獲取，而Document可以通過window來獲取。
1.通過id，返回單個對象

var h1 = document.getElementById('h1');

2.通過標(biāo)簽名，獲得對象數(shù)組

var divs = document.getElementsByTagName('div');

3.通過name屬性值獲得對象數(shù)組

var hobbys = document.getElementsByName('hobby');

4.通過class屬性獲得對象數(shù)組

var clss = document.getElementsByClassName('cls');

通過以下代碼可以實現(xiàn)改變HTML語言?？梢园扬@示的內(nèi)容從HelloJS改為 改變

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="use">HelloJS</div>
</body>
</html>
<script>var gai = document.getElementById('use');gai.innerHTML = "改變"
</script>