This Article Full Text (PDF) Submit a scholarly reply Alert me when this article is cited Alert me when eLetters are posted Alert me if a correction is posted Services Similar articles in this journal Similar articles in PubMed Alert me to new issues of the journal Download to citation manager Citing Articles Citing Articles via Google Scholar Google Scholar Articles by Doyle, D. J. Search for Related Content PubMed PubMed Citation Articles by Doyle, D. J.

[1] Web-Based Interactivity Using JavaScript

Cleveland, Ohio

(Medical Education Web Page Series – Part 6)

JavaScript is a scripting computer language that allows one to add programming capability to your Web pages. It can be used for a great many purposes, but it is especially good in helping provide Web page interactivity.

JavaScript is different from Java, another popular programming language also often used in Web page projects. Java was developed at Sun Microsystems. JavaScript, on the other hand, was originally developed at Netscape. Microsoft's version of JavaScript is known as JScript. Both JavaScript and JScript are implementations of ECMAScript (ECMA262), the corresponding international standard.

Both JavaScript and Java are similar in so far as they both involve a technique known as Object Orientated Programming (OOP). In essence, object-oriented programming centres on the idea of user- and system-defined "chunks" of data, with a controlled means of accessing and modifying those chunks.

Object-oriented programming involves "objects", "methods" and "properties". An object is like a black box that stores some information. It may have a direct way for you to access that information as well as a way for you to save or change the information, but it may also have other less obvious ways of interacting with the object to obtain information. A Web page is an example of an object, as is any table, form, button, image, or link on the Web page.

Information associated with an object may require you to use a method to access it. The directly accessible information in the object are its properties. The difference between data accessed via properties and data accessed via methods is that with properties, you see exactly what you’re doing to the object, while with methods, unless you created the object yourself, you just see the effects of what you’re doing.

A Java "applet" (so-called because it's a small application) may run on a Web page, but is actually a fully contained program in and of itself. Java must be "compiled" into what's known as "machine language" before it can be run. By contrast, JavaScript programs cannot stand alone; they must run within a Web page, and the Web page code must be run in a browser that understands the JavaScript language (most do).

JavaScript is not part of HTML, but is used in an HTML program. For instance, the following JavaScript statement will write a message on the Web page using a blue font:

document.write("<FONT COLOR=’BLUE’>This is Blue Text</FONT>")

while this statement will cause a pop-up alert box to be displayed:

alert("<FONT COLOR=’BLUE’>This Is Blue Text</FONT>")

JavaScript can be used for many applications, such as the following:

Providing Interactivity

As noted above, interactivity in Web pages can be provided by JavaScript to allow (for instance) users to enter answers to questions and find out whether their answer is correct.

Browser Detection

JavaScript can be used to determine which browser is used by a visitor coming to your Web page. Depending on the browser identified, a subsequent Web page designed specifically for that browser can then be loaded.

Cookies

Cookies are short messages or information given to a Web browser by a Web server. JavaScript can be used to store and retrieve cookie information on a visitor's computer; with appropriate JavaScript programming, this information can be retrieved automatically next time the user visits your Web page. This information can then be sent back to the server each time the browser requests a page from the server. The user's browser stores the cookie information in a text file called cookie.txt.

Control Browsers

JavaScript can be used to produce Web pages with customized windows, where one can programmatically specify the browser's buttons, menu line, status line or whatever else should be present.

Validate Forms

JavaScript can be used for validating inputs to fields before submitting a form to a server; an example would be validating an entered e-mail address to ensure that the address has an @ in the address.

Dynamic Text

JavaScript can put dynamic text into an HTML page. A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text (name) into the display of an HTML page, just like the static HTML text: <h1>Crawford Long</h1> does.

React to Events

JavaScript can react to events. That is, JavaScript can be used to execute a command when something happens, like when a page has finished loading or when a user clicks on an HTML element like an image or a hyperlink. Consider, for example, a clickable button whose definition includes the words onClick="do_task()". Here, the onClick event, as its name implies, will run the function do_task when the user clicks on the associated button. (Other events include OnMouseOver, OnMouseOut, OnFocus, OnBlur, OnLoad, and OnUnload.)

To use JavaScript in a Web page you will need to let the browser know in advance when you enter JavaScript code to an HTML page. This is done using the <script> tag. The <script language="javascript"> and </script> tags are used to tell where the JavaScript code starts and ends.

Here is an example of a simple JavaScript program that puts a message on the computer screen:

<html>

<head>

<title>My First Javascript Project</title>

</head>

<body>

<script language="javascript">

alert ("Welcome to My First JavaScript Project!");

</script>

</body>

</html>

The alert statement in the above example is a standard JavaScript command that will cause an "alert box" to pop up on the screen. The visitor will then need to click the "OK" button in the alert box to proceed. A similar effect could also be achieved, but without using an alert box, by replacing the alert statement with the following:

document.write ("Welcome to My First JavaScript Project!");

In this case the message would be integrated into the displayed Web page.

To achieve the same result in a blue font one would use this command:

document.write ("<FONT COLOR=’BLUE’> Welcome to My First JavaScript Project! </FONT>");

Let's close with an example of a JavaScript program to enter pressures in units of cm H₂O and convert them to enter pressures in units of mmHg. This illustrates how simple it is to enter data using "forms" in JavaScript. The figure below shows how easy it can be.

View larger version (28K): [in this window] [in a new window]   FIGURE Use of "forms’" for data entry and output in JavaScript

This Article Full Text (PDF) Submit a scholarly reply Alert me when this article is cited Alert me when eLetters are posted Alert me if a correction is posted Services Similar articles in this journal Similar articles in PubMed Alert me to new issues of the journal Download to citation manager Citing Articles Citing Articles via Google Scholar Google Scholar Articles by Doyle, D. J. Search for Related Content PubMed PubMed Citation Articles by Doyle, D. J.