JavaScript Tutorial

1. Basic JavaScript Introduction

2. JavaScript Data Types and Variables

3. JavaScript Operators

1. What are Operators in JavaScript?

Operators in JavaScript are symbols or keywords that perform various operations on values or variables. They are fundamental for manipulating data, performing calculations, making decisions, and more. Operators can be categorized based on their functionality.

2. Assignment Operator (=)

The assignment operator (=) is used to assign a value to a variable.

Code Snippet:

javascriptCopy codelet x = 10;

3. Comparison Operators

Comparison operators are used to compare values and return a boolean result.

Equality (==) and Inequality (!=):

javascriptCopy codelet num1 = 10;
let num2 = 5;
console.log(num1 == num2); // false
console.log(num1 != num2); // true

Greater Than (>) and Less Than (<):

javascriptCopy codeconsole.log(num1 > num2); // true
console.log(num1 < num2); // false

Greater Than or Equal To (>=) and Less Than or Equal To (<=):

javascriptCopy codeconsole.log(num1 >= num2); // true
console.log(num1 <= num2); // false

4. Logical Operators

Logical operators perform logical operations on boolean values.

Logical AND (&&):

javascriptCopy codelet isTrue = true;
let isFalse = false;
let result = isTrue && isFalse; // false

Logical OR (||):

javascriptCopy codelet result = isTrue || isFalse; // true

Logical NOT (!):

javascriptCopy codeconsole.log(!isTrue); // false

5. Conditional Operators

Conditional operators provide a concise way to write conditional statements.

Ternary Operator (condition ? expression1 : expression2):

javascriptCopy codelet age = 20;
let isAdult = age >= 18 ? 'Yes' : 'No';

6. Bitwise Operators

Bitwise operators perform operations at the bit level on integer values.

Bitwise AND (&):

javascriptCopy codelet num1 = 5; // 0101
let num2 = 3; // 0011
let result = num1 & num2; // 0001 (1 in decimal)

Bitwise OR (|):

javascriptCopy coderesult = num1 | num2; // 0111 (7 in decimal)

7. Unary Operators

Unary operators operate on a single operand.

Unary Plus (+) and Unary Minus (-):

javascriptCopy codelet x = 10;
let y = -x; // y is -10

Increment (++) and Decrement (--):

javascriptCopy codelet count = 5;
count++; // count is now 6

8. TypeOf Operator

The typeof operator determines the data type of a value or variable.

javascriptCopy codelet value = 42;
let type = typeof value; // type is 'number'

9. Operator Precedence

Operator precedence determines the order in which operators are evaluated.

javascriptCopy codelet result = 10 + 5 * 2; // result is 20

Understanding and utilizing these operators is fundamental to writing effective JavaScript code. They enable you to perform a wide range of operations and computations in your programs.

4. JavaScript Statement

1. Conditional Statement

Conditional statements are used to execute different code blocks based on specified conditions.

2. If Statement

The if statement executes a block of code if a specified condition is true.

Code Snippet:

javascriptCopy codelet age = 18;
if (age >= 18) {
  console.log("You are an adult.");
}

3. If Else Statement

The if...else statement executes a block of code if the condition is true, otherwise, it executes a different block of code.

Code Snippet:

javascriptCopy codeif (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are not an adult.");
}

4. Switch Statement

The switch statement selects one of many code blocks to be executed.

Code Snippet:

javascriptCopy codelet day = "Monday";
switch (day) {
  case "Monday":
    console.log("It's the start of the week.");
    break;
  case "Friday":
    console.log("It's almost the weekend.");
    break;
  default:
    console.log("It's another day.");
}

5. Loop Statements

Loop statements are used to repeatedly execute a block of code.

6. While Loop

The while loop repeatedly executes a block of code while a specified condition is true.

Code Snippet:

javascriptCopy codelet count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

7. Do While Loop

The do...while loop is similar to the while loop, but it executes the block of code at least once before checking the condition.

Code Snippet:

javascriptCopy codedo {
  console.log(count);
  count++;
} while (count < 5);

8. For Loop

The for loop repeatedly executes a block of code with a defined number of iterations.

Code Snippet:

javascriptCopy codefor (let i = 0; i < 5; i++) {
  console.log(i);
}

9. Nested For Loops

Nested for loops are used for executing code in a nested or hierarchical manner.

Code Snippet:

javascriptCopy codefor (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    console.log(`i: ${i}, j: ${j}`);
  }
}

10. For In Loop

The for...in loop is used to iterate over the properties of an object.

Code Snippet:

javascriptCopy codeconst person = {
  name: "John",
  age: 30,
  job: "developer",
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

11. For Of Loop

The for...of loop is used to iterate over iterable objects (e.g., arrays, strings).

Code Snippet:

javascriptCopy codeconst colors = ["red", "green", "blue"];
for (const color of colors) {
  console.log(color);
}

12. Break Statement

The break statement is used to terminate a loop prematurely.

Code Snippet:

javascriptCopy codefor (let i = 0; i < 5; i++) {
  if (i === 3) {
    break;
  }
  console.log(i);
}

13. Continue Statement

The continue statement is used to skip the current iteration of a loop and continue with the next iteration.

Code Snippet:

javascriptCopy codefor (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }
  console.log(i);
}

Understanding and using these statement types allows you to control the flow of your JavaScript programs and perform specific actions based on conditions and loops.

5. JavaScript Function

1. What is a Function in JavaScript?

A function is a reusable block of code that performs a specific task or calculates a value. Functions allow you to encapsulate logic, promote code reusability, and enhance maintainability.

Code Snippet:

javascriptCopy codefunction greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Alice"); // Output: Hello, Alice!

2. How to Call a Function in JavaScript Using Arguments?

Functions can accept parameters (arguments) to receive input values.

Code Snippet:

javascriptCopy codefunction add(a, b) {
  return a + b;
}

let result = add(5, 3); // result is 8

3. Pass By Value in JavaScript

JavaScript uses pass-by-value for primitive data types and pass-by-reference for objects.

Code Snippet:

javascriptCopy codefunction updateValue(value) {
  value = 20;
}

let num = 10;
updateValue(num);
console.log(num); // Output: 10

4. Function Return (or Return Statement)

The return statement is used to return a value from a function.

Code Snippet:

javascriptCopy codefunction multiply(a, b) {
  return a * b;
}

let product = multiply(4, 3); // product is 12

5. Nested Functions

Functions can be defined inside other functions (nested functions).

Code Snippet:

javascriptCopy codefunction outer() {
  function inner() {
    console.log("Inner function");
  }
  inner();
}

outer(); // Output: Inner function

6. Rest Parameter

The rest parameter allows a function to accept an arbitrary number of arguments as an array.

Code Snippet:

javascriptCopy codefunction sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

let totalSum = sum(2, 3, 5, 7); // totalSum is 17

7. Anonymous Functions

Anonymous functions are functions without a name and are often used as arguments for other functions or as closures.

Code Snippet:

javascriptCopy codelet multiply = function(a, b) {
  return a * b;
};

let result = multiply(2, 4); // result is 8

8. Recursion

Recursion is when a function calls itself to solve a problem.

Code Snippet:

javascriptCopy codefunction factorial(n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

let fact = factorial(5); // fact is 120

9. Arrow Function

Arrow functions provide a concise way to define functions.

Code Snippet:

javascriptCopy codeconst add = (a, b) => a + b;

let sum = add(3, 4); // sum is 7

Understanding these concepts about functions is crucial for creating modular and efficient JavaScript code. Functions are a fundamental building block for structuring and organizing your programs.

6. Objects in JavaScript

1. What is an Object?

An object is a collection of key-value pairs, where each key (property) represents a property or behavior, and its associated value holds the data or function.

Code Snippet:

javascriptCopy codelet person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

console.log(person.name); // Output: John
person.greet(); // Output: Hello, my name is John.

2. Types of Objects

There are several types of objects in JavaScript, including the Array, String, Math, Date, Global, and Number objects.

3. Array Object

Arrays are ordered collections of elements.

Code Snippet:

javascriptCopy codelet fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // Output: apple

4. Properties of Array Object

Arrays have properties like length that provide information about the array.

Code Snippet:

javascriptCopy codeconsole.log(fruits.length); // Output: 3

5. Methods of Array Object

Arrays have built-in methods for manipulating and working with elements.

Code Snippet:

javascriptCopy codefruits.push("grape");
console.log(fruits); // Output: ["apple", "banana", "orange", "grape"]

6. String Object

Strings are sequences of characters.

Code Snippet:

javascriptCopy codelet message = "Hello, world!";
console.log(message.length); // Output: 13

7. Properties of String Object

Strings have properties like length that provide information about the string.

Code Snippet:

javascriptCopy codeconsole.log(message.length); // Output: 13

8. Methods of String Object

Strings have built-in methods for manipulating and working with strings.

Code Snippet:

javascriptCopy codeconsole.log(message.toUpperCase()); // Output: HELLO, WORLD!

9. Math Object

The Math object provides mathematical constants and functions.

Code Snippet:

javascriptCopy codelet circleArea = Math.PI * Math.pow(5, 2);
console.log(circleArea); // Output: 78.53981633974483

10. Properties of Math Object

The Math object has properties like PI and E.

Code Snippet:

javascriptCopy codeconsole.log(Math.PI); // Output: 3.141592653589793

11. Methods of Math Object

The Math object has methods for mathematical operations.

Code Snippet:

javascriptCopy codelet randomNumber = Math.random();
console.log(randomNumber); // Output: a random number between 0 and 1

12. Date Object

The Date object represents dates and times.

Code Snippet:

javascriptCopy codelet currentDate = new Date();
console.log(currentDate); // Output: current date and time

13. Methods of Date Object

The Date object has methods for working with dates and times.

Code Snippet:

javascriptCopy codeconsole.log(currentDate.getFullYear()); // Output: current year

14. Global Object

The global object represents the global namespace.

Code Snippet:

javascriptCopy codelet globalVariable = "I am global!";
console.log(window.globalVariable); // Output: I am global! (in a browser environment)

15. Properties of Global Object

The global object has properties like console and Math.

Code Snippet:

javascriptCopy codeconsole.log(console); // Output: console object

16. Methods of Global Object

The global object has methods like setTimeout and setInterval.

Code Snippet:

javascriptCopy codesetTimeout(function() {
  console.log("Delayed message.");
}, 2000); // Output: Delayed message after 2 seconds

17. Number Object

The Number object represents numerical values.

Code Snippet:

javascriptCopy codelet numValue = 42;
console.log(typeof numValue); // Output: number

18. Properties of Number Object

The Number object has properties like MAX_VALUE and MIN_VALUE.

Code Snippet:

javascriptCopy codeconsole.log(Number.MAX_VALUE); // Output: 1.7976931348623157e+308

19. Methods of Number Object

The Number object has methods for working with numbers.

Code Snippet:

javascriptCopy codeconsole.log(Number.isInteger(5)); // Output: true

20. Creating Your Own Objects

You can create your own custom objects with properties and methods.

Code Snippet:

javascriptCopy codefunction Car(make, model) {
  this.make = make;
  this.model = model;
  this.drive = function() {
    console.log(`Driving the ${this.make} ${this.model}.`);
  };
}

let myCar = new Car("Toyota", "Camry");
myCar.drive(); // Output: Driving the Toyota Camry.

21. Defining Methods

Methods can be defined within objects to perform actions.

Code Snippet:

javascriptCopy codelet person = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // Output: Hello, my name is Alice.

Understanding objects and how to work with them is essential for building complex data structures and organizing your JavaScript code effectively. Objects allow you to model real-world entities and their behaviors in your programs.

7. JavaScript Window and Frame Objects

1. Top-level Objects

Top-level objects are objects accessible globally in a browser environment, including window, document, navigator, history, etc.

2. Window Object

The window object represents the browser window or tab.

Creating a Window:

javascriptCopy codelet newWindow = window.open("https://www.example.com");

Communicating with the User:

javascriptCopy codelet name = prompt("What's your name?");
alert(`Hello, ${name}!`);

Working with Timeouts:

javascriptCopy codesetTimeout(function() {
  console.log("Delayed message.");
}, 2000);

3. Location Object

The location object represents the current URL of the browser window.

Properties of Location Object:

javascriptCopy codeconsole.log(location.href);
console.log(location.hostname);

Methods of Location Object:

javascriptCopy codelocation.assign("https://www.example.com");

4. Document Object

The document object represents the current HTML content.

Properties of Document Object:

javascriptCopy codeconsole.log(document.title);

Methods of Document Object:

javascriptCopy codelet element = document.getElementById("myElement");

5. The Navigator Object

The navigator object provides browser and system information.

Properties of Navigator Object:

javascriptCopy codeconsole.log(navigator.userAgent);

Methods of Navigator Object:

javascriptCopy codenavigator.geolocation.getCurrentPosition(function(position) {
  console.log("Latitude:", position.coords.latitude);
});

6. History Object

The history object manages the browser's navigation history.

Properties of History Object:

javascriptCopy codeconsole.log(history.length);

Methods of History Object:

javascriptCopy codehistory.back();

7. Screen Object

The screen object provides screen information.

Properties of Screen Object:

javascriptCopy codeconsole.log(screen.width);

8. Working with Frames

Frames allow displaying multiple web pages within a single browser window.

Creating Frames:

htmlCopy code<iframe src="https://www.example.com"></iframe>

Accessing Frames:

javascriptCopy codelet frameElement = window.frames[0];

Nested Frames:

htmlCopy code<iframe id="frame1">
  <iframe id="frame2"></iframe>
</iframe>

Frame Object Model:

javascriptCopy codelet frameWindow = frameElement.contentWindow;

Frame Element Object:

javascriptCopy codelet frameDocument = frameElement.contentDocument;

Understanding these objects and their properties/methods is crucial for manipulating the browser environment, handling user interactions, navigating web pages, and creating dynamic content.

8. JavaScript Event Handling

1. Events

Events are occurrences triggered by user interactions or other actions in a web page. Examples include clicking a button, hovering over an element, or submitting a form.

2. How Does It Work?

Event handling involves capturing and responding to events that occur during user interactions. JavaScript code is executed when events are detected.

3. Objects and Events

HTML elements are objects, and you can attach event handlers to these elements to respond to specific events.

Creating an Event Handler:

htmlCopy code<button id="myButton">Click Me</button>

javascriptCopy codedocument.getElementById("myButton").addEventListener("click", function() {
  alert("Button Clicked!");
});

Changing Event Handlers:

javascriptCopy codefunction changeText() {
  document.getElementById("myButton").textContent = "Clicked!";
}

document.getElementById("myButton").addEventListener("click", changeText);

4. Managing JavaScript Events

JavaScript provides mechanisms to manage and control event handling, allowing developers to specify how events are handled.

5. Mouse Events

Mouse events are triggered by mouse interactions, such as clicking, moving, and scrolling.

Mouse Click Event:

javascriptCopy codedocument.addEventListener("click", function(event) {
  console.log("Mouse Clicked at:", event.clientX, event.clientY);
});

6. Keyboard Events

Keyboard events are triggered when keys are pressed or released on the keyboard.

Keyboard Keydown Event:

javascriptCopy codedocument.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log("Enter Key Pressed");
  }
});

7. The onLoad and onUnload Events

The onLoad event is triggered when a web page has finished loading, while the onUnload event is triggered before a page is unloaded.

8. Event Simulation

Events can be programmatically simulated to trigger event handlers.

javascriptCopy codelet button = document.getElementById("myButton");
let event = new Event("click");
button.dispatchEvent(event);

9. The Event Object

The event object contains information about the event and its properties.

Accessing Event Type:

javascriptCopy codedocument.addEventListener("click", function(event) {
  console.log("Event Type:", event.type);
});

10. Event Capturing

Event capturing is a phase during event propagation when events are captured from the root to the target element.

javascriptCopy codedocument.addEventListener("click", function() {
  console.log("Document Capturing Phase");
}, true);

11. Turning off Event Capturing

Event capturing can be disabled to allow only event bubbling.

12. Event Bubbling

Event bubbling is a phase during event propagation when events are propagated from the target element up to the root.

13. Preventing Event Bubbling

Event bubbling can be prevented using the stopPropagation() method.

javascriptCopy codedocument.getElementById("myButton").addEventListener("click", function(event) {
  console.log("Button Clicked");
  event.stopPropagation();
});

Mastering event handling is essential for creating interactive and responsive web applications, enabling developers to create engaging user experiences through user interactions and dynamic behavior.

9. JavaScript Exception Handling

1. Exceptions and Errors

Exceptions are unexpected or exceptional events that disrupt the normal flow of a program. Errors are instances of exceptions that occur during program execution.

2. Exception Mechanism

JavaScript's exception mechanism allows you to handle and recover from runtime errors and exceptions that may occur during program execution.

3. "try-catch-finally" Constructions

The try-catch-finally block is used to handle exceptions gracefully. Code within the try block is executed, and if an exception occurs, it's caught and handled in the catch block. The finally block is executed regardless of whether an exception occurred or not.

Example:

javascriptCopy codetry {
  // Code that may cause an exception
} catch (error) {
  // Handle the exception
} finally {
  // Code that runs regardless of whether an exception occurred
}

4. Throwing Exceptions

You can manually throw exceptions using the throw statement. This allows you to create custom error conditions and handle them using try-catch blocks.

Example:

javascriptCopy codefunction divide(a, b) {
  if (b === 0) {
    throw new Error("Division by zero");
  }
  return a / b;
}

try {
  let result = divide(10, 0);
} catch (error) {
  console.error(error.message);
}

5. Error Object

The Error object is a built-in constructor function used to create error instances.

6. Properties of Error Object

The Error object has properties like name and message that provide information about the error.

Example:

javascriptCopy codetry {
  // Code that may cause an exception
} catch (error) {
  console.log("Error Name:", error.name);
  console.log("Error Message:", error.message);
}

7. Methods of Error Object

The Error object has methods like toString() for converting the error object to a string representation.

Example:

javascriptCopy codetry {
  // Code that may cause an exception
} catch (error) {
  console.error(error.toString());
}

Exception handling is crucial for creating robust and error-tolerant applications. It allows you to gracefully handle unexpected situations and prevent your program from crashing. By understanding these concepts and utilizing them effectively, you can improve the reliability and stability of your JavaScript code.

10. Form

1. The Form Object

The form object represents an HTML <form> element, allowing you to access and manipulate form elements and their data.

2. Accessing Forms within JavaScript

You can access forms using the document.forms collection.

Example:

javascriptCopy codelet myForm = document.forms["myForm"];

3. Accessing Form Elements

Form elements can be accessed using their name attribute or through the elements collection of the form object.

Example:

javascriptCopy codelet usernameInput = myForm.elements["username"];

4. About <input> Element Objects

The <input> element is used to create various types of form controls, such as text fields, checkboxes, radio buttons, etc.

5. Properties of Form Object

The form object has properties like length, name, and method, providing information about the form.

Example:

javascriptCopy codeconsole.log(myForm.length);

6. Methods of Form Object

The form object provides methods like submit() and reset() for submitting and resetting the form.

Example:

javascriptCopy codemyForm.submit();

7. Fieldset and Legend Element Objects

The <fieldset> and <legend> elements are used to group related form controls and provide a label for the group.

8. Label Element Object

The <label> element is used to associate a label with a form control, improving accessibility and user experience.

9. Text Input Object

The text input object represents a single-line text input field.

10. Properties of Text Input Object

The text input object has properties like type, name, and value.

Example:

javascriptCopy codeconsole.log(usernameInput.value);

11. Methods of Text Input Object

The text input object provides methods like focus() and select() for interacting with the input field.

Example:

javascriptCopy codeusernameInput.focus();

12. Password Input Object

The password input object is similar to the text input but masks the entered characters.

13. Hidden Input Object

The hidden input object is used to store data on the form that is not displayed to the user.

14. Textarea Element Object

The <textarea> element is used to create multi-line text input fields.

15. Properties of Textarea Element Object

The textarea element has properties like name, value, and rows.

Example:

javascriptCopy codelet feedback = myForm.elements["feedback"];
console.log(feedback.value);

16. Button Element Object

The <button> element is used to create clickable buttons within the form.

17. Checkbox Input Object

The checkbox input object represents a checkbox form control.

18. Properties of Checkbox Input Object

The checkbox input object has properties like checked and value.

Example:

javascriptCopy codelet agreeCheckbox = myForm.elements["agree"];
console.log(agreeCheckbox.checked);

19. Method of Checkbox Input Object

Checkbox input objects provide methods like click() for programmatically checking/unchecking.

Example:

javascriptCopy codeagreeCheckbox.click();

20. Radio Input Object

The radio input object represents a radio button form control.

21. Properties of Radio Input Object

The radio input object has properties like checked and value.

Example:

javascriptCopy codelet genderRadio = myForm.elements["gender"];
console.log(genderRadio.value);

22. Methods of Radio Input Object

Radio input objects provide methods like click() for interacting with radio buttons.

23. Image Input Object

The image input object represents an image button within a form.

24. Properties of Image Input Object

The image input object has properties like src, alt, and width.

Example:

javascriptCopy codelet submitImage = myForm.elements["submitImage"];
console.log(submitImage.src);

25. Select Element Object

The <select> element is used to create a dropdown selection list.

26. Properties of Select Element Object

The select element has properties like options, selectedIndex, and multiple.

Example:

javascriptCopy codelet countrySelect = myForm.elements["country"];
console.log(countrySelect.options.length);

27. Methods of Select Element Object

The select element provides methods like add() and remove() for modifying options.

Example:

javascriptCopy codelet newOption = new Option("Canada", "CA");
countrySelect.add(newOption);

28. Option Element Object

The <option> element is used to create options within a select element.

29. File Input Element Object

The file input object represents a file selection form control.

Understanding these form-related concepts is crucial for building interactive and user-friendly web forms, collecting user input, and submitting data to servers..

11. Document Object Model (DOM)

1. Document Object Model (DOM) and W3C

The Document Object Model (DOM) is a programming interface provided by browsers to interact with HTML and XML documents. It represents the structure of a document as a tree of objects, allowing scripts to access, manipulate, and update document content.

2. DOM Levels

The DOM is divided into levels that define different specifications and functionality. For example, DOM Level 1 introduced core features, while later levels added more advanced capabilities.

3. DOM and JavaScript

JavaScript provides methods and properties to access and manipulate the DOM, allowing developers to create dynamic and interactive web pages.

4. New DOM Concepts

Newer DOM concepts and techniques include more powerful ways to manipulate documents, such as selecting elements, changing attributes, and modifying content.

5. Element Referencing

DOM methods like getElementById(), getElementsByClassName(), and querySelector() allow you to reference and interact with specific elements in the document.

Example:

javascriptCopy codelet myElement = document.getElementById("myElement");
myElement.textContent = "Updated Content";

6. Hierarchy of Nodes

The DOM represents documents as a hierarchy of nodes, with elements, attributes, and text forming a structured tree.

7. Node Properties

Nodes have properties like nodeName, nodeValue, and nodeType that provide information about their type and content.

Example:

javascriptCopy codelet element = document.getElementById("myElement");
console.log(element.nodeName);

8. Node Methods

Nodes have methods like appendChild(), removeChild(), and cloneNode() for adding, removing, and duplicating nodes.

Example:

javascriptCopy codelet parent = document.getElementById("parentElement");
let child = document.createElement("div");
parent.appendChild(child);

9. Generating New Node Content

You can generate and insert new node content using DOM methods.

Example:

javascriptCopy codelet newParagraph = document.createElement("p");
newParagraph.textContent = "New Paragraph";
document.body.appendChild(newParagraph);

10. Replacing Node Content

Existing node content can be replaced using methods like replaceChild().

Example:

javascriptCopy codelet parent = document.getElementById("parentElement");
let newChild = document.createElement("div");
let oldChild = parent.firstChild;
parent.replaceChild(newChild, oldChild);

Understanding the Document Object Model (DOM) is fundamental for creating dynamic and interactive web applications. By leveraging DOM methods and properties, you can manipulate the structure and content of your documents, enabling rich user experiences and seamless interactions.