JavaScript

React.js is a JavaScript library for building user interfaces. Developed by Facebook (now Meta) in 2013. It is component-based, declarative, and allows for efficient UI updates. Key Features of React Component-Based Architecture: UI is built using reusable components. Virtual DOM: Updates only the changed parts, making React fast. Unidirectional Data Flow: Props and state maintain a predictable data structure. JSX (JavaScript XML): A syntax extension that lets you write HTML inside JavaScript. Hooks: Allow functional components to have state and other features. Mutable vs Immutable Mutable (Changeable) Mutable data types can be changed after creation. Example: Objects & Arrays are mutable. let arr = [1, 2, 3]; arr.push(4); // Modifies the original array console.log(arr); // [1, 2, 3, 4] Immutable (Unchangeable) Immutable data cannot be changed directly. Instead, you create a new copy. Example: Strings & Numbers are immutable. let str = "Hello"; str[0] = "M"; // This won't change the string console.log(str); // "Hello" Example of immutable object handling (creating a new object instead of modifying the original): ...

Introduction to GSAP GSAP(Greensock Animation Platform) is a powerful JavaScript animation library that allows you to create high-performance animations for web applications. It is widely used for animating elements with precision and smoothness. 2. Installing GSAP You can use GSAP in multiple ways: CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> 3. Basic GSAP Syntax GSAP uses the .to(), .from(), and .fromTo() methods to animate elements. gsap.to() → Animates from the current state to a new state. gsap.to(".box", { x: 200, duration: 1 }); gsap.from() → Animates from a given state to the current state. gsap.from(".box", { opacity: 0, y: -50, duration: 1 }); gsap.fromTo() → Specifies both the start and end states explicitly. gsap.fromTo(".box", { x: 0 }, { x: 300, duration: 1 }); 4. Key Properties x, y → Move horizontally/vertically scale, scaleX, scaleY → Scale size rotation, rotate → Rotate element opacity → Change transparency skewX, skewY → Skew transformation stagger → Create a delay between multiple elements Example ...

DOM Manipulation in JavaScript DOM (Document Object Model) Manipulation in JavaScript refers to modifying HTML elements dynamically using JavaScript. This includes selecting, modifying, adding, or removing elements from the webpage. Selecting Elements in the DOM Before modifying elements, we need to select them. Here are the different ways: Method Description Example document.getElementById(id) Selects an element by its ID document.getElementById("myDiv") document.getElementsByClassName(className) Selects elements by class name (returns an HTMLCollection) document.getElementsByClassName("myClass") document.getElementsByTagName(tagName) Selects elements by tag name (returns an HTMLCollection) document.getElementsByTagName("p") document.querySelector(selector) Selects the first element that matches the CSS selector document.querySelector(".myClass") document.querySelectorAll(selector) Selects all elements that match the CSS selector (returns a NodeList) document.querySelectorAll("div") Examples of Selection Methods 1. Selecting an Element by ID let title = document.getElementById("main-title"); console.log(title.innerText); // Logs the text inside the element 2. Selecting Elements by Class Name let items = document.getElementsByClassName("item"); console.log(items[0].innerText); // Logs the first element's text 3. Selecting Elements by Tag Name let paragraphs = document.getElementsByTagName("p"); console.log(paragraphs.length); // Logs the number of <p> elements 4. Selecting an Element Using querySelector() Returns only the first matching element. ...

Arrays Objects allow you to store keyed collections of values. That’s fine. But quite often we find that we need an ordered collection, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc. It is not convenient to use an object here, because it provides no methods to manage the order of elements. We can’t insert a new property “between” the existing ones. Objects are just not meant for such use. ...

Synchronous vs Asynchronous JavaScript JavaScript is single-threaded, meaning it executes one operation at a time in a sequential manner. However, JavaScript provides mechanisms to handle tasks asynchronously, allowing it to perform operations without blocking the main execution thread. 1. Synchronous JavaScript In synchronous execution, tasks run one after another, meaning JavaScript waits for one operation to complete before moving to the next. This can cause delays if a task takes a long time (e.g., reading a large file or making a network request). ...

JavaScript was originally created to bring static web pages to life, enabling them to respond dynamically to user interactions. Its code, known as scripts, is directly embedded within HTML documents and executed by the browser as soon as the page loads. Because these scripts are delivered and interpreted as plain text, they bypass the need for a separate compilation process—this makes development swift and flexible. This interpretive nature is a key characteristic of JavaScript and distinguishes it from compiled languages like Java. Whereas Java requires a compile step to transform code into bytecode before execution, JavaScript’s immediate execution model facilitates rapid testing and iterative development. Over time, JavaScript has evolved from a simple tool for adding interactivity to a robust language capable of handling complex web applications, manipulating the Document Object Model (DOM), and even running on servers through environments like Node.js. ...