JavaScript Canvas Summary: in this tutorial, you’ll learn about HTML Canvas and how to use JavaScript to draw on the canvas. Introduction to the HTML5 Canvas element HTML5 features the <canvas> element that allows you to draw 2D graphics using JavaScript. The <canvas> element requires at least two attributes: width and height that specify the…
Read more
JavaScript FileReader Summary: in this tutorial, you’ll learn about the JavaScript FileReader API and how to use it to implement the file upload. Introduction to the JavaScript FileReader API When you drag and drop files to the web browser or select files to upload via the file input element, JavaScript represents each file as…
Read more
JavaScript Drag and Drop Summary: in this tutorial, you’ll learn about the JavaScript drag and drop API and how to use it to implement a simple drag&drop application. Introduction to JavaScript Drag and Drop API HTML5 formally introduced the drag-and-drop specification. Most modern web browsers have implemented native drag-and-drop based on the HTML5 spec. By…
Read more
JavaScript FormData Summary: in this tutorial, you’ll learn about the JavaScript FormData API and how to post the FormData using fetch API. Introduction to the JavaScript FormData API Suppose you have a subscription form with two fields name and email. <form id=”subscription”> <h1>Subscribe</h1> <div id=”message”></div> <div class=”field”> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name” placeholder=”Enter your…
Read more
JavaScript IndexedDB Summary: in this tutorial, you’ll learn about the IndexedDB and how to use it to persistently store data inside the browser. What is indexedDB IndexedDB is a large-scale object store built into the browser. The IndexedDB allows you to persistently store the data using key-value pairs. The values can be any JavaScript type…
Read more
JavaScript sessionStorage Summary: in this tutorial, you’ll learn how to use the JavaScript sessionStorage to store data only for a session. Introduction to JavaScript sessionStorage The sessionStorage object stores data only for a session. It means that the data stored in the sessionStorage will be deleted when the browser is closed. A page session lasts…
Read more
JavaScript localStorage Summary: in this tutorial, you’ll learn about the Storage type and how to use the JavaScript localStorage to store persistent data. Introduction to the Storage type The Storage type is designed to store name-value pairs. The Storage type is an Object with the following additional methods: setItem(name, value) – set the value for…
Read more
JavaScript Cookies Summary: in this tutorial, you’ll learn about HTTP cookies and how to use JavaScript to manage the cookies effectively. What is a cookie An HTTP cookie is a piece of data that a server sends to a web browser. Then, the web browser stores the HTTP cookie on the user’s computer and sends…
Read more
Web API This section introduces you to the Web APIs specified in the HTML5 specification. These Web APIs allow you to use the modern functions provided by the web browsers in your web applications. Section 1. Client Storage Cookies – learn about HTTP cookies and how to use JavaScript to manage cookies more effectively. localStorage –…
Read more
JavaScript Countdown Timer Summary: in this tutorial, you’ll learn how to develop a reusable JavaScript countdown timer. What is a countdown timer A countdown timer is a virtual clock running on a landing page. And it counts down from a certain date to indicate the beginning (or the end) of an event. On eCommerce websites,…
Read more