Client-Side Scripting and Events

Client-Side vs Server-Side

Client-side scripting runs in the browser; it responds instantly to user actions but cannot access the database directly or protect secrets. Server-side scripting runs on the server, has full access to resources, but needs a round-trip per request. Modern apps combine both.

Event-Driven Programming

The browser produces events (click, keypress, scroll, load, input). Your code registers event listeners that run when events fire. JavaScript's single thread queues events; listeners must return quickly.

Adding Event Listeners

const btn = document.querySelector('#save');
btn.addEventListener('click', function (e) {
    console.log('Saved at', Date.now());
});

addEventListener is preferred over inline onclick because multiple listeners can coexist and it separates logic from markup.

The Event Object

Event handlers receive an Event object with useful properties: e.target (element that fired), e.type, e.clientX/Y, e.key (for keyboard), and methods e.preventDefault(), e.stopPropagation().

Event Propagation

Events travel through the DOM in three phases: capture (root down), target, and bubble (back up). By default, listeners run in the bubble phase. Pass {capture: true} to listen during capture.

Event Delegation

Attach one listener to a parent and inspect e.target to handle many children. Saves memory and supports dynamically added elements.

list.addEventListener('click', (e) => {
    if (e.target.matches('li')) {
        e.target.classList.toggle('done');
    }
});

Form Validation

Catch the submit event, validate with JavaScript, and call e.preventDefault() to stop the default submission if invalid. HTML5 constraint attributes (required, pattern, minlength) give free validation.

Timers

setTimeout(() => console.log('1s later'), 1000);
const id = setInterval(tick, 1000);
clearInterval(id);

Browser Objects

• window — the global object; alert(), confirm(), prompt(), location, history, innerWidth.
• document — the DOM root; querySelector, createElement.
• navigator — info about the browser: userAgent, language, onLine, geolocation.
• screen — display info.

Navigation

window.location.href = 'https://x.com';
history.back();
history.pushState({}, '', '/new-url');

Cookies, localStorage, sessionStorage

• Cookies — small key-value pairs sent on every HTTP request; typically used for session IDs.
• localStorage — 5-10 MB per origin, persists until cleared.
• sessionStorage — scoped to the tab, cleared when closed.

localStorage.setItem('theme', 'dark');
const t = localStorage.getItem('theme');

Drag and Drop

HTML5 drag-and-drop uses events dragstart, dragover, drop. Call e.preventDefault() on dragover to allow dropping.

Fetch API

fetch('/api/users')
    .then(r => r.json())
    .then(users => render(users))
    .catch(err => console.error(err));

Security Basics

• Cross-Site Scripting (XSS): never insert unescaped user input into HTML; use textContent or safe DOM methods.
• Cross-Site Request Forgery (CSRF): validate tokens on the server.
• Same-Origin Policy restricts cross-origin requests; use CORS when needed.

Summary

Client-side scripting drives the interactivity of modern web pages. Listen to events, manipulate the DOM, validate inputs, and communicate with the server via fetch. Always write defensive code to protect users from XSS and misuse.

Important Questions

1. Differentiate client-side and server-side scripting.
2. Explain the event flow (capture, target, bubble).
3. What is event delegation? Give an example.
4. Write JS to validate an email field on form submit.
5. Differentiate setTimeout and setInterval.
6. Compare cookies, localStorage, and sessionStorage.
7. Write a fetch call that loads and logs JSON.
8. Explain XSS and how to prevent it.