JavaScript (Object)

Erick Kurniawan, S.Kom

Berpikir tentang Objects Objects

Attributes Behaviors Encapsulate data dan methods Penyembunyian Informasi Menyembunyikan detail di dalam objects itu sendiri

Math Object
Method abs( x ) Example abs( 7.2 ) is 7.2 abs( 0.0 ) is 0.0 abs( -5.6 ) is 5.6 ceil( x ) rounds x to the smallest ceil( 9.2 ) is 10.0 integer not less than x ceil( -9.8 ) is -9.0 cos( x ) trigonometric cosine of x cos( 0.0 ) is 1.0 (x in radians) exp( x ) exponential method ex exp( 1.0 ) is 2.71828 exp( 2.0 ) is 7.38906 floor( x ) rounds x to the largest floor( 9.2 ) is 9.0 integer not greater than x floor( -9.8 ) is -10.0 log( x ) natural logarithm of x log( 2.718282 ) is 1.0 (base e) log( 7.389056 ) is 2.0 max( x, y ) larger value of x and y max( 2.3, 12.7 ) is 12.7 max( -2.3, -12.7 ) is -2.3 Description absolute value of x

Math Object
min( x, y ) smaller value of x and y pow( x, y ) x raised to power y (xy) round( x ) rounds x to the closest integer sin( x ) trigonometric sine of x (x in radians) sqrt( x ) square root of x min( 2.3, 12.7 ) is 2.3 min( -2.3, -12.7 ) is -12.7 pow( 2.0, 7.0 ) is 128.0 pow( 9.0, .5 ) is 3.0 round( 9.75 ) is 10 round( 9.25 ) is 9 sin( 0.0 ) is 0.0

sqrt( 900.0 ) is 30.0 sqrt( 9.0 ) is 3.0 tan( x ) trigonometric tangent tan( 0.0 ) is 0.0 of x (x in radians) Fig. 12.1 Math object methods.

Math Object
Description Base of a natural logarithm (e). Math.LN2 Natural logarithm of 2. Math.LN10 Natural logarithm of 10. Math.LOG2E Base 2 logarithm of e. Math.LOG10E Base 10 logarithm of e. Math.PI the ratio of a circles circumference to its diameter. Math.SQRT1_2 Square root of 0.5. Math.SQRT2 Square root of 2.0. Fig. 12.2 Properties of the Math object. Constant Math.E Value Approximately 2.718. Approximately 0.693. Approximately 2.302. Approximately 1.442. Approximately 0.434. Approximately 3.141592653589793. Approximately 0.707. Approximately 1.414.

Methods dari Objek String

Method charAt( index ) charCodeAt( index ) concat( string ) Description Returns a string containing the character at the specified index. If there is no character at the index, charAt returns an empty string. The first character is located at index 0. Returns the Unicode value of the character at the specified index. If there is no character at the index, charCodeAt returns NaN (Not a Number). Concatenates its argument to the end of the string that invokes the method. The string invoking this method is not modified; instead a new String is returned. This method is the same as adding two strings with the string concatenation operator + (e.g., s1.concat( s2 ) is the same as s1 + s2). Converts a list of Unicode values into a string containing the corresponding characters. Searches for the first occurrence of substring starting from position index in the string that invokes the method. The method returns the starting index of substring in the source string or 1 if substring is not found. If the index argument is not provided, the method begins searching from index 0 in the source string. Searches for the last occurrence of substring starting from position index and searching toward the beginning of the string that invokes the method. The method returns the starting index of substring in the source string or 1 if substring is not found. If the index argument is not provided, the method begins searching from the end of the source string.

fromCharCode( value1, value2, ) indexOf( substring, index )

lastIndexOf( substring, index )

Methods dari Objek String

slice( start, end ) Returns a string containing the portion of the string from index start through index end. If the end index is not specified, the method returns a string from the start index to the end of the source string. A negative end index specifies an offset from the end of the string starting from a position one past the end of the last character (so 1 indicates the last character position in the string). Splits the source string into an array of strings (tokens) where its string argument specifies the delimiter (i.e., the characters that indicate the end of each token in the source string). Returns a string containing length characters starting from index start in the source string. If length is not specified, a string containing characters from start to the end of the source string is returned. Returns a string containing the characters from index start up to but not including index end in the source string. Returns a string in which all uppercase letters are converted to lowercase letters. Non-letter characters are not changed. Returns a string in which all lowercase letters are converted to uppercase letters. Non-letter characters are not changed. Returns the same string as the source string. Returns the same string as the source string.

split( string ) substr( start, length ) substring( start, end ) toLowerCase() toUpperCase() toString() valueOf()

Methods dari Objek String

Methods that generate XHTML tags Wraps the source string in an anchor element anchor( name ) (<a></a>) with name as the anchor name. blink() Wraps the source string in a <blink></blink> element. fixed() Wraps the source string in a <tt></tt> element. Wraps the source string in an anchor element link( url ) (<a></a>) with url as the hyperlink location. strike() Wraps the source string in a <strike></strike> element. sub() Wraps the source string in a  element. sup() Wraps the source string in a  element. Fig. 12.3 String object methods.

Character Processing Methods Contoh

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 12.4: CharacterProcessing.html --> <!-- Character Processing Methods -->

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Character Processing Methods</title> <script type = "text/javascript"> <!-var s = "ZEBRA"; var s2 = "AbCdEfG"; document.writeln( "<p>Character at index 0 in '" + s + "' is " + s.charAt( 0 ) ); document.writeln( "<br />Character code at index 0 in '" + s + "' is " + s.charCodeAt( 0 ) + "</p>" ); document.writeln( "<p>'" + String.fromCharCode( 87, 79, 82, 68 ) + "' contains character codes 87, 79, 82 and 68</p>" )

26 27 28 29 30 31 32 33

document.writeln( "<p>'" + s2 + "' in lowercase is '" + s2.toLowerCase() + "'" ); document.writeln( "<br />'" + s2 + "' in uppercase is '" + s2.toUpperCase() + "'</p>" ); // --> </script> </head><body></body>

34 </html>

Date Object
Method De sc rip tio n

getDate() getUTCDate() getDay() getUTCDay() getFullYear() getUTCFullYear() getHours() getUTCHours() getMilliseconds() getUTCMilliSeconds() getMinutes() getUTCMinutes() getMonth() getUTCMonth() getSeconds() getUTCSeconds() getTime() getTimezoneOffset() setDate( val ) setUTCDate( val ) Fig. 12.8 Methods of the Date object.

Returns a number from 1 to 31 representing the day of the month in local time or UTC, respectively. Returns a number from 0 (Sunday) to 6 (Saturday) representing the day of the week in local time or UTC, respectively. Returns the year as a four-digit number in local time or UTC, respectively. Returns a number from 0 to 23 representing hours since midnight in local time or UTC, respectively. Returns a number from 0 to 999 representing the number of milliseconds in local time or UTC, respectively. The time is stored in hours, minutes, seconds and milliseconds. Returns a number from 0 to 59 representing the minutes for the time in local time or UTC, respectively. Returns a number from 0 (January) to 11 (December) representing the month in local time or UTC, respectively. Returns a number from 0 to 59 representing the seconds for the time in local time or UTC, respectively. Returns the number of milliseconds between January 1, 1970 and the time in the Date object. Returns the difference in minutes between the current time on the local computer and UTCpreviously known as Greenwich Mean Time (GMT). Sets the day of the month (1 to 31) in local time or UTC, respectively.

Date Object
Method De sc rip tio n

setFullYear( y, m, d ) setUTCFullYear( y, m, d ) setHours( h, m, s, ms ) setUTCHours( h, m, s, ms )

Sets the year in local time or UTC, respectively. The second and third arguments representing the month and the date are optional. If an optional argument is not specified, the current value in the Date object is used. Sets the hour in local time or UTC, respectively. The second, third and fourth arguments representing the minutes, seconds and milliseconds are optional. If an optional argument is not specified, the current value in the Date object is used. Sets the number of milliseconds in local time or UTC, respectively. Sets the minute in local time or UTC, respectively. The second and third arguments representing the seconds and milliseconds are optional. If an optional argument is not specified, the current value in the Date object is used. Sets the month in local time or UTC, respectively. The second argument representing the date is optional. If the optional argument is not specified, the current date value in the Date object is used. Sets the second in local time or UTC, respectively. The second argument representing the milliseconds is optional. If this argument is not specified, the current millisecond value in the Date object is used.

setMilliSeconds( ms ) setUTCMilliseconds( ms ) setMinutes( m, s, ms ) setUTCMinutes( m, s, ms ) setMonth( m, d ) setUTCMonth( m, d ) setSeconds( s, ms ) setUTCSeconds( s, ms ) Fig. 12.8

Methods of the Date object.

Date Object
Method De sc rip tion

setTime( ms ) toLocaleString()

Sets the time based on its argumentthe number of elapsed milliseconds since January 1, 1970. Returns a string representation of the date and time in a form specific to the computers locale. For example, September 13, 2001 at 3:42:22 PM is represented as 09/13/01 15:47:22 in the United States and 13/09/01 15:47:22 in Europe. Returns a string representation of the date and time in the form: 19 Sep 2001 15:47:22 UTC Returns a string representation of the date and time in a form specific to the locale of the computer (Mon Sep 19 15:47:22 EDT 2001 in the United States). The time in number of milliseconds since midnight, January 1, 1970.

toUTCString() toString() valueOf() Fig. 12.8

Methods of the Date object.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 12.9: DateTime.html --> <!-- Date and Time Methods -->

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Date and Time Methods</title> <script type = "text/javascript"> <!-var current = new Date(); document.writeln( "<h1>String representations and valueOf</h1>" ); document.writeln( "toString: " + current.toString() + "<br />toLocaleString: " + current.toLocaleString() + "<br />toUTCString: " + current.toUTCString() + "<br />valueOf: " + current.valueOf() ); document.writeln( "<h1>Get methods for local time zone</h1>" );

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

document.writeln( "getDate: " + current.getDate() + "<br />getDay: " + current.getDay() + "<br />getMonth: " + current.getMonth() + "<br />getFullYear: " + current.getFullYear() + "<br />getTime: " + current.getTime() + "<br />getHours: " + current.getHours() + "<br />getMinutes: " + current.getMinutes() + "<br />getSeconds: " + current.getSeconds() + "<br />getMilliseconds: " + current.getMilliseconds() + "<br />getTimezoneOffset: " + current.getTimezoneOffset() ); document.writeln( "<h1>Specifying arguments for a new Date</h1>" ); var anotherDate = new Date( 2001, 2, 18, 1, 5, 0, 0 ); document.writeln( "Date: " + anotherDate ); document.writeln( "<h1>Set methods for local time zone</h1>" ); anotherDate.setDate( 31 ); anotherDate.setMonth( 11 ); anotherDate.setFullYear( 2001 ); anotherDate.setHours( 23 ); anotherDate.setMinutes( 59 );

50 51 52 53 54 55

anotherDate.setSeconds( 59 ); document.writeln( "Modified date: " + anotherDate ); // --> </script> </head><body></body>

56 </html>

document Object
Description Writes the string to the XHTML document as XHTML code. Writes the string to the XHTML document as writeln( string ) XHTML code and adds a newline character at the end. document.cookie This property is a string containing the values of all the cookies stored on the users computer for the current document. See Section 12.9, Using Cookies. document.lastModified This property is the date and time that this document was last modified. Fig. 12.12 Important document object methods and properties. Method or Property write( string )

window Object
Description Creates a new window with the URL of the window set to url, the name set to name, and the visible features set by the string passed in as option. Displays a dialog box asking the user for input. The text prompt( prompt, default ) of the dialog is prompt, and the default value is set to default. close() Closes the current window and deletes its object from memory. window.focus() This method gives focus to the window (i.e., puts the window in the foreground, on top of any other open browser windows). window.document This property contains the document object representing the document currently inside the window. window.closed This property contains a boolean value that is set to true if the window is closed, and false if it is not. window.opener This property contains the window object of the window that opened the current window, if such a window exists. Fig. 12.14 Important window object methods and properties. Method or Property open( url, name, options )

1 2 3 4 5 6 7 8 9 11

<?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 12.13: window.html <!-- Using the Window Object --> -->

<html xmlns = "http://www.w3.org/1999/xhtml"> <head>

10 <title>Using the Window Object</title> 12 <script type = "text/javascript"> 13 14 15 16 17 18 19 20 21 22 23 24 25 function createChildWindow() { // these variables all contain either "yes" or "no" // to enable or disable a feature in the child window var toolBar // specify if toolbar will appear in child window var menuBar; // specify if menubar will appear in child window var location; // specify if address bar will appear in child window var scrollBars; // specify if scrollbars will appear in child window var status; // specify if status bar will appear in child window var resizable; // specify if the child window will be resizable <!-var childWindow; // variable to control the child window

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 // determine whether the Scroll Bar checkbox is checked if ( scrollBarsCheckBox.checked ) scrollBars = "yes"; else scrollBars = "no"; // determine whether the Address Bar checkbox is checked if ( locationCheckBox.checked ) location = "yes"; else location = "no"; // determine whether the Menu Bar checkbox is checked if ( menuBarCheckBox.checked ) menuBar = "yes"; else menuBar = "no"; // determine whether the Tool Bar checkbox is checked if ( toolBarCheckBox.checked ) toolBar = "yes"; else toolBar = "no";

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

// determine whether the Status Bar checkbox is checked if ( statusCheckBox.checked ) status = "yes"; else status = "no"; // determine whether the Resizable checkbox is checked if ( resizableCheckBox.checked ) resizable = "yes"; else resizable = "no"; // display window with selected features childWindow = window.open( "", "", "resizable = " + resizable + ", toolbar = " + toolBar + ", menubar = " + menuBar + ", status = " + status + ", location = " + location + ", scrollbars = " + scrollBars ); // disable buttons closeButton.disabled = false; modifyButton.disabled = false; getURLButton.disabled = false; setURLButton.disabled = false; } // end function createChildWindow

76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98

// insert text from the textbox into the child window function modifyChildWindow() { if ( childWindow.closed ) alert( "You attempted to interact with a closed window" ); else childWindow.document.write( textForChild.value ); } // end function modifyChildWindow // close the child window function closeChildWindow() { if ( childWindow.closed ) alert( "You attempted to interact with a closed window" ); else childWindow.close(); closeButton.disabled = true; modifyButton.disabled = true; getURLButton.disabled = true; setURLButton.disabled = true; } // end function closeChildWindow

99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 119

// copy the URL of the child window into the parent windows myChildURL function getChildWindowURL() { if ( childWindow.closed ) alert( "You attempted to interact with a closed window" ); else myChildURL.value = childWindow.location; } // end function getChildWindowURL // set the URL of the child window to the URL // in the parent windows myChildURL function setChildWindowURL() { if ( childWindow.closed ) alert( "You attempted to interact with a closed window" ); else childWindow.location = myChildURL.value; } // end function setChildWindowURL //-->

118 </script> 120 </head> 121 122 <body> 123 <h1>Hello, This is the main window</h1>

124 <p>Please check the features to enable for the child window<br/> 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 <p>Please enter the text that you would like to display 145 146 147 in the child window<br/> <input id = "textForChild" type = "text" value = "<h1> Hello, I am a child window</h1> <br\>"/> <input id = "toolBarCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Tool Bar</label> <input id = "menuBarCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Menu Bar</label> <input id = "locationCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Address Bar</label><br/> <input id = "scrollBarsCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Scroll Bars</label> <input id = "statusCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Status Bar</label> <input id = "resizableCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Resizable</label><br/></p>

148 149 150 151 152 153 154

<input id = "createButton" type = "button" value = "Create Child Window" onclick = "createChildWindow()" /> <input id= "modifyButton" type = "button" value = "Modify Child Window" onclick = "modifyChildWindow()" disabled = "disabled"/> <input id = "closeButton" type = "button" value = "Close Child Window" onclick = "closeChildWindow()" disabled = "disabled"/></p>

155 <p>The other window's URL is: <br/> 156 157 158 159 160 161 162 </body> 163 </html> <input id = "myChildURL" type = "text" value = "./"/> <input id = "setURLButton" type = "button" value = "Set Child URL" onclick = "setChildWindowURL()" disabled = "disabled"/> <input id = "getURLButton" type = "button" value = "Get URL From Child" onclick = "getChildWindowURL()" disabled = "disabled"/></p>