<script>
</script>
- attributes: language
This tag is used to separate the JavaScript code from the
remainder of the HTML code. The
language attribute should have the value of "JavaScript". Also in case, the browser that is viewing
the page does not recognize the JavaScript code all of the code should be
enclosed in an HTML comment. The script
tag should be in the head of the HTML tag, unless the programmer has a good
reason for not putting it there. The
following example shows show this done.
<head> <title>A
JavaScript Web Page</title>
<script language="JavaScript">
<!-- This is the HTML Comment
that hides the JavaScript code from old browsers
JavaScript code goes here
// stop hiding the JavaScript
code -->
</script> </head>
<form>
</form> -
attribute: name
This tag is used to contain the active HTML elements that
interact with JavaScript. The name
attribute is used to access a particular form since a web page may have
multiple forms.
<input> - attributes: type, name, value,
size, "eventHandler"
This tags sets up an active HTML element that interacts
with the JavaScript code. The two types
that we will discuss now are "text" and "button". There are a number of different
"eventHandler". The most
common is onClick.
<input type =
"text" name = ???? value =
???? size = ????>
This tag sets up an area in the HTML form that the
JavaScript code can get input from or write output to. The name attribute is needed so the JavaScript
code can access the text area. The
value attribute is what is displayed in the text area. The size attribute determines how wide the
input field is.
<input type =
"button" value = "button name" onClick = "js_function_name()">
This tag sets up a button with text of "button
name" in the HTML form. When this
button is clicked by the mouse button, the JavaScript function
"js_function_name" is called.
This function needs to already be written in the <script>
tag. The "eventHandler" used
in this tag is onClick.
JavaScript
We will divide our discussion of JavaScript into two
parts: interfacing with the HTML page and performing calculation inside of
JavaScript. Here, we will focusing
on interfacing with the HTML page.
Assume we have the following form:
<form name=formName>
Enter a integer number:
 
<input type = "text" name = "inputArea" value = "0" size = 20 > <p>
<input type = "button" value = "Square Number" onClick = "funct1 ()" >
</form>
The above form has one input area that initially displays
the text "0". The form also
has one button with the words "Square Number" displayed on the
button. When the button is clicked it
will call the JavaScript function "funct1". This function must be written inside of the <script>
tags. The function has no
parameters.
Now, let us look at the following JavaScript function:
function funct1 ()
{
// access the value in the text field "inputArea" and store in
the local variable "number"
var number =
parseInt(window.doocument.fornName.inputArea.value)
// square the number and place it in the text field
"inputArea"
window.document.formName.inputArea.value = number * number
}
To access an object in the form, we need to use the dot
notation. The text of "window.document.formName.inputArea"
accesses the text field "inputArea" in the form
"formName". Since each page
will only have one window and one document, we don't need to name those
elements. To access the value attribute
in the text field, we will again need to use the dot notation. The text
"window.document.formName.inputArea.value" accesses the value
attribute of the text field "inputArea".
The function accesses the value in the text field in the
first line of the function and updates the value in the text field in the
second line. This example is meant to
show how a JavaScript function interfaces with the HTML page.
JavaScript functions alert(string) This is a built in JavaScript function. It takes a single string as its
parameter. The alert function will
display a dialog box on the computer with the message of the parameter string
shown inside. The string concatenation
operator "+" is useful. prompt (string1,
string2) This is another built-in JavaScript function. It takes two strings as its parameters. The prompt function will display a dialog
box on the computer. The dialog box
will display the first parameter string as its message. The dialog box will also have a text field
for the user to input a value. The
second parameter string will be the default value for the text field. The dialog box also has two buttons: "cancel"
and "OK". When the user
clicks the "OK" button, the value in the text field is returned by
the prompt function. When the user
clicks the "cancel" button, the null
value is returned by the prompt function.
The null value is a special
string value. It is written without
quotes, so it is not the same as the strings "null" and the empty
string ("").
The JavaScript code can add dynamic information to a
web page that static HTML code cannot. The use of the
JavaScript statement document.write() is very useful
for this.
The document object in JavaScript allows a number of
useful methods and properties. Here is a case where javascript
may be put in the body of and HTML page instead of in the head.
The page may wish to display some information about the page itself
and the document object is one way to do that.
The document.write() method allows text information (strings) to be added
to the the HTML code. The parameter of the method (the stuff
placed between the parentheses) can be a
single string or a multiple strings separated by commas. Whatever
is written will then be interpreted by the web browser as HTML code,
so you can include HTML tags to help format the information being
written.
The document.URL property gives the URL of the current page.
The document.lastModified property gives the date and time
that the web page was last modified. Note this property gives
the information as a Date object.
The Date object allows JavaScript code to retrieve specific
information about the date stored in the Date object.
This will create a new Date object with the current date and time.
The above methods will return the specified data when used with
a Date object that alread has a date stored in it.
JavaScript Objects and Methods