Internet Programming Laboratory
Unit 5: JavaScript Functions, Events & Form Validation
Function Declarations vs Expressions vs Arrows, Closures, Callbacks, Higher-Order Functions, addEventListener(), Event Delegation, Preventing Defaults, HTML5 Validation API, Regex Validation, Real-Time Feedback, ARIA Accessibility — making web pages respond and validate.
🏢 Industry-Aligned | 📝 15 MCQs (Bloom's Taxonomy) | 🔬 5 Lab Exercises | 💼 Interview Prep
Why This Chapter Matters in 2025
In Unit 4 you learned the language of JavaScript. Now you learn the action. Functions, events, and form validation are what turn a static page into a living, breathing application. Without events, nothing happens when a user clicks a button. Without validation, garbage data enters your database. Without well-structured functions, your codebase collapses under its own weight.
Every tap on Swiggy, every swipe on CRED, every payment on Razorpay — all powered by event listeners wired to functions that validate data before sending it to the server. This unit teaches you how all three work together.
🏢 Industry Connection — Events Power Everything
Swiggy — When you type "biryani" in the search bar, a keyup event fires on every keystroke. A debounced callback waits 300ms after you stop typing, then triggers an API call. This prevents 50 unnecessary requests while you type. That's closures + events + callbacks working together.
CRED — Their signature dark-themed card selection UI is entirely event-driven. mouseover highlights the card, click selects it, focus/blur handles keyboard navigation for accessibility. Every animation is triggered by an addEventListener().
Razorpay — Their payment form validates card numbers using the Luhn algorithm in real-time. As you type your card number, an input event validates each digit, formats the number with spaces, and shows a red/green border — all before hitting the server. The submit event calls preventDefault() to validate everything client-side first.
Prerequisite Checklist ✅
- ✅ Completed Unit 4 (JavaScript Core & ES6+ — you need
const/let, arrow functions, template literals, destructuring) - ✅ VS Code with Live Server extension
- ✅ Chrome DevTools — Console tab for debugging, Elements tab for inspecting event listeners
- ✅ A working HTML form from Unit 2/3 (we'll add JavaScript validation to it)
addEventListener() method replaced the old onclick attribute pattern. Today, React's synthetic event system, Vue's v-on directives, and Angular's (click) bindings all compile down to native addEventListener() under the hood. Master the fundamentals, and every framework becomes easier.Learning Outcomes — Bloom's Taxonomy
| Bloom's Level | Learning Outcome |
|---|---|
| L1 — Remember | Recall the syntax for function declarations, function expressions, arrow functions, default parameters, addEventListener(), and the HTML5 Validation API methods (checkValidity(), setCustomValidity()) |
| L2 — Understand | Explain the difference between closures and callbacks, event bubbling vs capturing, preventDefault() vs stopPropagation(), and how event delegation works |
| L3 — Apply | Write JavaScript programs using map(), filter(), reduce(), closures, event delegation, regex-based validation, and ARIA attributes for form accessibility |
| L4 — Analyze | Debug event propagation issues, identify memory leaks from unremoved event listeners, and trace closure variable references using DevTools |
| L5 — Evaluate | Compare inline validation vs submit-time validation strategies, evaluate debouncing vs throttling for input events, and justify when to use event delegation over direct binding |
| L6 — Create | Build a complete, accessible, real-time validated registration form with regex patterns, custom error messages, ARIA labels, and event-driven UX feedback |