写点什么

每个开发人员都应该知道的 JavaScript Web API

用户头像
Regan Yue
关注
发布于: 38 分钟前
每个开发人员都应该知道的 JavaScript Web API

每个开发人员都应该知道的 JavaScript Web API

什么是 JavaScript?

JavaScript 是一种客户端脚本编程语言。


为什么 JavaScript 最受欢迎?

什么是 Web API?

API — 应用程序接口。


API 有 Web API、Browser API、Server API 三种。

有六种 JavaScript Web API

  • Form API

  • History API

  • Fetch API

  • Storage API

  • Geo Location API

  • Web Worker API

1) Web Form API

Web Form API 或者 Javascript validation API 允许用户验证具有不同属性和两种方法的输入。

验证方法:

checkValidity() : checkValidity 函数能够帮助检查给定的输入值是有效还是无效。


setCustomValidity() : setCustomValidity 有助于将验证消息属性(the validation message property)设置为 input 元素。


举个例子:


checkValidity()<input id=”mark” type=”number” min=”10" max=”100" required><button onclick=”check()”>OK</button><p id=”message”></p><script>function check() {const inpObj = document.getElementById(“mark”);if (!inpObj.checkValidity()) {document.getElementById(“message”).innerHTML = inpObj.validationMessage;}}</script>
复制代码

Validation Properties :

customError : customErrror 属性有助于检查自定义错误消息是否被设置了。


patternMismatch : patternMismatch 属性有助于检查用户输入值并在给定输入与模式不匹配时返回 true。


rangeOverflow : rangeOverflow 属性有助于检查用户输入值并在给定输入达到最大属性值时返回 true。


rangeUnderflow : rangeUnderflow 属性有助于检查用户输入值,并在给定输入达到小于 min 属性值的输入值时返回 true。


stepMismatch : stepMismatch 属性有助于检查用户输入值并在给定的 step 属性失败时返回 true。


**tooLong : **tooLong 属性有助于检查用户输入值,并在给定的用户输入值达到大于 max Length 属性值时返回 true。


typeMismatch : typeMismatch 属性有助于检查输入类型并在给定的输入类型值无效时返回 true。


valueMissing : valueMissing 属性有助于检查输入值并在给定输入值为空时返回 true。


valid : valid 属性有助于检查上述所有属性是否有效,如果所有属性都有效,则返回 true。


举个小栗子:


rangeOverflow<input id=”mark” type=”number” max=”100"><button onclick=”check()”>OK</button><p id=”demo”></p><script>function check() {let text = “Mark OK”;if (document.getElementById(“mark”).validity.rangeOverflow) {text = “Mark is too large”;}}</script>{codeBox}
复制代码

2) Web History API

Web History API 可帮助管理您的网页历史记录


Web History API 将用户 URL 导航历史存储在浏览器中。


Web History API 有 1 个属性和 3 个方法。


History back()


History back 方法有助于从历史列表中导航到上次访问的 URL。


例子:


<button onclick="goBack()">Go Back</button>
<script>function goBack() {window.history.back();}</script>{codeBox}
复制代码


History go()


History go 方法有助于加载 url 表单历史列表。


History go 方法是基于 negative number 工作的。


例子:


<button onclick=”goTo()”>Go Back 2 Pages</button>
<script>function goTo() {window.history.go(-2);}</script>{codeBox}
复制代码


History forward()


History forward method 帮助从历史列表中加载下一个 URL。


History forward 方法仅在您处于先前的 URL 时才有效。


例子:


<button onclick="goForward()">Go Forward</button>
<script>function goForward() {window.history.forward();}</script>{codeBox}
复制代码


History.length


History.length 属性有助于统计历史列表中的 URL 数量。


历史记录最多只能存储 50 个 URL。


例子:


console.log(history.length);{codeBox}
复制代码

3) Fetch API

Fetch API 有助于向网络服务器发出 HTTP 请求。


与 XMLHttpRequest 相比,Fetch API 是非常容易的。


Promise Example :


fetch(file_url).then(a => a.text()).then(b => viewData(b));{codeBox}
复制代码


Async Await Example :


async function getData(uri) {let a = await fetch(uri);let b = await a.text();viewData(b);{codeBox}}
复制代码


感谢阅读——别忘了分享和评论

发布于: 38 分钟前阅读数: 4
用户头像

Regan Yue

关注

还未添加个人签名 2020.08.12 加入

对Go、Python、网络安全、区块链感兴趣. · 华为云云享专家

评论 (1 条评论)

发布
用户头像
欢迎各位留言~
35 分钟前
回复
没有更多了
每个开发人员都应该知道的 JavaScript Web API