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() 方法
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="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。 --><inputtype="number"id="idnum"min="10"max="100"required/><buttononclick="MyFunction()">OK</button><pid="demo"></p><script>functionMyFunction(){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 属性），则显示一条消息：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title></head><body><inputtype="number"id="idnum"min="10"max="100"/><buttononclick="MyFunction()">OK</button><pid="demo"></p><script>functionMyFunction(){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
。
这与单击浏览器中的“后退箭头”相同。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title></head><body><buttononclick="MyFunction()">返回</button><script>functionMyFunction(){
window.history.back();}</script></body></html>
3.2 History go() 方法
go()
方法从历史列表中加载一个特定的 URL：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title></head><body><buttononclick="MyFunction()">后腿两页</button><script>functionMyFunction(){
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
本文转载自: https://blog.csdn.net/wz_1992/article/details/140848786
版权归原作者 文阿花 所有， 如有侵权，请联系我们删除。
版权归原作者 文阿花 所有， 如有侵权，请联系我们删除。