IT 202 - Web and Multimedia Technology

JavaScript

First, a few HTML tags that are used with JavaScript.

 

<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: &nbsp; &nbsp

<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 ("").

 

JavaScript Objects and Methods

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 Date object allows JavaScript code to retrieve specific information about the date stored in the Date object.