Computer Science 103 Chapter 4 Advanced JavaScript

Topics covered in this Chapter Events Forms Arrays Image Maps (Bring HTML and JavaScript together)

JavaScript events are actions: That can be detected by the Internet browser. That accept user input to change the look of the Web Page. That are defined in the body section of HTML page.

onLoad onLoad is activated when the page is loaded in the web browser. It takes the form of the with the desired action inside the quotes.

onUnload Occurs when the web browser leaves the designated page. It takes the form of the with the desired action inside the quotes

The onClick Event The click event is triggered when a link or a form element is clicked. A link must be designated after the tag, or " if no new page is desired. This code must be placed within … tags to specify that an action is being performed.

onMouseOver and onMouseOut onMouseOver allows an action to be performed when the mouse is moved over a text link or linked image. onMouseOut performs an action when the mouse is moved away from a link.

Text Boxes and Push Buttons Text boxes are used to enter in information, which can be used by the program. A text box must be coupled with a push button or link in order to perform an operation on the string of information. Buttons are usually used to activate an event on the page.

Check Boxes Check boxes are simply used to set a boolean(True/False) value to certain attributes. If a check box is clicked, then it takes on a value of "True", otherwise it is "False". In a grouping of check boxes, multiple forms may be set to "True" or "False" at a given time.

Radio Buttons Button version of drop down menus, meaning only one may be selected at a given time. Only one radio button in a group will take on the value of "True" unless another one is selected.

Arrays A set of data objects represented by one variable name. Useful when declaring a large amount of variables. When an array is declared, all elements held within are set to "null" until they are assigned. The index of an array is set to 0, so an array with ten elements would be numbered 0-9.

Arrays Cont’d New elements can be added to an array as needed. Elements can be assigned individually, using the index (Days[0] = "Sunday";) or as a whole, as the array is created: var Days = new Array("Sunday", "Monday",....);

Bringing HTML and JavaScript Together (Image Maps) HTML and JavaScript can be used together in order to more easily implement some of the difficult concepts such as image mapping. The JavaScript command is placed within the body of the HTML document implement a certain action.

Bringing HTML and JavaScript Together (Image Maps) Cont’d By using onMouseOver, which is a JavaScript command, we can easily manipulate an image or part of an image. onMouseOut restores the image back to its original state.