Week 5: JavaScript Recap & Pre-Exam Review

Unit I–II Revision: HTML, CSS & JavaScript

Week Overview

This is a consolidation week. No new lectures are assigned — focus on revising Units I and II, completing Lab 5 and Home Assignment 2, and preparing for the mid-semester examination.

Course Outcome: CO-1, CO-2 (Review & Assessment)
Home Assignment 2 Due: Feb 25
Lab 5: Browser Information, Objects, and Script Reuse

TipQuiz Revision

Revisit all quizzes from Lectures 1–16 via the Quiz Hub.

NoteContent Covered So Far

• Unit I: Web Page Designing (Lectures 1–8) → Week 1 | Week 2
• Unit II: JavaScript (Lectures 9–16) → Week 3 | Week 4

---

Revision: Unit I — HTML & CSS

HTML Checklist

• Semantic structure: <header>, <nav>, <main>, <footer>
• Lists: <ul>, <ol>, <dl> and their items
• Images: <img alt="..."> + srcset for multiple resolutions
• Hyperlinks: absolute vs relative URLs, target="_blank"
• Tables: <thead>, <tbody>, <tfoot>, <th scope="...">
• Forms: <form>, <input>, <label>, <fieldset>, HTML5 validation attrs
• Iframes: embed external content with <iframe src="...">

CSS Checklist

• Selectors: element, class, ID, pseudo-class, combinators
• Box Model: margin, border, padding, content; box-sizing: border-box
• Layout: float, clear, flexbox basics
• Bootstrap: .container, .row, .col-*, .btn, .card, .navbar

---

Revision: Unit II — JavaScript

Variables & Data Types

const PI  = 3.14;   // never changes — use const
let count = 0;      // may change — use let
// avoid var in modern JS

Functions

const greet = name => `Hello, ${name}!`;
function divide(a, b) { return b === 0 ? null : a / b; }

Events

btn.addEventListener('click', e => { e.preventDefault(); /* handler */ });

Control Flow

if (x > 0) { console.log("positive"); } else { console.log("non-positive"); }
for (const item of arr) { console.log(item); }

Objects & DOM

const obj = { key: "value", method() { return this.key; } };
const el  = document.querySelector('#id');
el.textContent = "Updated with JS!";

Array Methods

arr.map(fn).filter(fn).reduce(fn, init);

---

Practice Tasks

1. Build an HTML registration page with <fieldset>, <label>, and HTML5 validation.
2. Style it with CSS: apply the box model, external stylesheet, and Bootstrap grid.
3. Add JavaScript to validate the form on submit and show an error message.
4. Use map + DOM manipulation to render a list of items from an array.
5. Create an interactive counter (increment/decrement/reset) using event listeners.

---

Key Takeaways

✅ HTML, CSS, and JavaScript work together — structure, style, behaviour
✅ Always use semantic HTML for accessibility and SEO
✅ CSS Box Model governs all spacing and layout
✅ JavaScript variables: prefer const, use let, avoid var
✅ DOM manipulation and event handling are the core of frontend interactivity

---

After the Mid-Semester Exam

Unit III begins — Java Servlet Programming (Server-Side Web): - Week 8: Servlet Foundations (Lectures 17–20) - Week 9: Session Tracking & JSP (Lectures 21–24) - Week 10: Spring Core Foundations (Lectures 25–28)