Web Development Web Development 5 — Questions and Answers
Question 1: What is the purpose of a Service Worker in web development?
- Handles server-side database connections
- Runs in the background to enable offline caching, push notifications, and background sync (Correct answer)
- Manages CSS animations on a separate thread
- Validates HTML forms before submission
Correct answer: Runs in the background to enable offline caching, push notifications, and background sync
Service Workers are scripts that run in the background, intercepting network requests to enable offline functionality and progressive web app features.
Question 2: In JavaScript, what is the difference between '==' and '==='?
- == checks value only with type coercion; === checks both value and type without coercion (Correct answer)
- == is used for numbers; === is used for strings
- == is stricter than ===
- There is no difference in modern JavaScript
Correct answer: == checks value only with type coercion; === checks both value and type without coercion
The == operator performs type coercion before comparison, while === requires both the value and the type to be identical.
Question 3: Which attribute makes an HTML form input required before form submission?
- mandatory
- validate
- required (Correct answer)
- nonempty
Correct answer: required
The required attribute on an input element prevents form submission and shows a browser validation message if the field is empty.
Question 4: What does 'tree shaking' mean in the context of JavaScript bundlers like Webpack or Rollup?
- Removing deeply nested DOM nodes to improve performance
- Eliminating unused exported code from the final bundle (Correct answer)
- Organizing component file hierarchies
- Clearing the browser cache during development builds
Correct answer: Eliminating unused exported code from the final bundle
Tree shaking analyzes ES module imports and removes code that is exported but never imported anywhere, reducing bundle size.
Question 5: What is the role of the 'alt' attribute on an <img> element?
- Sets a tooltip shown on mouse hover
- Provides alternative text for screen readers and when the image fails to load (Correct answer)
- Defines the image's MIME type
- Specifies a fallback image URL if the primary fails
Correct answer: Provides alternative text for screen readers and when the image fails to load
The alt attribute supplies descriptive text used by screen readers for accessibility and displayed by browsers when an image cannot be loaded.
Question 6: Which JavaScript array method returns a NEW array with only the elements that pass a test function?
- Array.find()
- Array.map()
- Array.filter() (Correct answer)
- Array.reduce()
Correct answer: Array.filter()
Array.filter() creates and returns a new array containing only the elements for which the callback function returns true.
Question 7: In web development, what does 'lazy loading' an image accomplish?
- Loads images at the lowest possible resolution first
- Defers loading off-screen images until they are about to enter the viewport (Correct answer)
- Preloads all images before the page renders
- Compresses images automatically using WebP format
Correct answer: Defers loading off-screen images until they are about to enter the viewport
Lazy loading delays fetching images that are not yet visible, reducing initial page load time and saving bandwidth for users who don't scroll far.
Web Development Web Development 5
What is the purpose of a Service Worker in web development?