When a form is submitted, browsers reload the page by default. To prevent this behavior and handle form submissions with JavaScript, we need to stop the default form submission event. The Problem HTML forms automatically reload the page when submitted. This interrupts JavaScript processing and user experience: Method 1: Using preventDefault() with Form Submit Event The most reliable approach is using event.preventDefault() in the form's submit event handler: ... Read More
To iterate elements by className in JavaScript, we use the getElementsByClassName() method. This method returns a live HTMLCollection of all elements in the document with the specified class name. In this article, we'll explore different approaches to iterate through elements that share the same class name, using practical examples with three div elements. getElementsByClassName() Overview The getElementsByClassName() method returns an HTMLCollection, which is array-like but not a true array. This collection updates automatically when elements are added or removed from the DOM. Approaches to Iterate Elements by ClassName Here are the most effective approaches to ... Read More
Suppose we have an object like this: const obj = { key1: 56, key2: 67, key3: 23, key4: 11, key5: 88 }; We are required to write a JavaScript function that takes in this object and returns a sorted array like this: const arr = [11, 23, 56, 67, 88]; Here, we sorted the object values and placed them in an array. Method 1: Using Object.keys() and map() This approach extracts the keys, maps them ... Read More
In this tutorial, we will learn how to set the right padding of an element with JavaScript. First, let's try to understand what padding means; padding is simply an extra space between a page's border and our content. The gap between them increases as the value of padding increases. Padding is similar to the margin; padding is distinct from the margin because padding adds space between the border and content, whereas margin is used to add space around the edge. While padding can be done on all sides, i.e., Top, Bottom, Left, and Right in the following lines, ... Read More
AES (Advanced Encryption Standard) is a symmetric encryption algorithm that uses the same key to encrypt and decrypt data. In JavaScript, we can implement AES encryption using libraries like CryptoJS to secure sensitive information in web applications. What is AES Encryption? AES is a widely adopted encryption standard that provides strong security for data protection. It's called "symmetric" because the same key is used for both encryption and decryption processes. This algorithm is commonly used in messaging applications like WhatsApp and Signal to ensure secure communication. How AES Works The encryption process involves converting plain text ... Read More
The HTML5 viewport meta tag controls how web pages are displayed on mobile devices. When it doesn't work as expected, it's often due to incorrect syntax or conflicting properties. Common Issues and Solutions Here are the most effective viewport configurations to fix common display problems: Method 1: Standard Responsive Design For most responsive websites, use this configuration: Responsive Page This page adapts to screen width Content scales properly on all devices. ... Read More
JavaScript classes support multiple types of methods beyond constructors. While constructors initialize objects, other methods provide functionality and behavior to class instances. The constructor is used to create and initialize an instance of a class. However, classes can contain additional methods that perform specific operations, calculations, or return formatted data. These methods are called on class instances and have access to the object's properties through the this keyword. Types of Methods in JavaScript Classes JavaScript classes support several method types: Instance methods: Called on class instances Static methods: Called on the class itself Getter/Setter methods: ... Read More
The JavaScript File WebAPI size property returns the size of a file in bytes. This read-only property is useful for validating file sizes before upload or displaying file information to users. Syntax file.size Return Value Returns a number representing the file size in bytes. Example File Size Property body { ... Read More
In JavaScript, you can join array elements with a specific character using a for loop. This approach gives you fine control over how elements are combined and what separators or wrappers to use. Problem Statement We need to create a function that takes an array and a string, then returns a new string where each array element is wrapped by the given string. For example: applyText([1, 2, 3, 4], 'a') should return 'a1a2a3a4a' Using for Loop Approach Here's how to solve this using a for loop to iterate through the array: ... Read More
To remove '0', 'undefined' and empty values from an array in JavaScript, you can use several methods. The most common approaches are using splice() with a loop or the filter() method. Method 1: Using splice() with for loop This method modifies the original array by removing falsy values in place: var allValues = [10, false, 100, 150, '', undefined, 450, null, 0]; console.log("Original Array:"); console.log(allValues); for (var index = 0; index < allValues.length; index++) { if (!allValues[index]) { allValues.splice(index, 1); ... Read More
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance