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
Programming Scripts Articles
Page 3 of 33
Adding Animations on Scroll with HTML, CSS and AOS.js
AOS.js (Animation on Scroll) is a lightweight JavaScript library that makes it easy to add scroll-triggered animations to web pages. By simply adding CSS classes and data attributes to HTML elements, you can create engaging visual effects without writing complex JavaScript code. In this tutorial, we will explore different types of animations available in AOS.js, including fade, flip, and zoom effects, along with practical examples. Setting Up AOS.js Before using AOS.js, you need to include the CSS and JavaScript files in your HTML document. Add the following CDN link in the section: ...
Read MoreBuilding a Text Editor using Quill.js
Quill is a free and open-source WYSIWYG (What You See Is What You Get) text editor built for modern web applications. It offers a highly customizable interface with an expressive API, making it easy to integrate rich text editing capabilities into your projects. In this tutorial, we'll explore how to build text editors using Quill.js through practical examples, from basic setup to advanced customization. Setting Up Quill.js To get started with Quill, include the CSS and JavaScript files in your HTML document's section: The first link provides the CSS styling, ...
Read MoreHow can I show image rollover with a mouse event in JavaScript?
This tutorial will teach us to show image rollover with a mouse event in JavaScript. The meaning of the image rollover is to either change the image style or the whole image when the user rollovers the mouse on the image. To build an attractive user interface, developers often add image rollover features to the website and applications. Here, we will see to apply image rollover differently. Change the Style of the Image on Mouse Rollover In this method, to create the image rollover, we will use the onmouseover and onmouseout event of JavaScript. When users take ...
Read MoreHow to convert Decimal to Binary in JavaScript?
This tutorial will teach us to convert the decimal number to a binary number string. The binary number is the string of only 0 and 1. The computer doesn't understand the high-level programming language, so we need to instruct the computer in a low-level language, represented as the binary string. Also, binary string is used in digital electronics. Here, we have three methods to convert the decimal number to a binary string. Using the toString() Method Using the right shift Operation Using the modulo Operator Using ...
Read MoreHow to add rows to a table using JavaScript DOM?
We will learn how to add a row to a table using JavaScript DOM. To achieve this, we have multiple methods. Some of them are the following. Using the insertRow() method By creating the new Element Using the insertRow() Method The insertRow() method is used to insert a new row at a specified position in the table. It creates a new element and inserts it into the table. This takes a number as a parameter that specifies the position of the table. If we do not pass any ...
Read MoreHow to create a table caption with JavaScript DOM?
To create a table caption using JavaScript DOM, use the createCaption() method on a table element. This method adds a element to the table, which displays as a title above the table content. Syntax table.createCaption() Return Value Returns the newly created element, which can be styled or modified with text content. Example Here's how to create a table caption dynamically using JavaScript: function captionFunc(x) { ...
Read MoreWhich is the JavaScript RegExp to find any alternative text?
To match any of the specified alternatives in JavaScript, use the alternation operator | within parentheses. This pattern allows you to find multiple possible text options in a single regular expression. Syntax (option1|option2|option3) The pipe symbol | acts as an OR operator, matching any one of the alternatives listed within the parentheses. Example Here's how to find alternative text patterns using JavaScript RegExp: JavaScript Regular Expression var myStr = "one, ...
Read MoreHow to perform Multiline matching with JavaScript RegExp?
To perform multiline matching in JavaScript, use the m flag with regular expressions. This flag makes ^ and $ anchors match the beginning and end of each line, not just the entire string. Syntax /pattern/m new RegExp("pattern", "m") How the m Flag Works Without the m flag, ^ matches only the start of the string and $ matches only the end. With the m flag, they match line boundaries created by (newline) characters. Example: Basic Multiline Matching JavaScript Regular ...
Read MoreHow to reduce the number of errors in scripts?
Reducing errors in JavaScript scripts is crucial for maintainable code. Following established best practices can significantly improve code quality and reduce debugging time. Essential Practices for Error-Free Scripts Use Meaningful Comments Comments explain the purpose and logic behind your code, making it easier to understand and maintain. // Calculate total price including tax function calculateTotal(price, taxRate) { // Apply tax rate as percentage const tax = price * (taxRate / 100); return price + tax; } console.log(calculateTotal(100, 8.5)); // $100 with 8.5% ...
Read MoreHow can I add debugging code to my JavaScript?
To add debugging code to JavaScript, you can use several methods to track program execution and variable values. Here are the most effective approaches. Using console.log() (Recommended) The console.log() method is the modern standard for debugging JavaScript. It outputs messages to the browser's developer console without interrupting program flow. var debugging = true; var whichImage = "widget"; if (debugging) { console.log("Calls swapImage() with argument: " + whichImage); } // Simulate function call function swapImage(image) { console.log("Processing image: " + image); return ...
Read More