JavaScript in the Front End

// ── the three original methods ─────────────────────────────────
document.getElementById("here");              // ONE element (ids are unique)
document.getElementsByClassName("thumb");     // an HTMLCollection
document.getElementsByTagName("li");          // an HTMLCollection

// ── the newer query methods: you write CSS SELECTORS ───────────
document.querySelector("#main a");             // the FIRST element that matches
document.querySelectorAll("#menu li");         // a NodeList of ALL matches

// Anything you can write in a stylesheet works here:
document.querySelectorAll("section > p.intro:first-child");
document.querySelectorAll('a[href$=".pdf"]');

// ── THE COLLECTION TRAP (slide 6) ──────────────────────────────
//   querySelectorAll  → NodeList      → forEach WORKS
//   getElementsBy*    → HTMLCollection → forEach DOES NOT
document.querySelectorAll("li").forEach(li => console.log(li.textContent));   // ✓
document.getElementsByTagName("li").forEach(...);                          // ✗ TypeError

// Two ways round it:
[...document.getElementsByTagName("li")].forEach(li => { });   // spread into an array
for (let li of document.getElementsByTagName("li")) { }       // for…of works on both

<!-- given this markup -->
<p id="here">hello <span>there</span></p>
<ul><li>France</li><li>Spain</li><li>Thailand</li></ul>
<div id="main">
  <a href="somewhere.html"><img src="whatever.gif" class="thumb"></a>
</div>

const node = document.getElementById("here");
console.log(node.innerHTML);    // hello <span>there</span>   ← tags INCLUDED
console.log(node.textContent);  // "hello there"              ← tags STRIPPED

const items = document.getElementsByTagName("li");
for (let i = 0; i < items.length; i++) console.log(items[i].textContent);
// France, Spain, Thailand

const link = document.querySelector("#main a");
console.log(link.href);         // somewhere.html
const img  = document.querySelector("#main img");
console.log(img.src);           // whatever.gif
console.log(img.className);     // thumb

// ── 1. Direct style property. Works, but sets an INLINE style.
//      Note the naming: CSS background-color → JS backgroundColor.
const node = document.getElementById("someId");
node.style.backgroundColor = "#FFFF00";
node.style.borderWidth = "3px";

// ── 2. className — replaces the WHOLE class attribute
node.className = "card active";

// ── 3. classList — PREFERRED. Surgical, and reads better.
node.classList.add("active");
node.classList.remove("hidden");
node.classList.toggle("shadow");      // on if off, off if on
node.classList.contains("active");    // true / false

// WHY 3 beats 1: the styling stays in the stylesheet where it belongs,
// so you change the element's STATE and let CSS decide what that looks like.
// It is the same separation-of-concerns argument from chapter 3.

// The slide 15 exercise, all three ways.
// makeArticle("manager", "Director", "Salah", "Abed", "[email protected]")

// ── 1. innerHTML, as a declaration ─────────────────────────────
function makeArticle(id, position, name, lastName, email) {
    document.getElementById(id).innerHTML = `
        <article>
            <h2>Position: ${position}</h2>
            <p>Name: ${name}</p>
            <p>Last Name: ${lastName}</p>
            <p>Email: ${email}</p>
        </article>`;
}

// ── 2. the same thing as an ARROW function ─────────────────────
const makeArticle2 = (id, position, name, lastName, email) => {
    document.getElementById(id).innerHTML =
        `<article><h2>Position: ${position}</h2><p>Name: ${name}</p>` +
        `<p>Last Name: ${lastName}</p><p>Email: ${email}</p></article>`;
};

// ── 3. as a CONSTRUCTOR with a method (chapter 4, slide 50) ────
function Employee(position, name, lastName, email) {
    this.position = position; this.name = name;
    this.lastName = lastName; this.email = email;
    this.toHTML = function () {
        return `<article><h2>Position: ${this.position}</h2>` +
               `<p>Name: ${this.name}</p><p>Last Name: ${this.lastName}</p>` +
               `<p>Email: ${this.email}</p></article>`;
    };
}
document.getElementById("manager").innerHTML =
    new Employee("Director", "Salah", "Abed", "[email protected]").toHTML();

// The four insertAdjacent* positions:
//   <!-- beforebegin -->
//   <p>
//     <!-- afterbegin -->   foo   <!-- beforeend -->
//   </p>
//   <!-- afterend -->

// The slide 20 exercise: makeArticle with DOM methods instead of innerHTML.
// More lines, but no reparse and nothing can be injected.
function makeArticleDOM(id, position, name, lastName, email) {
    const target  = document.getElementById(id);
    const article = document.createElement("article");

    const h2 = document.createElement("h2");
    h2.textContent = `Position: ${position}`;         // textContent, not innerHTML
    article.appendChild(h2);

    [["Name", name], ["Last Name", lastName], ["Email", email]]
        .forEach(([label, val]) => {
            const p = document.createElement("p");
            p.appendChild(document.createTextNode(`${label}: ${val}`));
            article.appendChild(p);
        });

    target.replaceChildren(article);   // or: target.innerHTML = ""; target.appendChild(article);
}

<!-- Custom data-* attributes let you attach data to an element -->
<div id="container" data-userid="2356" data-user-name="Salah">
  <p id="display">The user ID is:</p>
</div>

<script>
const container = document.getElementById("container");
const user_id   = container.dataset.userid;    // data-userid    → userid
const user_name = container.dataset.userName;  // data-user-NAME → userName  ← camelCase!

container.appendChild(document.createTextNode(`User info: ${user_id}, ${user_name}`));
</script>

// NAMING RULE: hyphens in the attribute become camelCase in dataset.
// data-user-name → dataset.userName. Getting this wrong gives undefined
// with no error, which makes it a nasty bug to find.

// With one of these, your DOM code can live ANYWHERE — even in <head> —
// as long as it does not touch the DOM outside the handler.
document.addEventListener('DOMContentLoaded', function () {

    const menu = document.querySelectorAll("#menu li");
    for (let item of menu) {
        item.addEventListener("click", function () {
            item.classList.toggle('shadow');
        });
    }

    const heading = document.querySelector("h3");
    heading.addEventListener('click', function () {
        heading.classList.toggle('shadow');
    });
});

// Define a handler, then REGISTER it on an element node by passing
// the callback to addEventListener().
function named() { alert("a named handler"); }
document.getElementById("btn").addEventListener("click", named);
//                                                        ↑ NO parentheses.
//   named   passes the function.   named()  CALLS it and passes the result.

// Far more common: an ANONYMOUS function. Three equivalent versions:
const btn = document.getElementById("btn");
btn.addEventListener("click", function () { alert("anonymous function"); });

document.querySelector("#btn").addEventListener("click", function () {
    alert("a different approach, same result");
});

document.querySelector("#btn").addEventListener("click", () => {
    alert("arrow syntax, same result");
});

// THE EVENT OBJECT: add a parameter (conventionally e) and the browser
// hands you an object describing what happened.
btn.addEventListener("click", function (e) {
    console.log(e.type);           // "click"
    console.log(e.target);         // the element that GENERATED the event
    console.log(e.currentTarget);  // the element the handler is ATTACHED to
});

   <html>
     <aside id="cart">
       <div class="item">
         <button class="plus">+</button>   ← you click HERE (the event TARGET)
       </div>
     </aside>
   </html>

   ① CAPTURING PHASE  — outermost inward
        html → aside → div → button
        The browser checks each ancestor starting from the OUTERMOST
        (<html>) and runs any handler registered FOR THIS PHASE,
        until it reaches the element that triggered the event.

   ② BUBBLING PHASE   — target outward   ← THE DEFAULT
        button → div → aside → html
        The opposite: it checks the triggering element first, then
        works back out through every ancestor.

// addEventListener's third argument picks the phase:
el.addEventListener("click", handler);          // bubbling  (default)
el.addEventListener("click", handler, true);    // capturing

// THE PROBLEM (slide 34): nested elements each with their own click
// behaviour. Clicking the increment button fires the button's handler —
// and then the div's, and then the aside's. The cart minimises itself
// every time you add an item.

// THE FIX: e.stopPropagation()
const btns = document.querySelectorAll(".plus");
for (let b of btns) {
    b.addEventListener("click", function (e) {
        e.stopPropagation();       // ← the event stops here
        incrementCount(e);
    });
}

const items = document.querySelectorAll(".item");
for (let it of items) {
    it.addEventListener("click", function (e) {
        e.stopPropagation();
        removeItemFromCart(e);
    });
}

const aside = document.querySelector("aside#cart");
aside.addEventListener("click", function () { minimizeCart(); });

// DO NOT CONFUSE THESE TWO:
//   e.stopPropagation()  stops the event travelling to other ELEMENTS
//   e.preventDefault()   stops the BROWSER's default action (submitting,
//                        following a link). They are unrelated.

// THE NAIVE WAY: one listener per element. With 200 thumbnails that is
// 200 listeners — and any image added later has none at all.
const images = document.querySelectorAll("#list img");
for (let img of images) {
    img.addEventListener("click", someHandler);
}

// DELEGATION: ONE listener on the parent, using bubbling. Since the user
// can click on any element inside the section, the handler must work out
// whether an <img> was clicked.
const parent = document.querySelector("#list");
parent.addEventListener("click", function (e) {
    // e.target is the object that GENERATED the event.
    // NOTE: nodeName ALWAYS RETURNS UPPER CASE.
    if (e.target && e.target.nodeName === "IMG") {
        doSomething(e.target);
    }
});

// Two wins: one listener instead of hundreds, and elements added to the
// list LATER are handled automatically — no re-registration needed.

document.getElementById("pagebody").addEventListener("keydown", function (e) {
    let keyPressed = e.key;
    alert("Key " + keyPressed + " was pressed");
});

// Slide 43: block submission when the password is empty
document.querySelector("#loginForm").addEventListener("submit", function (e) {
    let pass = document.querySelector("#pw").value;
    if (pass == "") {
        alert("enter a password");
        e.preventDefault();          // ← prevents form submission
    }
});

// Slide 48: the same pattern, with an arrow function
const form = document.querySelector("#loginForm");
form.addEventListener("submit", (e) => {
    const fieldValue = document.querySelector("#username").value;
    if (fieldValue == null || fieldValue == "") {
        e.preventDefault();          // stop the submission FIRST
        console.log("you must enter a username");   // then tell the user
    }
});

// To submit a form FROM JavaScript — often paired with preventDefault:
const formExample = document.getElementById("loginForm");
formExample.submit();

const multi = document.querySelector("#listbox");

// Technique 1: loop EVERY option and test .selected
for (let i = 0; i < multi.options.length; i++) {
    if (multi.options[i].selected) {
        console.log(multi.options[i].textContent);
    }
}

// Technique 2: SIMPLER — selectedOptions only contains the chosen ones
for (let i = 0; i < multi.selectedOptions.length; i++) {
    console.log(multi.selectedOptions[i].textContent);
}

// No simple built-in exists. Build one from parseFloat, isNaN and isFinite.
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
// You need BOTH: 1/0 is Infinity, which isNaN() considers a number.

isNumeric("42");       // true
isNumeric("abc");      // false — parseFloat gives NaN
isNumeric(1/0);        // false — Infinity is not finite

// You can also read the browser's own verdict via the validity object.
// Slide 50: some browsers may not support HTML5 validation, and you want
// more control over how you react to bad input — so prefer JS validation.
function validateTextA() {
    let value = "";
    if (document.getElementById("textA").validity.rangeOverflow) {
        value = "The value must not be greater than 100";
    }
    document.getElementById("output").innerHTML = value;
}
// other validity flags: valueMissing, typeMismatch, patternMismatch,
// rangeUnderflow, tooLong, stepMismatch

// SLIDE 53 — first attempt. onchange fires when you leave the field,
// so the user is warned early. BUT the form can still be submitted:
// nothing blocks the request.
function check(e) {
    var email1 = document.getElementById('email_addr');
    var email2 = document.getElementById('email_repeat');
    if (email1.value !== email2.value) {
        e.preventDefault();
        alert("The two emails have to match");
    }
}

// SLIDE 54 — the fix is a SECOND check that blocks the HTTP request,
// wired to the submit button as well as to onchange.
//   <input type="email" id="email_repeat" name="email2" required onchange="check(e)">
//   <input type="submit" value="Send" onclick="check(e);">

// CLEANER — one handler on the form's submit event, no inline attributes:
document.querySelector("form").addEventListener("submit", function (e) {
    const a = document.getElementById('email_addr').value;
    const b = document.getElementById('email_repeat').value;
    if (a !== b) {
        e.preventDefault();
        alert("The two emails have to match");
    }
});

// THE FOURTEEN METACHARACTERS:    . [ ] \ ( ) ^ $ | * ? { } +

// In JavaScript a regex is CASE SENSITIVE and lives between forward slashes.
let pattern = /ala/;
// matches inside:  'Salah Althobeiti'   and   'Al malaz district'

"Salah Althobeiti".match(/ala/);      // matched text, or null
/ala/.test("Salah Althobeiti");       // true / false

// ── CHARACTER CLASSES (slide 57, left) ─────────────────────────
//   [abc]      any one of a, b or c
//   [^abc]     any character EXCEPT a, b or c
//   [a-z]      any lower-case letter
//   [A-Z]      any upper-case letter
//   [a-zA-Z]   any letter
//   [0-9]      any digit

// ── QUANTIFIERS AND ANCHORS (slide 57, right) ──────────────────
//   a?         0 or 1 times
//   a+         1 or more times
//   a*         0 or more times
//   a{n}       exactly n times
//   a{n,}      n or more times
//   a{x,y}     at least x, at most y times
//   ^a         STARTS with a
//   a$         ENDS with a
//   (?=ae)     any string FOLLOWED BY "ae"      (lookahead)
//   (?!ae)     any string NOT followed by "ae"  (negative lookahead)

// ── /pattern/modifier ──────────────────────────────────────────
//   /[a-z][0-9]/ig     i = case-insensitive,  g = global (all matches)

// ── THE FIVE METHODS (slide 58) ────────────────────────────────
pattern.exec(text);                // 1. matched text, or null
pattern.test(text);                // 2. true or false
text.match(pattern);               // 3. matched text or null; ALL matches with /g
text.search(pattern);              // 4. the INDEX of the match
text.replace(pattern, "newvalue");  // 5. a new string with replacements

// The slide's own phone-number example, as an HTML5 pattern attribute:
//   <input pattern="[+]?[0-9]{10,14}">
//   optional +, then 10 to 14 digits

// Practical validators built the same way:
const saudiMobile = /^05[0-9]{8}$/;                // exactly 05 + 8 digits
const simpleEmail = /^[^@\s]+@[^@\s]+\.[a-z]{2,}$/i;