CIS 275 Assignment 1



PURPOSE

It’s easy for me to ramble on about JavaScript in class, but the best way for you to learn this stuff is by doing. The purpose of this lab is to:

• Introduce HTML to those of you without experience and give you a feel for what it does and how it’s structured.

• Act as a refresher for those of you who do have HTML experience.

• Introduce some elements of JavaScript (JS) and illustrate how JS fits within HTML. These elements include variables, functions, objects, methods, and event handlers.

DIRECTIONS

1. Download each of the following files from my Web site and put them in a folder of your choice. You’ll open these files in your browser from your PC (I use Internet Explorer.)

• SampleFrame.htm

• Menu.htm

• Welcome.htm

• Dsu_logo_bw.gif

• DSULogo.gif

2. Open SampleFrame.htm in your browser and work with the Web page. Specifically, run the Add two numbers function at the bottom as well as using the navigation links on the left. Also read the text contained in the right-hand frame. Let’s both pray to a higher power that it all works. NOTE: I’m not doing any error checking or data validation, so you can get some pretty funky results depending upon what you enter.

3. Now, using a text editor such as ConTEXT, open SampleFrame.htm. I’ve included quite a few comments in each of these HTML files. Read through the code and the comments so that you understand what’s happening in SampleFrame.htm. It’s probably a good idea to print it out so that you have a hardcopy to refer to.

4. Next, open Welcome.htm and read through it just like you did with SampleFrame.htm. This document is displayed in the right-hand frame, and it contains both HTML and JavaScript code. Once you’re done with Welcome.htm, read through Menu.htm. Menu.htm is displayed in the left-hand frame and contains a navigation menu. Again, printing is probably a good idea.

5. Now you’re ready to start creating your own pages. Using my code as a guideline, I want you to create the following files:

FRAMESET (Frame2.htm, TopBorder2.htm)

• Create a frameset that has 3 frames. There should be a frame at the very top (TopBorder2.htm) that spans the entire width of the screen. The remaining two columns should appear beneath the top frame and look roughly identical to those displayed by SampleFrame.htm.

• The top and left-hand frames should have a black background instead of blue.

• The DSU logo that appears in Welcome.htm should now appear centered in the top frame (TopBorder2.htm). Make it a hyperlink to the DSU homepage that opens in the entire window.

• Comment your HTML code using comment tags.

NAVIGATION MENU (Menu2.htm)

• Add 3 new links of your choice to the navigation menu in the left-hand frame.

• Change the color scheme of the navigation menu from silver, black, and white to something different.

• Comment your HTML code using comment tags.

MAIN PAGE (Main2.htm)

• Change the header on the welcome page to display your name, CIS 275 plus your section number, and the assignment number.

• Change the color and width of the horizontal rule.

• Provide a description of what the page does. Align this text with the left-hand side of the frame. NOTE: Hold off on this until you know what I want you to do with JavaScript.

• Insert a sample of one of your functions in preformatted text after the description. Make sure you center it.

• Incorporate the bold, underline, and italics HTML tags in your document.

• Change the color and width of the second horizontal rule.

• Modify the table so that it has the following general layout:

|Simple Arithmetic |

|1st Number: |Add (+) |

|2nd Number: |Subtract (-) |

|3rd Number: |Multiply (*) |

|4th Number: |Divide (/) |

|Clear Numbers |

Simple Arithmetic is the header. Add, Subtract, Multiply, Divide, and Clear Numbers are buttons. 3rd Number and 4th Number are additional input fields for the HTML form.

• Comment your HTML code using comment tags.

JAVASCRIPT (Main2.htm, Functions2.js)

• Incorporate another function called SubtractNums that subtracts SecondNum from FirstNum. This should be a function embedded between the tags with AddNum and ClearNums. Just like AddNums, it should produce a popup window that displays the answer.

• Create a new file called Functions2.js in the text editor of your choice. In this file, create two new functions called MultiplyNums and DivideNums. As their name suggests, these functions will multiply and divide. Multiply and divide ThirdNum by FourthNum. Don’t forget popup windows for the answers. Remember: no HTML in this file.

• Insert another tag that uses the SRC attribute to include your new Functions.js file. Remember: this should be located in the section of your HTML document. Also, don’t forget to consider browsers that don’t support JavaScript.

• Comment your code using both inline comments (//) and block comments (/*).

NOTES

• Don’t forget the identification block in each of your files (name, class, section, etc).

• You may use resources available to you such as the links I’ve provided on my Web site because they’re great tools to help you learn. That’s also why I provided you with a framework that includes many comments and explanations. However, please resist the temptation to simply copy-and-paste without understanding what the code does. Remember, the purpose of this lab is for you to learn and become familiar with the code, and the best way to do that is by writing it. Okay, enough preaching.

• My code by no means incorporates all available HTML tags and their attributes. I just tried to hit some of the more common ones.

• We’re not doing any error checking or data validation in this lab. Don’t worry; we’ll get to that.

DUE DATE

This assignment is due no later than Friday, 14 September at 5:00PM. Submit your files to me in electronic format. Your submission should include:

• Frame2.htm

• Menu2.htm

• Main2.htm

• TopBorder2.htm

• Functions2.js

• Dsu_logo_bw.gif

• DSULogo.gif

If submitting via e-mail, use a subject line containing CIS 275 Assignment 2 – your section number. If you submit it on floppy disk, make sure that it’s labeled properly. Good luck!

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download