Activity: Web Tech II Lab

Hands-on laboratory exercises in JavaScript, jQuery, and PHP/MySQL

Grade XII • Computer Science Lab • Capstone ⏱️ ~45-50 min

Brief Intro — Web Tech II Lab

This is your workshop: do the exercises, break things, fix them, and ship your own build at the end. You'll work through 32 lab exercises covering JavaScript fundamentals, DOM manipulation, events, loops, objects, validation, jQuery, and PHP/MySQL database connectivity.

The Mini Browser simulator below lets you type and run JavaScript code in real-time. Use it to test the lab exercises and experiment with different approaches.

Interactive Simulator: Mini Browser

Type JavaScript code below and click Run to see it execute in the sandbox.

Output will appear here
Part 1 JavaScript Fundamentals

Basic JavaScript exercises: alerts, DOM manipulation, and output methods.

Task 1: First JavaScript & DOM Manipulation (Labs 1-4)

Create a page that alerts "Hello JavaScript" on load, change element content with getElementById, change image src, and set fontSize.

Lab 1: alert("Hello JavaScript") on page load
Lab 2: document.getElementById("demo").innerHTML = "New Content"
Lab 3: document.getElementById("myImage").src = "newimage.jpg"
Lab 4: document.getElementById("demo").style.fontSize = "35px"
Check Answer

Answer: Use alert() for popups. Use getElementById() to select elements. innerHTML changes content. src changes image source. style.fontSize changes text size.

Task 2: Show/Hide & Output Methods (Labs 5-10)

Show/hide elements, display (5 + 6) using innerHTML, alert, document.write, console.log, and window.print().

Labs 5-6: innerHTML: document.getElementById("demo").innerHTML = 5 + 6
Lab 7: alert(5 + 6)
Lab 8: document.write(5 + 6)
Lab 9: console.log(5 + 6)
Lab 10: window.print()
Show/Hide: element.style.display = "none" / "block"
Check Answer

Answer: innerHTML displays in element. alert() shows popup. document.write() writes to page. console.log() logs to console. window.print() prints page. display property controls visibility.

Task 3: Functions (Labs 11-12)

Write functions for multiplication and Fahrenheit to Celsius conversion.

Lab 11: function multiply(a, b) { return a * b; }
Lab 12: function toCelsius(f) { return (5/9) * (f - 32); }
Exam Q12: function add(a, b) { return a + b; }
Usage: Call functions with arguments, store result in variable, display

Check Answer

Answer: Define functions with parameters. Use return to send values back. Call functions with arguments. Display results in page elements.

Part 2 Functions, Events & Control

Interactive elements, event handlers, and control structures.

Task 4: Events & Toggle (Labs 13-14)

Toggle light on/off with onclick, add onclick to change element content.

Lab 13: Toggle light on/off using images and buttons with onclick
Lab 14: onclick="changeContent()" to change HTML content of element with id="demo"
Pattern: Event handler in HTML or via addEventListener in JavaScript
Check Answer

Answer: Use onclick event attribute or addEventListener(). Toggle changes between two states. onclick handlers trigger functions that modify page content.

Task 5: Events & Time Greetings (Labs 15-18)

Illustrate events (onload, onchange, onmouseover) and time-based greetings with if/else and switch.

Lab 15: onload, onchange, onmouseover, onmouseout, onmousedown, onmouseup
Lab 16: if (hour < 18) greeting = "Good day"; else greeting = "Good evening"
Lab 17: if-else if-else for morning/day/evening based on time
Lab 18: switch(weekday) with cases 0-6 mapping to day names
Check Answer

Answer: Events trigger code on user actions. if/else handles two conditions. if-else if-else handles multiple conditions. switch handles multiple cases with single expression.

Task 6: Loops (Labs 19-22)

Use for, for-in, forEach(), and for-of loops to iterate.

Lab 19: for loop to display "Hello JavaScript" 10 times
Lab 20: for-in loop through object properties (person: firstName, lastName, roll no)
Lab 21: forEach() on array [45, 4, 9, 16, 25]
Lab 22: for-of loop through string "JavaScript"

Check Answer

Answer: for loop iterates with counter. for-in iterates object properties. forEach() iterates array values. for-of iterates iterable values like strings/arrays.

Part 3 Objects & Validation

JavaScript objects and form validation techniques.

Task 7: Person Object (Lab 23)

Create a person object with properties and a fullName method.

Object: const person = {firstName: "John", lastName: "Doe", id: 5566}
Method: fullName: function() { return this.firstName + " " + this.lastName; }
Display: document.getElementById("demo").innerHTML = person.fullName()

Check Answer

Answer: Objects hold properties and methods. Use this keyword to reference object properties. Methods are functions that operate on object data.

Task 8: Form Validation (Labs 24-25)

Validate numeric input > 1 and < 10, and check if form field is empty.

Lab 24: if (x < 1 || x > 10) alert("Input not valid!")
Lab 25: if (x == "") { alert("Field required!"); return false; }
Password: Check length >= 6 characters
Prevent Submit: return false in onsubmit handler if validation fails

Check Answer

Answer: Validate input conditions with if statements. Display alert messages on failure. Return false in onsubmit to prevent form submission when validation fails.

Part 4 jQuery

jQuery library for simplified DOM manipulation and events.

Task 9: jQuery Selectors & Events (Labs 26-28)

Hide elements with jQuery selectors and illustrate jQuery events.

Lab 26: $("p").hide() on button click (element selector)
Lab 27: $("#demo").hide() on button click (id selector)
Lab 28: $(document).ready(), click(), dblclick(), mouseenter(), mouseleave(), etc.
Syntax: $(selector).action() — $ defines jQuery, selector finds elements, action() performs operation
Check Answer

Answer: jQuery uses $() with CSS-style selectors. $("p") selects paragraphs. $("#demo") selects by id. jQuery provides event methods like click(), hover(), focus().

Part 5 PHP & MySQL

Server-side scripting with PHP and database connectivity.

Task 10: PHP Fundamentals & Classes (Labs 29-30)

PHP text/number manipulation and object class with constructor.

Lab 29: PHP variables, echo, arithmetic operations on text and numbers
Lab 30: class Car { function __construct($model) { $this->model = $model; } function message() { echo "Car: " . $this->model; } }
PHP Tags: <?php code ?>
Output: echo or print to display content
Check Answer

Answer: PHP uses <?php ?> tags. Variables start with $. echo displays content. Classes have __construct() for initialization. this keyword references object properties.

Task 11: MySQL Connection & Operations (Labs 31-32)

Connect to MySQL, create database/table, insert and display records.

Lab 31: $conn = new mysqli($servername, $username, $password); check $conn->connect_error; echo "Connected"; $conn->close()
Lab 32: CREATE DATABASE MyDB; CREATE TABLE students (id INT, name VARCHAR(50)); INSERT INTO students VALUES (1, 'John'); SELECT * FROM students
mysqli: MySQL improved extension for PHP
Query Execution: $conn->query($sql) to execute SQL statements
Check Answer

Answer: Use new mysqli() to connect. Check connect_error for failures. Use SQL CREATE DATABASE/TABLE to structure data. INSERT adds records. SELECT retrieves data. Close connection when done.

Part 6 Capstone Build

Your final project: build a working web feature from scratch.

Task 12: Capstone Project

Choose ONE concept and build your own interactive web page.

Option 1: To-Do List page — add/remove tasks, save to localStorage
Option 2: Digital Clock — display current time, update every second
Option 3: Image Gallery — display images, navigation, lightbox view
Option 4: Sign-Up Form — validation, error messages, success feedback
Build Checklist: HTML markup → JavaScript objects → Event handlers → Validation → Polish styling
Personalize: Choose your own topic/theme — no two identical projects
Check Your Build

Verification: Does your page work in browser? Are all interactive elements functional? Is validation working? Is the design clean and usable? Can you demonstrate it to your teacher?

Ready to test your knowledge?

Take the Assessment →