Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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
You can use the concept of value(). Following is the JavaScript code −Example Live Demo Document FirstNumber SecondNumber: Add Two Nnumbers The addition is: function add() { var f = parseInt(document.getElementsByName('input1')[0].value);` var s =parseInt(document.getElementsByName('input2')[0].value); var result = f+s; document.getElementsByName('display')[0].value= result; } 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.OutputOn clicking the button, the value will be displayed in the textbox. The snapshot is as follows −
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 −
Following is the JavaScript code to make a format like ABC-1234 −Example Live Demo Document ABC1234 function joinTheDashSymbol(m, r1,r2,r3,r4,r5) { if (r1) return [r1,r2,r3].join('-'); else return [r4,r5].join('-'); } $(".formatting").text(function(i, words) { words = words.replace(/^(\d{3})(\d{3})(\d{4})|([A-Z]{3})(\d{4})$/, joinTheDashSymbol); return words; }); 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.Output