Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

406 CHAPTER 9 Asynchronous operations

■■The postMessage method accepts a serializable object.

■■The web worker does not have access to DOM elements.

Lesson review

Answer the following questions to test your knowledge of the information in this lesson. You

can find the answers to these questions and explanations of why each answer choice is correct

or incorrect in the “Answers” section at the end of this chapter.

1. In the web worker code, you want the asynchronous code to update the DOM. Which
   method can you use?
   A. updateDom().
   B. workerUpdate().
   C. dom().
   D. You cannot update the DOM from within the asynchronous code.


2. Which object can be used when the web worker and the creator need to reference the
   same object?
   A. Mutex.
   B. Semaphore.
   C. Closure.
   D. The web worker and the creator cannot reference the same object.

Practice exercises

If you encounter a problem completing any of these exercises, the completed projects can be

installed from the Practice Exercises folder that is provided with the companion content.

Exercise 1: Implement asynchronous code execution

In this exercise, you practice your asynchronous code execution skills by creating a web appli-

cation that uses the promise object to perform animations when displaying a message.

The implementation of the custom message box starts with a <div> element that cov-

ers the screen so a user cannot click anywhere else on the screen when the message box is

displayed. The cover has transparency so the user can still see the screen.

Over the cover is a completely transparent <div> element for the overall message box. This

<div> element also covers the screen. This is required to center the message content. Nested

inside the message box is another <div> element that holds the message content, which is

centered by setting the left and right margins to auto on the message content.

You can animate the message box display and use promise objects to sequence the

animations.