JavaScript WebAPI 介绍

最新推荐文章于 2024-05-06 09:07:21 发布

2301_76689122

最新推荐文章于 2024-05-06 09:07:21 发布

阅读量97

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_76689122/article/details/134776178

版权

什么是 Web API？

API 指的是应用程序编程接口（Application Programming Interface）。JavaScript WebAPI是一组由浏览器提供的API（应用程序编程接口），用于与浏览器环境进行交互和访问浏览器功能。WebAPI允许开发者通过JavaScript代码来操作DOM（文档对象模型）、处理事件、进行网络通信、操作浏览器存储等。

约束验证 DOM 方法

DOM（Document Object Model）是一种用于表示和操作HTML、XML和XHTML文档的标准化方式。它将文档结构化为一个树形结构，称为DOM树。DOM树中的每个元素、属性和文本都被表示为一个对象，这些对象可以通过JavaScript等编程语言进行访问和操作。

DOM树由多个节点组成，包括元素节点、属性节点、文本节点等。每个节点都有相应的属性和方法，可以通过这些属性和方法来获取和修改节点的内容、样式和结构。DOM树的根节点是document对象，它表示整个文档。其他节点都是从根节点开始逐级嵌套的。

DOM树的结构反映了HTML文档的嵌套关系和层次结构。通过DOM，我们可以使用JavaScript等编程语言来访问和操作HTML文档的各个部分，例如通过获取元素节点来修改元素的样式、内容等。DOM提供了一种方便的方式来操作文档，使开发者可以动态地修改和更新文档的内容和结构。

JavaScript 验证 API

约束验证 DOM 方法

checkValidity()方法

<input id="id1" type="number" min="100" max="300" required>
<button οnclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

约束验证 DOM 属性

有效性属性

nput 元素的有效性属性包含许多与数据有效性相关的属性：

实例

如果输入字段中的数字大于 100（input 元素的 max 属性），则显示一条消息：

<input id="id1" type="number" max="100">
<button οnclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text = "Value OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  }
}
</script>

如果输入字段中的数字小于 100（input 元素的 min 属性），则显示一条消息：

<input id="id1" type="number" min="100">
<button οnclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text = = "Value OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  }
}
</script>

Web History API

Web History API 提供了访问 windows.history 对象的简单方法。

window.history 对象包含用户访问过的 URL（网站）。

所有浏览器都支持 Web History API：

History back() 方法

back() 方法加载 windows.history 列表中的前一个 URL。

这与单击浏览器中的“后退箭头”相同。

实例

<button οnclick="myFunction()">后退</button>

<script>
function myFunction() {
  window.history.back();
}
</script>

History go() 方法

go() 方法从历史列表中加载一个特定的 URL：

实例

<button οnclick="myFunction()">后退两页</button>

<script>
function myFunction() {
  window.history.go(-2);
}
</script>

History 对象属性

History 对象方法

Web Storage API

Web Storage API 是一种用于在浏览器中存储和检索数据的简单语法。他非常容易使用：

实例

localStorage.setItem("name", "Bill Gates");
localStorage.getItem("name");

localStorage 对象

localStorage 对象提供对特定网站的本地存储的访问。它允许您存储、读取、添加、修改和删除该域的数据项。

存储的数据没有到期日期，并且在浏览器关闭时不会被删除。

这些数据将在几天、几周和几年内均可用。

setItem() 方法

localStorage.setItem() 方法将数据项存储在 storage 中。

它接受一个名称和一个值作为参数：

实例

localStorage.getItem("name");

sessionStorage 对象

sessionStorage 对象与 localStorage 对象相同。

不同之处在于 sessionStorage 对象存储会话的数据。

当浏览器关闭时，数据会被删除。

实例

sessionStorage.getItem("name");

setItem() 方法

sessionStorage.setItem() 方法将数据项存储在存储（storage）中。

它接受一个名称和一个值作为参数：

实例

sessionStorage.setItem("name", "Bill Gates");

getItem() 方法

sessionStorage.getItem() 方法从存储（storage）中检索数据项。

它接受一个名称作为参数：

实例

sessionStorage.getItem("name");

Storage 对象属性和方法

Web Storage API 相关页面

Web Worker API

Web Worker 是在后台运行的 JavaScript，不会影响页面的性能。

什么是 Web Worker？

Web Worker是一种在Web应用程序中运行后台任务的技术。它允许在单独的线程中执行JavaScript代码，独立于主线程，从而避免阻塞用户界面。

Web Worker可以用于执行一些耗时的任务，如大量计算、数据处理、图像处理等。通过将这些任务放在后台线程中运行，Web Worker可以提高应用程序的响应性能，并防止用户界面在执行耗时任务时冻结。

Web Worker有两种类型：Dedicated Worker和Shared Worker。Dedicated Worker仅在创建它的页面内使用，而Shared Worker可以被多个页面共享。这使得多个页面可以同时与同一个后台线程进行通信和协作。

通过使用Web Worker，开发人员可以更好地优化Web应用程序的性能，并提供更好的用户体验。

检查 Web Worker 浏览器

在创建 web worker 之前，请检查用户的浏览器是否支持它：

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

创建 Web Worker 文件

现在，让我们在外部 JavaScript 中创建我们的 Web Worker。

在这里，我们创建了一个重要的脚本。该脚本存储在 "demo_workers.js" 文件中：

et i = 0;

function timedCount() {
  i ++;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

创建 Web Worker 对象

现在我们有了 web worker 文件，我们需要从 HTML 页面调用它。

以下代码行检查 worker 是否已存在，如果不存在，它会创建一个新的 web worker 对象并运行 "demo_workers.js" 中的代码：

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

然后我们可以发送和接收来自 web worker 的消息。

向 web worker 添加一个 "onmessage" 事件侦听器。

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

当 Web Worker 发布消息时，将执行事件侦听器中的代码。来自 Web Worker 的数据存储在 event.data 中。

终止 Web Worker

当 web worker 对象被创建时，它会继续监听消息（即使在外部脚本完成之后）直到它被终止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

重用 Web Worker

如果将 worker 变量设置为 undefined，则在它终止后，您可以重用以下代码：

w = undefined;

完整的 Web Worker 实例代码

我们已经在 .js 文件中看到了 Worker 代码。下面是 HTML 页面的代码：

实例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button οnclick="startWorker()">Start Worker</button>
<button οnclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Web Worker 和 DOM

由于 Web Worker 位于外部文件中，因此他们无法访问以下 JavaScript 对象：

window 对象
document 对象
parent 对象JavaScript Fetch API

JavaScript Fetch API

Fetch API 实例

下面的例子获取文件并显示内容：

实例

fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));

由于 Fetch 基于 async 和 await，因此上面的例子这么写可能更容易理解：

实例

async function getText(file) {
  let x = await fetch(file);
  let y = await x.text();
  myDisplay(y);

甚至可以更好：请使用易于理解的名称而不是 x 和 y：

实例

async function getText(file) {
  let myObject = await fetch(file);
  let myText = await myObject.text();
  myDisplay(myText);
}

Web Geolocation API

定位用户的位置

HTML Geolocation API 用于获取用户的地理位置。

由于这可能会损害隐私，除非用户批准，否则位置不可用。

使用 Geolocation API

getCurrentPosition() 方法用于返回用户的位置。

下面的例子返回用户位置的纬度和经度：

实例

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

例子解释：

检查是否支持 Geolocation
如果支持，请运行 getCurrentPosition() 方法。如果没有，则向用户显示一条消息
如果 getCurrentPosition() 方法成功，则返回一个 coordinates 对象给参数 (showPosition) 中规定的函数
showPosition() 函数输出纬度和经度

上面的例子是一个非常基本的地理定位脚本，没有错误处理。

处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。如果无法获取用户的位置，它规定要运行的函数：

实例

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

在地图中显示结果

如需在地图中显示结果，您需要访问地图服务，例如 Google 地图。

在下面的例子中，返回的纬度和经度用于在 Google 地图中显示位置（使用静态图像）：

实例

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;

  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

Location-specific 信息

此页面演示了如何在地图上显示用户的位置。

Geolocation 对于特定于位置的信息也非常有用，例如：

最新的本地信息
显示用户附近的兴趣点
逐向导航（Turn-by-turn navigation）(GPS)

getCurrentPosition() 方法 - 返回数据

getCurrentPosition() 方法在成功时返回一个对象。会始终返回纬度、经度和精度属性。如果可用，则返回其他属性：

Geolocation 对象 - 其他有趣的方法

Geolocation 对象还有其他有趣的方法：

watchPosition() - 返回用户的当前位置，并随着用户移动（如汽车中的 GPS）继续返回更新的位置。
clearWatch() - 停止 watchPosition () 方法。

下面的例子展示了 watchPosition() 方法。你需要准确的 GPS 设备来测试（比如智能手机）：

实例

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

下是一些常见的JS Web API：

DOM API：用于操作和控制HTML和XML文档的API。它允许开发人员通过JavaScript来访问和修改文档的元素、属性和样式。
XMLHttpRequest API：用于在后台与服务器进行异步通信的API。它允许开发人员发送HTTP请求并接收来自服务器的响应，从而实现动态更新页面内容的功能。
Fetch API：提供了一种更现代和强大的方式来进行网络请求。它使用Promise对象来处理异步操作，并提供了更灵活和可扩展的功能。
Geolocation API：用于获取用户设备的地理位置信息。它允许开发人员通过JavaScript来获取用户的经纬度坐标，并根据这些信息来创建基于地理位置的应用程序。
Canvas API：用于在网页上绘制图形和动画的API。它提供了一系列的绘图方法和属性，使开发人员能够在网页上创建各种图形效果。
Web Storage API：用于在浏览器中存储和检索数据的API。它提供了两种存储方式：localStorage和sessionStorage，开发人员可以使用这些API来存储和获取数据，以实现持久性和会话性的数据管理。
Web Workers API：允许在后台线程中运行JavaScript代码，从而提高Web应用程序的性能和响应能力。它可以将一些计算密集型任务移至后台线程，以避免阻塞主线程。

这些API提供了丰富的功能和交互性，使开发人员能够创建功能强大、交互性高的Web应用程序。通过使用这些API，开发人员可以实现更好的用户体验，并提供更多的功能和服务。

2301_76689122

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript WebAPI 介绍

API 指的是应用程序编程接口（ApplicationProgrammingInterface）。JavaScript WebAPI是一组由浏览器提供的API（应用程序编程接口），用于与浏览器环境进行交互和访问浏览器功能。WebAPI允许开发者通过JavaScript代码来操作DOM（文档对象模型）、处理事件、进行网络通信、操作浏览器存储等。
复制链接

扫一扫