Print this Section

  
  

The Javascript Language

Creating a dynamic Web page involves writing scripts to change property settings and to call up processing methods associated with Browser Objects surrounding the page. These scripts are written in the JavaScript language and appear on the page to which dynamic effects are applied.

Client-Side Scripting

JavaScript is a relatively easy-to-learn, simple-to-use language. It provides much of the processing capability of full-featured programming languages, but without the investment of time and effort needed to acquire a full range of programming skills. Certainly, JavaScript does not provide the range of capabilities of standard programming languages. Nevertheless, it does offer the common arithmetic, logical, and control capabilities that the Web developer is most likely to need to make Web pages interactive and dynamic.

JavaScript is a client-side scripting language, meaning the ability to run JavaScript code is built into modern browsers. Code is embedded on the Web page along with HTML and CSS formatting codes. Thus, scripts have direct processing access to the layout, style, and content components of the page. The browser interprets and runs scripts locally without having to make return trips to the server to update page content or otherwise respond to user actions and requests.

As a client-side language, JavaScript has inherent limitations when it comes to information processing activities. It cannot access the local hard drive nor can it make data access requests to the Web server. Therefore, the language cannot be used to access files or databases, the crucial prerequisites for e-commerce or other major server-based applications. It can assist the server by manipulating data downloaded to the browser, but it cannot process data directly on the server. Despite these limitations, however, JavaScript can perform invaluable browser-side services to make Web pages interactive with users and responsive to their needs.

History of JavaScript

Despite the similarity in names, JavaScript is not the Java language nor even a subset of Java. The two languages are unrelated except for minor syntactical similarities. JavaScript was developed by Brendan Eich at Netscape to allow Web developers to build interactive Web pages that run on the browser or client-side. JavaScript does this by manipulating the DOM to update content on a page. While in development, JavaScript was known by its codename "Mocha". Orginally, it was to be called LiveScript. However, as part of a licensing deal with Sun Microsystems, Netscape agreed to include the Java environment in its Netscape browser in exchange for permission to rename LiveScript to JavaScript.

After the release of JavaScript, Microsoft developed its own client-side scripting language known as JScript. JScript is mostly compatible with JavaScript, despite small differences. Netscape later submitted JavaScript to the European Computer Manufacturers Association (ECMA) for standardization. The result was a language officially known as ECMAScript. Because of the historical use of the name JavaScript, it it is likely that the name will continue to be used to refer to JavaScript, JScript, and ECMAScript. The most current version of JavaScript is 1.8. However, version 1.5 is the release most compatible with current versions of JScript and ECMAScript. Therefore, this tutorial will focus on JavaScript 1.5.

Placement of JavaScripts

The most common convention is to code JavaScript in a separate, external .js file. The <script> tag is then included in the <head> section of the page to call the page. This location and general format for a script section is shown in Figure 1-21.

<!DOCTYPE HTML>
<html>
<head>
    <title>Web page</title>
    <script src="javascript.js"></script>
</head>
<body>
    Page text and HTML...
</body>
</html>

Figure 1.2. JS files can be placed in the <head> or just before the closing </body> tag.

The external javascript file is shown below.

window.onload = init;

function init() {
    additonal javascript code...
}

Figure 1.3. When the window.onload event occurs, the init function is executed.

JavaScript Functions

The first statement in the javascript file is window.onload. This statement or event listener is triggered when the browser window loads and calls the init() function. The most reliable way to know that it's safe to reference DOM objects is to confirm that the browser has loaded the entire page. If references to DOM elements are made prior to the page load, errors will occur. The init() function contains javascript statements, references to DOM elements, or calls to other functions. A JavaScript function works just like functions in other languages. That is, it is assigned a name by which it can be called upon to perform its processing, and it contains one or more statements to perform whatever processing it is designed to do. The general structure of a JavaScript function is shown in Figure 1-22.

function functionName() {
    statement1;
    statement2;
}

Figure 1-22. Structure of a JavaScript function.

A function is identified by the keyword function, followed by a programmer-supplied name for the function, and followed by a set of parentheses that optionally enclose data values needed by the function to carry out its processing. Processing statements are coded between { and } characters which identify the beginning and end of the function. The statements themselves normally are coded one per line ending with a semicolon (;). A semicolon is optional unless two or more statements appear on the same line, in which case a separating semicolon is required. One or more named functions can appear inside the <script> section depending on how many different processing routines are required by the page.

Case Sensitive Syntax

It is important to remember that JavaScript code is case sensitive; you cannot indiscriminately use upper- and lower-case notation. With few exceptions, JavaScript is written in lower-case characters. You have some flexibility in coding programmer-supplied names; otherwise the syntax of the language is strict. Pay close attention to the formats presented here for JavaScript statements.

Using Functions to Change Styles

As mentioned, scripts make reference to HTML elements through their id values, and they access element properties and methods through their names. Therefore, it is common to write functions using these references. The following function, for example, assigns a different text size, color, and boldness to the HTML tag identified by the attribute id="MyTag".

window.onload = init;

function init()
{
  changeStyle();
}

function changeStyle()
{
  document.getElementById("myTag").style.fontSize = "2em";
  document.getElementById("myTag").style.fontWeight = "bold";
  document.getElementById("myTag").style.color = "red";
}

Figure 1.23. Javascript code that changes style settings

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Web Page</title>
    <script src="javascript.js"></script>
</head>
<body>
    <p id="myTag">This is a paragraph that has its styling changed.</p>
</body>
</html>

Figure 1.24. HTML code that implements the JS code in Figure 1.23.

The paragraph must be assigned an id so it can be identified to the script. The script references the tag through this id in setting the text and color style properties of the paragraph. Similar scripting techniques are used to activate methods associated with tags.

Calling Functions with Event Handlers

Functions appearing in a JavaScript file are not automatically run when the page loads. They must be explicitly called upon, by name, to perform their processing. The most common way to call a function into action is on the basis of some user event surrounding the page, for example, the user clicks the mouse on an HTML tag. Within the init() function the event handler is associated with a function call.

A popular event handler for trapping user events is the onclick handler. This handler detects a mouse click on an HTML element and can trigger a function call in response. The general format for associating an event handler with a function call is shown below.

window.onload = init;

function init()
{
  var myvar = document.getElementById("elementID");
  myvar.onclick = changeStyle;
}

Figure 1.25. Using an event handler to call a function.

When the page loads, the init() function is called. The init() function contains the event listener, in this case, the event is the clicking of the HTML element with the assigned id value MyTag. When the onlick event occurs, the function ChangeStyle() is called.

window.onload = init;

function init()
{
  var myvar = document.getElementById("myTag");
  myvar.onclick = changeStyle;
}

function changeStyle()
{
  document.getElementById("myTag").style.fontSize = "2em";
  document.getElementById("myTag").style.fontWeight = "bold";
  document.getElementById("myTag").style.color = "red";
}

Figure 1.26. Javascript code that changes style settings when tag is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Web Page</title>
    <script src="javascript.js"></script>
</head>
<body>
    <p id="myTag">This is a paragraph that has its styling changed.</p>
</body>
</html>

Figure 1.27. HTML code that implements the JS code in Figure 1.23.

This event handler and associated script are illustrated below. The exact code shown above appears on this page to change the styling of the following paragraph when it is clicked.

This is a paragraph that has its styling changed.

Figure 1.28. Click the paragraph to see the change from Figure 1.26 and 1.27.

As in the case of DOM properties and methods, there are numerous page events and associated event handlers that need to be learned. The following table lists several event handlers that can be applied to trap mouse events. Other handlers are introduced throughout these tutorials.

Event Handler Event
onclick The mouse button is clicked and released with the cursor positioned over a page element.
ondblclick The mouse button is double-clicked with the cursor positioned over a page element.
onmousedown The mouse button is pressed down with the cursor positioned over a page element.
onmousemove The mouse cursor is moved across the screen.
onmouseout The mouse cursor is moved off a page element.
onmouseover The mouse cursor is moved on top of a page element.
onmouseup The mouse button is released with the cursor positioned over a page element.

Figure 1.29. Event handlers associated with mouse events.

Inline Scripts

In the early years of JavaScript, it was common to apply javascript commands directly within the HTML. The general format for this code arrangement is shown below:

<p id="myTag"
    onclick="document.getElementById('myTag').style.fontSize='2em';
    document.getElementById('myTag').style.fontWeight='bold';
    document.getElementById('myTag').style.color='red'">
    This is a paragraph that has its color changed.</p>

Figure 1.30. Deprecated (OLD) way of inlining JavaScript.

While it is common to still find HTML pages with embedded JavaScript, this is no longer considered a best practice.

Functions Calling Functions

It is often the case that script processing required for a page is not, or cannot, be contained in a single function called by an event handler. A common situation is that a first function is called by an event handler to initiate processing, and that additional functions are called to carry out additional processing. There is a cascade of calls from one function to another as separate functions carry out their specialized processing tasks.

One function calls upon the processing of a second function simply by specifying its name. This format for one function to call a second function is shown in Figure 1-31.


function functionName1() {
    functionName2();
    continued processing...
}

Figure 1.31 A JavaScript function calling another function.

A call is made from one function to a second function by supplying its name. Processing control passes to the second function where, upon completion of processing, control returns to the original function. The original function continues its processing at the statement following the function call.

Consider the following script outline containing three functions, process1(), process2(), and process3(). The first function is called from an event handler coded in a button. This function calls a second function which calls a third function to carry out page processing.

function process1() {
    ...
    process2()
    ...
}

function process2() {
    ...
    process3()
    ...
}

function process3() {
    ...
}

Figure 1.32. Chaining together JavaScript calls.

During execution of process1(), a call is made to function process2(). Script control passes immediately to process2(), which begins executing its statements. One of the statements is a call to function process3(). Again, control passes immediately to process3(), which begins executing its statements. After process3() finishes its processing, control returns to process2() where processing continues with the statement following the function call. After process2() finishes its processing, control returns to process1() at the statement following the original call to process2(). After process1() finishes its processing, the script ends.

Although in most cases involving dynamic styling you will be able to restrict processing to a single function called from a single event handler, there are situations where a cascade of function calls is needed. Often this need arises when designing functions that are functionally tight. That is, rather than including all possible processing tasks inside a single function, multiple functions with distinct and focused tasks are created. In these cases, more that one function may be needed, and they may need to call each other, to complete processing.


TOP | NEXT: JavaScript Comments