Modern JavaScript from the Beginning - Second Edition - Page Loading and Window Events

The video tutorial covers the execution context in JavaScript, focusing on the global window object and its events. It explains the importance of script placement in HTML and introduces page loading events like 'onload' and 'DOMContentLoaded'. The tutorial also discusses the defer attribute for scripts, which allows JavaScript to run after the DOM is loaded. Additionally, it covers window events such as resize and scroll, demonstrating how to use them for dynamic UI effects. Finally, it explores focus and blur events, providing examples of their application.

What is the primary role of the execution context in JavaScript?

• To manage the global window object and its events

• To handle server-side operations

• To load HTML content

• To execute CSS styles

Why might placing a script tag in the head of an HTML document cause an error?

• The script tag must be in the footer

• The script tag is not supported in the head

• The script runs before the DOM is fully loaded

• The script tag requires a specific attribute

What is the main difference between the 'load' and 'DOMContentLoaded' events?

• Both events only wait for the DOM to load

• Both events wait for all resources to load

• 'DOMContentLoaded' waits for all resources, 'load' only waits for the DOM

• 'load' waits for all resources, 'DOMContentLoaded' only waits for the DOM

What does the 'defer' attribute do when added to a script tag?

• Prevents the script from running

• Loads the script asynchronously

• Executes the script immediately

• Delays script execution until the DOM is fully loaded

Which event can be used to detect changes in the browser window size?

• scroll

• resize

• click

• focus

How can you determine the vertical scroll position of a window?

• Using window.innerWidth

• Using window.scrollX

• Using window.scrollY

• Using window.innerHeight

What happens when the 'scroll' event is triggered?

• It logs the scroll position

• It changes the window size

• It reloads the page

• It stops the script execution

What is the purpose of the 'focus' event?

• To scroll the page

• To detect when an element gains focus

• To change the background color

• To resize the window

Which event is triggered when an element loses focus?

• resize

• scroll

• blur

• focus

Where can you find more information about window events?

• HTML validator

• JavaScript console

• MDN documentation

• CSS reference