JavaScript

views updated May 17 2018

JavaScript

JavaScript is a programming language designed specifically for electronic documents on the World Wide Web. Documents on the web are written in Hypertext Markup Language (HTML) . JavaScript programs are embedded within HTML to add dynamic interactivity to web documents.

JavaScript may look like the programming language Java, but it is not Java. As a scripting language, JavaScript is intended to take web page designers a step beyond HTML without the complexity of a full programming language. A simple JavaScript program can add interesting interactive functions to a web page. JavaScript is also suitable for the development of large and elaborate user interfaces in web documents. Good programming skills are necessary to master it, and sophisticated tools are becoming available for JavaScript development.

JavaScript is not compiled . Embedded within HTML, JavaScript is interpreted by the web browser. A JavaScript program can control document content and its appearance, interacting with the HTML source code and the browser functions. It makes use of the user interface mechanisms already in HTML to interact with users of the web document. It can manipulate embedded images, but cannot produce graphical displays. It should not read or write files, except in using cookies as permitted by the web browser. It can access other web documents using the Uniform Resource Locator (URL) , but it cannot make network connections on its own.

The following is an example of the JavaScript program embedded in an HTML document. JavaScript program code is embedded between the

<SCRIPT> and the</SCRIPT> tags.

<TITLE>Java Script Example One</TITLE>

</HEAD><BODY>

<HR>

<H3>JavaScript Example: HELLO</H3>

<HR>

// Ask for the user's name to greet. (Default name is Peter.)

var name = prompt ("Tell me your name, please.","Peter");

// Set name to STRANGER if user refuses to enter a name.

if (name == null) name = "STRANGER";

// Generate greeting with the name, in different styles.

var greeting = "Hello " + name + "!";

document.write(greeting.bold()+"<BR>");

document.write(greeting.italics()+"<BR>");

document.write(greeting.toUpperCase()+"<BR>");

</SCRIPT>

</BODY></HTML>

The HTML document makes use of the SCRIPT tag to include a JavaScript program. When the browser opens up the document, it interprets the JavaScript program. The short program uses the browser's prompt function to prompt the user to enter a name, and then generates the content of the page with the name that is entered.

In the JavaScript source program, the double slash "//" indicates a program comment until the end of line. The keyword var declares variable for use. The variables declared in the program are name and greeting. Any text included within a pair of double quotes (or single quotes) is a text string. Using the plus sign ( ) between text strings concatenates them to form a longer string. The program calls the prompt function provided by the browser to first pop up a dialog box to prompt the user. The first argument of the function call is the text string to describe the information being requested. The second argument is the default text entry initially placed in the pop-up dialog box. Figure 1 illustrates the pop-up dialog box when the browser opens up the HTML document.

The user can then type in an entry and click "OK," or refuse to supply an entry and cancel. The variable name in the JavaScript program will then pick up the entry. If no entry is supplied, the variable name becomes null, having no value. The next line in the program then checks to see if "name" has a value; if it does not have a value it is set to STRANGER. The next line in the program goes on to form the greeting string in the variable greeting. Because addition concatenates the strings, if the name entered is "Quincy," the variable greeting would have the string "Hello Quincy!" The next three lines then generate the document content with the greeting string in different styles. The function document.write( ) takes the string argument, and generates that as content in the HTML document. Note the different styles generated using the functions on the string—bold, italics, regular type setting to uppercase. Appropriate HTML source code is generated accordingly. The following illustrates the web page generated, with Peter as the name entered.

Unlike Java, JavaScript is a loosely typed language. It means that variables used in the program do not have a definite type: a variable can take up any type of content, and they are all declared with the keyword "var." For example, a variable may take a text string as content, but the same variable can also take an integer number and use it in a calculation. Like many other programming languages, JavaScript also has control structures such as functions, conditional (if) statements and loop (while) statements, as well as data structures such as arrays.

JavaScript is an object-based language: A JavaScript program can create and use objects of existing types provided for it, but cannot create new types of objects. Therefore, it is not an object-oriented programming language like Java. A significant design point in JavaScript is its access to the Document Object Model (DOM) used in the web browser. The DOM is the data structure in the web browser used to manage the documents viewed and used on the browser. When the browser is running, it has a window open for viewing of documents. Each document in turn comprises its content, links, anchors, images, and other components. All these are objects available to the JavaScript programs running in the browser. In the earlier program example, document.write( ) invokes the write( ) method in the current document object, generating content in the document as HTML source.

Along with the DOM, the web browser in use also generates events. An event occurs when the user interacts with the user interfaces on the web page presented by the web browser. For example, when the user clicks the mouse button with the mouse cursor over a radio button on the web page, it generates the onClick event. The HTML source can specify in the value of the onClick parameter in the INPUT tag, to call a JavaScript function. The specific event will therefore invoke the JavaScript function as an event handler to perform the necessary processing. The following is an illustrative example.

<TITLE>JavaScript Example Two</TITLE>

function onButton()

{

var thisBox = document.myForm.radio1;

if (thisBox.checked == true)

{

document.myForm.radio2.checked = false;

document.bgColor='white';

alert("Thanks!");

} }

function offButton()

{

var thisBox = document.myForm.radio2;

if (thisBox.checked == true)

{

document.myForm.radio1.checked = false;

document.bgClor='black';

alert("Hey! Turn the lights back ON!");

} }

</SCRIPT>

</HEAD><BODY>

<HR>

<H3>JavaScript Example: LIGHT</H3>

<HR>

<P>Please feel free to try the buttons.

They turn ON and OFF the lights on the page,

using JavaScript functions as event handlers.<BR>

Light ON<BR>

Light OFF<BR>

</FORM>

</BODY></HTML>

Note in the preceding HTML source how the event onClick also names a parameter for the <INPUT> tag, and the value of the parameter makes a call to the JavaScript function. The JavaScript functions can also use the name of the components to alter its state. The following shows the web page rendered by a browser opening up the HTML document. The radio buttons provide for user interaction to change the background color of the document, using JavaScript functions as event handlers.

Since its inception, JavaScript has already gone through four releases at the time of this writing, the latest being JavaScript 1.3. JavaScript is still developing. There can be compatibility problems such that the same JavaScript program may behave differently with different web browsers and different browser versions. The European Computer Manufacturers' Association (ECMA) and the International Organization for Standardization (ISO) have adopted ECMAScript, which is based on JavaScript, as a standard. The adopted standard will surely help to resolve the compatibility problems.

see also Internet; Object-Oriented Languages; Procedural Languages; Programming; World Wide Web.

Peter Y. Wu

Bibliography

Flanagan, David. JavaScript: The Definitive Guide, 4th ed. Cambridge, MA: O'Reilly & Associates, 2001.

Goodman, Danny. JavaScript Bible, 4th ed. New York: Hungry Minds, 2001.

Computer Sciences Wu, Peter Y.

JavaScript

views updated May 23 2018

JavaScript A scripting language designed to add features to Web pages. JavaScript code is embedded in the HTML code and is run by the Web browser. JavaScript is loosely based on Java and was produced by Netscape and Sun Microsystems.

A Dictionary of Computing JOHN DAINTITH