JavaScript Lab: Variables, Functions & DOM

Course: BSCS/BSIS-Software Engineering/Programming Duration: 1 hour

Topic Focus: JavaScript Fundamentals (Variables, Functions, DOM, Debugging)

Learning Objectives

1. Declare and use JavaScript variables and functions.
2. Manipulate HTML content using DOM APIs and events.
3. Apply console-based debugging (console.log) to trace program flow.
4. Deliver a working mini-app and submit clean, well-organized files.

Time Allotment Breakdown

Intro & Instructions-5 minutes.

Activity 1: Variables & Functions 15 minutes. Activity 2: DOM Manipulation-20 minutes Activity 3: Debugging & Enhancement - 15 minutes Submission & Reflection 5 minutes

Materials/Setup

Any modern browser (Chrome/Firefox/Edge). Text editor (VS Code recommended), Starter files or create from scratch (index.html, script.js). Stable internet (for documentation lookups if needed).

Instructions to Students

Work individually. Follow each activity and test your code in the browser console. Save your work frequently.

Activity 1: Variables and Functions (15 min)

Create an HTML file and link a JS script. Declare variables name and age. Write a function greetUser(name, age) that returns a formatted string. Log the result.

index.html script.js

Expected console output:

Hello, I am Ailen and I am 30 years old.

Activity 2: DOM Manipulation (20 min)

Add a button that changes the background color randomly when clicked. Alse display the chosen color in a paragraph element. index.html (add inside ) script.js (append): Expected behavior: Clicking the button changes the background and shows the hex code.

Activity 3: Debugging and Enhancement (15 min)

Use console.log to trace values before and after color change. Enhance logs to include a friendly message. script.js (append):

Expected console output example:

Submission Instructions (Google Classroom)

Push two files: lastname js lab.html and lastname_js_lab.js. Ensure Activity 1-3 code is present and runs in the browser without errors. Add a short note in the private comment: What did you learn or debug today? (1-2 sentences).