07 - Web Technologies I

Web Engineering g g Web Technologies I
Lecture IX 2nd December 2008 Federico M. Facca
Copyright 2008
STI - INNSBRUCK www.sti-innsbruck.at
Where are we?

# 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Date 7th Oct 14h Oct 21st Oct 28th Oct 4th Nov 11th Nov 18th Nov 25th Nov 2nd Dec 9th Dec 6th Jan 13th Jan 20th Jan 27th Jan Title Web Engineering Introduction and Overview Collection Requirements for Web Applications Web Application Modeling Developing Applications with WebML Web Application Architectures I Web Application Architectures II Testing and Usability on the Web Mid Term Exam Web Technologies I Web Technologies II Web Technologies III Web 2.0 Mash-ups Web Application Development Process/ Project Management for Web Applications Final Exam Lecturer F. M. Facca F. M F M. Facca F. M. Facca F. M. Facca F. M. Facca F. M. Facca F. M. Facca F. M. Facca F. M. Facca F. M. Facca F. M. Facca F. Daniel (UNITN) F. M. Facca F. M. Facca
2
Web Engineering (703512)
Overview
Introduction HTML & XHTML CSS JavaScript J S i t Wrap-up
What are the basic ingredients to start to build a Web site
INTRODUCTION
Web Engineering (703512) 4
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
Standards or not Standards?
XHTML and CSS are recommendation from W3C

XHTML 1.1 (2.0 is currently a draft) 1 1 (2 0 i tl d ft)
http://www.w3.org/MarkUp/
CSS 2.1 (3.0 is under development)

http://www w3 org/Style/CSS/ 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 p (ECMA), never ), Computer Manufacturers Association ( completed (last version dates back to 1999) http://en.wikipedia.org/wiki/JavaScript
How to structure your content in a Web page
HYPERTEXT MARKUP LANGUAGE

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
HTML & XHTML
HTML Advantages
Platform Portability Speed (size of file) Text File
HTML Disadvantages
Rendering Differences E t Extensions i
Proprietary Functionality Added by Browsers
XHTML Advantages
Resolve Issues with Different HTML Versions
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
Syntax
Comments


White Space p
Does Not Render Multiple Spaces Tab, Enter do not Render Use Non breaking Space Non-breaking

Attributes
Controls Behavior or Appearance of Element
<tagName attrib#1=Value attrib#2=Value />
11
<html>
<html></html>
Surround All Markup & Text Required Used To Begin & End Every HTML Document g y
12
<head>
<head></head>
Contains the Document's Header Information Required Important Information p
Document Title META Tags
Text Included Does Not Render
13
<body>
<body></body>
Contains All Content to be Rendered
Attributes
leftmargin=number leftmargin number
Sets The Left Margin for Page
topmargin=number
Sets the Top Margin for the Page
14
<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
<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 | norepeat;

Specifies the Tiling of the Background Image
style=background-attachment: scroll | fi d l b k d h ll fixed;

Background Image Scrolls with Page or Acts as Watermark
16
<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
<p> & <br>
<p></p>
Inserts Blank Line Before Tag
Separates Paragraphs of Text
<br />
Causes Text To Break Wherever Tag is Placed
18
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); style= list-style-image: url(filename ext);

Image Used as Bullet
19
Lists
<ol></ol>
Ordered List Tags Render a Numbered List
Style
style=list-style-type: decimal | upper-roman | upper-alpha | style list style type: upper roman upper alpha . . .;
Changes Number / Letter Style Before Item
style=list-style-position: inside | outside; style list style position: outside;

Changes Wrapped Item Placement
20
Lists
<li></li>
Defines an Item in a List
<dl></dl>
Definition List <dt></dt>
Defined Term
<dd> </dd> <dd></dd>

Definition
21
Block Level Elements
<blockquote></blockquote>
Content Indented on Left & Right
<pre></pre>
Retains All White Space Uses Fixed Width Typeface
22
Inline Elements
<strong></strong> or <b></b>
Bold
<em></em> or <i></i>
Italics
<sub></sub>
Subscripted
<sup></sup>
Superscripted
23
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
<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
<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
<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: #; y

Rendered in Designated Link Color if Image is a Link
27
<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; t l h i ht b style=width: number;
28
Special Characters
&
Ampersand
©
Copyright
·
Bullet
®
Registered
™
Trademark
29
<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
<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
<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
<a>
Attributes
title=text
Provides Supplemental Information Regarding a Link
Behaves Like a Tooltip Should be Less Than 60 Characters
33
<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>
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-michelefacca/
35
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
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
Protocols
Hypertext Transfer Protocol

Web Server http://
File Transfer Protocol

File Server ftp://
USENET
Newsgroup <a href=news:newsgroup.name>Click Me</a> g p
38
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 &b t@ d d & bj t b ib &body=Send me your newsletter right away
39
<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 Invisible
40
<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
<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
<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 char= character

Specifies Character to Use to Align Text On
43
<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
<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 char= character

Specifies Character to Use to Align Text On
45
<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
<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
<td>
Attributes
colspan=#
Specifies How Many Columns the Cell Overlaps
rowspan=#
Specifies How Many Rows the Cell Overlaps
48
<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
Example
50
How to make your Web page good looking
CASCADE STYLE SHEET

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
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
Q alit or Characteristic (e g Color) Quality (e.g.,
Value
Specification of Property (e.g., Blue)
Style Sheet y
Set of Style Rules
53
CSS Basics
Style Rule Syntax
54
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
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
<t style=property:value1; property:value2;> <tag t l t l 1 t l 2 >
<h1 style=color:green; font-family:sans-serif;> <b style=color:yellow; background-color:green;>
56
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 > type=text/css> h1 {color:green; font-family:sans-serif;} b {color:yellow; background-color:green;} </style>
57
Linked Style
External Style Sheet

Always Contained in the <head> Text Document that Contains Style Rules Allows Specification of Rules for Multiple Documents p p Does Not Contain HTML Code
<link rel=stylesheet href=master.css /> rel stylesheet href master css
Syntax
58
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
Cascading Rule Weight with the !Important Keyword

Allows User to Override Authors Style Setting
For Particular Element
Improves Accessibility of Documents p y

Gives Control to Users with Special Requirements
Rule Weight by Origin

Cascading Order of Precedence:
1. Rules From Authors Style Sheet 2. 2 Rules From User s Style Sheet Users 3. Rules From Browsers Style Sheet
60
Cascading
Rule Weight by Specificity

Rules with More Specific Selectors Take Precedence Over Rules with Less Specific Selectors
Rule Weight by Order g y

Based on Order of Rule within Style Sheet
Rules Listed Later Take Precedence Over Those Listed Earlier
61
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
Basic Selection
Type Selectors
Selector Determines Element to which Declaration is Applied Style Sheet Examples:
h2 {color: red;} p {font-size: 10 pt;}
63
Basic Selection
Grouping Selectors
Set the Same Declaration for Multiple Selectors
Syntax:
h1 {color: red;} { ;} h2 {color: red;} or h1, h2 {color: red;}
64
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
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
Advanced Selection id Attribute Selector

Applied to Onl ONE Only Unique Element in a Document Core Attribute that can be Applied to Any HTML Element
Web Engineering (703512) Syntax:
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> class=quote>Text
May be Restricted to a Specific Element Type h1.quote {color: red; margin: 30px;}
Advanced Selection
<div></div>
Block Level Element Used to Contain Other HTML Elements Displayed Discretely from the Rest of the Document p y y
Paragraph Breaks Added Before and After <div> Contents
<span></span>
Inline Element Used to Contain Other HTML Elements Used within Text Blocks
69
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
Advanced Selection
Pseudo-Class Selectors
Dynamic Pseudo-Classes
Apply Styles to an Element Based on Users Actions :hover
A li St l Wh U Applies Style When User M Mouses O Over El Element t
:active
Applies Style When User Activates Element
:focus
Applies Style When Element is Accepting User Input
71
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
Advanced Selection Pseudo-Element Selectors

:first-letter
Advanced Selection Pseudo-Element Selectors

:first-line
Apply Style Rules to the First Line of Any Block-level Element
74
Advanced Selection
Child Selector
>
Apply Style Rules to Child Elements of Any Parent div > blockquote {font-weight: bold;}
75
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
Advanced Selection
Adjacent Sibling
+
Apply Style Rules to
Elements that Share the Same Parent Are Adjacent in the Code
77
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
Fonts Measurement Units
79
Font Propertiess
Styles
style=font-family: fonts;
Allows Specification of Font Family Names Generic Font Families
Allows Greater Portability A All G t P t bilit Across Pl tf 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
Font Properties
Styles
Specific Font Families
Allows Specification of Particular Font-family
Garamond Impact Garamond,
User Must Have Font Installed on Machine

If not, Browser Will Supply Default
Example: <p style font family: arial;> style=font-family:
81
Font Properties
Styles
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
Font Properties Styles

st le font si e si e | ke ord | %; style=font-size: size keyword %
Absolute Keywords
xx-small x-small small medium large x large x-large xx-large
Font Properties
Styles
style=font-size: size | keyword | %;
Relative Keywords
Smaller | Larger Example
Parent Elements Size is Large Current Elements Size is Set to Larger Result is that the Current Font Size will be X-large
Percentage
Example
50%, 150%, 200%
Font Properties
Styles
style=font-style: normal | italic | oblique; style=font-variant: normal | small-caps; style=font-weight: normal | bold | bolder | lighter | #; y g g ;
# = 100 900 in Increments of 100 400 = Normal 700 = Bold
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:
<p style= font: 18pt/24pt arial bold;> style=font: bold; >
86
Text Properties Styles

st le line height # | % style=line-height: %;
AKA Leading
style=letter-spacing: normal | #; #;
AKA Kerning
style=word-spacing: normal | #; #;
AKA Tracking

style=text-indent: # t l t t i d t #;
Allows Specification Amount of Indentation of First Line

style=text-decoration: none | underline | overline | linet l t t d ti d li li li through | blink;
style=text-transform: capitalize | uppercase | lowercase | style= text-transform: none;

style=vertical-align: b t l ti l li baseline | sub | super | t | textli b top t t top | middle | bottom | text-bottom | % | #;
Visual Formatting Model Three Element Display Type Categories

Block (e.g., Paragraphs)
Contain Inline Boxes that Contain Element Content
I li 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
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
Margin Properties margin: # | %

Shorthand Propert Sets All Fo r Indi id al Margins Property Four Individual
Margin Properties margin-left | margin-right | margin-top | marginbottom: # | %

Negative margins can be set to achieve special effects
Padding Properties padding: # | %

Shorthand Property Sets All Four Individual Paddings
Same Format as Margin
padding-left | padding-right | padding-top | padding-bottom: # | %
Border Properties border: style width color

Shorthand Property Sets All Four Individual Borders
Same Format as Margin g
Border Properties border-style: keyword

K Keywords d
none dotted dashed solid double groove ridge inset outset t t
Border Properties border-width: thin | medium | thick | #
border-color: value
Special Box Properties width: # | %

Sets Horizontal Width of a Containing Box
height: # | %
Sets Vertical Height of a Containing Box
float: left | right | none g

Sets Position of an Element to Left/Right of Parent Element
clear: none | left | right | both

Controls Flow of Text Around Floated Elements
Special Box Properties float & clear
Background Properties background-color: colorname | #
Background Properties background-image: url(imagename.gif)
Background Properties background-repeat: repeat | repeat-x | repeat-y | no-repeat no repeat
Background Properties background-position: % | length | keyword
Background Properties background-attachment: scroll | fixed
List Properties list-style-type: disc | circle | square | decimal | decimal-leading-zero lower-roman upper-roman decimal leading zero | lower roman | upper roman | lower-greek | lower alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjkideographic | hiragana | katakana | hira-ganairoha | katakana-iroha | none
Default = disc Allows Customization of the List Marker
Syntax:
ul {list-style-type: circle;}
106
List Properties list-style-type
List Properties list-style-image: url(filename.ext)

All Allows U of I Use f Image as Li t M k List Marker
Syntax:
ul {list-style-image: url(paw.gif);} { y g (p g );}
108
List Properties list-style-position: inside | outside

Default = inside Allows Placement of the List Marker
Syntax:
ul {list-style-position: outside;}
109
Positioning Properties position: type position size

type = static | relative | absolute | fixed position = top | left | bottom | right size = height | width
110
Positioning Properties div {position:absolute; left:130px; top:100px;}
Positioning Properties div {position:absolute; left:130px; top:100px; width: 100px;}
Positioning Properties visibility: visible | hidden

Specifies Whether an Element is Displayed or Hidden
z-index: auto | #
Specifies an Elements Stacking Level
113
Example
114
How to add some business logic to your Web page
JAVASCPRIPT
Whats a Scripting Language?
Language used to write programs that compute inputs t another language processor i t to th l
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)
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) 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)
Common Uses of JavaScript
Form validation Page embellishments and special effects Navigation systems Basic B i math calculations th l l ti Dynamic content manipulation Sample applications
Dashboard widgets in Mac OS X, Google Maps, Philips universal remotes, Writely word processor, hundreds of others others
Example 1: Add Two Numbers
<html> <p> </p> <script> var num1 num2 sum num1, num2, num1 = prompt("Enter first number") num2 = prompt("Enter second number") sum = parseInt(num1) + parseInt(num2) I t( 1) I t( 2) alert("Sum = " + sum) </script> </html>
Example 2: Browser Events
<script type="text/JavaScript"> Mouse event causes page-defined page defined function function whichButton(event) { to be called if (event.button==1) { alert("You clicked the left mouse button!") } else { alert("You clicked the right mouse button!") }} </script> / i t <body onmousedown="whichButton(event)"> </body>
Example 3: Page Manipulation
Some possibilities
createElement(elementName) createTextNode(text) appendChild(newChild) pp ( ) removeChild(node)
Example: add a new list item

var li t = document.getElementById('t1') list d t tEl tB Id('t1') var newitem = document.createElement('li') var newtext = document.createTextNode(text) list.appendChild(newitem) newitem.appendChild(newtext)
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!
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
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 = { j {name: Bob", g , grade: 'A', level: 3}; , };
Play a role similar to lists in Lisp / Scheme
New members can be added at any time

objBob fullname = 'Robert'; objBob.fullname
Can have methods Can refer to this
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
A Anonymous functions f ti
(function (x,y) {return x+y}) (2,3);
Examples of Functions
Curried functions
function CurriedAdd(x) { return function(y){ return x+y} }; g = CurriedAdd(2); g(3)
V i bl number of arguments Variable b f t

function sumAll() { var total=0; for (var i 0; i< sumAll arguments length; i++) i=0; sumAll.arguments.length; total+=sumAll.arguments[i]; return(total); } sumAll(3,5,3,5,3,2,6)
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) { (f ti ( ) 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
Basic Object Features
Use a function to construct an object j

function car(make, model, year) { this.make = make; this.model 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;} this.year this make this model;} c.print();
Web Engineering (703512) slide 128
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');"> y ( )
Pseudo-URL referenced by a link

<a href=JavaScript: alert(You clicked);>Click me</a>
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
C Concurrency
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 i now '1 l( d ) is var obj = new Object(); obj.eval(code); // obj.a is now 1
slide 131
Unusual Features of JavaScript
Eval, run-time type checking functions Support for pattern matching (reg. expressions) Can add methods to an object Can delete C d l t methods of an object th d f bj t
myobj.a = 5; myobj.b = 12; delete myobj.a;
Iterate over methods of an object

for (variable in object) { statements }
Example
133
Thats almost all for day
WRAP UP WRAP-UP
Things to keep in mind (or summary) XHTML for content structure CSS for presentation JavaScript for client side logic
135
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
Validation Tools
XHTML
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
Next Lecture
# 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Date 7th Oct 14h O t Oct 21st Oct 28th Oct 4th Nov 11th Nov 18th Nov 25th Nov 2nd Dec 9th Dec 6th Jan 13th Jan 20th Jan 27th Jan Title Web Engineering Introduction and Overview Collection Requirements f W b A li ti C ll ti R i t for Web Applications Web Application Modeling Developing Applications with WebML Web Application Architectures I Web Application Architectures II Testing and Usability on the Web Mid Term Exam Web Technologies I Web Technologies II Web Technologies III Web 2.0 Mash-ups Web Application Development Process/ Project Management for Web Applications Final Exam Lecturer F. M. Facca F. M Facca F M. F F. M. Facca F. M. Facca F. M F M. Facca F. M. Facca F. M. Facca F. M. Facca F. M. Facca F. M. Facca F. M. Facca F. Daniel (UNITN) F. M. Facca F. M. Facca
138
Questions?
139

07 - Web Technologies I

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

07 - Web Technologies I

Uploaded by

Copyright:

Available Formats

Web Engineering g g Web Technologies I

Lecture IX 2nd December 2008 Federico M. Facca

STI - INNSBRUCK www.sti-innsbruck.at

Where are we?

Web Engineering (703512)

Introduction HTML & XHTML CSS JavaScript J S i t Wrap-up

Web Engineering (703512)

What are the basic ingredients to start to build a Web site

Content structuring (and basic presentation)

Business logic (client side)

Web Engineering (703512)

Standards or not Standards?

XHTML and CSS are recommendation from W3C

CSS 2.1 (3.0 is under development)

JavaScript is not a standard

How to structure your content in a Web page

HYPERTEXT MARKUP LANGUAGE

HTML & XHTML

HyperText Markup Language (v4.01 1999)

Extensible HTML (v2.0 2004)

Web Engineering (703512)

HTML & XHTML

Web Engineering (703512)

Web Engineering (703512)

Web Engineering (703512)

Web Engineering (703512)

Text Included Does Not Render

Web Engineering (703512)

Web Engineering (703512)

style=background-color: colorName | #rrggbb | rgb(#,#,#);

Web Engineering (703512)

style=background-repeat: repeat | repeat-x | repeat-y | norepeat;

style=background-attachment: scroll | fi d l b k d h ll fixed;

Web Engineering (703512)

Web Engineering (703512)

<p> & <br>

Web Engineering (703512)

style=list style image: url(filename.ext); style= list-style-image: url(filename ext);

Web Engineering (703512)

style=list-style-position: inside | outside; style list style position: outside;

Web Engineering (703512)

<dd> </dd> <dd></dd>

Web Engineering (703512)

Block Level Elements

Web Engineering (703512)

Web Engineering (703512)

Web Engineering (703512)

Web Engineering (703512)

Web Engineering (703512)

style=clear: none | left | right;

style=margin: top# right# bottom# left#; style=border-width: #; y

Web Engineering (703512)

Web Engineering (703512)

Web Engineering (703512)

Web Engineering (703512)

coords=X1, Y1, X2, Y2, etc.

Named Anchor or Bookmark URLs are Preceded By #

Web Engineering (703512)

shape=rect | circle | poly | default

Web Engineering (703512)

Web Engineering (703512)

URL (Uniform Resource Locator)

Web Engineering (703512)

Parent Two Periods ( ) (..)