Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 296 of 652
How to write an inline IF statement in JavaScript?
Conditional statements are the most important and basic concept of any programming language. The if-else statement allows us to execute any code block conditionally. We can define the condition for the if statement in braces, and if the condition becomes true, it executes the code of the if block; Otherwise, it executes the code of the else block. Here, we have demonstrated how an if-else statement works in JavaScript. if (condition) { // code to execute when the condition becomes true } else { ...
Read MoreHow to write shorthand for document.getElementById() method in JavaScript?
The document.getElementById() method allows us to access any HTML element using its id in JavaScript. Every webpage can contain only a single HTML element with a single id. You can use the below example code to access any HTML element using its id: let element = document.getElementById('id'); In the above code, we used the getElementById() method of the document object and passed the id as a parameter. Now, if we require to access multiple elements using their id, it is not a good idea to repeatedly type document.getElementById(), but we can create a ...
Read MoreImage Transition with Fading Effect using JavaScript
Image transition means changing the image and replacing one image with another. Users can see the image transition in image sliders or galleries. While developing image sliders, we should focus on the animation for image transition to create an attractive user experience. In this tutorial, we will learn to add fading effects using various approaches to image transitions. Method 1: Adding CSS Class for Fade Effect We can use CSS to add a fading effect to image transitions. The transition property of CSS allows us to add smooth transitions to images. By adding CSS to a class ...
Read MoreImplement a JavaScript when an element loses focus
When we click on an input element in HTML, it becomes focused and displays an outline. Sometimes, we need to execute JavaScript code when the user moves focus away from an element (when it loses focus). For example, you can validate form fields when users click outside an input, showing error messages like "This field is required" if the input is empty. This is commonly used for real-time form validation. Here, we will learn different approaches to implement JavaScript when an element loses focus. Using the onblur Event Attribute The onblur event attribute triggers when an ...
Read MoreImplement polyfill for String.prototype.trim() method in JavaScript
Some old versions of browsers don't support newly evolved JavaScript features. For example, very old browser versions don't support ES10 features like the Array.flat() method for flattening arrays. In such cases, we need to implement user-defined methods called polyfills to provide that functionality for older browsers. Here, we will implement polyfills for the String.prototype.trim() method. What is String.prototype.trim()? The trim() method removes whitespace characters from both ends of a string and returns a new string without modifying the original. Method 1: Using Regular Expression The most common approach uses a regular expression to match and ...
Read MoreInteger Range in JavaScript
JavaScript uses a single number type to represent all numeric values, including both integers and floating-point numbers. Unlike languages such as C++ or Java, JavaScript doesn't have separate data types for different number sizes. However, there are important limits to understand when working with large integers. JavaScript stores numbers using the IEEE 754 double-precision floating-point format, which determines the maximum and minimum values that can be safely represented and manipulated. JavaScript Number System JavaScript treats all numbers as 64-bit floating-point values. This unified approach simplifies the language but introduces precision limitations when working with very large integers. ...
Read MoreIntroduction and Installation of Nightmare.js
Nightmare.js is a high-level browser automation library developed by Segment. It's designed for automated testing and web scraping, operating as a headless browser using Electron. This library allows you to perform user interactions like clicking, typing, and navigation programmatically. What is Nightmare.js? Nightmare.js provides a simple, synchronous-style API for browser automation. Instead of dealing with complex callback structures, it exposes intuitive methods that mimic user actions such as goto, type, and click. Originally created for automating websites without APIs, it's now commonly used for: UI testing and smoke tests Web scraping and data extraction Screenshot generation ...
Read MoreIntroduction to Anime.js
Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. It works seamlessly with CSS properties, DOM elements, SVG attributes, and JavaScript objects, making it an excellent choice for creating smooth web animations without the complexity of traditional JavaScript animation methods. Traditional JavaScript animations require manually calculating property changes over time, which becomes complex even for simple effects. Anime.js simplifies this process by providing a unified interface for animating multiple properties simultaneously, handling timing calculations, and managing animation states automatically. Key Features Anime.js offers several advantages over vanilla JavaScript animations: Lightweight: Small ...
Read MoreForm required attribute with a custom validation message in HTML5
HTML5 includes a number of built-in form validation features that allow developers to easily add validation to their forms. One of these features is the "required" attribute, which specifies that an input field is required and must be filled out before the form can be submitted. The "required" attribute is a boolean attribute. If any input field with the "required" attribute is present in the form, then this field must be completed before submitting the form. If that particular field is left blank before submitting the form, the user will see an error message from the browser informing ...
Read MoreHow to convert a number into an array in JavaScript?
In JavaScript, there are several methods to convert a number into an array of its individual digits. This conversion is useful for tasks like splitting phone numbers, parsing dates, or performing mathematical operations on individual digits. Method 1: Using split() Method The split() method is the simplest approach. It converts the number to a string and then splits it into individual characters. Example let number = 12345; let numberArray = number.toString().split(""); ...
Read More