WDD 330: Web Frontend Development II

The Window Object

Overview

The Window object is the interface containing the document property which references the document object model. This globally scoped object is exposed to JavaScript through the window identifier.

"The Window interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. However, the Window interface is a suitable place to include these items that need to be globally available." - MDN Web Docs

Prepare

  1. Read: 📃 The Window Object - MDN
  2. Browse the Properties: 📃 The Window Object - W3Schools

Remember that actively reading means note taking.

Activity Instructions

  1. Review the use of the Window object in this CodePen example
    This example removes the responsive class when the window is manually resized by the user.
  2. Fork this CodePen and use a window object method to create a popup window that displays a message when the class is removed.
    Hint: Consider using the window.alert() method to display the message.
  3. Fix the code so that the popup only happens one time with the screen reaches the given size trigger versus over and over again.
    Hint: Consider using a boolean flag to track the state of the popup.