web technologies i - sti innsbruck · title. 1. 5. th. march. web engineering introduction and...

Web Engineering

Web Technologies I

Where are we?

# Date Title

1 5th March Web Engineering Introduction and Overview

2 12th March Requirements Engineering for Web Applications

3 19th March Web Application Modeling

4 26th March Web Application Architectures

5 16th April Developing Applications with WebML

6 23rd April Testing and Usability

7 30th April Web Technologies I

8 7th May Web Technologies II

9 21th May Web Application Development Process

10 28th May Project Management for Web Applications

11 11th June Web Application Security

12 18th June Mobile Application Development

13 25th June Final Exam

Overview

• Introduction• HTML & XHTML• CSS• JavaScript• AJAX• Summary

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

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 W3C recommendations– XHTML 5 (part of HTML5)

• http://www.w3.org/TR/html5/– CSS 3.0

• http://www.w3.org/Style/CSS/

• JavaScript is “not” a standard– This due to the fact that at the beginning there was some competition between Sun

and Microsoft scripting languages– An attempt of standardization was made by European Computer Manufacturers

Association (ECMA), never completed – Latest stable release 1.8.5 (March 2011)– http://en.wikipedia.org/wiki/JavaScript

HYPERTEXT MARKUP LANGUAGE

How to structure your content in a Web page

HTML & XHTML

• W3C– Set Standards

• Syntax• Functionality

• HyperText Markup Language (v4.01 – 1999)– Type of more general markup language (SGML)– Describes function of text using codes

• Extensible HTML (v5.0 – 2012)– Integrates HTML with XML– Subsumes not only HTML 4, but also XHTML 1 and DOM Level 2 HTML

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

Syntax

• Elements (Tags)– Codes that control content appearance– Opening/Closing

• Two-Sided– <tagName>Content</tagName>

• One-Sided– <tagName />

– Lowercase

Syntax

• Comments–

•

• White Space– Does not render multiple spaces– Tab and enter do not render– Use non-breaking space

• Attributes– Control behavior or appearance of an element

• <tagName attrib#1=“Value” attrib#2=“Value” />

<html>

• <html>…</html>– Surrounds all markup & text– Required – Used to begin & end every HTML document

<head>

• <head>…</head>– Contains the document's header information– Required – Important information

• Document title• META Tags

– Included text does not render

<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

<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

<body>

• Styles– style=“background-position: horizontal vertical;”

• Specifies the positioning of the background image• Can be specified in 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

• <h#>…</h#>– Creates 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– Conveys page & content organization– Should be used in descending order

• Style– style=“text-align: left | center | right | justify;”

• Specifies the alignment of the heading text

• <p>…</p>– Inserts blank line before tag

• Separates paragraphs of text

• <br />– Causes text to break wherever tag is placed

• <ul>…</ul>– Unordered list renders a bulleted list– Use when 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

• <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

• <li>…</li>– Defines an item in a list

• <dl>…</dl>– Definition list– <dt>…</dt>

• Defined term– <dd>…</dd>

• Definition

Block Level Elements

• <blockquote>…</blockquote>– Content indented on left & right

• <pre>…</pre>– Retains all white space– Uses fixed width typeface

Inline Elements

• <strong>…</strong> or <b>…</b>– Bold

• <em>…</em> or <i>…</i>– Italics

• <sub>…</sub>– Subscripted

• <sup>…</sup>– Superscripted

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>

• <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

• Attributes– height=“pixels”

• Specifies the image height– src=“URL”

• Specifies location of image to place in a Web page• Required

– width=“pixels”• Specifies the image width

• 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

• <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;”

Special Characters

• & – Ampersand

• ©– Copyright

• ·– Bullet

• ®– Registered

• ™– Trademark

• <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

• 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 #

• 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

• Attributes– title=“text”

• Provides supplemental information regarding a link– Behaves like a Tooltip– Should be less than 60 characters

• Example

< 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>

• URL (Uniform Resource Locator)– Location of document on the Web

• www.sti-innsbruck.at

• Path– Location of document on a server

• http://www.sti-innsbruck.at/about/team/details/ioan-toma

• 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

• http://www.sti-innsbruck.at/about/team/details.html

– Communication protocol• http://

– Domain• www.sti-innsbruck.at

– Path • /about/team/

– Document• details.html

Protocols

• HyperText Transfer Protocol– Web server– http://

• File Transfer Protocol– File server– ftp://

• USENET– Newsgroup– <a href=“news:newsgroup.name”>Click Me</a>

Protocols

• E-Mail

– Mailto• <a href=“mailto:ioan.toma@sti2.at”>Send Mail</a>

– Can automatically include subject line• mailto:ioan.toma@sti2.at?subject=text

– Other options• “mailto:ioan.toma@sti2.at?cc=another@sti2.at

&bcc=secret@cod.edu&subject=subscribe&body=Send me your newsletter right away”

<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”

<table>

• Attributes– cellpadding=“#”

• Specifies amount of space between cell & content in a cell– cellspacing=“#”

• Specifies where borders of tables & cells appear

<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

• <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

• 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

• <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

• 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

• <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

• Attributes– colspan=“#”

• Specifies how many columns the cell overlaps– rowspan=“#”

• Specifies how many rows the cell overlaps

• <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

New HTML5 Elements

• New semantic elements like <header>, <footer>, <article>, and <section>.

• New form control attributes like number, date, time, calendar, and range.

• New graphic elements: <svg> and <canvas>.• New multimedia elements: <audio> and <video>.

Elements Removed in HTML5

Element Use instead

<basefont> CSS

<big> CSS

<center> CSS

<font> CSS

<frame>

<strike> CSS

<tt> CSS

New Semantic/Structural Elements

Tag Description<article> Defines an article in the document

<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.

<footer> Defines a footer for the document or a section<header> Defines a header for the document or a section<main> Defines the main content of a document<section> Defines a section in the document

<menuitem> Defines a command/menu item that the user can invoke from a popup menu

and many more others …

New Form Elements and HTML Graphics

Tag Description<datalist> Defines pre-defined options for input controls

<keygen> Defines a key-pair generator field (for forms)

<output> Defines the result of a calculation

Tag Description<canvas> Defines graphic drawing using JavaScript

HTML5 Graphics

New Forms Elements

New Media Elements

Tag Description<audio> Defines sound or music content

<source> Defines sources for <video> and <audio>

<track> Defines tracks for <video> and <audio>

<video> Defines video or movie content

CASCADE STYLE SHEETHow to make your Web page good looking

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

• CSS variations• CSS1 - 1996• CSS2 - 1998• CSS2.1 – 2011• CSS3 and CSS4 under development

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

CSS Basics

• Style rule syntax

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

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;”>

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>

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” />

Cascading

• Determines which rules are assigned to elements

• Assignment weights are 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

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

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

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

Basic Selection

• Type Selectors– Selector determines element to which declaration is applied– Style Sheet examples:

• h2 {color: red;}• p {font-size: 10 pt;}

Basic Selection

• Grouping selectors– Set the same declaration for multiple selectors

• Syntax:

h1 {color: red;}h2 {color: red;}

h1, h2 {color: red;}

Basic Selection

• Combining Declarations– Multiple declarations may be stated for same selector

• Syntax:

p {color: blue;}p {font-size: 12pt;}

p {color: blue; font-size: 12pt;}

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

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:

<p id=“preface”>This is a unique paragraph that is the preface of the document</p>

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 typeh1.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

• Paragraph breaks added before and after <div> contents

• <span>…</span>– Inline element– Used to contain other HTML elements– Used within text blocks

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;}

Advanced Selection

• Pseudo-Class selectors– Dynamic pseudo-classes

• Apply styles to an element based on user 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

• 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

• Measurement units

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)

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;”>

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;”>

Font Properties

• Styles– style=“font-size: size | keyword | %;”

• Absolute keywords– xx-small– x-small– small– medium– large– x-large– xx-large

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%

Font Properties

• # = 100 – 900 in increments of 100• 400 = Normal• 700 = Bold

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

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

Margin Properties

• margin: # | %– Shorthand property sets all four individual margins

Margin Properties

• margin-left | margin-right | margin-top | margin-bottom: # | %– 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

Border Properties

• border-style: keyword– Keywords

• none• dotted • dashed• solid• double• groove• ridge • inset • outset

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

– Sets position of an element to left/right of parent element

• clear: none | left | right | both

– Controls flow of text around floated elements

Positioning Properties

• position: type position size

– type = static | relative | absolute | fixed

– position = top | left | bottom | right

– size = height | width

• div {position:absolute; left:130px; top:100px;}

• div {position:absolute; left:130px; top:100px; width: 100px;}

• visibility: visible | hidden

– Specifies whether an element is displayed or hidden

• z-index: auto | #

– Specifies an element’s stacking level

JAVASCPRIPTHow to add some business logic to your Web page

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…)

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)

Common Uses of JavaScript

• Form validation

• Page 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…

Example 1: Add Two Numbers

<html>…

var num1, num2, sumnum1 = prompt("Enter first

number")num2 = prompt("Enter second

number")sum = parseInt(num1) +

parseInt(num2)alert("Sum = " + sum)

</script>…

</html>

Example 2: Browser Events

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

Example 3: Page Manipulation

• Some possibilities– createElement(elementName)– createTextNode(text)– appendChild(newChild)– removeChild(node)

• Example: add a new list itemvar list = document.getElementById('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 definition 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 = {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

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);

Examples of Functions

• Curried functionsfunction CurriedAdd(x) { return function(y){ return x+y} };g = CurriedAdd(2);g(3)

• Variable number of argumentsfunction 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)

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 callvar u = { a:1, b:2 }var v = { a:3, b:4 }(function (x,y) {

var tempA = x.a; var tempB =x.b; // local variablesx.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– 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();

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>

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

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

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 }

JAVASCRIPTFOR MODIFYING HTML

Something we have not seen about it: page manipulation

Hello World

</script>

</body></html>

DOM treatment of the page

Document URL

The URL of this document is:

</script>

</body></html>

Form Validation

</script></head>

Name (max 10 chararcters):<input type="text" id="fname“ size="20"><br />Age (from 1 to 100): <input type="text" id="age" size="20"><br />E-mail: <input type="text" id="email" size="20"><br /><input type="submit" value="Submit">

</form></body></html>

Form Validation (Cont.)

var at=document.getElementById("email").value.indexOf("@");var age=document.getElementById("age").value;var fname=document.getElementById("fname").value;submitOK="true";

if (fname.length>10){alert("The name must be less than 10 characters");submitOK="false"; }

if (isNaN(age)||age<1||age>100) {alert("The age must be a number between 1 and 100");submitOK="false"; }

if (at==-1) {alert("Not a valid e-mail!");submitOK="false"; }

if (submitOK=="false") {return false; }

}</script>

DOM Objects

JavaScript Function

Object Property

ASYNCHRONOUS JAVASCRIPT AND XML

Introducing the “push” paradigm in Web applications

Where Were We Before AJAX?

• Static pages give the illusion of interactivity through standard form submissions.

• Form submissions result in full page loads.

So, What’s The Problem?

• Many actions only manipulate small portions of the page but the entire page must be reloaded.

• Server responses contain the entire page content rather than just the portion being updated.

• Loading entire pages typically results in several additional HTTP requests for images, style sheets, scripts, and any other content that may be on the page.

AJAX - Asynchronous JavaScript and XML

• An interface that allows for the HTTP communication without page refreshment.

• Web pages are loaded into an object within the script (e.g., JavaScript) execution and integrated with the page content.

• Thus, the Web page can communicate with the server without refreshing the whole page.

Why Use Ajax

• Enhance user experience– Increases usability, speed, interactivity– Makes it possible to update portions of a web page without reloading the entire page– Asynchronous—user does not have to wait for server to respond

Real-Life Examples of AJAX Apps

• Google Maps– http://maps.google.com/

• Goolgle Suggest– http://www.google.com/webhp?complete=1&hl=en

• Gmail– http://gmail.com/

• Yahoo Maps (new)– http://maps.yahoo.com/

• Many more…

Ajax Example: Google Suggest

• Uses data about the overall popularity of various searches to help rankings

• Does not base suggestions on an individual’s personal search history

Why Use Ajax?

• Ajax applications usable on many different– Operating systems– Browsers– Computer architectures

• The web standards that Ajax uses (XHTML, CSS, JavaScript, XML) are well defined, and supported by all major browsers.

How Does Ajax Work

• JavaScript communicates directly with the server, using the XMLHttpRequest object (or ActiveXObject)

• Data retrieved from the server can be in a variety of formats: XML, JSON, HTML, text files

HTTP Requests: Traditional Model

• Traditional JavaScript:– Make html form

• use GET or POST to communicate with the server – User clicks “Submit” button to send or receive information– User waits

• for the server to respond• for a new page to load with the results

Traditional Model

Source: http://www.openajax.org/member/wiki/Technical_Overview_Whitepaper

Source: http://www.adaptivepath.com/ideas/essays/archives/000385.php

Ajax web application model

• JavaScript communicates directly with the server, via the JavaScript XMLHttpRequest object (or ActiveXObject)

• With XMLHttpRequest, the web page can make a request/get a response from web server without reloading

• The user can remain on the same page, not noticing that scripts request pages or send data to a server in the background

HTTP Requests: Using Ajax

XMLHttpRequest

• API that JavaScript and other web browser scripting languages use to transfer XML and other data between a web page’s client and server side

• Data returned from XMLHttpRequest calls is often provided by back-end databases.

XMLHttpRequest Object History

• Microsoft Internet Explorer version 5– ActiveX object

• Mozilla 1.0 added it as a native object with a compatible API.

• Apple added it to Safari in version 1.2

What Technologies Does Ajax Use?

• A combination of:

– XHTML (or HTML)

– Cascading Style Sheets (CSS)

– Document Object Model manipulated using JavaScript to display and interact dynamically with the information presented

– The XMLHttpRequest object to exchange data asynchronously with the web server

JavaScript

• Define an object for sending HTTP requests

• Initiate request– Get request object– Designate a response handler function– Initiate a GET or POST request– Send data

• Handle response– Wait for readyState of 4 and HTTP status of 200– Extract return text with responseText or responseXML– Do something with result

• E.g., use innerHTML to insert result into designated element

The Server side

• Did we reduce the load on the server?

• Ajax newcomers sometimes mistakenly believe that Ajax, because it provides a more responsive user interface, reduces server-side traffic.

• In fact, Ajax applications typically have more server-side traffic because each Ajax request involves a trip to the server.

– Because those requests are asynchronous, however, Ajax creates the perception of a more responsive UI, though it typically does not reduce the load on the server.

So, How Does It Work?

• JavaScript is used to:– Create and control instances of the XMLHttpRequest (XHR) object.– Provide handlers for responses.– Manipulate the DOM.

• The XMLHttpRequest object:– Allows scripts to perform HTTP client functionality.– Supports GET and POST operations.

Launching HTTP Requests

Typically, 3 steps are required:1. Construct and configure an XMLHttpRequest object2. Launch the request3. Process the response

Constructing an XMLHttpRequest

For Mozilla:

For Microsoft Explorer:

var request = new XMLHttpRequest();

var request = new ActiveXObject("Microsoft.XMLHTTP");

Configuring an XMLHttpRequest

• Method is GET, POST, etc.• URL must be in the domain of the current (or a relative URL), for security

reasons• The false will be discussed later

request.open("method","URL",false)

request.setRequestHeader("header","value")

Launching the Request

request.send(content)

• content is the posted in a POST request• content can be "null" or empty

Reading the Response

request.responseText

• The response as flat text

request.responseXML

• The response as a (DOM) Document object• Available if response Content-Type is text/XML

request.status request.statusText

request.getAllResponseHeaders()

request.getResponseHeader("header")

<html>

<head>

<title>Jokes</title>

... 2 slides ahead ...

</script>

</head>

An Example

<h1>Select a Joke:</h1>

</select></p>

</body>

</html>

An Example (Cont.)

var jDiv;

function init() { jDiv = document.getElementById("jokediv");}

function setJoke(value) {

request = new XMLHttpRequest();

request.open("GET","joke"+value+".txt",false);

request.send(null);

if(request.status==200){jDiv.innerHTML=request.responseText;}

else {jDiv.innerHTML = "<i>Cannot load joke...</i>";}

</script>What if we didn’t get yet the

response in this stage?

An Example (Cont.)

Example (Cont.)

• Our examples use “false" in the third parameter of open().– This parameter specifies whether the request should be handled asynchronously.

• True means that the script continues to run after the send() method, without waiting for a response from the server.

Asynchronous Requests

• Reading of a Web page can take a long time during which the browser is blocked

• Solution: launch the request asynchronously

• That is, the execution continues after send is called without waiting for it to complete

• When the request is completed, a predefined function is called

request.open("method","URL",true)

XMLHttpRequest States

• The XMLHttpRequest goes through several states:

• In the request configuration, you can define a function to call upon state change:

0 not initialized 1 loading 2 loaded

3 interactive 4 complete

request.onreadystatechange = functionName

XMLHttpRequest States (Cont.)

• Use request.readyState to get the current state of the request

• Use request.abort() to stop the request

var request;

function setJoke(value) {

request = new XMLHttpRequest();

request.open("GET","joke"+value+".txt",true);

request.onreadystatechange = updateJokeDiv;

request.send(null);

Asynchronous Example

An Example (Cont.)

function updateJokeDiv() {

if(request.readyState<4) {

jokeDiv.innerHTML = "<i>Loading...</i>";

return;

if(request.status==200) {

jokeDiv.innerHTML = request.responseText;

} else {

jokeDiv.innerHTML = "<i>Cannot load joke!</i>";

Integrating AJAX and XML using DOM

• The next example shows how XML data can be parsed and added into the content of your page

XML+AJAX Example

<html>

<head><title>Country List</title>

</script>

</head>

<h1>Select a Continent:</h1>

XML+AJAX Example (Cont.)

<option value="africa">Africa</option>

<option value="europe">Europe</option>

</select>

</body>

</html>

function init() {

continents = document.getElementById("continenetList");

countries = document.getElementById("countryList"); }

function loadCountries() {

var xmlURL = "countries-"+continents.value+".xml";

var request = new XMLHttpRequest();

request.onreadystatechange = updateCountries ();

request.open("GET",xmlURL,true);

request.send(null); }

function updateCountries() {

if(request.readyState==4) {

while(countries.length>0){countries.remove(0);}

if(request.status==200) {

var names = request.responseXML.getElementsByTagName("name");

for(var i=0; i<names.length; ++i) {

option = document.createElement("option");option.text=option.value=

names[i].firstChild.nodeValue;countries.appendChild(option);

AJAX: Potential Drawbacks

• "Back" function of browser might not work as expected

• Bookmarking a particular state of the application

• Navigation may be difficult

• User might not notice when small parts of the page change

• Search engine tracking

• If user disables JavaScript

• Many web analytics programs may not track Ajax actions as they do page reloads

WRAP-UPThat’s almost all for day…

Things to keep in mind(or summary)

• XHTML for content structure

• CSS for presentation

• JavaScript for client side logic

• Ajax enables asynchronous communication between browser and server

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– W3Schools Ajax Tutorial

http://www.w3schools.com/Ajax/Default.Asp

Validation Tools

• XHTML– http://validator.w3.org/

• CSS– http://jigsaw.w3.org/css-validator/

Next lecture

# Date Title

1 5th March Web Engineering Introduction and Overview

2 12th March Requirements Engineering for Web Applications

3 19th March Web Application Modeling

4 26th March Web Application Architectures

5 16th April Developing Applications with WebML

6 23rd April Testing and Usability

7 30th April Web Technologies I

8 7th May Web Technologies II

9 21th May Web Application Development Process

10 28th May Project Management for Web Applications

11 11th June Web Application Security

12 18th June Mobile Application Development

13 25th June Final Exam

Questions?

web technologies i - sti innsbruck · title. 1. 5. th. march. web engineering introduction and...

Documents

www.sti- copyright 2008 sti innsbruck semantic web tools...

web technologies - sti innsbruck

www.sti- copyright 2008 sti innsbruck semantic web tools...

1 © mci management center innsbruck, 2015 mci management...

www.sti-innsbruck.at © copyright 2009 sti innsbruck ...

web application architectures - sti innsbruck › sites ›...

reading137 hofkirche innsbruck

www.sti-innsbruck.at © copyright 2009 sti innsbruck 1 web...

university of innsbruck

www.sti-innsbruck.at © copyright 2012 sti innsbruck open...

www.sti-innsbruck.at © copyright 2009 sti innsbruck web of...

management center innsbruck (mci) – the entrepreneurial...

universität innsbruck leopold franzens copyright 2007 deri...

australia & new zealand regulatory environment€¦ ·...

web service security - sti innsbruck

olympiaworld innsbruck

developments in large scale physics presented by yves...

appliedmathematics - universität innsbruck

note - universität innsbruck

updated 09.11.2017 leopold-franzens-universität innsbruck...