Presentation is loading. Please wait.

Presentation is loading. Please wait.

OBJECTS What is an Object? Definition Properties Methods Events.

Similar presentations


Presentation on theme: "OBJECTS What is an Object? Definition Properties Methods Events."— Presentation transcript:

1

2 OBJECTS

3 What is an Object? Definition Properties Methods Events

4 Object Definition A self-contained module of data and its associated functions. Examples: window, frame, form, image, button, text, etc.

5 Object Properties Settable and/or gettable characteristics of the object. Examples : window.status, frame.top, form.name, image.height, button.value, text.type, etc.

6 Object Methods A procedure or function performed by the object. Examples : window.open( ), frame.focus( ), form.submit( ),, button.click( ), text.select( ), etc.

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

8 What is an Object Model? Window Parent, Top, Self, Frames HistoryDocumentLocation Links ImagesFormsAreasAnchorsApplets TextButtonRadio Submit TextareaCheckbox PasswordReset Select Navigator Hidden

9 Navigator Properties appName appVersion appCodeName userAgent mimeTypes[ ] plunging[ ] cookeEnabled Methods javaEnabled( ) taintEnabled( )

10 Navigator Properties for(prop in navigator) { document.writeln( prop + " : " + navigator [prop]); } An Example Code for getting Navigator Properties

11 Window Properties defaultStatus frames[] name onerror opener parent self status top window Methods alert( ) confirm( ) prompt( ) open( ) close( ) focus( ) blur( ) scroll( ) setTimeout( ) clearTimeout( ) Event Handlers onLoad= onUnload= onBlur= onFocus= …

12 Document Properties alinkColoranchors[ ] appletes[ ]bgColor cookiedomain embeds[ ]fgColor forms[ ]images[ ] lastModifiedlinks[ ] linkColorlocation plugins[ ]referrer titleURL vlinkColor Methods clear( ) close( ) eval( ) open( ) toString( ) valueOf( ) write( ) writeln( ) …

13 Defining and Accessing Variables year = 2004; site = "ECP3086 HTML and JavaScript"; URL = "www.mmu.edu.my"; document.writeln(site); document.writeln(URL); document.writeln(year); document.writeln(x); An Example code for using Document Object

14 Form Methods eval() reset( ) submit( ) toString( ) valueOf( ) Properties action elements[ ] encoding length method name target Event Handlers onReset= onSubmit=

15 Button Methods blur( ) click( ) eval( ) focus( ) toString( ) valueOf( ) Properties form name value type Event Handlers onBlur= onClick= onFocus=

16 Reset Methods blur( ) click( ) eval( ) focus( ) toString( ) valueOf( ) Properties form name type value Event Handlers onBlur= onClick= onFocus=

17 Submit Methods blur( ) click( ) eval( ) focus( ) toString( ) valueOf( ) Properties form name value type Event Handlers onBlur= onClick= onFocus=

18 CheckBox Methods blur( ) click( ) eval( ) focus( ) toString( ) valueOf( ) Properties checked defaultChecked form name type value Event Handlers onBlur= onClick= onFocus=

19 Radio Methods blur( ) click( ) eval( ) focus( ) toString( ) valueOf( ) Properties checked defaultChecked form length name type value Event Handlers onBlur= onClick= onFocus=

20 Select Methods blur( ) eval( ) focus( ) toString( ) valueOf( ) Properties form length name options(i) options(i).defaultSelected options(i).index options(i).selected options(i).text options(i).value selected Index type Event Handlers onBlur= onClick= onFocus= item …

21 TextArea Methods blur( ) eval( ) focus( ) select( ) toString( ) valueOf( ) Properties defaultValue form name type value Event Handlers onBlur= onChange= onFocus= onSelect= text …

22 Text Methods blur( ) eval( ) focus( ) select( ) toString( ) valueOf( ) Properties defaultValue form name type value Event Handlers onBlur= onChange onFocus= onSelect=

23 Password Methods blur( ) eval( ) focus( ) select( ) toString( ) valueOf( ) Properties defaultValue form name type value Event Handlers onBlur= onFocus= onSelect=

24 Hidden Methods eval( ) toString( ) valueOf( ) Properties form name type value

25 Image Methods eval( ) toString( ) valueOf( ) Properties border complete height hspace lowsrc name src vspace width Event Handlers onAbort= onError= onLoad=

26 Link Methods eval( ) toString( ) valueOf( ) Properties hash host hostname href length pathname port protocol search target Event Handlers onClick= onMouseOut= onMouseOver= link text or image

27 What Are JavaScript Objects? String Array Math Date

28 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 lengthprototype Object Creation var varName = new String(["stringExpression"])

29 Array Methods join("separator") reverse() sort(compareFunc) Properties lengthprototype Object Creation var arrayName = new Array([integer] | [val1 [,val2... [,valn]]])

30 Math Methodsabs(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 LN2LN10LOG2E LOG10EPISQRT1_2SQRT2

31 Date Methods getTime( )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)

32 Time Example 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; } Use of Date Object to display Date and Time in a Form


Download ppt "OBJECTS What is an Object? Definition Properties Methods Events."

Similar presentations


Ads by Google