-
JavaScript Event Loop: microtasks and macrotasks
The execution flow of browser JavaScript relies on an event loop. It is essential for optimization and the correct architecture. In this cover, you will first find the theory and then the practical applications. Event Loop Event loop has a straightforward concept. There exists an endless loop when the engine of JavaScript waits for tasks, runs them and then…
-
JavaScript Selection and Range
In this chapter, we are going to explore selection in the document and in form fields such as <input>. JavaScript is capable of getting the existing selection, selecting or deselecting partially or totally, and so on. Range Range is the basic concept of selection. It encompasses a pair of boundary points such as range start and…
-
JavaScript Mutation Observer
A built-in object that observes a DOM element, firing a callback in case of modifications is known as MutationObserver. Let’s start at the syntax and then cover use cases to show where it can be especially handy. The Mutation Observer Syntax MutationObserveris simple in usage. The first step should be creating an observer using a callback-function, like this: The next…
-
JavaScript Resource Loading: onload and onerror
The browser helps to track the loading of external resources, such as pictures, scripts and more. Two primary events are used for that purpose: Loading a Script Imagine that you should load a third-party script and call a function residing there, as illustrated below: To run the function declared inside that script, you should wait…
-
Scripts: async, defer
The scripts are heavier in modern browsers than in HTML: the download size is larger, and it takes more time to process. Once the browser loads HTML meets a <script>…</script> tag, it won’t be able to continue setting up the DOM. The script should be executed by it right now. The same scenario works for the external scripts. In…
-
JavaScript Page:DOMContentLoaded, load, beforeunload, unload
Today, browsers sometimes suspend pages or abort them entirely, in case the system resources are limited. Luckily, there are modern lifecycle hooks that help to handle such interventions without affecting the user experience. There are three significant events in the framework of an HTML page lifecycle: Each of the events above may be useful on a specific purpose: Further,…
-
JavaScript Forms: event and method submit
As we already know, forms are an extremely significant part of HTML, JavaScript, and of course, Web Platform. The reason is that it enables the user interaction with the page: it helps the user to search anything on the site, trigger filters or send information. This chapter is dedicated to the research of event and method submit in JavaScript.…
-
JavaScript Events: change, input, cut, copy, paste
In this chapter, we are going to cover different events that accompany data updates. Among them are events such as change, input, cut, copy and paste. Let’s dive into some details. Event: change When the element has finished changing the change event triggers. For text inputs, it indicates that the event triggers when it loses…
-
JavaScript Focusing: focus/blur
Focusing on an element generally considers “preparing to accept the data here”. So, it’s the moment that one can run the code to initialize the required functionality. An element receives a focus at the moment the user clicks on it or presses the keyboard Tab key. Also, an HTML autofocus can be used: it puts the focus into an element…
-
JavaScript Form Properties and Methods
The method property is targeted at setting or returning the value of the method attribute in a form. The method attribute indicates the way of sending form-data. The latter is sent to the page, specified in the action attribute. Navigation: Form and Elements Document forms are the components of the specific collection, known as document.forms. It…