Week 4: Feb 16 - Feb 22, 2026

Unit II: JavaScript Advanced — Scope, Objects & DOM

Week Overview

This week advances your JavaScript skills with block-scoped variables, objects and object literals, DOM manipulation, array methods, and a practical revision session.

Course Outcome: CO-2 (K3 - Application)
Duration: 1 week (4 lectures + 1 lab)
Lab: JavaScript Functions & Events

Lecture 13: Block Scope Variables (let, const)

NoteLecture Materials

Take Quiz View Lecture

Open Demo Demo JS (app.js)

var vs let vs const

var x = 1;    // function-scoped, can be redeclared (avoid in modern JS)
let y = 2;    // block-scoped, reassignable
const z = 3;  // block-scoped, cannot be reassigned

Block Scope in Action

if (true) {
  let blockVar   = 10;   // only accessible inside this block
  const blockConst = 20;
  console.log(blockVar); // 10 ✅
}
console.log(blockVar);   // ReferenceError ❌

Template Literals (ES6)

const name = "Alice";
const age  = 25;
console.log(`Name: ${name}, Age: ${age}`);  // Name: Alice, Age: 25

Destructuring & Spread

// Array destructuring
const [a, b] = [10, 20];

// Object destructuring
const { x, y } = { x: 1, y: 2 };

// Spread operator
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

Lecture 14: Objects & Object Literals in JavaScript

NoteLecture Materials

Take Quiz View Lecture

Object Literal Syntax

const student = {
  name:   "Riya",
  roll:   42,
  branch: "MCA",
  greet: function() { return `Hello, I am ${this.name}`; }
};

Accessing & Modifying Properties

console.log(student.name);       // dot notation
console.log(student['branch']);  // bracket notation
student.city = "Noida";          // add new property
delete student.roll;             // delete a property

Nested Objects

const course = {
  title: "Web Technology",
  instructor: { name: "Mr. Nag", dept: "MCA" }
};
console.log(course.instructor.name);  // Mr. Nag

this Keyword

const obj = {
  value: 100,
  show: function() { console.log(this.value); }
};
obj.show(); // 100

Lecture 15: DOM Manipulation & Array Methods

NoteLecture Materials

Take Quiz View Lecture

DOM Selection

document.getElementById('id');           // by id
document.querySelector('.class');        // first match (CSS selector)
document.querySelectorAll('p');          // all matches → NodeList

DOM Manipulation

element.textContent = "New text";        // set text
element.innerHTML   = "<b>Bold</b>";     // set HTML
element.classList.add('active');         // add class
element.classList.toggle('hidden');      // toggle class
element.style.color = 'red';             // inline style
element.setAttribute('href', '/path');   // set attribute

Creating & Removing Elements

const li = document.createElement('li');
li.textContent = "New item";
document.querySelector('ul').appendChild(li);
li.remove(); // remove from DOM

Array Methods

const nums = [1, 2, 3, 4, 5];
nums.map(x => x * 2);               // [2, 4, 6, 8, 10]
nums.filter(x => x > 2);            // [3, 4, 5]
nums.reduce((sum, x) => sum + x, 0); // 15
nums.find(x => x > 3);              // 4
nums.includes(3);                   // true
nums.slice(1, 3);                   // [2, 3]

Lecture 16: Revision & Practical (JavaScript + DOM)

NoteLecture Materials

Take Quiz View Lecture

Interactive Task List (Combining It All)

const input = document.querySelector('#taskInput');
const list  = document.querySelector('#taskList');

document.querySelector('#addBtn').addEventListener('click', () => {
  if (!input.value.trim()) return;
  const li = document.createElement('li');
  li.textContent = input.value;
  li.addEventListener('click', () => li.classList.toggle('done'));
  list.appendChild(li);
  input.value = '';
});

Revision Checklist

Lab 4: JavaScript Array Methods and Nested Functions

Objectives

  • Apply array methods (map, filter, reduce) to real data
  • Practice nested functions and closures
  • Combine DOM manipulation with event handling

Activities

  1. Create an array of student objects and use map to render them in a table
  2. Add a search input that filters the rendered list in real time
  3. Use reduce to calculate a total (e.g., average marks)
  4. Implement a counter using closures
  5. Commit all work to GitHub

Deliverables

  • HTML + JS file with array methods and DOM updates
  • Working search/filter functionality
  • GitHub commit with changes

Key Takeaways

✅ const / let are block-scoped; prefer them over var
✅ Objects group related data and behaviour in key-value pairs
✅ DOM manipulation lets JavaScript change live HTML content
✅ Array methods (map, filter, reduce) enable concise data processing
✅ Combine scope, objects, DOM, and events to build interactive UI components

Next Week

Unit III: Java Servlet Programming (Server-Side Web): - Lecture 17: Servlet Overview & Architecture - Lecture 18: Servlet Interface & Life Cycle - Lecture 19: Handling HTTP GET & POST Requests - Lecture 20: Redirecting Requests & Request Dispatching