　　JavaScript簡稱JS，是一種瀏覽器解釋型語言，嵌套在HTML文件中交給瀏覽器解釋執行。主要用來實現網頁的行爲，用戶交互及前後端的數據傳輸等。

JavaScript 組成

核心語法 - ECMAScript (ES5-ES6) 規範了JavaScript的基本語法
瀏覽器對象模型 -BOM Browser Object Model，提供了一系列操作瀏覽器的方法
文檔對象模型 -DOM Document Object Model ，提供了一系列操作的文檔的方法

　　腳本可位於 HTML 的 <body> 或 <head> 部分中，通常的做法是把函數放入 <head> 部分中，或者放在頁面底部。腳本代碼必須包含在<script>標籤中。

JS使用

語法：將事件名稱以標籤屬性的方式綁定到元素上，自定義事件處理。

<!--實現點擊按鈕在控制檯輸出-->
<button onclick="console.log('Hello World');">點擊</button>

文檔內嵌

　　<script>標籤可以書寫在文檔的任意位置（<head>或<body>），書寫多次，一旦加載到script標籤就會立即執行內部的JavaScript代碼，因此不同的位置會影響代碼最終的執行效果。

<script type="text/javascript">
  alert("網頁警告框");
</script>

外部鏈接

　　創建外部的JavaScript文件 XX.js，在HTML文檔中使用<script src=""></script>引入

<script src="index.JavaScript"></script>

注意：<script></script>既可以實現內嵌 JavaScript 代碼，也可以實現引入外部的 JavaScript 文件，但是隻能二選一。

JavaScript 輸入和輸出語句

顯示數據

window.alert()：彈出警告框

<script>
    window.alert("內容");
</script>

confirm("你真的要關閉嗎");：“確定”返回True，“取消”返回flase。

document.write()：在js中寫入HTML標籤，可以直接顯示

可以識別HTML標籤，腳本代碼可以在文檔任何地方書寫，如果是普通寫入（不涉及事件），區分代碼的書寫位置插入
文檔渲染結束後，再次執行此方法，會重寫網頁內容

document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落。</p>");

innerHTML：寫入到HTML元素

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改變內容

console.log()：控制檯輸出，多用於代碼調試

prompt("請輸入一個數值："); 在網頁彈框接收用戶輸入，返回用戶輸入的內容

基礎語法

　　JavaScript是由語句組成,語句由關鍵字，變量，常量，運算符，方法組成。分號“；”作爲語句結束的標誌，也可以省略，但是不寫分號，瀏覽器會自動添加，會增加瀏覽器的運行壓力。JavaScript嚴格區分大小寫；註釋語法 單行註釋使用 // ，多行註釋使用 /* */。

變量

作用 : 用於存儲程序運行過程中可動態修改的數據

語法 : 使用關鍵var聲明,自定義變量名

var a; //變量聲明
a = 100; //變量賦值
var b = 200; //聲明並賦值
var m,n,k; //同時聲明多個變量
var j = 10,c = 20; //同時聲明並賦值多個變量
person={fistName:"John"} // 對象賦值

命名規範 :

變量名，常量名，函數名，方法名由數字，字母，下劃線，$組成，禁止以數字開頭
禁止與關鍵字衝突
變量名嚴格區分大小寫
變量名儘量見名知意,多個單詞組成採用小駝峯,例如："userName"

使用注意 :

變量如果省略var關鍵字,並且未賦值,直接訪問會報錯
變量使用var關鍵字聲明但未賦值,變量初始值爲undefined
變量省略var關鍵字聲明,已被賦值,可正常使用.影響變量作用域

常量

　　存儲一經定義就無法修改的數據，常量一經定義,不能修改,強制修改會報錯，命名規範同變量,爲了區分變量,常量名採用全大寫字母

語法 : 必須在聲明的同時賦值

const PI = 3.14;

操作小數位 toFixed(n); 保留小數點後 n 位使用：

var num = 3.1415926;
//保留當前變量小數點後兩位
var res = num.toFixed(2);

數據類型

整數

十進制表示　　var a = 100;

八進制表示以0爲前綴　　var b = 021; //結果爲十進制的 17

使用 : 整數可以採用不同進製表示,在控制檯輸出時一律會按照十進制輸出

小數

小數點表示　　var m = 1.2345;

科學計數法例 : 1.5e3 e表示10爲底,e後面的數值表示10的次方數 1.5e3 等價於 1.5 * 10(3)

字符串 string

　　由一個或多個字符組成,使用""或''表示，每一位字符都有對應的Unicode編碼

var s = "abc";
var s1 = "張三";
consloe.log(s.length)    // 計算字符串長度

布爾類型 boolean

　　只有真和假兩個值，布爾值與number值可以互相轉換。true 爲 1，false 爲 0

var isSave = true;
var isChecked = false;

undefined 特殊值

　　變量聲明未賦值時顯示undefined

var a;
console.log(a);//undefined

null 空類型

　　定義對象引用時使用null，表示對象爲空，null 和 undefined 的值相等，但類型不等。

typeof檢測變量數據類型

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

數據類型轉換

不同類型的數據參與運算時,需要轉換類型

轉換字符串類型　　

toString() 返回轉換後的字符串

var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"

轉換Number類型

　　Number(param) 如果是數字,返回number數字，如果不是，返回NaN

　　isNan(num)　　如果是數字false，否則返回true。

parseInt(param) 參數爲要解析的數據

作用 : 從數據中解析整數值

如果參數爲非字符串類型,會自動轉成字符串
從左向右依次對每一位字符轉number，轉換失敗則停止向後解析，返回結果

parseFloat(param)：提取number值，包含整數和小數部分

運算符

轉義字符

使用反斜槓(\)來進行轉義，轉義字符的具體算法同C語言類似。

\'　　單引號

\n　　換行

賦值運算符

= 將右邊的值賦給左邊變量

算數運算符

+ - * / % 加減乘除取餘

符合運算符

+= -= *= /= %=

自增或自減運算符

++ 變量的自增，在自身基礎上進行 +1

-- 變量的自減，在自身基礎上進行 -1

注意：

自增或自減運算符在單獨與變量結合時，放前和放後沒有區別

如果自增或自減運算符與其他運算符結合使用，要區分前綴和後綴,做前綴，那就先++/--,再進行賦值或其他運算，如果做後綴，就先結合其他運算符，再進行++ / --

關係運算符/比較運算符

> < 
>= <=
==(相等) !=(相等)
===(全等) !==(不全等)

關係運算符用來判斷表達式之間的關係,結果永遠是布爾值 true/false

使用

字符串與字符串之間的比較依次比較每位字符的Unicode碼，只要某位字符比較出結果，就返回最終結果
其他情況一律將操作數轉換爲number進行數值比較，如果某一操作數無法轉換number，則變成NaN參與比較運算，結果永遠是false

相等與全等

相等 : 不考慮數據類型，只做值的比較(包含自動類型轉換)

全等 : 不會進行數據類型轉換，要求數據類型一致並且值相等才判斷全等

邏輯運算符

&& 邏輯與 ：表達式同時成立，最終結果才爲true；1則1

|| 邏輯或 ：表達式中只要有一個成立,最終結果即爲true; 有1則1

! 邏輯非 ：對已有表達式的結果取反注意 : 除零值以外，所有值都爲真

三目運算符

語法 :

表達式1 ? 表達式2 : 表達式3;

過程：判斷表達式1是否成立，返回布爾值如果表達式1成立，執行表達式2；如果表達式1不成立，執行表達式3；

JS對象

　　對象是由屬性和方法組成的,使用點語法訪問，對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：

var person={firstname:"John", lastname:"Doe", id:5566};
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

對象屬性有兩種尋址方式：

name=person.lastname;
name=person["lastname"];

數組對象

　　數組由 綜括號[ ] 包圍。

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 或者這樣表示
var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];

var aee2=[1,"2",true];              //一維數組
var arr2 = [[1,2],[3,4],[5,6,7]];   //二維數組
var r1 = arr2[0]; //內層數組
var num = r1[0]; //值 1
var num2 = arr2[1][0];  //簡寫

特點

數組用於存儲若干數據，自動爲每位數據分配下標，從0開始
數組中的元素不限數據類型，長度可以動態調整
動態操作數組元素：根據元素下標讀取或修改數組元素，arr[index]

屬性 : length 表示數組長度,可讀可寫

方法 :

push(data)：在數組的末尾添加一個或多個元素,多個元素之間使用逗號隔開返回添加之後的數組長度
pop()：移除末尾元素返回被移除的元素
unshift(data)：在數組的頭部添加一個或多個元素返回添加之後的數組長度
shift()：移除數組的第一個元素返回被移除的元素
toString()：將數組轉換成字符串類型返回字符串結果
join(param)：將數組轉換成字符串,可以指定元素之間的連接符,如果參數省略,默認按照逗號連接返回字符串
reverse()：倒序排列 返回重排的數組,注意該方法直接修改原數組的結構
sort()：默認按照Unicode編碼升序排列 返回重排後的數組,直接修改原有數組，sortASC()自定義升序，sortDESC()自定義降序。

字符串對象 String

字符串採用數組結構存儲每位字符,自動爲字符分配下標,從0開始。

var str = "100";
var str2 = new String("hello");

方法

length：獲取字符串長度
toUpperCase() ：轉大寫字母，返回轉換後的字符串,不影響原始字符串
toLowerCase() ：轉小寫字母，返回轉換後的字符串,不影響原始字符串
charAt(index) ：獲取指定下標的字符
charCodeAt(index) ：獲取指定下標的字符編碼。參數可以省略，默認爲0
獲取指定字符的下標
- indexOf(str,fromIndex) : 從前向後查詢，找到即返回
  - 參數 : str 表示要查找的字符串，fromIndex 表示起始下標,默認爲0
  - 返回 : 返回指定字符的下標,查找失敗返回-1
- lastIndexOf(str,fromIndex) : 獲取指定字符最後一次出現的下標,從後向前查找,找到即返回
  - 參數 : str 必填,表示要查找的內容 fromIndex 選填，指定起始下標

substring(startIndex,endIndex) 截取字符串，根據指定的下標範圍截取字符串，
- 參數 : startIndex 表示起始下標 endIndex 表示結束下標，可以省略，省略表示截止末尾，取不到最後一位,[min,max)
substr(startIndex,len)：根據下標截取指定長度的字符串
split(param)：將字符串按照指定的字符進行分割，以數組形式返回分割結果
- 參數 : 指定分隔符，必須是字符串中存在的字符，如果字符串中不存在，分割失敗，仍然返回數組

正則表達式對象 RegExp

藉助正則表達式實現字符串中固定格式內容的查找和替換

var reg1 = /正則表達式/修飾符;

修飾符 :

i : ignorecase 忽略大小寫
g : 全局匹配（查找所有匹配而非在找到第一個匹配後停止）。
m：多行匹配

var reg1 = /微軟/ig;
var reg2 = new RegExp('正則表達式','修飾符'); //正則表達式對象可以接收一個變量

字符串方法 :

lastIndex : 可讀可寫，表示下一次匹配的起始索引
test(str)：驗證字符串中是否存在滿足正則匹配模式的內容，存在則返回true，不存在返回false
search(regExp/subStr)：檢索指定的字符串，返回檢索到的字符串的起始索引。
match(regExp/subStr)：查找字符串中滿足正則格式或滿足指定字符串的內容
- 返回 : 數組,存放查找結果
replace(regExp/subStr,newStr)：根據正則表達式或字符串查找相關內容並進行替換
- 返回 : 替換後的字符串,不影響原始字符串。

var str="efbabcbe";
var reg2=new RegExp("a","ig");  //使用正則表達式來匹配字符 "a"
console.log(reg2.test(str));    //開始匹配 true
console.log(reg2.lastIndex);    //查看下一次匹配的索引位置 4
reg2.lastIndex=0;   //重置起始的索引位置
console.log(reg2.test(str));    //第二次查詢 true

//search
console.log(str.search(f/i))    // 1

// match和replace的用法案例var arr=str.match(/b/ig);
console.log(arr.toString());    // b,b,b

var str2=str.replace(reg,"i"); //將查詢後得到的a替換成i
//輸出替換後的str值
console.log(str);    // efbabcbe
 console.log(str2); // efiaicie

注意：

默認情況下，正則表達式對象不能重複調用方法，如果重複調用，結果會出錯：由於 lastIndex 保存再一次匹配的起始下標，重複調用時，不能保證每次都從下標0開始驗證，可以手動調整 lastIndex 爲 0。
只有正則對象設置全局匹配 g ，該屬性才起作用。

Math 對象

Math對象主要提供一些列數學運算的方法

圓周率 : Math.PI

自然對數 : Math.E

Math.random(); 生成0-1之間的隨機數

Math.ceil(x); 對x向上取整,忽略小數位,整數位+1

Math.floor(x); 對x向下取整,捨棄小數位,保留整數位

Math.round(x); 對x四捨五入取整數

日期對象

getTime() 　　讀取或設置當前時間的毫秒數：
getFullYear() 獲取年
getMonth()　　獲取月
getDate() 　　獲取日
getHours()　　獲取小時
getMinutes() 獲取分鐘
getSeconds() 獲取秒數
getTime() 獲取GUI時間

//定義一個日期獲取當前時間
var dt=new Date();//參數爲空表示當前日期
//獲取年
console.log(dt.getFullYear());   //2019
console.log(dt.getMonth()+1);//8
console.log(dt.getDate());//6
console.log(dt.getHours()); //23
console.log(dt.getMinutes());//53
console.log(dt.getSeconds());//57
console.log(dt.getTime());//1565106837275

//國慶節日
var dt2=new Date("2019/10/01 00:00:00");
var num=dt2-dt;  //兩時間相減，得毫秒數
console.log(num/1000/3600/24);

流程控制

控制代碼的執行順序，在一個ID中儘量不能取ID

if結構

簡單的if語句

if(條件表達式){
   //表達式成立時執行的代碼段
}

注意 :

除已0、0.0、空字符串、undefined、NaN、null是false是以外,其他值都爲true。
{ }可以省略,一旦省略，if語句只控制其後的第一行代碼,只有當if語句只有一句話的時候才能夠省略。

if - else 語句

if(條件表達式){
    //條件成立時執行
    }
else{
    //條件不成立時選擇執行
}

if-else if-else 語句

if(條件1){
    //條件1成立時執行
    }
else if(條件2){
    //條件2成立時執行
    }
else if(條件3){
    //條件3成立時執行
    }
...
else{
    //條件不成立時執行
}

switch 語句

switch(value){
    case 值1 :
    　　//value與值1匹配全等時,執行的代碼段
    　　break; //結束匹配
    case 值2 :
    　　//value與值2匹配全等時,執行的代碼段
    　　break;
    case 值3 :
        //value與值3匹配全等時,執行的代碼段
    　　break;
    default:
    　　//所有case匹配失敗後默認執行的語句
    　　break;
}

switch語句用於值的匹配,case用於列出所有可能的值;只有switch()表達式的值與case的值匹配全等時,纔會執行case對應的代碼段
break用於結束匹配,不再向後執行;可以省略,break一旦省略,會從當前匹配到的case開始,向後執行所有的代碼語句,直至結束或碰到break跳出
default用來表示所有case都匹配失敗的情況,一般寫在末尾,做默認操作

循環結構

根據條件,重複執行某段代碼

for循環

for(定義循環變量;循環條件;更新循環變量){
    // 循環體;
}

循環控制 :

break 強制結束循環
continue 結束當次循環,開始下一次循環

for in 循環

var person={fname:"John",lname:"Doe",age:25}; 
 
for (x in person)  // x 爲屬性名
{
    txt=txt + person[x];
}

while循環

while(循環條件){
   // 條件滿足時執行的代碼段
   // 更新循環變量;
}

do-while循環

do{
    // 循環體;
    // 更新循環變量
}while(循環條件);

與while循環的區別 :

while循環先判斷循環條件,條件成立才執行循環體
do-while循環不管條件是否成立,先執行一次循環體

函數

　　封裝一段待執行的代碼，函數名自定義，見名知意，命名規範參照變量的命名規範。普通函數以小寫字母開頭，用於區分構造函數(構造函數使用大寫字母開頭，定義類)

//函數聲明
function 函數名(參數列表){
    函數體;
return 返回值;
}
//函數調用
函數名(參數列表);

函數表達式

　　通過表達式定義函數

var x = function (a, b) {return a * b};
var z = x(4, 3);

匿名函數

匿名函數：省略函數名的函數。匿名函數會“自己調用自己”和“自動調用”。

語法爲：

(function (){
    函數體;    // 我將調用自己
})();
// 帶參
(function (形參){
  
})(實參);

案例

//定義一個帶參數匿名函數
(function(name,age){
    var str=name+",hello!今年你的年齡是:"+age;
    objTip=document.getElementById("tip");
    objTip.innerText=log.ab;
})("張三",19);

和上面的案例合在一起講解，定義變量接收匿名函數

var fn = function (){};
fn(); //函數調用

缺省參數

function myFunction(x, y = 10) {
    // y is 10 if not passed or undefined
    return x + y;
}

myFunction(5); // 輸出 15, y 參數的默認值

arguments 對象

　　argument 對象包含了函數調用的參數數組。

/*統計所有參數的和*/
x = sumAll(1, 123, 500, 115, 44, 88);
 
function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

調用函數

　　函數屬於HTML頁面，在瀏覽器中定義的函數會自動變爲window對象的函數。當函數沒有被自身的對象調用時 this 的值就會變成全局對象

myFunction() 和 window.myFunction() 是一樣的：

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20

函數作爲方法調用，this指的是，調用函數的那個對象。

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

JSON格式函數

var log={
    ab:function(){
        return "ok"
    },
    cd:function(){
        return "no"
    }
};
//調用函數
document.getElementById("tip").innerText=log.ab();

作用域

JavaScript中作用域分爲全局作用域和函數作用域，以函數的{ }作爲劃分作用域的依據

全局變量和全局函數

只要在函數外部使用var關鍵字定義的變量，或函數都是全局變量和全局函數,在任何地方都可以訪問
所有省略var關鍵字定義的變量，一律是全局變量

局部變量/局部函數

在函數內部使用var關鍵字定義的變量爲局部變量，函數內部定義的函數也爲局部函數，只能在當前作用域中使用，外界無法訪問

　　局部作用域中訪問變量或函數,首先從當前作用域中查找,當前作用域中沒有的話,向上級作用域中查找,直至全局作用域

DOM 文檔對象模型

　　DOM全稱爲“Document Object Model”，文檔對象模型，提供操作HTML文檔的方法。（注：每個html文件在瀏覽器中都視爲一篇文檔，操作文檔實際就是操作頁面元素。）通過javaScript，我們能夠操作HTML元素。爲了做到這將事情，我們首先要找到該元素（元素、屬性、文本內容、註釋）

通過 id 找HTML元素
通過標籤名找HTML元素
通過類名找HTML元素

獲取元素節點

通過 id 查找 HTML 元素

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

參數 : 標籤元素的ID名
返回值 : 元素節點

通過標籤名查找HTML元素

var y=document.getElementsByTagName("p");

參數 : 標籤名
返回值 : 節點列表，需要從節點列表中獲取具體的元素節點對象，具有 .length 屬性

通過類名查找HTML元素

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

參數 : 類名(class屬性值)
返回值 : 節點列表‘’，具有 .length 屬性

根據 name 屬性值取元素列表

document.getElementsByName("name_name");

參數 : name屬性值
返回 : 節點列表，具有 .length 屬性

var elems = document.getElementsByName("name_name");

添加/刪除/替換元素節點

添加

<div id="div1">
　　<p id="p1">這是一個段落。</p>
</div>
 
<script>
　　var para = document.createElement("p");　　　　// 創建<p>元素
　　var node = document.createTextNode("這是一個新的段落。");  // 爲 <p> 元素創建一個新的文本節點
　　para.appendChild(node);　　// 將文本節點添加到 <p> 元素中
   // 在一個已存在的元素中添加 p 元素
　　var element = document.getElementById("div1");   // 查找已存在的元素
　　element.appendChild(para);　　　　// 添加到已存在的元素中
</script>

　　appendChild()是添加新元素到尾部，insertBefore()是添加新元素到指定元素之前。只需要把最後一行改爲：element.insertBefore(para, child);即可。

刪除

<div id="div1">
    <p id="p1">這是一個段落。</p>
</div>
 
<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>

替換

<div id="div1">
    <p id="p1">這是一個段落。</p>
</div>
 
<script>
    var para = document.createElement("p");
    var node = document.createTextNode("這是一個新的段落。");
    para.appendChild(node);
 
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.replaceChild(para, child);
</script>

改變HTML元素

改變HTML輸出流

document.write(<p>Hello World</p>);

改變HTML內容

innerHTML : 讀取或設置元素文本內容，可識別標籤語法
innerText : 設置元素文本內容，不能識別標籤語法
value : 讀取或設置表單控件的值 input

<p id="p1">Hello World!</p>

<script>
　　document.getElementById("p1").innerHTML="新文本!";
</script>

改變HTML屬性

通過元素節點對象的方法操作標籤屬性

elem.getAttribute("attrname"); // 返回指定屬性的屬性值
elem.setAttribute("attrname","value"); // 爲元素添加屬性和屬性值
elem.removeAttribute("attrname"); // 移除指定屬性
document.getElementById(id).attribute=新屬性值

var spans=document.getElementsByTagName("span");
spans[0].setAttribute("title","這是一個首頁");
spans[1].setAttribute("title",spans[0].getAttribute("title");

/* --------------通過“.”語法訪問屬性---------------------- */
document.getElementById("image").src="landscape.jpg";

　　可以使用點語法訪問或設置元素屬性

　　h1.id = "d1"; 　　　　//set 方法
　　console.log(h1.id); //get 方法
　　h1.id = null; 　　　　 //remove 方法

注意：

屬性值以字符串表示
class屬性需要更名爲className，避免與關鍵字衝突,例如： h1.className = "c1 c2 c3";

document.getElementById("tip").className="red fs";

改變元素樣式

　　訪問元素節點的style屬性，使用點語法操作對象的CSS樣式

document.getElementById("id").style.property="新樣式"
/*---------------------案例-----------------------*/
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

注意 :

屬性值以字符串形式給出，單位不能省略
如果css屬性名包含連接符，使用JS訪問時，一律去掉連接符，改爲駝峯. font-size -> fontSize

使用事件

　　由指定元素監聽相關的事件，並且綁定事件處理函數，DOM允許我們通過觸發事件來執行代碼。比如：元素被點擊、頁面被加載、輸入框被修改...

鼠標事件

onclick　　 // 單擊
ondblclick　　 // 雙擊
onmouseover　　 // 鼠標移入
onmouseout　　 // 鼠標移出
onmousemove　　// 鼠標移動
onmousedown // 鼠標鍵按下
onmouseup // 鼠標鍵釋放

<input οnclick="alert('你輸入有誤！')" type="button" value="點一下" />

文檔或元素加載完畢

onload 　　 // 元素或文檔加載完畢
onunload // 離開頁面是觸發事件

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本信息，來加載網頁的正確版本。

onload 和 onunload 事件可用於處理 cookie。

表單控件狀態監聽

onfocus // 文本框獲取焦點
onblur // 文本框失去焦點
oninput // 實時監聽輸入
onchange // 兩次輸入內容發生變化時觸發，或元素狀態改變時觸發
onsubmit // form元素監聽，點擊提交按鈕後觸發,通過返回值布爾值控制數據是否可以發送給服務器

事件綁定方式

內聯方式 將事件名稱作爲標籤屬性綁定到元素上

<button οnclick="alert()">點擊</button>

動態綁定 通過元素節點，在Script中綁定添加事件

btn.onclick = function (){

};

addEventListener() 向指定元素添加事件

document.getElementById("myBtn").addEventListener("click", displayDate);

第一個參數：事件類型
第二個參數：事件觸發後調用的函數

注意：addEventListener() 方法允許向同一個元素添加多個事件，且不會覆蓋已存在的事件，只會先後執行。

瀏覽器對象模型 BOM

　　BOM全稱爲“Browser Object Model”，瀏覽器對象模型。提供一系列操作瀏覽器的屬性和方法。核心對象爲window對象，不需要手動創建，跟隨網頁運行自動產生，直接使用，在使用時可以省略書寫。

window對象

　　所有JavaScript全局對象、函數以及變量均自動成爲window對象的成員。

　　全局變量是 window 對象的屬性。

　　全局函數是 window 對象的方法。（甚至DOM也是window對象）

window.document.getElementById("header");
/*----------- 與此相同 -----------------*/
document.getElementById("header");

瀏覽器窗口的尺寸

window.innerHeight：瀏覽器窗口的內部高度(包括滾動條)
window.innerWidth：瀏覽器窗口的內部寬度(包括滾動條)

或者

document.body.clientHeight：瀏覽器窗口的內部高度(包括滾動條)
document.body.clientWidth：瀏覽器窗口的內部寬度(包括滾動條)

窗口的打開和關閉

window.open("URL") //新建窗口訪問指定的URL
window.close() //關閉當前窗口
window.moveTo() 移動當前窗口
window.resizeTo() 調整當前窗口的尺寸
screen.availWidth 返回屏幕寬帶
screen.availHeight 返回屏幕高度

location

　　獲取當前頁面的地址（URL），並把瀏覽器重定向到新的頁面。

屬性 :

location.href：設置或讀取當前窗口的地址欄信息

方法 :

location.assign("URL")：重新加載新的文檔
location.reload(param)：重載頁面(刷新)，參數默認爲false，表示從緩存中加載，設置爲true，強制從服務器根目錄加載

history

　　保存當前窗口所訪問過的URL

屬性：

history.length：返回當前窗口訪問過的URL數量

方法 :

history.back()：瀏覽器後退按鈕
history.forward()：對應前進按鈕，訪問記錄中的下一個URL
history.go(n)：參數爲number值，翻閱幾條歷史記錄，正值表示前進，負值表示後退

彈窗

有三種彈窗：警告框、確認框、提示框。

alert() // 警告框
confirm() // 確認框
prompt() // 帶輸入框的彈框

alert("內容"); 普通的網頁彈框

confirm("你真的要關閉嗎"); “確定”返回True，“取消”返回flase。

prompt("sometext", "defaultvalue"); 在網頁彈框接收用戶輸入，返回用戶輸入的內容

計時事件

　　通過JavaScript，在一個設定的時間間隔之後來執行代碼。

setInterval

　　週期性定時器，每隔一段時間就執行一次代碼。

var timerID = setInterval(function,interval);

//需求：在控制檯每隔一秒輸出一次“ok”
var taskId=setInterval(function(){
   console.log("ok");
},1000);

參數 :

function : 需要執行的代碼，可以傳入函數名或匿名函數
interval : 時間間隔，默認以毫秒爲單位 1s = 1000ms

返回值 : 返回定時器的ID，用於關閉定時器

setTimeout

　　定時計時器，等待多久之後執行一次代碼，只會執行一次

setInterval("function",milliseconds);

參數：

function：JavaScript函數
milliseconds：間隔的毫秒數

返回：返回定時器的ID，用於關閉定時器

關閉定時器，參數爲定時器函數對象

//開啓超時調用:
var timerId = setTimeout(function,timeout);
//關閉指定id對應的定時器
clearTimeout(timerId);

Cookie

　　Cookie 用於存儲 web 頁面的用戶信息。當web服務器向用戶發送web頁面時，在連接關閉後，服務端不會記錄用戶的信息，Cookie的作用就是用於解決“如何記錄客戶端的用戶信息”

當用戶訪問 web 頁面時，他的名字可以記錄在 cookie 中。
在用戶下一次訪問該頁面時，可以在 cookie 中讀取用戶訪問記錄。

　　當瀏覽器從服務器請求web頁面時，頁面的cookie也會被添加到請求中。服務器通過這種方式來獲取用戶信息。

JavaScript 可以使用 document.cookie 屬性來創建、讀取、及刪除 cookie。

創建Cookie：document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

讀取Cookie：var x = document.cookie;

修改Cookie：document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

刪除Cookie：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

　　刪除 cookie 只需設置 expires 參數爲以前的時間即可；刪除時不必指定 cookie 值。

JavaScript Cookie 實例

在以下實例中，我們將創建 cookie 來存儲訪問者名稱。

首先，訪問者訪問 web 頁面, 他將被要求填寫自己的名字。該名字會存儲在 cookie 中。

訪問者下一次訪問頁面時，他會看到一個歡迎的消息。

在這個實例中我們會創建 3 個 JavaScript 函數:

設置 cookie 值的函數
獲取 cookie 值的函數
檢測 cookie 值的函數

設置 cookie 值的函數

首先，我們創建一個函數用於存儲訪問者的名字：

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

以上的函數參數中，cookie 的名稱爲 cname，cookie 的值爲 cvalue，並設置了 cookie 的過期時間 expires。

該函數設置了 cookie 名、cookie 值、cookie過期時間。

獲取 cookie 值的函數

　　然後，我們創建一個函數用戶返回指定 cookie 的值：

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

cookie 名的參數爲 cname。

創建一個文本變量用於檢索指定 cookie :cname + "="。

使用分號來分割 document.cookie 字符串，並將分割後的字符串數組賦值給 ca (ca = document.cookie.split(';'))。

循環 ca 數組 (i=0;i<ca.length;i++)，然後讀取數組中的每個值，並去除前後空格 (c=ca[i].trim())。

如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。

如果沒有找到 cookie, 返回 ""。

檢測 cookie 值的函數

最後，我們可以創建一個檢測 cookie 是否創建的函數。

如果設置了 cookie，將顯示一個問候信息。

如果沒有設置 cookie，將會顯示一個彈窗用於詢問訪問者的名字，並調用 setCookie 函數將訪問者的名字存儲 365 天：

function checkCookie()
{
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }
}

異常

try：測試代碼塊的異常。
catch:處理異常。
throw：拋出異常
finally：無論是否有觸發異常，該語句都會執行。

try {
    ...    //異常的拋出
} catch(err) {
    ...    //異常的捕獲與處理
} finally {
    ...    //結束處理
}

案例：

<body>

<p>請輸出一個 5 到 10 之間的數字:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">測試輸入</button>
<p id="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值爲空";
        if(isNaN(x)) throw "不是數字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "錯誤: " + err;
    }
}
</script>

</body>

前端——JavaScript

JS使用

文檔內嵌

外部鏈接

JavaScript 輸入和輸出語句

顯示數據

基礎語法

變量

常量

數據類型

數據類型轉換

運算符

邏輯運算符

三目運算符

JS對象

數組 對象

字符串對象 String

正則表達式對象 RegExp

Math 對象

日期對象

流程控制

if結構

循環結構

函數

函數表達式

匿名函數

缺省參數

arguments 對象

調用函數

JSON格式函數

作用域

DOM 文檔對象模型

獲取元素節點

添加/刪除/替換 元素節點

添加

刪除

替換

改變HTML元素

改變元素樣式

使用事件

事件綁定方式

瀏覽器對象模型 BOM

window對象

窗口的打開和關閉

location

history

彈窗

計時事件

setInterval

setTimeout

Cookie

JavaScript Cookie 實例

設置 cookie 值的函數

獲取 cookie 值的函數

檢測 cookie 值的函數

異常

數組對象

添加/刪除/替換元素節點