✏️ Practice: Accessing Window Properties
Goal: In the "Accessing Window Properties" lesson, we learned:
- The
window
object has properties with different values: primitives, objects, or methods. We can explore these in the DevTools console and we can use JavaScript to manipulate that data. - We use dot notation to access
window
properties, likewindow.innerHeight
orwindow.open()
. - When a
window
property itself is an object with properties, we can chain dot notation to access the nested object's property. A good example of this iswindow.location.href
, where we're accessing thewindow
object's property calledlocation
, and then we're accessing thelocation
object's property calledhref
.
Begin familiarizing yourself with the window
object by completing the following exercises in the DevTools console.
Warm Up
- What does the
window
object represent? What sort of information can we get from it? - What is a property?
- What is dot notation and how do we use it?
- What are Web APIs? What is an API?
Code
Accessing window
Properties
Access the window
object to find the following information:
- Find the value of the
innerHeight
of the window. - Find the
href
of the webpage you are currently on. - Access the
window.screen
property in your console, and expand the object so that you can see the properties. Then, access theheight
property of thescreen
object. Turn theheight
property into a string.
Access the window
object to call the following methods:
- Find the value of the
innerWidth
of the window. - Search for the
window.scrollTo()
method on MDN. Read the description and the examples, and try using it in the DevTools console. - Call on the method in
window.location
that reloads the page you are on. If you can't remember the name of the method, review the lesson "Accessing Window Properties" or try researching on MDN.