Full HTML for Basic Overview of JavaScript II -- From Cookies to Dynamical HTML

Full HTML for

Basic foilset Overview of JavaScript II -- From Cookies to Dynamical HTML

Given by Geoffrey C. Fox (Tom Scavo) at CPS616 Technologies of the Information Age on Spring Semester 99. Foils prepared 11 March 99
Outside Index Summary of Material

Cookies -- Store and Access information stored on client machines

LiveConnect -- Link Java and JavaScript

LiveWire -- Server Side ECMAScript

More advanced ways of defining, laying out and controlling web documents:

Where do HTML, CSS, XML, XSL, XLL, W3C DOM, Dynamic HTML fit in .....

Table of Contents for full HTML of Overview of JavaScript II -- From Cookies to Dynamical HTML

Denote Foils where Image Critical

Denote Foils where Image has important information

Denote Foils where HTML is sufficient

denotes presence of Additional linked information which is greyed out if missing

1

CPS616 Web Technologies Lectures on JavaScript II Advanced Topics from Cookies to Dynamic HTML
2

Outline of Advanced Topics
3

Introduction to Cookies
4

Cookies - "hidden" alternative
5

Cookies -- Client Side Files
6

Specification of a cookie - I
7

Specification of a cookie - II
8

Use of Cookies in Server Program
9

Use of Cookies in Client Program
10

Cookies Limitations
11

JavaScript Security
12

Same Origin Policy
13

The domain Property
14

Data Tainting
15

Signed Scripts
16

Signed Scripts (cont'd)
17

Certificates
18

JAR Files
19

Signing Software with Netscape Signing Tool 1.0

Using signtool
20

Writing Signed Scripts
21

Using Signed Scripts (cont'd)
22

LiveConnect
23

LiveConnect (cont'd)
24

LiveWire
25

Writing Server-side JavaScript Applications

LiveWire (cont'd)
26

References on XML
27

HTML Hypertext Markup Language Background
28

History of HTML
29

HTML Strengths
30

HTML Shortcomings
31

Other Weaknesses
32

Logical vs. Visual Design
33

XML Extensible Markup Language
34

What is XML?
35

XML Compared with HTML and SGML
36

XML Language Elements
37

Dynamic HTML Hypertext Markup Language
38

What is DHTML?
39

Features of DHTML
40

Architecture of DHTML + XML
41

Components of DHTML
42

HTML 4.0
43

HTML DTDs
44

HTML 4.0 Features
45

Intrinsic Events
46

Deprecated Elements
47

The <OBJECT> Tag
48

Cascading Style Sheets
49

CSS1 (and CSS2) Features
50

Specification of Styles: External
51

Embedded Styles
52

A Larger CSS Example
53

Document Object Model
54

Hierarchical Object Components in a Web Page
55

Use of Position Attributes in JavaScript
56

DHTML 1) Define Layers -- I
57

DHTML 1) Define Layers -- II
58

DHTML -- Decide on Browser
59

First DHTML Example in html and text for Foil 59

Define a Layer in a Document using <div></div>
60

DHTML Utilities and First DHTML Example in html and text for Foil 60

Set Positions of a Layer in DHTML
61

DHTML Utilities and First DHTML Example in html and text for Foil 61

Set Other Properties of a Layer in DHTML
62

DHTML Utilities and First DHTML Example in html and text for Foil 62

Changing Content of a DHTMLLayer
63

DHTML Utilities and Second DHTML Example in html and text for Foil 63

Capturing Events in Today's DHTML
64

DHTML Utilities and Second DHTML Example in html and text for Foil 64

A User Event Handler in DHTML
65

DHTML Utilities and Second DHTML Example in html and text for Foil 65

Event Processing Models
66

DHTML Utilities and Second DHTML Example in html and text for Foil 66

Calculating Geometry on Screen
67

DHTML Summary
68

Everywhere HTML

Outside Index Summary of Material

HTML version of Basic Foils prepared 11 March 99

Foil 1 CPS616 Web Technologies Lectures on JavaScript II Advanced Topics from Cookies to Dynamic HTML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Geoffrey Fox

Northeast Parallel Architectures Center

Syracuse University

111 College Place

Syracuse, NY 13244-4100

http://www.npac.syr.edu/projects/tutorials/JavaScript/

http://www.npac.syr.edu/users/gcf/javascriptIImarch99/

HTML version of Basic Foils prepared 11 March 99

Foil 2 Outline of Advanced Topics

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Cookies -- Store and Access information stored on client machines

LiveConnect -- Link Java and JavaScript

LiveWire -- Server Side ECMAScript

More advanced ways of defining, laying out and controlling web documents:

Where do HTML, CSS, XML, XSL, XLL, W3C DOM, Dynamic HTML fit in .....

HTML version of Basic Foils prepared 11 March 99

Foil 3 Introduction to Cookies

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

A cookie is operationally a relatively small named string stored by the browser and a property of the Document object

The cookie mechanism gives the browser a kind of memory, that is, a cookie "saves state"

Originally, only CGI scripts could read/write cookie strings, but with JavaScript, cookies can be handled entirely on the client side

A cookie

persists for the duration of the browser session (but an expiration date may be given)
is associated with the subtree of the document that created it (but a cookie path may be specified)
is accessible to pages on the server that created it (but a cookie domain may be declared)

HTML version of Basic Foils prepared 11 March 99

Foil 4 Cookies - "hidden" alternative

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Cookies were introduced by Netscape to preserve client side state

If you have a CGI script that services several clients (ordering T Shirts perhaps), it is neatest to use client and not server to store information such as name of user, passwords etc.

Traditionally saved state in forms for a session preserved using "hidden" fields

<INPUT type=hidden" name="username" value="" >
set by formname.username.value = WHATHAVEYOU;

Such hidden fields are passed to CGI scripts in same fashion as other variables set in form text fields

hidden values can either by set by JavaScript on client side or returned built into a page constructed by CGI script which might read N values and return a new form with M new fields for client to fill in and N old entries preserved in hidden fields

So hidden variables are nice but only preserved as long as you keep to page you started with or that returned by CGI script.

HTML version of Basic Foils prepared 11 March 99

Foil 5 Cookies -- Client Side Files

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Cookies provide an alternative mechanism to hidden files where information is saved in special file on client (called cookies or cookies.txt)

Note History Cache Bookmarks are also saved client side

Such files can preserve information in a more robust way than hidden alternative!

Cookies are supported by Microsoft and and Netscape and can be used (like forms) for pure client-side or client-server activities

Neither hidden or cookies are very secure

Cookies have 5 attributes -- name, expires, domain, path and secure and are specified by a single line that must specify a value for name but where all other attributes are optional.

HTML version of Basic Foils prepared 11 March 99

Foil 6 Specification of a cookie - I

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

name=value; EXPIRES=datevalue; DOMAIN=domainname; PATH=pathname; SECURE

name is required and tells you name of cookie

EXPIRES is optional but if present specifies a date after which cookie is to be deleted

EXPIRES uses a modification of syntax returned by JavaScript function Dateobject.toGMTString()

dayofweek, Day-Month-Year Hour:Min:Secs GMT
e.g. Wednesday 19-02-97 19:10:24 GMT

It appears that one can just use the slightly different syntax of toGMTString as well as "official format"

so now = new DATE(); now.setTime( now.getTime() + 24*60*60*1000);
now.toGMTString() will give an expiration date of one day from now!

HTML version of Basic Foils prepared 11 March 99

Foil 7 Specification of a cookie - II

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

DOMAIN defaults to domain of server where cookie set and general matching matching is done starting at end of domain

DOMAIN=npac.syr.edu matches all servers ending with these characters

PATH=/ is most general path and matches all paths but default is again path of document that set cookie.

Thus you must set PATH explicitly to / if you want cookie to be valid for a file stored in directory below that of setting document

SECURE if present requires a secure communication channel

HTML version of Basic Foils prepared 11 March 99

Foil 8 Use of Cookies in Server Program

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

The Brower passes to server any cookies that are valid for a given page in HTTP header

Note only name=value is passed because PATH DOMAIN SECURE and EXPIRES are used to check if cookie should be passed

The server stores cookie strings in $HTTP_COOKIE environment variable as name1=value1; name2=value2;

It is easy for CGI script to decode this $HTTP_COOKIE environment variable

One can send cookies back to client using Set-cookie: name1=value1; expires= .. ; domain= ...; etc. before the content-type: text/html header line

HTML version of Basic Foils prepared 11 March 99

Foil 9 Use of Cookies in Client Program

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

JavaScript string object document.cookie holds cookies that are valid for this document and can be used to either set or retrieve cookie values

In WebWisdom example, we have pages with a form that sets values of parameters common to several foils and stores for a certain length of time. This is entirely processed client-side with JavaScript interpreting form and storing values in appropriate cookie entries

These cookies are read on other pages (consistent with PATH and DOMAIN) and if present used to define JavaScript variables that are used in "parameterized HTML"

Note document.cookie is set to a single cookie value but when read gives all cookies for this document!

HTML version of Basic Foils prepared 11 March 99

Foil 10 Cookies Limitations

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

A cookie string may not contain semicolons, commas, or whitespace (use escape() and unescape())

There are some Size Limitations:

No more than 300 cookies per client
No more than 20 cookies per server
No more than 4Kb per cookie

HTML version of Basic Foils prepared 11 March 99

Foil 11 JavaScript Security

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

When browsing the Web, two pieces of information are considered public: the IP address of the client and the type of browser. All other data are considered private. In particular,

JavaScript does not permit access to the client file system
JavaScript can not establish a direct connection to an arbitrary Internet host

HTML version of Basic Foils prepared 11 March 99

Foil 12 Same Origin Policy

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

An important bug fix appeared in NN2:

Scripts from one server may not read properties of windows or documents from another server

See this URL for an interesting account: http://www.osf.org/~loverso/javascript/

For example, a script from home.netscape.com may not read the properties of a document loaded from developer.netscape.com

HTML version of Basic Foils prepared 11 March 99

Foil 13 The domain Property

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

The document.domain property is initialized to the hostname of the server from which the document was loaded

This property may be set to any valid domain suffix of itself

For example, if document.domain is "home.netscape.com", it may be set to "netscape.com" (but not "ape.com")

HTML version of Basic Foils prepared 11 March 99

Foil 14 Data Tainting

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Data tainting, an alternative to the Same Origin Policy, was experimentally implemented in NN3.0

Data tainting allows access to private data (e.g., history[] array) but forbids "export" of this data over the Internet

Both data and methods may be tainted

In principle one could selectively control access but in practice it never worked as too hard to "untaint"

Tainting was extremely clumsy and has been disabled in NN4, in favor of signed scripts

HTML version of Basic Foils prepared 11 March 99

Foil 15 Signed Scripts

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

A new security model called signed scripts was implemented in NN4.0

Signed scripts are based upon the Java security model for signed objects

The following objects may be signed:

inline scripts specified with the <SCRIPT> tag
separate source files given by the SRC attribute
event handlers
JavaScript entities

HTML version of Basic Foils prepared 11 March 99

Foil 16 Signed Scripts (cont'd)

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Scripts are signed using Netscape's Signing Tool (signtool), a command-line utility that creates digital signatures for Java class files, JavaScript scripts, plugins, etc.

Scripts may be served from a secure (SSL) server, in which case they're treated as if signed with the public key of that server

Users retain the right to deny the privileges requested by the signed script

As in Java, you are asked whether to allow a given type of operation with an option to "remember this decision"

HTML version of Basic Foils prepared 11 March 99

Foil 17 Certificates

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

A certificate is an electronic document used to identify an individual or organization

An object-signing certificate is a special kind of certificate that allows you to associate your digital signature with one or more files

A digital signature is analogous to a handwritten signature (that is, it is difficult to refute and may be legally binding)

NPAC has a Software Developers Certificate from a company VeriSign which one uses to sign "official NPAC" Java or JavaScript

VeriSign is meant to check we are reputable before giving us a certificate!

HTML version of Basic Foils prepared 11 March 99

Foil 18 JAR Files

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Signed objects are packaged in a JAR (Java Archive) file, a sort of "digital envelope" based on the ZIP archive format

Using signtool, one associates digital signatures with the files in a JAR, which:

confirm the identity of the entity whose digital signature is associated with the JAR
check whether the files have been tampered with since being signed

HTML version of Basic Foils prepared 11 March 99

Foil 19 Using signtool

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

First check to see what object-signing certificates are available: % signtool -l

If none are available, a test certificate may be created with the command: % signtool -G MyTestCert

To sign scripts in directory "signdir", type: % signtool -k MyTestCert -J signdir

So this is only DOS program I run on my PC!

HTML version of Basic Foils prepared 11 March 99

Foil 20 Writing Signed Scripts

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

First, identify inline scripts to be signed: <SCRIPT ... ARCHIVE="some.jar" ID="1">

The script ID must be unique in the JAR

JavaScript source files don't need an ID: <SCRIPT ... ARCHIVE="some.jar" SRC="file.js">

Note: Only one ARCHIVE attribute per document is necessary, in which case all signed objects are stored in a single JAR

HTML version of Basic Foils prepared 11 March 99

Foil 21 Using Signed Scripts (cont'd)

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Signed scripts may request expanded privileges

For example, to access private data: netscape.security.PrivilegeManager. enablePrivilege( "UniversalBrowserRead" );

"UniversalBrowserRead" is just one of many target privileges that may be requested

"UniversalBrowserAccess" is read and write
"UniversalFileRead" allows reading of client files

Unsigned Scripts and Signed Scripts can NOT be mixed in same document

One access methods in signed scripts from unsigned scripts (in a different layer or window) as long as signed script exports method and using script imports it

export signedmethod; in window signedwindow
import signedwindow.signedmethod; in another window
Use as signedmethod(arguments);

HTML version of Basic Foils prepared 11 March 99

Foil 22 LiveConnect

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

LiveConnect is a Netscape communications protocol between Java applets, plugins, and JavaScript

A JavaObject is a JavaScript wrapper around a Java object; a JSObject is a Java wrapper around a JavaScript object

MSIE3.0 does not support LiveConnect; instead, applets are treated as ActiveX objects, but fortunately the basic syntax is the similar

HTML version of Basic Foils prepared 11 March 99

Foil 23 LiveConnect (cont'd)

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

With LiveConnect:

JavaScript can access the classes of the browser's Java virtual machine
e.g. java.lang.System.out.println("A string"); // writes to Java Console
JavaScript can read/write the public variables of an applet and invoke public methods; same for Java-enabled plug-ins
Applets and Java-enabled plug-ins can read/write JavaScript object properties and invoke JavaScript functions

HTML version of Basic Foils prepared 11 March 99

Foil 24 LiveWire

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

LiveWire is Netscape's proprietary alternative to CGI, which lets developers create database applications in JavaScript (ECMAScript)

It consists of two components: a compiler and a server extension (both require Netscape's Enterprise Server)

HTML version of Basic Foils prepared 11 March 99

Foil 25 LiveWire (cont'd)

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Server-side JavaScript is used to connect to and interact with a database server

A server-side object called DbPool lets you (efficiently) connect to multiple databases or multiple times to a single database

Client-side JavaScript is contained in <SCRIPT> tags; server-side JavaScript is contained in <SERVER> tags and must be pre-compiled on the server

HTML version of Basic Foils prepared 11 March 99

Foil 26 References on XML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

XML Complete, Steven Holzner [McGraw-Hill, 1998, ISBN 0-07-913702-4]

"XML, Java, and the future of the Web", Jon Bosak, Sun Microsystems, 1997

"Weaving a Better Web", S. Mace, U. Flohr, R. Dobson, T. Graham, Byte, March 1998, pp.58-68

http://www.w3.org/UI/ W3C Consortium User Interface

Dynamic HTML, The Definitive Reference by Danny Goodman (1st ed, O'Reilly, 1998).

NPAC's HTML Resources page, http://www.npac.syr.edu/projects/tutorials/HTML/

HTML version of Basic Foils prepared 11 March 99

Foil 27 HTML Hypertext Markup Language Background

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

HTML version of Basic Foils prepared 11 March 99

Foil 28 History of HTML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

HTML = Hypertext Markup Language

the lingua franca of the World Wide Web

HTML 2.0 spec completed in Nov 95

HTML+ and HTML 3.0 never released

HTML 3.2 (Jan 97) added tables, applets, and other capabilities (approx. 70 tags)

HTML 4.0 spec released in Dec 97

HTML version of Basic Foils prepared 11 March 99

Foil 29 HTML Strengths

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

HTML is simple and thus easy to learn

HTML Supports Hyperlinks

It is relatively easy to write an HTML parser

Everybody knows it!

HTML version of Basic Foils prepared 11 March 99

Foil 30 HTML Shortcomings

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Extensibility: HTML does not allow users to define new tags and attributes

Structure: HTML can not be used to model hierarchical or object-oriented data structures, such as those found in databases

Validation: HTML does not support data validation or check for document structure

HTML version of Basic Foils prepared 11 March 99

Foil 31 Other Weaknesses

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

HTML supports only the simplest links, that is, one-way links to physical web resources

HTML does little to facilitate indexing, searching, and data interchange

HTML has weak internationalization

HTML has no technical typesetting capability

HTML does a poor job of differentiating between presentation and content

HTML version of Basic Foils prepared 11 March 99

Foil 32 Logical vs. Visual Design

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

The logical design of a document (content) should be separate from its visual design (presentation)

Separation of logical and visual design

promotes sound typography
encourages better writing
is more flexible

HTML mixes the logical with the visual

Internal Representation of Microsoft Word will/should be XML while "Save As HTML" should gives its visual rendering in HTML

HTML version of Basic Foils prepared 11 March 99

Foil 33 XML Extensible Markup Language

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

HTML version of Basic Foils prepared 11 March 99

Foil 34 What is XML?

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

XML = eXtensible Markup Language

XML is a subset of SGML -- Standard Generalized Markup Language, but unlike the latter, XML is specifically designed for the web

XML is used to define logical document structure

XML is not backward compatible with HTML, but the two coexist quite elegantly

XML can be thought of as an ASCII version of a database

HTML version of Basic Foils prepared 11 March 99

Foil 35 XML Compared with HTML and SGML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

XML is a compromise between the non-extensible, limited capabilities of HTML and the full power and complexity of SGML

XML Tags are converted to HTML (or other XML tags) by one or more Servers or clients

HTML < XML < SGML

(CSS) (XSL) (DSSSL)

XML is a kind of SGML Lite!

Original

XML

New XML

and perhaps some HTML

Newer XML

and perhaps more HTML

Newest XML

and perhaps all HTML

H T M L

HTML version of Basic Foils prepared 11 March 99

Foil 36 XML Language Elements

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Document Type Definition (DTD), which defines the tags and their relationships

Extensible Style Language (XSL) style sheets, which specify the presentation of the document

Extensible Link Language (XLL), which defines link-handling details

It will have scripting language e.g. ECMAScript

For example a link can be defined in XML as <LINK> <TITLE>XML Recommendation</TITLE> <URL> http://www.w3.org/TR/REC-xml </URL> <DESCRIPTION> The official XML spec from W3C </DESCRIPTION> </LINK>

HTML version of Basic Foils prepared 11 March 99

Foil 37 Dynamic HTML Hypertext Markup Language

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

HTML version of Basic Foils prepared 11 March 99

Foil 38 What is DHTML?

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

DHTML = Dynamic HTML

Capabilities of DHTML:

dynamic styles -- change the appearance (that is, presentation) of content on-the-fly
dynamic content -- change the content itself on-the-fly
dynamic positioning -- position page elements (such as images or text) on-the-fly

HTML version of Basic Foils prepared 11 March 99

Foil 39 Features of DHTML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

It is available now albeit in different versions for different browsers

It is an extension of HTML and therefore familiar

It addresses many of HTML's shortcomings

It is focussed at "visual display" of a document and so is orthogonal to XML

We can expect DHTML to change significantly in both implementation and syntax

in particular there will be an XML syntax version of VRML and HTML (XHTML draft February 24, 99 at http://www.w3.org/MarkUp/ )
The new version of DHTML will be built around a "document object model"

HTML version of Basic Foils prepared 11 March 99

Foil 40 Architecture of DHTML + XML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

3 Scenarios

HTML4

User Interacts

with HTML Changing Dynamically Client Side (JavaScript catches mouse

and keyboard

events and

interprets as

changed DOM components:

Browser

renders)

XML

HTML4

Server with XML Parser

XML

Some XML and some

HTML4

HTML4 or XML+HTML4 Browser

HTML version of Basic Foils prepared 11 March 99

Foil 41 Components of DHTML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

DHTML consists of the following:

1) HTML 4.0
2) Cascading Style Sheets (CSS) to attach dynamic properties to document components
3) Document Object Model (DOM) describing and identifying components of a document
4) Scripts (in JavaScript) able to change properties of document components and so implement dynamic structure

HTML version of Basic Foils prepared 11 March 99

Foil 42 HTML 4.0

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

The final spec for HTML 4.0 was released by W3C in December 1997

There are three flavors:

HTML 4.0 Strict -- Full use of Style Sheets
HTML 4.0 Transitional -- Adapt existing world
HTML 4.0 Frameset -- If need multiframe window

HTML 4.0 has 93 elements (10 deprecated) and 187 attributes (49 deprecated)

HTML version of Basic Foils prepared 11 March 99

Foil 43 HTML DTDs

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Version 3.2 DTD: define by <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" "http://www.w3.org/TR/REC-html32.html#dtd" >

Version 4.0 DTDs: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">

HTML version of Basic Foils prepared 11 March 99

Foil 44 HTML 4.0 Features

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

More multimedia options

Better printing facilities

Better table support, especially long tables

Internationalization and accessibility

Style sheets and scripting languages

Intrinsic events

Embedded and linked documents

A new <BUTTON> tag

HTML version of Basic Foils prepared 11 March 99

Foil 45 Intrinsic Events

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Most JavaScript 1.2 event handlers (except onAbort, onError, and the new window event handlers) are native to HTML 4.0

The <SCRIPT> tag is fully supported

A <NOSCRIPT> tag has been added

HTML version of Basic Foils prepared 11 March 99

Foil 46 Deprecated Elements

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Some elements (tags) of HTML 3.2 have been deprecated in 4.0, including: <FONT>, <BASEFONT>, <CENTER>, <S>, and <U>

Numerous attributes have been deprecated, including: ALIGN, BACKGROUND, BGCOLOR, LINK, COLOR, and SIZE

The <APPLET> tag has been deprecated!

HTML version of Basic Foils prepared 11 March 99

Foil 47 The <OBJECT> Tag

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Instead of <APPLET CODE="MyApplet.class" WIDTH=200 HEIGHT=300></APPLET> in HTML 4.0 we write <OBJECT CLASSID="MyApplet.class" CODETYPE="application/java" WIDTH=200 HEIGHT=300></OBJECT>

The <PARAM> tag is still supported

Nested objects are allowed

HTML version of Basic Foils prepared 11 March 99

Foil 48 Cascading Style Sheets

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

http://www.w3.org/Style/CSS/ is general link

Cascading Style Sheets (CSS1) allow more precise and consistent layout than previous HTML attributes such as <FONT>

http://www.w3.org/TR/REC-CSS1

Style sheets permit pages to inherit properties from other pages--in effect, they permit object-oriented document structure

CSS2 was released in May 98, and includes support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.

Aural rendering of web documents is needed for example with sight-impaired users, in-car applications, and language instruction
http://www.w3.org/TR/REC-CSS2/
Cascading Style Sheets Positioning (CSSP) is early "positioning proposal" which can be added to CSS1 before CSS2 implemented

HTML version of Basic Foils prepared 11 March 99

Foil 49 CSS1 (and CSS2) Features

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

CSS1 allows one to specify layout styles (size, color, position) and associate in flexible way with tags

Flexible placement of style information -- either in sheets (i.e. separate pages), attributes (style="..") or style statements in header of HTML page

Independence from specific scripting languages but natural link to JavaScript

Cascading style sheets i.e. one can have a hierarchy of style definitions from general to organization specific to user specific

allows good defaults with optional customization

Compact and so sensitive to network performance concerns

Maintainable as isolates style information

Works with XML and HTML

HTML version of Basic Foils prepared 11 March 99

Foil 50 Specification of Styles: External

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

A simple style sheet (in file "myStyle.css"): P.special { color: red; border: solid black; }

Now put a <LINK> tag in the <HEAD>: <LINK href="myStyle.css" rel="stylesheet" type="text/css">

In the <BODY>, type: <P class="special">A special paragraph!

HTML version of Basic Foils prepared 11 March 99

Foil 51 Embedded Styles

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Read in a style sheet and override a style: <HEAD> <STYLE type="text/css"> @import url(myStyle.css); H1 {text-align: center} </STYLE> </HEAD>

Color a paragraph (not recommended): <P STYLE="color: green">A green paragraph!

Selector

Declaration

HTML version of Basic Foils prepared 11 March 99

Foil 52 A Larger CSS Example

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

<HTML> <HEAD> <TITLE>title</TITLE>

<LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool.css" TITLE="Cool">

<STYLE TYPE="text/css">

@import url(http://style.com/basic.css);

H1 { color: blue }

H2.vivid {color:pink}

#myid {position:absolute; color:red; top:20; left:50; background-color:red; visibility:hidden}

</STYLE></HEAD><BODY>

<H1>Headline is blue</H1>

<P STYLE="color: green">While the paragraph is green.

<h2 class=vivid>And the secondary heading is Vivid</h2>

<div id=myid>

<h2>Default Color Positionable element</h2>

</div>

</BODY> </HTML>

HTML version of Basic Foils prepared 11 March 99

Foil 53 Document Object Model

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

W3C DOM (http://www.w3.org/DOM/ ) defines a platform-independent programmatic interface to web documents:

provides access to structured data
adds object orientation to page layout and design (HTML elements are objects with properties and methods)
is implemented with a scripting language
defines event model (not in level 1 DOM)
defines a way of navigating through component objects in a web page

Initially, DOM is bound to ECMAScript but is language neutral in design

Current Browsers implicitly define a DOM which is somewhat different between Microsoft and Netscape and between versions 4 and 5

HTML version of Basic Foils prepared 11 March 99

Foil 54 Hierarchical Object Components in a Web Page

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Here is an example of a source document encoded in HTML:

<HTML>

<TITLE>My home page</TITLE>

<BODY>

<H1>My home page</H1>

<P>Welcome to my home page! Let me tell you about my favorite composers:

<UL>

<LI> Elvis Costello

<LI> Johannes Brahms

<LI> Georges Brassens

</UL>

</BODY>

</HTML>

Component Objects in Web Page

HTML version of Basic Foils prepared 11 March 99

Foil 55 Use of Position Attributes in JavaScript

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Making dynamic pages with HTML and JavaScript requires two types of capabilities.

Identifying events of interest (the user interactions that will trigger dynamic structure) and processing
Dividing page up into identifiable components where we can separately:
- move around in x,y position
- move up and down a stack of pages (decide what's on top)
- change content and style of components

These capabilities EXIST in current browsers but are incomplete and different

More powerful "standards" are part of W3C DOM1 and DOM2 and presumably these will be adopted

In the meantime we adopt strategy which is supported by current browsers and can evolve to W3C DOM1,2

HTML version of Basic Foils prepared 11 March 99

Foil 56 DHTML 1) Define Layers -- I

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

The first step is to define different named entities in document.

The picture shows 6 entities labeled 0 1 2 3 4 5
0 is main window
Others subsidiary windows 1-ɱ
4 is layered above 3 and 5
There could be other hidden named entities -- either because they had CSS-P visibility attribute set to hidden or because they were completely underneath other named windows
Entities could either be scattered around -- seemingly at random or aligned precisely w.r.t. other positionable parts of document

HTML version of Basic Foils prepared 11 March 99

Foil 57 DHTML 1) Define Layers -- II

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

The position CSSP attribute takes values static (default) relative (position relative to where it "should be" in current "context") and absolute (position in current "context")

These are properties of essentially ALL document components in the "DOM of our dreams"

However in today's pragmatic world, one can only use for some HTML tags
<DIV> and <SPAN> (<<---- USE THESE!) are supported today by Microsoft and Netscape and are part of HTML4
<LAYER> is best "name" (so lets call them layers)and fully supported by Netscape; it is not part of HTML4 and not supported by Microsoft
<IFRAME> (internal frame) is not in Netscape4 but is in HTML4 and supported by Microsoft

HTML version of Basic Foils prepared 11 March 99

Foil 58 DHTML -- Decide on Browser

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

// Set Flags to determine which browser is which

WW_Netscape4 = true;

WW_Microsoft = false;

WW_oldbrowser = false;

WW_setbrowser();

function WW_setbrowser() { // Set Browser Flags

if( navigator.appName != "Netscape" ) {

WW_Netscape4 = false;

WW_Microsoft = true; }

if( navigator.appVersion < 4 ) {

WW_Netscape4 = false;

WW_Microsoft = false;

WW_oldbrowser = true; }

} // End WW_setbrowser()

HTML version of Basic Foils prepared 11 March 99

Foil 59 Define a Layer in a Document using <div></div>

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

<style type="text/css" >

#WWmessage1 {position:absolute; color:black; visibility:visible; left:200; top:450; }

</style>

</head>

<body onload="WW_pageisloaded();" >

<h1>This is Page for CPS616 DHTML</h1>

.... See page addon for full material (a form to specify layer properties) .....

<div id="WWmessage1" >

This is a Moving Block of Text<br>

Input (left,top etc.) and see!

</div>

Style

Good Practice for all processing which requires that page elements be fully defined

}

A movable layer

HTML version of Basic Foils prepared 11 March 99

Foil 60 Set Positions of a Layer in DHTML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

function WW_getlayer(idstring) { // Find layer with given label

if( WW_Netscape4 ) {

return eval("document." + idstring); }

else { // Microsoft

return eval("document.all." + idstring); }

} // End WW_getlayer()

function WW_layershiftto(obj,x,y) { // Move layer to given position

if(WW_Netscape4 ) {

obj.moveTo(x,y); }

else { // Microsoft

obj.style.pixelLeft = x;

obj.style.pixelTop = y; }

} // End WW_layershiftto(obj,x,y)

WW_messageobject = WW_getlayer('WWmessage1');

WW_layershiftto(WW_messageobject,parseInt(x),parseInt(y));

id attribute in <div> #WWmessage1 in STYLE

Returned by WW_getlayer

Read in from form as text

HTML version of Basic Foils prepared 11 March 99

Foil 61 Set Other Properties of a Layer in DHTML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

WW_setbackgroundcolor(WW_messageobject,cc);

function WW_setbackgroundcolor(obj,actualcolor) {

if( WW_Netscape4 ) {

obj.bgColor = actualcolor; }

else {

obj.style.backgroundColor = actualcolor; }

return;

} // End WW_setbackgroundcolor(obj,actualcolor)

WW_layertogeneric(WW_messageobject,75) // Set stacking index to 75

// At any point of window, object with largest stacking(z) index is shown

function WW_layertogeneric(obj,stackingindex) {

if(WW_Netscape4 ) {

obj.zIndex = stackingindex; }

else {

obj.style.zIndex = stackingindex; }

} // End WW_layertogeneric(obj)

ASCII string such as "pink" setting dynamically object

background color

One can separately

choose to hide layer

or make it visible

HTML version of Basic Foils prepared 11 March 99

Foil 62 Changing Content of a DHTMLLayer

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

function processbutton3() { // Process content from form text field

var inputstuff = WW_formlayer.document.classtest.textchoice.value;

if(WW_Netscape4) { // Netscape

WW_messageobject.document.open();

WW_messageobject.document.writeln(inputstuff);

WW_messageobject.document.close(); }

else { // Microsoft is much more elegant

WW_messageobject.innerHTML = inputstuff;

WW_messageobject.style.width = 300; }

// Seemingly Netscape clips text layer to width of text; Microsoft to width of window; both clip vertical height to that of text; this is typical difference between

today's erratic implementations of DHTML

WW_layertotop(WW_messageobject); // Set layer zindex to 1000

WW_layershow(WW_messageobject); // Make layer visible

return;

} // End processbutton3()

Note in Netscape full address is

window.document. layer.document. property

HTML version of Basic Foils prepared 11 March 99

Foil 63 Capturing Events in Today's DHTML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

function WW_pageisloaded() { // Initialize when page loaded

if(WW_oldbrowser)

return;

if( WW_Netscape4 ) { // Netscape

window.captureEvents(Event.CLICK);

window.onclick=WW_processclick; }

else { // Microsoft

document.onclick=WW_processclick; }

WW_pointerlayer = WW_getlayer('WWpointerblock'); // Pointer

WW_pointerlayer.onmouseover = WW_overpointerblock; // Mouse Over

WW_pointerlayer.onmouseout = WW_offpointerblock; // Mouse Out

WW_pointermessageobject = WW_getlayer('WWpointermessage');

if(!WW_Netscape4 ) { // Microsoft set layer width

WW_pointermessageobject.style.width =200;

WW_pointerlayer.style.width=64; }

return;

} // End WW_pageisloaded()

Capture ALL Click events and set handler

Set event handlers for mouse events captured

in conventional way

HTML version of Basic Foils prepared 11 March 99

Foil 64 A User Event Handler in DHTML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

function WW_processclick(e) { // Process Mouse Click

var clickX = WW_eventx(e); // Extract Mouse Click Position

var clickY = WW_eventy(e);

// Position Top right of pointer at mouse click

var width = WW_getlayerwidth(WW_pointerlayer);

WW_layershiftto(WW_pointerlayer,clickX-width,clickY);

WW_layershow(WW_pointerlayer); // Make pointer visible

WW_layertotop(WW_pointerlayer); // set zindex=1000

WW_offpointerblock(); // remove stray mouseover messages

window.status = 'click'; // flag action

// true implies that you continue conventional processing i.e.

return true; // that clicks on links are recognized

} // End WW_processclick(e)

HTML version of Basic Foils prepared 11 March 99

Foil 65 Event Processing Models

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

In Netscape, the event is passed as an argument to the handler as in WW_processclick(e)

While in Microsoft IE, event properties are stored in a single window property window.event

So in WW_eventx(e), the argument is ignored in IE

function WW_eventx(e) { // return x value of event

if(WW_Netscape4 ) {

return e.pageX; } // Netscape

else { return window.event.clientX; } // Microsoft

} // End WW_eventx(e)

Also there is meant to be a different event handling model in browsers

In Microsoft IE, events are bubbled up through the containing objects until document is finally reached
In Netscape4, events are first processed by window and then passed down through container hierarchy. return false stops this sequence
For both browsers, if you put return false in WW_processclick(e), then clicking on link will NOT load new page

HTML version of Basic Foils prepared 11 March 99

Foil 66 Calculating Geometry on Screen

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

var pointerheight = WW_getlayerheight(WW_pointerlayer);

var localy = WW_getlayertop(WW_pointerlayer) + pointerheight;

var localx = WW_getlayerleft(WW_pointerlayer);

var messageheight = WW_getlayerheight(WW_pointermessageobject);

var messagewidth = WW_getlayerwidth(WW_pointermessageobject);

var windowwidth = WW_getwindowwidth();

var windowheight = WW_getwindowheight();

if( localx + messagewidth > windowwidth)

localx = windowwidth - messagewidth;

if( localy + messageheight > windowheight)

localy = WW_getlayertop(WW_pointerlayer) - messageheight;

This code, uses sizes of window, pointer and mouse over message to position latter so it always visible

Initial choice is starting below bottom left corner of pointer
If no room to right, the shift so ends at window right boundary
If no room below pointer, place above it

Window Width and Height

HTML version of Basic Foils prepared 11 March 99

Foil 67 DHTML Summary

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

Current DOM and implementations are incomplete and inconsistent but illustrate the basic ideas

Layering multiple pages in a single window (remember we use layers to refer to any manipulatable container of HTML)
Navigating through pages: we did this by just choosing particular layers but one can loop over layers and/or descend through hierarchy of layers
Event Capturing (user event handlers)
Setting properties of layers which is done in a way that is based on style sheets.

Can expect to be of growing importance and can effectively get started today

Based on Goodman's book, we can develop a general library which can illustrate you from browser changes and from the new W3C DOM
Future will be even better ........

HTML version of Basic Foils prepared 11 March 99

Foil 68 Everywhere HTML

From Overview of JavaScript II -- From Cookies to Dynamical HTML CPS616 Technologies of the Information Age -- Spring Semester 99. *

Full HTML Index

A wysiwyg HTML editor called NetObjects Fusion generates dynamic web pages in "Everywhere HTML"

By using a combination of HTML, CSS-positioning and JavaScript, pages written in Everywhere HTML work properly on both Internet Explorer 4.0 and Communicator 4.0 (or so it is claimed)

If you have any comments about this server, send e-mail to webmaster@npac.syr.edu.

Page produced by wwwfoil on Thu Mar 11 1999