CS 334

Last of the JS Notes:

Form processing notes with JS. loan calulator

More form processing with javascript. Returning values BACK to the form.

How was that done?

: The function:

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

function encode(text) { Ref="0123456789abcdefghijklmnopqrstuvwxyz.-~ABCDEFGHIJKLMNOPQRSTUVWXYZ"
Result=""
for (Count=0; Count<text.length; Count++) {

Char=text.substring (Count, Count+1);
Num=Ref.indexOf (Char);
EncodeChar=Ref.substring(Num+1, Num+2)
Result += EncodeChar

} document.form1.result.value=Result
}

// - End of JavaScript - -->
</SCRIPT>

The form:

<FORM name="form1">
<table border=0><tr><td>
Type your word<td><INPUT NAME="input" TYPE=Text><br><td>
<INPUT TYPE=Button VALUE="submit" onClick="encode(this.form.input.value)"><tr><td>
Result:<td><INPUT NAME="result" TYPE=Text>

</table>
</FORM>

More on methods:

Methods

When you need to DO something, like open a window, write text to the screen, get the sin of a number, isolate the 1st letter in a word, assign today's date to a variable, send the user back to the previous page, or display an alert box you are using a method.

When you change the details about something which already exists, you are changing its properties.

For example:
document.bgcolor="red" is a property because I'm changing the existing details about the document. alert("Hello There") is a method because it creates something new, an alert box.

Here are a few types of commands that methods are useful for.

  • Date Methods - set variables to the clock time in a variety of ways.
  • Window Methods - used to open and close new windows
  • Document Methods - Generate new documents on the fly.
  • Form Methods - select form items, send the cursor to text boxes and submit forms.
  • History Methods - Press the reader's 'Back' button and other tricks.
  • Text Methods - Define the look of your text variables before your display them.
  • Math Methods - sin, cos, round, random, absolute value, etc.
  • MessageBox Methods - Alert, Prompt, and Confirm are all methods.

Methods example

The code:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

function MyWindow(message) {

//Define Date to display in local syntax
now = new Date();
LocalTime = now.toLocaleString();
//Define contents of page
contents=
'<body bgcolor="beige">'+
'<h2>Hello</h2>'+
'Click on the message below to close this window<br>'+
'<A HREF="javascript:window.close()" >'+
message +
'</A>'
//Create new Window
options = "toolbar=0,status=0,menubar=0,scrollbars=0," +
"resizable=0,width=300,height=200";
newwindow=window.open("","mywindow", options);
newwindow.document.writeln(LocalTime);
newwindow.document.write(contents);
newwindow.document.close();
}

// - End of JavaScript - -->
</SCRIPT>

</HEAD>
<BODY bgcolor="white" onLoad="this.form1.text1.focus()">

<TABLE BORDER=1 bgcolor="beige"><tr><td><B>Type a message in the box, <br>it will become a link to close the new window.</B>
<FORM NAME="form1">
<INPUT NAME="text1" TYPE=Text SIZE="50" MAXLENGTH="50"><br>
<INPUT TYPE=Button VALUE="Create my window" onClick="MyWindow(form.text1.value)">
</FORM></TABLE>

</BODY>
</HTML>

Date Methods

Before you can do anything which involves the current date/time, you have to set a variable equal to the current date. now = new Date() is command to get the current date and time from the user's computer, and assign it to the variable, now in one long string.

toLocaleString() is a method which converts the raw date/time string of text into the local convention. Depending on what country JavaScript thinks the user is in, the toLocaleString() may present the month first, or the day first.

Here are some other Date methods:

now.getDay()= Day of week (0=Sunday)
now.getMonth()= Month (0 to 11)
now.getDate()= Day of month
now.getYear()= Year
now.getHours()= Hours
now.getMinutes()= Minutes
now.getSeconds()= Seconds

The Window.open() method

When I want to open a new window, first I think of a name for the window, such as MyWindow. Then I open the window with this command:
MyWindow = window.open()

The window.open method can have 3 optional parameters. Parameters are things you can type inside the parentheses to specify how you want the window to open. The 3 parameters are:

  1. A URL so that the window contains a specific HTML document.
  2. A title for the window
  3. A set of options for the window's appearance, including height and width.

NewWindow = window.open("mytest.htm","mywindow","width=100,height=100")