介紹:

JavaScript是一種專門在瀏覽器編譯并執(zhí)行的編程語(yǔ)言

JavaScript處理用戶與瀏覽器之間請(qǐng)求問(wèn)題

JavaScript采用【弱類型編程語(yǔ)言風(fēng)格】對(duì)【面向?qū)ο笏枷搿縼?lái)進(jìn)行實(shí)現(xiàn)的編程語(yǔ)言

弱類型編程語(yǔ)言風(fēng)格 VS 強(qiáng)類型編程語(yǔ)言風(fēng)格

強(qiáng)類型編程語(yǔ)言風(fēng)格：認(rèn)為對(duì)象行為應(yīng)該受到其修飾類型嚴(yán)格約束土匀。

Java采用【強(qiáng)類型編程語(yǔ)言風(fēng)格】對(duì)【面向?qū)ο笏枷搿縼?lái)進(jìn)行實(shí)現(xiàn)的編程語(yǔ)言

class Student{
    public String sname;
    public void sayHello(){
        System.out.print("hello world");
    }
                   
 }

 Student  stu = new Student();
stu.sname="mike"; //stu對(duì)象能夠調(diào)用屬性只有sname
stu.sayHello();   //stu對(duì)象能夠調(diào)用方法只有sayHello()

stu.sid =10;  // 在Java認(rèn)為是語(yǔ)法錯(cuò)誤坑夯，修飾stu對(duì)象的Student類型沒(méi)有提供這個(gè)屬性

弱類型編程語(yǔ)言風(fēng)格： 認(rèn)為對(duì)象行為不應(yīng)該受到其修飾類型約束礁阁∑浪粒可以根據(jù)實(shí)際需要來(lái)決定對(duì)象可以調(diào)用屬性和方法

JavaScript采用【弱類型編程語(yǔ)言風(fēng)格】對(duì)【面向?qū)ο笏枷搿縼?lái)進(jìn)行實(shí)現(xiàn)的編程語(yǔ)言

    var  stu = new Object();//stu對(duì)象相當(dāng)于【阿Q】
    stu.car = "勞斯萊斯";//合法
    stu.play = function (){ return  "天天打游戲"}
    stu.play();

JavaScript中變量聲明方式:

1.命令格式:
var 變量名;
var 變量名 = 值;
var 變量名1,變量名2=值抑诸；

2.注意：
在JavaScript變量/對(duì)象播玖，在聲明不允許指定【修飾類型】只能通過(guò)var來(lái)進(jìn)行修飾

JavaScript中標(biāo)識(shí)符命名規(guī)則:

1.標(biāo)識(shí)符只能由四種符號(hào)組成 英文字母嫌佑，數(shù)字 , 下劃線强胰，美元符號(hào)($)
2.標(biāo)識(shí)符首字母不能以"數(shù)字"開(kāi)頭
3.標(biāo)識(shí)符不能采用JavaScript關(guān)鍵字 比如 var

JavaScript數(shù)據(jù)類型：

typeof 變量名; 返回當(dāng)前變量的數(shù)據(jù)類型名稱

1.分類：
基本數(shù)據(jù)類型 & 高級(jí)引用數(shù)據(jù)類型

2.基本數(shù)據(jù)類型：
數(shù)字類型（number）,
字符串類型(string),
布爾類型(boolean)

3.數(shù)字類型（number）：
JavaScript中將整數(shù)與小數(shù)合稱為number類型

4.字符串類型(string)：
JavaScript中字符與字符串合稱為string類型
JavaScript字符或者字符串既可以使用' '又可以使用" "

5.布爾類型(boolean): JavaScript中boolean類型的值只有true或者false

6.高級(jí)引用數(shù)據(jù)類型:
object類型
function類型

7.object類型：
JavaScript中所有通過(guò)【構(gòu)造函數(shù)】生成的對(duì)象都是object類型

8.function類型：
相當(dāng)于Java中（java.lang.reflect.Method）
JavaScript所有函數(shù)都是function類型

JavaScript是弱類型編程語(yǔ)言洛二，根據(jù)變量賦值內(nèi)容來(lái)判斷變量數(shù)據(jù)類型

JavaScript中變量的數(shù)據(jù)類型可以根據(jù)賦值內(nèi)容來(lái)進(jìn)行動(dòng)態(tài)改變

JavaScript中特殊【值】

1.undefined: JavaScript中所有變量在沒(méi)有賦值時(shí)馋劈，其默認(rèn)值都是undefined
由于JavaScript根據(jù)變量的賦值來(lái)判斷變量類型，此時(shí)由于變量沒(méi)有賦值因此JavaScript無(wú)法判斷當(dāng)前變量數(shù)據(jù)類型晾嘶，此時(shí)返回也是undefiled,因此初學(xué)者將undefined也理解為是一種數(shù)據(jù)類型妓雾，這種理解是錯(cuò)誤。

2.null：JavaScript中當(dāng)一個(gè)對(duì)象賦值為null時(shí)垒迂，表示對(duì)象引用了一個(gè)【空內(nèi)存】
這個(gè)空內(nèi)存既不能存儲(chǔ)數(shù)據(jù)也不能讀取數(shù)據(jù)械姻。
此時(shí)這個(gè)對(duì)象數(shù)據(jù)類型，在JavaScript依然認(rèn)為是object類型

3.NaN：JavaScript中當(dāng)一個(gè)變量賦值為NaN机断，表示變量接收了一個(gè)【非法數(shù)字】（123 合法數(shù)字 abc123 非法數(shù)字）
此時(shí)這個(gè)變量數(shù)據(jù)類型楷拳，在JavaScript依然認(rèn)為number類型

4.infinity： JavaScript中當(dāng)一個(gè)變量賦值為infinity，表示變量接收了一個(gè)【無(wú)窮大數(shù)字】
此時(shí)這個(gè)變量數(shù)據(jù)類型吏奸，在JavaScript依然認(rèn)為number類型

JavaScript中控制語(yǔ)句

JavaScript中控制語(yǔ)句與Java中控制語(yǔ)句語(yǔ)法格式完全一致

JavaScript中函數(shù)聲明方式

1.命令格式:
function 函數(shù)名(形參名1欢揖，形參名2){

          JavaScript命令行
          JavaScript命令行

          return  將函數(shù)運(yùn)行結(jié)果進(jìn)行返回
      
      }

2.注意:
1)JavaScript中，所有函數(shù)在聲明時(shí)奋蔚，都需要使用function進(jìn)行修飾

2)JavaScript中她混，所有函數(shù)在聲明時(shí)，禁止指定函數(shù)返回?cái)?shù)據(jù)類型

3)JavaScript中泊碑，所有函數(shù)在聲明時(shí)坤按，形參既不能使用var來(lái)修飾也不能使用數(shù)據(jù)類型修飾

4)JavaScript中，所有函數(shù)在聲明時(shí)馒过，如果有返回值臭脓，此時(shí)應(yīng)該通過(guò)return進(jìn)行返回

JavaScript函數(shù)調(diào)用方式:

1.瀏覽器并不會(huì)自動(dòng)調(diào)用JavaScript函數(shù)

2.可以通過(guò)命令行方式來(lái)調(diào)用Java函數(shù)

3.通過(guò)綁定在HTML標(biāo)簽上監(jiān)聽(tīng)事件通知瀏覽器調(diào)用指定函數(shù)進(jìn)行處理

JavaScript作用:

幫助瀏覽器對(duì)用戶提出請(qǐng)求進(jìn)行處理

DOM對(duì)象:

1.DOM = Document Object Model， 【文檔模型對(duì)象】

2.JavaScript不能直接操作HTML標(biāo)簽沉桌，只能通過(guò)HTML標(biāo)簽關(guān)聯(lián)的DOM對(duì)象對(duì)HTML標(biāo)簽下達(dá)指令

DOM對(duì)象生命周期：

1.瀏覽器在接收到html文件之后谢鹊，將HTML文件標(biāo)簽加載到瀏覽器緩存中算吩，每當(dāng)加載一個(gè)html標(biāo)簽時(shí)候奔誓，自動(dòng)為這個(gè)標(biāo)簽生成一個(gè)實(shí)例對(duì)象渗常，這個(gè)實(shí)例對(duì)象就是DOM對(duì)象

2.在瀏覽器關(guān)閉之前或者瀏覽器請(qǐng)求其他資源文件之前，本次生成的DOM對(duì)象一直存活在瀏覽器緩存中

3.在瀏覽器關(guān)閉時(shí)候屡限，瀏覽器緩存中dom對(duì)象將要被銷毀

4.在瀏覽器請(qǐng)求到新資源文件后兼耀，瀏覽器緩存中原有的dom對(duì)象將會(huì)被覆蓋

document對(duì)象：

1.document對(duì)象被稱為【文檔對(duì)象】

2.document對(duì)象用于在瀏覽器內(nèi)存中根據(jù)定位條件定位DOM對(duì)象

document對(duì)象生命周期:

1.在瀏覽器將網(wǎng)頁(yè)中所有標(biāo)簽加載完畢后压昼，在內(nèi)存中將使用【樹(shù)形結(jié)構(gòu)】存儲(chǔ)這些DOM對(duì)象。在樹(shù)形結(jié)構(gòu)生成完畢后由瀏覽器生成一個(gè)document對(duì)象管理這顆樹(shù)（DOM樹(shù)）

在瀏覽器將接收網(wǎng)頁(yè)中標(biāo)簽加載完畢后瘤运，自動(dòng)在瀏覽器內(nèi)存生成一個(gè)document對(duì)象

2.一個(gè)瀏覽器運(yùn)行期間窍霞，只會(huì)生成一個(gè)document對(duì)象

3.在瀏覽器關(guān)閉時(shí)，負(fù)責(zé)將document對(duì)象進(jìn)行銷毀

通過(guò)document對(duì)象定位DOM對(duì)象方式:

1.根據(jù)html標(biāo)簽的id屬性值定位DOM對(duì)象

命令格式：
var domObj = document.getElementById("id屬性值")拯坟；

舉個(gè)栗子
var domObj = document.getElementById("one")但金；

通知document對(duì)象定位id屬性等于one的標(biāo)簽關(guān)聯(lián)的DOM對(duì)象

2.根據(jù)html標(biāo)簽的name屬性值定位DOM對(duì)象

命令格式：
var domArray = document.getElementsByName("name屬性值");

舉個(gè)栗子
<input type="checkbox" name="deptNo" value="10">部門10
<input type="checkbox" name="deptNo" value="20">部門20
<input type="checkbox" name="deptNo" value="30">部門30

var domArray = document.getElementsByName("deptNo");

通知document對(duì)象將所有name屬性等于deptNo的標(biāo)簽關(guān)聯(lián)的DOM對(duì)象進(jìn)行定位并封裝到一個(gè)數(shù)組進(jìn)行返回。 domArray就是一個(gè)數(shù)組存放本次返回的所有DOM對(duì)象

3.根據(jù)html標(biāo)簽類型定位DOM對(duì)象

命令格式：
var domArray = document.getElementsByTagName("標(biāo)簽類型名");

舉個(gè)栗子：
var domArray = document.getElementsByTagName("p");

<p>段落標(biāo)簽</p>

通知document對(duì)象將所有段落標(biāo)簽關(guān)聯(lián)的dom對(duì)象進(jìn)行定位并封裝到一個(gè)數(shù)組返回

DOM對(duì)象對(duì)HTML標(biāo)簽屬性操作

1.DOM對(duì)象對(duì)標(biāo)簽value屬性進(jìn)行取值與賦值操作

取值操作:
var domObj = document.getElementById("one");
var num = domObj.value;

賦值操作:
var domObj = document.getElementById("one");
domObj.value = "abc";

2.DOM對(duì)象對(duì)標(biāo)簽中【樣式屬性】進(jìn)行取值與賦值操作

取值操作:
var domObj = document.getElementById("one");//讀取當(dāng)前標(biāo)簽【背景顏色屬性】值
var color = domObj.style.背景顏色屬性

賦值操作:
var domObj = document.getElementById("one");//通過(guò)DOM對(duì)象對(duì)標(biāo)簽中【背景顏色屬性】進(jìn)行賦值
domObj.style.背景顏色屬性 = 值郁季；

3.DOM對(duì)象對(duì)標(biāo)簽中【狀態(tài)屬性】進(jìn)行取值與賦值操作

狀態(tài)屬性： 狀態(tài)屬性的值都是boolean類型

disabled = true ; 表示當(dāng)前標(biāo)簽不可以使用
disabled = false; 表示當(dāng)前標(biāo)簽可以使用

checked: 只存在與radio標(biāo)簽與checkbox標(biāo)簽
checked = true ; 表示當(dāng)前標(biāo)簽被選中了
checked = false; 表示當(dāng)前標(biāo)簽未被選中

取值操作:
var domObj = document.getElementById("one");
var num = domObj.checked;

賦值操作:
var domObj = document.getElementById("one");
domObj.checked = true;

4. DOM對(duì)象對(duì)標(biāo)簽中【文字顯示內(nèi)容】進(jìn)行賦值與取值

文字顯示內(nèi)容: 只存在于雙目標(biāo)簽之間;<tr>100</tr>

取值操作:
var domObj = document.getElementById("one");
var num1 = domObj.innerText;

賦值操作:
var domObj = document.getElementById("one");
domObj.innerText = 值冷溃；

innerText與innerHTML 區(qū)別:

innerText與innerHTML都可以對(duì)標(biāo)簽文字顯示內(nèi)容屬性進(jìn)行賦值與取值

innerText只能接收字符串

innerHTML既可以接收字符串又可以接收html標(biāo)簽

JavaScript監(jiān)聽(tīng)事件

1.監(jiān)聽(tīng)事件:
監(jiān)聽(tīng)用戶在何時(shí)以何種方式對(duì)當(dāng)前標(biāo)簽進(jìn)行操作。
當(dāng)監(jiān)聽(tīng)到相關(guān)行為時(shí)梦裂，通知瀏覽器調(diào)用對(duì)應(yīng)JavaScript函數(shù)對(duì)當(dāng)前用戶請(qǐng)求進(jìn)行處理

2.監(jiān)聽(tīng)事件分類:

1)監(jiān)聽(tīng)用戶何時(shí)使用鼠標(biāo)操作當(dāng)前標(biāo)簽

2)監(jiān)聽(tīng)用戶何時(shí)使用鍵盤操作當(dāng)前標(biāo)簽

3.監(jiān)聽(tīng)用戶何時(shí)使用鼠標(biāo)操作當(dāng)前標(biāo)簽：

1） onclick : 監(jiān)聽(tīng)用戶何時(shí)使用鼠標(biāo)【單擊】當(dāng)前標(biāo)簽

2） onmouseover: 監(jiān)聽(tīng)用戶何時(shí)將鼠標(biāo)【懸退普恚】當(dāng)前標(biāo)簽上方

3） onmouseout : 監(jiān)聽(tīng)用戶何時(shí)將鼠標(biāo)從當(dāng)前標(biāo)簽上方【移開(kāi)】

4） onfocus : 監(jiān)聽(tīng)用戶何時(shí)通過(guò)鼠標(biāo)讓當(dāng)前標(biāo)簽獲得【光標(biāo)】

5） onblur : 監(jiān)聽(tīng)用戶何時(shí)通過(guò)鼠標(biāo)讓當(dāng)前標(biāo)簽丟失【光標(biāo)】

4.監(jiān)聽(tīng)用戶何時(shí)使用鍵盤操作當(dāng)前標(biāo)簽

1. onkeydown :監(jiān)聽(tīng)用戶何時(shí)在當(dāng)前標(biāo)簽上【按下鍵盤】

2. onkeyup :監(jiān)聽(tīng)用戶何時(shí)在當(dāng)前標(biāo)簽上【彈起鍵盤】

onload監(jiān)聽(tīng)事件:

1 作用： 監(jiān)聽(tīng)瀏覽器何時(shí)將網(wǎng)頁(yè)中HTML標(biāo)簽加載完畢

2.意義： 瀏覽器每加載一個(gè)HTML標(biāo)簽時(shí)，自動(dòng)在內(nèi)存生成一個(gè)dom對(duì)象年柠。
在瀏覽器將網(wǎng)頁(yè)所有標(biāo)簽加載完畢時(shí)凿歼，意味當(dāng)前網(wǎng)頁(yè)中所有標(biāo)簽都生成對(duì)應(yīng)DOM對(duì)象。onload此時(shí)就可以觸發(fā)調(diào)用函數(shù)對(duì)瀏覽器中標(biāo)簽進(jìn)行處理冗恨，此時(shí)不會(huì)出現(xiàn)未找到DOM對(duì)象問(wèn)題

3.使用:

             <script type="text/javascript">
             function fun1(){
            window.alert("fun1 is run...")
         }
         </script>

         <body onload="fun1()">
         
         </body>

基于DOM對(duì)象實(shí)現(xiàn)監(jiān)聽(tīng)事件與HTML標(biāo)簽之間綁定

1.前提：
實(shí)際開(kāi)發(fā)過(guò)程中答憔，同一個(gè)監(jiān)聽(tīng)事件往往與多個(gè)HTML標(biāo)簽進(jìn)行綁定
這樣增加開(kāi)發(fā)強(qiáng)度，在未來(lái)維護(hù)過(guò)程中增加維護(hù)難度

2.命令形式:

domObj.監(jiān)聽(tīng)事件名 = 處理函數(shù)名
此處處理函數(shù)名后面是不能出現(xiàn)（）

3.舉個(gè)栗子:

              var domObj = document.getElementById("one");
          domObj.onclick = fun1; //注意函數(shù)名后面不能有（）

          相當(dāng)于

          <input type="button" id="one" onclick="fun1()">  //此處函數(shù)名后面必須有（）

arguments:

1.JavaScript中派近，每一函數(shù)都包含一個(gè)arguments屬性
2.arguments屬性是一個(gè)數(shù)組
3.在函數(shù)調(diào)用時(shí)攀唯，將實(shí)參出入到函數(shù)的arguments中，再由arguments將數(shù)據(jù)傳遞給形參
4.arguments屬性存在渴丸，可以將JavaScript中函數(shù)在調(diào)用時(shí)傳遞實(shí)參與形參進(jìn)行格式，增加函數(shù)調(diào)用靈活性
5.arguments屬性只能在函數(shù)體內(nèi)使用另凌，不能在函數(shù)體外使用

function類型對(duì)象

1.介紹：

1）function是JavaScript中一種高級(jí)數(shù)據(jù)類型
2）一個(gè)function類型對(duì)象用于管理一個(gè)具體函數(shù)

3. JavaScript中function類型相當(dāng)于Java中Method類型

2.function類型對(duì)象聲明方式：

1）標(biāo)準(zhǔn)聲明方式
2）匿名聲明方式

3.function類型對(duì)象聲明方式----標(biāo)準(zhǔn)聲明方式

          function 函數(shù)對(duì)象名(參數(shù)1谱轨，參數(shù)2){
            命令；
      }

4.function類型對(duì)象聲明方式----匿名聲明方式

         var 函數(shù)對(duì)象名  = function  (參數(shù)1吠谢，參數(shù)2){  命令1土童，命令2.。工坊。献汗。}敢订；

5.function類型對(duì)象的創(chuàng)建時(shí)機(jī)

瀏覽器在加載<script>時(shí)，共加載兩次

第一次加載罢吃，將<script>標(biāo)簽所有以標(biāo)準(zhǔn)形式聲明函數(shù)對(duì)象進(jìn)行創(chuàng)建

第二次加載楚午，將<script>標(biāo)簽所有命令行按照自上而下順序來(lái)執(zhí)行

局部變量與全局變量

1.局部變量：
1）定義： 在函數(shù)執(zhí)行體內(nèi)，通過(guò)var修飾符聲明的變量

                      function fun1(){
                 var name ="mike"; //局部變量
              }

2）特征： 局部變量只能在當(dāng)前函數(shù)執(zhí)行體使用尿招，不能在函數(shù)執(zhí)行體外使用

2.全局變量:

定義：
1）全局變量可以在當(dāng)前HTML文件中所有的函數(shù)中使用
2）全局變量被聲明時(shí)矾柜，自動(dòng)分配給window對(duì)象作為其屬性

聲明全局變量:

第一種方式:直接在script標(biāo)簽下，通過(guò)var聲明的變量就谜，就是全局變量

第二種方式:在函數(shù)執(zhí)行體內(nèi)怪蔑，沒(méi)有通過(guò)var修飾符修飾的變量也是全局變量

object類型對(duì)象特征:

1.【定義】：在JavaScript認(rèn)為所有通過(guò)【構(gòu)造函數(shù)】生成對(duì)象其數(shù)據(jù)類型都是object類型

2.【特征】：object類型對(duì)象在創(chuàng)建完畢后，可以根據(jù)實(shí)際情況丧荐，任意添加屬性和方法缆瓣，也可以移除屬性和方法

3.【屬性維護(hù)】:

第一種維護(hù)方案:

     添加屬性
              object對(duì)象.新屬性名 = 值；
             添加函數(shù)
              object對(duì)象.新函數(shù)對(duì)象名 = function(){};

第二種維護(hù)方案

     添加屬性
               object對(duì)象["新屬性名"] = 值;

             添加函數(shù)
               object對(duì)象["新函數(shù)對(duì)象名"]=function(){};


              移除對(duì)象屬性和方法

              del  object.屬性名
          del  object.函數(shù)名

自定義構(gòu)造函數(shù)

1.【命令】：

                      function 函數(shù)對(duì)象名(){
              
              
              }

2.【調(diào)用】
var object類型對(duì)象 = new 函數(shù)對(duì)象名（）虹统；

3【普通函數(shù)與構(gòu)造函數(shù)區(qū)分】：

1）函數(shù)沒(méi)有調(diào)用之前捆愁，無(wú)法區(qū)分函數(shù)身份,只能根據(jù)函數(shù)調(diào)用形式區(qū)分

2）判斷普通函數(shù)： var num = 函數(shù)對(duì)象名();

3. 判斷構(gòu)造函數(shù): var num = new 函數(shù)對(duì)象名();

4. 返回值: 普通函數(shù)運(yùn)行后需要通過(guò)return將執(zhí)行結(jié)果返回.
   構(gòu)造函數(shù)運(yùn)行后，直接返回一個(gè)object類型對(duì)象窟却，此時(shí)函數(shù)return相當(dāng)于無(wú)效

JavaScript中this指向:

1.JavaScript中this指向與Java中this指向完全一致的.

1)在構(gòu)造函數(shù)昼丑，this指向當(dāng)前構(gòu)造函數(shù)生成object類型對(duì)象

2)在普通函數(shù)，this指向調(diào)用當(dāng)前函數(shù)的實(shí)例對(duì)象

JSON:

1.前提：JavaScript中得到object類型對(duì)象方式

方式1： 由構(gòu)造函數(shù)生成的對(duì)象都是object類型對(duì)象
方式2： 由JSON數(shù)據(jù)描述格式生成對(duì)象都是object類型對(duì)象

2.JSON數(shù)據(jù)描述格式:

JavaScript中獲得object類型對(duì)象簡(jiǎn)化版

3.標(biāo)準(zhǔn)命令格式:

var obj = {"屬性名1":值,"屬性名2":值};

開(kāi)發(fā)人員習(xí)慣于將由JSON生成object類型對(duì)象稱為【JSON對(duì)象】

4.JSON數(shù)組：
專門存放JSON對(duì)象的數(shù)組被稱為JSON數(shù)組

JavaScript基礎(chǔ)

JavaScript：

概念： 一門客戶端腳本語(yǔ)言夸赫，運(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發(fā)展史：

1. 1992年握础，Nombase公司，開(kāi)發(fā)出第一門客戶端腳本語(yǔ)言悴品，專門用于表單的校驗(yàn)禀综。命名為 ： C-- ，后來(lái)更名為：ScriptEase
2. 1995年苔严，Netscape(網(wǎng)景)公司定枷，開(kāi)發(fā)了一門客戶端腳本語(yǔ)言：LiveScript。后來(lái)届氢，請(qǐng)來(lái)SUN公司的專家欠窒，修改LiveScript，命名為JavaScript
3. 1996年退子，微軟抄襲JavaScript開(kāi)發(fā)出JScript語(yǔ)言
4. 1997年岖妄，ECMA(歐洲計(jì)算機(jī)制造商協(xié)會(huì))型将，制定出客戶端腳本語(yǔ)言的標(biāo)準(zhǔn)：ECMAScript，就是統(tǒng)一了所有客戶端腳本語(yǔ)言的編碼方式荐虐。

JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)

ECMAScript：客戶端腳本語(yǔ)言的標(biāo)準(zhǔn)

基本語(yǔ)法：
與html結(jié)合方式
1）. 內(nèi)部JS：
定義<script>七兜，標(biāo)簽體內(nèi)容就是js代碼
2）. 外部JS：
定義<script>，通過(guò)src屬性引入外部的js文件

注意：
1）. <script>可以定義在html頁(yè)面的任何地方缚俏。但是定義的位置會(huì)影響執(zhí)行順序惊搏。
2）. <script>可以定義多個(gè)。

注釋
1). 單行注釋：

//注釋內(nèi)容

2). 多行注釋：

/*注釋內(nèi)容*/

數(shù)據(jù)類型：

1. 原始數(shù)據(jù)類型(基本數(shù)據(jù)類型)：
   1). number：數(shù)字忧换。 整數(shù)/小數(shù)/NaN(not a number 一個(gè)不是數(shù)字的數(shù)字類型)
   2). string：字符串恬惯。 字符串 "abc" "a" 'abc'
   3). boolean: true和false
   4). null：一個(gè)對(duì)象為空的占位符
   5). undefined：未定義。如果一個(gè)變量沒(méi)有給初始化值亚茬，則會(huì)被默認(rèn)賦值為undefined

2. 引用數(shù)據(jù)類型：對(duì)象

變量
變量：一小塊存儲(chǔ)數(shù)據(jù)的內(nèi)存空間

Java語(yǔ)言是強(qiáng)類型語(yǔ)言酪耳，而JavaScript是弱類型語(yǔ)言。
強(qiáng)類型：在開(kāi)辟變量存儲(chǔ)空間時(shí)刹缝，定義了空間將來(lái)存儲(chǔ)的數(shù)據(jù)的數(shù)據(jù)類型碗暗。只能存儲(chǔ)固定類型的數(shù)據(jù)

弱類型：在開(kāi)辟變量存儲(chǔ)空間時(shí)，不定義空間將來(lái)的存儲(chǔ)數(shù)據(jù)類型梢夯，可以存放任意類型的數(shù)據(jù)言疗。

語(yǔ)法：
var 變量名 = 初始化值;

typeof運(yùn)算符：獲取變量的類型。
注：null運(yùn)算后得到的是object

運(yùn)算符

1. 一元運(yùn)算符：只有一個(gè)運(yùn)算數(shù)的運(yùn)算符
   ++颂砸，-- 噪奄， +(正號(hào))
   ++ --: 自增(自減)
   ++(--) 在前，先自增(自減)人乓，再運(yùn)算
   ++(--) 在后勤篮，先運(yùn)算，再自增(自減)
   +(-)：正負(fù)號(hào)

注意：在JS中色罚，如果運(yùn)算數(shù)不是運(yùn)算符所要求的類型碰缔，那么js引擎會(huì)自動(dòng)的將運(yùn)算數(shù)進(jìn)行類型轉(zhuǎn)換

其他類型轉(zhuǎn)number：
string轉(zhuǎn)number：按照字面值轉(zhuǎn)換。如果字面值不是數(shù)字戳护，則轉(zhuǎn)為NaN（不是數(shù)字的數(shù)字）
boolean轉(zhuǎn)number：true轉(zhuǎn)為1金抡，false轉(zhuǎn)為0

算數(shù)運(yùn)算符 + - * / % ...

賦值運(yùn)算符 = += -+....

比較運(yùn)算符 > < >= <= == ===(全等于)

比較方式
類型相同：直接比較
字符串：按照字典順序比較。按位逐一比較姑尺，直到得出大小為止竟终。

類型不同：先進(jìn)行類型轉(zhuǎn)換，再比較
===：全等于切蟋。在比較之前，先判斷類型榆芦，如果類型不一樣柄粹，則直接返回false

邏輯運(yùn)算符 && || !
其他類型轉(zhuǎn)boolean：
number：0或NaN為假喘鸟，其他為真
string：除了空字符串("")，其他都是true
null&undefined:都是false
對(duì)象：所有對(duì)象都為true

三元運(yùn)算符

? : 表達(dá)式

                    var a = 3;
                    var b = 4;
            
                    var c = a > b ? 1:0;

語(yǔ)法：
表達(dá)式? 值1:值2;
判斷表達(dá)式的值驻右，如果是true則取值1什黑，如果是false則取值2；

流程控制語(yǔ)句：
if...else...
switch:
在java中堪夭，switch語(yǔ)句可以接受的數(shù)據(jù)類型： byte int short char,枚舉(1.5) ,String(1.7)

switch(變量):
case 值:

在JS中,switch語(yǔ)句可以接受任意的原始數(shù)據(jù)類型

while
do...while
for

JS特殊語(yǔ)法：
語(yǔ)句以;結(jié)尾愕把，如果一行只有一條語(yǔ)句則 ;可以省略 (不建議)
變量的定義使用 var 關(guān)鍵字，也可以不使用

用： 定義的變量是局部變量
不用：定義的變量是全局變量(不建議)

練習(xí)：99乘法表

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>99乘法表</title>
                <style>
                    td{
                        border: 1px solid;
                    }
            
                </style>
            
                <script>
            
                    document.write("<table  align='center'>");
            
            
                    //1.完成基本的for循環(huán)嵌套森爽，展示乘法表
                    for (var i = 1; i <= 9 ; i++) {
                        document.write("<tr>");
                        for (var j = 1; j <=i ; j++) {
                            document.write("<td>");
            
                            //輸出  1 * 1 = 1
                            document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
            
                            document.write("</td>");
                        }
                        /*//輸出換行
                        document.write("<br>");*/
            
                        document.write("</tr>");
                    }
            
                    //2.完成表格嵌套
                    document.write("</table>");
            
                </script>
            </head>
            <body>
            
            </body>
            </html>

基本對(duì)象：
Function：函數(shù)(方法)對(duì)象
創(chuàng)建：

 var fun = new Function(形式參數(shù)列表,方法體);  //忘掉吧

                        function 方法名稱(形式參數(shù)列表){
                            方法體
                        }

                       var 方法名 = function(形式參數(shù)列表){
                            方法體
                       }

方法：

屬性：
length:代表形參的個(gè)數(shù)

特點(diǎn)：
方法定義是恨豁，形參的類型不用寫,返回值類型也不寫。
方法是一個(gè)對(duì)象爬迟，如果定義名稱相同的方法橘蜜，會(huì)覆蓋
在JS中，方法的調(diào)用只與方法的名稱有關(guān)付呕，和參數(shù)列表無(wú)關(guān)
在方法聲明中有一個(gè)隱藏的內(nèi)置對(duì)象（數(shù)組）计福，arguments,封裝所有的實(shí)際參數(shù)

調(diào)用：
方法名稱(實(shí)際參數(shù)列表);

Array:數(shù)組對(duì)象
創(chuàng)建：
var arr = new Array(元素列表);
var arr = new Array(默認(rèn)長(zhǎng)度);
var arr = [元素列表];

方法
join(參數(shù)):將數(shù)組中的元素按照指定的分隔符拼接為字符串
push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度徽职。

屬性
length:數(shù)組的長(zhǎng)度

特點(diǎn)：
JS中象颖，數(shù)組元素的類型可變的。
JS中姆钉，數(shù)組長(zhǎng)度可變的说订。

Boolean

Date：日期對(duì)象
創(chuàng)建：
var date = new Date();

方法：
toLocaleString()：返回當(dāng)前date對(duì)象對(duì)應(yīng)的時(shí)間本地字符串格式
getTime():獲取毫秒值。返回當(dāng)前如期對(duì)象描述的時(shí)間到1970年1月1日零點(diǎn)的毫秒值差

Math：數(shù)學(xué)對(duì)象
創(chuàng)建：
特點(diǎn)：Math對(duì)象不用創(chuàng)建育韩，直接使用克蚂。 Math.方法名();

方法：
random():返回 0 ~ 1 之間的隨機(jī)數(shù)。 含0不含1
ceil(x)：對(duì)數(shù)進(jìn)行上舍入筋讨。
floor(x)：對(duì)數(shù)進(jìn)行下舍入埃叭。
round(x)：把數(shù)四舍五入為最接近的整數(shù)。

屬性：
PI

Number

String

RegExp：正則表達(dá)式對(duì)象

正則表達(dá)式：定義字符串的組成規(guī)則悉罕。

單個(gè)字符:[]
如： [a] [ab] [a-zA-Z0-9_]
特殊符號(hào)代表特殊含義的單個(gè)字符:
\d:單個(gè)數(shù)字字符 [0-9]
\w:單個(gè)單詞字符[a-zA-Z0-9_]

量詞符號(hào)：
?：表示出現(xiàn)0次或1次
*：表示出現(xiàn)0次或多次
+：出現(xiàn)1次或多次
{m,n}:表示 m<= 數(shù)量 <= n
m如果缺食辔荨： {,n}:最多n次
n如果缺省：{m,} 最少m次

.開(kāi)始結(jié)束符號(hào)
^:開(kāi)始
$:結(jié)束

正則對(duì)象：
創(chuàng)建
var reg = new RegExp("正則表達(dá)式");
var reg = /正則表達(dá)式/;

方法
test(參數(shù)):驗(yàn)證指定的字符串是否符合正則定義的規(guī)范
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
NaN六親不認(rèn)涩僻，連自己都不認(rèn)。NaN參與的==比較全部問(wèn)false

eval():講 JavaScript 字符串，并把它作為腳本代碼來(lái)執(zhí)行逆日。

URL編碼
傳智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

BOM

DOM

DOM簡(jiǎn)單學(xué)習(xí)：為了滿足案例要求
功能：控制html文檔的內(nèi)容
獲取頁(yè)面標(biāo)簽(元素)對(duì)象：Element
document.getElementById("id值"):通過(guò)元素的id獲取元素對(duì)象

操作Element對(duì)象：
修改屬性值：
明確獲取的對(duì)象是哪一個(gè)嵌巷？
查看API文檔，找其中有哪些屬性可以設(shè)置

修改標(biāo)簽體內(nèi)容：
屬性：innerHTML
獲取元素對(duì)象
使用innerHTML屬性修改標(biāo)簽體內(nèi)容

事件簡(jiǎn)單學(xué)習(xí)
功能： 某些組件被執(zhí)行了某些操作后室抽，觸發(fā)某些代碼的執(zhí)行搪哪。
造句： xxx被xxx,我就xxx
我方水晶被摧毀后，我就責(zé)備對(duì)友坪圾。
敵方水晶被摧毀后晓折，我就夸獎(jiǎng)自己。

如何綁定事件
直接在html標(biāo)簽上兽泄，指定事件的屬性(操作)漓概，屬性值就是js代碼
事件：onclick--- 單擊事件

通過(guò)js獲取元素對(duì)象，指定事件屬性已日，設(shè)置一個(gè)函數(shù)

代碼：

            <body>
                <img id="light" src="img/off.gif"  onclick="fun();">
                <img id="light2" src="img/off.gif">
                
                <script>
                    function fun(){
                        alert('我被點(diǎn)了');
                        alert('我又被點(diǎn)了');
                    }
                
                    function fun2(){
                        alert('咋老點(diǎn)我垛耳？');
                    }
                
                    //1.獲取light2對(duì)象
                    var light2 = document.getElementById("light2");
                    //2.綁定事件
                    light2.onclick = fun2;
                
                
                </script>
            </body>

案例1：電燈開(kāi)關(guān)

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>電燈開(kāi)關(guān)</title>
        
        </head>
        <body>
        
        <img id="light" src="img/off.gif">
        
        <script>
            /*
                分析：
                    1.獲取圖片對(duì)象
                    2.綁定單擊事件
                    3.每次點(diǎn)擊切換圖片
                        * 規(guī)則：
                            * 如果燈是開(kāi)的 on,切換圖片為 off
                            * 如果燈是關(guān)的 off,切換圖片為 on
                        * 使用標(biāo)記flag來(lái)完成
        
             */
        
            //1.獲取圖片對(duì)象
            var light = document.getElementById("light");
        
            var flag = false;//代表燈是滅的。 off圖片
        
            //2.綁定單擊事件
            light.onclick = function(){
                if(flag){//判斷如果燈是開(kāi)的飘千，則滅掉
                    light.src = "img/off.gif";
                    flag = false;
        
                }else{
                    //如果燈是滅的堂鲜，則打開(kāi)
        
                    light.src = "img/on.gif";
                    flag = true;
                }
        
        
            }
            
        </script>
        </body>
        </html>

BOM:
概念：Browser Object Model 瀏覽器對(duì)象模型
將瀏覽器的各個(gè)組成部分封裝成對(duì)象。

組成：
Window：窗口對(duì)象
Navigator：瀏覽器對(duì)象
Screen：顯示器屏幕對(duì)象
History：歷史記錄對(duì)象
Location：地址欄對(duì)象

Window：窗口對(duì)象
創(chuàng)建
方法
與彈出框有關(guān)的方法：
alert() 顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框护奈。

confirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框缔莲。
如果用戶點(diǎn)擊確定按鈕，則方法返回true
如果用戶點(diǎn)擊取消按鈕霉旗，則方法返回false

prompt() 顯示可提示用戶輸入的對(duì)話框痴奏。
返回值：獲取用戶輸入的值

與打開(kāi)關(guān)閉有關(guān)的方法：

close() 關(guān)閉瀏覽器窗口。
誰(shuí)調(diào)用我 厌秒，我關(guān)誰(shuí)

open() 打開(kāi)一個(gè)新的瀏覽器窗口
返回新的Window對(duì)象

與定時(shí)器有關(guān)的方式
setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式读拆。
參數(shù)：
js代碼或者方法對(duì)象
毫秒值
返回值：唯一標(biāo)識(shí)，用于取消定時(shí)器

clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout鸵闪。

setInterval() 按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式檐晕。

clearInterval() 取消由 setInterval() 設(shè)置的 timeout。

屬性：
獲取其他BOM對(duì)象：
history
location
Navigator
Screen:
獲取DOM對(duì)象
document
特點(diǎn)
Window對(duì)象不需要?jiǎng)?chuàng)建可以直接使用 window使用蚌讼。 window.方法名();
window引用可以省略辟灰。 方法名();

Location：地址欄對(duì)象
創(chuàng)建(獲取)：
window.location
location

方法：
reload() 重新加載當(dāng)前文檔。刷新

屬性
href 設(shè)置或返回完整的 URL篡石。

History：歷史記錄對(duì)象
創(chuàng)建(獲取)：
window.history
history

方法：
back() 加載 history 列表中的前一個(gè) URL芥喇。

forward() 加載 history 列表中的下一個(gè) URL。

go(參數(shù)) 加載 history 列表中的某個(gè)具體頁(yè)面凰萨。
參數(shù)：
正數(shù)：前進(jìn)幾個(gè)歷史記錄
負(fù)數(shù)：后退幾個(gè)歷史記錄

屬性：
length 返回當(dāng)前窗口歷史列表中的 URL 數(shù)量继控。

DOM：
概念： Document Object Model 文檔對(duì)象模型
將標(biāo)記語(yǔ)言文檔的各個(gè)組成部分械馆，封裝為對(duì)象∈铮可以使用這些對(duì)象狱杰，對(duì)標(biāo)記語(yǔ)言文檔進(jìn)行CRUD的動(dòng)態(tài)操作

W3C DOM 標(biāo)準(zhǔn)被分為 3 個(gè)不同的部分：

核心 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ì)象
* XML DOM - 針對(duì) XML 文檔的標(biāo)準(zhǔn)模型
* HTML DOM - 針對(duì) HTML 文檔的標(biāo)準(zhǔn)模型

核心DOM模型：

Document：文檔對(duì)象
創(chuàng)建(獲取)：在html dom模型中可以使用window對(duì)象來(lái)獲取
window.document
document

方法：
獲取Element對(duì)象：
getElementById() ： 根據(jù)id屬性值獲取元素對(duì)象厅须。id屬性值一般唯一
getElementsByTagName()：根據(jù)元素名稱獲取元素對(duì)象們。返回值是一個(gè)數(shù)組
getElementsByClassName():根據(jù)Class屬性值獲取元素對(duì)象們食棕。返回值是一個(gè)數(shù)組
getElementsByName(): 根據(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ì)象
特點(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
標(biāo)簽體的設(shè)置和獲纫渲病：innerHTML
使用html元素對(duì)象的屬性
控制元素樣式

使用元素的style屬性來(lái)設(shè)置
如：

                     //修改樣式方式1
                    div1.style.border = "1px solid red";
                    div1.style.width = "200px";
                    //font-size--> fontSize
                    div1.style.fontSize = "20px";

提前定義好類選擇器的樣式，通過(guò)元素的className屬性來(lái)設(shè)置其class屬性值谒臼。

事件監(jiān)聽(tīng)機(jī)制：
概念：某些組件被執(zhí)行了某些操作后朝刊，觸發(fā)某些代碼的執(zhí)行。
事件：某些操作蜈缤。如： 單擊拾氓，雙擊，鍵盤按下了底哥，鼠標(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)螕羰录?br> 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)。

鍵盤事件：
onkeydown 某個(gè)鍵盤按鍵被按下卢鹦。
onkeyup 某個(gè)鍵盤按鍵被松開(kāi)臀脏。
onkeypress 某個(gè)鍵盤按鍵被按下并松開(kāi)劝堪。

選擇和改變
onchange 域的內(nèi)容被改變。
onselect 文本被選中揉稚。

表單事件：
onsubmit 確認(rèn)按鈕被點(diǎn)擊秒啦。
onreset 重置按鈕被點(diǎn)擊。