Undeclared − It occurs when a variable which hasn’t been declared using var, let or const is being tried to access.Undefined − It occurs when a variable has been declared using var, let or const but isn’t given a value.Following is the code for undeclared and undefined in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 18px;       font-weight: 500;       color: blueviolet;    } Undeclared vs Undefined ... Read More

Following is the code for validating a file size in JavaScript while uploading −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-size: 18px;       font-weight: 500;       color: blueviolet;    } Validating a file size while uploading Upload a file using the above file input type    let BtnEle = document.querySelector(".Btn");    let resEle = document.querySelector(".result");    let fileEle = document.querySelector(".file");    function validateFile() {       if ... Read More

JavaScript treats functions as objects and allow us to pass functions as parameter to another function and even return functions from other functions. In JavaScript, the functions are first class functions i.e. we can store them in variable, objects and array. The higher order arrow functions can take function, return them or do both.Following is the code for higher order arrow functions in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result,    .sample {       font-size: 18px;       ... Read More

Following is the code for disabling arrow key in text area in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-weight: 500;       font-size: 18px;       color: blueviolet;    } Disabling arrow keys in a text area Hello world this is some sample text inside the text area element Disable arrows Click on the above button to disable scrolling using arrows in the above textArea    let ... Read More

Following is the code for setting full screen iframe in JavaScript −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .result {       font-weight: 500;       font-size: 18px;       color: blueviolet;    }    .fullScreen {       width: 100vw;       height: 100vh;    } Setting full screen iframe Fullscreen Click on the above button to make the iframe go fullscreen    let BtnEle = document.querySelector(".Btn");    let frameEle = document.querySelector(".frame");    BtnEle.addEventListener("click", () => {       frameEle.className = "fullScreen";    }); OutputOn clicking the ‘Fullscreen’ button −

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

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