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
Articles on Trending Technologies
Technical articles with clear explanations and examples
Cross domain HTML5 iframe issue
Cross-domain iframe communication is restricted by the Same-Origin Policy for security. The postMessage method provides a safe way to transfer data between different domains in HTML5. The Cross-Domain Problem When an iframe loads content from a different domain, direct JavaScript access is blocked: // This will throw a security error let iframeContent = document.getElementById('myIframe').contentDocument; // Error: Blocked by CORS policy Solution: Using postMessage The postMessage API allows secure communication between different origins. Syntax targetWindow.postMessage(message, targetOrigin); Parameters message - Data to send (string, object, etc.) targetOrigin - ...
Read MoreUsage of border-left-color property in CSS
The border-left-color property in CSS is used to set the color of an element's left border. This property only works when a left border is already defined using the border-left-style or border property. Syntax border-left-color: color | transparent | initial | inherit; Parameters Value Description color Sets the left border color (hex, rgb, color name) transparent Makes the left border transparent initial Sets to default value inherit Inherits from parent element Example ...
Read MoreHow to return an array whose elements are the enumerable property values of an object in JavaScript?
We can use various methods to get values and keys from an object, but those methods will not return the values as an array, which is very useful in many cases. JavaScript provides the Object.values() method to get an array whose elements are the enumerable property values of an object. Syntax Object.values(obj); This method takes an object as an argument and returns an array whose elements are the property values of the object. Parameters obj: The object whose enumerable property values are to be returned. Return Value An array containing the ...
Read MoreHow to Clear the JavaScript Console in Google Chrome
In this article, we'll learn how to clear the JavaScript console in Google Chrome. When developing web applications, the console often gets cluttered with logs, errors, and debug messages, making it difficult to read new output. There are multiple ways to clear the Chrome console, each useful in different scenarios. Let's explore the most common methods. Using the console.clear() Method The console.clear() method programmatically clears the console and displays a "Console was cleared" message. Example Click the button to clear the console. Clear Console ...
Read MoreHow to import and export a module/library in JavaScript?
Note − To run this example you will need to run a localhost server. JavaScript modules allow you to break code into separate files and share functionality between them using export and import statements. This promotes code reusability and better organization. Example INDEX.html Document body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; ...
Read MoreDe-structuring an object without one key
Object destructuring with the rest operator (...) allows you to extract specific properties while collecting the remaining properties into a new object. This technique is useful when you want to exclude certain keys from an object. Syntax const { keyToExclude, ...remainingKeys } = originalObject; Example: Excluding One Key Object Destructuring body { ...
Read MoreCount unique elements in array without sorting JavaScript
When working with arrays containing duplicate values, counting unique elements is a common task. Let's explore different approaches to count unique elements in an array without sorting it first. Consider this sample array with duplicate values: const arr = ['Cat', 'Dog', 'Cat', 'Elephant', 'Dog', 'Grapes', 'Dog', 'Lion', 'Grapes', 'Lion']; console.log('Original array:', arr); Original array: ['Cat', 'Dog', 'Cat', 'Elephant', 'Dog', 'Grapes', 'Dog', 'Lion', 'Grapes', 'Lion'] Using Array.reduce() and lastIndexOf() This approach uses lastIndexOf() to identify the last occurrence of each element, ensuring each unique value is counted only once: const ...
Read MoreJavaScript Create Submit button for form submission and another button to clear input
Form handling is a fundamental aspect of web development. A Submit button sends the form data for processing, while a Clear button allows users to reset or empty the form inputs. This functionality enhances user experience and ensures proper data entry. In this tutorial, we'll learn how to create a form with a Submit button for handling submissions and a Clear button for resetting inputs using JavaScript. We'll also handle the actions triggered by these buttons effectively. Creating a Submit Button for Form Submission ...
Read MoreMake first letter of a string uppercase in JavaScript?
To make first letter of a string uppercase, use toUpperCase() in JavaScript. With that, we will use charAt(0) since we need to only capitalize the 1st letter. Syntax string.charAt(0).toUpperCase() + string.slice(1) Example function replaceWithTheCapitalLetter(values){ return values.charAt(0).toUpperCase() + values.slice(1); } var word = "javascript" console.log(replaceWithTheCapitalLetter(word)); Javascript Multiple Examples function capitalizeFirst(str) { return str.charAt(0).toUpperCase() + str.slice(1); } console.log(capitalizeFirst("hello world")); console.log(capitalizeFirst("programming")); console.log(capitalizeFirst("a")); console.log(capitalizeFirst("")); Hello world Programming A How It Works The method breaks ...
Read MoreHow to make the web page height to fit screen height with HTML?
To make a web page height fit the screen height, you have several CSS approaches. Each method has different use cases and browser compatibility considerations. Method 1: Using Percentage Heights Set both html and body elements to 100% height to establish the full viewport height foundation: html, body { height: 100%; margin: 0; ...
Read More