JavaScript for Java Programmers

The JavaScript programming language is an OOL that understood by modern browsers. When a JavaScript program is incorporated into a web page, it provides access to DOM and CSS, allowing the web page to be modified dynamically in response to user actions. It is the "only game in town" for client-side dynamic web pages that work on different browsers.

In non-object-oriented aspects JavaScript can be described as an untyped version of Java. This implies that Java programmers can learn to write JavaScript code quickly by recognizing the similarities and focusing learning on the differences.

The similarities between JavaScript and Java indicate elements of JavaScript that a Java programmer is already familiar with. These include comments, literals, identifiers, operators, and control statements. Although JavaScript's handling of these language elements is not identical to Java's, it is upward compatible: things that work in Java work in JavaScript.

JavaScript comments are the same as Java comments.

Java identifiers are legitimate JavaScript identifiers. In addition, JavaScript allows the use of the dollar sign ('$') in identifiers.

Java literals are legitimate JavaScript literals. In addition, JavaScript has literal syntax for regular expressions, functions, and objects. Function and object literals are discussed later. For information about JavaScript regular expressions see David Flanagan, "JavaScript: The Definitive Guide", 5th ed., O'Reilly, 2006.

JavaScript uses the same operators and precedence rules as Java.

Java requires a semicolon to terminate a simple (non-block) statement. JavaScript allows the semicolon but does not require it.

JavaScript uses the same control structures as Java.

Where JavaScript syntax rules allow you more freedom than Java rules, I recommend sticking with the Java rules. Otherwise you will just have more problems when you go back to programming in Java.

JavaScript differs from Java in its execution model, in its treatment of variables and functions, and in various aspects of its object model.

An HTML or XHTML web page can include JavaScript code with a <script> tag. This tag can contain JavaScript code directly or it can reference JavaScript code in an external file. A JavaScript <script> tag should be placed inside the <head> tag.

If the JavaScript code is in embedded directly then it is included with the tag

        <script type="text/javascript">
          JavaScript code
        </script>

If the JavaScript code is in an external file then it is included with the tag

        <script type="text/javascript" src="url" />

where url is the url of the JavaScript file. Multiple JavaScript files can be included in this way.

In either case, the JavaScript code should contain a sequence of variable and function definitions. The code should assign a function to the variable window.onload. This function will be executed when the web page has completed loading.

All JavaScript variables are untyped. JavaScript has two kinds of variables:

local variables - variables that are local to a function invokation, and
instance variables - variables that are members of an object.

Inside a function, the function parameters are local variables. Other local variables in a function can be declared with the keyword var:

var name = value-expression;

All variables other than parameters and variables declared with the keyword var are instance variables.

JavaScript messages have one of two forms.

receiver.variable, or
receiver.method(arguments)

Although this is similar to Java, there is an important difference with regard to methods. JavaScript has a concept of a function that allows functions to exist on their own without being attached to other objects. A function becomes a method of an object when it is assigned to a variable of the object.

JavaScript also differs from Java with regard to default receivers. In the two message forms above, if the receiver is omitted then the implied receiver is the window object. The window object is, in effect, global. There are no other implicit receivers, even inside code for a class!

JavaScript has a literal notation for functions:

      function(parameter-list) {
        statements
      }

Here, parameter-list is a possibly empty, comma-separated list of parameter names. It is similar to the parameter list in a Java method declaration except that the parameters are not typed. As in Java, the parameter names are automatically local to the function.

Function objects can be defined anywhere, even inside another function. They can be used like any other object: they can be assigned to variables and passed as parameters.

They can even have their own instance variables and methods! This allows a function to serve as the constructor method for a class of objects.

The example below assigns a function to a local variable named product.

      var product = function(x, y) {
        return x*y
      };

This is equivalent to the more usual function definition below.

      function product(x, y) {
        return x*y
      }

Local variables in a function can be declared with the keyword var:

        var name = value;

The keyword var is not required here - JavaScript variables do not need to be declared. However, if the keyword var is omitted the variable is global! . This can produce errors that are very hard to debug.

A JavaScript function is potentially an object method. It becomes an object method when it is assigned as the value of one of the object's variables. When JavaScript functions are used as methods, they often need to refer to the receiver object of a message. The keyword this serves this purpose. It is the only way of referring to the receiver.

In JavaScript, everything is an object (or can be treated like an object). For example, functions are objects.

JavaScript uses functions to serve as classes for constructing multiple objects with similar functionality. JavaScript also has an object literal syntax for creating singleton objects.

A class of objects is defined by defining a variable whose value is the constructor function for the class, and following it with definitions for static and instance members. Static members have the following form.

      ClassName.memberName = value;

Instance members have the following form.

      ClassName.prototype.memberName = value;

As usual, the value can be a function literal to produce either static or instance methods.

The Circle class is an example of this kind of construction. The comments indicate the form of messages sent to the Circle class object or one of its instances.

Note that if code in an instance method sends a message to the instance, the receiver is specified with the keyword this. JavaScript does not make this the default receiver. Omitting the keyword this results in sending the message to the global window object!

A singleton literal object can be created with a comma-separated list of member definitions enclosed in braces. Each member definition has the following form.

name: value

Both instance variables and methods can be defined in this way. For methods, the value is often an anonymous function definition, but can also refer to a previously defined function.

Thus the general form of a literal object is the following.

      {
        name₁: value-expression₁,
        .
        .
        .
        name_n: value-expression_n
      }

As with functions, a literal object can be defined anywhere. It is often assigned to a global variable. When this is done, the object can be used like a Java class whose members are all static. The members are accessed by sending a message with the variable as a receiver. The Log object is an example of this kind of construction. The comments indicate the form of messages sent to the Log object.

JavaScript does encapsulate object data along with methods to manipulate the data. However, it has no access restriction keywords such as public, private, and protected. All object members are public.

JavaScript, like Java, has nonparametric polymorphism - the code executed for a method name depends on the receiver of a message but not on the parameters.

Dispatch in JavaScript is table based for both variables and methods. A JavaScript object structure is a lookup table keyed by variable or method name.

Although its functions can act as classes, JavaScript does not have a class-based inheritance mechanism. Although class constructor function have a special variable called prototype, JavaScript does not support prototype chaining, so its inheritance cannot be considered to be prototype based.

JavaScript dispatch uses a fully table-based lookup mechanism. This allows JavaScript objects to get new methods at any time - they can be "educated". A programmer can implement a form of inheritance by copying methods from one object to another.

Some formal definitions:

A gotcha is a language feature that invites problems without providing much benefit.
A chainsaw is a powerful but dangerous language feature.
An owie is what programmers often get when they get near gotchas and chainsaws. The usual symptom of an owie is excessive time spent on debugging.

The most common JavaScript gotcha arises from its default message receiver window. If a variable in a function is not declared with the var keyword it is implicitly a member of the window global object. This is especially troublesome with regard to loop control variables, which often use short names like i.

The most significant chainsaw in JavaScript is the ability to add methods to objects at run time. This is a powerful tool for dealing with data dynamically, but its use requires care and discipline in order to avoid owies.