Post on 21-Jan-2016
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
blur( )click( )eval( )focus( )toString( )valueOf( )
Properties
formnametypevalue
Event Handlers
onBlur=onClick=onFocus=
<INPUT TYPE=reset NAME= VALUE= onBlur= onClick= onFocus= >
Submit
Methods
blur( )click( )eval( )focus( )toString( )valueOf( )
Properties
formnamevaluetype
Event Handlers
onBlur=onClick=onFocus=
<INPUT TYPE=submit NAME= VALUE= onBlur= onClick= onFocus= >
CheckBox
Methods
blur( )click( )eval( )focus( )toString( )valueOf( )
Properties
checkeddefaultCheckedformnametypevalue
Event Handlers
onBlur=onClick=onFocus=
<INPUT TYPE=checkbox NAME= VALUE= CHECKED onBlur= onClick= onFocus= label>
Radio
Methods
blur( )click( )eval( )focus( )toString( )valueOf( )
Properties
checkeddefaultCheckedformlengthnametypevalue
Event Handlers
onBlur=onClick=onFocus=
<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
onBlur=onClick=onFocus=
<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
blur( )eval( )focus( )select( )toString( )valueOf( )
Properties
defaultValueformnametypevalue
Event Handlers
onBlur=onChange onFocus=onSelect=
<INPUT TYPE=text NAME= VALUE= SIZE= MAXLENGTH= onBlur= onChange= onFocus= onSelect= >
Password
Methods
blur( )eval( )focus( )select( )toString( )valueOf( )
Properties
defaultValueformnametypevalue
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
eval( )toString( )valueOf( )
Properties
bordercompleteheighthspacelowsrcnamesrcvspacewidth
Event Handlers
onAbort=onError=onLoad=
<IMG SRC= NAME= LOWSRC= WIDTH= HEIGHT=HSPACE= VSPACE= BORDER= ALIGN= ISMAP USEMAP=# onLoad= onAbort= onError= >
Link
Methods
eval( )toString( )valueOf( )
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