const person = {
  name: 'Alex',
  age: 30,
  greet() { // Shorthand method syntax
    console.log(`Hi, I'm ${this.name}!`);
  }
};

person.greet(); // Output: Hi, I'm Alex!

// Get keys, values, entries
console.log(Object.keys(person));   // ['name', 'age', 'greet']
console.log(Object.values(person)); // ['Alex', 30, function]
console.log(Object.entries(person));// [['name', 'Alex'], ...]
                 

10. DOM Manipulation (Detailed) 🌳➡️🔧

The DOM (Document Object Model) is the browser's representation of the HTML structure. JS interacts with the DOM to make changes.

• Selecting Elements (Most Common):
  • document.getElementById('the-id'): Gets the single element with that ID.
  • document.querySelector('any-css-selector'): Gets the **first** element matching the selector (very powerful!). Ex: .card, #nav > ul > li:first-child, button[data-action="save"].
  • document.querySelectorAll('any-css-selector'): Gets **all** elements matching the selector as a static NodeList (array-like, can iterate with forEach).
• Traversing (Moving Between Elements): element.parentElement, element.children (HTMLCollection), element.firstElementChild, element.lastElementChild, element.previousElementSibling, element.nextElementSibling, element.closest('selector') (finds nearest ancestor matching selector).
• Modifying Content & HTML:
  • element.textContent = "Plain text only": Safer, treats input as text.
  • element.innerHTML = "<strong>HTML allowed</strong>": Parses HTML string. **Security risk** if using user input directly!
• Modifying Attributes: element.setAttribute('href', '#'), element.getAttribute('src'), element.removeAttribute('disabled'). Direct property access often works for standard attributes: img.src = '...', input.value = '...', link.href = '...'. Use element.dataset.yourName for `data-your-name` attributes.
• Modifying Styles & Classes (Best Practice!):
  • element.classList.add('active', 'highlight')
  • element.classList.remove('loading')
  • element.classList.toggle('is-visible') (Adds if absent, removes if present)
  • element.classList.contains('selected') (Returns true/false)
  • Avoid direct `element.style.property = 'value'` for major styling; use classes instead for better separation and maintainability. Use `style` for dynamic values calculated in JS.
• Creating & Adding/Removing Elements:
  • const newDiv = document.createElement('div');
  • newDiv.textContent = "I'm new!";
  • parentElement.append(newDiv); (Modern, adds to end, accepts multiple args/strings)
  • parentElement.prepend(newDiv); (Modern, adds to start)
  • elementToInsertBefore.before(newDiv); (Modern)
  • elementToInsertAfter.after(newDiv); (Modern)
  • elementToRemove.remove(); (Modern)

11. Events & Event Listeners (Detailed) 🖱️⌨️

Making the page react to things happening (user clicks, key presses, page loading, etc.).

• Event Listener:** Attach a function (handler/callback) to run when an event occurs on an element. Use addEventListener (preferred over older `on...` attributes/properties).
• Syntax:** element.addEventListener('eventName', handlerFunction, options);
  • `options`: Optional object, e.g., { once: true } (run handler only once), { capture: true } (run in capturing phase instead of bubbling).
• Removing:** element.removeEventListener('eventName', handlerFunction); (Must be the *exact same function reference* used in `addEventListener`).
• The Event Object (`event`):** Automatically passed to the handler function. Contains useful info:
  • event.target: The specific element that triggered the event (e.g., the exact button clicked).
  • event.currentTarget: The element the listener is attached to (useful with event delegation).
  • event.preventDefault(): Stops the browser's default action (e.g., stops form submission, stops link navigation).
  • event.stopPropagation(): Stops the event from bubbling up to parent elements.
  • Mouse events: event.clientX, event.clientY (coordinates).
  • Keyboard events: event.key (e.g., "Enter", "a"), event.code (e.g., "KeyA"), event.altKey, event.ctrlKey, event.shiftKey.
• Event Propagation (Bubbling & Capturing):** Events travel down the DOM (capturing phase) and then back up (bubbling phase). Listeners usually run during bubbling (default).
• Event Delegation:** Attach a single listener to a parent element instead of many listeners to children. Check `event.target` inside the handler to see which child was actually interacted with. More efficient, handles dynamically added elements.

// Event Delegation Example
const list = document.querySelector('#my-list'); // Assuming 


if (list) {
  list.addEventListener('click', (event) => {
    // Check if the clicked element (event.target) is an LI inside the list
    if (event.target.tagName === 'LI') {
      console.log('Clicked on list item:', event.target.textContent);
      event.target.classList.toggle('selected');
    }
  });
}
                 

// Fetching data with async/await and error handling
async function fetchPosts() {
  const apiUrl = 'https://jsonplaceholder.typicode.com/posts?_limit=5'; // Get 5 posts
  console.log('Fetching posts...');
  try {
    // Wait for the fetch request to complete
    const response = await fetch(apiUrl);

    // Check if the request was successful (status 200-299)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Wait for the response body to be parsed as JSON
    const posts = await response.json();

    console.log('Posts received:', posts);
    // Now you could display these posts in the DOM
    return posts;

  } catch (error) {
    // Handle errors from fetch() or response.ok check
    console.error('Could not fetch posts:', error);
    // Display an error message to the user in the DOM
  }
}

// Call the async function
// fetchPosts();