web technologies- html

Ohud92

IT230_Modified_Chapter4_Week5.ppt

Home >Computer Science homework help >web technologies- html

Chapter 4
Client-Side Programming:
the JavaScript Language

WEB TECHNOLOGIES

A COMPUTER SCIENCE PERSPECTIVE
JEFFREY C. JACKSON

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

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

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

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

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

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

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

Variables and Data Types

typeof operator returns string related to data type
Syntax: typeof expression
Example:

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

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

Variables and Data Types

A variable will automatically be created if a value is assigned to an undeclared identifier:

Recommendation: declare all variables
Facilitates maintenance
Avoids certain exceptions

var is not

required

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

JavaScript Statements

var syntax:

Java-like keyword statements:

Comma-separated declaration list with

optional initializers

JavaScript Statements

JavaScript

keyword

statements

are very similar

to Java with

small exceptions

JavaScript Statements

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)

JavaScript Operators

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

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

JavaScript Functions

Function declaration syntax

Declaration

always begins

with keyword

function,

no return type

JavaScript Functions

Function declaration syntax

Identifier representing

function’s 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

Function call is an expression, can

be used on right-hand side of assignments,

as expression statement, etc.

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

JavaScript Functions

Number mismatch between argument list and formal parameter list:
More arguments: excess ignored
Fewer arguments: remaining parameters are Undefined

JavaScript Functions

Local vs. global variables

Global variable: declared outside any function

JavaScript Functions

Local vs. global variables

Local

variable

declared

within

a function

JavaScript Functions

Local vs. global variables

Local

declaration

shadows

corresponding

global

declaration

Output is 6

JavaScript Functions

Local vs. global variables

Output is 7

In browsers,

global

variables

(and functions)

are stored as properties

of the window built-in object.

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

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

Object Creation

Objects are created using new expression

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

Constructor and argument list

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

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:

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.

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 Values

Value of Object is reference to object:

o2 is another

name for o1

Object Values

Value of Object is reference to object:

o1 is

changed

Object Values

Value of Object is reference to object:

Output is Hello World!

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

Object Methods

Creates global variable named leaf with function value

Object Methods

Creates isLeaf() method that is

defined by leaf() function

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 built-in object can be used to construct objects with special properties and that inherit various methods

ary2

length (3)

“0” (4)

“1” (true)

“2” (“OK”)

toString()

…

Elements

of array

Accessing array elements:

ary2[1]
ary2[“1”]

ary2.1

Must follow identifier

syntax rules

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

Changing the number of elements:

ary2

length (4)

“0” (4)

“1” (true)

“2” (“OK”)

“3” (-12.6)

toString()

…

Creates a new element dynamically,

increases value of length

JavaScript Arrays

Changing the number of elements:

ary2

length (2)

“0” (4)

“1” (true)

toString()

…

Decreasing length can delete elements

JavaScript Arrays

Value of length is not necessarily the same as the actual number of elements

var ary4 = new Array(200);

ary4

length (200)

toString()

sort()

shift()

…

Calling constructor with single argument

sets length, does not create elements

JavaScript Arrays

Add element with value 2.5 at

index 2, shift existing elements

JavaScript Arrays

Remove 3 elements starting

at index 5

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

Built-in Objects

The global object and variable resolution:

This is why we can refer to built-in objects (Object, Array, etc.) without prefixing with window.

i = 42;

What does i refer to?

Search for local variable or formal parameter
named i
If none found, see if global object (window)
has property named i

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”

Built-in Objects

The Date() built-in constructor can be used to create Date instances that represent the current date and time

Often used to display local date and/or time in Web pages

Other methods: toLocaleDateString() , toLocaleTimeString(), etc.

var now = new Date();

window.alert(“Current date and time: “
+ now.toLocaleString());

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)