1、Web API - 简介
Web API 是开发人员的梦想。
- 它可以扩展浏览器的功能
- 它可以极大简化复杂的功能
- 它可以为复杂的代码提供简单的语法
1.1 什么是 Web API？
-
API 指的是应用程序编程接口（Application Programming Interface）。
-
Web API 是 Web 的应用程序编程接口。
-
浏览器 API 可以扩展 Web 浏览器的功能。
-
服务器 API 可以扩展 Web 服务器的功能。
1.2 第三方 API
-
第三方 API 未内置于您的浏览器中。
-
要使用这些 API，您必须从 Web 下载代码。
举例：
①、YouTube API - 允许您在网站上显示视频。
②、Twitter API - 允许您在网站上显示推文。
③、Facebook API - 允许您在网站上显示 Facebook 信息。
2、JavaScript 验证 API
2.1 约束验证 DOM 方法
2.1.1 checkValidity() 方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- required 属性是一个布尔属性。required 属性规定必需在提交表单之前填写输入字段。注意：required 属性适用于下面的 input 类型：text、search、url、tel、email、
password、date pickers、number、checkbox、radio 和 file。 --><input type="number" id="idnum" min="10" max="100" required /><button onclick="javascript language-javascript">MyFunction()">OK</button><p id="demo"></p><script>javascript">function MyFunction() {const inpObj = document.getElementById("idnum");if (!inpObj.checkValidity()) {document.getElementById("demo").innerHTML = inpObj.validationMessage;} else {document.getElementById("demo").innerHTML = inpObj.value;}}</script></body>
</html>2.2 约束验证 DOM 属性
2.3 有效性属性
input 元素的有效性属性包含许多与数据有效性相关的属性：
2.4 实例
2.4.1 rangeOverflow 属性
- 如果元素的值大于其
max属性，则设置为true。
示例：如果输入字段中的数字大于 100（input 元素的 max 属性），则显示一条消息：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="number" id="idnum" min="10" max="100" /><button onclick="javascript language-javascript">MyFunction()">OK</button><p id="demo"></p><script>javascript">function MyFunction() {const inpObj = document.getElementById("idnum");if (inpObj.validity.rangeOverflow) {document.getElementById("demo").innerHTML = inpObj.validationMessage;} else {document.getElementById("demo").innerHTML = inpObj.value;}}</script></body>
</html>3、Web History API
Web History API 提供了访问 windows.history 对象的简单方法。
window.history 对象包含用户访问过的 URL（网站）。
3.1 History back() 方法
back() 方法加载 windows.history 列表中的前一个 URL。
这与单击浏览器中的“后退箭头”相同。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button onclick="javascript language-javascript">MyFunction()">返回</button><script>javascript">function MyFunction() {window.history.back();}</script></body>
</html>3.2 History go() 方法
go() 方法从历史列表中加载一个特定的 URL：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button onclick="javascript language-javascript">MyFunction()">后腿两页</button><script>javascript">function MyFunction() {window.history.go(-2);}</script></body>
</html>
4、Web Storage API、Web Worker API、JavaScript Fetch API
Web Storage API
Web Worker API
JavaScript Fetch API
Web Geolocation API
