掌握Web API，開發常見的頁面交互功能（進階一）

學習目標:

• 掌握API和Web API的概念
• 掌握常見的瀏覽器提供的API的調用方式
• 能經過API開發常見的頁面交互功能
• 可以利用搜索引擎解決問題

---

Web API

API的概念
API（Application Programming Interface,應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工做機制的細節。

• 任何開發語言都有本身的API
• API的特徵輸入和輸出(I/O)
• API的使用方法(console.log())

Web API的概念

瀏覽器提供的一套操做瀏覽器功能和頁面元素的API(BOM和DOM)
此處的Web API特指瀏覽器提供的API(一組方法)，Web API在後面的課程中有其它含義

掌握常見的瀏覽器提供的API的調用方式

MDN-Web API

JavaScript的組成

---

ECMAScript - JavaScript的核心

定義了javascript的語法規範
JavaScript的核心，描述了語言的基本語法和數據類型，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關

BOM - 瀏覽器對象模型

一套操做瀏覽器功能的API
經過BOM能夠操做瀏覽器窗口，好比：彈出框、控制瀏覽器跳轉、獲取分辨率等

DOM - 文檔對象模型

一套操做頁面元素的API
DOM能夠把HTML看作是文檔樹，經過DOM提供的API能夠對樹上的節點進行操做

BOM

BOM的概念
BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨立於內容的、能夠與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中表明瀏覽器窗口的Window對象是BOM的頂層對象，其餘對象都是該對象的子對象。
咱們在瀏覽器中的一些操做均可以使用BOM的方式進行編程處理，
好比：刷新瀏覽器、後退、前進、在瀏覽器中輸入URL等

BOM的頂級對象window

window是瀏覽器的頂級對象，當調用window下的屬性和方法時，能夠省略window
注意：window下一個特殊的屬性 window.name

對話框

• alert()
• prompt()
• confirm()

頁面加載事件

onload

window.onload = function () {
  // 當頁面加載完成執行
  // 當頁面徹底加載全部內容（包括圖像、腳本文件、CSS 文件等）執行
}

onunload

window.onunload = function () {
  // 當用戶退出頁面時執行
}

定時器

setTimeout()和clearTimeout()
在指定的毫秒數到達以後執行指定的函數，只執行一次

// 建立一個定時器，1000毫秒後執行，返回定時器的標示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定時器的執行
clearTimeout(timerId);

setInterval()和clearInterval()

定時調用的函數，能夠按照給定的時間(單位毫秒)週期調用函數

// 建立一個定時器，每隔1秒調用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

// 取消定時器的執行
clearInterval(timerId);

location對象

location對象是window對象下的一個屬性，時候的時候能夠省略window對象
location能夠獲取或者設置瀏覽器地址欄的URL

URL

統一資源定位符 (Uniform Resource Locator, URL)

• URL的組成

  scheme://host:port/path?query#fragment
  scheme:通訊協議

  經常使用的http,ftp,maito等

  host:主機

  服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。

  port:端口號

  整數，可選，省略時使用方案的默認端口，如http的默認端口爲80。

  path:路徑

  由零或多個'/'符號隔開的字符串，通常用來表示主機上的一個目錄或文件地址。

  query:查詢

  可選，用於給動態網頁傳遞參數，可有多個參數，用'&'符號隔開，每一個參數的名和值用'='符號隔開。例如：name=zs

  fragment:信息片段

  字符串，錨點.

location有哪些成員？

• 使用chrome的控制檯查看
• 查MDN
  MDN

• 成員

  • assign()/reload()/replace()
  • hash/host/hostname/search/href……

history對象

• back()
• forward()
• go()

navigator對象

• userAgent

經過userAgent能夠判斷用戶瀏覽器的類型

• platform

經過platform能夠判斷瀏覽器所在的系統平臺類型.

---

DOM

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標誌語言的標準編程接口。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱爲DOM。Document Object Model的歷史能夠追溯至1990年代後期微軟與Netscape的「瀏覽器大戰」，雙方爲了在JavaScript與JScript一決生死，因而大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了很多專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使很多網頁使用非微軟平臺及瀏覽器沒法正常顯示。DOM便是當時蘊釀出來的傑做。

DOM又稱爲文檔樹模型

• 文檔：一個網頁能夠稱爲文檔
• 節點：網頁中的全部內容都是節點（標籤、屬性、文本、註釋等）
• 元素：網頁中的標籤
• 屬性：標籤的屬性

---

DOM常常進行的操做

• 獲取元素
• 動態建立元素
• 對元素進行操做(設置其屬性或調用其方法)

• 事件(什麼時機作相應的操做)

---

獲取頁面元素

根據id獲取元素

var div = document.getElementById('main');
console.log(div);

// 獲取到的數據類型 HTMLDivElement，對象都是有類型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

根據標籤名獲取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

根據name獲取元素*

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根據類名獲取元素

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根據選擇器獲取元素

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

• 總結

  掌握

  getElementById()
  getElementsByTagName()

  瞭解

  getElementsByName()
  getElementsByClassName()
  querySelector()
  querySelectorAll()

事件

事件：觸發-響應機制
Event接口表示在DOM中發生的任何事件，一些是用戶生成的（例如鼠標或鍵盤事件），而其餘由API生成。

事件三要素

• 事件源:觸發(被)事件的元素
• 事件類型:事件的觸發方式(例如鼠標點擊或鍵盤點擊)
• 事件處理程序:事件觸發後要執行的代碼(函數形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代碼會在box被點擊後執行');  
};

---

屬性操做

非表單元素的屬性

href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

innerHTML和innerText

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我會生成爲標籤</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不會生成爲標籤</p>';
console.log(box.innerText);

HTML轉義符
" "
‘ '
& &
< < //less than 小於

>   // greater than  大於

空格  
© ©

---

表單元素屬性

• value 用於大部分表單元素的內容獲取(option除外)
• type 能夠獲取input標籤的類型(輸入框或複選框等)
• disabled 禁用屬性
• checked 複選框選中屬性
• selected 下拉菜單選中屬性

自定義屬性操做

• getAttribute() 獲取標籤行內屬性
• setAttribute() 設置標籤行內屬性
• removeAttribute() 移除標籤行內屬性
• 與element.屬性的區別: 上述三個方法用於獲取任意的行內屬性。

樣式操做

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

類名操做

var box = document.getElementById('box');
box.className = 'clearfix';

---

建立元素的三種方式

document.write()

document.write('新設置的內容<p>標籤也能夠生成</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新內容<p>新標籤</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

性能問題

• innerHTML方法因爲會對字符串進行解析，須要避免在循環內屢次使用。
• 能夠藉助字符串或數組的方式進行替換，再設置給innerHTML
• 優化後與document.createElement性能相近

節點操做

var body = document.body;
var div = document.createElement('div');
body.appendChild(div);

var firstEle = body.children[0];
body.insertBefore(div,firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);

節點層級

重點講父子屬性，兄弟屬性畫圖講解

var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

• 注意
  childNodes和children的區別，childNodes獲取的是子節點，children獲取的是子元素
  nextSibling和previousSibling獲取的是節點，獲取元素對應的屬性是nextElementSibling和previousElementSibling獲取的是元素

  nextElementSibling和previousElementSibling有兼容性問題，IE9之後才支持

• 總結

  節點操做，方法

  appendChild()
    insertBefore()
    removeChild()
    replaceChild()

  節點層次，屬性

  parentNode
    childNodes
    children
    nextSibling/previousSibling
    firstChild/lastChild

---

事件詳解

註冊/移除事件的三種方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('點擊後執行');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('點擊後執行');
}

事件的三個階段

1. 捕獲階段
2. 當前目標階段
3. 冒泡階段
   事件對象.eventPhase屬性能夠查看事件觸發時所處的階段

事件對象的屬性和方法

• event.type 獲取事件類型
• clientX/clientY 全部瀏覽器都支持，窗口位置
• pageX/pageY IE8之前不支持，頁面位置
• event.target || event.srcElement 用於獲取觸發事件的元素
• event.preventDefault() 取消默認行爲

阻止事件傳播的方式

• 標準方式 event.stopPropagation();
• IE低版本 event.cancelBubble = true; 標準中已廢棄

---

經常使用的鼠標和鍵盤事件

• onmouseup 鼠標按鍵放開時觸發
• onmousedown 鼠標按鍵按下觸發
• onmousemove 鼠標移動觸發
• onkeyup 鍵盤按鍵按下觸發
• onkeydown 鍵盤按鍵擡起觸發