WEB TECHNOLOGIES

A COMPUTER SCIENCE PERSPECTIVE

JEFFREY C. JACKSON

Run on the
client’s machine
Chapter 4 not on the server

Client-Side Programming:
the JavaScript Language

Jackson, Web Technologies: A Computer Science

Perspective, © 2007 Prentice-Hall, Inc. All rights
reserved. 0-13-185603-0
 JavaScript Introduction
If you’ve ever attempted to register for a website, entered a
username, and immediately received feedback that the
username you’ve entered is already taken by someone else.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Introduction
Suggest the complete term a user might be entering in a
search box as he types. You can see this in action on
Google.com

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 standard
I/O 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

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

• HTML document executing this code:

- External Script
<script> element used
to load and execute
JavaScript code
 JavaScript Introduction
• 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: Adding
JS to a Page
• Adding JS to your page:
1. Embedded Script:

2. External Script:

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 JavaScript Introduction
• Prompt window example:
1
2

Jackson, Web Technologies: A Computer Science

Perspective, © 2007 Prentice-Hall, Inc. All rights
reserved. 0-13-185603-0
 JavaScript Properties
• 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
• All data in JavaScript is an object or a property of an
object
• Types of JavaScript objects
1. Native: provided by scripting engine
• If automatically constructed before program execution, known
as a built-in object
2. Host: provided by host environment
• alert and prompt are host objects

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
 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)

Comments
// This is a comment. It is similar to comments in C+
+ /* * This is a multiline comment in JavaScript * It is
very similar to comments in C Programming */

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
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 (value of newly created variable)
• 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
• 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

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

Remember: JavaScript is case-sensitive,

and so are those variable names.

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: 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
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 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:
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

Jackson, Web Technologies: A Computer Science

Perspective, © 2007 Prentice-Hall, Inc. All rights
reserved. 0-13-185603-0
 JavaScript Operators:
Automatic Type Conversion
• Operators ==, != convert both operands to Number
• Exception: If both operands are String, no conversion is
performed (lex. comparison)
• Exception: values of Undefined and Null are equal(!)
• Exception: instance of Date built-in “class” is converted
to String (and host object conversion is implementation
dependent)
• 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 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
Identifier representing
function’s name
Declaration always Formal parameter list
begins with keyword
function, no return
type 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

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 semantics details:
1. Arguments:
• May be expressions:
• Object’s effectively passed by reference (more later)
2. Formal parameters:
• May be assigned values, argument is not affected
• 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
• 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
• Local vs. global variables
Global variable: declared outside any function

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
• Local vs. global variables

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
• There are no classes in JavaScript
• Instead, properties can be created and deleted
dynamically
Create an object o1
Create property testing
Delete testing property

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
• When called via new expression, a new empty Object
is created and passed to the 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

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
• Does not add any properties or methods directly to the
object
• Adds object to hierarchy that defines default 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.

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:

o1 o2
o2 is another
name for o1
Hello

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 o2

o1 is
changed Hello World!

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 o2

Hello World!

Output is Hello World!

Jackson, Web Technologies: A Computer Science

Perspective, © 2007 Prentice-Hall, Inc. All rights
reserved. 0-13-185603-0
 Object Methods
• JavaScript functions are stored as values of type
Object
• A function declaration creates a function value and
stores it in a variable (property of window) having
the same name as the function
• A method is an object property for which the value
is a function

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 with function value

Jackson, Web Technologies: A Computer Science

Perspective, © 2007 Prentice-Hall, Inc. All rights
reserved. 0-13-185603-0
Object Methods

Creates isLeaf() method that is

defined by leaf() function

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
Array Constructor
No arguments

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
…
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

toString()

Jackson, Web Technologies: A Computer Science

Perspective, © 2007 Prentice-Hall, Inc. All rights
reserved. 0-13-185603-0
JavaScript Arrays

splice()

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

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
• String(), Boolean(), and Number() built-
in functions can be called as constructors, created
“wrapped” Objects:

• 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

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
• 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