HTML and CSS Reference
In-Depth Information
Tu Tori a l
13
Exploring the
Document Object
Model
Creating an Interactive Puzzle
O b j e c t i v e s
Session 13.1
• Learn about objects and the
document object model
• Reference document objects
by id, class name, and tag
name
• Write HTML code to a
document object
• Write an event handler as an
object property
Case |
The Japanese Puzzle Factory
Session 13.2
• Change the inline style of a
document object
• Use a CSS selector in an object
reference
• Loop through an object
collection
• Create alert, confirm, and
prompt dialog boxes
The Japanese Puzzle Factory is a Web site owned and operated by
Rebecca Peretz and created for people who, like her, love Japanese
logic puzzles. Rebecca has asked you to help her create an interac-
tive version of a hanjie puzzle. Hanjie is played on a square grid;
cells in the grid can be either marked or left empty based on infor-
mation provided to the user. The solved puzzle displays a pixelated
image to the user. Rebecca already has designed three sample puz-
zles. She needs your help with writing the JavaScript code that will
allow users to choose a puzzle to display and then work through
the solution, and provide hints in case users get stuck.
STarTing DaTa FileS
tutorial.13
tutorial
review
case1
case2
hanjietxt.htm
hanjietxt.js
+ 2 graphic files
+ 3 JavaScript files
+ 2 CSS files
hitoritxt.htm
hitoritxt.js
+ 3 graphic files
+ 2 JavaScript files
+ 2 CSS files
twinstxt.htm
fonttxt.js
+ 4 graphic files
+ 1 JavaScript file
+ 1 CSS file
frenchtxt.htm
transtxt.js
+ 2 JavaScript files
+ 1 CSS file
case3
case4
holmestxt.htm
pulltxt.js
pulltxt.css
+ 4 graphic files
+ 1 JavaScript file
+ 1 CSS file
wordtxt.htm
searchtxt.js
+ 4 graphic files
+ 2 JavaScript files
+ 2 CSS files
HTML 873
