Activity: JS DOM, Objects, Events & Forms

Manipulating web pages with JavaScript, object-based programming, and form validation

Grade XII • Computer Science ⏱️ ~40 min

Brief Intro — JS DOM, Objects, Events & Forms

JavaScript is not just for math and logic — it REACHES INTO your web page and changes it live. Through the Document Object Model (DOM), JavaScript can modify HTML elements, handle user events, and validate form inputs before they reach the server.

In this activity, you'll learn how the browser represents your page as a tree of objects, how to select and modify elements, how to work with JavaScript objects, and how to respond to user interactions like clicks and form submissions.

Part 1 Concept of HTML DOM

The Document Object Model is the bridge between HTML and JavaScript.

Task 1: What is the HTML DOM?

What is the Document Object Model and how does the browser use it?

Definition: W3C standard for accessing documents; platform and language-neutral interface for dynamically accessing and updating document content, structure, and style
HTML DOM: Standard object model for HTML documents; when a page loads, browser creates a DOM tree of objects
What it defines: HTML elements as objects, element properties, methods to access elements, events for elements
Check Answer

Answer: The HTML DOM is a standard object model where the browser creates a tree of objects representing the page, allowing JavaScript to get, change, add, or delete HTML elements.

Task 2: Selecting & Changing Elements

How do you select and modify HTML elements using JavaScript?

getElementById(id): Method to select an element by its id attribute
innerHTML: Property to change the content of an element
Example: document.getElementById("demo").innerHTML = "Hello World!"
Check Answer

Answer: Use getElementById(id) to select elements and innerHTML to change their content. The DOM allows JavaScript to modify pages dynamically.

Part 2 Object-Based Programming in JavaScript

JavaScript is object-based — objects are containers for named values (properties) and actions (methods).

Task 3: JavaScript Objects

What are JavaScript objects and how do you create them?

Definition: Objects are containers for named values called properties and methods; object-based programming encapsulates state and operations inside objects
Creating Objects: Using object literal (const person = {firstName: "John", age: 50}) or new keyword (const person = new Object())
Primitive Types: string, number, boolean, null, undefined (avoid creating primitives as objects with new keyword)
Check Answer

Answer: JavaScript objects hold properties and methods. Create them with object literals or new keyword. Primitives (string, number, boolean, null, undefined) should not be created as objects.

Task 4: Object Properties & Methods

What are object properties and methods, and how do you access them?

Properties: Named values stored in objects (e.g., firstName, age)
Methods: Actions that can be performed on objects; functions defined as object properties
Accessing Properties: objectName.propertyName or objectName["propertyName"]
Accessing Methods: objectName.methodName() (without parentheses returns function definition)
this keyword: Refers to the "owner" of the function; this.firstName means the firstName property of this object
Check Answer

Answer: Properties are named values; methods are actions. Access properties with dot or bracket notation. Access methods with parentheses. The this keyword refers to the object owning the function.

Task 5: Working with Object Members

How do you use object members in a web page?

Example: Create a person object with firstName, lastName, age properties and a fullName method that returns this.firstName + " " + this.lastName
Usage: Access properties and methods to display data in the page using getElementById and innerHTML
Check Answer

Answer: Object members can be accessed and used to manipulate page content. Build objects with properties and methods, then use DOM methods to display their data.

Part 3 JavaScript HTML DOM Events

Events allow JavaScript to react to user interactions like clicks, page loads, and form submissions.

Interactive Simulator: Live DOM Playground

Use the controls below to manipulate the embedded page and see JavaScript modify the DOM in real-time.

Live DOM Playground

This paragraph can be changed with JavaScript

Visual Element

Task 6: HTML DOM Events

What are HTML events and how does JavaScript respond to them?

Definition: HTML DOM allows JavaScript to react to HTML events; events occur when user interacts (click, page load, image load, mouse move, input change, form submit)
Event Attribute: onclick=JavaScript — add JavaScript code to HTML event attribute to execute when event occurs
Common Events: onclick, onload, onunload, onchange, onmouseover, onmouseout
Check Answer

Answer: Events are actions that occur (click, load, change). JavaScript can execute code when events happen using event attributes like onclick, onload, onchange.

Task 7: Changing Images with Events

How do you change an image source using JavaScript events?

Technique: Use onclick event to trigger a function that changes the src attribute of an img element
Syntax: document.getElementById("myImage").src = "newimage.jpg"
Try It: Use the "Change Image" button in the Live DOM Playground above

Check Answer

Answer: Use onclick to trigger a function that modifies the src attribute of an img element. The DOM allows dynamic image swapping through JavaScript.

Task 8: Predicting Event Behaviour

Which handler fires for which event?

onclick: Fires when user clicks an element
onload: Fires when page or image finishes loading
onchange: Fires when input field value changes
onmouseover: Fires when mouse moves over an element
Check Answer

Answer: onclick triggers on clicks, onload on page/image load, onchange on input changes, onmouseover on mouse hover. Each event type has a specific handler.

Part 4 JavaScript Form Validation

Client-side validation ensures user input is correct before sending it to the server.

Task 9: Why Validate in the Browser?

What is form validation and why do it on the client side?

Definition: Process of ensuring user input is clean, correct, and useful
Client-Side Validation: Performed by browser before input is sent to server; provides immediate feedback
Server-Side Validation: Performed by web server after input is sent; used for large data operations
Pattern: Read input values, test conditions, alert on failure, prevent submit with return false
Check Answer

Answer: Validation ensures correct input. Client-side validation happens in the browser before submission for immediate feedback. Server-side validation happens after submission for final verification.

Task 10: Hands-on Form Validation

Validate a name and password field in a form.

Requirements: Name must not be empty; password must be at least 6 characters
Pattern: Read input values, test conditions, alert on failure, return false to prevent submit
Try It: Use the form below to test validation logic

Check Answer

Answer: Use document.forms to access input values, test conditions (name not empty, password >= 6 chars), alert user if validation fails, and return false to prevent form submission.

Task 11: Validating Before Submission

How does form validation work with the submit event?

Submit-Time Validation: Validation runs when user clicks submit; if validation fails, return false prevents form from being submitted
Field-Time Validation: Validation runs as user types (onchange event); provides immediate feedback without waiting for submit
Automatic HTML Validation: Using required attribute on input fields; browser displays error if field is empty on submit
Check Answer

Answer: Submit-time validation runs on submit event and prevents submission if validation fails. Field-time validation provides immediate feedback. HTML5 required attribute provides automatic validation.

Part 5 Integration

Combining DOM, objects, and events to create interactive web experiences.

Task 12: Combine DOM + Object + Event

Build a person object and use its method to change page content on button click.

Challenge: Create a person object with firstName and lastName properties and a display method that returns the full name
Integration: Wire a button's onclick event to call the object's display method and update the playground paragraph
Result: Demonstrates how objects, methods, events, and DOM manipulation work together
Check Answer

Answer: Create objects with properties and methods. Use event handlers to call object methods. Use DOM methods to update page content. This demonstrates full integration of JavaScript concepts.

Ready to test your knowledge?

Take the Assessment →