說明

ECMA(歐洲計算機制造協會)
ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 作爲標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有着不同的程度的成功和失敗）將 ECMAScript 作爲 JavaScript 實現的基礎。
儘管 ECMAScript 是一個重要的標準，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：

   1、核心（ECMAScript） 
   2、文檔對象模型（DOM） Document object model (整合js，css，html)
   3、瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

Javascript 在開發中絕大多數情況是基於對象的.也是面向對象的.

1、js簡介

1.1、簡要說明

1.1.1、JavaScript 代碼

JavaScript 代碼（或者只有 JavaScript）是 JavaScript 語句的序列。

1.1.2、JavaScript 組合

JavaScript 語句通過代碼塊的形式進行組合。
塊由左花括號開始，由右花括號結束。
塊的作用是使語句序列一起執行。
JavaScript 函數是將語句組合在塊中的典型例子。

1.1.3、JavaScript 對大小寫是敏感的。

當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。
函數 getElementById 與 getElementbyID 是不同的。
提示：JavaScript 是腳本語言。瀏覽器會在讀取代碼時，逐行地執行腳本代碼。而對於傳統編程來說，會在執行前對所有代碼進行編譯。

1.1.4、註釋

單行註釋以 // 開頭。
多行註釋以 / 開始，以 / 結尾。

1.1.5、變量必須以字母開頭

變量也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）
變量名稱對大小寫敏感（y 和 Y 是不同的變量）
提示：JavaScript 語句和 JavaScript 變量都對大小寫敏感。

  當您向變量分配文本值時，應該用雙引號或單引號包圍這個值。
  當您向變量賦的值是數值時，不要使用引號。如果您用引號包圍數值，該值會被作爲文本來處理。

1.1.6、分號

  分號用於分隔 JavaScript 語句。
  通常我們在每條可執行的語句結尾添加分號。
  使用分號的另一用處是在一行中編寫多條語句。

1.2、變量

1.2.1、變量使用

聲明（創建） JavaScript 變量
var carname;

變量賦值  carname="Volvo";

例， 標籤頁需要在script之上
    <p id="demo"> test </p>
    <script>
        var test = " first var js"
        document.getElementById('demo').innerHTML=test
    </script>

一條語句，多個變量  var name="Gates", age=56, job="CEO";

1.2.2、變量命名規則

1、Camel 標記法
首字母是小寫的，接下來的字母都以大寫字符開頭。例如：
var myTestValue = 0, mySecondValue = "hi";

2、Pascal 標記法
首字母是大寫的，接下來的字母都以大寫字符開頭。例如：
Var MyTestValue = 0, MySecondValue = "hi";

3、匈牙利類型標記法
在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，如下所示“
Var iMyT1 = 0, sMyAbs = "hi"; 如圖

1.2.3、局部 JavaScript 變量

  在 JavaScript 函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它。（該變量的作用域是局部的）。
  您可以在不同的函數中使用名稱相同的局部變量，因爲只有聲明過該變量的函數才能識別出該變量。
  只要函數運行完畢，本地變量就會被刪除。

1.2.4、全局 JavaScript 變量

  在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。

1.2.5、JavaScript 變量的生存期

  JavaScript 變量的生命期從它們被聲明的時間開始。
  局部變量會在函數運行以後被刪除。
  全局變量會在頁面關閉後被刪除。

1.3、字符類型

字符串、數字、布爾、數組、對象、Null、Undefined

1.3.1、JavaScript 數組

var cars=new Array("Audi","BMW","Volvo"); #下標從0開始

1.3.2、整型

精確表達的範圍是 -9007199254740992 (-253) 到 9007199254740992 (253)

1.3.3、浮點型

例如1.1 1.2 又或者 4.1e22 = 4.1 * 1022
16進制和8進制數的表達
16進制數據前面加上0x，八進制前面加0
16進制數是由0-9,A-F等16個字符組成
8進制數由0-7等8個數字組成
16進制和8進制與2進制的換算

1.3.4、布爾

只能有兩個值：true 或 false。

1.3.5、Null & Undefined

Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。
undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義爲相等的。
儘管這兩個值相等，但它們的含義不同。undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示尚未存在的對象。
如果函數或方法要返回的是對象，那麼找不到該對象時，返回的通常是 null。

1.3.6、類型查詢函數(typeof)

ECMAScript 提供了 typeof 運算符來判斷一個值是否在某種類型的範圍內。可以用這種運算符判斷一個值是否表示一種原始類型：如果它是原始類型，還可以判斷它表示哪種原始類型。

    var nNum=1111
    var sStr="abcc"
    var bBom=true
    var fh=nNum+bBom
    var fh2=sStr+bBom
    var fh3=nNum+sStr
    var fh4=bBom+bBom
    console.log("數字: "+typeof (nNum))     數字: number
    console.log("字符串: "+typeof (sStr))    字符串: string
    console.log("布爾值: "+ typeof (bBom))  布爾值: boolean

    console.log("fh: "+typeof (fh))           fh: number
    console.log("fh2: "+typeof (fh2))     fh2: string
    console.log("fh3: "+typeof (fh3))     fh3: string
    console.log("fh4: "+typeof (fh4))     fh4: number

1.3.7、邏輯 AND 運算符(&&)

邏輯 AND 運算的運算數可以是任何類型的，不止是 Boolean 值。
如果某個運算數不是原始的 Boolean 型值，邏輯 AND 運算並不一定返回 Boolean 值：
如果某個運算數是 null，返回 null。 
如果某個運算數是 NaN，返回 NaN。 
如果某個運算數是 undefined，返回undefined。 

例一
var na=NaN;    
    var nb=1233;
    var nc=3333;
    console.log(na&&nb);      //NaN
    console.log(nb&&nc);     //3333

例二
    && and    # 兩個值都必須一樣纔是true
    || or     # 只有一個值爲true 那就是true，
    !  not    # 不等於

    var x = 3;
    var y = 5;
    var z = 10
    if (x > y || z > y){
        document.write('yes')
    }else {
        document.write('no')
    }     # 結果爲真  yes

1.3.8、對象

對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：例

JavaScript 中的所有事物都是對象：字符串、數字、數組、日期，等等。
在 JavaScript 中，對象是擁有屬性和方法的數據。

1.3.9、屬性和方法

屬性是與對象相關的值。
方法是能夠在對象上執行的動作。

1.3.9.1、訪問對象的屬性

1、訪問對象屬性的語法是：
objectName.propertyName
    var message = "hello world!";
    var x = message.length;
    alert(x)
    length就是message的屬性了 長度爲12

2、訪問對象的方法
objectName.methodName()
    var message = "hello world!";
    var y = message.toUpperCase()
    alert(y)
    toUpperCase就是message的方法了，全都轉成大寫 結果爲 HELLO WORLD 

提示：在面向對象的語言中，使用 camel-case 標記法的函數是很常見的。您會經常看到 someMethod() 這樣的函數名，而不是 some_method()。

1.3.10、作用域

作用域指的是變量的適用範圍。
作用域又分成公用、私有和受保護作用域

公用作用域中的對象屬性可以從對象外部訪問，即開發者創建對象的實例後，就可使用它的公用屬性；
私有作用域中的屬性只能在對象內部訪問，
ECMAScript 只有公用作用域建議性的解決辦法：屬性前後加下劃線就意味着爲私有作用域
注意，下劃線並不改變屬性是公用屬性的事實，它只是告訴其他開發者，應該把該屬性看作私有的。

1.3.11、關鍵字 this

在 ECMAScript 中，要掌握的最重要的概念之一是關鍵字 this 的用法，它用在對象的方法中。關鍵字 this 總是指向調用該方法的對象，例如：

<script type="text/javascript">
    var oac = new Object();
    oac.color = "red";
    oac.showColor = function () {
        alert(this.color)
    }
    oac.showColor()
</script>    # 輸出red 

關鍵字 this 用在對象的 showColor() 方法中。在此環境中，this 等於 oac 。下面的代碼與上面的代碼的功能相同：
<script type="text/javascript">
    var oac = new Object();
    oac.color = "red";
    oac.showColor = function () {
        alert(oac.color)
    }
    oac.showColor()
</script>

1.13.11.1、使用 this 的原因
爲什麼使用 this 呢？因爲在實例化對象時，總是不能確定開發者會使用什麼樣的變量名。使用 this，即可在任何多個地方重用同一個函數

<script>
    function showColor() {
        alert(this.color);
    };
    var oCar1 = new Object;
    oCar1.color = "red";
    oCar1.showColor = showColor;

    var oCar2 = new Object;
    oCar2.color = "blue";
    oCar2.showColor = showColor;

    oCar1.showColor();      //輸出 "red"
    oCar2.showColor();      //輸出 "blue"
</script>

注意，引用對象的屬性時，必須使用 this 關鍵字

1.3.12、構造函數方式

創建構造函數就像創建工廠函數一樣容易。第一步選擇類名，即構造函數的名字。根據慣例，這個名字的首字母大寫，以使它與首字母通常是小寫的變量名分開。除了這點不同，構造函數看起來很像工廠函數。

<script>
    function Car(a1,b1,c1) {
        this.color = a1;
        this.doors = b1;
        this.mpg = c1;
        this.showColor = function () {
            document.write(this.color);
            document.write(this.doors);
            document.write(this.mpg);
        };
    }

    var oCar1 = new Car("red");
    var oCar2 = new Car("yellow",22,232);

    oCar1.showColor();
    document.write('<br />')
    oCar2.showColor()

</script>

構造函數內沒有創建對象，而是使用 this 關鍵字。使用 new 運算符構造函數時，在執行第一行代碼前先創建一個對象，只有用 this 才能訪問該對象。然後可以直接賦予 this 屬性，默認情況下是構造函數的返回值（不必明確使用 return 運算符）、如圖所示

1.4、原型方式

該方式利用了對象的 prototype 屬性，可以把它看成創建新對象所依賴的原型

例一：
<script>
    function Car() {
    }

    Car.prototype.color = "yellow";
    Car.prototype.doors = 4;
    Car.prototype.money = 20000;
    Car.prototype.showColor = function () {
        document.write(this.color);
    };

    var oCar1 = new Car();
    var oCar2 = new Car();

    oCar1.showColor()

</script>     結果： yellow

1.4.1、原型方式的問題

這個構造函數沒有參數。使用原型方式，不能通過給構造函數傳遞參數來初始化屬性的值

<script>
    function Car() {
    }

    Car.prototype.color = "red";
    Car.prototype.money = 20000;
    Car.prototype.Arr = new Array("xiong","xiong2");
    Car.prototype.showColor = function () {
        document.write(this.color);
    };

    var oCar1 = new Car();
    oCar1.Arr.push('xiong3');
    oCar1.showColor();
    document.write('<br />')
    document.write(oCar1.Arr);

    /*
    結果： red
    xiong,xiong2,xiong3
     */
</script>

上面的代碼中，屬性 Arr 是指向 Array 對象的指針，該數組中包含兩個名字 "xiong" 和 "xiong2"。由於 drivers 是引用值，Car 的兩個實例都指向同一個數組。只需要添加一個，那麼兩個對象輸出結果都是顯示字符串 "xiong,xiong2,xiong3"。
由於創建對象時有這麼多問題，你一定會想，是否有種合理的創建對象的方法呢？答案是有，需要聯合使用構造函數和原型方式。

1.4.2、混合的構造函數/原型方式

聯合使用構造函數和原型方式，就可像用其他程序設計語言一樣創建對象。
即用構造函數定義對象的所有非函數屬性，用原型方式定義對象的函數屬性（方法）。
結果是，所有函數都只創建一次，而每個對象都具有自己的對象屬性實例。

<h1>混合方式： 構造函數 + 原型方式 </h1>
<script>

    function Car(IWide, iHigh) {
        this.wide = IWide;
        this.high = iHigh;
        this.Arr = new Array('xiong1','xiong2');
    }

    Car.prototype.showColor = function () {
        document.write(this.high);
    };

    var oCar1 = new Car(2000,2900);
    var oCar2 = new Car(2100,2900);

    oCar1.Arr.push('xiong3');
    oCar2.Arr.push('xiong4');

     document.write(oCar1.Arr);
     document.write('<br />');
     document.write(oCar2.Arr);
</script>

這樣就能完美解決原型方式傳遞參數的問題了

1.4.3、動態原型方法

暫時省略混合工廠方式也省略，輕裝上陣先實現功能，

1.4.5、採用哪種方式

如前所述，目前使用最廣泛的是混合的構造函數/原型方式，此外，動態原始方法也很流行，在功能上與構造函數/原型方式等價。可以採用這兩種方式中的任何一種。不過不要單獨使用經典的構造函數或原型方式，因爲這樣會給代碼引入問題

1.4.6、實例

var str = "hello ";
str += "world";
實際上，這段代碼在幕後執行的步驟如下：
        1、創建存儲 "hello " 的字符串。
        2、創建存儲 "world" 的字符串。
        3、創建存儲連接結果的字符串。
        4、把 str 的當前內容複製到結果中。
        5、把 "world" 複製到結果中。
        6、更新 str，使它指向結果。

每次完成字符串連接都會執行步驟 2 到 6，使得這種操作非常消耗資源。如果重複這一過程幾百次，甚至幾千次，就會造成性能問題。解決方法是用 Array 對象存儲字符串，然後用 join() 方法（參數是空字符串）創建最後的字符串。想象用下面的代碼代替前面的代碼：

var arr = new Array();
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");

這樣，無論數組中引入多少字符串都不成問題，因爲只在調用 join() 方法時纔會發生連接操作。此時，執行的步驟如下：

1、創建存儲結果的字符串
2、把每個字符串複製到結果中的合適位置

1.4.7、性能連接對比

<script>
    var i;
    var str = "";
    h1 = new Date();
    for (i=0;i<100000;i++){
        str += "text";
    }
    h2 = new Date();

    document.write('字串串連接使用時長: ' + (h2.getTime() - h1.getTime()));

    function Scon() {
        this._strings_ = new Array();
    }

    Scon.prototype.append = function (str) {
        this._strings_.push(str);
    };

    Scon.prototype.toString = function () {
        return this._strings_.join(" ")
    };

    h1 = new Date();

    var asdf = new Scon();
    for (var u=0; u<10000; u++){
        asdf.append('test')
    }

    var Sname2 = asdf.toString();
    h2 = new Date();
    document.write('<br>')
    document.write("使用函數連接字符串時長： " + (h2.getTime() - h1.getTime()))

</script>

1.5、函數

1.5.1、什麼是函數？

函數是一組可以隨時隨地運行的語句。
函數是 ECMAScript 的核心。

語法
function functionName(arg0, arg1, ... argN) {
  statements
}

1.5.2、arguments 對象

在函數代碼中，使用特殊對象 arguments，開發者無需明確指出參數名，就能訪問它們。
例如，在函數 sayHi() 中，第一個參數是 message。用 arguments[0] 也可以訪問這個值，即第一個參數的值（第一個參數位於位置 0，第二個參數位於位置 1，依此類推）。


例一：
<script>
    function sayHi(str) {
        if (arguments[0] == "bye") {
            return;
        }
        alert(arguments[0])
    }

    var hi1 = sayHi("bye");

</script>

如果對象將 傳遞的參數改爲其它 則會彈出警告框 

例二： 檢查arguments傳遞參數的個數
<script>
    function howArgs() {
        alert(arguments.length)
    }

    howArgs('xiong1','xiong2');
    howArgs();
    howArgs('you','you2');
    // 結果爲 2 0 2   

</script>

註釋：與其他程序設計語言不同，ECMAScript 不會驗證傳遞給函數的參數個數是否等於函數定義的參數個數。開發者定義的函數都可以接受任意個數的參數（根據 Netscape 的文檔，最多可接受 255 個），而不會引發任何錯誤。任何遺漏的參數都會以 undefined 傳遞給函數，多餘的函數將忽略。

1.5.3、閉包

閉包，指的是詞法表示包括不被計算的變量的函數，也就是說，函數可以使用函數之外定義的變量。

例一： 簡單用法
<script>
    var sManager = "hello world";
    function sayHello() {
        alert(sManager)
    }
    sayHello()
</script>

在上面這段代碼中，腳本被載入內存後，並沒有爲函數 sayHelloWorld() 計算變量 sMessage 的值。該函數捕獲 sMessage 的值只是爲了以後的使用，也就是說，解釋程序知道在調用該函數時要檢查 sMessage 的值。sMessage 將在函數調用 sayHelloWorld() 時（最後一行）被賦值，顯示消息 "hello world"。

例二： 複雜用法
<script>
    var iNum = 11;
    function addNum(iNum1, iNum2) {
        function doadd() {
            return iNum1 + iNum2 + iNum;
        }
        return doadd();
    }
    console.log(addNum(10,20))
</script>

// 結果爲41

函數addNum()和內部函數doadd() 閉包， addNum函數接受兩個參數，內部函數是一個閉包，內部函數是一個閉包，因爲它將獲取外部函數的參數 iNum1 和 iNum2 以及全局變量 iNum 的值。 addNum() 的最後一步調用了 doAdd()，把兩個參數和全局變量相加，並返回它們的和， 外部無法調用閉包函數

2、BOM對象

BOM（瀏覽器對象模型），可以對瀏覽器窗口進行訪問和操作。使用 BOM，開發者可以移動窗口、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。
使 JavaScript 有能力與瀏覽器“對話”。

2.1、window對象

所有瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不需要創建對象,直接使用即可.

   window對象方法

    alert()            顯示帶有一段消息和一個確認按鈕的警告框。    
    confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
    prompt()           顯示可提示用戶輸入的對話框。
    open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。
    close()            關閉瀏覽器窗口。
    setInterval()      按照指定的週期（以毫秒計）來調用函數或計算表達式。
    clearInterval()    取消由 setInterval() 設置的 timeout。
    setTimeout()       在指定的毫秒數後調用函數或計算表達式。
    clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
    scrollTo()         把內容滾動到指定的座標。

<    script>
        window.alert('test');
    </script>

<script>
    var ret=window.confirm('test')
    console.log(ret)
</script>
image.png  點擊取消爲false 確定爲true

<script>
    var ret=window.prompt('test')
    console.log(ret)
</script>
    image.png 接收輸入的值, 

# 點擊時間刷新以及停止_v1 

<head>
    <meta charset="UTF-8">
    <title>window</title>
    <style>
        #inp1{
            width: 300px;
            height: 40px;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <input type="text" id="inp1" onclick="start()" value="點擊">
    <div>
        <button onclick="end()">停止</button>
    </div>
    <script>
        function currTime() {
            var Time=new Date().toLocaleString()
            var cu=document.getElementById("inp1")
            cu.value=Time
        }

        var clock;
        function start() {
            if (clock==undefined){
                clock=setInterval(currTime,1000);
            }
        }

        function end() {
            clearInterval(clock);
            clock=undefined
        }

    </script>
</body>

3、什麼是 DOM？

DOM 是 W3C（萬維網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文檔的標準：
"W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"
W3C DOM 標準被分爲 3 個不同的部分：
核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型

什麼是 XML DOM？
XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法。

什麼是 HTML DOM？
HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。

節點樹中的節點彼此擁有層級關係。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱爲根（root）

每個節點都有父節點、除了根（它沒有父節點）

一個節點可擁有任意數量的子

同胞是擁有相同父節點的節點

訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素：

  全局頁面查找：

    通過使用 getElementById() 方法 
    通過使用 getElementsByTagName() 方法 
    通過使用 getElementsByClassName() 方法 
    通過使用 getElementsByName() 方法

  局部查找標籤方法：

element.getElementsByClassName()
element.getElementsByTagName()

3.1、DOM 節點

HTML 文檔中的所有內容都是節點(NODE)：
整個文檔是一個文檔節點(document對象)
每個 HTML 元素是元素節點(element 對象)
HTML 元素內的文本是文本節點(text對象)
每個 HTML 屬性是屬性節點(attribute對象)
註釋是註釋節點(comment對象)

  節點(自身)屬性:

    attributes - 節點（元素）的屬性節點
    nodeType – 節點類型
    nodeValue – 節點值
    nodeName – 節點名稱
    innerHTML - 節點（元素）的文本值

<div class="div1">div1</div>

<script>
    var ele1=document.getElementsByClassName('div1')[0];
    console.log("innerHTML: "+ele1.innerHTML);
    console.log("nodeName:" +ele1.nodeName);
    console.log("attributes: "+ele1.attributes);
    console.log("nodeValue: "+ele1.nodeValue);
    console.log("nodeType: "+ele1.nodeType);
</script>
image.png

導航屬性:

    parentNode - 節點（元素）的父節點 (推薦)  

    firstChild – 節點下第一個子元素
    lastChild – 節點下最後一個子元素

    previousElementSibling - 標籤的上一個子元素
    nextElementSibling  - 標籤的下一個子元素

 <div class="div1">
    <p class="p1">hello p1</p>
    <div class="div2">hello div2</div>
    <div class="div3">hello div3</div>
  </div>

<script>
        var ele2=document.getElementsByClassName("div2")[0];
        console.log(ele2.previousElementSibling)        //取上一個標籤屬性
        console.log(ele2.nextElementSibling)                    //取下一個標籤屬性
</script>
image.png

    console.log(ele2.parentNode)    // 取父級標籤
       image.png

var ele3=ele2.parentNode        // 取父級標籤屬性並重新賦值
console.log(ele3.innerText)     // 取出本級標籤中的文本
image.png

# 點擊時間刷新以及停止_v2

<input type="text" class="inp1">
<button>停止</button>
<script>
    var sInpt=document.getElementsByClassName('inp1')[0];
    function CuTime() {
        var curr=new Date().toLocaleString();
        sInpt.value=curr;
    }

    var clock;
    sInpt.onclick = function () {
        if (clock == undefined){
            clock=setInterval(CuTime,1000);
        }
    }

    var nextEl=sInpt.nextElementSibling;
    nextEl.onclick = function () {
        clearInterval(clock)
        clock=undefined
    }

</script>

3.2、HTML DOM Event(事件)

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。

    onclick        當用戶點擊某個對象時調用的事件句柄。
    ondblclick     當用戶雙擊某個對象時調用的事件句柄。

    onfocus        元素獲得焦點。               //練習：輸入框
    onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
    onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）

    onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
    onkeypress     某個鍵盤按鍵被按下並鬆開。
    onkeyup        某個鍵盤按鍵被鬆開。
    onload         一張頁面或一幅圖像完成加載。
    onmousedown    鼠標按鈕被按下。
    onmousemove    鼠標被移動。
    onmouseout     鼠標從某元素移開。
    onmouseover    鼠標移到某元素之上。
    onmouseleave   鼠標從元素離開

    onselect      文本被選中。
    onsubmit      確認按鈕被點擊。

# 獲取元素焦點用戶框 onfocus onblur

<input type="text" value="請輸入用戶名" class="onF" onfocus="f1()" onblur="f2()">
<script>
    var onf=document.getElementsByClassName('onF')[0];
    function f1() {
        if (onf.value="請輸入用戶名")
        onf.value="";
    }
    function  f2() {
        if(!onf.value.trim());
        onf.value="請輸入用戶名";
    }
</script>

# onsublimt
是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.

<form action="" id="from1">
    <input type="text" name="username" class="inp1">
    <input type="submit">
</form>

<script>
    var ele = document.getElementById('from1');
    // 阻止表單提交方式一：
    // ele.onsubmit = function () {
        //onsubmit 命名的事件函數,可以接受返回值. 其中返回false表示攔截表單提交.其他爲放行.
        // return false
    // }

    // 阻止表單提交方式2
    ele.onsubmit =function (e) {
        //event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動作。
        e.preventDefault()
    }
</script>
      image.png

Event 對象

Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.

事件傳播

<div class="div1" onclick="f1()">
        <div class="div2" onclick="f2()"></div>
</div>

<script>
    var ele=document.getElementsByClassName('div2')[0];
    ele.onclick = function (e) {
        // e 鼠標點擊事件
        // console.log(e)
        //MouseEvent {isTrusted: true, screenX: 36, screenY: 171, clientX: 27, clientY: 86, …}altKey: falsebubbles: truebutton: 0buttons: 0cancelBubble: falsecancelable: trueclientX: 27clientY: 86composed: truectrlKey: falsecurrentTarget: nulldefaultPrevented: falsedetail: 1eventPhase: 0fromElement: nullisTrusted: truelayerX: 27layerY: 86metaKey: falsemovementX: 0movementY: 0offsetX: 19offsetY: 78pageX: 27pageY: 86path: (6) [div.div2, div.div1, body, html, document, Window]relatedTarget: nullreturnValue: truescreenX: 36screenY: 171shiftKey: falsesourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}srcElement: div.div2target: div.div2timeStamp: 10657.799999993586toElement: div.div2type: "click"view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}which: 1x: 27y: 86__proto__: MouseEvent
        alert('div2')
        e.stopPropagation()
    }
    function f1() {
        alert('div1')
    }
</script>

# 點擊div2窗口裏，覆蓋的div1不會因爲鼠標點擊事件傳播，而打印彈窗信息

增刪改

1、增

1.1 先創建一個標籤(createElement) , 如p標籤,增加內容需要使用標籤屬性名.innerHtml=“hello”

1.2 增加一定要先查找到父級才能進行修改

代碼：

function add() {
        // 創建一個標籤
        var ele=document.createElement('p');
        // 標籤頁內容
        ele.innerHTML='hello p';
        // 找到父級標籤
        var pro=document.getElementsByClassName('div1')[0];
        //每一個增刪改查都需要父級標籤來進行操作
        pro.appendChild(ele)
    }

2、刪

2.1 先查找父級標籤, 然後使用局部查找，最後再進行刪除

2.2 需要判斷是否爲空

代碼：

function del() {
        var pro=document.getElementsByClassName('div1')[0];
        var son=pro.getElementsByTagName('p')[0];
        // 判斷如果有就繼續
        if(son){
            pro.removeChild(son)
        }
    }

3、改

3.1 先創建一個新的標籤

3.2 查找到需要修改的標籤id，class, tagname

3.3 一樣先需要查找到父級標籤

3.4 最後替換新舊

代碼:

function change() {
        // 先創建一個新的標籤
        var newP=document.createElement('p');
        newP.innerHTML='hello p';
        // 找到要修改的標籤
        var changeP=document.getElementsByTagName('p')[0];
        // 找到父級標籤,需要用父級來進行子級的替換修改
        var pro=document.getElementsByClassName('div3')[0];
        // 修改
        pro.replaceChild(newP,changeP)
    }

// 增刪改

<head>
    <style>
        .div1,.div2,.div3{
            width: 150px;
            height: 100px;
            text-align: center;
        }
        .div1{
            background-color: #8aab30;
        }
        .div2{
            background-color: #333333;
        }
        .div3{
            background-color: #b4b4b4;
        }
    </style>
</head>
<body>
    <div class="div1">
        <button onclick="add()">add</button>
        hello div1</div>
    <div class="div2">
        <button onclick="del()">del</button>
        hello div2</div>
    <div class="div3">
        <button onclick="change()">change</button>
        <p>hello div3</p></div>

    <script>
        function add() {
            // 創建一個標籤
            var ele=document.createElement('p');
            // 標籤頁內容
            ele.innerHTML='hello p';
            // 找到父級標籤
            var pro=document.getElementsByClassName('div1')[0];
            //每一個增刪改查都需要父級標籤來進行操作
            pro.appendChild(ele)
        }
        function del() {
            var pro=document.getElementsByClassName('div1')[0];
            var son=pro.getElementsByTagName('p')[0];
            // 判斷如果有就繼續
            if(son){
                pro.removeChild(son)
            }
        }
        function change() {
            // 先創建一個新的標籤
            var newP=document.createElement('p');
            newP.innerHTML='hello p';
            // 找到要修改的標籤
            var changeP=document.getElementsByTagName('p')[0];
            // 找到父級標籤,需要用父級來進行子級的替換修改
            var pro=document.getElementsByClassName('div3')[0];
            // 修改
            pro.replaceChild(newP,changeP)
        }
    </script>
</body>

關於class的操作 

    elementNode.className
    elementNode.classList.add
    elementNode.classList.remove

// 模態對話框

    <style>
        .background{
            width: 1300px;
            height: auto;
            min-height: 600px;
            background-color: #ccdcef;
        }
        .shado{
            position: fixed;
            background-color: #cccccc;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            opacity: 0.5;
        }
        .shutDown{
            width: 300px;
            height: 300px;
            background-color: #999999;
            top 50%;
            left: 50%;
            position: absolute;
            margin-top: -400px;
            margin-left: -190px;
        }
        .shut{
            float: right;
        }
        .hide{
            display: none;
        }

    </style>
</head>
<body>

    <div class="background">
        <button onclick="show()">show</button>
    </div>

    <div class="shado hide"></div>

    <div class="shutDown hide">
        <button onclick="shutDown()" class="shut">X</button>
    </div>

    <script>

        var ele_shado = document.getElementsByClassName('shado')[0];
        var ele_shutDown = document.getElementsByClassName('shutDown')[0];

        function show() {
            ele_shado.classList.remove('hide');
            ele_shutDown.classList.remove('hide');
        }

        function shutDown() {
            ele_shado.classList.add('hide');
            ele_shutDown.classList.add('hide');
        }

    </script>
</body>

python_day14_前端_JS

說明