Javascript Web API's That Every Developer Should Know

What is JavaScript? 

 

    JavaScript is a client-side scripting programing language.

 

    Why JavaScript most popular ?

What is Web API?

 

    API - Application Program Interface.

 

    There are three types of API's Web API, Browser API, Server API.

There are 6 types of JavaScript Web API :

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

 

1) Web Form API

 

    Web Form API or Javascript validation API allows to user validate inputs with different properties and two methods.   

Validation Methods : 

 

    checkValidity()

 

        checkValidity function helps to check given input value is valid or invalid.

    setCustomValidity()
 

        setCustomValidity helps to  set the validation message property to input elements  

Example of Method:

 

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>{codeBox}

 

Validation Properties :

    customError :

        

        customErrror property helps to check the custom error message is set or not

    patternMismatch :

 

        patternMismatch property helps to check the user input value and return true when given input does not match the pattern.

         
    rangeOverflow :

        rangeOverflow property helps to check the user input value and return true when given input reach max attribute value.

        

 

    rangeUnderflow :

        rangeUnderflow property helps to check the user input value and return true when given input reach input values less than min attribute value.

 

    stepMismatch :

        stepMismatch property helps to check the user input value and return true when given step attribute get failed.

 

    tooLong :

        tooLong property helps to check the user input value and return true when given user input value reaches greater than of max Length attribute value.

 

    typeMismatch :

        typeMismatch property helps to check the input type and return true when given input type value is invalid.

 

    valueMissing :

        valueMissing property helps to check the input value and return true when given input value is empty.

 

    valid :

        valid  property helps to check the all above properties are valid and return true if all property are valid.

 

Example of property: 

 

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 helps manage your web page history

 

    Web History API stores the user URL navigation history in the browser.

 

    Web History API has 1 property and 3 methods.

 

    History back()

        History back method helps to navigate to last visited URL from history list.

    Example : 

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

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

 

   History go()

        History go method helps to load the url form history list.

         

        History go method work based on negative number

 

    Example :

 

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

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

    History forward()

 

        History forward method helps to load the next URL from the history list.

        History forward only work when your on previous URL.

    Example : 

 

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

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

    History.length

 

        History.length attribute helps to count of number URL from the history list.

        History store maximum 50 URL only.

 

    Example : 

 

console.log(history.length);{codeBox}

 

3) Fetch API

 

    Fetch API helps to make the HTTP request to the webserver.

 

    Fetch API is very easy when compares to XMLHttpRequest.

 

    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}
}

 

For Storage API , Web Worke API , Geo Location API Visit  - Storage API , Web Worke API , Geo Location API

 

I think this information is helpful to you.

 

Thanks for reading - Don't Forgot To Share & Comment

Any suggestion or queries please comment, our team will response asps.

 

You may like this : 

 

         CSS Selectors That Every Developer Must Know

         HTML API's That Every Developer Should Know

         Best Chrome Extensions for Front End Developers - Part 2

         Best Chrome Extensions for Front End Developers