Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

JavaScript Popstate Event Quiz

Quiz 28 9 questions

Prerequisites for the quiz

  1. JavaScript popstate Event

Are you ready?

9 questions to solve

Instructions
  1. This quiz goes to full-screen once you press the Start button.
  2. At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
The pushState() and replaceState() methods of the history object can accept 3 arguments. How many of these are required?
The first two arguments (state and title) of both these methods are required. This goes with choice (C). For more details, refer to JavaScript popstate event — the History API.
The pushState() method serializes the value passed as the first state argument. True or false?
Whatever is passed to pushState() (and even replaceState()) in the first state parameter is serialized and then stored as part of the entry being set. Hence, the correct choice is (A). For more details, refer to JavaScript popstate event — serialization of state.

Suppose you execute the code below on www.example.com and then navigate to www.example.com/#about. After this, you go back to the initial entry using the Back button on the browser.

var o = {x: 1}
history.replaceState(o, '');

window.onpopstate = function(e) {
    console.log(e.state === o);
}
What would be logged in the console?
When we navigate to www.example.com/#about, the popstate event gets fired and consequently the console.log() statement above gets executed. Since the state of this new entry is null, it is not going to be equal to o — hence we get false logged.

Next up, when we go back from this point, popstate gets fired again. This time, the state object of the entry is equal to o, but only visually — internally both the objects are different. Both may look exactly the same but the reality is that they are stored at different memory locations, completely unaware of each other! The reason for this is because state objects passed to pushState() are serialized. Hence, false is logged again in the console.

This makes a total of two false logs, which goes with choice (D). For more details, refer to JavaScript popstate event — serialization of state.
What would be logged in the console upon executing the following code?
history.replaceState({x: 1}, '');
history.pushState({y: 2}, '');

window.onpopstate = function(e) {
    console.log(e.state);
}
The popstate event doesn't fire just by calling replaceState() or pushState(). Likewise, in this case, nothing would be logged in the console. This goes with choice (D). For more details, refer to JavaScript popstate event — when does popstate fire.

Executing the following code fires the hashchange event.

history.pushState(null, '', '#about');
True or false?
Calling pushState() doesn't perform a navigation or history traversal — it merely adds a new entry to the current session's history stack and updates some state-related data; that's it. The hashchange event only fires when a navigation or history traversal is made. This means that executing pushState() won't ever fire hashchange. Hence, the correct choice is (B). For more details, refer to JavaScript popstate event — things to note.
In a scenario where both popstate and hashchange fire, which event fires first?
popstate fires before hashchange. This goes with choice (B). For more details, refer to JavaScript popstate event — things to note.

Here's a piece of code to handle the popstate event.

document.addEventListener('popstate', function(e) {
    // handling code
});

However, the code doesn't work as expected.

Spot all the problems in here?
Everything here is alright except for the target of the addEventListener() method — popstate never gets fired on document; rather, we should use window. Hence, the correct choice is (A). For more details, refer to JavaScript popstate event — handling popstate.

Executing the code below fires popstate.

history.pushState(null, '', 'about');
True or false?
Calling pushState() or replaceState() doesn't fire popstate. Hence, the correct choice is (B). For more details, refer to JavaScript popstate event — when does popstate fire.

Clicking on the link below would fire popstate.

<a href="#menu">See Menu</a>
True or false?
Navigating to a hash link, #menu in this case, indeed fires the popstate event. Hence, the correct choice is (A). For more details, refer to JavaScript popstate event — when does popstate fire.