07 -web_technologies_i

07 -web_technologies_i
© Copyright 2008 STI - INNSBRUCK www.sti-innsbruck.at Web Engineering Web Technologies I Lecture IX – 2nd December 2008 Federico M. Facca
Web Engineering (703512) Where are we? # Date Title Lecturer 1 7th Oct Web Engineering Introduction and Overview F. M. Facca 2 14h Oct Collection Requirements for Web Applications F. M. Facca 3 21st Oct Web Application Modeling F. M. Facca 4 28th Oct Developing Applications with WebML F. M. Facca 5 4th Nov Web Application Architectures I F. M. Facca 6 11th Nov Web Application Architectures II F. M. Facca 7 18th Nov Testing and Usability on the Web F. M. Facca 8 25th Nov Mid Term Exam F. M. Facca 9 2nd Dec Web Technologies I F. M. Facca 10 9th Dec Web Technologies II F. M. Facca 11 6th Jan Web Technologies III F. M. Facca 12 13th Jan Web 2.0 Mash-ups F. Daniel (UNITN) 13 20th Jan Web Application Development Process/ Project Management for Web Applications F. M. Facca 14 27th Jan Final Exam F. M. Facca 2
Web Engineering (703512) Overview • Introduction • HTML & XHTML • CSS • JavaScript • Wrap-up 3
Web Engineering (703512) INTRODUCTION What are the basic ingredients to start to build a Web site 4
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
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
Web Engineering (703512) HYPERTEXT MARKUP LANGUAGE How to structure your content in a Web page 7
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
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
Web Engineering (703512) Syntax • Elements (Tags) – Codes that Control Content Appearance – Opening/Closing • Two-Sided – <tagName>Content</tagName> • One-Sided – <tagName /> – Lowercase • Deprecated – Obsolete Elements or Syntax – Future Support Not Guaranteed 10
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 • <tagName attrib#1=“Value” attrib#2=“Value” /> 11
Web Engineering (703512) <html> • <html>…</html> – Surround All Markup & Text – Required – Used To Begin & End Every HTML Document 12
Web Engineering (703512) <head> • <head>…</head> – Contains the Document's Header Information – Required – Important Information • Document Title • META Tags – Text Included Does Not Render 13
Web Engineering (703512) <body> • <body>…</body> – 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
Web Engineering (703512) <body> • 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
Web Engineering (703512) <body> • 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
Web Engineering (703512) <h#> • <h#>…</h#> – 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
Web Engineering (703512) <p> & <br> • <p>…</p> – Inserts Blank Line Before Tag • Separates Paragraphs of Text • <br /> – Causes Text To Break Wherever Tag is Placed 18
Web Engineering (703512) Lists • <ul>…</ul> – 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
Web Engineering (703512) Lists • <ol>…</ol> – 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
Web Engineering (703512) Lists • <li>…</li> – Defines an Item in a List • <dl>…</dl> – Definition List – <dt>…</dt> • Defined Term – <dd>…</dd> • Definition 21
Web Engineering (703512) Block Level Elements • <blockquote>…</blockquote> – Content Indented on Left & Right • <pre>…</pre> – Retains All White Space – Uses Fixed Width Typeface 22
Web Engineering (703512) Inline Elements • <strong>…</strong> or <b>…</b> – Bold • <em>…</em> or <i>…</i> – Italics • <sub>…</sub> – Subscripted • <sup>…</sup> – Superscripted 23
Web Engineering (703512) Inline Elements • <span>…</span> – Used for Applying CSS Classes • Nesting – Placing Sets of Tags Within Each Other • <b><i>…</i></b> instead of <b><i>…</b></i> 24
Web Engineering (703512) <img> • <img /> – 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
Web Engineering (703512) <img> • 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
Web Engineering (703512) <img> • 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
Web Engineering (703512) <hr> • <hr /> – 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
Web Engineering (703512) Special Characters • & – Ampersand • © – Copyright • · – Bullet • ® – Registered • ™ – Trademark 29
Web Engineering (703512) <a> • <a>…</a> – Used to Create Links to Other Resources – Named Anchor • AKA Bookmark • Used to Name Specific Locations within a Page • id Attribute – Defines Destination 30
Web Engineering (703512) <a> • 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
Web Engineering (703512) <a> • 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
Web Engineering (703512) <a> • Attributes – title=“text” • Provides Supplemental Information Regarding a Link – Behaves Like a Tooltip – Should be Less Than 60 Characters 33
Web Engineering (703512) <a> • Example <a href="http://www.mysite.com/">A link to a site.</a> < a href="#P5">A link to paragraph 5 in same document.</a> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <p id=“P5”>Paragraph 5 content.</p> 34
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
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
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
Web Engineering (703512) Protocols • Hypertext Transfer Protocol – Web Server – http:// • File Transfer Protocol – File Server – ftp:// • USENET – Newsgroup – <a href=“news:newsgroup.name”>Click Me</a> 38
Web Engineering (703512) Protocols • E-Mail – Mailto • <a href=“mailto:federico.facca@sti2.at”>Send Mail</a> – 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
Web Engineering (703512) <table> • <table>…</table> – 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
Web Engineering (703512) <table> • 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
Web Engineering (703512) <table> • 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
Web Engineering (703512) <colgroup> • <colgroup>…</colgroup> – Defines Groups of Table Columns for Formatting – Only Valid Inside <table> • 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
Web Engineering (703512) <colgroup> • Attributes – span=“#” • Specifies Number of Columns <colgroup> Should Span – valign=“top | middle | bottom | baseline” • Specifies Vertical Alignment of Contents in <colgroup> – width=“# | %” • Specifies Width of Each Column in <colgroup> • 0* - Column Width Should be Minimum Width 44
Web Engineering (703512) <col> • <col /> – Defines One or More Columns of Table for Formatting – Only Valid Inside <table> or <colgroup> • 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
Web Engineering (703512) <col> • 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
Web Engineering (703512) <tr> & <td> • <tr>…</tr> – Defines a Row in a Table • <td>…</td> – 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
Web Engineering (703512) <td> • Attributes – colspan=“#” • Specifies How Many Columns the Cell Overlaps – rowspan=“#” • Specifies How Many Rows the Cell Overlaps 48
Web Engineering (703512) <th> & <caption> • <th>…</th> – Specifies the Table Header for a Row • Identical to Table Data Cells Except: – Cells Contents are Bolded – Cells Contents are Centered • <caption>…</caption> – Attaches a Caption to a Table 49
Web Engineering (703512) Example 50
Web Engineering (703512) CASCADE STYLE SHEET How to make your Web page good looking 51
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
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
Web Engineering (703512) CSS Basics • Style Rule Syntax 54
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 <style>…</style> in <head> • Linked – External File of Declarations Available to an Entire Site • ASCII File with an Extension of .css 55
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 – <tag style=“property:value1; property:value2;”> <h1 style=“color:green; font-family:sans-serif;”> <b style=“color:yellow; background-color:green;”> 56
Web Engineering (703512) Embedded Style • Always Contained in the <head> – Generally Used to Override a Style Set at a Higher Level – Only Affects the Document in Which it Resides • Syntax – selector {declarations} <style type=“text/css”> h1 {color:green; font-family:sans-serif;} b {color:yellow; background-color:green;} </style> 57
Web Engineering (703512) Linked Style • External Style Sheet – Always Contained in the <head> – Text Document that Contains Style Rules – Allows Specification of Rules for Multiple Documents – Does Not Contain HTML Code • Syntax • <link rel=“stylesheet” href=“master.css” /> 58
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
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
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
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
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
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
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
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
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:
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: <p class=“quote”>Text in red with a 30 pixel margin</p> – May be Restricted to a Specific Element Type h1.quote {color: red; margin: 30px;} 68
Web Engineering (703512) Advanced Selection • <div>…</div> – Block Level Element – Used to Contain Other HTML Elements – Displayed Discretely from the Rest of the Document • Paragraph Breaks Added Before and After <div> Contents • <span>…</span> – Inline Element – Used to Contain Other HTML Elements – Used within Text Blocks 69
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
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
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
Web Engineering (703512) Fonts • Measurement Units 79
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
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: <p style=“font-family: arial;”> 81
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: <p style=“font-family: verdana,arial,helvetica,sans-serif;”> 82
Web Engineering (703512) Font Properties • Styles – style=“font-size: size | keyword | %;” • Absolute Keywords – xx-small – x-small – small – medium – large – x-large – xx-large
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%
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
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
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
Web Engineering (703512) Margin Properties • margin: # | % – Shorthand Property Sets All Four Individual Margins
Web Engineering (703512) Margin Properties • margin-left | margin-right | margin-top | margin- bottom: # | % – Negative margins can be set to achieve special effects
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: # | %
Web Engineering (703512) Border Properties • border: style width color – Shorthand Property Sets All Four Individual Borders • Same Format as Margin
Web Engineering (703512) Border Properties • border-style: keyword – Keywords • none • dotted • dashed • solid • double • groove • ridge • inset • outset
Web Engineering (703512) Border Properties • border-width: thin | medium | thick | # • border-color: value
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
Web Engineering (703512) Positioning Properties • position: type position size – type = static | relative | absolute | fixed – position = top | left | bottom | right – size = height | width 110
Web Engineering (703512) Positioning Properties • div {position:absolute; left:130px; top:100px;}
Web Engineering (703512) Positioning Properties • div {position:absolute; left:130px; top:100px; width: 100px;}
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
Web Engineering (703512) JAVASCPRIPT How to add some business logic to your Web page 115
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…)
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)
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…
Web Engineering (703512) Example 1: Add Two Numbers <html> … <p> … </p> <script> var num1, num2, sum num1 = prompt("Enter first number") num2 = prompt("Enter second number") sum = parseInt(num1) + parseInt(num2) alert("Sum = " + sum) </script> … </html>
Web Engineering (703512) Example 2: Browser Events <script type="text/JavaScript"> function whichButton(event) { if (event.button==1) { alert("You clicked the left mouse button!") } else { alert("You clicked the right mouse button!") }} </script> … <body onmousedown="whichButton(event)"> … </body> Mouse event causes page-defined function to be called
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)
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!
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
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
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);
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)
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
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();
Web Engineering (703512) JavaScript in Web Pages • Embedded in HTML page as <script> element – JavaScript written directly inside <script> element • <script> alert("Hello World!") </script> – Linked file as src attribute of the <script> element • <script type="text/JavaScript" src=“functions.js"></script> • Event handler attribute • <a href="http://www.yahoo.com " onmouseover="alert('hi');"> • Pseudo-URL referenced by a link • <a href=“JavaScript: alert(‘You clicked’);”>Click me</a>
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
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
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 }
Web Engineering (703512) WRAP-UP That’s almost all for day… 134
Web Engineering (703512) Things to keep in mind (or summary) • XHTML for content structure • CSS for presentation • JavaScript for client side logic 135
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
Web Engineering (703512) Validation Tools • XHTML – http://validator.w3.org/ • CSS – http://jigsaw.w3.org/css-validator/ • JavaScript Debugger (for Mozilla) – https://addons.mozilla.org/en-US/firefox/addon/216 137
Web Engineering (703512) Next Lecture 138 # Date Title Lecturer 1 7th Oct Web Engineering Introduction and Overview F. M. Facca 2 14h Oct Collection Requirements for Web Applications F. M. Facca 3 21st Oct Web Application Modeling F. M. Facca 4 28th Oct Developing Applications with WebML F. M. Facca 5 4th Nov Web Application Architectures I F. M. Facca 6 11th Nov Web Application Architectures II F. M. Facca 7 18th Nov Testing and Usability on the Web F. M. Facca 8 25th Nov Mid Term Exam F. M. Facca 9 2nd Dec Web Technologies I F. M. Facca 10 9th Dec Web Technologies II F. M. Facca 11 6th Jan Web Technologies III F. M. Facca 12 13th Jan Web 2.0 Mash-ups F. Daniel (UNITN) 13 20th Jan Web Application Development Process/ Project Management for Web Applications F. M. Facca 14 27th Jan Final Exam F. M. Facca
Web Engineering (703512) Questions? 139

Check these out next

07 -web_technologies_i

Recommandé

Contenu connexe

Présentations pour vous(20)

Similaire à 07 -web_technologies_i(20)

Plus de STI Innsbruck(19)

Dernier(20)

07 -web_technologies_i