Chapter 12 - JavaScript: Objects Outline 12.1 Introduction 12.2 Thinking About Objects 12.3 Math Object 12.4 String Object 12.4.1 Fundamentals of Characters and Strings 12.4.2 Methods of the String Object 12.4.3 Character Processing Methods 12.4.4 Searching Methods 12.4.5 Splitting Strings and Obtaining Substrings 12.4.6 XHTML Markup Methods 12.5 Date Object 12.6 Boolean and Number Objects 12.7 JavaScript Internet and World Wide Web Resources
12.3 Math Object
12.3 Math Object
12.4.2 Methods of the String Object
12.4.2 Methods of the String Object
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 12.4: CharacterProcessing.html --> 6 <!-- Character Processing Methods --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Character Processing Methods</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 var s = "ZEBRA"; 15 var s2 = "AbCdEfG"; 16 17 document.writeln( "<p>Character at index 0 in '" + 18 s + "' is " + s.charAt( 0 ) ); 19 document.writeln( "<br />Character code at index 0 in '" 20 + s + "' is " + s.charCodeAt( 0 ) + "</p>" ); 21 22 document.writeln( "<p>'" + 23 String.fromCharCode( 87, 79, 82, 68 ) + 24 "' contains character codes 87, 79, 82 and 68</p>" ) 25 26 document.writeln( "<p>'" + s2 + "' in lowercase is '" + 27 s2.toLowerCase() + "'" ); 28 document.writeln( "<br />'" + s2 + "' in uppercase is '" 29 + s2.toUpperCase() + "'</p>" ); 30 // --> 31 </script> 32 33 </head><body></body> 34 </html> CharacterProcessing.html Method charAt returns a string containing the character at the specified index (0 in this example). Method charCodeAt returns the Unicode value of the character at the specified index (0 in this example). Method fromCharCode takes a comma-separated list of Unicode values and builds a string containing the character representation of those Unicode values. Methods toLowerCase and toUpperCase display versions of String s2 in all lowercase and all upper case letters, respectively.
Program Output
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 12.5: SearchingStrings.html --> 6 <!-- Searching Strings --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title> 11 Searching Strings with indexOf and lastIndexOf 12 </title> 13 14 <script type = "text/javascript"> 15 <!-- 16 var letters = "abcdefghijklmnopqrstuvwxyzabcdefghijklm"; 17 18 function buttonPressed() 19 { 20 searchForm.first.value = 21 letters.indexOf( searchForm.inputVal.value ); 22 searchForm.last.value = 23 letters.lastIndexOf( searchForm.inputVal.value ); 24 searchForm.first12.value = 25 letters.indexOf( searchForm.inputVal.value, 12 ); 26 searchForm.last12.value = 27 letters.lastIndexOf( 28 searchForm.inputVal.value, 12 ); 29 } 30 // --> 31 </script> 32 33 </head> SearchingStrings.html Method indexOf determines the first occurrence in the string letters of the string searchForm.inputVal.value. Method lastIndexOf determines the location of the last occurrence in letters of the string in text field inputVal.
SearchingStrings.html 34 <body> 35 <form name = "searchForm" action = ""> 36 <h1>The string to search is:<br /> 37 abcdefghijklmnopqrstuvwxyzabcdefghijklm</h1> 38 <p>Enter substring to search for 39 <input name = "inputVal" type = "text" /> 40 <input name = "search" type = "button" value = "Search" 41 onclick = "buttonPressed()" /><br /></p> 42 43 <p>First occurrence located at index 44 <input name = "first" type = "text" size = "5" /> 45 <br />Last occurrence located at index 46 <input name = "last" type = "text" size = "5" /> 47 <br />First occurrence from index 12 located at index 48 <input name = "first12" type = "text" size = "5" /> 49 <br />Last occurrence from index 12 located at index 50 <input name = "last12" type = "text" size = "5" /></p> 51 </form> 52 </body> 53 </html> SearchingStrings.html
Program Output
Method split tokenizes the contents of text field inputVal. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 12.6: SplitAndSubString.html --> 6 <!-- String Method split and substring --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>String Method split and substring</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 function splitButtonPressed() 15 { 16 var strings = myForm.inputVal.value.split( " " ); 17 myForm.output.value = strings.join( "\n" ); 18 19 myForm.outputSubstring.value = 20 myForm.inputVal.value.substring( 0, 10 ); 21 } 22 // --> 23 </script> 24 </head> 25 26 <body> 27 <form name = "myForm" action = ""> 28 <p>Enter a sentence to split into words<br /> 29 <input name = "inputVal" type = "text" size = "40" /> 30 <input name = "splitButton" type = "button" value = 31 "Split" onclick = "splitButtonPressed()" /></p> 32 33 <p>The sentence split into words is<br /> 34 <textarea name = "output" rows = "8" cols = "34"> 35 </textarea></p> SplitAndSubString.html Method split tokenizes the contents of text field inputVal. The argument to method split is the delimiter string. Method subString obtains a string containing the first 10 characters of the string the user input in text field inputVal.
SplitAndSubString.html Program Output 36 37 <p>The first 10 characters of the input string are 38 <input name = "outputSubstring" type = "text" 39 size = "15" /></p> 40 </form> 41 </body> 42 </html> SplitAndSubString.html Program Output
Method strike displays text with a line through it. 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 12.7: MarkupMethods.html --> 6 <!-- XHTML markup methods of the String object --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>XHTML Markup Methods of the String Object</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 var anchorText = "This is an anchor", 15 blinkText = "This is blinking text", 16 fixedText = "This is monospaced text", 17 linkText = "Click here to go to anchorText", 18 strikeText = "This is strike out text", 19 subText = "subscript", 20 supText = "superscript"; 21 22 document.writeln( anchorText.anchor( "top" ) ); 23 document.writeln( "<br />" + blinkText.blink() ); 24 document.writeln( "<br />" + fixedText.fixed() ); 25 document.writeln( "<br />" + strikeText.strike() ); 26 document.writeln( 27 "<br />This is text with a " + subText.sub() ); 28 document.writeln( 29 "<br />This is text with a " + supText.sup() ); 30 document.writeln( 31 "<br />" + linkText.link( "#top" ) ); 32 // --> MarkupMethods.html Method strike displays text with a line through it. Method anchor marks up the text as an anchor. Method sub creates subscript text. Method blink makes the string blink in the Web page. Method sup creates superscript text. The link method creates a hyperlink. Method fixed displays txt in a fixed-width font.
MarkupMethods.html Program Output 33 </script> 34 35 </head><body></body> 36 </html> MarkupMethods.html Program Output
12.5 Date Object
12.5 Date Object
12.5 Date Object
DateTime.html 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 12.9: DateTime.html --> 6 <!-- Date and Time Methods --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Date and Time Methods</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 var current = new Date(); 15 16 document.writeln( 17 "<h1>String representations and valueOf</h1>" ); 18 document.writeln( "toString: " + current.toString() + 19 "<br />toLocaleString: " + current.toLocaleString() + 20 "<br />toUTCString: " + current.toUTCString() + 21 "<br />valueOf: " + current.valueOf() ); 22 23 document.writeln( 24 "<h1>Get methods for local time zone</h1>" ); 25 document.writeln( "getDate: " + current.getDate() + 26 "<br />getDay: " + current.getDay() + 27 "<br />getMonth: " + current.getMonth() + 28 "<br />getFullYear: " + current.getFullYear() + 29 "<br />getTime: " + current.getTime() + 30 "<br />getHours: " + current.getHours() + 31 "<br />getMinutes: " + current.getMinutes() + 32 "<br />getSeconds: " + current.getSeconds() + 33 "<br />getMilliseconds: " + DateTime.html
DateTime.html 34 current.getMilliseconds() + 35 "<br />getTimezoneOffset: " + 36 current.getTimezoneOffset() ); 37 38 document.writeln( 39 "<h1>Specifying arguments for a new Date</h1>" ); 40 var anotherDate = new Date( 2001, 2, 18, 1, 5, 0, 0 ); 41 document.writeln( "Date: " + anotherDate ); 42 43 document.writeln( 44 "<h1>Set methods for local time zone</h1>" ); 45 anotherDate.setDate( 31 ); 46 anotherDate.setMonth( 11 ); 47 anotherDate.setFullYear( 2001 ); 48 anotherDate.setHours( 23 ); 49 anotherDate.setMinutes( 59 ); 50 anotherDate.setSeconds( 59 ); 51 document.writeln( "Modified date: " + anotherDate ); 52 // --> 53 </script> 54 55 </head><body></body> 56 </html> DateTime.html
Program Output
12.6 Boolean and Number Objects
12.6 Boolean and Number Objects