Week 10 Technical Stack I I 03

CS 292: Beyond the One Way Web Dan Nanto, Spring 2008 http://beyondtheonewayweb.wordpress.com

Separating Content from Presentation

XML

XSL

Example: RSS

Dynamic Browser Presentation

JavaScript

DHTML & DOM

AJAX

APIs – Services

Example: Google Maps

CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

Static content.

Limited formatting options

Single “Frame”

Animated Gifs were “really cool!”

“ Request Response” Loop

Can react to events

Read and change HTML elements

Validates data

Detects browser types

Creates cookies

Not Java based!

Real name is ECMA Script

European Computer Manufacturers Association

javaScript support in both Netscape and Microsoft Browsers since 1996

First standard approved in 1998

<html>

<body>

<script type="text/javascript"> document.write(“I love Brittney!");

</script>

</body>

</html>

<script></script> tags

Type=“text/javascript”

Document.write(“I love Brittney!”);

Written in body – executed upon rendering

Written in head – can be called and executed

Can be imported as well from an external file

<script src=“someFile.js”/>

javaScript

DHTML & DOM – Document Object Model

AJAX

DHTML first attempt at dynamic web pages

Access element by name/ID

Can change value/State

Can respond to some events

Not a standard!

Some DHTML Events:

onblur - a user leaves an object

onchange - a user changes the value of an object

onclick - a user clicks on an object

ondblclick - a user double-clicks on an object

onfocus - a user makes an object active

onkeydown - a keyboard key is on its way down

onkeypress - a keyboard key is pressed

onkeyup - a keyboard key is released

Demo

Not a standard

Browser implementations varied.

Difficult to debug due to multiple testing platforms required

Element access only by name or ID

Document Object Model

1998 W3C published first DOM specification

More generic than DHTML

Represented the entire document as a tree

Traverse the tree up, down, and side to side

Create new nodes in the tree

Remove nodes from the tree

CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com) Image courtesy of www.w3schools.com

Inserting a Row Into a table

Removing Options from a drop down

Capturing Events and traversing nodes

<table id="myTable" border="1">

<tr>

<td>Row3 cell1</td>

<td>Row3 cell2</td>

</tr>

</table>

<br />

<input type="button" onclick="insRow()" value="Insert row">

<script type="text/javascript">

function insRow()

{

var newRow=document.getElementById('myTable').insertRow(0);

var y=newRow.insertCell(0);

var z=newRow.insertCell(1);

y.innerHTML="NEW CELL1";

z.innerHTML="NEW CELL2";

}

</script>

<select id="mySelect">

<option>

Apple

</option>

<option>

Orange

</option>

</select>

<input type="button" onclick="removeOption()"

value="Remove selected option">

<script type="text/javascript">

function removeOption()

{

var x=document.getElementById("mySelect");

x.remove(x.selectedIndex);

}

</script>

DEMO

Required all data/information to be loaded with browser.

Introduced security challenges.

Does not support Events

Still Need DHTML!

Asynchronous JavaScript And XML

Not a new technology

A technique for retrieving data from a server

Does not require a browser refresh

Relies on XML object that can asynchronously communicate with the originating server:

Internet Explorer

ActiveXObject

Other Browsers

XMLHttpRequest object

Requires

HTML page

Event Listener

Asynchronous call to the server

Server side process

Callback method declaration

Dynamic Experience uses all these technologies:

HTML: XML

Event Listener: DHTML

Asynchronous Call to server: AJAX

Server Side Processing: Java or other

Callback Method: DOM or DHTML

Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

Embedding services/sources

Free APIs

Examples:

Google Maps

YouTube

Google Maps:

Allows you to integrate dynamic map content into your web site.

YouTube:

Allows you to integrate video from their site

Web based technologies

http://www.w3schools.com/default.asp

APIs

http://www.programmableweb.com

Week 10 Technical Stack I I 03

0 comments

Notes on slide 1

Favorites, Groups & Events

Week 10 Technical Stack I I 03 - Presentation Transcript

More by user

More info about this document

Categories

Tags

Week 10 Technical Stack I I 03

0 comments

Notes on slide 1

Favorites, Groups & Events

Week 10 Technical Stack I I 03 - Presentation Transcript

Related Presentations

More by user

More info about this document

Categories

Tags