18. Client-Side Programming (HTML, XHTML, XML, JavaScript, CSS)

CSS Optional — Paper-II, Section-B · P-II.VI.18 · How the browser-side technologies work together. Contains the full answers to CSS 2017 (localStorage vs sessionStorage, application cache, manifest file, Web Workers).

1. Client-Side vs Server-Side Programming

2. How the Five Technologies Fit

3. XHTML

• XHTML (Extensible HTML, W3C 2000) reformulates HTML 4.01 as an XML application — same tags, strict XML rules. Versions: XHTML 1.0 Strict, Transitional, Frameset; XHTML 1.1.
• Rules: DOCTYPE mandatory; xmlns attribute on html; all tags lowercase; all elements closed ( ``, <img ... />); proper nesting; attribute values quoted; no attribute minimization (checked="checked", not checked); one root element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><title>XHTML page</title></head>
<body>
  <p>Line one
Line two</p>
  <input type="checkbox" checked="checked" />
</body>
</html>

For XHTML vs XML (CSS 2018) see the XML page.

4. AJAX — Asynchronous JavaScript and XML

• Term coined by Jesse James Garrett (2005). Lets a page exchange data with the server in the background and update part of the page without a full reload (Google Maps, Gmail, live search).
• Despite the name, JSON is now used more than XML; fetch() has replaced XMLHttpRequest in modern code.

graph LR
    E["User event (typing)"] --> JS["JavaScript"]
    JS -->|"async HTTP request"| S["Server"]
    S -->|"JSON / XML data"| JS
    JS -->|"update DOM"| P["Part of page changes"]

// Live city search
input.addEventListener("input", async () => {
  const res = await fetch("/api/cities?q=" + encodeURIComponent(input.value));
  const cities = await res.json();
  list.innerHTML = "";
  cities.forEach(c => { const li = document.createElement("li"); li.textContent = c; list.appendChild(li); });
});

5. Client-Side Storage — localStorage vs sessionStorage vs Cookies (CSS 2017)

localStorage.setItem("theme", "dark");
localStorage.getItem("theme");      // "dark" — even after browser restart
sessionStorage.setItem("step", "2");
sessionStorage.getItem("step");     // "2" — lost when tab closes
localStorage.removeItem("theme"); localStorage.clear();

Both store strings only (use JSON.stringify/parse for objects) and are not secure for sensitive data (readable by any script on the page).

6. Application Cache and the Manifest File (CSS 2017)

• Application Cache (AppCache) was an HTML5 feature letting a web app work offline by caching specified files in the browser.
• The manifest file (e.g. app.appcache, linked with <html manifest="app.appcache">) listed what to cache:

CACHE MANIFEST
# version 1.2
CACHE:
index.html
style.css
app.js
NETWORK:
/api/
FALLBACK:
/ offline.html

• Sections: CACHE (always cache), NETWORK (always fetch online), FALLBACK (page to show when offline). Changing the manifest (e.g. version comment) triggered an update.
• Status today: AppCache is deprecated and removed from modern browsers due to its rigid, error-prone behaviour; it was replaced by Service Workers + the Cache API (Progressive Web Apps). The web app manifest (manifest.json) in PWAs is different: it describes app name, icons and display mode for installation.

7. Web Workers (CSS 2017)

• JavaScript normally runs on one thread; a heavy computation freezes the UI.
• A Web Worker runs a script in a background thread, keeping the page responsive.
• Communication by messages (postMessage / onmessage); workers have no access to the DOM or window.

// main.js
const worker = new Worker("primes.js");
worker.postMessage(1000000);                 // send work
worker.onmessage = e => console.log("Primes found:", e.data);

// primes.js
onmessage = e => {
  let count = 0;
  for (let n = 2; n <= e.data; n++) { let p = true; for (let d = 2; d * d <= n; d++) if (n % d === 0) { p = false; break; } if (p) count++; }
  postMessage(count);                        // send result back
};

• Types: dedicated workers, shared workers, service workers (network proxy for offline/push).
• Uses: image processing, large calculations, parsing big files, encryption.

8. Modern Client-Side Development

Frameworks/libraries (React, Angular, Vue, Svelte) for SPAs; TypeScript for type safety; build tools (Vite, Webpack); CSS frameworks (Bootstrap, Tailwind); WebAssembly for near-native performance.

---

🎯 CSS Exam Angle

Client vs server table first. For 2017-style short notes, give definition → a 3–5 line code example → use case → limitation. Mention that AppCache is deprecated in favour of Service Workers — it shows current knowledge.

📌 Past CSS Paper Frequency

⚠️ MCQ Traps

• Client-side validation improves UX but must be repeated on the server.
• sessionStorage is per tab; localStorage is shared across tabs of the same origin.
• Cookies are sent with every request; Web Storage is not.
• Web Workers cannot access the DOM.
• AJAX is a technique, not a language.
• In XHTML, must be written .

---

✅ Self-Check (with Answers)

Q1. Differentiate localStorage and sessionStorage.

Ans: Both store key–value strings in the browser without sending them to the server. localStorage persists until cleared and is shared by all tabs of the origin; sessionStorage lasts only until its tab is closed and is private to that tab.

Q2. What problem do Web Workers solve?

Ans: Long-running JavaScript blocks the single UI thread and freezes the page; a worker runs the computation in a background thread and returns results by message, keeping the UI responsive.

Q3. Rewrite in valid XHTML: <P>Name <INPUT TYPE=text NAME=user DISABLED>

Ans: <p>Name <input type="text" name="user" disabled="disabled" /></p>

Q4. What was the manifest file in HTML5 AppCache, and what replaced it?

Ans: A text file listing resources to cache (CACHE), always fetch (NETWORK) and fallback pages (FALLBACK) for offline use. It is deprecated and replaced by Service Workers with the Cache API.

Q5. Why is AJAX useful? Give an example.

Ans: It updates part of a page asynchronously without a full reload, making apps faster and smoother — e.g. search suggestions appearing as you type, or new messages appearing in Gmail.