Found 9291 Articles for Object Oriented Programming

Higher-Order Arrow Functions in JavaScript.

AmitDiwan
Updated on 16-Jul-2020 13:40:12

305 Views

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

Disabling arrow key in text area using JavaScript.

AmitDiwan
Updated on 16-Jul-2020 13:35:40

229 Views

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

Setting full screen iframe in JavaScript?

AmitDiwan
Updated on 16-Jul-2020 13:33:03

1K+ Views

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 −

How to autofill a field in JavaScript same as another?

AmitDiwan
Updated on 16-Jul-2020 13:27:49

1K+ Views

Following is the code to autofill a field in JavaScript same as another −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    input {       padding: 5px;       margin: 5px;       display: block;    }    button {       padding: 3px;    } Autofill a filled textbox same as another Same as above    let BtnEle = document.querySelector(".Btn");    let addrEle = document.querySelectorAll(".addr");    BtnEle.addEventListener("click", () => {       addrEle[1].value = addrEle[0].value;    }); OutputOn typing the address in first text box −On clicking the ‘Same as above’ button −

Explain load events in JavaScript?

AmitDiwan
Updated on 16-Jul-2020 13:19:58

656 Views

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

Explain Scroll events in JavaScript.

AmitDiwan
Updated on 16-Jul-2020 13:18:16

268 Views

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 −

Explain touch events in JavaScript

AmitDiwan
Updated on 16-Jul-2020 13:16:23

5K+ Views

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

Explain Key-events in JavaScript?

AmitDiwan
Updated on 16-Jul-2020 13:13:21

1K+ Views

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

Looping over matches with JavaScript regular expressions

AmitDiwan
Updated on 16-Jul-2020 12:59:28

701 Views

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

How to override derived properties in JavaScript?

AmitDiwan
Updated on 16-Jul-2020 12:48:16

279 Views

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

Advertisements