This set of exercises concentrates on the relationships between HTML1 and JavaScript2. JavaScript statements and functions often depend critically on the HTML document they are embedded within. Names that are used in JavaScript commands are determined by the names given to HTML components on the page. JavaScript functions can be invoked from event handlers that are described in HTML descriptions of FORMS3, input areas, and the like. The common theme in the exercises below is: How do I write and invoke JavaScript statements and functions from within an HTML document?
- Each of the following exercises asks you to make a simple editing
change to your version of the concert game. For each exercise, make the proposed edit(s) to the original version of the game. Then, try loading the page into your browser. If there is no noticeable change in the game's behavior, just write down "no change" for that exercise. If there is a change in behavior (for example, an error message appearing on the screen), write down the error message that appeared or the observed difference. In any case, try to explain what happened in your own words.
- Move the statement from the beginning of function initScreen that reads:
bankImg.src = "images/bank.gif"
to follow the line near the start of the first <SCRIPT> that reads:
currentMode = "Look"
- Move the statement from the <SCRIPT> between the document head and body that reads:
initMap()
to come immediately before the </SCRIPT> that concludes the first
(large) script.
- Remove the word checked from the line that reads:
<INPUT type="radio" name="lookMode"
onClick="setMode('Look')" checked>
- Remove the phrase onLoad="initScreen()" from the <BODY> tag.
- Remove the phrase onClick="setMode('Action')" from the <INPUT> tag for radio button actionMode.
- Change the HTML line that reads:
<FORM NAME="rightForm" . . .
to read:
<FORM NAME="badForm" . . .
- Change the HTML line that begins:
<img name="mainImage" . . .
to begin (leave the rest of the line unchanged):
<img name="anotherImage" . . .
- Change the HTML line that begins:
<textarea name="inventoryList" . . .
to begin (leave the rest of the line unchanged):
<textarea name="inventory" . . .
- Change the line in function setMode that reads:
document.rightForm.lookMode.checked = true
to read:
document.rightForm.look.checked = true
- Change the line in function setMode that reads:
document.rightForm.lookMode.checked = true
to read:
document.lookMode.checked = true
- Change the line in function setMode that reads:
document.rightForm.lookMode.checked = true
to read:
rightForm.lookMode.checked = true
- Our program makes extensive use of JavaScript's alert statement. Insert another alert statement into your copy of the game that identifies the game as yours. Place the statement so that it is executed before the game actually begins (that is, before any images or frames are displayed).
-
Now lets try to add an HTML component of our own and get it to do some useful processing. As you define and play increasingly complex versions of your concert game, you may find yourself "stuck" at a particular location, or you may want to "undo" a recent click. In such cases, it would be helpful to have a button that you could click to simply start the game over. You could of course, just click on your browser's "reload" button, but there's a much quicker way.
We've defined a JavaScript function (called "initScreen") which basically resets everything back to the start of the game without having to reload the entire page. Add a button to your copy of the game page (put it wherever and name it whatever you like) that calls function initScreen whenever it is clicked.
|
1pp. 29, 70, 82, 89, 90-91
2pp. 126, 127, 139–196, 149
3pp. 131–138, 187
|
Labs
