Quick questions on JavaScript in the browser explained: HSC Software Engineering Module 2

The DOM (Document Object Model) is a tree representation of the HTML document. JavaScript reads and modifies it through methods like:

const newItem = document.createElement("li"); newItem.textContent = "New point"; document.querySelector("ul").appendChild(newItem);

JavaScript responds to user actions through event listeners:

Browser JavaScript exchanges data with the server through the fetch API, which returns a Promise that resolves with the response. Combined with async and await, this lets you write asynchronous code that reads like synchronous code, with try/catch for error handling.

A complete example - a search-as-you-type input:

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8] const even = numbers.filter(n => n % 2 === 0); // [2, 4] const sum = numbers.reduce((acc, n) => acc + n, 0); // 10

Setting innerHTML with a value that came from user input is one of the most common ways an XSS vulnerability slips into a front-end. The browser parses the assigned string as HTML, so any script tag, event handler attribute, or javascript URL inside it can execute. Use textContent or the DOM API instead.

the handler does not receive the event, so it cannot call event.preventDefault(). The form submits even when validation fails, because the browser's default submit fires alongside the JavaScript handler.

innerHTML is used to insert text. If the error string ever contains user-controlled data, this is an XSS risk. Use textContent.

Without it the browser navigates to the form's action URL and your JavaScript handling is lost.

Use === (strict equality) by default. == does type coercion with surprising results ("" == 0 is true).

Long synchronous loops freeze the page. Use async/await for I/O, and consider Web Workers for heavy computation.

Always re-validate on the server. JavaScript can be disabled or bypassed. :::