WEB TECHNOLOGIES

A COMPUTER SCIENCE PERSPECTIVE

JEFFREY C. JACKSON

Chapter 4
Client-Side Programming:
the JavaScript Language

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 An example: “Rollover” effect
• Please run Rollover.html in chapter 5
Cursor not over image Image changes when cursor
moves over

This Rollover effect is implemented by calling JavaScript functions in a

HTML document.

This chapter will focus on JavaScript itself (such as JavaScript Syntax)

Next chapter will cover how to use JavaScript to write dynamic webpages
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript History and Versions
• JavaScript was introduced as part of the
Netscape 2.0 browser
• Microsoft soon released its own version
called JScript
• ECMA developed a standard language
known as ECMAScript
• ECMAScript Edition 3 is widely supported
and is what we will call “JavaScript”

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Introduction
• Let’s write a “Hello World!” JavaScript
program
• Problem: the JavaScript language itself
has no input/output statements(!)
• Solution: Most browsers provide de facto
standard I/O methods; JavaScript can call
these methods.
– alert: pops up alert box containing text
– prompt: pops up window where user can
enter text
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Introduction
Please run JSHelloWorld.html in chapter 4

• Alert box example (providing output)

– Web page and alert box generated by
JSHelloWorld.html document and
JSHelloWorld.js code:

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Introduction
• File JSHelloWorld.js:

window is a JavaScript object; how to create it and use it is explained later.

• File JSHelloWorld.html executing this code:

script element used

to load and execute
JavaScript code

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Introduction
Steps to display the prompt window (as done in the example of JSHelloWorld.html)
•Write a JavaScript file containing the JavaScript code listed below
•Imbed the JavaScript file into an HTML document
•Run the HTML document
• Prompt window example (providing input):
//JavaScript Code:
var inString = window.prompt("Enter JavaScript code to be tested:", "");
document.writeln( inString ); //print user’s input in client area

• result = window.prompt(text, value);

• text is a string to display to the user.
• value is a string containing defualt value (in Input field), which can be changed by user
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0

• result is the string entered by the user, which is returned by prompt().

 JavaScript Properties
• JavaScript and Java are complete different
languages
• Note that JavaScript code did not need to be
compiled
– JavaScript is an interpreted language
– Portion of browser software that reads and executes
JavaScript is an interpreter
• Interpreted vs. compiled languages:
– Advantage: simplicity
– Disadvantage: efficiency

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Properties
• JavaScript is a scripting language:
designed to be executed within a larger
software environment
• JavaScript can be run within a variety of
environments:
– Web browsers (our focus in next chapter)
– Web servers
– Application containers (general-purpose
programming)

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Properties
• Components of a JavaScript implementation:
– Scripting engine: interpreter plus required ECMAScript
functionality (core library)
• The primary component (the focus of this chapter)
• Must be present regardless of the script environment.
– Hosting environment: provide environment-specific
capabilities (to JavaScript programs) running within
the environment
• Example: The alert() and prompt() methods are part of the
hosting environment of Mozilla and IE6.
• All hosting environment functionality is provided via objects

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Properties
• All data in JavaScript is an object or a
property of an object
• Types of JavaScript objects
– Native: provided by scripting engine
• If automatically constructed before program
execution, known as a built-in object (ex: window)
– Host: provided by host environment
• alert and prompt are host objects
• It is constructed as a result of a call to a
constructor during program execution
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Developing JavaScript Software
• Writing JavaScript code
– Any text editor (e.g., Notepad, Emacs)
– Specialized software (e.g., MS Visual
InterDev)
• Executing JavaScript
– Load into browser (need HTML document)
– Browser detects syntax and run-time errors
• Mozilla: JavaScript console lists errors
• IE6: Exclamation icon and pop-up window

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Running Examples
• Run TestJs.html in chapter 4 and input
HighLow.js in prompt box
• This program plays the high-low guessing
game with user.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Basic JavaScript Syntax
Notice that there is no main() function/method

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax
Comments like Java/C++ (/* */ also allowed)

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax
Variable declarations:
- Not required
- Data type not specified

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax

Semi-colons are usually

not required, but always
allowed at statement end

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Basic JavaScript Syntax

Arithmetic operators same as Java/C++

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax

String concatenation operator

as well as addition

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax

Arguments can be any expressions

Argument lists are comma-separated

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax

Object dot notation for method calls as in Java/C++

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax
Many control constructs and use of
{ } identical to Java/C++

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax
Most relational operators syntactically
same as Java/C++

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Basic JavaScript Syntax
Automatic type conversion:
guess is String,
thinkingOf is Number

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Variables and Data Types
• Type of a variable is dynamic: depends on the
type of data it contains
• JavaScript has six data types:
– Number
– String
– Boolean (values true and false)
– Object
– Null (only value of this type is null)
– Undefined
• the type of the value represented by any variable (that has
been declared but has not yet been assigned a value).
• Primitive data types: all but Object
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Variables and Data Types
• typeof operator returns string related to
data type
– Syntax: typeof expression
• Example:

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Variables and Data Types

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Variables and Data Types
• Common automatic type conversions:
– Compare String and Number: String value
converted to Number
– Condition of if or while converted to
Boolean
– Array accessor (e.g., 3 in records[3])
converted to String, i.e., 3  “3”.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Variables and Data Types

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Variables and Data Types

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Variables and Data Types

Special Number values (“Not a Number” and number too large to represent)
For example,
•0/0 produces NaN
•any positive number divided by 0 produces Infinity.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Variables and Data Types

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Variables and Data Types
• Syntax rules for names (identifiers):
– Must begin with letter or underscore ( _ )
– Must contain only letters, underscores, and
digits (or certain other characters)
– Must not be a reserved word

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Variables and Data Types

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Variables and Data Types
• A variable will automatically be created if a
value is assigned to an undeclared
identifier:
var is not
required

• Recommendation: use var to declare all

variables
– Facilitates maintenance
– Avoids certain exceptions
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Statements
• Expression statement: any statement that
consists entirely of an expression
– Expression: code that represents a value

• Block statement: one or more statements

enclosed in { } braces
• Keyword statement: statement beginning
with a keyword, e.g., var or if

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Statements
• var syntax:
Comma-separated declaration list with
optional initializers

• Java-like keyword statements:

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Statements
Please run TestJs.html in chapter 4 and input KeywordStmts.js

JavaScript
keyword
statements
are very similar
to Java with
small exceptions

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Statements

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Statements

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Statements

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Operators
• Operators are used to create compound
expressions from simpler expressions
• Operators can be classified according to
the number of operands involved:
– Unary: one operand (e.g., typeof i)
• Prefix or postfix (e.g., ++i or i++ )
– Binary: two operands (e.g., x + y)
– Ternary: three operands (conditional operator)

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Operators

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Operators
• Associativity:
– Assignment, conditional, and prefix unary
operators are right associative: equal-
precedence operators are evaluated right-to-
left:

– Other operators are left associative: equal-

precedence operators are evaluated left-to-
right

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Operators:
Automatic Type Conversion
• Binary operators +, -, *, /, % convert both
operands to Number
– Exception: If one of operands of + is String
then the other is converted to String
• Relational operators <, >, <=, >= convert
both operands to Number
– Exception: If both operands are String, no
conversion is performed and lexicographic
string comparison is performed
• lexical order (dictionary order): a1a2 ... ak appears before in b1b2
... bk if and only if the first ai, which is different from bi, comes
before bi in the alphabet.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Operators:
Automatic Type Conversion
• The equality (==) and inequality (!=) operators
convert both operands to Number
– Exception: If both operands are String, no conversion is
performed (lexicographic comparison)
– Exception: values of Undefined and Null are equal(!)
– Exception: instance of Date built-in object is converted to
String
– Exception: host object conversion is implementation
dependent
• i.e., host object conversion method is not clearly defined in
standard and is regulated by language developers.
– Exception: two Objects are equal only if they are
references to the same object
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Operators:
Automatic Type Conversion
• The strict equality (===) and strict inequality
(!== ) operators are strict:
– Two operands are === only if they are of the
same type and have the same value
– “Same value” for objects means that the
operands are references to the same object
• Unary +, - convert their operand to Number

• Logical &&, ||, ! convert their operands to

Boolean (normally)
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Operators
• Bit operators
– Same set as Java:
• Bitwise NOT, AND, OR, XOR (~, &, |, ^)
• Shift operators (<<, >>, >>>)
– Semantics:
• Operands are converted to 32-bit twos-complement
integers: convert to Number if needed, truncate to
integer, retain only low-order 32 bits.
• Operators then applied as if in 32-bit registers
• Result of >>> treated as unsigned, others as signed
(results of other operators are treated as signed)
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Operators
• Example(Result of >>> treated as unsigned, others as signed):
-2

1: 0 0 … 01
~1: 1 1 … 10 (=-2 if it is treated a singed number)
1) Note that ~1 is negative since it starts with 1.
2) Invert the bits: 1 1 … 1 1 0 00… 001
3) Add 1: 0 0 … 0 0 1 + 1  0 0 …. 0 1 0 = 2(10)
4) Final result: -2 since ~1 is a negative

4294967294 (232 – 2)

1: 0 0 … 01
~1: 1 1 … 10 (= 2^32-2 if it is treated an unsigned number)
1) Note that ~1 is positive since it is treated as unsigned
2) Simply convert positive number to decimal:
1 1 … 10(2) =1 1 … 11(10) -1(10) = 2^32-2(10)
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Numbers
• Syntactic representations of Number
– Integer (42) and decimal (42.0)
– Scientific notation (-12.4e12, i.e., -12.4*10^12)
– Hexadecimal (0xfa0)
• Internal representation
– Approximately 16 digits of precision
– Approximate range of magnitudes
• Smallest: 10-323
• Largest: 10308 (Infinity if literal is larger)

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Strings
• String literals can be single- or double-
quoted
• Like Java, escape codes can be
embedded in string literals
– \n: represent newline
– \” (\’): represent a double (single) quote
– \\: represent a backslash
– \uxxxx: arbitrary Unicode 16-bit code point
(x’s are four hex digits)
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function declaration syntax

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function declaration syntax

Declaration
always begins
with keyword
function,
no return type

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function declaration syntax
Identifier representing
function’s name

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function declaration syntax

Formal parameter list

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function declaration syntax

One or more statements representing

function body

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function call syntax

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function call syntax

Function call is an expression, can

be used on right-hand side of assignments,
as expression statement, etc.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function call syntax

Function name

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function call syntax

Argument list

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function call semantics:

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function call semantics:

Argument value(s)
associated with corresponding
formal parameters

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function call semantics:

Expression(s) in body
evaluated as if formal
parameters are variables
initialized by argument
values

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function call semantics:

If final statement executed

is return-value, then value of
its expression becomes value
of the function call

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function call semantics:

Value of function call is then used

in larger expression containing
function call.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Function call semantics details:
– Arguments:
• May be expressions:
• Object’s effectively passed by reference (more
later)
– Formal parameters:
• May be assigned values, argument is not affected
– Return value:
• If last statement executed is not return-value, then
returned value is of type Undefined

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Number mismatch between argument list
and formal parameter list:
– More arguments: excess ignored
– Fewer arguments: remaining parameters are
Undefined

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Local vs. global variables
Global variable: declared outside any function

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Local vs. global variables

Local
variable
declared
within
a function

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Local vs. global variables

Local
declaration
shadows
corresponding
global
declaration
Output is 6

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Local vs. global variables

In browsers,
global
variables Output is 7
(and functions)
are stored as properties
of the window built-in object.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Recursive functions
– Recursion (function calling itself, either
directly or indirectly) is supported
– C++ static variables are not supported
– Order of declaration of mutually recursive
functions is unimportant (no need for
prototypes as in C++)

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Functions
• Explicit type conversion supplied by built-
in functions
– Boolean(), String(), Number()
– Each takes a single argument, returns value
representing argument converted according to
type-conversion rules given earlier

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Introduction
• An object is a set of properties
• A property consists of a unique (within an
object) name with an associated value
• The type of a property depends on the
type of its value and can vary dynamically
prop is Boolean
prop is now String
prop is now Number

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Introduction
• There are no classes in JavaScript but
some classlike features:
– Define object constructors to create objects.
– Provide a form of inheritance.
• Instead, properties of an object can be
created and deleted dynamically
Create an object o1
Create property testing
Delete testing property
In contrast, in Java and C++, we
•first define class (its variables and method).
•then create objects of the class.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Creation
• Objects are created using new expression
Constructor and argument list

• A constructor is a function
– A new expression causes a new empty object to be
created, and then calls the specified constructor
along with the argument values.
– Constructor performs initialization on object
• Can add properties and methods to object
• Can add object to an inheritance hierarchy (from which it
can inherit additional properties and method)
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Creation
• The Object() built-in constructor
– It does not add any properties or methods
directly to the created object, but
– the created object is modified so that it
inherits some generic methods such as
toString() and valueOf() methods (used for
conversions to String and Number, resp.)

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Property Creation
• Assignment to a non-existent (even if
inherited) property name creates the
property:
• Object initializer notation can be used to
create an object (using Object()
constructor) and one or more properties in
a single statement:

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Enumerating Properties
• Special form of for statement used to
iterate through all properties of an object:

Produces three
alert boxes;
order of names
is implementation-dependent.

Please run Enumerating.html in chapter 4 and read Enumerating.js

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Accessing Property Values
• The JavaScript object dot notation is
actually shorthand for a more general
associative array notation in which Strings
are array indices:

• Expressions can supply property names:

Converted to String
if necessary

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Values
• Value of Object is reference to object:
– What is stored in a JavaScript Object variable
is a reference (pointer) to the object, not the
object itself, as in Java.
Java
data type: Object ( 对象类型 )
data : object ( 对象 )

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Values
• Value of Object is reference to object:

o2 is another
name for o1 Copy the reference from o1 to
o2, rather than making a copy of
the entire object.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Values
• Value of Object is reference to object:

o1 is
changed

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Values
• Value of Object is reference to object:

Output is Hello World!

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Values
• Object argument values are references
– Pass by reference, not by value.

window.alert (“o1 is ” + o1.data + “\n” + “o2 is ” + o2.data )

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Values
• Object argument values are references

param1=o1; Pass by reference, not by value param2=o2;

var o1 = new Object(); var o2 = new Object();

o1.data = “original”; o2.data = “original”;

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Values
• Object argument values are references

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Values
• Object argument values are references

Copy the reference from

window.alert (“param1 is ” + param1 to param2,

param1.data + “\n” +
“param2 is ” + param2.data )

return;
}

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Values
• Object argument values are references

Please run TestJs.html in chapter 4 and input ObjArg.js

*I will test the program.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Methods
• A method is a function that has been assig-
ned as the value of a property of an object.
object
• When JavaScript process a function
declaration, such as function leaf () {…}
– create a function object,
– create a variable (property of Window), which has
the same name as the function,
– assign to the variable a reference (to the function
object).

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Object Methods

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Methods
Creates global variable named leaf, which refers to the leaf() function object

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Methods

Creates isLeaf() method

Here, leaf is a variable referring to the leaf() function object.

Assign to the isLeaf method the leaf variable,
•Assign to the isLeaf method a reference to the leaf() function object.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Object Methods
Refers to object that “owns” method when
leaf() is called as a method

value

null null

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Object Methods
3
7

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Object Methods
Creates two objects, each with
method isLeaf()

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Methods

Calls to isLeaf() method

Please run TestJs.html in chapter 4 and input NodeWithMethod.js.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Methods
• Original version: leaf() can be called as
function, but we only want a method

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Methods
• Alternative:

Replace leaf by a function expression.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Methods
• Alternative

Function expression syntactically is the same as funct-

ion declaration but does not produce a global variable.

Consequently, other objects cannot call leaf() directly

by calling the variable leaf.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Constructors
• User-defined constructor is just a function
called using new expression:

Constructor
• Object created using a constructor is
known as an instance of the constructor

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Constructors
Two methods to define a constructor.
•The first method acts as a kind of constructor for objects.
•The second method use JavaScript’s constructor mechanism.

Original
function

Function
intended
to be used
as constructor

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Constructors

Object is
constructed
automatically
by new
expression

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Constructors

Object
referenced
using this
keyword

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Constructors

No need
to return
initialized
object

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Object Constructors
• Object created using a constructor is
known as an instance of the constructor

Instances of BTNode
• instanceof operator can be used to test
this relationship:

Evaluates to true

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Arrays
• The Array built-in object can be used to
construct objects with special properties
and that inherit various methods

ary1
length (0) Properties

toString() Inherited
sort() methods
shift()
…

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Arrays
• The Array built-in object can be used to
construct objects with special properties
and that inherit various methods

ary2
length (3) Accessing array elements:
“0” (4) ary2[1]
Elements
“1” (true) ary2[“1”]
of array
“2” (“OK”) ary2.1
Must follow identifier
toString() syntax rules
…

The reason is: ary2.1 will evaluate to the value of the property with the name 1.
However, in dot notation, the property name must not begin with a numeric character.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Arrays
• The Array constructor is indirectly called
if an array initializer is used

• Array initializiers can be used to create

multidimensional arrays
ttt[1][2]

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Arrays
• Changing the number of elements:

Creates a new element dynamically,

increases value of length
ary2
length (4)
“0” (4)
“1” (true)
“2” (“OK”)
“3” (-12.6)

toString()
…

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Arrays
• Changing the number of elements:

Decreasing length can delete elements

ary2
length (2)
“0” (4)
“1” (true)

toString()
…

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Arrays
• Value of length is not necessarily the
same as the actual number of elements
var ary4 = new Array(200); Calling constructor with single argument
sets length, does not create elements
ary4
length (200)

toString()
sort()
shift()
…

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Arrays

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Arrays

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Arrays

Argument to sort
is a function

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Sort() function in JavaScript Array
• To sort something other than strings into
alphabetical order, write a function that performs
the comparison and send it to the sort method

– The comparison function must return a negative

number, zero, or a positive number to indicate whether
the order is ok, equal, or not

– Example 1: to sort a set of numbers in ascending order.

var num_list = [8, 3, 9, 1, 4, 7];
function num_order(a, b) {return a - b;} //the smaller is on first
num_list.sort(num_order);

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Sort() function in JavaScript Array
• Example 2: to sort a set of words in alphabetical
order and alphabetical reverse order.
var str_list = [ab, abd, xaix, zyy, eez, ccd, wzx];
function dec_order(a, b) {
if (a//the
> b)larger is on first
return -1;
else if (a < b)
return 1;
else return 0;
}
str_list.sort(); //sorting in alphabetical order
str_list.sort (dec_order); //sorting in alphabetical reverse order

str_list.Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0

JavaScript Arrays
Q: how about sorting in descending order?
Remember to call sort() at an appropriate position.
*I will test this problem.

Return negative if first < second, indicating that

the smaller is on first, the larger is on second

Return a string (separated by ,) representing the array

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Arrays

Add element with value 2.5 at

index 2, shift existing elements

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Arrays

Remove 3 elements starting

at index 5

Please run TestJs.html in chapter 4 and input ArrayMethods.js.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Arrays

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Arrays

push() adds an element to the end of the

array

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Arrays

pop() deletes and returns last

element of the array

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Arrays

Use shift() instead to implement queue

Please run TestJs.html in chapter 4 and input stack.js.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Built-in Objects
• The global object
– Named window in browsers
– Has properties representing all global
variables
– Other built-in objects are also properties of
the global object
• Ex: initial value of window.Array is Array object
– Has some other useful properties
• Ex: window.Infinity represents Number value

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Built-in Objects
• The global object and variable resolution:
i = 42; What does i refer to?
1. Search for local variable or formal parameter
named i
2. If none found, see if global object (window)
has property named i

• This is why we can refer to built-in objects

(Object, Array, etc.) without prefixing
with window.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Built-in Objects
• If String(), Boolean(), and Number() built-in
functions can be called as constructors,
– it converts its argument value to the appropriate type
– It also wraps the converted value in an object, “wrapped” object.
• For example, wrappedNumber is an instance of Number.

• Instances inherit valueOf() method that

returns wrapped value of specified type:

Output is “number”

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Built-in Objects
• Other methods inherited by Number
instances:
Outputs
Return a string representation of a number rounded to two decimal places
5.63
Return a string representation of a number in exponential notation
5.63e+0
Return a string representation of a number in binary
101.101
Base 2

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Built-in Objects
• Properties provided by Number built-in
object:
– Number.MIN_VALUE: smallest (absolute
value) possible JavaScript Number value
– Number.MAX_VALUE: largest possible
JavaScript Number value

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Built-in Objects

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Built-in Objects
• Instances of String have a length property (number of
characters)

• JavaScript’s automatic type conversion allows you to

apply String and Number inherited methods directly to
primitive values of type String and Number, respectively:
– In this example, “a String values” is converted to a String object,
automatically.

Index= 2 Output is “Str”

slice() return substring from index 2 to index 4, excluding index 5.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Built-in Objects
• The Date() built-in constructor can be used to
create Date instances that represent the current
date and time
var now = new Date();

• Often used to display local date and/or time in

Web pages
window.alert(“Current date and time: “
+ now.toLocaleString());
• Other methods: toLocaleDateString() ,
toLocaleTimeString(), etc.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Built-in Objects
• valueOf() method inherited by Date
instances returns integer representing
number of milliseconds since midnight
1/1/1970
• Automatic type conversion allows Date
instances to be treated as Numbers:

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Built-in Objects
• Math object has methods for performing
standard mathematical calculations:

• Also has properties with approximate

values for standard mathematical
quantities, e.g., e ( Math.E ) and π
(Math.PI)

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Built-in Objects

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
• A regular expression is a particular
representation of a set of strings
– Ex: JavaScript regular expression
representing the set of syntactically-valid US
telephone area codes (three-digit numbers):

• \d represents the set {“0”, “1”, …, “9”}

• Concatenated regular expressions represent the
“concatenation” (Cartesian product) of their sets

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Regular Expressions
• Using regular expressions in JavaScript

In this example, we use this regular expression to test whether or not a

String value (contained in areaCode) consists of exactly three digits.
Generate an instance of the RegExp object.
Call the test method of the instance

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
• Using regular expressions in JavaScript

Variable containing string to be tested

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
• Using regular expressions in JavaScript

Method inherited by RegExp instances:

returns true if the argument, areaCode, contains a
substring in the regular expression

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
• Using regular expressions in JavaScript
Built-in constructor

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
• Using regular expressions in JavaScript
Regular expression as String (must escape \)

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Regular Expressions
• Using regular expressions in JavaScript
The caret(^), represents beginning of string The dollar sign ($), represents end of string

This expression matches only strings with

exactly three digits (no other characters,
even white space)

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
– Example: a regular expression without $

Represents all strings that begin

with three digits

• Alternate syntax:

Regular expression literal.

Do not escape \.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Regular Expressions
• Simplest regular expression is any character
that is not a special character:

– Ex: _ is a regular expression representing {“_”},

– {“_”}, represent the set of all string that
contain the underscore character, _. _
• Backslash-escape d special character is also
a regular expression
– Ex: \$ represents {“$”}

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
• Special character . (dot) represents any
character except a line terminator
• Several escape codes are regular
expressions representing sets of chars:

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
• Three types of operations can be used to
combine simple regular expressions into
more complex expressions:
– Concatenation
– Union (|)
– Kleene star (*)
• XML DTD content specification syntax
based in part on regular expressions

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
• Concatenation
– Example:
• String consisting entirely of four characters:
• Digit followed by
• A . followed by
• A single space followed by
• Any “word” character
– Quantifier shorthand syntax for concatenation:

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
• Union (represented by the pipe symbol, |)
– Ex:
• Set of single-character strings that are either a digit
or a space character

• Character class: shorthand for union of

one or more ranges of characters
– Ex: set of lower case letters
– Ex: the \w escape code class

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Regular Expressions
• Unions of concatenations

– Note that concatenation has higher precedence

than union
• Optional regular expression
– The question mark ? represents {0,1}

– (+|-){0,1} represents the set of strings that begin with either (+|-)
{0} (i.e., the empty string) or (+|-){1} (i.e a plus or minus sign}.
– In other words, (+|-){0,1} represents that (+|-) is optional.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
JavaScript Regular Expressions
• Kleene star (allows us to represent infinitely large sets)
– Ex: Strings of any number of digits
(including none)
• \d* represents “”, “1”, “238”, “3455567”, ……

– Ex:
• Strings consisting of only “word” characters
• String must contain both a digit and a letter (in either
order)

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0