OBJECTS What is an Object? Definition Properties Methods Events.

OBJECTS

What is an Object?

• Definition

• Properties

• Methods

• Events

Object Definition

A self-contained module of data and its associated functions.

Examples: window, frame, form, image, button, text, etc.

Object Properties

Settable and/or gettable characteristics of the object.

Examples: window.status, frame.top, form.name, image.height, button.value, text.type, etc.

Object Methods

A procedure or function performed by the object.

Examples: window.open( ), frame.focus( ), form.submit( ), , button.click( ), text.select( ), etc.

Object Events

Actions (triggers) related to objects and produced by users or running programs. In JavaSript, functions that manage events are referred to as Event Handlers.

Examples: window: onLoad( ), frame: onFocus( ), form.onSubmit( ), button.onClick( ), text.onChange( ), etc.

What is an Object Model?

Window Parent, Top, Self, Frames

HistoryDocument Location

LinksImagesFormsAreasAnchors Applets

TextButton Radio

Submit

TextareaCheckbox

PasswordReset

Select

Navigator

Hidden

Navigator

Properties

appNameappVersionappCodeNameuserAgentmimeTypes[ ]plunging[ ]cookeEnabled

Methods

javaEnabled( )taintEnabled( )

<HTML>

<HEAD><TITLE>Navigator Properties</TITLE>

</HEAD>

<BODY>

<PRE>

<SCRIPT LANGUAGE = "JavaScript">

for(prop in navigator) {

document.writeln( prop + " : " + navigator [prop]);

}

</SCRIPT>

</PRE>

</BODY>

</HTML>

An Example Code for getting Navigator Properties

WindowProperties

defaultStatusframes[] nameonerror opener parentself status topwindow

Methods

alert( )confirm( )prompt( )open( )close( )focus( )blur( )scroll( )setTimeout( )clearTimeout( )

Event Handlers

onLoad=onUnload=onBlur=onFocus=

<FRAMESET COLS= ROWS= BORDER= FRAMEBORDER=Yes|NoBORDERCOLOR=onBlur= onFocus=onLoad= onUnload=>

<FRAME SRC= NAME= BORDER=BORDERCOLOR= > …

</FRAMESET>

DocumentProperties

alinkColor anchors[ ]appletes[ ] bgColorcookie domainembeds[ ] fgColorforms[ ] images[ ]lastModified links[ ]linkColor locationplugins[ ] referrertitle URLvlinkColor

Methods

clear( )close( )eval( )open( ) toString( )valueOf( )write( )writeln( )

<BODY BACKGROUND= BGCOLOR= FGCOLOR= LINK= ALINK=

VLINK= onBlur= onFocus=onLoad= onUnload= >…

</BODY>

<HTML>

<HEAD>

<TITLE>Defining and Accessing Variables</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

year = 2004;

site = "ECP3086 HTML and JavaScript";

URL = "www.mmu.edu.my";

document.writeln(site);

document.writeln(URL);

document.writeln(year);

document.writeln(x);

</SCRIPT>

</BODY>

</HTML>

An Example code for using Document Object

Form

Methods

eval()reset( )submit( )toString( )valueOf( )

Properties

action elements[ ]encodinglengthmethodnametarget

Event Handlers

onReset=onSubmit=

<FORM NAME= TARGET= ACTION= METHOD= ENCTYPE onReset= onSubmit= >

</FORM>

Button

Methods

blur( )click( )eval( )focus( )toString( )valueOf( )

Properties

formnamevaluetype

Event Handlers

onBlur=onClick=onFocus=

<INPUT TYPE=button NAME= VALUE= onBlur= onClick= onFocus= >

Reset

Methods


Properties

formnametypevalue

Event Handlers


<INPUT TYPE=reset NAME= VALUE= onBlur= onClick= onFocus= >

Submit

Methods


Properties

formnamevaluetype

Event Handlers


<INPUT TYPE=submit NAME= VALUE= onBlur= onClick= onFocus= >

CheckBox

Methods


Properties

checkeddefaultCheckedformnametypevalue

Event Handlers


<INPUT TYPE=checkbox NAME= VALUE= CHECKED onBlur= onClick= onFocus= label>

Radio

Methods


Properties

checkeddefaultCheckedformlengthnametypevalue

Event Handlers


<INPUT TYPE=radio NAME= VALUE= CHECKED onBlur= onClick= onFocus= label>

Select

Methods

blur( )eval( )focus( )toString( )valueOf( )

Properties

formlengthnameoptions(i)options(i).defaultSelected options(i).indexoptions(i).selected options(i).textoptions(i).valueselected Index type

Event Handlers


<SELECT NAME= SIZE= MULTIPLE onBlur= onChange= onClick= onFocus= >

<OPTION SELECTED VALUE=>item …

</SELECT>

TextArea

Methods

blur( )eval( )focus( )select( )toString( )valueOf( )

Properties

defaultValueformnametypevalue

Event Handlers

onBlur=onChange=onFocus=onSelect=

<TEXTAREA NAME= ROWS= COLS=WRAP= off|virtual|physical onBlur= onChange= onSelect= onFocus= >

text …

</TEXTAREA>

Text

Methods


Properties


Event Handlers

onBlur=onChange onFocus=onSelect=

<INPUT TYPE=text NAME= VALUE= SIZE= MAXLENGTH= onBlur= onChange= onFocus= onSelect= >

Password

Methods


Properties


Event Handlers

onBlur=onFocus=onSelect=

<INPUT TYPE=password NAME= VALUE= SIZE= MAXLENGTH= onBlur= onFocus= onSelect= >

Hidden

Methods

eval( )toString( )valueOf( )

Properties

formnametypevalue

<INPUT TYPE=hidden NAME= VALUE= >

Image

Methods


Properties

bordercompleteheighthspacelowsrcnamesrcvspacewidth

Event Handlers

onAbort=onError=onLoad=

<IMG SRC= NAME= LOWSRC= WIDTH= HEIGHT=HSPACE= VSPACE= BORDER= ALIGN= ISMAP USEMAP=# onLoad= onAbort= onError= >

Link

Methods


Properties

hashhosthostnamehreflengthpathnameportprotocolsearchtarget

Event Handlers

onClick=onMouseOut=onMouseOver=

<A HREF= | NAME= TARGET= onClick= onMouseOut= onMouseOver= >

link text or image

</A>

What Are JavaScript Objects?

• String

• Array

• Math

• Date

String

Methods

toLowerCase( ) toUpperCase( )indexOf(subStr[,startCharPos])lastIndexOf(subStr[,startCharPos])substring(startCharPos, endCharPos) charAt(charPos)split(“separator”) anchor(“name”)blink( ) fontsize(1…7) fixed( )sup( ) sub( ) small( )big( ) strike( ) italics( )bold( ) link(“URL”) fontcolor(value)

Properties length prototype

Object Creation var varName = new String(["stringExpression"])

Array

Methodsjoin("separator")reverse()sort(compareFunc)

Properties length prototype

Object Creation

var arrayName = new Array([integer] | [val1 [,val2 ... [,valn]]])

Math

Methods abs(x) acos(x) asin(x)atan(x) atan2(x1, x2) ceil(x)cos(x) exp(x) floor(x)log(x) max(x1, x2) min(x1, x2)pow(x1, x2) random( ) round(x)sin(x) sqrt(x) tan(x)

Properties E LN2 LN10 LOG2ELOG10E PI SQRT1_2 SQRT2

Date

MethodsgetTime( ) getYear( ) getMonth( )getDate( ) getDay( ) getHours( )getMinutes( ) getSeconds( ) setYear(val)setMonth(val) setDate(val) setDay(val)setHours(val) setMinutes(val)setSeconds(val) getTimezoneOffset( )toGMTString( ) toLocaleString( )Date.UTC(date values)

Properties prototype

Object Creation new Date( ) new Date("Month dd, yyy hh:mm:ss") new Date("Month dd, yyyy") new Date(yy,mm,dd,hh,mm,ss)

new Date(yy,mm,dd)

<HTML>

<HEAD><TITLE>Time Example</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

function getTimes() {

var current = new Date();

var out = "Day: " + current.getDay()+"\n";

out = out.concat("Month: " + current.getMonth() + "\n");

out = out.concat("Year: " + current.getFullYear() + "\n");

out = out.concat("GMT Time: " + current.toUTCString() + "\n");

out = out.concat("Time: " + current.toString() + "\n");

timesForm.output.value = out;

}

</SCRIPT>

<BODY>

<FORM NAME="timesForm">

<P>

<INPUT NAME = "getTimeButton" TYPE = "button" VALUE = "Get Time" ONCLICK = "getTimes()">

<P>

<TEXTAREA NAME = "output" ROWS ="10" COLS="42">

</TEXTAREA>

</FORM>

</BODY>

</HTML>

Use of Date Object to display Date and Time in a Form

OBJECTS What is an Object? Definition Properties Methods Events.

Documents

Transcript of OBJECTS What is an Object? Definition Properties Methods Events.