In this tutorial, we will learn how to toggle a boolean value in javascript. In addition to this, we will also learn how we can use it for various web application features that require toggling a certain piece of state or value. Toggling a boolean in JavaScript entails altering its value from true to false or vice versa. Toggling booleans can be helpful in a variety of situations, such as changing a boolean value to initiate an action or to toggle between states or the visibility of an element. Toggling can be implemented using different methods like the NOT operator, ... Read More

In this post, we are going to learn how to set up an auto−size text area in JavaScript. This text area will be able to change its height automatically depending on the content within it. Auto−size text in JavaScript is a helpful feature that can be used to edit multiple lines of text. The text can automatically change its height depending on the content inside it. The default behavior of textarea doesn’t allow this, but we can create it by using the input event listener over it. Let’s understand how to adjust the height of the text area element dynamically ... Read More

Automatically filling in a field in JavaScript is a common need in web forms, where one field copies the value from another. This feature eliminates the need to write the same information in one or more fields. This is useful in real-life scenarios, such as filling in the forms where the user has entered the permanent address and has to add a temporary address. If both the addresses are the same, using the autofilling feature, he can automatically copy the permanent address into the temporary address. This article explains how to create autofill features in JavaScript. Core Concept: Copying ... Read More

This article will teach us how to use the Javascript location protocol properties to implement the web application's protocol. The read−only location.protocol property in javascript returns the protocol specified in the current webpage's URL. It offers details on the URL's protocol, including "http:", "https:", "file:", etc. Common protocol values that are utilised by numerous web apps include − http − It represents the Hypertext Transfer Protocol (HTTP). https − It represents the Hypertext Transfer Protocol Secure (HTTPS). file − It represents the File Transfer Protocol (FTP). ftp − It represents the File Transfer Protocol (FTP). data − It represents the data ... Read More

In this post, we will discover how to use javascript's preventDefault and return false functions to override an event's default behaviour. The two most popular JavaScript methods for stopping an event's default behaviour are preventDefault() and return false. Let’s understand both of the concepts below − preventDefault() Return false The preventDefault() method is a function available on event objects in JavaScript Return false is not a function, but a javascript statement It helps to stop a certain event's default behaviour. It not only prevents the default behavior but also stops the event from ... Read More

The focus of items on a web page can be determined via focus events, which we will learn about in this article. The numerous browser−provided events that are triggered when an HTML element gains or loses attention are known as focus events in JavaScript. These occasions can be utilised in a number of contexts, for as in response to user actions like clicking on an input field. We can track when a web page element obtains or loses focus with the aid of focus events. There are three main focus events in JavaScript − Focus − This event gets ... Read More

The page load events in JavaScript are fired when the page loads or unloads. Following are the events −EventDescriptionDOMContentLoadedThis is fired when the dom tree has been built but external resources like stylesheets ,images, etc are still not loaded.LoadIt is fired when the browser fully loads all the resources.BeforeunloadIt is fired before the page and resources are being unloaded and can be used to confirm if the user really wants to leave.UnloadIt is fired when the page is fully unloaded.Following is the code for load events in JavaScript −Example Live Demo Document    body {   ... Read More

The scroll event in JavaScript is fired when the user interacts with a scrollbar by moving it up or down.Following is the code for scroll events in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       height: 150vh; /*To have a scrollbar*/    }    .result{       font-size: 18px;       color: blueviolet;       font-weight: 500;    } Scroll events in JavaScript Scroll the scrollbar to see some text in the above paragraph    let resEle = document.querySelector(".result");    window.addEventListener("scroll", () => {       resEle.innerHTML = "The scroll event has fired";    }); OutputOn scrolling down a little −

The touch events in JavaScript are fired when a user interacts with a touchscreen device.Following are the pointer event propertiesEventDescriptiontouchstart.It is fired when the touch point is placed on the touch surface.touchmoveIt is fired when the touch point is moved along the touch surface.touchendIt is fired when the touch point is removed from the touch surface.touchcancelIt is fired when the touch point has been disruptedFollowing is the code for touch events in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result,    .sample ... Read More

The key-events happen whenever a user interacts with keyboard. There are mainly three key event types − keydown, keypress and keyup.EventDescriptionOnkeydownThis event fires when the user is pressing a keyOnkeypressThis event fires when the user presses the keyOnkeyupThis event fires when the user releases the key.Following is the code for key events in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 18px;       color: blueviolet;       font-weight: 500;    } ... Read More