Home / MAD1 / Week 8

Week 8 · The frontend: JavaScript, the DOM and fetch

The one-minute story

By the end of this week you can:

• add JavaScript to a page correctly (script, defer, external files);
• write variables, functions, arrays and objects in JavaScript and predict their results;
• select and change the DOM (getElementById, querySelector, textContent, innerHTML, createElement, classList, style);
• handle events and read forms with JavaScript;
• call a Flask JSON API with fetch (GET and POST), handle status codes and errors;
• explain client vs server rendering, localStorage vs cookies, CORS, XSS risk of innerHTML, and what Vue is for.

Words you need

Idea 1: JavaScript in HTML, and a JS refresher

Put JS in a script tag, inline or in an external file. Where the tag sits and defer matter because JS that touches an element must run after the element exists.

<!DOCTYPE html>
<html>
<head>
  <title>Hello JS</title>
  <script src="app.js" defer></script>   <!-- external, runs after the HTML is parsed -->
</head>
<body>
  <h1 id="title">Hi</h1>
  <script>
    console.log("inline script, h1 exists:", document.getElementById("title") !== null);
  </script>
</body>
</html>

Classic rule: a script in head without defer runs before the body exists, so document.getElementById("title") is null. Fix: put the script at the end of body, or use defer, or wait for the DOMContentLoaded event. In Flask, JS files go in static/ and are linked with url_for('static', filename='app.js').

console.log() prints to the browser's console (developer tools, key F12). It is not alert() (a popup) nor document.write() (writes into the page).

A refresher on the language

let n = 5;            // can be reassigned
const name = "Asha";  // cannot be reassigned
var old = 1;          // old style; avoid

function square(x) { return x * x; }
const cube = x => x * x * x;          // arrow function

const marks = [40, 90, 65];           // array
marks.push(70);                       // add at end
console.log(marks.length, marks[0]);  // 4 40
console.log(marks.map(m => m + 5));        // [45, 95, 70, 75]
console.log(marks.filter(m => m >= 65));   // [90, 65, 70]

const user = { name: "Ravi", city: "Pune" };   // object
console.log(user.name, user["city"]);          // Ravi Pune
const { name: nm } = user;                     // destructuring
console.log(`Hello ${user.name}`);             // template string

Surprises that exams love (all checked in Node):

console.log("5" + 3);     // "53"  (+ with a string joins)
console.log("5" - 3);     // 2     (- converts to numbers)
console.log(5 == "5");    // true  (loose equality converts)
console.log(5 === "5");   // false (strict: also compares type)
console.log(typeof null); // "object" (an old quirk)
console.log([10, 9, 1].sort());  // [1, 10, 9]  (sorts as text!)
console.log(0.1 + 0.2);   // 0.30000000000000004

let is block-scoped; var is not: three callbacks made in a var loop all see the final i ([3,3,3]), but with let they see [0,1,2]. Always use ===, and let/const.

Idea 2: The DOM

The browser turns your HTML into a tree of objects. JS changes the tree; the screen updates. Changing the DOM does not change your HTML file and the DOM is not identical to the source: it is built before your JS runs and JS can change it afterwards. (Both were in a real paper. JS is the usual way to use the DOM, but it is a language-neutral interface: "DOM can only be manipulated with JS" is false, and "its structure is rigid" is false.)

function doSomething(){
  const txt1 = document.getElementById("txt1");   // the element
  txt1.style.fontWeight = "bold";                 // style is an OBJECT; fontWeight is camelCase
}

function add_item(){
  const course = document.getElementById("txt_course").value;
  document.getElementById("txt_course").value = "";
  const courses = document.getElementById("courses");      // the UL, not the input
  courses.innerHTML = courses.innerHTML + "<li>" + course + "</li>";
}

const li = document.createElement("li");
li.textContent = course;
courses.appendChild(li);

function perform(){
  let row = document.createElement("tr");
  let td1 = document.createElement("td"); td1.innerText = "name_1";
  let td2 = document.createElement("td"); td2.innerText = "city_1";
  row.appendChild(td1); row.appendChild(td2);
  document.getElementById("rows").appendChild(row);
}

CSS reminders the papers use with the DOM

Many rendering questions mix JS with CSS display. Quick table:

So a div made inline-block appears on the same line as the next, and a flex container shows 1 2 3 as three boxes in a row. An id rule (#id1) beats a class rule (.class1), which beats a tag rule (span). Also: ol is numbered, ul is bulleted, and a nested list has its own numbering.

Idea 3: Events, forms and validation

An event listener runs your function when something happens. Three ways, all legal (a real question's answer was "All of these"):

<button id="myBtn">Click Me</button>
<button onclick="alert('Clicked!')">Click Me 2</button>
<script>
  document.getElementById("myBtn").onclick = function(){ alert("Clicked!"); };
  document.getElementById("myBtn").addEventListener("click", function(){ alert("Clicked!"); });
</script>

addEventListener is preferred because you can attach many listeners to one event and remove them. The listener gets an event object (e.target, e.preventDefault()).

document.getElementById("btn").addEventListener("click", () => {
  document.querySelector("#msg").textContent = "Welcome to JavaScript!";
});

Both getElementById and querySelector("#msg") work, and both textContent and innerHTML change the visible text. But msg.text = "..." does nothing visible (there is no .text property on a div), and it relies on the id as a global name.

Forms. Read input.value; stop the normal submit with e.preventDefault() when JS will handle it.

<form id="f">
  <input id="title" required minlength="3">
  <button>Add</button>
</form>
<script>
  document.getElementById("f").addEventListener("submit", e => {
    e.preventDefault();                       // do not reload the page
    const t = document.getElementById("title").value.trim();
    console.log("will send:", t);
  });
</script>

Validation: frontend vs backend. HTML5 attributes (required, minlength, type="email", pattern) and a JS function such as validateForm() give instant feedback in the browser (this is client-side validation; the browser's prompt on an empty required field reads "Please fill out this field." and the JS function does not run on the server). But anyone can bypass the browser (curl, dev tools), so the backend must validate again; frontend validation is for the user's convenience, never for security. The CSS pseudo classes :valid and :invalid can colour a field as the user types (an input with a minlength turns from red to green once the minimum length is reached and stays green while typing is still allowed).

A form with no method sends GET: the data goes in the URL. method="post" puts it in the body.

Idea 4: JSON and the Fetch API (AJAX)

JSON looks like a JS object but is text: keys in double quotes, no trailing commas, no comments, values only string, number, boolean, null, array, object.

const txt = '{"name":"Balu","age":30,"city":"New Delhi"}';
const obj = JSON.parse(txt);          // text -> object
console.log(obj.age * 3);             // 90
console.log(JSON.stringify(obj));     // object -> text: {"name":"Balu","age":30,"city":"New Delhi"}

A real paper put this in innerHTML as "Hi\n" + obj.name + ",\t" + obj.city + "," + obj.age*3. The page shows Hi Balu, New Delhi,90: the string really contains a newline and a tab, but HTML collapses whitespace to one space, and age*3 is a number 90 (not "303"). Notes: JSON.stringify drops undefined values ({a:1,c:undefined} becomes {"a":1}); JSON.parse on bad JSON such as {'a':1} throws SyntaxError.

fetch with a Flask API

Our Flask API (we ran it):

@app.get("/api/items")
def lst(): return jsonify(items)

@app.post("/api/items")
def add():
    data = request.get_json(silent=True)
    if not data or "title" not in data:
        return jsonify(error="title required"), 400
    it = {"id": len(items) + 1, "title": data["title"]}
    items.append(it)
    return jsonify(it), 201

@app.get("/api/items/<int:i>")
def one(i): ...                       # returns {"error": "not found"}, 404 if missing

The browser side, with async/await (the modern style):

async function loadItems() {
  const res = await fetch("/api/items");          // GET by default
  if (!res.ok) { throw new Error("HTTP " + res.status); }
  const items = await res.json();                  // parse the body
  const ul = document.getElementById("list");
  ul.innerHTML = "";
  for (const it of items) {
    const li = document.createElement("li");
    li.textContent = it.title;                     // textContent: safe
    ul.appendChild(li);
  }
}

async function addItem(title) {
  const res = await fetch("/api/items", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title: title })
  });
  const data = await res.json();
  if (res.status === 201) { loadItems(); } else { alert(data.error); }
}

Same idea with .then: fetch(url).then(r => r.json()).then(data => ...).catch(err => ...).

Results from our test run:

AJAX is this idea: a page that updates part of itself with background requests, without reloading. Debugging: in the browser's dev tools use the Console (errors and console.log), Network (see each request, its status, headers and response body) and Elements (the live DOM). console.log(res.status) is your friend.

Idea 5: Where is the page built? Rendering styles and frameworks

Progressive enhancement: build a page that works with plain HTML and forms (SSR), then add JS on top for comfort. If JS fails, the site still works. This is a good, safe default design.

Frameworks (Vue, React, Angular) give structure for large UIs: components, reactive data (change the data and the screen updates automatically), and routing. They are frontend frameworks. Node.js is not a frontend framework: it runs JS on the server. WebAssembly is a binary format, not a web component; the real web-component standards are Custom Elements, Shadow DOM and HTML Templates. You will use Vue in MAD2; for MAD1 you only need "why use one": less manual DOM code. JS is not always the core of a frontend; HTML and CSS are the core and JS adds extra functionality.

Idea 6: Storing things in the browser, CORS and XSS

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));   // "dark"
localStorage.removeItem("theme");
localStorage.setItem("user", JSON.stringify({name: "Asha"}));   // store objects as text

localStorage holds strings only, hence JSON.stringify. Anything JS can read, an attacker script can read too, so do not keep secrets there.

CORS in one paragraph. The browser enforces the same-origin policy: a page from http://a.com may not read a response from http://b.com (a different scheme, host or port) unless server b answers with Access-Control-Allow-Origin: http://a.com. In Flask-CORS you write CORS(app). If your page and API are served by the same Flask app, there is no CORS issue. CORS is enforced by the browser, not by the server, so curl is not affected.

XSS and innerHTML. If you put user-supplied text into innerHTML, the browser parses it as HTML, so a comment containing an img tag with an onerror handler would run an attacker's script in your visitors' browsers. Checked in a DOM simulator:

el.textContent = '<img src=x onerror="alert(1)">';  // shows the text literally: &lt;img ...&gt;
el.innerHTML   = '<img src=x onerror="alert(1)">';  // creates a real img element (dangerous)

Rule: textContent for plain text; innerHTML only for HTML you wrote yourself. More about XSS and its server-side twin in week 9.

Your turn

const p = document.getElementById("info");
p.textContent = "Welcome";
p.classList.add("hot");
p.style.color = "red";

async function add(t){
  const res = await fetch("/api/items", {method:"POST",
      headers:{"Content-Type":"application/json"}, body: JSON.stringify({title:t})});
  const data = await res.json();
  if (res.status !== 201) alert(data.error);
}

Exam radar

Quick quiz

Viva: say it out loud

Recap

Practise with real exam questions

These come straight from past papers (with the real figures and the official answer key). Open 60 real questions on this week   All Quiz 2 papers