摘要：本文是重溫基礎系列文章的第十七篇。系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹重溫基礎對象介紹本章節復習的是中的關于相關知識，介紹的比較多。表示在給定的時間的相關設備的位置。所有現代瀏覽器均支持對象和使用。

本文是 重溫基礎 系列文章的第十七篇。
今日感受：挑戰。

系列目錄：

【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理)

【重溫基礎】1-14篇

【重溫基礎】15.JS對象介紹

【重溫基礎】16.JSON對象介紹

本章節復習的是JS中的關于WebAPI相關知識，介紹的API比較多。

前置知識：
需要了解 JS 對象 的相關知識。

API：應用程序接口，是基于編程語言構建的結構，使開發人員更容易地創建復雜的功能。它們抽象了復雜的代碼，并提供一些簡單的接口規則直接使用。

客戶端JavaScript提供很多可用的API，他們本身不是JavaScript語言的一部分，卻建立在JavaScript語言核心的頂部，為使用JavaScript代碼提供額外的超強能力。他們通常分為兩類：

瀏覽器API：

內置于Web瀏覽器，可以從瀏覽器和電腦周圍環境獲取數據，并用于復雜的操作。例如Geolocation API提供了一些簡單的JavaScript結構來獲取位置數據，這種API通常抽象很多復雜邏輯，我們只要調用API即可。

第三方API：

缺省情況下不會內置于瀏覽器，而必須在Wen中某個地方獲取代碼和信息，例如Twitter API可以推送最新推文給我們，它提供一系列第三方API讓我們獲取Twitter的服務和信息。

那么，這些API是如何工作的？
不同的JavaScript的API工作內容不同，但具有以下幾個相同點：

都是基于對象

API通過使用一個或多個JavaScript對象與我們的代碼交互，這些對象作為API使用的數據（包含在對象屬性中）的容器，和API提供的功能（包含在對象的方法中）。
如Geolocation API則是由以下幾個對象組成：

Geolocation, 包含三種控制地理數據檢索的方法。

Position, 表示在給定的時間的相關設備的位置。它包含一個當前位置的Coordinates 對象。還包含了一個時間戳,這個時間戳表示獲取到位置的時間。

Coordinates,包含有關設備位置的大量有用數據，包括經緯度，高度，運動速度和運動方向等。

通常這么使用：

navigator.geolocation.getCurrentPosition(function(options){
    // ... do something
});

都有可識別的入口點

即API的入口位置，如Geolocation API的入口在Navigator.geolocation 屬性, 它返回瀏覽器的 Geolocation 對象，所有有用的地理定位方法都可用。
在文檔對象模型(DOM)的API入口位置更簡單，常常都掛載在Document對象上，或者HTML元素上：

let a = document.createElement("div");// 創建一個新的div元素
let b = document.querySelector("div");// 獲取一個已經存在的div元素
a.textContent = "hi leo!";  // 給a元素設置文本
b.appendChild(a);           // 將a元素添加到b元素下
// 
hi leo!

詳細的后面介紹。

都使用事件來處理狀態的變化

有些特定的API會包含一些事件，當事件觸發，我們便可以運行函數的處理屬性，做一些不同的操作。例如XMLHttpRequest對象的實例，有很多的事件可以調用。

// 簡單寫
const url = "https://www.baidu.com";
const req = new XMLHttpRequest();
req.open("GET", url);
req.responseType = "json";
req.send();
req.onload = function(){
    // ... do something
}

都會在適當位置提供額外的安全機制

主要還是處于安全考慮，提供額外的安全機制，比如常見同源策略，一些特定頁面只能在https協議的網頁工作等。

接下來看看這些API都能實現什么作用。

我們在開發web頁面和應用時，就會經常操作頁面文檔的結構，這里就會大量用到document對象，控制HTML和樣式信息的文檔對象模型（DOM）。
下面貼一張web頁面視圖中的瀏覽器的主要部分（來源MDN）：

介紹：

window：是載入瀏覽器的標簽，JavaScript中用Window對象表示，可以實現很多操作：獲取窗口大小，操作載入窗口的文檔，存儲文檔數據等。

navigator：瀏覽器存在web上的狀態和表示（即用戶代理），JavaScript中用Navigator對象表示，用于獲取對象的一些信息，如：攝像頭的地理信息，用戶偏愛的語言等。

document：是實際載入窗口的頁面，JavaScript中用Document對象表示，可以實現很多文檔操作：獲取DOM元素，修改文本內容，設置新樣式等。

在瀏覽器標簽中當前載入的文檔用文檔對象模型(Document Object Model，簡稱DOM)表示。
這是一個由瀏覽器生成的“樹結構”，使得編程語言可以很容易訪問HTML結構，操作等。

下面是基本的DOM操作：

let a = document.createElement("a");// 1. 創建一個新的a元素
let b = document.querySelector("a");// 2. 獲取一個已經存在的a元素
a.textContent = "進入pingan8787博客";  // 3. 給a元素設置文本
a.; // 4. 給a元素添加跳轉地址
a.style.color = "red";                // 5. 給a元素添加樣式
a.style.backgroundColor = "black";
a.setAttribute("my_class");    // 6. 給a元素添加class類名
b.appendChild(a);              // 7. 將a元素添加到b元素下

這么一個簡單的例子，實際可以看出DOM提供的方法很多，下面分類介紹下這些方法：

DOM HTML操作

改變HTML輸出流：

通過document.write()直接修改HTML輸出流寫內容。

document.write("hello leo");

注意：千萬不要在文檔加載之后使用，否則覆蓋文檔。

改變HTML內容：

通過innerHTML屬性來改變HTML元素的內容：

document.getElementById(id).innerHTML = new HTML;
// 通過ID獲取  （getElementById）
// 通過name屬性（getElementsByName）
// 通過標簽名  （getElementsByTagName）
// 通過類名    （getElementsByClassName）
// 獲取html的方法 （document.documentElement）
// 獲取body的方法 （document.body）
// 通過選擇器獲取一個元素（querySelector）
// 通過選擇器獲取一組元素（querySelectorAll）

例子：

document.getElementById("id1").innerHTML = "hello leo!"

改變HTML屬性：

通過attribute屬性來改變元素的屬性：

document.getElementById(id).attribute = new value

例子：

document.getElementById("id1").src = "leo.png";

詳細的文檔可以查看HTML DOM Document 對象

DOM CSS操作

改變HTML樣式

通過style.styleName屬性修改元素的樣式：

document.getElementById(id).style.property = new style;

例子：

document.getElementById("id1").style.color = "red";
document.getElementById("id1").style.backgroundColor = "green";

注意：style后面的樣式的屬性名只能使用命名小駝峰。

DOM 事件操作

如要對元素做點擊事件的綁定，可以在HTML的onclick事件屬性上綁定方法：

另外可以綁定的事件類型還有很多：

詳細的文檔可以查看HTML DOM Event 對象

DOM 節點操作

創建新的HTML元素

需要先創建一個新元素節點，然后在使用appendChild方法，向一個已存在的元素上追加這個新元素：

// 創建新元素節點
let a = document.createElement("p");
let b = document.createTextNode("新的文本");
a.appendChild(b);

// 獲取已存在元素
let div = document.getElementById("id1");

// 追加新元素
div.appendChild(a);

刪除已有的HTML元素

如果需要刪除HTML元素，就必須先獲得該元素的父元素，再使用removeChild方法刪除：

    
hello leo

let a = document.getElementById("id1");
let b = document.getElementById("id2");
a.removeChild(b);

Window 對象表示瀏覽器中打開的窗口。
Window 對象涉及到的屬性和方法非常多，具體可以查看 Window 對象 比較詳細。
這里一個簡單的例子，實現獲取視窗（顯示文檔的內部窗口）的寬高，并設置給指定的Div元素，并且當我們調整窗口時候，也會及時改變Div的寬高。

let div = document.querySelector("div");
// 獲取寬高
let w = window.innerWidth;
let h = window.innerHeight;
// 設置寬高
div.style.width = w + "px";
div.style.heitgh = h + "px";
// 設置及時調整div寬高
window.onresize = function(){
    w = window.innerWidth;
    h = window.innerHeight;
    div.style.width = w + "px";
    div.style.heitgh = h + "px";
}

這一部分主要復習Ajax（全稱：Asynchronous JavaScript and XML）。
Ajax主要要解決的問題是：避免重復加載刷新整個頁面，因為有時候我們只是小部分數據更新，這時候我們這要刷新這部分的數據，而不是整個頁面。
Ajax不是新的編程語言，而是一種使用現有標準的新方法。

下面看一下Ajax模型圖：

Ajax模型包括使用Web API作為代理來更智能地請求數據，而不僅僅是讓瀏覽器重新加載整個頁面。讓我們來思考這個意義：
比如：我們逛淘寶，搜索或打開商品頁面時，頂部導航來和頁眉頁腳等，都保持不變。
這樣做的好處：

頁面更新更快，減少等待刷新，體驗更好，響應更快。

下載的數據更少，減少帶寬的浪費。

另外為了提高加載速度，網站有時候也會將首次請求和數據存儲在用戶計算機中，下次再請求就直接先使用本地版本，如果內容有更新才會去服務器獲取新數據，原理圖：

XMLHttpRequest 是 AJAX 的基礎。
所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

創建 XMLHttpRequest 對象的語法：

variable=new XMLHttpRequest();
// IE5 和 IE使用 ActiveX 對象：
variable=new ActiveXObject("Microsoft.XMLHTTP");

為了兼容所有瀏覽器（包括IE5 IE6），我們就必須檢查瀏覽器是否支持XMLHttpRequest對象，若支持則創建XMLHttpRequest對象，否則創建ActiveXObject對象。

let my_http;
if (window.XMLHttpRequest){
    // 非 ES5 ES6
    my_http=new XMLHttpRequest();
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        // 網絡請求成功后，執行的操作
    }
  }
}else{
    // ES5 ES6
    my_http=new ActiveXObject("Microsoft.XMLHTTP");
}

向服務器發送請求時，我們可以使用 XMLHttpRequest 對象的 open() 和 send() 方法：

my_http.open(method,url,async);  
my_http.send(string);

參數解釋：
open(method,url,async)方法接收三個參數：

method：請求的類型；GET 或 POST。

url：文件在服務器上的位置。

async：true（異步）或 false（同步）。

send(string)方法接收一個參數：

string：僅用于 POST 請求。

例子：

// GET
my_http.open("GET","http://www.baidu.com",true);
my_http.send();

// POST
my_http.open("POST","http://www.baidu.com",true);
my_http.setRequestHeader(
    "Content-type",
    "application/x-www-form-urlencoded"
);  // 添加 HTTP 頭
my_http.send("name=leo");

如果POST請求的話需要設置HTTP頭：

setRequestHeader(header,value)

參數解釋：
setRequestHeader(header,value)方法接收兩個參數：

header: 規定頭的名稱。

value: 規定頭的值。

接收服務器響應，我們可以使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

responseText：獲得字符串形式的響應數據。

responseXML：獲得 XML 形式的響應數據。

responseText屬性

當服務端的響應不是XML，使用responseText屬性。
若是字符串的響應就可以直接使用。

document.getElementById("id1").inndeHTML = my_http.responseText;

readyState保存著XMLHttpRequest對象的狀態。
我們發送Ajax請求的整個過程中，XMLHttpRequest對象的readyState會改變，當readyState改變的時候會觸發onreadystatechange事件。

XMLHttpRequest對象的三個重要屬性：

通常我們會在readyState等于4且status等于200時候表示響應已就緒，可以執行業務操作：

if (xmlhttp.readyState==4 && xmlhttp.status==200){
    // 網絡請求成功后，執行的操作
}

這里主要介紹的是HTML5新增的canvas元素，JavaScript為canvas添加了很多API，進一步增強canvas。
canvas 元素可以通過JavaScript腳本，在網頁上繪制圖形。
比如,它可以被用來繪制圖形,制作圖片集合,甚至用來實現動畫效果。你可以(也應該)在元素標簽內寫入可提供替代的的代碼內容，這些內容將會在在舊的、不支持canvas元素的瀏覽器或是禁用了JavaScript的瀏覽器內渲染并展現。

詳細完整的課程推薦：

MDN Canvas教程

W3C HTML5 Canvas

下面復習一下canvas的一個使用流程：

創建畫布，規定元素id、寬度和高度

要在網頁中創建 2D 或者 3D 場景，必須在 HTML 文件中插入一個canvas元素，以界定網頁中的繪圖區域。

    臥槽你的瀏覽器竟然不支持 canvas！

在canvas標簽內，寫一些瀏覽器不支持畫布功能時候的提示內容。
畫布默認尺寸為 300 × 150 像素。

獲取畫布上下文，并完成設置

我們需要獲得一個對繪畫區域的特殊的引用（稱為“上下文”）用來在畫布上繪圖。可通過 HTMLCanvasElement.getContext() 方法獲得基礎的繪畫功能，需要提供一個字符串參數來表示所需上下文的類型。
下面創建一個2d畫布：

let ctx = canvas.getContext("2d");

ctx 變量包含一個 CanvasRenderingContext2D 對象，畫布上所有繪畫操作都會涉及到這個對象。
下面將畫布背景涂黑：

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, 200, 100);

首先需要知道一些2D畫布的知識，畫布左上角的坐標是(0, 0)，橫坐標（x）軸向右延伸，縱坐標（y）軸向下延伸。

繪制實線

ctx.lineTo(100,50);  // 繪制目標坐標
ctx.lineWidth = 5;   // 線條寬度
ctx.stroke();  // 繪制實線

繪制矩形

fillRect(x, y, width, height) 繪制一個填充的矩形
strokeRect(x, y, width, height) 繪制一個矩形的邊框
clearRect(x, y, width, height) 清除指定矩形區域，讓清除部分完全透明。
x與y指定了在canvas畫布上所繪制的矩形的左上角（相對于原點）的坐標。
width和height設置矩形的尺寸。

// 實心矩形
ctx.fillStyle = "rgb(255, 0, 0)"; // 矩形顏色
ctx.fillRect(50, 50, 100, 150);   // 矩形起止坐標

// 空心矩形
ctx.strokeStyle = "rgb(255, 255, 255)";// 矩形邊框顏色
ctx.strokeRect(25, 25, 175, 200);// 矩形起止坐標

繪制路徑

可以通過路徑來實現復雜的圖形，下面整理了一些常用到的方法：

beginPath()：在畫筆當前所在位置開始繪制一條路徑。在新的畫布中，畫筆起始位置為 (0, 0)。

moveTo()：將畫筆移動至另一個坐標點，不記錄、不留痕跡，只將畫筆“跳”至新位置。

fill()：通過為當前所繪制路徑的區域填充顏色來繪制一個新的填充形狀。

stroke()：通過為當前繪制路徑的區域描邊，來繪制一個只有邊框的形狀。

路徑也可和矩形一樣使用 lineWidth 和 fillStyle / strokeStyle 等功能。

ctx.fillStyle = "rgb(255, 0, 0)"; // 設置填充顏色
ctx.beginPath();      // 開始
ctx.moveTo(50, 50);   // 移動到結束點的坐標
// .. 可以在到處移動
ctx.fill();           // 繪制

繪制圓形

arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認為順時針）來生成。
arcTo(x1, y1, x2, y2, radius)
根據給定的控制點和半徑畫一段圓弧，再以直線連接兩個控制點。

arc方法，該方法有六個參數：

x,y為繪制圓弧所在圓上的圓心坐標。

radius為半徑。

startAngle以及endAngle參數用弧度定義了開始以及結束的弧度。

anticlockwise是布爾值，為true時，是逆時針方向，否則順時針方向。

這些都是以x軸為基準。

注意：arc()函數中表示角的單位是弧度，不是角度。角度與弧度的js表達式:
弧度=(Math.PI/180)*角度。

cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

繪制文本

fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，繪制的最大寬度是可選的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置繪制文本邊框，繪制的最大寬度是可選的.

ctx.strokeStyle = "white";
ctx.lineWidth = 1;
ctx.font = "36px arial";
ctx.strokeText("hello leo !", 50, 50);

ctx.fillStyle = "red";
ctx.font = "48px georgia";
ctx.fillText("hello leo !", 50, 150);

另外還有一些有樣式的文本，可以使用這些屬性：

font = value

當前繪制的文本字體.默認是 10px sans-serif。

textAlign = value

文本對齊選項. 可選的值包括：start, end, left, right or center. 默認值是 start。

textBaseline = value

基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認值是 alphabetic。

direction = value

文本方向?？赡艿闹蛋ǎ?b>ltr, rtl, inherit。默認值是 inherit。

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello leo ", 0, 100);

繪制圖片

drawImage(image, x, y)

其中 image 是 image 或者 canvas 對象，x 和 y 是其在目標 canvas 里的起始坐標。

let img = new Image();
img.src = "leo.png";
img.onload = function(){
    ctx.drawImage(img, 50, 50);
};

drawImage方法還有更多參數：

ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);

第一個參數不變，為圖片引用。

參數 2、3 表示裁切部分左上頂點的坐標，參考原點為原圖片本身左上角的坐標。原圖片在該坐標左、上的部分均不會繪制出來。

參數 4、5 表示裁切部分的長、寬。

參數 6、7 表示裁切部分左上頂點在畫布中的位置坐標，參考原點為畫布左上頂點。

參數 8、9 表示裁切部分在畫布中繪制的長、寬。本例中繪制時與裁切時面積相同，你也可以定制繪制的尺寸。

詳細完整的課程推薦：

MDN Canvas教程

W3C HTML5 Canvas

HTML5提供了用于文檔中嵌入富媒體的元素和標簽，通過元素自帶的API來控制視頻和音頻的播放搜索等。

當前，video 元素支持三種視頻格式：Ogg/MPEG4和WebM。
簡單使用：

連接不同視頻：

之間插入的內容是供不支持 video 元素的瀏覽器顯示的。
標簽的屬性：

另外我們可以為視頻創建簡單的播放/暫停和調整尺寸的控件，這里需要使用play()和 pause() 還有兩個屬性：paused 和 width。
更多方法可以查看 HTML5 video - 方法、屬性以及事件

audio 元素能夠播放聲音文件或者音頻流。
當前，audio 元素支持三種視頻格式：Ogg Vorbis/MP3和Wav。
簡單使用：

control 屬性供添加播放、暫停和音量控件。
之間插入的內容是供不支持 audio 元素的瀏覽器顯示的。
連接不同音頻：

標簽的屬性：

現代web瀏覽器會提供一些在客戶端存儲用戶數據的方法，只要用戶允許，可以隨時取出使用。
使用客戶端存儲API可以存儲的數據量是優先的，具體取決于瀏覽器或者用戶設置 。
存儲的方式可以這樣分類：

傳統方法：cookies

cookie使用比較久了，過時，存在各種安全問題，而且無法存儲復雜數據，可能唯一的優勢就是對非常老舊瀏覽器支持，如果業務需要，也可以使用cookie

新流派：Web Storage 和 IndexedDB

現代瀏覽器所提供的更加簡單有效的客戶端儲存API。

未來：Cache API

一些現代瀏覽器支持新的 Cache API。這個API是為存儲特定HTTP請求的響應文件而設計的，它對于像存儲離線網站文件這樣的事情非常有用，這樣網站就可以在沒有網絡連接的情況下使用。緩存通常與 Service Worker API 組合使用，盡管不一定非要這么做。

web storageAPI只需存儲簡單的 鍵/值對的數據（限制為字符串、數字等類型），并在需要的時候檢索其值。
web storageAPI提供了兩種在客戶端存儲數據的新方法：

localStorage : 一直保存數據，甚至到瀏覽器關閉又開啟后也是這樣

sessionStorage : 只要瀏覽器開著，數據就會一直保存 (關閉瀏覽器時數據會丟失)

localStorage方法：

localStorage.setItem(key, value)：存儲一個數據。

localStorage.getItem(key)：讀取一個數據。

localStorage.removeItem(key)：刪除一個數據。

localStorage.setItem("name","leo");
let leo = localStorage.getItem("name");
leo ; // "leo"
localStorage.removeItem("name");

關閉瀏覽器以后數據還在。

sessionStorage方法：

sessionStorage.setItem(key, value)：存儲一個數據。

sessionStorage.getItem(key)：讀取一個數據。

sessionStorage.removeItem(key)：刪除一個數據。

sessionStorage.setItem("name","leo");
let leo = sessionStorage.getItem("name");
leo ; // "leo"
sessionStorage.removeItem("name");

關閉瀏覽器以后數據不在。

并不是所有的API都是內置在瀏覽器中，有一些可能是其他網站（如谷歌，Facebook等）提供的API，讓開發者調用，從而使用他們的服務和數據等。

API通過使用一個或多個JavaScript對象與我們的代碼交互，這些對象作為API使用的數據（包含在對象屬性中）的容器，和API提供的功能（包含在對象的方法中）。
例如我們調用谷歌地圖的Google Maps APIs ，需要先引入他們開放的JavaScript庫。

然后就可以這么使用：

navigator.geolocation.getCurrentPosition(function(options){
    // ... do something
});

如Geolocation API則是由以下幾個對象組成：

Geolocation, 包含三種控制地理數據檢索的方法。

Position, 表示在給定的時間的相關設備的位置。它包含一個當前位置的Coordinates 對象。還包含了一個時間戳,這個時間戳表示獲取到位置的時間。

Coordinates,包含有關設備位置的大量有用數據，包括經緯度，高度，運動速度和運動方向等。

MDN JavaScript指南

W3school JavaScript

本部分內容到這結束

歡迎關注微信公眾號【前端自習課】每天早晨，與您一起學習一篇優秀的前端技術博文 .