This topic begins coverage of textbook chapter 5, which deals largely with computer programming in JavaScript. The idea of an algorithm (a sequence of instructions for accomplishing some goal) is a central theme of this chapter, since programming is nothing more than expressing algorithms in a particular computer language (JavaScript in this case). The textbook's metaphor (introduced in section 5.1) for programming is the art of cooking, i.e. the art of creating a recipe involving various ingredients and producing a tasty dish. A cooking recipe is a type of algorithm, and the creation of a recipe by a master cook is not too different from the creation of a computer program by an experienced programmer. Writing an essay is another metaphor for computer programming: both tasks require solid organizational ability and attention to detail in order to create a well-crafted product.
Section 5.2 briefly discusses image maps. An image map associates different hyperlinks with different parts of an image. For example, take a look at the final version of
Rick and Stu's home page now. This is a framed page, with the top frame containing an image; clicking on different areas of this image (e.g. Books, Stu) activates hyperlinks to different anchors in the other frame. Now right-click on the top frame to view the source code for the frame. Notice that the IMG element for network.gif contains the phrase usemap="#Network". Immediately below is a MAP element, with starting tag <map name="Network">, which is associated with the network.gif image by the Network label. Rectangular regions within the image, specified by the pixel coordinates (relative to the top left corner of the entire image) of the top left and bottom right corners of the region and associated with different hyperlinks, are defined using AREA elements (which can also be used to map circle and polygon regions within an image).
So, how do you determine pixel coordinates within an image in order to make a nice image map? Many graphics programs (e.g. Paint Shop Pro) make this task easy, but it is also possible to do it using the ISMAP attribute of the IMG element. Click here to see an application of this method to Rick and Stu's network image. Notice how the pixel coordinates (in the message bar at the bottom of the window) change as you move the mouse pointer over the displayed image. Take a look at the HTML code and the comments I've written in it to see how this was done. (The ISMAP attribute, in combination with other tricks, is used primarily in so-called server-side image maps for older browsers that cannot handle the client-side maps we've discussed here. A beneficial side effect of ISMAP is that it can also be used to determine pixel coordinates.)
A copy of ismap.html, the ISMAP example described above, has been placed in the courses\csc110\chapter5 folder on the Z: drive.
The main subject of section 5.2 is the use of HTML forms. HTML forms allow a website visitor to enter information and to receive information in response. Forms are important in this chapter since they interact closely with JavaScript (e.g. data entered by a user into an HTML form is often processed by a JavaScript program). I've created a simplified Augustana Online Application Form to illustrate the new elements associated with HTML forms. Take a look at this application form now, and then view its underlying HTML in the usual way.
The displayed application form has some impressive features, and it's hard to believe (at first) that they could be produced using standard HTML. Observe from the HTML code that the new elements responsible for these impressive features are all contained in a FORM element, <FORM>...</FORM>. The new elements that may be used in a FORM element include INPUT (with possible TYPE values of TEXT, BUTTON, RADIO, CHECKBOX, RESET, and SUBMIT), SELECT (from which a user can select from a list of items specified with OPTION tags), and TEXTAREA (which defines a large area with a number of rows and columns for textual input). Most of these element types, and the FORM element itself, can be given a NAME (which allows them to be referenced by a JavaScript program), and some can be given a VALUE (which sometimes represents a default or initial value that can be changed by the user). There are also other attributes (e.g. SIZE, CHECKED, SELECTED, ROWS, COLS) that are appropriate only for specific element types. Finally, note that RESET and SUBMIT are very specialized types of INPUT elements: a RESET button causes all elements of the form to assume their initial values, and a SUBMIT button sends the data entered in the form to another program specified by the ACTION attribute of the FORM element; usually this data is either sent for processing to a database program on the web server (but server-side programs lie outside the scope of this course) or it is simply sent to an e-mail address. Spend some time looking at both the displayed form and the underlying HTML until you understand clearly the connection between each specific displayed element and the HTML that produced it. Observe also how basic HTML elements (e.g. HR, FONT, BR) are used alongside the new elements inside a FORM element to create the displayed results.
The JavaScript programs considered in this course will generally make heavy use of INPUT elements with TYPE=TEXT (these elements are termed text fields in upcoming topics and the Decker & Hirshfield book) and INPUT elements with TYPE=BUTTON (buttons).
A copy of augform.html, the sample Augustana Online Application Form, has been placed in the courses\csc110\chapter5 folder on the Z: drive for your convenience (e.g. you can easily copy it to your N: drive if you'd like to make modifications to it).