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
Web Development Articles
Page 149 of 801
How to get the length of a string in bytes in JavaScript?
In JavaScript, getting the length of a string in bytes is different from getting its character count. A byte is a unit of data that is 8 binary bits long, and while most ASCII characters use 1 byte, Unicode characters like emojis or special symbols may use multiple bytes. Here are examples of strings and their byte lengths: Examples: "JavaScript" → 10 bytes (each ASCII character = 1 byte) "20€" → 5 bytes (€ symbol uses 3 bytes in UTF-8) "Tutorials Point" → 15 bytes There ...
Read MoreGet the size of the screen, current web page and browser window in JavaScript
In JavaScript, you can get different dimensions of the screen, browser window, and web page content using various window properties. This is useful for responsive design, creating dynamic layouts, and adjusting content based on available space. We will explore three main categories: Get the Inner Width and Height (viewport size) Get the Outer Width and Height (entire browser window) Get Screen Dimensions Understanding Different Size Properties Property ...
Read MoreHow to manipulate DOM using a service worker in JavaScript?
In this tutorial, you will learn about JavaScript DOM manipulation using a service worker. We'll explore how service workers can trigger DOM changes after successful registration and activation. DOM manipulation happens when we change the structure and elements of the document object model (DOM). We can modify DOM by adding, removing, changing, or modifying elements and their attributes. What is a Service Worker? Service workers act like proxy servers between web browsers and web servers. They run in the background and can intercept network requests, cache resources, and enable offline functionality. Service workers enhance existing websites by ...
Read MoreWhat are decorators and how are they used in JavaScript?
In this tutorial, you will learn about JavaScript decorators and get to know about their inner workings and uses. What are Decorators in JavaScript? The word decorator means combining a set of code or program with another or can be said as wrapping a function with another function to extend the functionality or working of the function. Decorator can also be called as decorator function. Developers have been using this decorator term in other languages like Python, C# and now JavaScript has also introduced the decorator pattern. Function Decorators In JavaScript functions behave like objects ...
Read MoreHow do find out all elements that match a specific condition in JavaScript?
In JavaScript, there are multiple ways to find elements that match specific conditions. While the underscore.js library provides the _.where() function, modern JavaScript also offers native methods like filter(), every(), and find(). Using _.where() from Underscore.js The _.where() function belongs to underscore.js, a JavaScript library that provides utility functions. It finds elements that match specified properties in an array of objects. Syntax _.where(list, properties) Parameters: list − The array to search through properties − Object containing the matching criteria Return value: An array containing ...
Read MoreHow to capture HTML Canvas as gif/jpg/png/pdf with JavaScript?
We can use the canvas.toDataURL() method to capture HTML canvas content as different image formats like PNG, JPEG, WebP, and GIF. This method converts the canvas drawing into a data URL that can be saved or displayed as an image. Syntax canvas.toDataURL(type, encoderOptions) Parameters type (optional): The image format. Defaults to "image/png" encoderOptions (optional): Quality setting for lossy formats (0-1) Capture HTML Canvas as PNG PNG format provides lossless compression and supports transparency. Set the type to image/png: Download as ...
Read MoreHow to Access the Correct "this" Inside a Callback?
In this tutorial, we will learn how to access the correct "this" inside a callback function. This is a common challenge in JavaScript because callback functions can lose their original context. Understanding the "this" Problem in Callbacks The value of "this" in JavaScript depends on how a function is called, not where it's defined. When a function is passed as a callback, it often loses its original context, causing "this" to refer to something unexpected (like the global object or undefined in strict mode). The Problem: Lost Context ...
Read MoreIs it possible to write data to file using only JavaScript?
In this tutorial, we will learn if it is possible to write data to files using only JavaScript. The short answer is: it depends on the environment. Pure client-side JavaScript running in browsers cannot directly write files to the user's system for security reasons. However, Node.js (server-side JavaScript) provides the fs module for file operations. Browser JavaScript Limitations Client-side JavaScript cannot write files directly due to security restrictions. Browsers prevent web pages from accessing the file system to protect users from malicious scripts. Node.js File Writing Node.js includes the fs (File System) module that handles ...
Read MoreDesign Smiley Face Eyes that follow Mouse Cursor using CSS and JS
Creating animated smiley faces with eyes that follow the mouse cursor is an engaging way to learn CSS pseudo-elements and JavaScript event handling. This effect combines CSS animations with JavaScript mouse tracking to create interactive cartoon faces. How It Works The animation works by calculating the angle between the mouse position and each eye's center. JavaScript uses Math.atan2() to determine the rotation angle, then applies a CSS transform to rotate the eyeballs toward the cursor. HTML Structure We create multiple face containers, each containing two eyes represented by divs: ...
Read MoreDifference between document load and DOMContentLoaded events in JavaScript
In JavaScript, understanding when to use DOMContentLoaded versus load events is crucial for optimal web performance. Both events help determine when different parts of a webpage have finished loading, but they trigger at different stages of the loading process. DOMContentLoaded Event The DOMContentLoaded event fires when the HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This makes it ideal for DOM manipulation scripts that don't depend on external resources. Syntax document.addEventListener("DOMContentLoaded", function(e) { console.log("DOM is ready"); }); Example: DOMContentLoaded Event ...
Read More