WebAPI 介绍

目标：

了解什么是 WebAPI。
掌握 WebAPI 的类型与用途。
学习 WebAPI 在 JavaScript 中的应用。

一、什么是 WebAPI

WebAPI（Web Application Programming Interface，Web应用程序编程接口）是浏览器和操作系统提供的一组接口，用于让网页与浏览器或操作系统之间进行交互。通过这些API，JavaScript 可以访问并操作浏览器的不同功能，例如 DOM（文档对象模型）、网络请求、文件系统等。

WebAPI 提供了对浏览器功能的控制，允许开发者通过 JavaScript 与浏览器进行交互，进而实现动态网页和丰富的用户体验。

WebAPI 主要通过 JavaScript 进行调用，JavaScript 与 WebAPI 之间有着紧密的关系。

二、JavaScript 与 WebAPI 的关系

JavaScript 是 Web 开发的脚本语言，WebAPI 是浏览器提供的一组接口。JavaScript 通过调用 WebAPI，能够实现很多现代 Web 应用中的功能。

例如，通过 JavaScript，开发者可以使用 WebAPI 执行以下操作：

操作网页内容（如修改 DOM）。
发起 HTTP 请求（如通过 fetch API 进行网络请求）。
控制浏览器行为（如获取用户位置、访问文件系统等）。
处理浏览器的事件（如点击、滚动等）。

WebAPI 可以通过浏览器环境直接使用，JavaScript 与 WebAPI 之间并没有必然的代码关系，但它们通常是配合使用的。

三、WebAPI 的分类与常见示例

WebAPI 可以分为多个类别，每个类别提供了不同的功能。常见的 WebAPI 分类如下：

1. DOM（文档对象模型）API

DOM 是浏览器提供的一个接口，允许开发者通过 JavaScript 操控网页内容和结构。通过 DOM API，开发者可以：

获取、修改和删除网页中的元素。
操控 HTML 属性和文本内容。
监听和响应事件（如点击、键盘输入等）。

常见方法：

document.getElementById()：获取页面元素。
document.createElement()：创建新的 HTML 元素。
element.addEventListener()：为元素添加事件监听器。

// 修改网页标题
document.title = '新标题';

// 给按钮添加点击事件
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('按钮被点击了！');
});

2. Fetch API

Fetch 是一种用于发起网络请求（HTTP 请求）的 WebAPI，常用于从服务器获取数据（如 JSON 格式的数据）并处理响应。

常见方法：

fetch()：发送 HTTP 请求并返回一个 Promise 对象，处理异步响应。

// 使用 fetch 发起 GET 请求
fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

3. Canvas API

Canvas API 允许 JavaScript 在 HTML <canvas> 元素上绘制图形。通过它可以实现动态绘图、游戏开发等功能。

常见方法：

getContext()：获取绘制上下文。
beginPath()：开始绘制路径。
moveTo()：设置路径的起点。
lineTo()：绘制直线。

// 在 Canvas 上绘制简单的矩形
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

4. Geolocation API

Geolocation API 用于获取用户的地理位置信息。它可以帮助 Web 应用提供与用户位置相关的服务（例如地图、定位功能）。

常见方法：

navigator.geolocation.getCurrentPosition()：获取用户的当前位置。

// 获取用户的位置信息
navigator.geolocation.getCurrentPosition(function(position) {
    console.log('纬度:', position.coords.latitude);
    console.log('经度:', position.coords.longitude);
}, function(error) {
    console.log('获取位置失败:', error);
});

5. LocalStorage 和 SessionStorage API

LocalStorage 和 SessionStorage 提供了一种存储数据的机制，允许数据保存在浏览器中。它们的主要区别在于：

LocalStorage：数据长期保存在浏览器中，除非主动删除。
SessionStorage：数据仅在当前浏览器会话中有效，关闭浏览器窗口后数据会丢失。

常见方法：

localStorage.setItem()：存储数据。
localStorage.getItem()：获取存储的数据。
localStorage.removeItem()：删除数据。

// 存储用户信息
localStorage.setItem('username', 'Alice');

// 获取用户信息
let username = localStorage.getItem('username');
console.log(username);  // 输出：Alice

6. WebSocket API

WebSocket API 允许客户端与服务器进行双向通信，常用于实现实时聊天、通知等功能。

常见方法：

new WebSocket()：创建 WebSocket 连接。
ws.send()：发送消息。
ws.onmessage()：接收消息。

// 创建 WebSocket 连接
let ws = new WebSocket('ws://example.com/socket');

// 发送消息
ws.send('Hello Server');

// 接收消息
ws.onmessage = function(event) {
    console.log('收到服务器消息:', event.data);
};

7. Notification API

Notification API 允许网页发送浏览器通知，让用户看到网页之外的提示信息。

常见方法：

Notification.requestPermission()：请求用户授权显示通知。
new Notification()：创建并显示通知。

// 请求通知权限
Notification.requestPermission().then(function(permission) {
    if (permission === 'granted') {
        new Notification('你有新消息！');
    }
});