Labs

Lab 5.3: Events, Functions and Statements

Print
References

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.

  1. 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).

  2. 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.
    1. the text is changed inside the text field.
    2. focus is given to the text field.
    3. the button is clicked.
    4. the mouse enters the Hamilton College link.
    5. the mouse exits the Hamilton College link.
    6. an option of the "bird" select is chosen.
    7. an option of the "colors" (multiple) select is chosen.
    8. the checkbox is checked.
    9. the checkbox is unchecked.


  3. Open another version of the HTML/JavaScript interpreter , and use it to complete the following exercises involving functions.
    1. Write an empty function (nothing in between the braces) named “myFunction” into the head of the document.
    2. Create a form containing one button and one text box, and insert it into the body of the document.
    3. 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.
    4. Now, enter
      alert ("Hello");
      between the braces of your function “myFunction()”. Click the button.
    5. 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.
    6. Change the sample code so that clicking your button clears the text box.
    7. 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).
    8. 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.


  4. 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:
    1. 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).
    2. Extend your Summary page so that it displays an alert box whenever the user tries to type in one of the Name text items.
    3. 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.
    4. 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.
    5. 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

Labs

MODULES:


Home Search Resources Objectives Feedback Order Form Credits

Copyright Notice
© 1998 Brooks/Cole Thomson Learning, All Rights Reserved.