In this section we describe "core" JavaScript, that is, as a
programming language apart from its intended use in web pages.
We begin by listing the syntactic similarities between JavaScript and
Java, then we turn to the features of JavaScript that distinguish it.
- Rules for embedding comments are the same
- Java literals are legitimate JavaScript literals.
In addition, JavaScript has literal syntax for regular expressions,
functions, and objects.
- Java identifiers are legitimate JavaScript identifiers.
- In addition, JavaScript allows the use of the dollar sign ('$') in
identifiers.
- JavaScript uses the same operators
(+, >, ==, &&, =, etc) and
precedence rules as Java.
- In addition, Javascript uses === which only returns true if its operands are the
same type and value.
- Java requires a semicolon to terminate a simple (non-block)
statement.
- JavaScript allows the semicolon but does not require it if
statements are on separate lines.
- JavaScript uses the same control structures
(if, for, while, etc) as Java.
- In addition, Javascript allows for (var ... in ...)
(examples later).
Variables can be declared using the
var keyword, but they are
not restricted to any one type:
var x = 13;
...
x = "some string";
Since variables do not have types, type errors are not indicated until
run-time:
var y = 13/"some string";
NaN // value returned by JavaScript interpreter
Javascript allows both named and anonymous functions.
Defining a named function consists of the
function keyword, followed by
- The name of the function
- A list of arguments to the function, enclosed in parentheses and
separated by commas
- The JavaScript statements that define the function, enclosed in
curly braces, { }
Here is a function for computing factorial, and an expression whose
value is factorial of 5:
function fact(n) {
if (n === 0)
return 1;
else
return n * fact(n-1);
};
fact(5) // Value is 120
Anonymous functions are defined similarly but without giving them a
name.
Anonymous functions can be used anywhere named functions are expected:
when invoking functions, taking functions as arguments, returning
functions as values, etc.
Below is another expression whose value is factorial of 5. Note:
- The function for computing factorial is iterative rather than
recursive
- The function is not given a name
- The function is called on the argument 5 just as
in fact(5)
function(n) {
var p = 1;
while (n !== 0) {
p *= n--;
}
return p;
}(5) // Value is 120
Objects are the main data type in JavaScript, but there are no classes
(unless simulated using constructor functions; see below).
Objects can have properties and functions (also called
methods)
that can be added dynamically at any time.
Objects can be created in several ways.
The simplest way to create an object is with the
Object
constructor:
var obj = new Object();
Once created, an object can have properties added to it simply by
assigning values:
obj.property = value;
Recall that in Java, this would be done using:
obj.setProperty(value);
Here is an example where an object representing a state of the
Farmer-Wolf-Goat-Cabbage (FWGC) problem is constructed, and four properties
are added:
Here is the rendering:
farmer.html.
An
object literal has the form:
{ prop1 : val1, prop2 : val2, ... }
Below is an equivalent way of creating the previous FWGC object, with
the page rendering in the same way:
When creating many similar objects, as in the FWGC problem, it is
useful to create a
constructor function that can be called
repeatedly.
The code below will create the same object as in the previous two
examples. The need for the
this keyword is explained on the
next slide.
Note that by convention constructor functions capitalize their first
letter.
A constructor function
F is intended for use with the
new
operator.
When "
new F(...)" is encountered, three things happen:
- A new object is created (as with "new Object()")
- The function F is invoked, with the newly constructed
object passed in as the value of the this keyword
- The new object is returned as the value of new F(...)
Thus
this in JavaScript constructor functions acts like the
implicit parameter
this in non-static Java methods.
An object
method is a property whose value is a function.
Methods are defined the way normal functions are defined, except that
they have to be assigned as the property of an object.
In the example below, a
toString method is added to the
constructor function for a FWGC state object.
Here is the rendering of the page:
farmer4.html.
HTML pages with a significant amount of JavaScript code often have their
code separated out from the HTML pages that use it.
JavaScript files usually have a
.js suffix.
When an HTML page needs to use JavaScript code that is contained in a
separate file, say
file.js, it uses the
script element with
a
src attribute in the following way:
<script src="file.js"></script>
In order to make calls to code contained in
file.js, the HTML
page can include another
script element with a body:
<script>
...code that uses code in file.js...
</script>
The JavaScript factorial code is shown below in
factorial.js.
Note the absence of the
script element.
Here is how the browser renders
factorial.html.
factorial.js
factorial.html