Web Development Articles - Page 502 of 1049

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

Following is the code for looping over regular expression matches in javaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result,    .sample {       font-size: 18px;       color: blueviolet;       font-weight: 500;    }    .sample {       color: red;    } Looping over regex matches There is a cat lying besides the cricket bat and chasing the rat CLICK HERE Click on the above button to match words ... Read More

In this tutorial, we will learn about the lastIndex property in javascript. In addition to this, we will also learn about how we can use it to manage matches within a string The lastIndex property is a property given by regex objects in JavaScript. It represents the index at which the next search will start within a string passed in the regex, or in simple terms, the index at which to start the next match in a string. When using a regex object with methods like exec(), compile(), etc, the lastIndex property is automatically updated to the index after the ... Read More

A symbol in JavaScript is a primitive data type, introduced in ES6 version update, that represents an immutable and unique identifier. Unlike other primitive types like strings, booleans, numbers, etc, symbols are guaranteed to be unique. This implies that even if two symbols have the same content, they are going to be distinct (separate) entities and not equal to each other. Symbols are primarily used to avoid naming conflicts when adding properties to objects. In this Tutorial, we will learn about symbols in JavaScript. Along with that we will also learn how we can use them to add properties in ... Read More

Following is the code to override derived properties in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result,    .sample {       font-size: 18px;       font-weight: 500;       color: rebeccapurple;    }    .result {       color: red;    } Override derived properties Before overriding After overriding CLICK HERE Click on the above button to override the above properties    let sampleEle = document.querySelector(".sample");    let resEle ... Read More

Use document.getElementById().innerHTML for this. Following is the JavaScript code −Example Document    function display(){       var storedValue = document.getElementById('getValue').innerHTML.value="This is the       value";       console.log("The value is==="+storedValue);    } To run the above program, save the file name anyName.html(index.html) and right click on the file and select the option open with live server in VS Code editor.Following is the output. When you will click the mouse and place the arrow key, you will get the following output.The snapshot is as follows −

The onchange event triggers when an element changes. You need to use below syntax.onchange="yourFunctionName(this);"Example Live Demo Document Choose Color    function showValue(c){       console.log(c.value);    } To run the above program, save the file name anyName.html(index.html) and right click on the file and select the option open with live server in VS code editor.OutputAfter clicking the input type color, you will get the color value in console −