All of the pages you have created so far have been static with the exception of those that contained animated gif or video files. This file has class style that has an animated gif file as background image. The image is repeated in the horizontal direction (repeat-x). The repeat-x command results in the image being repeated in one row across the top of the page, but not down the page. The rest of the page has a background color specified as #EBEEB5 in the BODY style. The rest of the page is possitioned by using a DIV block with style class bottom. This style is used to place the beginning of the main body below the background.
<STYLE TYPE ="text/css">
<!--
BODY {
backgroundr: #EBEEB5;
}
.bottom {
position: absolute;
height: 100%;
top: 48;
left: 24;
width: 100%;
background: #EBEEB5;
}
.top {
background: URL(bulbs.gif);
background-repeat: repeat-x;
}
-->
</STYLE>
The top pattern is created by a table with a nonprinting space in a cell of class top and width 1200. The code for this is:
<TABLE CLASS = "top"> <TR> <TD CLASS = "top" WIDTH=1200> &#nbsp </TR> </TABLE>
What advantage does this method have over simply placing a bigger animated gif file at the top of the page? There are two reasons for doing this. First the bulb file is smaller than one that would stretch across the page. But in addition, the repeat-x command makes sure the image stretches across the page no matter what the monitor resolution of the user's machine. For a case study of a problem that seemed to be a DHTML problem, and turned out to be a simple style sheet problem click here .
Even though this allows you to create some interesting effects, it is still static in that everytime someone accesses the page it looks the same. In addition, there is no way for the user to interact with this type of page. If you want to create pages that can change themselves in response to date or randomly, you use a scripting language. There are two types of scripts client-side and server-side scripts. Client-side programs are downloaded as a code to the browsers machine. The code is run by the browser on the bowser machine.
The two most common languges used for client-side programs are JavaScript and Java (Applets). Server-side programs typically are used to perform database manipulations, such as registering users and processing on-line transactions. The some common server-side languages are JavaScript, Java, ASP, and Perl. The reason there are fewer client-side languages is because the programs must run on a variety of machines in a variety of browsers. JavaScript and Java Applets are almost universally interpreted on browsers. You will mainly use JavaScript since it downloads faster than Applets and can do most of what you will need in a Web page.
You will write most of the JavaScripts either in files that are loaded by your Web page or in the head section of your Web page. JavaScript can be placed anywhere in an HTML file, but since variables are initialized in the head during page loading, most scripts within a Web page will be in the head.
Wherever you place your JavaScript it should take the following form. The HTML tag <SCRIPT> surrounds the programs. The language designation is optional, but should be used for documentation if nothing else. Notice that the actual script is contained in an HTML comment
<SCRIPT LANGUAGE = "JavaScript"> <!-- //The script goes here. This is a c style line comment that works in JavaScript /*The c style block comment also works in JavaScript*/ //--> </SCRIPT>
JavaScript is an object-oriented language, but many books only present it at the simplest non-object-oriented level. The basic syntax if very similar to Java, c or c++, but since JavaScript is not strongly typed, you will not directly define types. To defne objects, you define a constructor that initializes member data items and member functions for your desired object. Then when you initialize a variable, say x, you simply write:
x = new Your Constructor(constructor parameters listed here with commas between);
Your first program will generate a Web page. It will use the fact that every major browser has an object model for the components of an HTML document. The models are not identical, but share the object document that you can use to access (or create) parts of a Web page. The object document has the function writeln which will create a line of an HTML document from a string. The following line
document.writeln("<H2>A Header</H2>");
would create this: To create an HTML document with the single line above, create an empty HTML document and place the following script in the head.
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.writeln("<H2>A Header</H2>");
//-->
</SCRIPT>
You will build a Web page using JavaScript .
HTML Forms are used to enter data that will be processed either by a client-side or server-side application. Later in the course you will see forms used with Java Servlets and ASP scripts.Forms are made up of various input elements. In each case the data is returned in the value data member of the form element.
The standard way to retrieve data is with an text imput element.This is similar to a text box in Windows. Try typing in the text box below.
The code for a form containing this text element is given here.
<FORM><BR> Enter your text here. <INPUT TYPE=TEXT NAME=FirstText VALUE="Hi" > </FORM>
The Password Input Element is the same as a text input except the echo print is all stars. This allows someone to type a password without having it visible on the screen.
<INPUT TYPE="PASSWORD" NAME="Password" VALUE="" SIZE="10" MAXLENGTH="30">
This code gives you the following text box. Type in it to check out how it works.
You would normally see the input item at this point, but hidden elements aren't visible. They are used to store data about the current page that is used by server-side programs. The form this data takes is the following.
<NPUT TYPE=HIDDEN NAME=PrivateData VALUE="www.myhome.com" >
In addition to input elements, programmers can provide users with combo boxs created using the SELECT element and its attendent OPTION element. Value is the actual string returned by the getParameter call described below. If no value is specified, the string following the option is returned. For example if "VALUE = NE" is not included in the first option, "Northeast" is returned. The following code:
< FORM> < SELECT NAME = REGION> < OPTION VALUE = NE > Northeast < OPTION VALUE = MA > Middle Atlantic < OPTION VALUE = SE > Southeast < OPTION VALUE = MW >Midwest < OPTION VALUE = NW > Northwest < OPTION VALUE = W> West < OPTION VALUE = SW> Southwest < /SELECT>< /FORM>
gives you this listbox.
The same list can be displayed as a listbox by adding the value SIZE = to the length of the list. In this case 7.
The code in this case is
<FORM> <TABLE CELLSPACING=4 CELLPADDING=4> <TR > <TD > I would rather live here </TD> <TD > <SELECT NAME=Regions SIZE =7 > <OPTION VALUE=NE> Northeast <OPTION VALUE=MA> Middle Atlantic <OPTION VALUE=SE> Southeast <OPTION VALUE=MW> Midwest <OPTION VALUE=NW> Northwest <OPTION VALUE=W> West <OPTION VALUE=SW> Southwest </SELECT></TD> </TR> </TABLE> </FORM>
Check boxes are used when you want to retrieve zero or more values from a group of possible values. They differ from radio buttons since more than one may be checked. When you use check boxes that all have the same name, you have to parse the string returned to look for commas.
If you had given the check boxes below the same name, and check boxes 1 and 3 you would get 1,3 back as your results. If you give each checkbox a different name, you have to retrieve each value separately. In either case, the value may be null if no box is checked, so you must first check for null before doing anything to the string.
The checkboxes above were generated by the following code. In this case the program was designed to compute the sum of the values returned (similar to the type of computation needed to get the style of a font).
Check 'til your heart's content <BR><BR>check 1 <input type = checkbox name = "check1" value = 1> <BR><BR>check 2 <input type = checkbox name = "check2" value = 2 checked> <BR><BR>check 3 <input type = checkbox name = "check3" value = 3>
Radio buttons are used when you want the user to respond with exactly one value from a group of related choices. The radio boxes are grouped by giving them all the same name and different values. The values are returned as a string. You can make sure that one of the boxes are checked by adding the worded "checked" to the one you want as the default. In this example the first button is the default.
Check one only please <BR><BR>radio 1 <input type = radio name = "radio" value = 0 checked> <BR><BR>radio 2 <input type = radio name = "radio" value = 1> <BR><BR>radio 3 <input type = radio name = "radio" value = 2>
This is how this set of radio buttons looks in a browser.
Text areas are used to display messages or to allow the user to enter a comment. These are normally used with server-side programs. This is an example of a text area.
This form is create with the code:
<FORM><BR> Enter your mail here<BR> <TEXTAREA NAME=MyText ROWS = 10 COLS = 100 ></TEXTAREA> </FORM>
One way to initiate action is to have the user press a button. Buttons can be used anywhere in a form and have any action tied to them. The most frequently used buttons are submit and clear. Submit calls on a function (or functions) that usually result in data being transfered to a server-side application. Clear clears the data out of the form.
The following code created this effect. Notice the JavaScript that was called is in the body of the document. This button has a hander for the onClick event. Notice that document and value are predefined members of objects, thus must be lower case. You determine the case of the rest of the object names. Some programmers sugguest always using lower case to avoid problems.
<SCRIPT LANGUAGE = "JavaScript">
<!--
function popup()
{
alert(document.Form1.Password.value);
}
//-->
</SCRIPT>
<FORM NAME=Form1><BR>
<INPUT TYPE="PASSWORD" NAME="Password" VALUE="" SIZE="10" MAXLENGTH="30">
<INPUT TYPE=BUTTON NAME=Button1 VALUE="Popper" onClick="popup();" >
</FORM>
Click here for examples of how to get and use data from forms in JavaScript.