Unit 6: Advanced JavaScript

Objects & Types:

JavaScript treats almost everything as an Object. An object is a collection of key-value pairs.

• String: Manipulated via methods like .length, .toUpperCase().
• Number: Handles integers and floats. Parsed via parseInt().
• Boolean: Represents logical true or false.
• Array: A special type of object used to store ordered lists. (e.g., let arr = [1, 2, 3];).

Scope: Determines the accessibility of variables.
- Global Scope: Variables declared outside any function. Accessible anywhere.
- Local (Function/Block) Scope: Variables declared inside a function or block (using let/const). They are destroyed from memory once the block finishes executing.

let globalVar = "University";

function processData() {
    let localVar = "Student";
    console.log(globalVar); // Works!
    console.log(localVar);  // Works!
}

console.log(localVar); // ERROR!
                

Arrays are the most commonly used data structure in JavaScript. The Array prototype provides powerful methods for data transformation.

Live Method Tester

Enter a JavaScript expression below and click Run to see the result. Try these examples:

• [1,2,3].map(x => x * 2)
• [5,2,8,1].sort()
• "hello world".toUpperCase()
• (3.14159).toFixed(2)

Strings and Numbers come with built-in methods accessible via the dot operator.

When an event fires on a nested element, it travels through three phases:

1. Capturing — Event travels from window down to the target element.
2. Target — Event reaches the element that was clicked.
3. Bubbling — Event travels back up from target to window.

By default, event listeners fire during the bubbling phase. To listen during capturing, pass { capture: true } as the third argument to addEventListener().

// Capturing phase listeners (third argument: true)
outer.addEventListener('click', () => {
    logEvent('CAPTURING: Outer div caught event on way DOWN', 'capture');
}, true);

inner.addEventListener('click', () => {
    logEvent('CAPTURING: Inner div caught event on way DOWN', 'capture');
}, true);

// Target phase listener (default: bubbling phase)
target.addEventListener('click', () => {
    logEvent('TARGET: The button itself received the click', 'target');
});

// Bubbling phase listeners (third argument omitted / false)
inner.addEventListener('click', () => {
    logEvent('BUBBLING: Inner div caught event on way UP', 'bubble');
});

outer.addEventListener('click', () => {
    logEvent('BUBBLING: Outer div caught event on way UP', 'bubble');
});

Events are categorized by the type of user interaction. Here are the most commonly used ones:

Theory & Concepts:

• Event Handling: Binding JavaScript functions to HTML DOM interactions. Examples: onclick (mouse click), onsubmit (form submission), oninput (typing).
• Error Handling (try...catch): Code can fail. Instead of the browser crashing silently, we wrap risky code in a try block. If it fails, the engine throws control to the catch block, allowing us to handle the error gracefully.
• Form Validation: Before sending data to a server (Unit 1), the client (Browser) must verify the data structure is correct. This saves server processing power and provides immediate user feedback.

<!-- Pattern attribute for inline validation -->
<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">

// JavaScript validation with checkValidity() / reportValidity()
function validateForm() {
    const name = document.getElementById('stuName').value.trim();

    if (name.length < 3) {
        document.getElementById('nameErr').style.display = 'block';
        return false;
    }

    // HTML5 validation API
    const input = document.getElementById('stuReg');
    if (!input.checkValidity()) {
        input.reportValidity();
        return false;
    }

    return true;
}