- Refresher on the Different Types of Scripting
- Displaying Random Content on the Client Side
- Understanding the Document Object Model
- Using window Objects
- Working with the document Object
- Accessing Browser History
- Working with the location Object
- More About the DOM Structure
- Working with DOM Nodes
- Creating Positionable Elements (Layers)
- Hiding and Showing Objects
- Modifying Text Within a Page
- Adding Text to a Page
- Changing Images Based on User Interaction
- Thinking Ahead to Developing HTML5 Applications
- Summary
- Q & A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Workshop
The Workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.
Quiz
What does the plus sign mean in the following context?
document.write('This is a text string ' + 'that I have created.');Which of the following DOM objects never has a parent node?
body
div
document
Which of the following is the correct syntax to get the DOM object for a heading with the identifier heading1?
document.getElementById("heading1")
document.GetElementByID("heading1")
document.getElementsById("heading1")
Answers
The plus sign (+) joins two strings together.
C. The document object is the root of the DOM object tree, and has no parent object.
A. getElementById has a lowercase g at the beginning and a lowercase d at the end, contrary to what you might know about normal English grammar. Additionally, the name includes Element (singular) rather than Elements (plural).
Exercises
Modify the Back and Forward example in Listing 6.3 to include a Reload button along with the Back and Forward buttons. (This button would trigger the location.reload() method.)
Modify the positioning example in Listings 6.5 and 6.6 to move the square 1 pixel at a time rather than 30 at a time.
Add a third check box to Listing 6.7 to allow the paragraph of text to be shown or hidden. You will need to add an id attribute to the <p> tag, add a check box to the form, and add the appropriate lines to the script.