正則表示式

1.定義：它是由一個字元序列形成的搜尋模式，當在文字中搜索資料時，可以用搜索模式來描述你要查詢的內容。它可以是一個簡單的字元，或一個更復雜的模式。它可用於所有文字搜尋和文字替換操作。

2.Eg：var patt = /youngamber/i 其中，/youngamber/i是正則表示式，youngamber是用於檢索的模式，i是修飾符（搜尋不區分大小寫）

3.使用字串的方法

（1）search（）

• 使用正則表示式
  Eg：使用正則表示式搜尋“youngamber”，且不區分大小寫。

var str = "Visit youngamber";
var n = str.search(/youngamber/i
 
);

• 使用字串
  可以使用字串為引數，字串引數會轉換為正則表示式。

（2）replace（）

• 使用正則表示式
  Eg：使用正則表示式且不區分大小寫將字串中的Jingdogegg替換為youngamber

var str = "visit Jingdogegg";
var res = str.replace(/jingdogegg/i,"youngamber");

• 使用字串
  replace（）方法將接受字串為引數。

4.正則表示式修飾符

i 執行對大小寫不敏感的匹配
g 執行全域性匹配
m 執行多行匹配

表單驗證

function validateForm
 
(){
    var x = document.form["myForm"]["fname"].value;
    if(x==null || x=="　"){
    alert("First name must be filled out");//沒填寫fname時彈出警告框
    return false;
    }
}

E-mail驗證

檢查輸入資料是否符合電子郵件地址的基本語法，輸入的資料必須包含@和 . ，同時@不可以是郵件地址的首字元，並且@之後至少需要有一個 . 。

function validateForm()
{
    var x = document.forms["myForm"
 
]["email"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if(stpos<1 || dotpos<atpos + 2 || dotpos + 2>=x.length)
    {
        alert("Not a valid e-mail address");
        return false;   
    }
}

函式

1.函式的呼叫

<p id="demo"></p>
<script>
    function myFunction(a,b)
    {
        return a*b;//輸出12
    }
    document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

• 函式的自動呼叫

<p id="demo"></p>
<script>
    (function(){
        document.getElementById("demo").innerHTML="Hello AmberYoung!";
    })();
</script>

• 作為函式方法呼叫函式
  call（）和apply（）是預定義的函式方法，兩個方法的第一引數必須是物件本身。

//call
function myFunction(a,b){
    return a*b;
}
myFunction.call(myObject,10,2);

//apply
function myFunction(a,b){
    return a*b;
}
myArray = [10,2]
myFunction.apply(myObject,myArray);

2.函式表示式

var x = function(a,b){return a*b};//函式可以儲存在變數中

//在函式表示式儲存變數後，變數也可以作為一個函式使用
var x = function(a,b){return a*b};
var z = x(4,3);

3.函式提升

//提升hoisting是javascript預設將當前作用域提升到前面去的行為

myFunction(5)
function myFunction(y){
    return y*y;
}

注意：使用表示式定義函式時無法提升。

4.arguments.length屬性

返回函式呼叫過程收到的引數個數

<script>//尋找最大值
function findMax() {

    var i, max = arguments[0];

    if(arguments.length < 2){

     return max;

    }


    for (i = 1; i < arguments.length; i++) {

        if (arguments[i] > max) {

            max = arguments[i];

        }

    }

    return max;

}
document.getElementById("demo").innerHTML = findMax(4, 5, 6);
</script>

5.預設引數
如果函式在呼叫時缺少引數，引數會預設設定為undefined。

6.傳遞引數

• 通過值傳遞函式

<script>
var x = 1;
function myFunction(x){
    x++;//修改引數x的值，將不會修改在函式外定義的變數x
    console.log(x);//2
}
myFunction(x);//2
console.log(x);//1
</script>

• 通過物件傳遞引數

<script>
var obj = {x=1};
function myFunction(obj){
    obj.x++;//修改物件obj.x的值，函式外定義的obj也將會修改
    console.log(obj.x);//2
}
myFunction(obj);//2
console.log(obj.x);//2
</script>

7.內嵌函式
在javascript中，所有函式都能訪問他們上一層的作用域，javascript支援巢狀函式。巢狀函式可以訪問上一層的函式變數。
內嵌函式plus（）可以訪問父函式的counter變數：

function add(){
    var counter = 0 ;
    function plus(){counter += 1;}
    plus();
    return counter;
}

8.閉包

JS HTML DOM

1.通過HTML DOM可訪問javascript Html文件中的所有元素。

2.查詢HTML元素

• 通過id查詢

var x = document.getElementById("demo");

如果找到該元素，則該方法將以物件（在x中）的形式返回該元素。
如果未找到該元素，則x將包含null。

• 通過標籤名查詢

var x = document.getElementById("demo");
var y = x.getElementByTagName("p");

• 通過類名查詢

var x = document.getElementsByClassName.("intro");

3.HTML DOM 改變HTML內容

• 改變html輸出流

documen.write();

• 改變html內容

···.innerHTML=  ;

• 改變html屬性

document.getElementById("id").屬性名="new value";

document.getElementById("demo").style.color="blue";

隱藏：hidden 　顯示：visible　　property：visibility

5.事件

onclick 點選                       onblur 失去焦點
onload 瀏覽器已完成頁面的載入        onmouseover 滑鼠放上去
onchange 表單元素的內容改變時觸發     onmouseout 滑鼠離開時
onfocus 獲取焦點                    onmousemove 滑鼠移動時
onmousedown 滑鼠按下                onmouseup 滑鼠松下

6.HTML DOM EventListener

addEventListener( )方法：用於向指定元素新增事件控制代碼，不會覆蓋已存在的事件控制代碼，可以向一個元素新增多個事件控制代碼，可以向同一個元素新增多個同類型的事件控制代碼，可以向任何DOM物件新增事件監聽，不僅僅是HTML元素，還可以是window物件。

element.addEventListener(event,function,useCapture);
//event：事件型別 click或者mousedown（注意沒有on）
//useCapture：布林值，用於描述事件是冒泡還是捕獲，預設值是false，即冒泡；true，捕獲。

使用它在同一個元素中新增多個事件：

<button id="myBtn"></button>
<p id="demo"></p>
<script>
    var x =document.getElementById("demo");
    x.addEventListener("mouseover",myFunction);
    x.addEventListener("click",mySecondFunction);
    x.addEventListener("mouseout",myThirdFunction);
    function myFunction(){
        document.getElementById("demo").innerHTML += "Moused over<br>";
    }
    function mySecondFunction(){
        document.getElementById("demo").innerHTML += "Click <br>";
    }
    function myThirdFunction(){
        document.getElementById("demo").innerHTML += "Moused out<br>";
    }
</script>

removeEventListener（）移除由addEventListener（）方法新增的事件控制代碼

7.事件冒泡和事件捕獲
事件傳遞定義了元素事件的觸發順序

• 在冒泡中，內部元素的事件會被先觸發，然後再觸發外部元素。
• 在捕獲中，外部元素的事件會被先觸發，然後才會觸發內部元素的事件。

8.建立和刪除HTML元素

• 建立element.appendChild(para);
• 刪除element.removeChild(child);
  但刪除的時候要找到子元素和它的父元素，我們可以用parentNode屬性直接找到父元素：

var child = document.getElementById("p1");
child.parentNode.removeChild(child);