Web Programming with HTML5, CSS, and JavaScript

11.4 Point Tracker Web Page

In the prior section, you learned quite a bit of new OOP syntax. Let’s put what you learned into practice in the context of a complete web page. The Point Tracker web page builds upon the Point class presented earlier. As FIGURE 11.3 illustrates, the web page tracks the positions of where the user clicks the mouse. Initially, the web page displays nothing next to the two point labels and nothing below the Distance apart button. After the user clicks on the web page, the click’s position displays next to the “Point 1:” label. As you can see in the figure, the position displays as an (x, y) point, where x and y are the pixel values along the viewport’s x and y axes. After the user clicks again, the new click’s position ...