Front End Technology Articles - Page 414 of 745

In this article, we will demonstrate how to capture the mouse position in JavaScript at regular intervals and log or use this data for various purposes. Capturing mouse positions after every given interval refers to a program or functionality where the current position of the mouse pointer is tracked at regular time intervals. This can be useful in scenarios like debugging, interactive applications, or visualizing user movement on a web page. Use Cases Imagine you want to monitor user activity on a web page and record the mouse position every second. This can be useful for: ... Read More

In this article, we will learn to use the prompt() function in Javascript. The prompt() method in JavaScript allows developers to collect user input through a pop-up dialog box. What is the prompt() Method in JavaScript? The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK. This dialog box is displayed using a method called prompt(). Syntax var userInput = prompt("Message", "Default value"); The following are the parameters of the ... Read More

The JavaScript BOM Window screen contains the information about the client’s screen.The BOM window screen properties are −PropertiesDescriptionscreen.widthReturn the user screen width in pixels.screen.heightReturn the user screen height in pixels.screen.availWidthReturns the user screen width in pixels without taking into account the interface features.screen.availHeightReturns the user screen height in pixels without taking into account the interface features.screen.colorDepthReturns the bits used to display one colorscreen.pixelDepthRetrurns the screen pixel depthFollowing is the code for the JavaScript BOM Window screen −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result {    font-size: 18px; ... Read More

In this article, we will learn about different basic array methods in JavaScript. Adding and Removing Elements Some basic JavaScript array methods for adding and removing elements − Method Description ... Read More

The JavaScript arrayBuffer.slice() method returns a new arrayBuffer whose contents are copy of the another arrayBuffer from begin, inclusive till end, exclusive.Following is the code for the arrayBuffer.slice() method −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample, .result {       font-size: 18px;       font-weight: 500;       color: red; } .result {    color: black; } JavaScript arrayBuffer.slice() property Original array buffer: Sliced array buffer: CLICK HERE Click on the above button to slice the array buffer to make ... Read More

The JavaScript File WebAPI file.type property indicated the media type of the file.Following is the code for the File WebApi File.type property −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result {    font-size: 18px;    font-weight: 500;    color: red; } JavaScript file.type property Upload a file using the above input type to get its file type let resultEle = document.querySelector(".result"); document .querySelector(".fileInput") .addEventListener("change", (event) => {    resultEle.innerHTML +=    "File name = " + event.target.files[0].name + "";    resultEle.innerHTML += "File type = " + event.target.files[0].type; }); OutputOn clicking the “Choose file” button −

The JavaScript File WebAPI file.size property returns the size of file in bytes.Following is the code for the File WebApi File.size property −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result {    font-size: 18px;    font-weight: 500;    color: red; } JavaScript file.size property Upload a file using the above input type to get its file size let resultEle = document.querySelector(".result"); document .querySelector(".fileInput") .addEventListener("change", (event) => {    resultEle.innerHTML += "File name = " + event.target.files[0].name + ‘;    resultEle.innerHTML ... Read More

To detect the pressed arrow key in JavaScript, the code is as follows;Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample {    font-size: 18px;    font-weight: 500; } Detecting the pressed arrow key Press any arrow key to know which arrow key has been pressed let fillEle = document.querySelector(".sample"); document.body.addEventListener("keydown", (event) => {    switch (event.keyCode) {       case 37:          fillEle.innerHTML = "Left key pressed";       break;       case 38:          fillEle.innerHTML = "Up key pressed";       break;       case 39:          fillEle.innerHTML = "Right key pressed";       break;       case 40:          fillEle.innerHTML = "Down key pressed";       break;    } }); OutputOn pressing any of the arrow key −

Following is the code for detecting a mobile browser in JavaScript −Example Live Demo Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample {    font-size: 18px;    font-weight: 500; } Detecting a mobile browser CLICK HERE Click on the above button to see if it is a mobile device or not let fillEle = document.querySelector(".sample"); let date = new Date(); let primitiveDef = date[Symbol.toPrimitive]("default"); let primitiveNum = date[Symbol.toPrimitive]("number"); document.querySelector(".Btn").addEventListener("click", () => {    var checkMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);    if (checkMobile) {       fillEle.innerHTML = "This ... Read More

The JavaScript date.@@toPrimitive() function converts the date object into a primitive value.Following is the code for date formats in JavaScript −Example Live Demo Document body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample {    font-size: 18px;    font-weight: 500; } JavaScript date.@@toPrimitive() functiont CLICK HERE Click on the above button to see the date as primitive value let fillEle = document.querySelector(".sample"); let date = new Date(); let primitiveDef = date[Symbol.toPrimitive]("default"); let primitiveNum = date[Symbol.toPrimitive]("number"); document.querySelector(".Btn").addEventListener("click", () => {    fillEle.innerHTML += "Hint = default :" + primitiveDef + "";    fillEle.innerHTML += "Hint = number :" + primitiveNum; }); OutputOn clicking the “CLICK HERE” button −