CSC 230: The Week beginning Sept. 2

Homework:

Terms
Provide a brief explanation of the following HTML tags.
- <a>
- <b>
- <body>
- <br />
- <canvas>
- <div>
- <form>
- <head>
- <h1>
- <hr>
- <html>
- <i>
- <img>
- <input>
- <li>
- <ol>
- <option>
- <p>
- <script>
- <span>
- <style>
- <table>
- <td>
- <tr>
- <title>
- <ul>
If you use a source (book or web site), cite your source. (The sites http://whatis.techtarget.com/, http://www.webopedia.com/ and http://www.w3schools.com are decent sources for technical definitions. )
Code
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. 9
Monday:

Labor Day Holiday
Tuesday:

The drop-down select element and the onchange event
Look at the example program Magritte.htm as well as the example code at http://www.w3schools.com/tags/tag_select.asp and http://www.w3schools.com/jsref/event_onchange.asp. Then pick out a few youtube videos and make a page that adapts the above code to have a user select a video title from a drop-down select and have the video embedded on your page. (Recall we dealt with youtube videos last Wednesday.)
The onmouseover and onmouseout events
Look at the code found at http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover, then adapt it as follows: have one <img> element but two possible image files; one image file will serve as the default source whereas the second image file will be used when the user placed the mouse over the image. When the user's mouse is no longer over the image the source file should revert back to the default.
The onfocus and onblur events
Look at the code found at http://www.w3schools.com/jsref/event_onfocus.asp and http://www.w3schools.com/jsref/event_onblur.asp. Then make a page with two text inputs, use the onfocus and onblur events and code like the following
document.getElementById("txtInput1").style.backgroundColor="#ffff99";
that changes the color of a text input. Make your page so that when the user puts the cursor in a textbox that it changes color and when the user puts the cursor elsewhere the textbox changes back to some default color. (You might also want to look at http://www.w3schools.com/html/html_colors.asp )
The onload event
Look at the code http://www.w3schools.com/jsref/event_onload.asp. Look at the examples on using the body's onload (near the top) and an image's onload (near the bottom). Make a page with an image with an obnload and a body onload. Use it to determine which event happens first.

Due: Sept. 10
Wednesday

ImageCompare.html compares changing the source of an image element to adding an entirely new image element.

We should discuss the use of the keyword this in one of yesterday's examples.

We started the program SomeMath.html. There were some problems with the addition -- it was concatenating the input instead of adding them. We need to learn to "cast" (or "parse") the input into a number.
Friday:

SomeMath_better.html We resolved the problem of Wednesday's program that was concatenating when we wanted it to add. This problem was connected to the "type" of data on either side of the plus sign. Since the data came from a text input, it was assumed to be text (string). The same problem did not occur with the minus sign because there was no interpretation for subtracting strings, so the code changed the data to numbers.

With the plus sign we had to change the data to a number using either parseInt() for whole numbers or parseFloat() for decimal numbers.

Next we considered the problem that if the user changed the input that our answers for the previous input was still displaying -- making us look bad. We thought about using events we knew from Tuesday's lab, namely onfocus and onblur. But onfocus would clear out the answers too soon and onblur too late. Thus we looked at keyboard events: onkeypress, onkeydown and onkeyup. The onkeypress event had a slight problem if the user used the backspace key, so we switched to onkeydown.