Java Script: Objects (Chapter 12 in [2])

2 Outline Introduction Introduction Thinking About Objects Thinking About Objects Math Object Math Object String Object String Object Date Object Date Object Boolean and Number Objects Boolean and Number Objects document Object document Object window Object window Object Using Cookies Using Cookies Final JavaScript Example Final JavaScript Example Web Resources Web Resources

3 Introduction Use JavaScript to manipulate every element of XHTML document from a script Use JavaScript to manipulate every element of XHTML document from a script Reference for several of JavaScript ’ s built-in objects Reference for several of JavaScript ’ s built-in objects Demonstrates the capabilities Demonstrates the capabilities

4 Thinking About Objects Objects Objects Attributes Attributes Behaviors Behaviors Encapsulate data and methods Encapsulate data and methods Property of information hiding Property of information hiding Details hidden within the objects themselves Details hidden within the objects themselves

5 Math Object Allow the programmer to perform many common mathematical calculations Allow the programmer to perform many common mathematical calculations

6 Math Object Fig. 12.1Math object methods.

7 Math Object

8

9 String Object JavaScript ’ s string and character-processing capabilities JavaScript ’ s string and character-processing capabilities Appropriate for processing names, addresses, credit card information, etc. Appropriate for processing names, addresses, credit card information, etc.

10 Fundamentals of Characters and Strings Characters Characters Fundamental building blocks of JavaScript programs Fundamental building blocks of JavaScript programs String String Series of characters treated as a single unit Series of characters treated as a single unit

11 Methods of the String Object Fig String object methods.

12 Methods of the String Object Fig String object methods.

13 Methods of the String Object

14 Character Processing Methods charAt charAt Returns the character at specific position Returns the character at specific position charCodeAt charCodeAt Returns Unicode value of the character at specific position Returns Unicode value of the character at specific position fromCharCode fromCharCode Returns string created from series of Unicode values Returns string created from series of Unicode values toLowerCase toLowerCase Returns lowercase version of string Returns lowercase version of string toUpperCase toUpperCase Returns uppercase version of string Returns uppercase version of string

17 Searching Methods indexOf and lastIndexOf indexOf and lastIndexOf Search for a specified substring in a string Search for a specified substring in a string

21

22 In-Class Exercise #1 Modify the program shown in pp to output the number of occurrences of substrings within the original string. Modify the program shown in pp to output the number of occurrences of substrings within the original string.

23 Splitting Strings and Obtaining Substrings Tokenization Tokenization The process of breaking a string into tokens The process of breaking a string into tokens Tokens Tokens Individual words Individual words Separated by delimiters Separated by delimiters

26

27 XHTML Markup Methods Anchor Anchor Blink Blink blinking text blinking text Fixed Fixed monospaced text monospaced text Strike Strike strike out text strike out text Subscript Subscript subscript subscript Superscript Superscript superscript superscript

30 Date Object Provides methods for date and time manipulations Provides methods for date and time manipulations

31 Date Object

32 Date Object

33 Date Object

37 Question Browse the HTML file given in the last three pages. Do you see the same results? Browse the HTML file given in the last three pages. Do you see the same results?

38 Boolean and Number Objects Object wrappers for boolean true / false values and numbers Object wrappers for boolean true / false values and numbers

39 Boolean and Number Objects

40 Boolean and Number Objects

41 document Object Manipulate document that is currently visible in the browser window Manipulate document that is currently visible in the browser window

42 document Object

43 window Object Provides methods for manipulating browser window Provides methods for manipulating browser window

window.html 1 of 7

window.html 2 of 7

window.html 3 of 7

window.html 4 of 7

window.html 5 of 7

window.html 6 of 7

window.html 7 of 7

51

52

53 window Object

54 Using Cookies Cookie Cookie Data stored on user ’ s computer to maintain information about client during and between browser sessions Data stored on user ’ s computer to maintain information about client during and between browser sessions Can be accessed through cookie property Can be accessed through cookie property Set expiration date through expires property Set expiration date through expires property Use escape function to convert non-alphanumeric characters to hexadecimal escape sequences Use escape function to convert non-alphanumeric characters to hexadecimal escape sequences unescape function converts hexadecimal escape sequences back to English characters unescape function converts hexadecimal escape sequences back to English characters

cookie.html 1 of 4

cookie.html 2 of 4

cookie.html 3 of 4

59 In-Class Exercise #2 Modify the program given in pp to store the user ’ s name for only 1 minute. Modify the program given in pp to store the user ’ s name for only 1 minute. Hints: Hints: Use the mehtod toGMTSring() or toUTCSring() provided by JavaScript ’ s Date object to obtain the date for setting the expires property in the cookie. Use the mehtod toGMTSring() or toUTCSring() provided by JavaScript ’ s Date object to obtain the date for setting the expires property in the cookie.

60 Modifying the InnerText of a Paragraph <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " " Modifying the InnerText of a Paragraph Modifying the InnerText of a Paragraph Click Refresh (or Reload) to run the script again Click Refresh (or Reload) to run the script again Put your homepage here. Put your homepage here. <!-- <!-- var msg; var msg; msg = window.prompt("Input the message:", "New Message"); msg = window.prompt("Input the message:", "New Message"); message.innerText = msg; message.innerText = msg; // --> // --> </html>

61 Final JavaScript Example Combines concepts discussed previously Combines concepts discussed previously

final.html 1 of 6

final.html 2 of 6

final.html 3 of 6

final.html 4 of 6

final.html 5 of 6

final.html 6 of 6

68

quiz2.html 1 of 3

quiz2.html 2 of 3

72

73 Web Resources g/js/tutorial/885.htm g/js/tutorial/885.htm