2/3/09 Notes

IT 130 -- 2/3/09

What colors do these RGB codes represent?
Ans: Lime, Green, Yellow, Maroon, Orange, Pastel Blue

What colors are these RGB codes closest to?
Ans: silver, red, green, pastel blue.
What is wrong with this style?
Ans: There is a space between rgb and (128. It is probably also the same color as a visited link. Such links will then be invisible after it is visited.
Write a link that uses the style page styles.css. Ans:
If contradicting styles are found in an external style and in a document-level style on the same page, which one takes effect?

Ans: The one that is positioned last.
What is a dynamic web page?

Ans: A page that can change its content based on input from the viewer or other information.
What is an information architecture?

Ans: A graphical description of the webpages in the site and the ability of the viewer to navigate from one page to another using links on those pages.

View this sample form that contains four textboxes and a button. Right click on the form and select View Source to see the source code.
This form is an example of client side processing. All JavaScript code is executed by the browser. No data is sent back to the browser.

The dot operator indicates a belonging relationship.
Example: Smith.Stan.LeftArm.IndexFinger
Without Smith, we wouldn't know which Stan we are talking about.
Without Smith.Stan, we wouldn't know which left arm we are talking about.
Without Smith.Stan.LeftArm, we wouldn't know if we are talking about the left or right index finger.
In general, the expression x.y means the y belonging to x,
where x could be a document, window, object, or class, etc.
y could be a value, function, object, control, etc.
Examples:
window.status
document.bgColor
document.FormA.TextBoxB.value
The dot operator sets up a hierarchy from more inclusive to more specific.

Controls on a web page are placed onto a form.
A document can contain one or more forms;
i.e., a form can be defined between the tags <body> and </body>
The following tags define a form with the name Hello1Form:
The three dots indicate where the contents of the form are placed.
One possibility for naming a form is to use Hungarian Notation. This means use a three letter prefix like frm to indicate a form name.
Camel casing is used for variable names. This means that the first letter of the name is lowercase, but each new word in the name begins with an uppercase letter. For example: btnShowGreeting.
We will look at forms with a button or buttons that display output in three different places:
1. In a popup window, called an alert box (See the hello1.htm Example).
2. In the window status bar window (See the hello2.htm Example).
  If the broswer's status bar is not visible, you should make it visible by selecting the main menu View and Status Bar.
3. In a textbox (See the hello3.htm Example).

A control is only defined within a form.
A control is referenced like this:
document.formName.controlName
Example: document.frmHello1.btnGreeting
Sample control definitions:
The Hungarian prefixes for button and textbox are btn and txt respectively.
The type attribute indicates whether the control is a button or textbox.
The name attribute is used to refer to the control elsewhere in the code.
The size attribute determines the width of the textbox in characters.
The value attribute determines the text that is initially displayed in a control.
The onclick attribute determines what happens when the control is clicked.
Note: use single quotes within the value of the onclick attribute.
Look at the hello1.htm, hello2.htm and hello3.htm Examples again.

If a large amount of JavaScript statements are to be placed in an onclick attribute, it is better to define an event handler function in the head section of the HTML page.

The JavaScript statements in the head section must be enclosed within script tags:

<script type=text/javascript>
function convert( )
{
    // Body of event handler function goes here.
}
</script>

The onclick attribute that calls the event handler looks like this:
The name of the function defined in the head section and the name in the onclick attribute must be spelled identically, including capitalization.
Here is another version of Example 15 (hello3.htm) that uses an event handler function instead of placing the JavaScript code directly in the onclick attribute: hello4.htm.
Example 17 (temperature1.htm) also uses an event handler function. It converts a Celsius input temperature into the Fahrenheit output temperature.