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 ,
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.
Search WWH ::

Custom Search