In this set of exercises we begin
JavaScript programming in earnest, asking you to add basic statements, date
items, and functions of your own to the existing scripts in the CVP pages. Again,
remember to make the suggested changes to your copy of the CVP pages, and
to attempt them one at a time.
|
- Review the scripts in the CVP Map page to see how it uses forms, events,
and functions to accomplish simple processing (like displaying a message when
you click on the Atlantic Ocean).
- Open this version of the HTML/JavaScript
interpreter
and use it to write code that displays an alert box when each of the following
events occurs.
- the text is changed inside the text field.
- focus is given to the text field.
- the button is clicked.
- the mouse enters the Hamilton College link.
- the mouse exits the Hamilton College link.
- an option of the "bird" select is chosen.
- an option of the "colors" (multiple) select is chosen.
- the checkbox is checked.
- the checkbox is unchecked.
- Open another version of the HTML/JavaScript
interpreter , and use it to complete the following exercises involving
functions.
- Write an empty function (nothing in between the braces) named
“myFunction” into the head of the document.
- Create a form containing one button and one text box, and insert it into the body of the document.
- Define the button’s “onClick” method to call your function “myFunction”.
Nothing should happen when you click the button since you haven’t defined
“myFunction()” yet.
- Now, enter
alert ("Hello"); between the braces of your function
“myFunction()”. Click the button.
- Interpret your code now, and test it out by clicking your button. If an alert box appears, you now know how to write and call a JavaScript function.
- Change the sample code so that clicking your button clears the text box.
- Change the sample code again so that clicking your button puts the phrase "As if!" in the text box (replacing any text that was previously there).
- Change the sample code one last time so that clicking on the button tacks the phrase "NOT!" onto the end of whatever text was previously in the text box.
- Let’s apply some of these techniques to the task of further extending your
CVP pages. In particular, revise your copies of the CVP pages as follows:
- Extend your Map page so that it displays an alert box whenever the user
clicks on the map, but doesn’t click on one of our islands (for example, if they
click on southern Florida, or at random point in the Caribbean Sea).
- Extend your Summary page so that it displays an alert box whenever the
user tries to type in one of the Name text items.
- Add (and test out) a function, named clearBestPrice, to the JavaScript code for the Summary page that clears the text element used for displaying the results of a click on “Best Price”. Note that a statement that performs this operation is in the body of function findBestPrice.
- Add (and test out) a function, named addBestPrice, to the Summary page that takes a string as a parameter and tacks it on (concatenates it to) the end of the "bestPrice" text element. The function header can look like: function
addToBestPrice(s) and its body should change the value of the text area. As above, most of the code to implement this function can already be found in the body of function findBestPrice.
- Since you now have functions that accomplish the clearing of and appending text to the bestPrice text element, change function findBestPrice so that it uses your new functions.
|
3pp. 151ń152,
220-221, 4pp. 144ń146, 179-182,
239ń240
|