HTML and CSS Reference
In-Depth Information
Figure 13-3
puzzle1Hint, puzzle1rating, and puzzle1 variables
Rebecca also has a function named drawGrid() that uses the
puzzle
array to create a
text string containing HTML code for a Web table based on the puzzle. The appearance
of that Web table is determined using style rules stored in the
hanjie.css
file. The code for
the drawGrid() function is stored in the
hanjie.js
file. You'll open Rebecca's page now and
create links to the style sheet and the two JavaScript files.
To link to the three hanjie files:
◗
1.
Use your text editor to open the
hanjietxt.htm
and
hanjietxt.js
files from the
tutorial.13\tutorial folder, enter
your name
and
the date
in the comment sec-
tion at the top of each file, and then save the files as
hanjie.htm
and
hanjie.js
,
respectively.
◗
2.
Go to the
hanjie.htm
file in your text editor and add a
link
element to link the
Web page to the
hanjie.css
file.
◗
3.
Within the head section, insert two
script
elements to link the file to the
grids.js
and
hanjie.js
files.
◗
4.
Take some time to study the contents of the file, paying close attention to the
document structure as well as the class names and ids used in the document.
◗
5.
Save your changes to the file, and then open
hanjie.htm
in your Web browser.
Verify that the page does not yet show any puzzles.
Rebecca wants all of the JavaScript code placed outside of the Web document in the
same way that all of the CSS styles are placed in an external style sheet file. This is why
she has the puzzle grids, hints, and ratings stored in an external file that can be easily
changed to display a new set of puzzles without having to modify the HTML document.
For this approach to work, however, you must be able to reference the contents and
structure of her Web document from within your JavaScript code. You'll use the docu-
ment object model to do that.
