Welcome back to our series of JavaScript tutorial series! In our previous chapter, we took a look at using ES6 modules to have clean and nice code organization and management. In this chapter, we would cover a few of the fundamental Web APIs available with us in JavaScript to add many exciting features to web applications inside browsers, including the alteration of the DOM, network requests, and data on the local storage.
DOM API
The DOM API represents the structure of a document as a tree data structure called DOM permits dynamic modification of the content, structure and its look or style.
Let us have a glance at some of the fundamental operations of the DOM:
Locating elements document.getElementById() or document.querySelector() methods are used to locate elements in the web page
Changing Content text content of an element can be changed with element.textContent or element.innerHTML
Adding and removing elements first, an element is created and then placed at a position desired. This can remove them through parentNode.removeChild()
Reacting to user action event handlers can be added using element.addEventListener(), in case of any actions like mouse click
Example Dynamic update of content
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic Content Example</title>
</head>
<body>
<button id="updateButton">Update Content</button>
<p id="textContent">This is some text.</p>
<script>
document.getElementById('updateButton').addEventListener('click', () => {
document.getElementById('textContent').textContent = "Content Updated!";
});
</script>
</body>
</html>
Fetch API
The Fetch API offers a powerful and flexible way to make network requests. It’s a Promise-based API for loading resources from the network.
Using the Fetch API
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Request failed:', error));
Example: Loading and Displaying Data
<script>
async function loadData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log('Data loaded successfully:', data);
} catch (error) {
console.error('Data loading failed:', error);
}
}
loadData();
</script>
Web Storage API
The Web Storage API provides two storage mechanisms, localStorage and sessionStorage, for storing data in the user’s browser.
Using localStorage
- Storing data:
localStorage.setItem('key', 'value'); - Reading data:
localStorage.getItem('key'); - Deleting data:
localStorage.removeItem('key');
Example: Using localStorage to Store User Settings
<script>
// Save settings
localStorage.setItem('theme', 'dark');
// Retrieve settings
const theme = localStorage.getItem('theme');
console.log('Current theme:', theme);
// Delete settings
localStorage.removeItem('theme');
</script>
By the end of this article you should understand some of the fundamental Web APIs at the core of JavaScript — namely how to manipulate a page’s content with the DOM, make network requests with the Fetch and store data locally with the Web Storage. It is important that you continue to practice these topics, as they form the basis for any rich interactive web applications. Well, that’s all for now about JavaScript. In the next lesson, we will cover some of the advanced features of JavaScript. See you again!
