CSC 230: Week of 9/3/12

CSC 230: The Week beginning Sept. 3

Homework:

1. Provide a brief definition of the following terms (in the web programming context):
- HTML
- HTML tag
- Concatenation
- Comment
- Assignment statement
- Alert & Prompt
2. Design a page like that seen below. It should have a text input that allows the user to enter the amount of a restaurant bill. It should have a drop-down select that allows the user to choose the percentage tip he/she would like to give. It should have a button which when clicked calculates the amount to pay [amount=bill*(1+percentage) where the percentage is in a decimal format .20 as opposed to 20%].

If you want to do a little extra then add the following functionality: clear out the answer when the user changes the bill amount and clear out the answer when the user chnages the tip percentage. (For a hint see EventDemo.)

(Note that HTML5 supports new input types such as type="number", see http://www.w3schools.com/html5/html5_form_input_types.asp, which could be useful on a page such as this restaurant calculator page.)

Due: Sept. 10
Monday:

Labor Day
Tuesday:
1. Make a page with a youtube video in an iframe. Use the example found at http://www.w3schools.com/html/html_youtube.asp. (Also note the slight differences pointed out in this picture.)
2. Add meta-tags to one of your pages. (See for example http://www.w3schools.com/tags/tag_meta.asp).
3. Examine the code for SelectDemo.htm. Note that the value and what shows on the page (between the two option tags) does not have to be the same. Then make a page as shown in the picture below.
4. View the Date example at http://www.w3schools.com/js/tryit.asp?filename=tryjs_events. Then view the example that includes "concatenation" http://www.w3schools.com/js/tryit.asp?filename=tryjs_function2. Put the results together to make a page as shown in the picture below.
5. View the example of the onmouseover and onmouseout events http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover and then make your own version but have two images instead of one. What does "this" do in the code?
Wednesday

Demoed how to add select element from toolbox.

Started writing MathOddity.htm takes a three-digit number, concatenates it with itself, then divides that by 13, then 11 then 7.
Friday:

ImageCompare.htm distinguishes change the src attribute of a pre-existing image element from add an entirely new image element to a page.

We reviewed how to make a table in Visual Studio starting in design view and going to the Table item on the menu at the top and proceeding through the dialog.

Finished the MathOddity_2.htm. We finished the main sequence of actions and added disabling and enabling of button inputs to force the user into clicking them in the desired order. In addition to code, we added a few style features: gave the body a background color, made the textbox right justified (aligned), and set the text input's maxlength attribute to 3 to prevent the user from putting in longer numbers.