Questions
3 questions per exam
Difficulty
Medium
Importance
High yield for University Web Tech exams
Overview
JavaScript Basics form the cornerstone of web development, focusing on the interactivity of web pages. Mastering DOM manipulation, events, and closures is essential for both theory exams and practical viva assessments, as these concepts define how dynamic client-side scripting functions.
DOM Manipulation
The Document Object Model (DOM) represents the page structure as a tree of objects, allowing JavaScript to modify the content, structure, and style of a webpage. Understanding methods to traverse and update the DOM is critical for answering questions regarding dynamic UI updates.
- getElementById selects elements by unique ID
- querySelector and querySelectorAll support CSS selectors
- innerHTML vs textContent differences
- appendChild and removeChild for dynamic tree modification
- style property for inline CSS manipulation
Events and Event Handling
Events are actions that occur in the system, which JavaScript detects to trigger specific code execution. In university exams, you are expected to explain the event lifecycle, including bubbling and capturing phases.
- addEventListener is the standard approach for binding
- Event object provides details like target and type
- Event bubbling flows from child to ancestor
- event.preventDefault() stops default browser actions
- event.stopPropagation() prevents further event propagation
Functions and Closures
Functions are first-class objects in JavaScript, enabling functional programming patterns. Closures are a powerful feature where an inner function retains access to its outer function's scope even after the outer function has finished execution.
- Function declarations vs function expressions
- Arrow functions offer concise syntax and lexical 'this' binding
- Closure is formed when a function is defined inside another
- Closures are used for data encapsulation and private variables
- Lexical scoping determines variable access based on code structure
Formula Sheet
element.addEventListener('event_type', callback_function)
function closure_example() { let secret = 1; return () => secret; }
document.getElementById('id').style.property = 'value'
Exam Tip
When writing about Closures, always emphasize that they preserve the state of the outer lexical environment—this is the specific keyword definition examiners look for.
Common Mistakes
- Confusing the bubbling and capturing phases during event propagation in theory answers.
- Forgetting that Arrow functions do not have their own 'this' context, leading to bugs in object methods.
- Incorrectly assuming DOM elements are available before the script loads if not placed inside a window.onload or script defer block.
More Revision Notes
Ready to test yourself?
Play topic-wise JavaScript Basics questions in Aspirant Arcade — gamified MCQ practice.
Download Free