JavaScript History and Versions
JavaScript was introduced as part of the
Netscape 2.0 browser
Microsoft soon released its own version called
JScript
European Computer Manufacturers
Association (ECMA) developed a standard
language known as ECMAScript
ECMAScript Edition 3 is widely supported and
is what we will call JavaScript
JavaScript Introduction
File JSHelloWorld.js:
HTML document executing this code:
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:
JavaScript Introduction
Prompt window example:
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
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)
JavaScript Properties
Each JavaScript implementation consists of
two software components:
Scripting engine: includes JavaScript interpreter
plus required ECMAScript functionality (core
library)
Hosting environment: provides capabilities specific
to environment
Example: Mozilla and IE6 browsers provide alert and
prompt methods
JavaScript Properties
All hosting environment capabilities and many
scripting engine capabilities are provided
through objects
Types of JavaScript objects
Native objects: provided by scripting engine
If a native object is automatically constructed before
program execution, then it is known as a built-in object
(e.g. window)
Host objects: provided by host environment
alert and prompt are host objects
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
Developing JavaScript Software
Mozilla JavaScript console (Tools | Web
Development | JavaScript Console):
Developing JavaScript Software
IE6 error window:
Error indicator;
double-clicking icon
opens error window
Click to see
error messages
Basic JavaScript Syntax
Basic JavaScript Syntax
Notice that there is no main() function/method
Basic JavaScript Syntax
Comments like Java/C++ (/* */ also allowed)
Basic JavaScript Syntax
Variable declarations:
- Not required
- Data type not specified
Basic JavaScript Syntax
Semi-colons are usually
not required, but always
allowed at statement end
Basic JavaScript Syntax
Arithmetic operators same as Java/C++
Basic JavaScript Syntax
String concatenation operator
as well as addition
Basic JavaScript Syntax
Arguments can be any expressions
Argument lists are comma-separated
Basic JavaScript Syntax
Object dot notation for method calls as in Java/C++
Basic JavaScript Syntax
Basic JavaScript Syntax
Many control constructs and use of
{ } identical to Java/C++
Basic JavaScript Syntax
Most relational operators syntactically
same as Java/C++
Basic JavaScript Syntax
Automatic type conversion:
guess is String,
thinkingOf is Number
Running Examples
Browse to TestJs.html in examples
download package
Enter name of .js file (e.g., HighLow.js) in
prompt box:
JavaScript Operators
JavaScript Functions
Function declaration syntax
JavaScript Functions
Function declaration syntax
Declaration
always begins
with keyword
function,
no return type
JavaScript Functions
Function declaration syntax
Identifier representing
functions name
JavaScript Functions
Function declaration syntax
Formal parameter list
JavaScript Functions
Function declaration syntax
One or more statements representing
function body
JavaScript Functions
Function call syntax
JavaScript Functions
Function call syntax
Function call is an expression, therefore can
be used on right-hand side of assignments,
as expression statement
JavaScript Functions
Function call syntax
Function name
JavaScript Functions
Function call syntax
Argument list
JavaScript Functions
Function call semantics:
JavaScript Functions
Function call semantics:
Argument value(s)
associated with corresponding
formal parameters
JavaScript Functions
Function call semantics:
Expression(s) in body
evaluated as if formal
parameters are variables
initialized by argument
values
JavaScript Functions
Function call semantics:
If final statement executed
is a return-value statement,
then value of its expression
becomes value of the function
call
JavaScript Functions
Function call semantics:
Value of function call is then used
in larger expression containing
function call.
JavaScript Functions
Local vs. global variables
Local
variable
declared
within
a function
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
If one function calls another function, it does not matter
which function is declared first in the program
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
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 and one or more properties in a
single statement:
Enumerating Properties
Special for-in statement used to iterate
through all properties of an object:
Produces three
alert boxes
each with one
of the names kim, sam, or lynn;
However, the order in which they appear
is implementation-dependent.
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
Object Methods
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.
Object Methods
Alternative
JavaScript Arrays
The Array built-in object can be used to
construct objects with special properties and
that inherit various methods
ary1
length (0)
toString()
sort()
shift()
Properties
Inherited
methods
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]
JavaScript Arrays
Built-in Objects
Built-in Objects
