Week 3: Feb 9 - Feb 15, 2026

Unit II: JavaScript Introduction

Week Overview

This week introduces JavaScript — the programming language that makes web pages interactive. You will learn variables, data types, functions, event handling, and control flow.

Course Outcome: CO-2 (K3 - Application) Duration: 1 week (4 lectures + 1 lab)
Lab: CSS Styling & Responsive Design

Lecture 9: JavaScript Introduction & Variables

NoteLecture Materials

Take Quiz View Lecture

What is JavaScript?

  • Programming language that runs in the browser
  • Makes HTML pages interactive and dynamic
  • Complements HTML (structure) and CSS (styling)

Declaring Variables

var   legacy = "old style";  // function-scoped (avoid in modern JS)
let   count  = 0;             // block-scoped, reassignable
const PI     = 3.14;          // block-scoped, cannot be reassigned

Data Types

let str   = "hello";           // string
let num   = 42;                // number
let flag  = true;              // boolean
let obj   = { name: "Ana" };   // object
let arr   = [1, 2, 3];         // array
let empty = null;              // null
let undef;                     // undefined

Operators

// Arithmetic
let sum = 10 + 5;    // 15
let mod = 10 % 3;    // 1 (remainder)

// Comparison — always prefer ===
5 === 5    // true  (strict equality)
5 == "5"   // true  (loose — avoid this)

// Logical
true && false  // false
true || false  // true
!true          // false

Lecture 10: Functions in JavaScript & Returning Data

NoteLecture Materials

Take Quiz View Lecture

Function Declaration

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Hello, Alice!

Function Expression & Arrow Functions

const square = function(x) { return x * x; };      // expression
const double = x => x * 2;                         // arrow (implicit return)
const add    = (a, b) => a + b;                    // arrow (two params)
const greetFn = () => "Hello!";                    // arrow (no params)

Return Values

function divide(a, b) {
  if (b === 0) return null;    // guard clause
  return a / b;
}
const result = divide(10, 2);  // 5

Default Parameters

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}
greet();        // "Hello, Guest!"
greet("Riya");  // "Hello, Riya!"

Lecture 11: UI Events & Event Handling

NoteLecture Materials

Take Quiz View Lecture

Adding Event Listeners

const btn = document.querySelector('#myBtn');
btn.addEventListener('click', function() {
  alert('Button clicked!');
});

Common Events

element.addEventListener('click',     handleClick);
element.addEventListener('input',     handleInput);
element.addEventListener('change',    handleChange);
element.addEventListener('submit',    handleSubmit);
element.addEventListener('mouseover', handleHover);
element.addEventListener('keydown',   handleKey);

Event Object

btn.addEventListener('click', function(event) {
  console.log(event.type);    // 'click'
  console.log(event.target);  // the element that was clicked
  event.preventDefault();     // stop default action
  event.stopPropagation();    // stop event bubbling
});

Form Event Validation

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  const email = document.getElementById('email').value;
  if (!email.includes('@')) {
    e.preventDefault();
    alert('Enter a valid email address');
  }
});

Lecture 12: Conditions & Looping in JavaScript

NoteLecture Materials

Take Quiz View Lecture

Open Demo Demo JS (app.js)

if / else if / else

if (score >= 90) {
  grade = 'A';
} else if (score >= 75) {
  grade = 'B';
} else {
  grade = 'F';
}

switch Statement

switch (day) {
  case 'Monday':  console.log("Start of week"); break;
  case 'Friday':  console.log("TGIF!");         break;
  default:        console.log("Regular day");
}

Loops

// for loop
for (let i = 0; i < 5; i++) { console.log(i); }

// while loop
let count = 0;
while (count < 5) { count++; }

// for...of  (values in an iterable)
for (const item of ['a', 'b', 'c']) { console.log(item); }

// for...in  (keys of an object)
for (const key in { x: 1, y: 2 }) { console.log(key); }

Ternary Operator

const status = age >= 18 ? 'adult' : 'minor';

Lab 3: CSS Design and JavaScript Validation

Objectives

  • Apply CSS design to the HTML pages from Week 2
  • Add basic JavaScript form validation
  • Practice event listeners

Activities

  1. Style the registration form with CSS (box model, colours, fonts)
  2. Add a submit event listener that validates required fields
  3. Highlight invalid fields with a red border using JavaScript
  4. Create a toggle button that shows/hides a section
  5. Practice using console.log for debugging

Deliverables

  • HTML with external CSS and linked JavaScript file
  • Working form validation
  • GitHub commit with changes

Key Takeaways

✅ Use const by default; let when the value needs to change
✅ JavaScript functions encapsulate reusable logic and can return values
✅ Events link user actions (click, input, submit) to handler functions
✅ if/else, switch, for, and while control program flow
✅ Always use === (strict equality) — avoid ==

Next Week

We’ll advance your JavaScript knowledge: - Lecture 13: Block Scope Variables (let vs const deep dive) - Lecture 14: Objects & Object Literals - Lecture 15: DOM Manipulation & Array Methods - Lecture 16: Revision & Practical (JavaScript + DOM)