Download presentation
Presentation is loading. Please wait.
1
Chapter 12 - JavaScript: Objects
Outline Introduction Thinking About Objects Math Object String Object Fundamentals of Characters and Strings Methods of the String Object Character Processing Methods Searching Methods Splitting Strings and Obtaining Substrings XHTML Markup Methods Date Object Boolean and Number Objects JavaScript Internet and World Wide Web Resources
2
12.3 Math Object
3
12.3 Math Object
4
12.4.2 Methods of the String Object
5
12.4.2 Methods of the String Object
6
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 12.4: CharacterProcessing.html --> 6 <!-- Character Processing Methods > 7 8 <html xmlns = " <head> <title>Character Processing Methods</title> 11 <script type = "text/javascript"> <!-- var s = "ZEBRA"; var s2 = "AbCdEfG"; 16 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>" ); 21 document.writeln( "<p>'" + String.fromCharCode( 87, 79, 82, 68 ) + "' contains character codes 87, 79, 82 and 68</p>" ) 25 document.writeln( "<p>'" + s2 + "' in lowercase is '" + s2.toLowerCase() + "'" ); document.writeln( "<br />'" + s2 + "' in uppercase is '" s2.toUpperCase() + "'</p>" ); // --> </script> 32 </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.
7
Program Output
8
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 12.5: SearchingStrings.html --> 6 <!-- Searching Strings > 7 8 <html xmlns = " <head> <title> Searching Strings with indexOf and lastIndexOf </title> 13 <script type = "text/javascript"> <!-- var letters = "abcdefghijklmnopqrstuvwxyzabcdefghijklm"; 17 function buttonPressed() { searchForm.first.value = letters.indexOf( searchForm.inputVal.value ); searchForm.last.value = letters.lastIndexOf( searchForm.inputVal.value ); searchForm.first12.value = letters.indexOf( searchForm.inputVal.value, 12 ); searchForm.last12.value = letters.lastIndexOf( searchForm.inputVal.value, 12 ); } // --> </script> 32 </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.
9
SearchingStrings.html 34 <body>
<form name = "searchForm" action = ""> <h1>The string to search is:<br /> abcdefghijklmnopqrstuvwxyzabcdefghijklm</h1> <p>Enter substring to search for <input name = "inputVal" type = "text" /> <input name = "search" type = "button" value = "Search" onclick = "buttonPressed()" /><br /></p> 42 <p>First occurrence located at index <input name = "first" type = "text" size = "5" /> <br />Last occurrence located at index <input name = "last" type = "text" size = "5" /> <br />First occurrence from index 12 located at index <input name = "first12" type = "text" size = "5" /> <br />Last occurrence from index 12 located at index <input name = "last12" type = "text" size = "5" /></p> </form> </body> 53 </html> SearchingStrings.html
10
Program Output
11
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" " 4 5 <!-- Fig. 12.6: SplitAndSubString.html --> 6 <!-- String Method split and substring --> 7 8 <html xmlns = " <head> <title>String Method split and substring</title> 11 <script type = "text/javascript"> <!-- function splitButtonPressed() { var strings = myForm.inputVal.value.split( " " ); myForm.output.value = strings.join( "\n" ); 18 myForm.outputSubstring.value = myForm.inputVal.value.substring( 0, 10 ); } // --> </script> </head> 25 <body> <form name = "myForm" action = ""> <p>Enter a sentence to split into words<br /> <input name = "inputVal" type = "text" size = "40" /> <input name = "splitButton" type = "button" value = "Split" onclick = "splitButtonPressed()" /></p> 32 <p>The sentence split into words is<br /> <textarea name = "output" rows = "8" cols = "34"> </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.
12
SplitAndSubString.html Program Output
36 <p>The first 10 characters of the input string are <input name = "outputSubstring" type = "text" size = "15" /></p> </form> </body> 42 </html> SplitAndSubString.html Program Output
13
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" " 4 5 <!-- Fig. 12.7: MarkupMethods.html > 6 <!-- XHTML markup methods of the String object --> 7 8 <html xmlns = " <head> <title>XHTML Markup Methods of the String Object</title> 11 <script type = "text/javascript"> <!-- var anchorText = "This is an anchor", blinkText = "This is blinking text", fixedText = "This is monospaced text", linkText = "Click here to go to anchorText", strikeText = "This is strike out text", subText = "subscript", supText = "superscript"; 21 document.writeln( anchorText.anchor( "top" ) ); document.writeln( "<br />" + blinkText.blink() ); document.writeln( "<br />" + fixedText.fixed() ); document.writeln( "<br />" + strikeText.strike() ); document.writeln( "<br />This is text with a " + subText.sub() ); document.writeln( "<br />This is text with a " + supText.sup() ); document.writeln( "<br />" + linkText.link( "#top" ) ); // --> 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.
14
MarkupMethods.html Program Output
</script> 34 </head><body></body> 36 </html> MarkupMethods.html Program Output
15
12.5 Date Object
16
12.5 Date Object
17
12.5 Date Object
18
DateTime.html 1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 12.9: DateTime.html --> 6 <!-- Date and Time Methods --> 7 8 <html xmlns = " <head> <title>Date and Time Methods</title> 11 <script type = "text/javascript"> <!-- var current = new Date(); 15 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() ); 22 document.writeln( "<h1>Get methods for local time zone</h1>" ); 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: " + DateTime.html
19
DateTime.html 34 current.getMilliseconds() +
"<br />getTimezoneOffset: " + current.getTimezoneOffset() ); 37 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 ); 42 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 ); anotherDate.setSeconds( 59 ); document.writeln( "Modified date: " + anotherDate ); // --> </script> 54 </head><body></body> 56 </html> DateTime.html
20
Program Output
21
12.6 Boolean and Number Objects
22
12.6 Boolean and Number Objects
Similar presentations
