10/14/08 Notes

IT 130 -- 10/14/08

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.
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.

A static web page does not change after it is displayed.
A dynamic web page can change its form due to some action of the user.
Using JavaScript is one way to create dynamic web pages.
Here are some example JavaScript Items that can be used on your Class Website Project.

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.

Create a web page with a title something like "Friendly Greeter". Display the title in the title bar and in an h1 or h2 heading. Supply an interesting document-level style for your page.
Add a button to your form with the caption "Push Me". The onClick attribute should be similar to this:
onClick="alert('Hello');"
However, select a different message than 'Hello'.
Add styles to the button similar to this:
style="font-family:arial; font-size:150%;width:1in;height:0.5in"