1. © Copyright 2008 STI - INNSBRUCK www.sti-innsbruck.at Web Engineering Web Technologies I Lecture IX – 2 nd December 2008 Federico M. Facca

2. Web Engineering (703512) Where are we? #DateTitleLecturer 17 th OctWeb Engineering Introduction and OverviewF. M. Facca 214 h OctCollection Requirements for Web ApplicationsF. M. Facca 321 st OctWeb Application ModelingF. M. Facca 428 th OctDeveloping Applications with WebMLF. M. Facca 54 th NovWeb Application Architectures IF. M. Facca 611 th NovWeb Application Architectures IIF. M. Facca 718 th NovTesting and Usability on the WebF. M. Facca 825 th NovMid Term ExamF. M. Facca 92 nd DecWeb Technologies IF. M. Facca 109 th DecWeb Technologies IIF. M. Facca 116 th JanWeb Technologies IIIF. M. Facca 1213 th JanWeb 2.0 Mash-upsF. Daniel (UNITN) 1320 th JanWeb Application Development Process/ Project Management for Web Applications F. M. Facca 1427 th JanFinal ExamF. M. Facca 2

3. Web Engineering (703512) Overview Introduction HTML & XHTML CSS JavaScript Wrap-up 3

4. Web Engineering (703512) INTRODUCTION What are the basic ingredients to start to build a Web site 4

5. Web Engineering (703512) Basic Ingredients Content structuring (and “basic” presentation…) –(X)HTML Business logic (client side) –JavaScript Presentation –CSS … with these 3 elements you can start building nice (content static) interfaces for you web applications 5

6. Web Engineering (703512) Standards or not Standards? XHTML and CSS are recommendation from W3C –XHTML 1.1 (2.0 is currently a draft) http://www.w3.org/MarkUp/ –CSS 2.1 (3.0 is under development) http://www.w3.org/Style/CSS/ JavaScript is “not” a standard –This due to the fact also that at the beginning there was some competition between Sun scripting language and Mircrosoft one –An attempt of standardization was made by European Computer Manufacturers Association (ECMA), never completed (last version dates back to 1999) –http://en.wikipedia.org/wiki/JavaScript 6

7. Web Engineering (703512) HYPERTEXT MARKUP LANGUAGE How to structure your content in a Web page 7

8. Web Engineering (703512) HTML & XHTML W3C –Set Standards Syntax Functionality HyperText Markup Language (v4.01 – 1999) –Type of More General Language (SGML) –Describes Function of Text Using Codes Extensible HTML (v2.0 – 2004) –Stricter Version of HTML –Integrate HTML with XML 8

9. Web Engineering (703512) HTML & XHTML HTML Advantages –Platform Portability –Speed (size of file) –Text File HTML Disadvantages –Rendering Differences –Extensions Proprietary Functionality Added by Browsers XHTML Advantages –Resolve Issues with Different HTML Versions 9

10. Web Engineering (703512) Syntax Elements (Tags) –Codes that Control Content Appearance –Opening/Closing Two-Sided – Content One-Sided – –Lowercase Deprecated –Obsolete Elements or Syntax –Future Support Not Guaranteed 10

11. Web Engineering (703512) Syntax Comments – White Space –Does Not Render Multiple Spaces –Tab, Enter do not Render –Use Non-breaking Space Attributes –Controls Behavior or Appearance of Element 11

12. Web Engineering (703512) … –Surround All Markup & Text –Required –Used To Begin & End Every HTML Document 12

13. Web Engineering (703512) … –Contains the Document's Header Information –Required –Important Information Document Title META Tags –Text Included Does Not Render 13

14. Web Engineering (703512) … –Contains All Content to be Rendered Attributes –leftmargin=number Sets The Left Margin for Page –topmargin=number Sets the Top Margin for the Page 14

15. Web Engineering (703512) Styles –style=“color: colorName | #rrggbb | rgb(#,#,#);” Specifies the Color of the Regular Text –style=“background-color: colorName | #rrggbb | rgb(#,#,#);” Specifies the Background Color –style=“background-image: url(filename.ext);” Points to Location of Image that is Used as Background Image is Tiled 15

16. Web Engineering (703512) Styles –style=“background-position: horizontal vertical;” Specifies the Positioning of the Background Image Can Specify Keywords or Percentages –style=“background-repeat: repeat | repeat-x | repeat-y | no- repeat;” Specifies the Tiling of the Background Image –style=“background-attachment: scroll | fixed;” Background Image Scrolls with Page or Acts as Watermark 16

17. Web Engineering (703512) … –Create a Heading –Numbered from h1 through h6 h1 is the Top Head Level While h6 is the Bottom –Should not be Used for Text Formatting –Convey Page & Content Organization –Should be Used in Descending Order Style –style=“text-align: left | center | right | justify;” Specifies the Alignment of the Heading Text 17

18. Web Engineering (703512) & … –Inserts Blank Line Before Tag Separates Paragraphs of Text –Causes Text To Break Wherever Tag is Placed 18

19. Web Engineering (703512) Lists … –Unordered List Renders a Bulleted List –Use Where Order or Rank is Unimportant Style –style=“list-style-type: disc | square | circle;” Changes Style of Bullet Before Item –style=“list-style-image: url(filename.ext);” Image Used as Bullet 19

20. Web Engineering (703512) Lists … –Ordered List Tags Render a Numbered List Style –style=“list-style-type: decimal | upper-roman | upper-alpha |...;” Changes Number / Letter Style Before Item –style=“list-style-position: inside | outside;” Changes Wrapped Item Placement 20

21. Web Engineering (703512) Lists … –Defines an Item in a List … –Definition List – … Defined Term – … Definition 21

22. Web Engineering (703512) Block Level Elements … –Content Indented on Left & Right … –Retains All White Space –Uses Fixed Width Typeface 22

23. Web Engineering (703512) Inline Elements … or … –Bold … or … –Italics … –Subscripted … –Superscripted 23

24. Web Engineering (703512) Inline Elements … –Used for Applying CSS Classes Nesting –Placing Sets of Tags Within Each Other … instead of … 24

25. Web Engineering (703512) –Inserts an Image Into a Document –Secondary to Content Attributes –alt=“text” Provides Alternative Text that Describes the Image IE Displays ALT Text When User Hovers on Image –Users Who Surf With Graphics Turned Off –Non-graphical Browsers »Alt Text is Displayed in Place of Image Required 25

26. Web Engineering (703512) Attributes –height=“pixels” Specifies the Image's Height –src=“URL” Specifies Location of Image to Place in Web Page Required –width=“pixels” Specifies the Image's Width 26

27. Web Engineering (703512) Style –style=“float: none | left | right;” Place Image on Left / Right & Wrap Text Around It –style=“clear: none | left | right;” Display Content After Margin is Clear of Floating Elements –style=“margin: top# right# bottom# left#;” –style=“border-width: #;” Rendered in Designated Link Color if Image is a Link 27

28. Web Engineering (703512) –Inserts Plain Line (Horizontal Rule) Across Page –Emphasize Divisions & Transitions In Content Style –style=“background-color: #RRGGBB | colorname;” –style=“color: #RRGGBB | colorname;” –style=“height: number;” –style=“width: number;” 28

29. Web Engineering (703512) Special Characters & –Ampersand © –Copyright · –Bullet ® –Registered ™ –Trademark 29

30. Web Engineering (703512) … –Used to Create Links to Other Resources –Named Anchor AKA Bookmark Used to Name Specific Locations within a Page id Attribute –Defines Destination 30

31. Web Engineering (703512) Attributes –accesskey=“text” Character Used as Keyboard Shortcut to Activate Link –coords=“X1, Y1, X2, Y2, etc.” Coordinates that Define Hot Spot Shape in Image Map –href=“URL” Specifies Location of Linked Resource –Typically Another HTML File –Can Also Specify Other Internet Resources »Files, E-mail, FTP Named Anchor or Bookmark URLs are Preceded By # 31

32. Web Engineering (703512) Attributes –name=“text” Marks Specific Place Within an HTML Document AKA Named Anchor or Bookmark –rel=“text” Indicates Relationship Between Documents –rel=“stylesheet” »Tells Browser that Linked Document is a Style Sheet –shape=“rect | circle | poly | default” Specifies Shape of Hot Spot in Image Map 32

33. Web Engineering (703512) Attributes –title=“text” Provides Supplemental Information Regarding a Link –Behaves Like a Tooltip –Should be Less Than 60 Characters 33

34. Web Engineering (703512) Example A link to a site. A link to paragraph 5 in same document. Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4 Paragraph 5 content. 34

35. Web Engineering (703512) Paths URL (Uniform Resource Locator) –Location of Document on Web www.sti-innsbruck.at Path –Location of Document on Server http://www.sti-innsbruck.at/about/team/details/federico-michele- facca/ 35

36. Web Engineering (703512) Paths Absolute –Exact Location on Server Begins with a / –/student/index.htm Relative –Location Relative to Current Document Current — Nothing –page.htm Child — Separated by / –images/background.gif Parent — Two Periods (..) –../page.htm 36

37. Web Engineering (703512) URL http://www.sti-innsbruck.at/about/team/details.html –Communication Protocol http:// –Domain www.sti-innsbruck.at –Path /about/team/ –Document details.html 37

38. Web Engineering (703512) Protocols Hypertext Transfer Protocol –Web Server –http:// File Transfer Protocol –File Server –ftp:// USENET –Newsgroup – Click Me 38

39. Web Engineering (703512) Protocols E-Mail –Mailto Send Mail –Can Automatically Include Subject Line “mailto:federico.facca@sti2.at?subject=text” –Other Options “mailto:federico.facca@sti2.at?cc=another@sti2.at &bcc=secret@cod.edu&subject=subscribe &body=Send me your newsletter right away” 39

40. Web Engineering (703512) … –Structure to Control Page Layout –Structure to Contain & Align Content Attributes –border=“#” Sets Thickness of Borders Displayed for Table Cells Attribute Set to 0 Will Make Borders “Invisible” 40

41. Web Engineering (703512) Attributes –cellpadding=“#” Specifies Amount of Space Between Cell & Content in Cell –cellspacing=“#” Specifies Amount of Space Between Cells –frame=“above | below | border | box | hsides | lhs | rhs | void | vsides” Specifies Where Borders of Tables & Cells Appear 41

42. Web Engineering (703512) Attributes –height=“# | %” Specifies Height of Table in Pixels or Percentage of Window –rules=“all | cols | groups | none | rows” Specifies Where Gridlines Appear in a Table –valign=“top | bottom | middle ” Specifies Vertical Alignment of Text in Cells –width=“# | %” Specifies Width of Table in Pixels or Percentage of Window 42

43. Web Engineering (703512) … –Defines Groups of Table Columns for Formatting –Only Valid Inside Attributes –align=“left | center | right | justify | char” Specifies Horizontal Alignment of Contents in Column Group –char=“character” Specifies Character to Use to Align Text On 43

44. Web Engineering (703512) Attributes –span=“#” Specifies Number of Columns Should Span –valign=“top | middle | bottom | baseline” Specifies Vertical Alignment of Contents in –width=“# | %” Specifies Width of Each Column in 0* - Column Width Should be Minimum Width 44

45. Web Engineering (703512) –Defines One or More Columns of Table for Formatting –Only Valid Inside or Attributes –align=“left | center | right | justify | char” Specifies Horizontal Alignment of Contents in Table Column –char=“character” Specifies Character to Use to Align Text On 45

46. Web Engineering (703512) Attributes –span=“#” Specifies Number of Columns the Column Should Span –valign=“top | middle | bottom | baseline” Specifies Vertical Alignment of Contents in Table Column –width=“# | %” Specifies Width of Column 0* - Column Width Should be Minimum Width 46

47. Web Engineering (703512) & … –Defines a Row in a Table … –Defines Table Data (a Cell) in a Row Table Data Cells Must Only Appear Within Table Rows Closing Tag Must Appear on Same Line as Content –Otherwise Gapping May Occur 47

48. Web Engineering (703512) Attributes –colspan=“#” Specifies How Many Columns the Cell Overlaps –rowspan=“#” Specifies How Many Rows the Cell Overlaps 48

49. Web Engineering (703512) & … –Specifies the Table Header for a Row Identical to Table Data Cells Except: –Cells Contents are Bolded –Cells Contents are Centered … –Attaches a Caption to a Table 49

50. Web Engineering (703512) Example 50

51. Web Engineering (703512) CASCADE STYLE SHEET How to make your Web page good looking 51

52. Web Engineering (703512) History of CSS Initial Proposal for CSS –Released in 1994 by Hakon Lie of CERN World Wide Web Consortium (W3C) –Founded in 1994 as a Web Standards Organization CSS1 (’96) — 50 Properties –www.zvon.org/xxl/css1Reference/Output/index.html CSS2 (’98) — 70 Additional Properties –www.zvon.org/xxl/css2Reference/Output/index.html 52

53. Web Engineering (703512) CSS Basics Style Rules –Determines Style Characteristics for an HTML Element –Selector Determines Element to Which Rule is Applied –Declaration Details the Exact Property Values –Property »Quality or Characteristic (e.g., Color) –Value »Specification of Property (e.g., Blue) Style Sheet –Set of Style Rules 53

54. Web Engineering (703512) CSS Basics Style Rule Syntax 54

55. Web Engineering (703512) Combining CSS & HTML Inline –Modify the Appearance of a Particular Element Style Attribute Embedded –Applied To An Entire Document Redefines All Occurrences of a Particular Element –Uses … in Linked –External File of Declarations Available to an Entire Site ASCII File with an Extension of.css 55

56. Web Engineering (703512) Inline Style Defines a Style for a Single Element –Generally Used to Override a Style Set at a Higher Level –Only Affects One Instance of an Element Syntax – 56

57. Web Engineering (703512) Embedded Style Always Contained in the –Generally Used to Override a Style Set at a Higher Level –Only Affects the Document in Which it Resides Syntax –selector {declarations} h1 {color:green; font-family:sans-serif;} b {color:yellow; background-color:green;} 57

58. Web Engineering (703512) Linked Style External Style Sheet –Always Contained in the –Text Document that Contains Style Rules –Allows Specification of Rules for Multiple Documents –Does Not Contain HTML Code Syntax 58

59. Web Engineering (703512) Cascading Determines Which Rules are Assigned to Elements Weight Assignment Based on Four Variables: –Use of the !Important Keyword –Origin of the Rule –Specificity of the Selector –Order of the Rule in the Style Sheet 59

60. Web Engineering (703512) Cascading Rule Weight with the !Important Keyword –Allows User to Override Author’s Style Setting For Particular Element –Improves Accessibility of Documents Gives Control to Users with Special Requirements Rule Weight by Origin –Cascading Order of Precedence: 1.Rules From Author’s Style Sheet 2.Rules From User’s Style Sheet 3.Rules From Browser’s Style Sheet 60

61. Web Engineering (703512) Cascading Rule Weight by Specificity –Rules with More Specific Selectors Take Precedence Over Rules with Less Specific Selectors Rule Weight by Order –Based on Order of Rule within Style Sheet Rules Listed Later Take Precedence Over Those Listed Earlier 61

62. Web Engineering (703512) Inheritance Parent –Element that Contains Another Element Child –Element within Another Element Inheritance –CSS Rules Inherit from Parent to Child Elements Based on Hierarchical Structure of Documents 62

63. Web Engineering (703512) Basic Selection Type Selectors –Selector Determines Element to which Declaration is Applied –Style Sheet Examples: h2 {color: red;} p {font-size: 10 pt;} 63

64. Web Engineering (703512) Basic Selection Grouping Selectors –Set the Same Declaration for Multiple Selectors Syntax: h1 {color: red;} h2 {color: red;} or h1, h2 {color: red;} 64

65. Web Engineering (703512) Basic Selection Combining Declarations –Multiple Declarations May be Stated for Same Selector Syntax: p {color: blue;} p {font-size: 12pt;} or p {color: blue; font-size: 12pt;} 65

66. Web Engineering (703512) Basic Selection Descendant Selector –AKA Contextual Selectors –Based on Hierarchical Structure of Elements in Document Syntax: –b i {color: #336699; background-color: #000000;} –Does Not Apply to i b 66

67. Web Engineering (703512) Advanced Selection id Attribute Selector –Applied to Only ONE Unique Element in a Document –Core Attribute that can be Applied to Any HTML Element Syntax: This is a unique paragraph that is the preface of the document

68. Web Engineering (703512) Advanced Selection class Attribute Selector –Enables Application of Rule to Selected Element(s) –Core Attribute that can be Applied to Any HTML Element Syntax: Text in red with a 30 pixel margin –May be Restricted to a Specific Element Type h1.quote {color: red; margin: 30px;} 68

69. Web Engineering (703512) Advanced Selection … –Block Level Element –Used to Contain Other HTML Elements –Displayed Discretely from the Rest of the Document Paragraph Breaks Added Before and After Contents … –Inline Element –Used to Contain Other HTML Elements –Used within Text Blocks 69

70. Web Engineering (703512) Advanced Selection Pseudo-Class Selectors –Select Elements Based on Characteristics Other Than Name –Link Pseudo-Classes :link –Allow Modification of Style Characteristics for Unvisited Links :link {color: green;} :visited –Allow Modification of Style Characteristics for Visited Links :visited {color: green;} 70

71. Web Engineering (703512) Advanced Selection Pseudo-Class Selectors –Dynamic Pseudo-Classes Apply Styles to an Element Based on User’s Actions :hover –Applies Style When User Mouses Over Element :active –Applies Style When User Activates Element :focus –Applies Style When Element is Accepting User Input 71

72. Web Engineering (703512) Advanced Selection Pseudo-Elements Selectors –Modify Aspects of Document Not Classified by Elements –:first-letter Apply Style Rules to the First Letter of Any Block-level Element –Initial Capitals –Drop Capitals 72

73. Web Engineering (703512) Advanced Selection Pseudo-Element Selectors –:first-letter

74. Web Engineering (703512) Advanced Selection Pseudo-Element Selectors –:first-line Apply Style Rules to the First Line of Any Block-level Element 74

75. Web Engineering (703512) Advanced Selection Child Selector –> Apply Style Rules to Child Elements of Any Parent div > blockquote {font-weight: bold;} 75

76. Web Engineering (703512) Advanced Selection First Child –:first-child Apply Style Rules to the First Child Element of a Parent div > p:first-child {font-weight: bold;} 76

77. Web Engineering (703512) Advanced Selection Adjacent Sibling –+ Apply Style Rules to –Elements that Share the Same Parent –Are Adjacent in the Code 77

78. Web Engineering (703512) Fonts Measurement Units –Absolute Units Specify a Fixed Value Cannot be Scaled to Client Display –Use Only When Measurements of User Medium are Known –Relative Units Enables Scalable Web Pages –Adapt to Different Display Types & Sizes –Recommended Method for Web Page Design 78

79. Web Engineering (703512) Fonts Measurement Units 79

80. Web Engineering (703512) Font Propertiess Styles –style=“font-family: fonts;” Allows Specification of Font Family Names Generic Font Families –Allows Greater Portability Across Platforms –Serif  Traditional Letter Form (e.g., Times) –Sans-serif  Block Letters, Have no Serifs (e.g., Arial) –Monospace  Fixed-width »Every Letter has Same Horizontal Width –Cursive  Resembles Handwriting (Limited Support) –Fantasy  Primarily Decorative (Limited Support) 80

81. Web Engineering (703512) Font Properties Styles –style=“font-family: fonts;” Specific Font Families –Allows Specification of Particular Font-family »Garamond, Impact –User Must Have Font Installed on Machine »If not, Browser Will Supply Default Example: 81

82. Web Engineering (703512) Font Properties Styles –style=“font-family: fonts;” Specifying Font Substitution –Allows Specification of Alternate Fonts »Uses Comma Separated List –Browser Scans List for First Installed Font »Otherwise, Browser Supplies Default –Generic Font-family Names can be Used Example: 82

83. Web Engineering (703512) Font Properties Styles –style=“font-size: size | keyword | %;” Absolute Keywords –xx-small –x-small –small –medium –large –x-large –xx-large

84. Web Engineering (703512) Font Properties Styles –style=“font-size: size | keyword | %;” Relative Keywords –Smaller | Larger –Example »Parent Element’s Size is Large »Current Element’s Size is Set to Larger »Result is that the Current Font Size will be X-large Percentage –Example »50%, 150%, 200%

85. Web Engineering (703512) Font Properties Styles –style=“font-style: normal | italic | oblique;” –style=“font-variant: normal | small-caps;” –style=“font-weight: normal | bold | bolder | lighter | #;” # = 100 – 900 in Increments of 100 400 = Normal 700 = Bold

86. Web Engineering (703512) Font Properties Font Shortcut –Allows Specification of Properties in a Single Statement –Font-size & Font-family Required Must be in Order –Line-height Must be Preceded by / Example: – 86

87. Web Engineering (703512) Text Properties Styles –style=“line-height: # | %;” AKA Leading –style=“letter-spacing: normal | #;” AKA Kerning –style=“word-spacing: normal | #;” AKA Tracking

88. Web Engineering (703512) Text Properties Styles –style=“text-indent: #;” Allows Specification Amount of Indentation of First Line

89. Web Engineering (703512) Text Properties Styles –style=“text-decoration: none | underline | overline | line- through | blink;” –style=“text-transform: capitalize | uppercase | lowercase | none;”

90. Web Engineering (703512) Text Properties Styles –style=“vertical-align: baseline | sub | super | top | text- top | middle | bottom | text-bottom | % | #;”

91. Web Engineering (703512) Visual Formatting Model Three Element Display Type Categories –Block (e.g., Paragraphs) Contain Inline Boxes that Contain Element Content –Inline Contain Content within the Block-level Elements Do not Form New Blocks of Content –List-item Creates Surrounding Container and List-item Inline Boxes –display: block | inline | list-item | none 91

92. Web Engineering (703512) Box Model Describes Rectangular Boxes that Contain Content –Each Block-level Element is Displayed as a Box –Each Content Box can have Margins, Borders, & Padding 92

93. Web Engineering (703512) Margin Properties margin: # | % –Shorthand Property Sets All Four Individual Margins

94. Web Engineering (703512) Margin Properties margin-left | margin-right | margin-top | margin- bottom: # | % –Negative margins can be set to achieve special effects

95. Web Engineering (703512) Padding Properties padding: # | % –Shorthand Property Sets All Four Individual Paddings Same Format as Margin padding-left | padding-right | padding-top | padding-bottom: # | %

96. Web Engineering (703512) Border Properties border: style width color –Shorthand Property Sets All Four Individual Borders Same Format as Margin

97. Web Engineering (703512) Border Properties border-style: keyword –Keywords none dotted dashed solid double groove ridge inset outset

98. Web Engineering (703512) Border Properties border-width: thin | medium | thick | # border-color: value

99. Web Engineering (703512) Special Box Properties width: # | % –Sets Horizontal Width of a Containing Box height: # | % –Sets Vertical Height of a Containing Box float: left | right | none –Sets Position of an Element to Left/Right of Parent Element clear: none | left | right | both –Controls Flow of Text Around Floated Elements

100. Web Engineering (703512) Special Box Properties float & clear

101. Web Engineering (703512) Background Properties background-color: colorname | #

102. Web Engineering (703512) Background Properties background-image: url(imagename.gif)

103. Web Engineering (703512) Background Properties background-repeat: repeat | repeat-x | repeat-y | no-repeat

104. Web Engineering (703512) Background Properties background-position: % | length | keyword

105. Web Engineering (703512) Background Properties background-attachment: scroll | fixed

106. Web Engineering (703512) List Properties list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk- ideographic | hiragana | katakana | hira-ganairoha | katakana-iroha | none –Default = disc –Allows Customization of the List Marker Syntax: ul {list-style-type: circle;} 106

107. Web Engineering (703512) List Properties list-style-type

108. Web Engineering (703512) List Properties list-style-image: url(filename.ext) –Allows Use of Image as List Marker Syntax: ul {list-style-image: url(paw.gif);} 108

109. Web Engineering (703512) List Properties list-style-position: inside | outside –Default = inside –Allows Placement of the List Marker Syntax: ul {list-style-position: outside;} 109

110. Web Engineering (703512) Positioning Properties position: type position size –type = static | relative | absolute | fixed –position = top | left | bottom | right –size = height | width 110

111. Web Engineering (703512) Positioning Properties div {position:absolute; left:130px; top:100px;}

112. Web Engineering (703512) Positioning Properties div {position:absolute; left:130px; top:100px; width: 100px;}

113. Web Engineering (703512) Positioning Properties visibility: visible | hidden –Specifies Whether an Element is Displayed or Hidden z-index: auto | # –Specifies an Element’s Stacking Level 113

114. Web Engineering (703512) Example 114

115. Web Engineering (703512) JAVASCPRIPT How to add some business logic to your Web page 115

116. Web Engineering (703512) What’s a Scripting Language? Language used to write programs that compute inputs to another language processor –One language embedded in another Embedded JavaScript computes HTML input to the browser Shell scripts compute commands executed by the shell Common characteristics of scripting languages –String processing – since commands often strings –Simple program structure, define things “on the fly” –Flexibility preferred over efficiency, safety Is lack of safety a good thing? (Example: JavaScript used for Web applications…)

117. Web Engineering (703512) JavaScript History Developed by Brendan Eich at Netscape –Scripting language for Navigator 2 Later standardized for browser compatibility –ECMAScript Edition 3 (aka JavaScript 1.5) Related to Java in name only –Name was part of a marketing deal Various implementations available –SpiderMonkey C implementation (from Mozilla) –Rhino Java implementation (also from Mozilla)

118. Web Engineering (703512) Common Uses of JavaScript Form validation Page embellishments and special effects Navigation systems Basic math calculations Dynamic content manipulation Sample applications –Dashboard widgets in Mac OS X, Google Maps, Philips universal remotes, Writely word processor, hundreds of others…

119. Web Engineering (703512) Example 1: Add Two Numbers … var num1, num2, sum num1 = prompt("Enter first number") num2 = prompt("Enter second number") sum = parseInt(num1) + parseInt(num2) alert("Sum = " + sum) …

120. Web Engineering (703512) Example 2: Browser Events function whichButton(event) { if (event.button==1) { alert("You clicked the left mouse button!") } else { alert("You clicked the right mouse button!") }} … … Mouse event causes page-defined function to be called

121. Web Engineering (703512) Example 3: Page Manipulation Some possibilities –createElement(elementName) –createTextNode(text) –appendChild(newChild) –removeChild(node) Example: add a new list item var list = document.getElementById('t1') var newitem = document.createElement('li') var newtext = document.createTextNode(text) list.appendChild(newitem) newitem.appendChild(newtext)

122. Web Engineering (703512) Language Basics JavaScript is case sensitive –onClick, ONCLICK, … are HTML, thus not case-sensitive Statements terminated by returns or semi-colons –x = x+1; same as x = x+1 “Blocks” of statements enclosed in { …} Variables –Define using the var statement –Define implicitly by its first use, which must be an assignment Implicit defn has global scope, even if occurs in nested scope!

123. Web Engineering (703512) JavaScript Primitive Datatypes Boolean: true and false Number: 64-bit floating point –Similar to Java double and Double –No integer type –Special values NaN (not a number) and Infinity String: sequence of zero or more Unicode chars –No separate character type (just strings of length 1) –Literal strings using ' or " characters (must match) Special objects: null and undefined

124. Web Engineering (703512) Objects An object is a collection of named properties Think of it as an associative array or hash table –Set of name:value pairs objBob = {name: “Bob", grade: 'A', level: 3}; –Play a role similar to lists in Lisp / Scheme New members can be added at any time objBob.fullname = 'Robert'; Can have methods Can refer to this

125. Web Engineering (703512) Functions Functions are objects with method called “( )” –A property of an object may be a function (=method) function max(x,y) { if (x>y) return x; else return y;}; max.description = “return the maximum of two arguments”; –Local declarations may appear in function body Call can supply any number of arguments –functionname.length : # of arguments in definition –functionname.arguments.length : # arguments in call –Basic types are passed by value, objects by reference “Anonymous” functions –(function (x,y) {return x+y}) (2,3);

126. Web Engineering (703512) Examples of Functions Curried functions function CurriedAdd(x) { return function(y){ return x+y} }; g = CurriedAdd(2); g(3) Variable number of arguments function sumAll() { var total=0; for (var i=0; i< sumAll.arguments.length; i++) total+=sumAll.arguments[i]; return(total); } sumAll(3,5,3,5,3,2,6)

127. Web Engineering (703512) Anonymous Functions Anonymous functions very useful for callbacks –setTimeout(function() { alert("done"); }, 10000) –Evaluation of alert("done") delayed until function call Simulate blocks by function definition and call var u = { a:1, b:2 } var v = { a:3, b:4 } (function (x,y) { var tempA = x.a; var tempB =x.b; // local variables x.a=y.a; x.b=y.b; y.a=tempA; y.b-tempB }) (u,v) // Works because objs are passed by ref

128. Web Engineering (703512) slide 128 Basic Object Features Use a function to construct an object –function car(make, model, year) { this.make = make; this.model = model; this.year = year; } Objects have prototypes, can be changed –var c = new car(“Ford”,”Taurus”,1988); –car.prototype.print = function () { return this.year + “ “ + this.make + “ “ + this.model;} –c.print();

129. Web Engineering (703512) JavaScript in Web Pages Embedded in HTML page as element –JavaScript written directly inside element alert("Hello World!") –Linked file as src attribute of the element Event handler attribute Pseudo-URL referenced by a link Click me

130. Web Engineering (703512) Language Features in This Class Stack memory management –Parameters, local variables in activation records Garbage collection Closures –Function together with environment (global variables) Exceptions Object features –Dynamic lookup, encapsulation, subtyping, inheritance Concurrency

131. Web Engineering (703512) JavaScript eval Evaluate string as code –The eval function evaluates a string of JavaScript code, in scope of the calling code var code = "var a = 1"; eval(code); // a is now '1‘ var obj = new Object(); obj.eval(code); // obj.a is now 1 slide 131

132. Web Engineering (703512) Unusual Features of JavaScript Eval, run-time type checking functions Support for pattern matching (reg. expressions) Can add methods to an object Can delete methods of an object –myobj.a = 5; myobj.b = 12; delete myobj.a; Iterate over methods of an object –for (variable in object) { statements }

133. Web Engineering (703512) Example 133

134. Web Engineering (703512) WRAP-UP That’s almost all for day… 134

135. Web Engineering (703512) Things to keep in mind (or summary) XHTML for content structure CSS for presentation JavaScript for client side logic 135

136. Web Engineering (703512) Bibliography Mandatory reading –XHTML Specification http://www.w3.org/TR/xhtml11/ –CSS Specification http://www.w3.org/TR/CSS2/ –JavaScript reference http://www.w3schools.com/jsref/default.asp 136

137. Web Engineering (703512) Validation Tools XHTML –http://validator.w3.org/http://validator.w3.org/ CSS –http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/ JavaScript Debugger (for Mozilla) –https://addons.mozilla.org/en-US/firefox/addon/216 137

138. Web Engineering (703512) Next Lecture 138 #DateTitleLecturer 17 th OctWeb Engineering Introduction and OverviewF. M. Facca 214 h OctCollection Requirements for Web ApplicationsF. M. Facca 321 st OctWeb Application ModelingF. M. Facca 428 th OctDeveloping Applications with WebMLF. M. Facca 54 th NovWeb Application Architectures IF. M. Facca 611 th NovWeb Application Architectures IIF. M. Facca 718 th NovTesting and Usability on the WebF. M. Facca 825 th NovMid Term ExamF. M. Facca 92 nd DecWeb Technologies IF. M. Facca 109 th DecWeb Technologies IIF. M. Facca 116 th JanWeb Technologies IIIF. M. Facca 1213 th JanWeb 2.0 Mash-upsF. Daniel (UNITN) 1320 th JanWeb Application Development Process/ Project Management for Web Applications F. M. Facca 1427 th JanFinal ExamF. M. Facca

139. Web Engineering (703512) Questions? 139