1. 1 Chapter 1 Introduction to Computers and the Internet Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

2. 2 What is a Computer ? Computer is a device capable of – Performing computations – Making logical decisions – Works billions of times faster than human beings hardware devices Keyboard Screen (monitor) Disks Memory Processing Units

3. Fall 2008Yanjun Li CSRU2350 3 What is Software ? Computer Programs are called software – sets of instructions that process data – guide computer through orderly sets of actions specified by computer programmers programming languages – Programmers write instructions that comprise software in various programming languages

4. Fall 2008Yanjun Li CSRU2350 4 Types of Programming Languages Three general types of programming languages – Machine languages dependent machine dependent – Assembly languages dependent machine dependent – High-level languages portable most are portable

5. Fall 2008Yanjun Li CSRU2350 5 High-level Programming Languages Programming languages, such as C, C++, Visual Basic and Java, must be compiled before execution. Scripting languages, such as JavaScript, VBScript and Perl, is interpreted by another program at runtime.

6. Fall 2008Yanjun Li CSRU2350 6 The Internet A "network of networks" that consists of millions of smaller domestic, academic, business, and government networks. – Worldwide, publicly accessible Mixing computing and communications technologies. electronic mailonline chatfile transfer World Wide Web Carrying information and services, such as electronic mail, online chat, file transfer, and the interlinked Web pages and other documents of the World Wide Web.

7. Fall 2008Yanjun Li CSRU2350 7 The World Wide Web Introduced in 1990 by Tim Berners-Lee A system of interlinked, hypertext documents accessed via the Internet. – With a web browser, a user views web pages that may contain text, images, and other multimedia and navigates between them using hyperlinks.

8. Fall 2008Yanjun Li CSRU2350 8 Everybody Wants a Web Site Figure is from “Head First Servlets & JSP”

9. Fall 2008Yanjun Li CSRU2350 9 Client-Server Model A web browser (client) lets a user request a resource. A web server takes the client request and gives something back to the client. Clients and servers know HTML. Client Request Response

10. Fall 2008Yanjun Li CSRU2350 10 Scripting Languages Scripting languages, which can be embedded within HTML, commonly are used to add functionality to a Web page. Scripting languages came about largely because of the development of the Internet as a communications tool. JavaScript, ASP, JSP, PHP, Perl and Python are examples of scripting languages.InternetJavaScriptASP JSPPHPPerlPython

11. Fall 2008Yanjun Li CSRU2350 11 What is Web Browser ? A Web browser is a software that enables a user to display and interact with the Web’s rich multimedia content such as text, images, and other information. The Web could be the World Wide Web, a local area network, or a web page on your own machine. Microsoft Internet Explorer or Netscape Navigator – The appearance of a Web page may differ between browsers.

12. Fall 2008Yanjun Li CSRU2350 12 URL & Hyperlinks URL (Uniform/Universal Resource Locator) – Web page address – typing in Address field HTTP (HyperText Transfer Protocol) – Protocol for transferring data over the Internet HTTPS (Secure HyperText Transfer Protocol) – Protocol for transferring encrypted data over the Internet. Hyperlinks – Graphical or textual elements Click to link to another Web page Loads new page into browser window

13. Fall 2008Yanjun Li CSRU2350 13 Goal of This Course HTML – Focuses on writing HTML files. JavaScript – Teaches programming language and programming language principles. Client-side applications – Teaches how to create Internet-based and Web-based applications. CSRU3300 focuses on building a web server.

14. Fall 2008Yanjun Li CSRU2350 14 Examples An Interesting Map: – United States Map United States Map A Moving Text: – Dynamic Position Dynamic Position By Hansary Laforest.

15. Fall 2008Yanjun Li CSRU2350 15 Online Resources http://www.w3.org/ – The World Wide Web Consortium (W3C). http://www.w3schools.com/ – Full Web Building Tutorials - All Free http://wps.prenhall.com/esm_deitel_iw3htp_3 – The official web page for the text book.

16. Fall 2008Yanjun Li CSRU2350 16 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.

17. Spring 2009Yanjun Li CSRU2350 17 Chapter 4 Introduction to XHTML: Part 1 Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

18. Spring 2009Yanjun Li CSRU2350 18 What is XHTML? XHTML EXtensible HyperText Markup Language – XHTML 1.1 – A markup language that specifies the format of the text that is displayed in a Web browser. presentation structure – Separation of the presentation of a document from the structure of the document’s information – Based on HTML A legacy technology of the World Wide Web Consortium (W3C)

19. Spring 2009Yanjun Li CSRU2350 19 Editing XHTML XHTML documents – Source-code form – Text editor (e.g. Notepad, emacs, etc.) –.html or.htm file-name extension – Web server Stores XHTML documents – Web browser Requests XHTML documents

20. Spring 2009Yanjun Li CSRU2350 20 First XHTML Example (1) XHTML comments starts with Mandatory XHTML Elements: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> Title goes here

21. Spring 2009Yanjun Li CSRU2350 21 First XHTML Example (2) html element is the root element of a XHTML document – head element Head section: Title of the document and Style sheets and scripts – body element Body section: Page’s content the browser displays

22. Spring 2009Yanjun Li CSRU2350 22 First XHTML Example (3) Every element starts with Start tag and ends with End tag, with the displayed content in between them. Example:...,.... Start tag may have attributes (provide additional information about an element) – A name and value pair – Example:

23. Spring 2009Yanjun Li CSRU2350 23 XHTML Syntax Rules XHTML documents must have one root element XHTML elements – be properly nested – be closed – be in lowercase Attribute names – be in lower case Attribute values – be quoted

24. Spring 2009Yanjun Li CSRU2350 24 main.html (1 of 1)

25. Spring 2009Yanjun Li CSRU2350 25 Headers Six headers ( header elements): h 1 ~ h6

26. Spring 2009Yanjun Li CSRU2350 26

27. Spring 2009Yanjun Li CSRU2350 27 Linking Hyperlink – References other sources such as XHTML documents and images – Both text and images can act as hyperlinks – Created using the a (anchor) element: Attribute href specifies the location of a linked resource : href = “http://www.yahoo.com” Link to e-mail addresses: href = “mailto:deitel@deitel.com”

28. Spring 2009Yanjun Li CSRU2350 28 links.html (1 of 2)

29. Spring 2009Yanjun Li CSRU2350 29 contact.html (1 of 1)

30. Spring 2009Yanjun Li CSRU2350 30 Malicious Link Manipulation Phishing: a link in an email leads to the spoofed websitelink spoofed website – Make the anchor text for a link appear to be validanchor text for a link www.paypal.com – Misspelled URL BR

31. Spring 2009Yanjun Li CSRU2350 31 Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) – img element with attributes: src attribute : Specifies the location of the image file width and height attributes: Pixels (“picture elements”) alt attribute : the text will be displayed if the browser could not display the image.

32. Spring 2009Yanjun Li CSRU2350 32 Images (2) Empty elements – Terminated by character / inside the closing right angle bracket ( > ), or by explicitly including the end tag – Example: br element: Line break – tag: Bold characters – Bold

33. Spring 2009Yanjun Li CSRU2350 33 picture.html (1 of 1)

34. Spring 2009Yanjun Li CSRU2350 34

35. Spring 2009Yanjun Li CSRU2350 35 Image as Link Use an image as a link http://www.yahoo.com Image has no border <img src="home.png" width="125" height="26" alt="Go Home" border="0" />

36. Spring 2009Yanjun Li CSRU2350 36 nav.html (1 of 2)

37. Spring 2009Yanjun Li CSRU2350 37

38. Spring 2009Yanjun Li CSRU2350 38 Internal Linking Enables the user to jump between locations in the same document – First, create an internal hyperlink destination by setting attribute id of an element – Second, create an internal link to this element. – Example: Bugs : Go to Bugs

39. Spring 2009Yanjun Li CSRU2350 39 links.html (1 of 3)

40. Spring 2009Yanjun Li CSRU2350 40 links.html (3 of 3)

41. Spring 2009Yanjun Li CSRU2350 41 Creating and Using Image Maps (1) Designate certain areas of an image (called hotspots) as links – Element map Attribute id identifies the image map – Element img Attribute usemap refers the map by id. – Example:..

42. Spring 2009Yanjun Li CSRU2350 42 Creating and Using Image Maps (2) Element area defines hotspot – Attribute shape and coords Specify the hotspot’s shape and coordinates Rectangular ( shape = “rect” ) Polygon ( shape = “poly” ) Circle ( shape = “circle” ) – Attribute href Specifies the link’s target. – Attribute alt Provides alternative text for the link.

43. Spring 2009Yanjun Li CSRU2350 43 picture.html (1 of 3)

44. Spring 2009Yanjun Li CSRU2350 44 picture.html (2 of 3)

45. Spring 2009Yanjun Li CSRU2350 45

46. Spring 2009Yanjun Li CSRU2350 46 Unordered Lists Unordered list element ul – Creates a list in which each item begins with a bullet symbol (called a disc) – li (list item): Entry in an unordered list – Format:

47. Spring 2009Yanjun Li CSRU2350 47 links2.html (1 of 2)

48. Spring 2009Yanjun Li CSRU2350 48

49. Spring 2009Yanjun Li CSRU2350 49 Nested and Ordered Lists Represent hierarchical relationships Ordered lists ( ol ) – Creates a list in which each item begins with a number – Format

50. Spring 2009Yanjun Li CSRU2350 50 list.html (1 of 3)

51. Spring 2009Yanjun Li CSRU2350 51 list.html (2 of 3)

52. Spring 2009Yanjun Li CSRU2350 52 list.html (3 of 3)

53. Spring 2009Yanjun Li CSRU2350 53

54. Spring 2009Yanjun Li CSRU2350 54 Type of Ordered List Attribute type defines the type of list Available types: type=“A” type=“a” type=“I” type=“i” type=“1”

55. Spring 2009Yanjun Li CSRU2350 55 Type of Unordered List Attribute type defines the type of list Available types: type=“disc” type=“square” type=“circle”

56. Spring 2009Yanjun Li CSRU2350 56 Special Characters and More Line Breaks Character entity references: &code; Numeric character references (e.g. & ) – See Appendix A, (page 1429) – A complete list : A complete list http://www.w3.org/TR/xhtml-modularization/dtd_module_defs.html : Strike-out text : Superscript text : Subscript text : Horizontal rule (horizontal line)

57. Spring 2009Yanjun Li CSRU2350 57 contact2.html (1 of 2)

58. Spring 2009Yanjun Li CSRU2350 58 contact2.html (2 of 2)

59. Spring 2009Yanjun Li CSRU2350 59 W3C XHTML Validation Service (1) Validation service ( validator.w3.org ) – Checking a document’s syntax URL that specifies the location of the file Uploading a file to the site validator.w3.org/file-upload.html

60. Spring 2009Yanjun Li CSRU2350 60 W3C XHTML Validation Service (2)

61. Spring 2009Yanjun Li CSRU2350 61 Web Resources www.w3.org/TR/xhtml11 www.xhtml.org www.w3schools.com/xhtml/default.asp validator.w3.org hotwired.lycos.com/webmonkey/00/50/index2a.html wdvl.com/Authoring/Languages/XML/XHTML www.w3.org/TR/2001/REC-xhtml11-20010531

62. Spring 2009Yanjun Li CSRU2350 62 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.

63. Spring 2009Yanjun Li CSRU2350 63 Chapter 5 Introduction to XHTML: Part 2 Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

64. Spring 2009Yanjun Li CSRU2350 64 Objectives Tables – Present information Forms – Collect information from visitor Frames – Display multiple documents in the browser

65. Spring 2009Yanjun Li CSRU2350 65 Basic XHTML Tables (1) Organize data into rows and columns table element with useful attributes: – border : s pecifies the table’s border width in pixels. No border: border=“0” – width : specifies the width of table. In percentage or in pixels. – summary : d escribes the table’s contents – Example:

66. Spring 2009Yanjun Li CSRU2350 66 Basic XHTML Tables (2) caption element: like the title of the table – d escribes the table’s content and helps text- based browsers interpret table data Head section (header cell, defined with a thead element) – Contains header information such as column names Foot section (defined with a tfoot element)

67. Spring 2009Yanjun Li CSRU2350 67 Basic XHTML Tables (3) For head and foot sections : – tr element (defines an individual table row) – th element (defines the columns in the head/foot sections) Most browsers center and display text formatted by th elements in bold.

68. Spring 2009Yanjun Li CSRU2350 68 Basic XHTML Tables (4) Table body (defined with a tbody element) For body sections : – tr element (defines an individual table row) – Each row has a tr element – td element ( Data cells ) – Empty data cell:

69. Spring 2009Yanjun Li CSRU2350 69 table.html (1 of 3)

70. Spring 2009Yanjun Li CSRU2350 70 table.html (2 of 3)

71. Spring 2009Yanjun Li CSRU2350 71 table.html (3 of 3)

72. Spring 2009Yanjun Li CSRU2350 72 Tags inside a Table Write html tags inside a table cell: Example: This is a paragraph. This is another paragraph.

73. Spring 2009Yanjun Li CSRU2350 73 Cell Padding Attribute of table element: – cellpadding=“10” – create more white space between the cell content and its borders.

74. Spring 2009Yanjun Li CSRU2350 74 Cell Spacing Attribute of table element: – cellspacing=“10” – increase the distance between the cells.

75. Spring 2009Yanjun Li CSRU2350 75 Background of Table/Cell Attribute of table or cell element: – bgcolor=“red” Background color of a table. – background=“yellow.jpg” Background image of a table

76. Spring 2009Yanjun Li CSRU2350 76 Layered Tables Example: – Art Frame ……

77. Spring 2009Yanjun Li CSRU2350 77 Size of Table/Cell For table as well as td, height and width attributes can be added to set the size. Example: …

78. Spring 2009Yanjun Li CSRU2350 78 Absolute vs. Relative Size If the width is specified as an absolute size, if user’s monitors are 640x480 pixels, large table will not be shown fully on the screen. Relative Size:

79. Spring 2009Yanjun Li CSRU2350 79 Intermediate XHTML Tables and Formatting (1) Element colgroup : groups and formats columns Element col has the following attributes: – align : determines the alignment of text in the column – span : determines how many columns the col element formats – valign : aligns data vertically One of the four values: “top”, “middle”, “bottom”, “baseline”

80. Spring 2009Yanjun Li CSRU2350 80 Intermediate XHTML Tables and Formatting (2) Element tr, th, td have attributes – align – valign – rowspan and colspan specify the number of rows or columns occupied by a cell

81. Spring 2009Yanjun Li CSRU2350 81 table2.html (1 of 4)

82. Spring 2009Yanjun Li CSRU2350 82 table2.html (2 of 4)

83. Spring 2009Yanjun Li CSRU2350 83 table2.html (3 of 4)

84. Spring 2009Yanjun Li CSRU2350 84 Organize Webpage with Table Use table to set the layout of a webpage Set table attribute border =“0” Example: two-column page

85. Spring 2009Yanjun Li CSRU2350 85 Forms Data is collected on the Internet and processed by a program on a Web server. Form : collect data from a user and send to a Web server. client-side Form performs the client-side functionality. server-side The program on the Web server performs the server-side functionality.

86. Spring 2009Yanjun Li CSRU2350 86 Basic XHTML Forms (1) Forms can contain visual and non-visual components. – Visual components : graphical user interface components. – Non-visual components (hidden inputs): store useful data, such as how the program on the Web server processes the coming data.

87. Spring 2009Yanjun Li CSRU2350 87 Basic XHTML Forms (2) Element form – Attribute method Specifies how the form’s data is sent to Web server method = “post” – Appends form data to the browser request method = “get” – Appends form data directly to the end of the URL – Attribute action Specifies the URL of a script on the Web server Example: :

88. Spring 2009Yanjun Li CSRU2350 88 Basic XHTML Forms (3) Element input: specifies data to provide to the script that processes the form – Attribute type indicates the type of the input element. The default value is "text“, Other values are “hidden”, “submit”, “reset”. – Attribute name defines a unique name for the input element. – Attribute value defines the default value of the element. – Attribute size, maxlength defines the size of the input element and the maximum number of characters allowed in a text field. Element label : associate the label with a control.

89. Spring 2009Yanjun Li CSRU2350 89 form.html (1 of 3)

90. Spring 2009Yanjun Li CSRU2350 90 form.html (2 of 3)

91. Spring 2009Yanjun Li CSRU2350 91 form.html (3 of 3)

92. Spring 2009Yanjun Li CSRU2350 92 More Complex XHTML Forms (1) Element textarea inserts a multiline text box (text area) – Attribute rows s pecifies the number of rows – Attribute cols s pecifies the number columns Element input with password, size type – Inserts a password box with the specified size Element input with checkbox type – Enable users to select from a set of options – Checkboxes that belong to a group are assigned the same name. – Multiple checkboxes could be checked in one group. – checked =“checked” indicates that the input element should be checked when it first loads.

93. Spring 2009Yanjun Li CSRU2350 93 form2.html (1 of 4)

94. Spring 2009Yanjun Li CSRU2350 94 form2.html (2 of 4)

95. Spring 2009Yanjun Li CSRU2350 95 form2.html (3 of 4)

96. Spring 2009Yanjun Li CSRU2350 96 form2.html (4 of 4)

97. Spring 2009Yanjun Li CSRU2350 97

98. Spring 2009Yanjun Li CSRU2350 98 More Complex XHTML Forms (2) Element input with radio type – Enable users to select one from a set of options – The radio buttons in a group are assigned the same name. – Only one radio button could be selected in one group. – checked =“checked” indicates that the input element should be checked when it first loads.

99. Spring 2009Yanjun Li CSRU2350 99 More Complex XHTML Forms (3) Element select provides a drop-down list of items – Attribute disabled when set, it disables the drop-down list : disabled=“disabled” – Attribute multiple when set, it specifies that multiple items can be selected at a time : multiple=“multiple” – Attribute name defines a unique name for the drop-down list – Attribute size defines the number of visible items in the drop-down list Element option adds items to the drop-down list – Attribute selected s pecifies which item initially is displayed as the selected item

100. Spring 2009Yanjun Li CSRU2350 100 form3.html (1 of 6)

101. Spring 2009Yanjun Li CSRU2350 101 form3.html (2 of 6)

102. Spring 2009Yanjun Li CSRU2350 102 form3.html (3 of 6)

103. Spring 2009Yanjun Li CSRU2350 103 form3.html (4 of 6)

104. Spring 2009Yanjun Li CSRU2350 104 form3.html (5 of 6)

105. Spring 2009Yanjun Li CSRU2350 105

106. Spring 2009Yanjun Li CSRU2350 106 frameset Element (1) Allow browser display more than one document simultaneously – Element frameset Attribute cols defines the number and size of columns in a vertical frameset. Attribute rows defines the number and size of rows in a horizontal frameset. Values could be shown in pixels, %, *. Example: – There is no body element in the page.

107. Spring 2009Yanjun Li CSRU2350 107 frameset Element (2) Element frame – Specifies the documents that will be loaded – Attribute src Specifies URL of the page to display – Attribute name Defines a unique name for the frame – Attribute frameborder Defines the border of the frame, “0” or “1” – Example :

108. Spring 2009Yanjun Li CSRU2350 108 Jump to a specified section Attribute src could be a specified section in a file. The specified section has an id attribute set. Example: in mainFour.html :

109. Spring 2009Yanjun Li CSRU2350 109 frameset Element (3) In nav.html file, the links should like : <a href = "links.html" target = "main“ > links – The name of the destination frame is the target.

110. Spring 2009Yanjun Li CSRU2350 110 frameset Element (3) Element noframes – Displays text for browsers that do not handle frames. – The noframes element goes inside the frameset element. – Example: Your browser does not handle frames!

111. Spring 2009Yanjun Li CSRU2350 111 index.html (1 of 2)

112. Spring 2009Yanjun Li CSRU2350 112 index.html (2 of 2)

113. Spring 2009Yanjun Li CSRU2350 113 nav.html (1 of 2)

114. Spring 2009Yanjun Li CSRU2350 114 nav.html (2 of 2)

115. Spring 2009Yanjun Li CSRU2350 115 Nested frameset s frameset s within frameset s Example : Frame is not handled

116. Spring 2009Yanjun Li CSRU2350 116 index2.html (1 of 2)

117. Spring 2009Yanjun Li CSRU2350 117 index2.html (2 of 2)

118. Spring 2009Yanjun Li CSRU2350 118

119. Spring 2009Yanjun Li CSRU2350 119 Web Resources www.vbxml.com/xhtml/articles/xhtml_tables www.webreference.com/xml/reference/xhtml.html www.w3schools.com

120. Spring 2009Yanjun Li CSRU2350 120 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.

121. Fall 2007Yanjun Li CSRU2350121 Chapter 6 Cascading Style Sheets™ (CSS) Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

122. Fall 2007Yanjun Li CSRU2350 122 Cascading Style Sheets (CSS) Separation of structure from presentation Three ways to define the style of XHTML files – External Style Sheet – Embedded Style Sheet – Inline Style

123. Fall 2007Yanjun Li CSRU2350 123 Cascading Style Sheets (CSS) Separation of structure from presentation Inline Styles – Declare an individual element’s format – Attribute style inside a single XHTML element – CSS property Properties background-color, color Properties font-family, font-size Followed by a colon and a value For example: your paragraph

124. Fall 2007Yanjun Li CSRU2350 124 Inline Styles

125. Fall 2007Yanjun Li CSRU2350 125 Embedded Style Sheets Embed an entire CSS document in an XHTML document’s head element. Element style – Attribute type describes a file’s content using Multipurpose Internet Mail Extensions (MIME) type – Example:

126. Fall 2007Yanjun Li CSRU2350 126 CSS Rules For an element in XHTML, you can specify a displaying rule – The body of each rule is enclosed in { }. – Properties background-color, color – Properties font-family, font-size – Example : li, p {color: red; font-size: 12pt}

127. Fall 2007Yanjun Li CSRU2350 127 Style Class Defines styles that can be applied to any type of element. The declaration:.special {... } Attribute class of an XHTML element is used to apply a style class: – Example :

128. Fall 2007Yanjun Li CSRU2350 128 Linking External Style Sheets External style sheets – Can provide uniform look and feel to entire site – File extension : styples.css – CSS comments : /* ….*/ – Element link in the head section of the XHTML document : <link rel = “stylesheet” type=“text/css” href=“styles.css” />

129. Fall 2007Yanjun Li CSRU2350 129 Conflicting Styles (1) Cascading: all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1. Browser default 2. External style sheet 3. Embedded style sheet (inside the tag) 4. Inline style (inside an HTML element)

130. Fall 2007Yanjun Li CSRU2350 130 Conflicting Styles (2) Inheritance : – Child (nested) element inherits styles of parent element. – Descendant’s properties have greater specificity than ancestor’s properties. Child’s style > Parent’s style

131. Fall 2007Yanjun Li CSRU2350 131 Grouping Element XHTML Element span : a grouping/inline- level element. – Apply CSS rules to a block of text. XHTML Element div : a similar element, but display on its own line, with margins above and below (a block-level element). – Apply CSS rules to a block of text.

132. Fall 2007Yanjun Li CSRU2350 132 Length Measurement Relative-length Measurement is based on screen resolution. – px (pixels) : margin-left: 75px – em (height of an uppercase M) : font-size: 1.5em – ex (height of a lowercase x) Absolute-length Measurement – in (inches), cm (centimeters), mm (millimeters), pt (points, 1 pt = 1/72 in ), pc (picas, 1 pc = 12 pt ).

133. Fall 2007Yanjun Li CSRU2350 133 Font font-size sets the size of a font – xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, XXpt, xx% font-family : a prioritized list of font family names and/or generic family names for an element – arial, sans-serif font-weight sets the weight of a font – normal, bold, bolder, lighter, 100 ~ 900 font-style sets the style of the font – normal, italic, oblique

134. Fall 2007Yanjun Li CSRU2350 134 Backgrounds background-image specifies the image URL background-position places the image on the page background-repeat controls the tiling of the background image background-attachment – fixed – scroll

135. Fall 2007Yanjun Li CSRU2350 135 background.html (1 of 2)

136. Fall 2007Yanjun Li CSRU2350 136 background.html (2 of 2)

137. Fall 2007Yanjun Li CSRU2350 137

138. Fall 2007Yanjun Li CSRU2350 138 Element Dimensions CSS rules can specify the actual dimensions of each page element – Example: style=“width:20%; height:30%”

139. Fall 2007Yanjun Li CSRU2350 139 width.html (1 of 2)

140. Fall 2007Yanjun Li CSRU2350 140 width.html (2 of 2)

141. Fall 2007Yanjun Li CSRU2350 141 Positioning Elements Absolute positioning – Property position : “position : absolute;” – Properties top, left, right, bottom The distances from margins of its containing block-level element. – z-index attribute Layer overlapping elements properly, higher in front of lower value. Relative positioning – Elements are positioned relative to other elements – Property position : “position : relative; ”

142. Fall 2007Yanjun Li CSRU2350 142 positioning.html (1 of 1)

143. Fall 2007Yanjun Li CSRU2350 143

144. Fall 2007Yanjun Li CSRU2350 144 positioning2.html (1 of 2)

145. Fall 2007Yanjun Li CSRU2350 145 positioning2.html 2 of 2

146. Fall 2007Yanjun Li CSRU2350 146

147. Fall 2007Yanjun Li CSRU2350 147 6.12 Web Resources www.w3.org/TR/css3-roadmap www.ddj.com/webreview/style tech.irt.org/articles/css.htm

148. Fall 2007Yanjun Li CSRU2350 148 W3C CSS Validation Service Validates external CSS documents Ensures that style sheets are syntactically correct jigsaw.w3.org/css-validator/validator-upload.html

149. Fall 2007Yanjun Li CSRU2350 149 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.

150. Fall 2007Yanjun Li CSRU2350150 Chapter 7 JavaScript: Introduction to Scripting Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

151. Fall 2007Yanjun Li CSRU2350 151 Introduction JavaScript scripting language – Enhances functionality and appearance – Client-side scripting Makes pages more dynamic and interactive – Web browser contains a JavaScript interpreter. JavaScript is an Object Oriented Programming (OOP) language. – Attributes (data) and behaviors (methods) are associated with the object.

152. Fall 2007Yanjun Li CSRU2350 152 Simple JavaScript Program Inline scripting – Written in the or of a document – tag – JavaScript Single-line comment symbol: // – Example: <! - - script code here // - - >

153. Fall 2007Yanjun Li CSRU2350 153 Programming with JavaScript (1) document object: the XHTML document the browser is currently displaying A statement should end with a semicolon (;). case sensitive JavaScript is case sensitive. writeln method writes a line in the document – document.writeln(“ Welcome ”);

154. Fall 2007Yanjun Li CSRU2350 154 welcome.html (1 of 1)

155. Fall 2007Yanjun Li CSRU2350 155 welcome2.html (1 of 1)

156. Fall 2007Yanjun Li CSRU2350 156 welcome3.html 1 of 1

157. Fall 2007Yanjun Li CSRU2350 157 Programming with JavaScript (2) Escape character ( \ ) – Indicates “special” character is used in the string window object : a browser window. – A Window object is created automatically with every instance of a or tag alert method creates a Dialog box – window.alert(“welcome”);

158. Fall 2007Yanjun Li CSRU2350 158 welcome4.html 1 of 1

159. Fall 2007Yanjun Li CSRU2350 159 Escape sequences

160. Fall 2007Yanjun Li CSRU2350 160 Example JavaScript: document.writeln( “ ” ); Result

161. Fall 2007Yanjun Li CSRU2350 161 Variables Variables are used to store data. – Keyword : var A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. Name of a variable : a series of characters – letters, digits, underscores( _ ) and dollar signs ($) – no white space – not begin with a digit – not a keyword.

162. Fall 2007Yanjun Li CSRU2350 162 Use Variables Declare a variable: – var name; – var size; – var name, size ; Assign a value to a variable: – name = “Lisa”; – size = 20; Combine two steps: – var name = “Lisa”;

163. Fall 2007Yanjun Li CSRU2350 163 Dynamic Welcome Page A script can adapt the content based on input from the user or other variables prompt method of window object – window.prompt(“Please enter your name”, “Lisa”);

164. Fall 2007Yanjun Li CSRU2350 164 welcome5.html (1 of 2)

165. Fall 2007Yanjun Li CSRU2350 165

166. Fall 2007Yanjun Li CSRU2350 166 Fig. 7.7Prompt dialog displayed by the window object’s prompt method. This is the prompt to the user. This is the default value that appears when the dialog opens. This is the text field in which the user types the value. When the user clicks OK, the value typed by the user is returned to the program as a string.

167. Fall 2007Yanjun Li CSRU2350 167 Arithmetic JavaScript performs arithmetic calculations. Arithmetic operators: – Addition: numberOne + numberTwo – Subtraction: numberOne – 5 – Multiplication: numberOne * numberTwo – Division: numberTwo / 6 Rules of operator precedence – a * ( b – c )

168. Fall 2007Yanjun Li CSRU2350 168 Adding Integers Prompt user for two integers and calculate the sum parseInt method – Converts its string argument to an integer Assignment statement – sum = number1 + number2; If user types a non-integer value or clicks Cancel button, a runtime logic error will occur. – NaN (not a number): “The sum is NaN”

169. Fall 2007Yanjun Li CSRU2350 169 Addition.html (1 of 2)

170. Fall 2007Yanjun Li CSRU2350 170 Addition.html (2 of 2)

171. Fall 2007Yanjun Li CSRU2350 171

172. Fall 2007Yanjun Li CSRU2350 172 Display Floating Point Number toFixed() function Example: var number = 2; document.writeln(“ number.toFixed(2) ”; Result: 2.00

173. Fall 2007Yanjun Li CSRU2350 173 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.

174. Fall 2008Yanjun Li CSRU2350174 Chapter 8 JavaScript: Control Statements I Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

175. Fall 2008Yanjun Li CSRU2350 175 Control Structures Sequential execution – Statements execute in the order they are written Transfer of control – Next statement to execute may not be the next one in sequence add grade to total total = total + grade; add 1 to counter counter = counter + 1;

176. Fall 2008Yanjun Li CSRU2350 176 Boolean Expression Using Equality Operators – x = = y – x != y Using Relational Operators – x > y – x < y – x >= y – x <= y The value of the expression is either true or false

177. Fall 2008Yanjun Li CSRU2350 177 if Selection Statement (1) Indicate action only when the condition evaluates to true JavaScript Format: if if ( boolean expression ) statement; Example: if if (grade>= 60) document.writeln(“Passed”); grade >= 60 true false print “Passed”

178. Fall 2008Yanjun Li CSRU2350 178 if Selection Statement (2) Multiple actions are performed when the condition is true JavaScript Format: if if ( boolean expression ) { statementOne; statementTwo; : } Example: if if (grade>= 60) { document.writeln(" " + "Congratulations! "); document.writeln(" You Passed! "); }

179. Fall 2008Yanjun Li CSRU2350 179 if…else Selection Statement (1) Indicate different actions to be perform when condition is true or false grade >= 60 true print “Failed” false print “Passed”

180. Fall 2008Yanjun Li CSRU2350 180 if…else Selection Statement (2) JavaScript Format: if if ( boolean expression ) statement;else JavaScript Example : if ( grade >= 60 ) document.writeln(“Passed”); else document.writeln(“Failed”);

181. Fall 2008Yanjun Li CSRU2350 181 if…else Selection Statement (3) Multiple actions JavaScript Format : if if ( boolean expression ) { statementOne; statementTwo; : }else { statementThree; statementFour; : }

182. Fall 2008Yanjun Li CSRU2350 182 while Repetition Statement (1) Repetition structure (loop) – Repeat action while some condition remains true. product <= 1000 product = 2 * product true false

183. Fall 2008Yanjun Li CSRU2350 183 while Repetition Statement (2) JavaScript Format : initialization; while while ( boolean expression ) { statement; update; } JavaScript Example : var product=2; while ( product <= 1000 ) { document.writeln(product); product = 2 * product; }

184. Fall 2008Yanjun Li CSRU2350 184 Counter-Controlled Repetition Counter-controlled repetition – Counter Control the number of times a set of statements executes – Definite repetition

185. Fall 2008Yanjun Li CSRU2350 185 average.html (1 of 3)

186. Fall 2008Yanjun Li CSRU2350 186 average.html (2 of 3)

187. Fall 2008Yanjun Li CSRU2350 187

188. Fall 2008Yanjun Li CSRU2350 188 Sentinel-Controlled Repetition Indefinite repetition – Sentinel value

189. Fall 2008Yanjun Li CSRU2350 189 average2.html (1 of 3)

190. Fall 2008Yanjun Li CSRU2350 190 average2.html (2 of 3)

191. Fall 2008Yanjun Li CSRU2350 191 average2.html (3 of 3)

192. Fall 2008Yanjun Li CSRU2350 192

193. Fall 2008Yanjun Li CSRU2350 193 Note on Data Types Loosely typed – Automatically converts between values of different types

194. Fall 2008Yanjun Li CSRU2350 194 8.14 Web Resources www.javascriptmall.com developer.netscape.com/tech/javascript www.mozilla.org/js/language

195. Fall 2008Yanjun Li CSRU2350 195 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.

196. Fall 2007Yanjun Li CSRU2350196 Chapter 9 JavaScript: Control Statements II Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

197. Fall 2007Yanjun Li CSRU2350 197 for Repetition Statement for repetition statement – Handles all the details of counter-controlled repetition JavaScript Format for for (initiation; test; update) { statement; : }

198. Fall 2007Yanjun Li CSRU2350 198 for Repetition Statement (2) for (var counter =1; counter <=7; ++counter ) Initial value of control variable Increment of control variable Control variable name Final value of control variable for which the condition is true for keyword Loop-continuation condition

199. Fall 2007Yanjun Li CSRU2350 199 ForCounter.html (1 of 1)

200. Fall 2007Yanjun Li CSRU2350 200 for Repetition Statement counter <=7 document.writeln( "<p style=\"font-size: " + counter + "ex\">XHTML font size " + counter +"ex " ); true false var counter =1 ++counter Establish initial value of control variable. Determine if final value of control variable has been reached. Body of loop (this may be many statements) Increment the control variable.

201. Fall 2007Yanjun Li CSRU2350 201

202. Fall 2007Yanjun Li CSRU2350 202 Examples Using the for Statement Summation with for Compound interest calculation with for loop – Math object Method pow(x,y) - x y Method round(x) – round-up to integer

203. Fall 2007Yanjun Li CSRU2350 203 Sum.html (1 of 1)

204. Fall 2007Yanjun Li CSRU2350 204

205. Fall 2007Yanjun Li CSRU2350 205 Interest.html (1 of 2)

206. Fall 2007Yanjun Li CSRU2350 206

207. Fall 2007Yanjun Li CSRU2350 207 Logical Operators (1) More logical operators – Logical AND ( && ) – Logical OR ( || ) – Logical NOT ( ! )

208. Fall 2007Yanjun Li CSRU2350 208 Logical Operators (2)

209. Fall 2007Yanjun Li CSRU2350 209 Logical Operators (3)

210. Fall 2007Yanjun Li CSRU2350 210 LogicalOperators.html (1 of 2)

211. Fall 2007Yanjun Li CSRU2350 211 LogicalOperators.html (2 of 2)

212. Fall 2007Yanjun Li CSRU2350 212

213. Fall 2007Yanjun Li CSRU2350 213 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.

214. Fall 2007Yanjun Li CSRU2350214 Chapter 10 JavaScript: Functions Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

215. Fall 2007Yanjun Li CSRU2350 215 Program Modules in JavaScript (1) Software design – Break software up into modules Easier to maintain and debug – Divide and conquer Modules in JavaScript – Functions/Methods – Method belongs to an object – JavaScript includes many useful pre-defined methods

216. Fall 2007Yanjun Li CSRU2350 216 Functions/Methods (1) A function/method is a collection of statements that performs a specific task. Allow programs to be broken down into smaller pieces. This makes programs easier to read and maintain. You can reuse a function/method multiple times.

217. Fall 2007Yanjun Li CSRU2350 217 Functions/Methods (2) Methods you have used: – document.writeln(“... ”); – window.prompt(“please type a number”, “0”); – Global.parseInt(gradeString); parseInt(gradeString); – Global.parseFloat(inputString); parseFloat(inputString);

218. Fall 2007Yanjun Li CSRU2350 218 Define A Function Function Format: – Header : keyword function, function-name, parameter(s). return – Body : a collection of statements (declarations of local variables, statements, return statement) Example: function function sum ( x, y ) { var sum =0; //declaration of local variables sum = x + y; //statement return sum; //return statement }

219. Fall 2007Yanjun Li CSRU2350 219 User A Function Invoked with method name and parameters Example : var x = 4; var y = 5; var s = sum (4,5); s = sum(x,y);

220. Fall 2007Yanjun Li CSRU2350 220 Calling function square and passing it the value of x.

221. Fall 2007Yanjun Li CSRU2350 221 Variable y gets the value of variable x. The return statement passes the value of y * y back to the calling function.

222. Fall 2007Yanjun Li CSRU2350 222 A Display Function Define this Function: function MsgBox (textstring) { window.alert (textstring); } Call this Function : <input name=“submit” type=“submit” value=“Show me” Onclick=“MsgBox(form.text1.value)” />

223. Fall 2007Yanjun Li CSRU2350 223 A Change Color Function Define this Function function changecolor(code) { document.bgColor=code; } Call this Function <input type=“button” name=“button1” value=“RED” Onclick=“changecolor( ‘red’ )” />

224. Fall 2007Yanjun Li CSRU2350 224 Random-Number Generation Random-number generation introduces element of chance – Math.random var randomValue = Math.random(); – Floating point value between 0 and 1

225. Fall 2007Yanjun Li CSRU2350 225 Random-Number Generation Adjust range by scaling and shifting Math.floor ( returns integer) – Always round down Math.floor( Math.random() * 7 ) – range is [0,7); Math.floor( 1 + Math.random() * 7 ) – range is [1, 8);

226. Fall 2007Yanjun Li CSRU2350 226 Random Image Generator Randomly selecting an image – Images named with numbers – Generate random number in proper range ( 0 to total – 1 ) – Update src property

227. Fall 2007Yanjun Li CSRU2350 227 RandomPicture.html (1 of 1) Inserting a random number into the image’s src property with document.write and Math.random

228. Fall 2007Yanjun Li CSRU2350 228

229. Fall 2007Yanjun Li CSRU2350 229 Password Protection Define the Function function password( ) { //see the example code } Call this Function...

230. Fall 2007Yanjun Li CSRU2350 230 Work with Form Performing tasks without sending data over the Internet Confirm before submitting request Form validation

231. Fall 2007Yanjun Li CSRU2350 231 Confirm Box To confirm a user’s answer to a question. – OK button is pressed, true is returned – Cancel button is pressed, false is returned. Example: window.confirm(“Are your ready?”);

232. Fall 2007Yanjun Li CSRU2350 232 Animation It is possible to use JavaScript to create animated images. The trick is to let a JavaScript change between different images on different events. For onMouseOver event and onMouseOut event, run two JavaScript functions that will change between the images.

233. Fall 2007Yanjun Li CSRU2350 233 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.

234. Fall 2007Yanjun Li CSRU2350234 Chapter 11 JavaScript: Arrays Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

235. Fall 2007Yanjun Li CSRU2350 235 Arrays An array in JavaScript is an array object. An array object is a collection of related items, sharing the same name. 0 -4 10 6 4 1 c

236. Fall 2007Yanjun Li CSRU2350 236 Declaring and Allocating Arrays Use new operator. var c = new Array(6); Accessing a specific element by its index. – The index always starts from 0. var firstElement = c[0]; C[2] = 5; Property : Find out its length – c.length 0 0 10 0 3 1 c Index 0 ->

237. Fall 2007Yanjun Li CSRU2350 237 Examples Using Arrays Arrays grow dynamically – Allocate more space as items are added Must initialize array elements – Default value is undefined – for loops convenient – Referring to uninitialized elements or elements outside array bounds is an error

238. Fall 2007Yanjun Li CSRU2350 238 Array n1 has five elements.The for loop initializes the elements in n1 to their subscript numbers (0 to 4). Array n2 is an empty array.

239. Fall 2007Yanjun Li CSRU2350 239 The for loop adds five elements to Array n2 and initialize each element to its subscript number (0 to 4). Each function displays the contents of its respective Array in an XHTML table. The first time function ouputArray is called, variable header gets the value of “Array n1 contains” and variable theArray gets the value of n1. The second time function ouputArray is called, variable header gets the value of “Array n2 contains” and variable theArray gets the value of n2.

240. Fall 2007Yanjun Li CSRU2350 240

241. Fall 2007Yanjun Li CSRU2350 241

242. Fall 2007Yanjun Li CSRU2350 242 Examples Using Arrays Possible to declare and initialize in one step – Specify list of values Initializer list var n = [ 10, 20, 30, 40, 50 ]; var n = new Array( 10, 20, 30, 40, 50 ); – Also possible to only initialize some values Leave uninitialized elements blank Uninitialized elements default to “undefined” var n = [ 10, 20,, 40, 50 ];

243. Fall 2007Yanjun Li CSRU2350 243 Array integers1 is initialized using an initializer list. Two values are not supplied for integers2, which will be displayed as undefined.

244. Fall 2007Yanjun Li CSRU2350 244

245. Fall 2007Yanjun Li CSRU2350 245

246. Fall 2007Yanjun Li CSRU2350 246 Random Image Generator Using Arrays Cleaner approach than previous version – Specify any file name rather than integers 1-7 – Result of Math.random call is index into array of image file names

247. Fall 2007Yanjun Li CSRU2350 247

248. Fall 2007Yanjun Li CSRU2350 248

249. Fall 2007Yanjun Li CSRU2350 249

250. Fall 2007Yanjun Li CSRU2350 250 Passing Arrays to Functions Name of array is argument (parameter) – Not necessary to also pass size of array Arrays know their size – Passed by reference Individual elements are passed by value if numbers or booleans Method: ArrayName.join(“ ”) – Creates string containing all array elements – Specify separator: white space or other string

251. Fall 2007Yanjun Li CSRU2350 251 Using Array Radio buttons – Represented as an array Name of radio buttons is name of array One element per button – checked property is true when selected

252. Fall 2007Yanjun Li CSRU2350252 Quiz.html (1 of 2) Determining the value of property checked.

253. Fall 2007Yanjun Li CSRU2350253 Quiz.html (2 of 2) Call the checkAnswers function when the form is submitted.

254. Fall 2007Yanjun Li CSRU2350 254

255. Fall 2007Yanjun Li CSRU2350 255 Online Conversion Use select element of Form Set answer input field “ readonly ” Do the calculation based on the user’s selection

256. Fall 2007Yanjun Li CSRU2350 256 Form Validation Function JavaScript can be used to validate input data in HTML forms before sending off the content to a server. Form data that typically are checked by a JavaScript could be: – has the user left required fields empty? – has the user entered a valid e-mail address? – has the user entered a valid number?

257. Fall 2007Yanjun Li CSRU2350 257 Empty Field Validation function validate_required( field, alerttxt ) { if (field.value==null || value=="") { window.alert(alerttxt); return false; } else return true; }

258. Fall 2007Yanjun Li CSRU2350 258 indexOf( ) This method returns the index of the given char and returns -1 if the string value to search for never occurs Example: var string =“abc defg”; var index = string.indexOf(‘a’);

259. Fall 2007Yanjun Li CSRU2350 259 charAt() This method returns the character at the given index. Example: var string = “1234”; var thisChar = string.charAt(1);

260. Fall 2007Yanjun Li CSRU2350 260 lastIndexOf() This method returns the last index of the given char and returns -1 if the string value to search for never occurs. Example: var string =“aaabbbccc”; var index = string.lastIndexOf(b);

261. Fall 2007Yanjun Li CSRU2350 261 Email Validation var apos = field.value.indexOf("@"); Var dotpos = field.value.lastIndexOf("."); var lastpos = field.value.length-1; //if there is no char before @ or // there is no char between @ and the last dot or // there are more than 4 characters after the last dot or // there are less than 2 characters after the last dot if ( apos < 1 || dotpos-apos < 2 || lastpos-dotpos>4 || lastpos-dotpos<2) { window.alert(alerttxt); return false; }

262. Fall 2007Yanjun Li CSRU2350 262 A Valid Numeric Value Check each character of the user’s input If the character is not a valid digit or the decimal point, then the input is not numeric value. Use for statement to implement

263. Fall 2007Yanjun Li CSRU2350 263 isNumeric() var sText = field.value; //user's input var ValidChars = "0123456789."; var IsNumber=true; //default value is true var once = 0; for(i = 0; i<sText.length && IsNumber==true; i++) { var Char = sText.charAt(i); var index = ValidChars.indexOf(Char); if (index == -1) //char is not a valid IsNumber = false; else if (index == 10 && once ==0) //the first decimal point once = 1; else if (index == 10 && once == 1) //the second decimal point IsNumber = false; }

264. Fall 2007Yanjun Li CSRU2350 264 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.

265. Fall 2007Yanjun Li CSRU2350265 Chapter 12 JavaScript: Objects Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

266. Fall 2007Yanjun Li CSRU2350 266 Thinking About Objects Objects : Abstraction of a group of related objects. – Attributes (Properties) – Methods (Behaviors) – Encapsulate data and methods – Property of information hiding – Details hidden within the objects themselves

267. Fall 2007Yanjun Li CSRU2350 267 String Object JavaScript’s string and character-processing capabilities Appropriate for processing names, addresses, credit card information, etc.

268. Fall 2007Yanjun Li CSRU2350 268 Fundamentals of Characters & Strings Characters – Fundamental building blocks of JavaScript programs String – Series of characters treated as a single unit

269. Fall 2007Yanjun Li CSRU2350 269 Property of the String Object The length property of the String object – Find the length of a string – Example: var text = “12345”; document.write(text.length); – Result: 5

270. Fall 2007Yanjun Li CSRU2350 270 Methods of the String Object charAt(index) – Example : var s = “abcd”; var s1 = s.charAt(0); – Result: s1 is “a”.

271. Fall 2007Yanjun Li CSRU2350 271 Methods of the String Object concat(string): Concatenating – Example: var s1 = “abcd”; var s2 = “ABCD”; var s3 = s1.concat(s2); – Result: s3 is “abcdABCD” – Another way to do this: var s3 = s1 + s2;

272. Fall 2007Yanjun Li CSRU2350 272 Methods of the String Object toLowerCase( ) & toUpperCase( ) – Example: var s1 = “AbCdEfG”; var s2 = s1.toLowerCase(); var s3 = s1.toUpperCase(); – Results: s2 is “abcdefg”; s3 is “ABCDEFG”;

273. Fall 2007Yanjun Li CSRU2350 273 Searching Methods indexOf(substring, index) – Search for the first occurrence for a specified substring in a string from position index, return the starting index of the substring ; -1 if substring is not found. – Example: var s1=“abcdeabcd”; var index1 = s1.indexOf(“ab”,2); var index2 = s1.indexOf(“ab”); – Result: index1 is 5 and index2 is 0.

274. Fall 2007Yanjun Li CSRU2350 274 Searching Methods lastIndexOf(substring, index) – Search for the last occurrence for a specified substring in a string from position index toward the beginning of the string, return the starting index of the substring ; -1 if substring is not found. – Example: var s1=“abcdeabcd”; var index1 = s1.lastIndexOf(“ab”,2); var index2 = s1.lastIndexOf(“ab”); – Result: index1 is 0 and index2 is 5.

275. Fall 2007Yanjun Li CSRU2350 275 Splitting Strings & Obtaining Substrings Tokenization – The process of breaking a string into tokens Tokens – Individual words – Separated by delimiters

276. Fall 2007Yanjun Li CSRU2350 276 Splitting Strings split(delimiter) – Break the string into individual token. – Example: var s1 = “a*bc*cd*ed”; var s2 =“This is a sentence”; var arrayOne = s1.split(“*”); var arrayTwo = s2.split(“ ”);

277. Fall 2007Yanjun Li CSRU2350 277 Obtaining Substrings substring(startIndex, endIndex) – Returns a string containing the characters from startIndex up to but not including endIndex in the source string. – Example: var s1 = “abcdefgh”; var s2 = s1.substring(1,4); – Result: s2 is “bcd”;

278. Fall 2007Yanjun Li CSRU2350 278 Obtaining Substrings substr(startIndex, length) – Returns a string containing length characters starting from startIndex in the source string. – Example: var s1 = “abcdefg”; var s2 = s1.substr(0,4); var s3 = s1.substr(0); – Result: s2 is “abcd” and s3 is “abcdefg”

279. Fall 2007Yanjun Li CSRU2350 279 Date Object Provides methods for date and time manipulations Create a new Date object – Initialize the local computer’s Date object with the current date and time. var current = new Date(); – Set a specified date with arguments year, month, date, hours, minutes, seconds, and milliseconds. var thisDate = new Date(2007, 9, 30, 12, 50, 0,0);

280. Fall 2007Yanjun Li CSRU2350 280 Methods of the Date Object toString() – Converts a Date object to a string and returns the result. Mon Sep 19 15:47:22 EDT 2007 toLocaleString() – Converts a Date object, according to local time, to a string and returns the result. Monday, September 19, 2007 15:47:22 PM toUTCString() – Converts a Date object, according to Universal Coordinated Time (UTC), to a string and returns the result. Mon, 19 Oct 2007 15:47:22 UTC

281. Fall 2007Yanjun Li CSRU2350 281 Getters of the Date Object getDate() getDay() getMonth() getFullYear() getHours() getMinutes() getSeconds()

282. Fall 2007Yanjun Li CSRU2350 282 Setters of the Date Object setDate() setMonth() setFullYear() setHours() setMinutes() setSeconds()

283. Fall 2007Yanjun Li CSRU2350 283 document Object Manipulate document that is currently visible in the browser window document.write(string) document.writeln(string) document.lastModified – Last time the document was modified.

284. Fall 2007Yanjun Li CSRU2350 284 window Object The Window object is the top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a or tag. Provides methods for manipulating browser window.

285. Fall 2007Yanjun Li CSRU2350 285 Methods of the Window Object window.open(url) – Opens a new browser window – Returns a new window object window.focus() – Set focus to the current window

286. Fall 2007Yanjun Li CSRU2350 286 Methods of the Window Object window.close() – Closes the current window window.alert( ) – Displays an alert box with a message and an OK button

287. Fall 2007Yanjun Li CSRU2350 287 Properties of the Window Object The closed property returns whether or not a window has been closed if ( childWindow.closed ) The opener property returns a reference to the window that created the window childWindow.opener The document property returns the document object representing the document currently inside the window. childWindow.opener.document.writeln(“I am the parent”);

288. Fall 2007Yanjun Li CSRU2350 288 Location Object The Location object is automatically created by the JavaScript runtime engine and contains information about the current URL. The Location object is part of the Window object and is accessed through the window.location property. The URL of this window is returned.

289. Fall 2007Yanjun Li CSRU2350 289 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.

290. Fall 2007Yanjun Li CSRU2350290 Chapter 13 Dynamic HTML:Object Model Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg

291. Fall 2007Yanjun Li CSRU2350 291 Introduction Dynamic HTML is the art of making HTML pages dynamic! Dynamic HTML Object Model – Allows Web authors to control the presentation of their pages – Gives them access to all the elements on their pages – The contents of these elements can be modified or deleted, and new elements can be created. Web page – Elements, forms, frames, tables – Represented in an object hierarchy

292. Fall 2007Yanjun Li CSRU2350 292 Scripting The Dynamic Object Model is platform and language independent. It can be used by any programming language like Java, JavaScript, and VBScript. Scripting – Retrieve and modify properties and attributes

293. Fall 2007Yanjun Li CSRU2350 293 Object Referencing The simplest way to reference an element is by using the element’s id attribute. The element is represented as an object – XHTML attributes become properties that can be manipulated by scripting Example: p element has a property – innerText. The value of innerText property is here.

294. Fall 2007Yanjun Li CSRU2350 294

295. Fall 2007Yanjun Li CSRU2350 295

296. Fall 2007Yanjun Li CSRU2350 296 innerHTML Property The innerHTML property is similar to the innerText property, but it can include XHTML formatting. thisElement.innerHTML = “ change you!” text

297. Fall 2007Yanjun Li CSRU2350 297 Change Image Source Example: imageId.src=“newSource”;

298. Fall 2007Yanjun Li CSRU2350 298 Dynamic Styles Element’s style can be changed dynamically CSS property : background-color -> style.backgroundColor

299. Fall 2007Yanjun Li CSRU2350 299

300. Fall 2007Yanjun Li CSRU2350 300

301. Fall 2007Yanjun Li CSRU2350 301 Dynamic Styles Dynamic HTML Object Model also allows you to change the class attribute

302. Fall 2007Yanjun Li CSRU2350 302

303. Fall 2007Yanjun Li CSRU2350 303

304. Fall 2007Yanjun Li CSRU2350 304

305. Fall 2007Yanjun Li CSRU2350 305 Dynamic Positioning XHTML elements can be positioned with scripting – Declare an element’s CSS position property to be either absolute or relative – Move the element by manipulating any of the top, left, right or bottom CSS properties window.setInterval (“func()”, 100) : Every 100 milliseconds, run this function func() once.

306. Fall 2007Yanjun Li CSRU2350 306 navigator Object Netscape, Mozilla, Microsoft’s Internet Explorer – Others as well Contains information about the Web browser Allows Web authors to determine what browser the user is using navigator.appName : Microsoft Internet Explorer, Netscape navigator.appVersion : a floating point number, 4.0

307. Fall 2007Yanjun Li CSRU2350 307 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc.