3) Explain how the jQuery framework simplifies DOM manipulation. Share an example.

jQuery simplifies DOM manipulation by providing a concise, cross-browser-compatible API

that reduces the amount of code required to select, modify, and respond to HTML elements
and events. Here's how it helps:

Key Simplifications by jQuery:

1.​ Element Selection: Uses CSS-style selectors via $(selector) to select DOM
elements easily.​

2.​ Cross-Browser Compatibility: Abstracts away browser differences in how the DOM
is accessed and manipulated.​

3.​ Chaining: Allows multiple operations to be performed on elements in a single

statement.​

4.​ Event Handling: Simplifies attaching events to elements.​

5.​ Animations and Effects: Offers built-in functions like .hide(), .fadeIn(), and
.slideToggle().​

Example:

Vanilla JavaScript:
javascript
CopyEdit
document.getElementById("myButton").addEventListener("click",
function() {
document.getElementById("myText").style.color = "red";
});

jQuery Equivalent:
javascript
CopyEdit
$("#myButton").click(function() {
$("#myText").css("color", "red");
});

In the jQuery example:

 ●​ $("#myButton") selects the element with ID myButton.​

●​ .click() attaches a click event handler.​

●​ Inside the handler, $("#myText").css("color", "red") changes the color of

another element.​

4) What is AJAX, and how is it used for server communication? Provide a practical​
example

AJAX (Asynchronous JavaScript and XML) is a technique that allows web pages to
communicate with a server without reloading the entire page. It enables the page to
request and receive data in the background, making web applications faster and more
dynamic.

Key Features of AJAX:

●​ Asynchronous: Does not interrupt the user's interaction with the page.​

●​ Lightweight: Only necessary data is exchanged, not the entire HTML page.​

●​ Flexible: Can exchange data in formats like JSON, XML, HTML, or plain text.​

How AJAX Works (Simplified Flow):

1.​ A client-side event (e.g., a button click) triggers an AJAX request.​

2.​ The browser sends a request to the server.​

3.​ The server processes the request and returns a response.​

4.​ JavaScript handles the response and updates the DOM accordingly.​

Example Using jQuery AJAX:

HTML:

html
CopyEdit
<button id="getData">Get Data</button>
<div id="result"></div>

JavaScript (jQuery):

javascript
CopyEdit
$("#getData").click(function() {
$.ajax({
url: "https://api.example.com/data", // Server endpoint
method: "GET",
success: function(response) {
$("#result").html("Received: " + response);
},
error: function() {
$("#result").html("An error occurred.");
}
});
});

What Happens Here:

●​ When the button is clicked, an AJAX GET request is sent to the server.​

●​ On success, the response is displayed inside the <div id="result">.​

●​ If there's an error (e.g., server not responding), an error message is shown instead.​

5) How do you handle errors in JavaScript? Provide examples of `try`, `catch`, and
`finally` blocks.

In JavaScript, errors are handled using try...catch...finally blocks. These allow you
to test code for errors (try), handle any exceptions (catch), and run cleanup code
(finally) regardless of whether an error occurred.

Syntax Overview:
javascript
CopyEdit
try {
 // Code that may throw an error
} catch (error) {
// Code to handle the error
} finally {
// Code that will run regardless of the result
}

Practical Example:
javascript
CopyEdit
function divide(a, b) {
try {
if (b === 0) {
throw new Error("Division by zero is not allowed");
}
let result = a / b;
console.log("Result:", result);
} catch (err) {
console.error("Error:", err.message);
} finally {
console.log("Division attempt completed.");
}
}

divide(10, 2); // Output: Result: 5, Division attempt completed.

divide(10, 0); // Output: Error: Division by zero is not allowed,
Division attempt completed.

What Each Part Does:

●​ try: Executes code that might throw an exception.​

●​ catch: Catches and handles the error, preventing the program from crashing.​

●​ finally: Runs no matter what — useful for closing resources, clearing states, or
logging.​

6) Write a JavaScript program to calculate the factorial of a given number using a

Function.
✅ Using a Loop (Iterative Approach):
javascript
CopyEdit
function factorial(n) {
if (n < 0) {
return "Factorial is not defined for negative numbers.";
}
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
}

// Example usage:
let number = 5;
console.log("Factorial of", number, "is", factorial(number)); //
Output: 120

✅ Using Recursion (Alternative Approach):

javascript
CopyEdit
function factorial(n) {
if (n < 0) return "Factorial is not defined for negative
numbers.";
if (n === 0 || n === 1) return 1;
return n * factorial(n - 1);
}

// Example usage:
let number = 5;
console.log("Factorial of", number, "is", factorial(number)); //
Output: 120

Both methods are valid; recursion is more elegant but may be less efficient for very
large numbers due to call stack limits.

7) Explain the concept of JavaScript closures with an example.

A closure in JavaScript is a function that "remembers" the variables from its lexical
scope even when that function is executed outside of that scope.

In simpler terms:

A closure is created when an inner function has access to variables from

an outer function that has already returned.

Why Closures Are Useful:

●​ They allow data encapsulation (private variables).​

●​ They enable function factories (functions that return functions with preset
behavior).​

●​ They help maintain state in asynchronous or callback-based code.​

🔧 Example:
javascript
CopyEdit
function outerFunction() {
let count = 0;

return function innerFunction() {

count++;
console.log("Count:", count);
};
}

const counter = outerFunction();

counter(); // Count: 1
counter(); // Count: 2
counter(); // Count: 3

Explanation:

●​ outerFunction defines a variable count and returns innerFunction.​

 ●​ Even though outerFunction has finished executing, the returned
innerFunction still has access to count—this is a closure.​

●​ Each time counter() is called, it remembers and updates count.​

7) What are jQuery events? Write a jQuery code snippet to handle a button click event.

jQuery provides a simple and consistent way to handle events in web development. Events
are
actions that occur in the browser, like user interactions (clicking a button, moving the mouse,
typing text), or other occurrences (page load, focus change). With jQuery, you can easily
manage
these events and define actions that should occur when they are triggered.

What Are jQuery Events?

Common jQuery Event Methods:

●​ .click() – Fires when an element is clicked​

●​ .hover() – Fires on mouse enter and leave​

●​ .keydown(), .keyup() – For keyboard input​

●​ .on() – Generic event handler for any event​

✅ jQuery Example: Handle a Button Click Event

HTML:

html
CopyEdit
<button id="myButton">Click Me</button>
<p id="message"></p>

jQuery:
javascript
CopyEdit
$(document).ready(function() {
$("#myButton").click(function() {
$("#message").text("Button was clicked!");
});
});

Explanation:

●​ $(document).ready(...): Ensures the DOM is fully loaded before running the

script.​

●​ $("#myButton").click(...): Attaches a click event handler to the button.​

●​ $("#message").text(...): Updates the paragraph text when the button is

clicked.​