Introduction to web API and how JavaScript is concerned.. 30daysofjavascript ==> Day 22
API stands for Application Programming Interface, it is a powerful tool that can be useful in breaking down complex code and achieving a whole bunch. Before we shoot at the definition or rather explain it in more technical terms, we might as well explain using activities in our daily life.
Let us say you visited the restaurant, got a table and got offered a menu of choices to order from. The kitchen/backend is the part of the “system” that will prepare your order. What is missing is the critical link to communicate your order to the kitchen and deliver your food back to your table. That’s where the waiter or API comes in. The waiter is the messenger — or API — that takes your request or order and tells the kitchen — the system — what to do. Then the waiter delivers the response back to you; in this case, it is the food and that is the response you can visibly see (frontend).
So how the hell is JavaScript concerned with this whole story? JavaScript is known to be the bedrock of all web products i.e. static websites and web applications. And for functionalities to be delivered to the user we need to be able to send requests and get responses to the functionalities that JavaScript has promised.
Definition: The API is a middle man that stands between two applications usually the frontend and the backend. Since they are different applications, it helps with the communication and understanding, hence, taking requests and delivering response.
There is quite a lot of different web APIs, check here for reference. But we are probably only going to be concerned with a few.
Browser APIs
They are web APIs built inside your browser, it allows you to access certain data and give you solutions to complex operations.
Third-party APIs
This API does not come with the browser and requires that it is fetched, connected or brought in from somewhere else. An example of this is the Unsplash API, which allows you to fetch images that could be either random or have some sort of pattern.
JavaScript Validation API
This API is useful in validating details that are put into forms. There are two main methods of this API and these are:
- checkValidity(): Returns true if an input element contains valid.
- data.setCustomValidity(): Sets the validationMessage property of an input element.
Constraint Validation DOM Properties
- validity - Contains Boolean properties related to the validity of an input element.
- validationMessage - Contains the message a browser will display when the validity is false.
- willValidate - Indicates if an input element will be validated.
Check out full explanation on validation DOM properties here and here.
What is this about?
30daysofjavascript is a series of writing on how I learn to code in JavaScript. These episodes are as simplified as possible and for beginners like me, I hope you find JavaScript less confusing throughout this episode. Thank you as always and see you in the next episode. Check out every episode I have written here.
