10.JavaScript Objects

8/4/2019 10.JavaScript Objects

1/74

JavaScript Objects

Arrays

Objects

Dynamic HTML


2/74

Objectives Arrays

Introduction

Passing Array to Function

Multiple subscripts

Objects Introduction

Math Object

String Object

Date Object

Boolean and Number Object

Creating Objects

Dynamic HTML Introduction

Properties

Object Referencing

Collection all and children

Dynamic styles, positioning, navigator Object

DHTML Object Model

Summary


3/74

ArraysIntroduction

Array is a grouping of objects that can be accessed

through subscripts Arrays are useful for storing data of similar types Unlike in some languages, values in JavaScript arrays do

not all have to be of the same data type

In JavaScript, the first element of an array is considered tobe at position zero

Syntax

Arrays are declared using the new keyword

var variables_name = new Array(); The [] literal is used to declare a new Array object

var variables_name = [];

Can be declared with initial values var var_name = new Array (values_list_separated_comma);

var var_name = [values_list_separated_comma]


4/74

ArraysIntroductionExample


5/74



6/74



7/74

rraysIntroduction

Whereas regular (or enumerated) arrays are indexed

numerically, associative arrays are indexed using

names as keys.

The advantage of this is that the keys can be meaningful,

which can make it easier to reference an element in anarray

Some useful array properties and methods are

usedProperty Descriptionslength Holds the number of elements in an array


8/74

rraysIntroduction

Props/Methods Descriptions

join(delimiter)Returns a delimited list of the items indexed with integers in the

array. The default delimiter is a comma

pop() Removes the last item in an array and returns its value

shift() Removes the first item in an array and returns its value

slice(start, end)

Returns a subarray from start to end. If end is left out, it includes

the remainder of the array.

splice(start, count)Removes count items from start in the array and returns the

resulting array

sort ([arguments])

If no arguments, JavaScript uses string comparisons to determine

sorting order. Otherwise,

-Takes the name of a function called the comparator function

-Comparator function takes two arguments and returns

- A negative value if the 1st argument is less than the 2nd

- Zero if the arguments are equal

- A positive value if the 1st argument is greater than the 2nd


9/74


A


10/74


A


11/74

ArraysPassing Arrays to Functions

To pass an array to a function

Specify the name of the array without brackets as a parameter Do not need to separately pass the size of the array

Individual numeric and boolean array elements are

Passed exactly as simple numeric and boolean variables: call-by-

value

Simple single pieces of data are called scalars or scalar qualities

Are passed using subscripted name of the array element

For function to receive Array through a function call Must specify parameter that will be used to refer to the array in the

body of the function

A


12/74

ArraysPassing Arrays to FunctionsExample

A


13/74


A


14/74


A


15/74

ArraysMultiple subscripts

JavaScript support mutli-dimensional array

Double-subscripted array (or two-dimensional arrays) Require two subscripts to identify a particular element

First subscript identifies elements row

Second subscript identifies elements column

m-by-n array An array with m rows and n columns

Initialization Declared like a single-scripted array

Ex:

var b = [ [ 1, 2 ], [ 3, 4 , 5] ];

Compiler determines number ofelements in row/column

By counting number of initializer values in sub-initializer list for thatrow/column

Can have a different number of columns in each row

for and for/in loops used to traverse the arrays Manipulate every element of the array

A


16/74

ArraysMultiple subscriptsExample

Obj t


17/74

ObjectsIntroduction

Objects are the fundamental unit of code encapsulation and

reuse in any OO language. It is incredibly easy to create objects in JavaScript

JavaScript is an object-based programming language

JavaScript is used to manipulate or get information about

objects in the HTML DOM. Objects in an HTML page have

Methods (actions, such as opening a new window or submitting aform)

And, properties (attributes or qualities, such as color and size).

JavaScript has some predefined, built-in objects that

Do not fit into the HTML DOM

Are not direct descendants of the window object.

Obj t


18/74

ObjectsMath

Is a built-in static object.

Their properties and methods are accessed directly and areused for performing complex math operations

Some properties

Constant Description Value

Math.E Eulers constant. Approximately 2.718.

Math.LN2 Natural logarithm of 2. Approximately 0.693.

Math.LN10 Natural logarithm of 10. Approximately 2.302.

Math.LOG2E Base 2 logarithm of

Eulers constant.

Approximately 1.442.

Math.LOG10E Base 10 logarithm of

Eulers constant.

Approximately 0.434.

Math.PI PI - ratio of circlescircumference to its

diameter.

Approximately

3.141592653589793.

Math.SQRT1_2 Square root of 0.5. Approximately 0.707.

Math.SQRT2 Square root of 2.0. Approximately 1.414.

Obj


19/74

ObjectsMathMethods

Methods Descriptions

abs (x) Absolute value of x

ceil (x) Rounds x to the next highest integer

cos (x) Trigonometric cosine of x (x is radians)

floor (x) Rounds x to the next lowest integer

log (x) Natural logarithm of x (base e)

max (x, y) Larger value of x and y

min (x, y) Smaller value of x and y

pow (x, y) x raised to power y

round (x) Rounds x to the closest integer

sin (x) Trigonometric sine of x (x is radians)

sqrt (x) square root of x

tan (x) Trigonometric tangent of x (x is radians)

random () Random number between 0 and 1.

Obj t


20/74

ObjectsString

In JavaScript, there are two types of string data types: primitivestrings and String objects.

String objects have many methods for manipulating and parsingstrings of text. Because these methods are available to primitive strings as well, in practice,

there is no need to differentiate between the two types of strings

Characters are fundamental building blocks of JavaScript programs

A string is series ofCharacters treated as a single unit

It may include letters, digit, and various special characters,

String Object is JavaScripts string and character processing capabilities

Encapsulates the attributes and behaviors of a string of characters

String literals or string constant are written as sequence ofcharacters in single or double quotation marks

Strings may be compared with Relational operators

ects


21/74

ectsStringMethods


charAt(position) Returns the character at the specified position

charCodeAt(position)Returns the Unicode character code of the character at the

specified position

concat (string)Concatenates its argument to the end of the string. The

original strings are not modified

fromCharCode

(characterCodes)

Returns the text representation of the specifies comma-

delimited character codes. Used with String rather than a

specific String object

indexOf(substring,

startPosition)

Searches from startPosition for substring. Returns the

position at which the substring is found. If substring is notfound, returns -1

lastIndexOf(substring,

endPosition)

Searches from the end of the string for substring until

endPosition is reached. Returns the position at which the

substring is found. If substring is not found, returns -1.

ects


22/74

ectsStringMethods


substring(startPosition

, endPosition)

Returns the substring beginning at startPosition and endingwith the character before endPosition. endPosition is

optional. If it is excluded, the substring continues to the end

of the string.

substr(startPosition,length)

Returns the substring of Length characters beginning at

startPosition. length is optional. If it is excluded, thesubstring continues to the end of the string

slice(startPosition,

endPosition)Same as substring(startPosition, endPosition).

slice(startPosition,positionFromEnd)

positionFromEnd is a negative integer. Returns the thesubstring beginning at startPosition and ending

positionFromEnd characters from the end of the string.

split(delimiter)Returns an array by splitting a string on the specified

delimiter.

toLowerCase() Returns the string in all lowercase letters.

ects


23/74

ectsStringMethods


toUpperCase() Returns the string in all uppercase letters

toString() Returns the same string as the source string

valueOf() Returns the same string as the source string.

Objects


24/74

ObjectsStringHTML Markup Methods

When a markup method is applied to a string, the

string is automatically wrapped in the

appropriate HTML tag

These methods are particularly useful for

generating HTML dynamically during scripting

processing

Objects


25/74

ObjectsStringHTML Markup Methods

Method Description

anchor(name )

Wraps source string in anchor elementwithname as anchor name.

big() Wraps source string in aelement.

blink() Wraps source string in aelement.bold() Wraps source string in aelement.

fixed() Wraps source string in aelement.

fontcolor( color ) Wraps source string in aelement with

coloras the font color.

fontsize( size ) Wraps source string in aelement with

size as HTML font size.

italics() Wraps source string in anelement.

link( url )Wraps source string in anwith

urlas thehyperlink location.

small() Wraps source string in aelement.

strike() Wraps source string in a

element.

sub() Wraps source string in aelement.

sup() Wraps source string in aelement.

Objects


26/74

ObjectsStringHTML Markup MethodsExample

Objects


27/74

ObjectsStringHTML Markup MethodsExample

Objects


28/74

ObjectsDate

Has methods for manipulating dates and times.

JavaScript stores dates as the number of milliseconds sinceJanuary 1, 1970

Date and time processing can be performed based on

Local time zone

Universal Coordinated Time (UTC) /Greenwich Mean Time (GMT)

Most methods in Date object have local time zone and UTC versions

To create a Date object containing the current date and time, theDate() constructor takes no arguments

When passing the date as a string to the Date() constructor, the timeportion is optional.

If it is not included, it defaults to 00:00:00.

Other date formats are acceptable (ex: "10/21/2004" and "10-04-2004").

When passing date parts to the Date() constructor, dd, hh, mm, ss, and ms are all optional. The default of each is 0.

Months are numbered from 0 (January) to 11 (December)

Objects


29/74

ObjectsDate

Two other methods can be called without creating new

Date object Both methods return number of milliseconds between midnight,

January 1, 1970 and date specified by argument

Either method can be converted to a Date object

var theDate = new Date(numberOfMilliseconds);

numberOfMilliseconds equals the result of Date.UTC or Date.Parse

Date.parse(argument);

argument: short date or long date

Date.UTC(argument); argument: same for as date construct (Y, M, D, H, M, S, M)

Other methods should be reference at Fig 18.8 (textbook e-

business and e-commerce How to program, Deitel, Deitel

& Nieto)

b ects


30/74

b ectsDateExample

Objects


31/74

ObjectsDateExample

b ects


32/74

b ectsDateExample

Objects


33/74

ObjectsBoolean and Number

Provided Boolean and Number object as object wrappers

These wrappers define methods and properties useful inmanipulating boolean values and numbers

Number object JavaScript automatically creates Number objects to store numeric values

Programmers can create a Number object with

var n = new Number( numericValue );

For other Number object methods, see figure 18.11 (textbook e-business and e-commerceHow to program, Deitel, Deitel & Nieto)

Boolean object When boolean value required in a program, automatically created by JavaScript

to store the value using Boolean object

Programmers can create Boolean objects explicitly

var b = new Boolean( booleanValue );

If boolean value equals false, 0, null, Number.NaN or empty string ( )

Boolean object contains false

Otherwise, Boolean Object contains true

Objects


34/74

ObjectsCreating Objects

There are various ways to create or declare object

Create an empty object and progressively add its properties andmethods

var Obj_name = {};

Obj_name.property_name = value;

Obj_name.method_name = function ([arguments]) {

//statements;

};

Use a literal notation for objects

var Obj_name = {

property_name: value,

function_name: function ([arguments]) {

//statement

};

};

Objects


35/74

ObjectsCreating Objects

There are various ways to create or declare object (cont)

Using factory functions: just encapsulate that logic in a functionfunction function_name (arguments) {

//Create an empty object and progressively add its properties and methods

return object_name;

}

Usage: var var_name = function_name(parameters);

Constructor

In JavaScript, when function is called preceded by the new

operator, the function receives an implicit this argument that is a

brand new object, ready to be assembled with properties and

methods.

Also, ifwe do not return anything explicitly, the new operator

automatically returns this

Objects


36/74

ObjectsCreating ObjectsExample

Objects


37/74


Objects


38/74


Objects


39/74


Objects


40/74


Objects


41/74


Dynam c HTML


42/74

Dynam c HTMLIntroduction

Is not a technology in and of itself, but rather is acombination of three technologies: HTML, CascadingStyle Sheets (CSS), and JavaScript. Involves using JavaScript to change a CSS property of an HTML

element.

Helps Web application developers produce more

responsive data-intensive applications With DHTML, IE enables processing to begin immediately after

a portion of large amount of data arrives

Some manipulations can be done directly on the client withoutinvolving the server and the network

In modern browsers, most CSS properties can be modifieddynamically. Change an individual style of element (using the style property)

Change the class name assigned to the element (using theclassName property).

Dynam c HTML


43/74

Dynam c HTMLProcessing

Accessing and Modifying Styles The style object is a collection of an element's styles that are either

defined within that HTML element's style attribute or directly inJavaScript.

Styles defined in the tag or in an external style sheet arenot part of the style object.

The window object's getComputedStyle() method (in Mozilla) or

the currentStyle property (IE) is used to get the current style of anobject

Syntax varName = window.getComputedStyle(Element, Pseudo-Element)

varName = Element.currentStyle.Property

Element.style.property_name = value

Hiding and Showing Elements Elements can be hidden and shown by changing their visibility or

display values.

The visibility style can be set to visible/hidden and the displayproperty can be set to block, table-row, none, several other values

Dynam c HTML


44/74

Dynam c HTMLProcessingExample

Dynam c HTML


45/74

Dynam c HTMLProcessingExample

Dynam c HTML


46/74

Dynam c HTMLProperties

The innerHTML property can be used to read and set the

HTML content of an element

Dynam c HTML


47/74

Dynam c HTMLPropertiesExample

Dynamic HTML


48/74

Dynamic HTMLProperties

HTML tables can be created and manipulated

dynamically with JavaScript. Each table element contains a rows array and methods for

inserting and deleting rows insertRow() and deleteRow().

Each tr element contains a cells array and methods for inserting

and deleting cells insertCell() and deleteCell().

The dimensions of an object can be changed by modifyingthe width and height properties of the element's style

property Element.style.width

The z-index of an object can be changed by modifying thezIndex property of the element's style property

Dynam c HTML


49/74


Dynam c HTML


50/74


Dynam c HTML


51/74


Dynam c HTML


52/74

Dynam c HTMLObject Referencing

Simplest way to reference an element is by its ID attribute

Dynamic HTML


53/74

Dynamic HTMLObject ReferencingExample

Dynamic HTML


54/74

Dynamic HTMLCollections all and children

Collections are basically arrays of related objects on a

page The Dynamic HTML Object Model includes a special

collection, all The all collection is collection of all the HTML elements in a

document in the order in which they appear

This provides an easy way ofreferring to any specific element,especially ifit does not have an ID

The length property specifies the number of elements in thecollection

The tagName property of an element determines the name ofthe element

The children collection Contains only those elements that are direct child elements of

that element

Is used to walk through all the elements in the document

Dynamic HTML


55/74

Dynamic HTMLCollections all and childrenExample

Dynamic HTML


56/74

y a cCollections all and childrenExample

Dynamic HTML


57/74

y aCollections all and childrenExample

Dynamic HTML


58/74

yCollections all and childrenExample

Dynamic HTML


59/74

yDynamic Styles

All elements style can be changed dynamically

Dynamic HTML object model allows to change theCLASS attribute of an element Instead of changing many individual styles at a time, the style

classes have supported easily altering element styles

Dynamic HTML


60/74

yDynamic StylesExample

b ect ModelD i S l E l


61/74

Dynamic StylesExample

Dynamic HTML


62/74

yDynamic StylesExample

Dynamic HTML


63/74

yDynamic Positioning

An element can be positioned with scripting using CSS position

property

Dynamic HTML


64/74

yDynamic PositioningExample

Dynamic HTML


65/74

yDynamic PositioningExample

Dynamic HTML


66/74

yUsing the frames Collection

To reference a frame, use frames(name) where name is the ID or

NAME of the desired frame Use a name as a namespace

Dynamic HTML


67/74

yUsing the frames CollectionExample

Dynamic HTML


68/74

yUsing the frames CollectionExample

Dynamic HTML


69/74

ynavigator Object

Is supported by Netscape Navigator and Internet Explorer Contains info about the Web browser viewing the page

navigator.appName contains the name of the application

Value of navigator.appVersion not a simple integer

contains other info, such as OS

Dynamic HTML


70/74

ynavigator ObjectExample

Dynamic HTML


71/74

ynavigator ObjectExample

Dynamic HTML


72/74

The DHMTL Object Modelwindow

document

history

navigator

applets

all

anchors

body

embeds

forms

filters

images

links

plugins

styleSheets

scripts

location

screen

event

document

document

plugins

object

collection

Key

frames


73/74

Summary

Arrays

Objects

Dynamic HTML

Q&A

Next Lecture


74/74

Next Lecture

Dynamic HTML

Event Model

Filters and Transitions

Data Binding with Tabular Data Control

10.JavaScript Objects

Documents

Transcript of 10.JavaScript Objects