IS 5800

IS 5800 -- Management Information Systems
Section G01 Schedule -- Fall, 2006
Programming in JavaScript

Topic 1: Objects

·You must describe data and procedures in terms of objects, methods, and properties--not variables, routines, and statements.

·Each HTML form element--each button, selection box, text field, and even the documentform itself--as a separate object containing its very own data.

·Some JavaScript definitions.

Topic 2: Output

·One of the critical aspects of any programming is getting the information back to the user. To understand this, we will use the object "document" and some of its methods to perform the output function.

·The purpose of this example is to provide documentation for your page; usually the documentation is at the bottom of the page.

·We will use the "write" method associated with document to write to the page dynamically. The form we will use is: document.write=(.....)

where what you want written is between the parentheses.

We will also use two attributes of document to obtain information automatically:

·document.lastModified provides the date the page was last changed

·document.location provides the URL of the page

·More document properties can be found at Computer Technology's Page.

·Examples of using the document object can be found at it.ORG's site.

So, the example is:

<SCRIPT language=JavaScript>
         // This automatically updates the last modified date for the page. //
    when = document.lastModified
    document.write("This page was last modified on: " + when + "<br>")
         //
         // This automatically updates the location documentation on the page.
    where = document.location
    document.write("URL: " + where) </SCRIPT>
    Page Owner: <A href="http://www.umsl.edu/~sauter/">Professor Sauter</A> (<A href="mailto:Vicki.Sauter@umsl.edu"> Vicki.Sauter@umsl.edu</A>)
    © Vicki L. Sauter. All rights Reserved.

You can use the document.write to put anything to the screen. For example, consider this code:

Good Afternoon!
<SCRIPT>
         // This is an example of using document.write with html code //
     document.write ("We hope you are well.")
     document.write ("<large><i>We are glad to see you.")
</SCRIPT>

Another form of output is a popup box.

·We will use the function ALERT to demonstrate this.

· It has the form: alert ('Welcome to my page!')

· But, the alert must be associated with some event to make happen. We will associate it with the loading of the document.

· You can also associate an alert with the leaving of a page

Topic 3: Input

·Another critical function is to provide the user a way of communicating with the system. We are going to look at some popup boxes first for this function.

·We will start with a built in function, PROMPT, which allows a question and takes input from the user.

·An example:

<SCRIPT>
reader = prompt("Please tell me your name", "")
document.write ("<dl><big>Welcome " + reader + "</big><small><dd><B>We are glad to see you ...</B></dl><HR>")
</SCRIPT>

·As it is shown, the default is to leave the entry blank. But, you can put something in there as shown in the example below.

<SCRIPT>
reader = prompt("Please tell me your name", "Guest")
document.write ("<dl><big>Welcome " + reader + "</big><small><dd><B>We are glad to see you ...</B></dl><HR>")
</SCRIPT>

·Here is the example we did in class.

·When dealing with input though, we want to be able to check to see if it is correct and complete. Here are two examples of doing that

function showname()

{

name = prompt("Enter Your Name","");

while (name == "" || name == "null")

{

alert("YOU MUST ENTER A NAME");

name = prompt("Enter Your Name","");

}

return name;

}

</SCRIPT>

:
:
:
:
:

<body bgcolor="gray">
<big>Welcome!</big>
<p>

document.write(showname())

</script>

</body></html>

An Alternative :
:

<!--

reader = prompt("Please enter your name","");

if (!reader) {

reader = "Guest";

}

document.write("Welcome: <font class='guest'>" + reader + "</font>");

-->

</script>

·Here is an example of our program that only checks to see if "Guest" has been changed.

Topic 4: Forms

·Forms provide an additional mechanism for obtaining input from the user.

·See forms pages.

·See an example of validation.