CSCI 4900/6900

Web programming

Lecture 1 -- May 16, 2001

Chapter 1 describes the infrastructure of the World-wide Web. Be sure you understand the meaning and function of each of the following:

Basic HTML tags -- heading section

Basic HTML tags -- body section

Refer to the  Netscape documentation for detailed information on these tags. Understand the fundamental syntax

<tag attribute=value attribute=value...>

used for HTML tags.

Layered protocol model

Request-response protocols

Chapter 2 describes client-side and server-side scripting.

Client-side scripting

View  http://www.visualinterdev.org/ip/samples/chapter2/javawebpage.htm  in both Navigator and IE. In each browser, choose View/Source. You will find that

Server-side scripting

Go to  http://msdn.microsoft.com/library/default.asp for Microsoft's version of JavaScript, and  http://developer.netscape.com/docs/manuals/js/client/jsguide/index.htm for Netscape's. We'll examine some of the subtle differences between these two versions later on.
 

The Document Object Model

Chapter 3 describes object-oriented programming, which should be familiar to all of us. Be sure you recall the basic OO terminology: We'll discuss language properties in the next lecture, but these are key differences between the scripting languages JavaScript and VBscript versus the programming languages C++ and Java: The best way to program with objects is to instantiate objects which someone else has already built and tested. Here is the Netscape object heirarchy:

This image is taken from the Netscape documentation at http://developer.netscape.com/docs/manuals/js/client/jsguide/index.htm. Note that it is essentially identical to the diagram on page 82 of Halata's book.
 

Hierarchy in the object model

Very important: in the diagram below, the arrows represent containment. For example image[] is a member of document, not a subclass of document. So for example if you had --then the textbox could be accessed from a script by referring to document.custDataEntry.firstName. Note that document is a name already -- it refers to a unique document object which is always present.

Properties and methods of built-in objects

You must refer to the text or the documentation to discover the properties of these objects. For example, you will find that the value of a text box is the text which has been entered into the box. Then to refer to the contents of the text box we just defined, you would use document.custDataEntry.firstName.value.

An important method is the write method of the document object. Writing

document.write("Hi Mom! Are we having fun yet?");
-allows you to insert text into the Web page. This allows you to control the contents of the page based on conditions which only become apparent at runtime.

Events and event handlers

Events in the scripting context are typically user mouse actions, but can also include events such as the page being loaded. Event handlers are properties of objects which specify what action you want the object to take when the event occurs. Delivery of events to objects is handled by the OS and the application, so your code doesn't have to worry about this. For example:
<a href="www.cs.uga.edu/~dme"
     onMouseOver = "window.status='Go to Dr. Dans home page';return true">Dr. Dan's home page</a>
defines the onMouseOver event handler, which is automatically invoked when you move the mouse over the link. Try it on this link!
 Dr. Dan's home page
You may have noticed that the window status message changes when you move the mouse over the link, but does not change back when you move the mouse off! For this you need the onMouseOut event handler.

The High-level objects

All the objects reward study, but especially the high-level ones. I recommend Chapter 11 of the  Netscape on-line JavaScript docs  listed above. Here is a quick summary of the capabilities of these objects: