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

最新推荐文章于 2025-09-11 19:34:36 发布

原创最新推荐文章于 2025-09-11 19:34:36 发布 · 1.7k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #学习

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>