JavaScript Web API that every developer should know

What is JavaScript?

JavaScript is a client-side scripting language.

Why is JavaScript the most popular?

What is a Web API?

API – Application program interface.

There are three apis: Web API, Browser API, and Server API.

There are six JavaScript Web apis

  • Form API
  • History API
  • Fetch API
  • Storage API
  • Geo Location API
  • Web Worker API

1) Web Form API

The Web Form API or Javascript Validation API allows the user to validate input with different attributes and two methods.

Verification method:

CheckValidity () : The checkValidity function helps check whether a given input value is valid or invalid.

SetCustomValidity () : setCustomValidity helps to set the Validation Message property to the input element.

Here’s an example:

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 = documentDocument.getelementbyid (" mark ");if(! inpObj.checkValidity()) {documentDocument.getelementbyid (" message "). The innerHTML = inpObj. Html.validationmessage; }}</script>
Copy the code

Validation Properties :

CustomError: the customErrror property helps to check whether the customError message has been set.

PatternMismatch: The patternMismatch property helps to check the user input value and return true if the given input does not match the pattern.

RangeOverflow: The rangeOverflow property helps check the user input value and returns true if the given input reaches the maximum property value.

RangeUnderflow: The rangeUnderflow property helps to check user input values and returns true if given input reaches an input value less than the min property value.

StepMismatch: The stepMismatch property helps to check the user input value and return true if the given step property fails.

**tooLong: The **tooLong attribute helps to check user input values and returns true if a given user input value reaches a value greater than the Max Length attribute value.

TypeMismatch: The typeMismatch attribute helps check the input type and returns true if a given input type value is invalid.

ValueMissing: The valueMissing attribute helps to check the input value and returns true if the given input value is null.

Valid: The valid attribute helps to check whether all of the above attributes are valid and returns true if all of them are valid.

Here’s a little chestnut:

RangeOverflow <input id= "mark" type= "number" Max ="100 
 
 {codeBox}Copy the code

2) Web History API

The Web History API helps manage your Web History

The Web History API stores the user’S URL navigation History in the browser.

The Web History API has one property and three methods.

History back()

The History back method helps navigate from the History list to the last accessed URL.

Example:

<button onclick="goBack()">Go Back</button>

<script>
function goBack() {
window.history.back();
}
</script>{codeBox}
Copy the code

History go()

The History Go method helps load the History list of the URL form.

The History Go method works based on negative number.

Example:

< goTo button onclick = "()" > Go Back2 Pages</button>

<script>
function goTo() {
window.history.go(-2);
}
</script>{codeBox}
Copy the code

History forward()

The History Forward method helps load the next URL from the History list.

The History Forward method is valid only if you are at the previous URL.

Example:

<button onclick="goForward()">Go Forward</button>

<script>
function goForward() {
window.history.forward();
}
</script>{codeBox}
Copy the code

History.length

The history. length attribute helps count the number of urls in the History list.

History records can store a maximum of 50 urls.

Example:

console.log(history.length); {codeBox}Copy the code

3) Fetch API

The Fetch API helps make HTTP requests to the web server.

Compared to XMLHttpRequest, the Fetch API is very easy.

Promise Example :

fetch(file_url)
.then(a= > a.text())
.then(b= >viewData(b)); {codeBox}Copy the code

Async Await Example :

async function getData(uri) {
let a = await fetch(uri);
let b = awaita.text(); viewData(b); {codeBox} }Copy the code

For Storage API, Web Worke API, Geo Location API please visit – Storage API, Web Worke API, Geo Location API for information about these.

I think this information will help you.

Thanks for reading — and don’t forget to share and comment