1.11. Just Do It Open up your boards.html file, and add in all this new JavaScript. Make sure your updatePage() function has the JavaScript that checks the request object's ready state, as well as code to update the total board sales and figure out how much cash Katie has made. You also need to make sure you've got a copy of text-utils.js in the same directory as your boards.html and boards.css files. Frequently Asked Questions? | Q: | At the end of the updatePage() function, on page 52, I don't understand why you multiplied the cash that Katie's made by 100, and then divided it by 100. Won't you get the same number you started with? | | A: | JavaScript can be a little weird about multiplying numbers. A lot of times, it will add a bunch of decimal places to a product. So instead of getting 59.95, JavaScript might come up with 59.9499995. That's clearly not what Katie wants to see on her report. To fix a number like 59.9499995, first multiply it by 100, to get 5994.99995. Then you can use Math.round() to round this to the nearest integer, which is 5994. Finally, divide this result by 100, and you'll get 59.94... just what Katie wants. | | Q: | What does the getText() function do? I see we're using it in the updatePage() function, on page 52. | | A: | getText() is another utility function, like replaceText(). You pass it an element from a web page, and it will return the text within that element. In Katie's report, getText() gets the price Katie sells her boards for, and how much it costs Katie to make a board, both from <span> elements in Katie's HTML. | | Q: | So what about all those utility functions in text-utils.js? Do I need to worry about those? | | A: | As long as you reference the text-utils.js file with a <script> tag, your code will work fine. Those functions use the DOM quite a bit, and we'll explain all of them in Chapter 4. We've also included all the code from text-utils.js in Appendix I, but don't worry if you don't understand it all now. By the time you're done with this book, all those utility functions will make sense to you. | | Q: | And the DOM is how we work with an HTML page? | | A: | That's right. Web browsers use the DOM to represent an HTML web page. Your JavaScript can use the DOM to update values in a page on the fly. In fact, you've already been using the DOM a bit! Every time you use the JavaScript document object, or call the getElementById() function, you're using the DOM. | | Q: | And the readyState property... can you explain that again? | | A: | readyState is a property of the request object, and lets you know what stage your request is in. We'll spend a lot of time on this in the next chapter, but for now, you just need to know that when the readyState is 4, the server is finished with your request. |
|
|
