Front End Technology Articles - Page 139 of 652

Unpacking array elements means assigning array element values to the new variables. We can assign every element to the separate variables, or we can assign some elements to the separate variables, and for the remaining elements, we can create a new array. In this tutorial, we will learn to unpack array elements into separate variables using JavaScript. Syntax Users can follow the syntax below to unpack the array elements into separate variables. let array = [element1, element2, element3, element4]; let [a, b, c, d] = array; In the above syntax, a variable contains the value of element1, ... Read More

Many web applications allow users to upload a file. Also, it shows the file content with the filename after trimming the file extension. Furthermore, sometimes we require to store the file's content in the database with the filename without extension as a key. So, various use cases require us to use the file name of the uploaded file without extension. Here, we will learn multiple ways to trim the file extension from the string using JavaScript. Use the array.split(), array.pop() and array.join() method Every file name contains the file extension after the last dot in the file name. ... Read More

Here, we will learn to swap the key and value of the JSON element using JavaScript. In JavaScript, an object stores the key-value pairs. So, we can swap the key and value as we swap two normal variables. In this tutorial, we will learn different approaches to swapping all the key values of JSON elements using JavaScript. Use the for loop We can iterate through the keys of the JSON object using for loop. After that, we can access the value from the object using the key. So, we can swap every key and value in the object. ... Read More

Sometimes, we require to get all the dates between the given date range. In this tutorial, we will take two dates and find all dates between two dates. Also, we will store all dates in the array. Here, we will learn three approaches to storing all dates in an array present between given two dates in JavaScript. Use the while loop and setDate() method We can use the while loop for iteration and the setDate() method to set dates in the date object. On every iteration of the while loop, we can increase the date by one ... Read More

Sometimes, we require to map keys to particular values using some data structure in JavaScript. For example, storing the user details in the key value pairs in JavaScript is useful. We can use different data structures, such as objects or maps in JavaScript, to store data in the key-value format. Use the objects to store a key => value in JavaScript In JavaScript, objects allow us to store data in the key-value format. We can use the key with the object to get the data from the object. Syntax Users can follow the syntax below to use ... Read More

Stopping the browser’s back button meaning is that preventing users from going to the previous page. Sometimes, we need to prevent users from going to the back of the current page for security purposes. For example, most bank sites don’t allow you to go back when you are doing some transaction from their site using online banking. Because if users go back from the midtransaction, it can create some issues. So, it only allows you to either complete the transaction or cancel the transaction and start it again. Here, we will learn various approaches to prevent users from going ... Read More

We can append data to an element using JavaScript by using the .innerHTML property to add content to the element. This can be done by using the += operator to add the new content to the existing content within the . We can also use the .appendChild() method to add a new child element to the . is a block-level element that is used to create a division or section in an HTML document. The element is usually used to group elements together, such as paragraphs, headings, or images. The element can also be used to ... Read More

We can animate the width and height of a div on mouse hover using jQuery by applying the animate() method to the div on hover. We can specify the desired width and height values as well as the duration of the animation. Additionally, we can also add a callback function to perform additional actions after the animation is complete. jQuery is a JavaScript library that makes it easy to add interactive elements to web pages. jQuery is designed to make it easy to add dynamic content to a web page, and to make it easy to write code that works ... Read More

To allow cross-origin use of images and canvas, the server must include the appropriate CORS (Cross-Origin Resource Sharing) headers in its HTTP responses. These headers can be set to allow specific origins or methods, or to allow any origin to access the resource. HTML Canvas An HTML5 Canvas is a rectangular area on a web page that is controlled by JavaScript code. Anything can be drawn on the canvas, including images, shapes, text, and animations. The canvas is a great tool for creating games, graphics, and web applications. Approach The approach to allow cross-origin use of images and canvas is ... Read More

We can align text content into the center using JavaScript by manipulating the CSS properties of the element. This can be done by selecting the element and setting the "text-align" property to "center". Additionally, we can also use the "margin" property to adjust the positioning of the element. Approach There are multiple ways to center text content using JavaScript − The most common way is to set the text-align property to “center” in the CSS stylesheet. Another way is to use the tag. Finally, you can use the margin property to center text content. ExampleBelow we will be ... Read More