JavaScript Objects Overview

Creating Objects

• Objects are used to store data in key-value pairs.
• To create an object, use curly braces {} and separate key-value pairs with colons :
• Keys are strings, and values can be any data type, including other objects.

Getting Values from Objects

• Access values using dot notation objectName.propertyName or bracket notation objectName["propertyName"].

Iterating over Objects

• Use the for...in loop to iterate through the keys of an object.
• Inside the loop, you can access both the key and the value.

Nested Objects

• Objects can contain other objects, creating a nested structure.
• Access nested properties using dot notation or bracket notation, chaining them together.

Arrays and Objects

• Arrays store collections of items.
• Objects can contain arrays as values.

Using for...in

• The for...in loop is used to iterate over the properties of an object.
• It accesses both the key and value of each property.

Object Methods

• Methods are functions defined within an object.
• They allow you to perform actions or calculations specific to the object.

Assignment: Calculate Bill

• Create an object to represent a restaurant bill.
• Store menu items, prices, and quantities as object properties.
• Use methods to calculate subtotal, tax, and total bill amount.

What is JSON?

• JSON (JavaScript Object Notation) is a lightweight data-interchange format.
• It's used to exchange data between a server and a web application.
• JSON is based on JavaScript's object syntax.

Methods of JSON

• JSON.stringify() converts JavaScript objects into JSON strings.
• JSON.parse() converts JSON strings into JavaScript objects.

WebStorage

• LocalStorage stores data permanently in the user's browser.
• SessionStorage stores data only for the current browser session.

DOM (Document Object Model)

• Introduction to DOM: It represents a webpage as a tree structure.
• Accessing DOM: Use JavaScript to interact with elements in the web document.
• Fetching Elements:
  • Retrieve elements by ID: document.getElementById("elementId")
  • Retrieve by tag name: document.getElementsByTagName("tagName")
  • Retrieve by class name: document.getElementsByClassName("className")
  • QuerySelector:
    • document.querySelector("selector") returns the first element matching the selector.
    • document.querySelectorAll("selector") returns all elements matching the selector.
• Modifying Elements:
  • Change innerHTML: element.innerHTML = "new content";
  • Change text content: element.textContent = "new text";
  • Change attribute values: element.setAttribute("attributeName", "newValue");
• Creating Elements: Create elements using document.createElement("tagName")
• Adding/Appending Elements:
  • Use appendChild() to add elements as children of a parent element.
  • Use insertBefore() to insert elements before a specified sibling element.

Changing Styles of Elements

• Use element.style to access and modify styles associated with an element.
• You can set styles using CSS properties like backgroundColor, color, fontSize, width, etc.

Event Handling

• Events: Occurrences that happen in the browser, like mouse clicks, key presses, form submissions, etc.
• Event Listeners: Attach event listeners to elements using methods like addEventListener(). The listener is executed when the event occurs.
• Event Objects: An event object is passed to the event listener function, containing information about the event.

Mouse Events

• click: Occurs when the mouse button is clicked.
• dblclick: Occurs on a double click.
• mouseover: Occurs when the mouse pointer enters an element.
• mouseout: Occurs when the mouse pointer leaves an element.

Keyboard Events

• keydown: Occurs when a key is pressed down.
• keyup: Occurs when a key is released.
• keypress: Occurs when a key is held down and released.

Form and Control Events

• submit: Occurs when the form is submitted.
• change: Occurs when the value of a form control (like an input field) changes.

Introduction to Asynchronous Programming

• Asynchronous programming allows code to execute without blocking other tasks.
• JavaScript's event loop handles asynchronous operations.

Event Loop

• The event loop continuously checks the call stack and the task queue.
• Tasks are moved from the task queue to the call stack for execution.

Callbacks

• Functions passed as arguments to other functions.
• They are used to handle the completion of asynchronous operations.

setTimeout and setInterval

• setTimeout: Executes a function after a specified delay.
• setInterval: Executes a function repeatedly at fixed intervals.

Promises

• Promise: Represents the eventual completion or failure of an asynchronous operation.
• States: They have three states: pending, fulfilled, and rejected.
• .then(): Executes after the promise is fulfilled (successful completion).
• .catch(): Executes if the promise is rejected (an error occurred).

Promise Chaining

• Chains multiple .then() and .catch() to handle consecutive asynchronous operations.

Error Handling with Promises

• Use .catch() to handle errors that may occur within a promise chain.
• You can access the error object within the .catch() handler for debugging.

async and await

• Provides a cleaner syntax for working with promises.
• async keyword indicates that the function is asynchronous.
• await keyword pauses the execution until the promise is settled.
• It allows you to write asynchronous code in a more synchronous style.

Ajax and Fetch

• Ajax (Asynchronous JavaScript and XML): Allows web pages to communicate with servers in the background without reloading the entire page.
• Fetch: A modern way to make network requests using promises in JavaScript.
• Example using Fetch:

  fetch('https://example.com/api/data')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error fetching data:', error));
  

Explore the fundamentals of JavaScript objects, including how to create them, access their values, and iterate over their keys. This quiz covers key concepts like nesting and using arrays within objects. Test your understanding of object methods and the for...in loop.