Javascript day2

1. forEach Method

• The forEach method is used to execute a function on each element of an array.

• It is typically used for performing side effects, like logging or updating external variables.

• It does not return a new array and instead returns undefined.

•     array.forEach(callback(currentValue, index, array), thisArg)
  

  • callback: Function to execute for each element.

    • currentValue: The current element being processed.

    • index (optional): The index of the current element.

    • array (optional): The array forEach is called upon.

  • thisArg (optional): Value to use as this when executing the callback.

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((num, index) => {
  console.log(`Index: ${index}, Value: ${num}`);
});

map Method

• The map method is used to create a new array by applying a function to each element of the original array.

• It is used for data transformation and does not mutate the original array.

•     const newArray = array.map(callback(currentValue, index, array), thisArg)
  

  • callback: Function to execute on each element.

    • currentValue: The current element being processed.

    • index (optional): The index of the current element.

    • array (optional): The array map is called upon.

  • thisArg (optional): Value to use as this when executing the callback.

const numbers = [1, 2, 3, 4, 5];

// Squaring each number
const squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers);

reduce Method

• The reduce method is used to apply a function to an accumulator and each element in the array to reduce it to a single value.

• It is often used for summing up numbers, concatenating strings, or flattening arrays.

const result = array.reduce(callback(accumulator, currentValue, index, array), initialValue)

• callback: Function executed on each element.

  • accumulator: The accumulated result of the callback function.

  • currentValue: The current element being processed.

  • index (optional): The index of the current element.

  • array (optional): The array reduce is called upon.

• initialValue (optional): Value to use as the first argument to the first call of the callback.

const numbers = [1, 2, 3, 4, 5];

// Summing all numbers
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum);

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is commonly used for exchanging data between a client and a server in web applications.

---

Key Characteristics of JSON

1. Data Representation:

   • JSON represents data as key-value pairs.

   • Keys are strings, and values can be strings, numbers, objects, arrays, true, false, or null.

2. Structure:

   • JSON data can be structured as:

     • An object: { "key": "value" }

     • An array: [ { "key": "value" }, { "key": "value" } ]

3. Text-Based:

   • JSON is a plain text format, making it language-independent.

4. Used in APIs:

   • JSON is widely used for transmitting structured data over networks.

---

JSON Syntax

• JSON objects are enclosed in curly braces {}.

• Key-value pairs are separated by colons :.

• Multiple key-value pairs are separated by commas ,.

• Strings must be in double quotes ".

Example of JSON Data

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "skills": ["JavaScript", "Python", "Django"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "zip": "10001"
  }
}

---

JavaScript is single-threaded by nature, meaning it can execute one task at a time. To handle multiple tasks efficiently, it uses asynchronous programming to perform long-running operations (e.g., API calls, file I/O) without blocking the main thread.

Key Concepts of Asynchronous Programming

1. Synchronous vs Asynchronous:

   • Synchronous: Code is executed line by line, and each line must finish before the next starts.

   • Asynchronous: Code allows other tasks to run while waiting for a longer process to complete.

2. Callbacks:

   • A function passed as an argument to another function and executed later.

   • Common in earlier implementations of async programming but can lead to "callback hell."

Example:

    javascriptCopy codesetTimeout(() => {
      console.log('Hello after 2 seconds');
    }, 2000);

Introduce Promises:

3.   const fetchData = new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve("Data fetched!");
       }, 2000);
     });
   
     fetchData.then(data => console.log(data));
   

   • Explain how Promises handle asynchronous results with .then() and .catch().

Understanding Promises, Async/Await, and Fetching Data

Let's break things down into simple steps and examples to explain how Promises, Async/Await, and API fetching work.

---

1. Promises in Simple Terms

A Promise is like a promise someone makes to you. They say, "I will give you something in the future, but I don't know when." The Promise can either:

• Fulfill (complete successfully).

• Reject (fail for some reason).

Promise Example

Imagine you're asking a friend to get you a book:

    function getBook() {
      return new Promise((resolve, reject) => {
        const isAvailable = true; // Simulate the book being available or not

        setTimeout(() => {
          if (isAvailable) {
            resolve("Book is available!");  // Success
          } else {
            reject("Book is out of stock!"); // Failure
          }
        }, 2000);  // Simulate waiting for 2 seconds
      });
    }

    getBook()
      .then((message) => {
        console.log(message);  // If the Promise is resolved
      })
      .catch((error) => {
        console.error(error);  // If the Promise is rejected
      });

Explanation of the Example:

• getBook() returns a Promise.

• After 2 seconds, it either resolves with "Book is available!" (if isAvailable is true), or it rejects with "Book is out of stock!".

• .then() is used to handle the result if the Promise is fulfilled.

• .catch() is used to handle errors if the Promise is rejected.

Output if the book is available:

     codeBook is available!

Here's how you can rewrite the getBook example using async and await:

Using async and await

     function getBook() {
      return new Promise((resolve, reject) => {
        const isAvailable = true; // Simulate the book being available or not

        setTimeout(() => {
          if (isAvailable) {
            resolve("Book is available!");  // Success
          } else {
            reject("Book is out of stock!"); // Failure
          }
        }, 2000);  // Simulate waiting for 2 seconds
      });
    }

    // Using async/await to call the getBook function
    async function checkBookAvailability() {
      try {
        const message = await getBook();  // Wait for the getBook promise to resolve
        console.log(message);  // If the Promise is resolved
      } catch (error) {
        console.error(error);  // If the Promise is rejected
      }
    }

    checkBookAvailability();  // Call the function that handles async/await

Explanation:

1. async function checkBookAvailability():

   • The checkBookAvailability function is marked as async, which means it will return a Promise.

   • Inside this function, we use await to wait for the getBook() Promise to resolve or reject.

2. await getBook():

   • The await keyword pauses the execution of the code until getBook() resolves or rejects.

   • If the Promise is resolved (resolve("Book is available!")), the message is logged.

   • If the Promise is rejected (reject("Book is out of stock!")), the error is caught by the catch() block and logged.

3. Error Handling:

   • The try...catch block is used to handle any errors. If the Promise rejects, the catch block is triggered to handle the error.

---

Output (if the book is available):

    Book is available!

---

Output (if the book is out of stock):

    Book is out of stock!

---

Key Differences:

• Using Promises: We chain .then() and .catch() to handle success or failure.

• Using Async/Await: We write cleaner, more synchronous-looking code using await to wait for the Promise to resolve and handle errors with try...catch.

Understanding DOM Manipulation and Creating a Basic Project

The DOM (Document Object Model) is like the blueprint of an HTML page. It represents the structure of the webpage, where each element (like a <div>, <p>, or <button>) is an object. You can use JavaScript to change, remove, or add elements in the DOM.

Basic Concepts of DOM Manipulation:

1. Selecting Elements: To manipulate an element, you first need to select it.

   • document.getElementById("id"): Selects an element by its ID.

   • document.getElementsByClassName("class"): Selects elements by their class name.

   • document.querySelector("selector"): Selects the first element that matches the given CSS selector.

   • document.querySelectorAll("selector"): Selects all elements that match the given CSS selector.

2. Changing Content or Attributes:

   • .innerText or .textContent: Change the text inside an element.

   • .innerHTML: Change the HTML content inside an element.

   • .style: Change the styles (e.g., color, font size) of an element.

   • .setAttribute(): Change an attribute of an element (like the href of a link).

3. Creating or Removing Elements:

   • document.createElement(): Create a new HTML element.

   • appendChild(): Add a new child element to an existing element.

   • removeChild(): Remove a child element from its parent.

Simple DOM Manipulation Project: Change Background Color Using Multiple Options

Here’s a simple project where the user can click on different buttons to change the background color to a specific color based on the button clicked.

HTML (index.html)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Background Color Changer</title>
    </head>
    <body>

      <h1>Click a button to change the background color!</h1>

      <!-- Buttons to change background color -->
      <button class="color-btn" data-color="red">Red</button>
      <button class="color-btn" data-color="green">Green</button>
      <button class="color-btn" data-color="blue">Blue</button>
      <button class="color-btn" data-color="yellow">Yellow</button>
      <button class="color-btn" data-color="purple">Purple</button>

      <script src="script.js"></script>
    </body>
    </html>

JavaScript (script.js)

    // Get all the buttons with the class "color-btn"
    const buttons = document.querySelectorAll('.color-btn');

    // Function to change background color based on the clicked button
    function changeBackgroundColor(event) {
      // Get the color from the data-color attribute of the clicked button
      const color = event.target.getAttribute('data-color');

      // Change the background color of the body
      document.body.style.backgroundColor = color;
    }

    // Add an event listener to each button
    buttons.forEach(button => {
      button.addEventListener('click', changeBackgroundColor);
    });

How This Works:

1. HTML Structure:

   • There are multiple buttons, each with the class color-btn.

   • Each button has a data-color attribute that holds the color value that will be applied to the background when clicked.

2. JavaScript Logic:

   • Selecting the Buttons: We use document.querySelectorAll('.color-btn') to select all buttons with the color-btn class.

   • Adding Event Listeners: We loop over all the buttons and add an eventListener for the click event. When a button is clicked, the changeBackgroundColor function is triggered.

   • Changing the Background Color: The color is retrieved from the data-color attribute of the button that was clicked (event.target.getAttribute('data-color')), and the background color of the page is updated accordingly (document.body.style.backgroundColor).

What Happens:

• When a user clicks on any of the buttons (Red, Green, Blue, Yellow, Purple), the background color of the page changes to the corresponding color.

Learning Points for Students:

1. DOM Selection: Using querySelectorAll() to select multiple elements with the same class name.

2. Event Handling: Attaching event listeners to multiple buttons using forEach() loop.

3. Custom Data Attributes: Using data-* attributes to store values (like colors) that can be accessed and used in JavaScript.

4. Dynamic Style Manipulation: Changing the page's background color by modifying the style.backgroundColor property.

---