Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
In this tutorial, we will learn how to get the length of a string in JavaScript. While working with strings in JavaScript, we often need to know the number of characters present in them. Understanding how to calculate string length helps with text processing, validation, and data manipulation. There are different ways to get the length of a string, but the most common approach is using the built-in length property. Using the string.length Property The simplest and most efficient way to get the length of a string in JavaScript is using the length property. Syntax ... Read More
To return the id of the first image in a document, use the document.images property in JavaScript. This property returns a collection of all image elements in the document. Syntax document.images[0].id How It Works The document.images collection contains all elements in the document, indexed starting from 0. To get the first image's id, access document.images[0].id. Example Here's a complete example showing how to get the id of the first image: ... Read More
To set all the border top properties in a single declaration, use the borderTop property. With this property, you can set the border-top-width, border-top-style, and border-top-color property in one statement. Syntax element.style.borderTop = "width style color"; Parameters The borderTop property accepts a string value containing three components: width: Border thickness (e.g., "thin", "thick", "5px") style: Border style (e.g., "solid", "dashed", "dotted") color: Border color (e.g., "red", "#000000", "rgb(255, 0, 0)") Example You can try to run the following code to learn how to work with border-top properties in JavaScript: ... Read More
HTML5 Server-Sent Events (SSE) provide real-time communication from server to client. While not natively supported in older Internet Explorer versions, there are Microsoft-compatible alternatives to achieve similar functionality. What are Server-Sent Events? Server-Sent Events allow a web page to receive automatic updates from a server through a persistent HTTP connection. Unlike WebSockets, SSE provides unidirectional communication from server to client only. if (typeof EventSource !== "undefined") { var source = new EventSource("/events"); source.onmessage = function(event) { ... Read More
To programmatically fire an HTML5 dragstart event after a mousemove event, you need to simulate the drag behavior by creating and dispatching custom events. This approach is useful when you want to initiate dragging based on mouse movement rather than the default drag handle interaction. Basic Implementation Here's how to create a dragstart event after detecting mousemove: Drag me let isDragging = false; const draggableElement = document.getElementById('draggable'); draggableElement.addEventListener('mousedown', function(e) { isDragging = true; console.log('Mouse down - ready to drag'); ... Read More
The width property in CSS is used to set the width of elements, including images. This property accepts values in various units such as pixels (px), percentages (%), em, rem, and other CSS length units. When using percentage values, the width is calculated relative to the containing element's width. Syntax width: value; Common Values Pixels (px): Absolute unit - width: 200px; Percentage (%): Relative to parent container - width: 50%; Auto: Browser calculates width automatically - width: auto; Em/Rem: Relative to font size - width: 10em; Example: Setting Image Width ... Read More
Split button dropdowns use the same general style as the dropdown button but add a primary action along with the dropdown. Split buttons have the primary action on the left and a toggle on the right that displays the dropdown. Basic Structure A split button dropdown consists of two buttons wrapped in a btn-group container: Primary button: Performs the main action when clicked Dropdown toggle: Shows/hides the dropdown menu with additional options Example You can try to run the following code to create split button dropdowns: ... Read More
Detached DOM elements are nodes that have been removed from the DOM tree but still exist in memory because JavaScript variables maintain references to them. This prevents the garbage collector from freeing the memory, leading to memory leaks. Understanding DOM Tree Structure The DOM is a double-linked tree structure where each node holds references to its parent and children. When you maintain a JavaScript reference to any node, the entire subtree remains in memory even after removal from the visible DOM. DOM Tree ... Read More
To get a subset of an object's properties and create a new object with selected properties, you can use object destructuring combined with property shorthand. This technique allows you to extract specific properties and create a new object containing only those properties. Basic Example Let's start with an object containing multiple properties: const person = { name: 'John', age: 40, city: 'LA', school: 'High School' }; // Extract only name and age const {name, age} = person; const selectedObj ... Read More
In this article, we will learn about JavaScript ArrayBuffer objects. The ArrayBuffer object in JavaScript is a fundamental part of the Web API for efficiently handling binary data. What is ArrayBuffer? The JavaScript ArrayBuffer object represents a generic, fixed-length raw binary data buffer. To manipulate the contents of an ArrayBuffer object we have to create a DataView object as we cannot manipulate the contents directly. We can read and write both using the DataView object. Syntax new ArrayBuffer(byteSize) The byteSize parameter specifies the array buffer size in bytes that will be created. ... Read More