JavaScript学习笔记（十二）：JS Web API

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="MyFunction()">OK</button><p id="demo"></p><script>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="MyFunction()">OK</button><p id="demo"></p><script>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="MyFunction()">返回</button><script>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="MyFunction()">后腿两页</button><script>function MyFunction() {window.history.go(-2);}</script></body>
</html>