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 373 of 534
Change string based on a condition - JavaScript
We are required to write a JavaScript function that takes in a string. The task of our function is to change the string according to the following condition − If the first letter in the string is a capital letter then we should change the full string to capital letters. Otherwise, we should change the full string to small letters. Example Following is the code − const str1 = "This is a normal string"; const str2 = "thisIsACamelCasedString"; const changeStringCase = str => { ...
Read MoreEnhance real-time performance on HTML5 canvas effects
HTML5 canvas performance optimization is crucial for smooth real-time effects like animations, games, and interactive graphics. Here are proven techniques to boost your canvas rendering speed. Disable Image Smoothing Turn off image smoothing for pixel-perfect rendering and better performance: const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Disable smoothing for better performance ctx.imageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.mozImageSmoothingEnabled = false; // Test with a small image scaled up const img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, 200, 150); ...
Read MoreDiagonal product of a matrix - JavaScript
Suppose, we have a 2-D array representing a square matrix like this − const arr = [ [1, 3, 4, 2], [4, 5, 3, 5], [5, 2, 6, 4], [8, 2, 9, 3] ]; We are required to write a function that takes in this array and returns the product of the elements present at the principal diagonal of the matrix. Principal Diagonal Elements The principal diagonal consists of elements where the row index equals the column index (i === j). For ...
Read MoreHow to send a file and parameters within the same XMLHttpRequest
To send a file and parameters within the same XMLHttpRequest, you can use the FormData object which allows you to construct form data including both regular parameters and file uploads. HTML Form Setup First, create an HTML form with a file input: Upload function uploadFile() { const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; if (!file) { alert('Please select a file'); ...
Read MoreCorner digit number difference - JavaScript
We are required to write a JavaScript function that takes in a number, constructs a new number from the first and last digit of that number and returns the difference between the original number and the number thus formed. For example: If the input is 34567 Then the corner digits number will be: 37 And the output will be: 34530 Algorithm The solution involves extracting the first and last digits, combining them to form a corner number, then calculating the difference. Example Following is the code: ...
Read MoreFull page drag and drop files website with HTML
Creating a full-page drag and drop interface allows users to drop files anywhere on the webpage. This involves detecting drag events and showing a drop zone overlay. HTML Structure First, create the basic HTML with a drop zone overlay: #dropZone { position: fixed; top: 0; ...
Read MoretoDataURL throw Uncaught Security exception in HTML
The toDataURL() method throws an "Uncaught Security Exception" when trying to convert images from external domains to base64. This happens due to CORS (Cross-Origin Resource Sharing) restrictions that prevent accessing pixel data from cross-origin images. The Problem When you load an image from a different domain and try to use toDataURL(), the browser blocks access to prevent potential security vulnerabilities: function getBase64() { var img = document.getElementById("myImage"); var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); ...
Read MoreCheck three consecutive numbers - JavaScript
We are required to write a JavaScript function that takes in a Number, say n, and we are required to check whether there exist such three consecutive natural numbers (not decimal/floating point) whose sum equals to n. If there exist such numbers, our function should return them, otherwise it should return false. Following is the code − How It Works For three consecutive numbers to sum to n, we need: x + (x+1) + (x+2) = n, which simplifies to 3x + 3 = n. Therefore, n must be divisible by 3 and greater than 5 (since ...
Read MoreHow do I programmatically create a DragEvent for Angular app and HTML?
Creating a DragEvent programmatically in JavaScript allows you to simulate drag-and-drop operations for testing or automation purposes. There are different approaches depending on whether you're using browser APIs directly or testing frameworks like Protractor. Creating DragEvent with JavaScript API The most direct approach uses the native DragEvent constructor: // Create a new drag event let dragStartEvent = new DragEvent('dragstart', { bubbles: true, cancelable: true, dataTransfer: new DataTransfer() }); // Get target element let element = document.getElementById('draggable-item'); // Dispatch the event element.dispatchEvent(dragStartEvent); ...
Read MoreSum of distinct elements of an array - JavaScript
We are required to write a JavaScript function that takes in one such array and counts the sum of all distinct elements of the array. For example: Suppose, we have an array of numbers like this − const arr = [1, 5, 2, 1, 2, 3, 4, 5, 7, 8, 7, 1]; The distinct elements are: 1, 5, 2, 3, 4, 7, 8. Their sum is: 1 + 5 + 2 + 3 + 4 + 7 + 8 = 30. Using lastIndexOf() Method This approach checks if the current index matches the ...
Read More