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
Javascript Articles
Page 52 of 534
How 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 MoreExplain Asynchronous vs Deferred JavaScript
When loading JavaScript files, the browser normally pauses HTML parsing to download and execute scripts. This can slow down page loading, especially with large JavaScript files. The async and defer attributes solve this problem by changing how scripts are loaded and executed. Normal Script Loading By default, scripts block HTML parsing until they finish downloading and executing: The browser stops parsing HTML, downloads the script, executes it, then continues parsing. This can create delays, especially with large scripts. Async Attribute The async attribute downloads scripts in parallel with HTML parsing. Once ...
Read MoreHow can JavaScript code be hidden from old browsers that do not support JavaScript?
The JavaScript script tag is occasionally not understood by older browsers. If not, they will simply disregard it and display your script as though it were a section of the (X)HTML document's body. It's a smart option to use comments to hide scripts from outdated browsers to prevent it from happening. JavaScript is now supported by all modern browsers; however, earlier browsers did not. In this article, we'll learn how to prevent JavaScript code from executing in older browsers. As some of your viewers will be seeing the site on a phone while others are using a large ...
Read More