JavaScript
運(yùn)行在客戶端瀏覽器中箕肃，每一個(gè)瀏覽器都有JavaScript的解析引擎。
腳本語(yǔ)言：不需要編譯最盅，直接就可以被瀏覽器解析執(zhí)行突雪。
功能：可以來(lái)增強(qiáng)用戶和HTML頁(yè)面的交互過(guò)程起惕，可以來(lái)控制HTML元素涡贱，讓頁(yè)面有一些動(dòng)態(tài)的效果，增強(qiáng)用戶的體驗(yàn)惹想。
注：JavaScript=ECMAScript+JavaScript（BOM+DOM）
ECMAScript：客戶端腳本語(yǔ)言的標(biāo)準(zhǔn)
1. 基本語(yǔ)法
1）與html結(jié)合方式：
①內(nèi)部JS
- 定義<script>问词，標(biāo)簽體內(nèi)容就是JS代碼。
②外部JS
定義<script>嘀粱，通過(guò)src屬性引入外部的JS文件激挪。
注意：
①<script>可以定義在HTML頁(yè)面的任何地方辰狡。但是定義的位置會(huì)影響執(zhí)行順序。
②<script>可以定義多個(gè)垄分。
2）注釋
①單行注釋//注釋內(nèi)容
②多行注釋/注釋內(nèi)容/
3）數(shù)據(jù)類(lèi)型
①原始數(shù)據(jù)類(lèi)型（基本數(shù)據(jù)類(lèi)型）
number：數(shù)字宛篇。整數(shù)/小數(shù)/NaN（not a number）
string：字符串。
Boolean：true和false
null：一個(gè)對(duì)象為空的占位符
undefined：未定義薄湿。如果一個(gè)變量沒(méi)有給初始值叫倍，則會(huì)被默認(rèn)賦值為undefined。
②引用數(shù)據(jù)類(lèi)型：對(duì)象
4）變量
①變量：一小塊存儲(chǔ)數(shù)據(jù)的內(nèi)存空間
②Java語(yǔ)言是強(qiáng)類(lèi)型語(yǔ)言豺瘤，而JavaScript是弱類(lèi)型語(yǔ)言吆倦。
強(qiáng)類(lèi)型：在開(kāi)辟變量存儲(chǔ)空間時(shí)，定義了空間將來(lái)的存儲(chǔ)數(shù)據(jù)類(lèi)型坐求，只能存儲(chǔ)固定類(lèi)型的數(shù)據(jù)蚕泽。
弱類(lèi)型：在開(kāi)辟變量存儲(chǔ)空間時(shí)，不定義空間將來(lái)存儲(chǔ)的數(shù)據(jù)的數(shù)據(jù)類(lèi)型桥嗤，可以存放任意類(lèi)型的數(shù)據(jù)须妻。
③語(yǔ)法：
var 變量名=初始化值
typeof運(yùn)算符：獲取變量的數(shù)據(jù)類(lèi)型（null運(yùn)算后為object）
5）運(yùn)算符
①一元運(yùn)算符
++ -- + -
+，-（正負(fù)號(hào)）：
注意：在JS中砸逊，如果運(yùn)算數(shù)不是運(yùn)算符所要求的類(lèi)型璧南，那么js引擎會(huì)自動(dòng)的將運(yùn)算數(shù)進(jìn)行類(lèi)型轉(zhuǎn)換。
其他類(lèi)型轉(zhuǎn)number：
- string轉(zhuǎn)number：按照字面值轉(zhuǎn)換师逸，如果字面值不是數(shù)字司倚，則轉(zhuǎn)為NaN。
- boolean轉(zhuǎn)number：true轉(zhuǎn)1篓像，false轉(zhuǎn)0
②算數(shù)運(yùn)算符
+ - * / %
③賦值運(yùn)算符
= += -=
④比較運(yùn)算符
> < >= <= == ===
比較方式：
類(lèi)型相同动知，直接比較
- 注：字符串，按照字典順序比較员辩，按位逐一比較盒粮，直到比較出大小為止。
類(lèi)型不同奠滑，先進(jìn)行類(lèi)型轉(zhuǎn)換丹皱，再比較
- 注：
===：全等于。在比較之前宋税，先判斷類(lèi)型摊崭，如果類(lèi)型不一樣，則直接返回false杰赛。
⑤邏輯運(yùn)算符
&& || !
其他類(lèi)型轉(zhuǎn)boolean： - number：0或NaN為假呢簸，其他為真
- string：除了空字符串（""），其他都是true
- null&undefined：都是false
- 對(duì)象：所有對(duì)象都為true
⑥三元運(yùn)算符
? :
語(yǔ)法： - 表達(dá)式? 值1:值2;
- 判斷表達(dá)式的 值，如果是true則取值1根时，如果是false則取值2
6）流程控制語(yǔ)句
①if...else
②switch
③while
④do...while
⑤for
7）JS特殊語(yǔ)法
①語(yǔ)句以;結(jié)尾瘦赫，如果一行只有一條語(yǔ)句則;可省略
②變量的定義使用var關(guān)鍵字，也可以不使用 - 用：定義的變量是局部變量
- 不用：定義的變量是全局變量（不建議）
2. 基本對(duì)象：
1）Function：函數(shù)（方法）對(duì)象
①創(chuàng)建：
var fun =new function（形參蛤迎，方法體）确虱；（不建議使用）
function 方法名（形參）{
方法體
}var 方法名=function （形參）{
方法體
}
②方法：
③屬性：length：代表形參的個(gè)數(shù)
④特點(diǎn)：方法定義時(shí)，形參類(lèi)型不需要寫(xiě)替裆，返回類(lèi)型不需要寫(xiě)蝉娜。
方法是一個(gè)對(duì)象，如果定義名稱(chēng)相同的方法扎唾，會(huì)覆蓋召川。
在js中，方法的調(diào)用只與方法的名稱(chēng)有關(guān)胸遇，和參數(shù)列表無(wú)關(guān)
在方法聲明中荧呐，有一個(gè)隱藏的內(nèi)置對(duì)象（數(shù)組），arguments纸镊，封裝所有的實(shí)際參數(shù)倍阐。
⑤調(diào)用：方法名稱(chēng)（實(shí)參）;
2）Array對(duì)象：
①創(chuàng)建：
- var arr=new Array(元素列表);
- var arr=new Array(默認(rèn)長(zhǎng)度);
- var arr=[元素列表];
②方法：
join（參數(shù)）：將數(shù)組中的元素按照指定的分隔符拼接為字符串
push（）：向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度
③屬性：length：數(shù)組的長(zhǎng)度
④特點(diǎn)： - 在js中逗威，數(shù)組元素的類(lèi)型是可變的
- 在js中峰搪，數(shù)組的長(zhǎng)度是可變的
3）Boolean對(duì)象
4）Date對(duì)象
①創(chuàng)建：
- var date=new Date();
②方法：
toLocaleString();：返回當(dāng)前date對(duì)象對(duì)應(yīng)的時(shí)間本地字符串格式
getTime()：獲取毫秒值，返回當(dāng)前如期對(duì)象秒速的時(shí)間精確到毫秒
5）Math：
①創(chuàng)建： - 特點(diǎn)：Math對(duì)象不用創(chuàng)建凯旭，直接使用概耻。Math.方法名();
②方法：
random()：返回0~1之間的隨機(jī)數(shù)。含0不含1罐呼；
ceil(x)：向上舍入
floor(x)：向下舍入
round(x)：四舍五入
③屬性：
6）Number
7）String
8）RegExp：正則表達(dá)式對(duì)象
①正則表達(dá)式：定義字符串的組成規(guī)則
單個(gè)字符：[ ]
如：[a] [ab] [a-zA-Z0-9]
特殊符號(hào)代表特殊含義的單個(gè)字符：
\d：?jiǎn)蝹€(gè)數(shù)字字符[0-9]
\w：?jiǎn)蝹€(gè)字符[a-zA-Z0-9_]量詞符號(hào)：
?：表示出現(xiàn)0次或1次
*：表示出現(xiàn)0次或多次
+：表示出現(xiàn)1次或多次
{m,n}：表示m<=出現(xiàn)次數(shù)<=n開(kāi)始結(jié)束符號(hào)
^：開(kāi)始
$：結(jié)束
②正則對(duì)象：
- 創(chuàng)建：
var reg = new RegExp("正則表達(dá)式");
var reg =/正則表達(dá)式/; - 方法：
test(參數(shù))：驗(yàn)證指定的字符串是否符合正則表達(dá)式
9）Global：
①特點(diǎn)：全局對(duì)象鞠柄，這個(gè)Global中封裝的方法不需要對(duì)象就可以直接調(diào)用〖挡瘢——方法名();
②方法：
- encodeURI()：URL編碼
- decodeURI()：URL解碼
- encodeURIComponent()：URL編碼厌杜，編碼的字符更多
- decodeURIComponent()：URL解碼
- parseInt()：將字符串轉(zhuǎn)為數(shù)字
逐一判斷每一個(gè)字符是否是數(shù)字，知道不是數(shù)字為止计螺，將前面數(shù)字部分轉(zhuǎn)為number - isNaN()：判斷一個(gè)值是否是NaN
- eval()：計(jì)算JavaScript字符串夯尽，并把它作為腳本代碼來(lái)執(zhí)行。
DOM簡(jiǎn)單學(xué)習(xí)
- 功能：控制html文檔的內(nèi)容
- 獲取頁(yè)面標(biāo)簽（元素）對(duì)象：Element
document.getElementById("id值")：通過(guò)元素的id獲取元素對(duì)象 - 操作Element對(duì)象：
1.修改屬性值：
①明確獲取的對(duì)象是哪一個(gè)登馒？
②查看API文檔匙握，找其中有哪些屬性可以設(shè)置
2.修改標(biāo)簽體內(nèi)容（innerHTML）
①獲取元素對(duì)象
②使用innerHTML屬性修改標(biāo)簽體內(nèi)容
事件簡(jiǎn)單學(xué)習(xí)
- 功能：某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行谊娇。
- 綁定事件：
①直接在html標(biāo)簽上肺孤，指定事件的屬性（操作），屬性值就是js代碼
事件：onclick --- 單擊事件
②通過(guò)js獲取元素對(duì)象济欢，指定事件屬性赠堵，設(shè)置一個(gè)函數(shù)
BOM
1.概念：Browser Object Model 瀏覽器對(duì)象模型
- 將瀏覽器的各個(gè)組成部分封裝成對(duì)象
2.組成：
- Window：窗口對(duì)象
- Navigator：瀏覽器對(duì)象
- Screen：顯示器屏幕對(duì)象
- History：歷史記錄對(duì)象
- Location：地址欄對(duì)象
3.Window：窗口對(duì)象
1）創(chuàng)建
2）方法
①與彈出框有關(guān)的方法：
alter()：顯示帶有一段信息和一個(gè)確認(rèn)按鈕的警告框
confirm()：顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框
- 如果用戶點(diǎn)擊確認(rèn)按鈕，則方法返回true
- 如果用戶點(diǎn)擊取消按鈕法褥，則方法返回false
prompt()：顯示一個(gè)提示用戶輸入的對(duì)話框茫叭。
- 返回值：獲取用戶輸入的值
②與打開(kāi)關(guān)閉有關(guān)的方法：
close() 關(guān)閉瀏覽器窗口
- 誰(shuí)調(diào)用我，我關(guān)閉誰(shuí)
open() 打開(kāi)瀏覽器窗口
- 返回新的Window對(duì)象
③與定時(shí)器有關(guān)的方式
setTimeout() ：在指定的毫秒倒計(jì)時(shí)結(jié)束后調(diào)用函數(shù)或計(jì)算表達(dá)式
- 參數(shù)：
js代碼或者方法對(duì)象
毫秒值 - 返回值：唯一標(biāo)識(shí)半等，用于取消定時(shí)器
clearTimeout() ：取消由setTimeout() 方法設(shè)置的timeout
setInterval()：按照指定的周期（毫秒為單位）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式揍愁。
clearInterval()：取消由setInterval()設(shè)置的timeout。
3）屬性：
①獲取其他BOM對(duì)象：
history杀饵、location莽囤、navigator、screen切距、
②獲取DOM對(duì)象：document
4）特點(diǎn)
- Window對(duì)象不需要?jiǎng)?chuàng)建可以直接使用朽缎。window.方法名();
- Window引用可以省略。 方法名();
4.Location：地址欄對(duì)象
1）創(chuàng)建（獲让瘴颉）：
①window.location
②location
2）方法：
- reload()：重新加載當(dāng)前文檔话肖。刷新
3）屬性 - href：設(shè)置或返回完整的URL
2.History：歷史記錄對(duì)象
1）創(chuàng)建（獲取）：
①window.history
②history
2）方法：
- back()：加載history列表中的前一個(gè)URL
- forward()：加載history列表中的下一個(gè)URL
- go(參數(shù))：加載history列表中的某個(gè)具體頁(yè)面
參數(shù)：
正數(shù)：前進(jìn)幾個(gè)歷史記錄
負(fù)數(shù)：后退幾個(gè)歷史記錄
3）屬性 - length：返回當(dāng)前窗口歷史列別中URL數(shù)量
DOM：
- 概念：Document Obeject Model 文檔對(duì)象模型
- 將標(biāo)記語(yǔ)言文檔的各個(gè)組成部分葡幸，封裝成對(duì)象最筒。可以使用這些對(duì)象蔚叨，對(duì)標(biāo)記語(yǔ)言文檔進(jìn)行CRUD的動(dòng)態(tài)操作
2.W3C DOM標(biāo)準(zhǔn)被分為3個(gè)不同的部分：
1）核心DOM - 針對(duì)任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
- Document：文檔對(duì)象
- Element：元素對(duì)象
- Attribute：屬性對(duì)象
- Text：文本對(duì)象
- Comment：注釋對(duì)象
- Node：節(jié)點(diǎn)對(duì)象床蜘，其他5個(gè)對(duì)象的父對(duì)象
2）XML DOM - 針對(duì)XML文檔的標(biāo)準(zhǔn)模型
3）HTML DOM - 針對(duì)HTML文檔的標(biāo)準(zhǔn)模型
- 核心DOM模型：
- Document ：文檔對(duì)象
1）創(chuàng)建（獲取）：在html dom模型中可以使用window對(duì)象來(lái)獲取 - window.document
- document
2）方法：
①獲取Element對(duì)象：
- getElementById()：根據(jù)id屬性值獲取元素對(duì)象蔑水。id屬性值一般唯一
- getElementByTagName()：根據(jù)元素名稱(chēng)獲取元素對(duì)象們悄泥。返回值是一個(gè)數(shù)組。
- getElementByClassName()：根據(jù)class屬性值獲取元素對(duì)象們肤粱。返回值是一個(gè)數(shù)組弹囚。
- getElementByName()：根據(jù)name屬性值獲取元素對(duì)象們。返回值是一個(gè)數(shù)組领曼。
②創(chuàng)建其他DOM對(duì)象：
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()
③屬性
Element：元素對(duì)象
①獲取/創(chuàng)建：通過(guò)document來(lái)獲取和創(chuàng)建
②方法：removeAttribute()：刪除屬性
setAttribute()：設(shè)置屬性
Node：節(jié)點(diǎn)對(duì)象鸥鹉，其他5個(gè)對(duì)象的父對(duì)象
①特點(diǎn)：所有dom對(duì)象都可以被認(rèn)為是一個(gè)節(jié)點(diǎn)
②方法：
CRUD dom樹(shù)：appendChild()：向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的結(jié)尾添加新的子節(jié)點(diǎn)
removeChild()：刪除（并返回）當(dāng)前節(jié)點(diǎn)的指定子節(jié)點(diǎn)
replaceChild()：用新節(jié)點(diǎn)替換一個(gè)子節(jié)點(diǎn)
③屬性：parentNode ：返回節(jié)點(diǎn)的父節(jié)點(diǎn)。
- HTML DOM
1）標(biāo)簽體的設(shè)置和獲仁尽：innerHTML
2）使用html元素對(duì)象的屬性
3）控制元素樣式
①使用元素的style屬性來(lái)設(shè)置
②提前定義好類(lèi)選擇器的樣式毁渗，通過(guò)元素的className屬性來(lái)設(shè)置其class屬性值。
事件：
概念：某些組件被執(zhí)行了某些操作后单刁，觸發(fā)某些代碼的執(zhí)行灸异。
①事件：某些操作：?jiǎn)螕簦p擊，鍵盤(pán)被按下肺樟，鼠標(biāo)移動(dòng)
②事件源：組件：按鈕檐春，文本輸入框
③監(jiān)聽(tīng)器：代碼
④注冊(cè)監(jiān)聽(tīng)：將事件，事件源么伯，監(jiān)聽(tīng)器結(jié)合在一起疟暖。當(dāng)事件源上發(fā)生了某個(gè)事件，則觸發(fā)執(zhí)行某個(gè)監(jiān)聽(tīng)器代碼田柔。常見(jiàn)的事件
①點(diǎn)擊事件：
- onclick：?jiǎn)螕羰录?/li>
- ondblclick：雙擊事件
②焦點(diǎn)事件： - onblur：失去焦點(diǎn)
- onfocus：元素獲得焦點(diǎn)
③加載事件： - onload：一張頁(yè)面或者一副圖像完成加載
④鼠標(biāo)事件： - onmousedown：鼠標(biāo)按鈕被按下
- onmouseup：鼠標(biāo)按鈕被松開(kāi)
- onmousemove：鼠標(biāo)被移動(dòng)
- onmouseover：鼠標(biāo)移到某元素之上
- onmouseout：鼠標(biāo)從某元素移開(kāi)
⑤鍵盤(pán)事件： - onkeydown：某個(gè)按鍵被按下
- onkeyup：某個(gè)按鍵被松開(kāi)
- onkeypress：某個(gè)按鍵被按下并松開(kāi)
⑥選擇和改變 - onchange：域的內(nèi)容被改變
- onselect：文本被選中
⑦表單事件： - onsubmit：確認(rèn)按鈕被點(diǎn)擊
- onreset：重置按鈕被點(diǎn)擊
