javascript & dhtml ine2720 web application software development essential materials

JavaScript & DHTMLJavaScript & DHTML

INE2720INE2720

Web Application Software Web Application Software DevelopmentDevelopment

Essential MaterialsEssential Materials

INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment

All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.

22

Outline – Part DOutline – Part D

Introducing DHTMLIntroducing DHTML– Styles and LayersStyles and Layers– Dynamic PositioningDynamic Positioning– Moving objects in 3DMoving objects in 3D– Internet Explorer FiltersInternet Explorer Filters

Using DHTML and CSS ToolsUsing DHTML and CSS Tools Cool JavaScript SitesCool JavaScript Sites JavaScript and DHTML ReferenceJavaScript and DHTML Reference SummarySummary



33

Dynamic HTMLDynamic HTML

Everyone is a Web Designer.Everyone is a Web Designer.– Learning DHTML, CSS and JavaScript is Learning DHTML, CSS and JavaScript is

your next step into the web design world.your next step into the web design world. ““DHTMLDHTML” is a term used by some ” is a term used by some

vendors to describe the combination of vendors to describe the combination of HTML, style sheets and scripts that HTML, style sheets and scripts that allows documents to be animated.allows documents to be animated.

Web pages can be made to respond to Web pages can be made to respond to users’ actions.users’ actions.

Problem: How to achieve “Problem: How to achieve “DynamicDynamic”?”?



44

DHTML advantages / DHTML advantages / disadvantagesdisadvantages Supported by most browsersSupported by most browsers Small file sizes (faster than Flash)Small file sizes (faster than Flash) No plug-ins requiredNo plug-ins required Easy to learn (learn HTML, JavaScript)Easy to learn (learn HTML, JavaScript) Faster web experience (change the Faster web experience (change the

page content without load new pages)page content without load new pages) Browser and OS incompatibilitiesBrowser and OS incompatibilities

– The implementation of CSS, DOM varies The implementation of CSS, DOM varies from browser to browserfrom browser to browser



55

What makes a web site What makes a web site dynamic?dynamic? InteractivityInteractivity – adapt and react to the – adapt and react to the

visitor’s actions as quick as possible.visitor’s actions as quick as possible. SynchronicitySynchronicity – bring together relevant – bring together relevant

information from a variety of sources.information from a variety of sources. FlexibilityFlexibility – give the visitor different – give the visitor different

ways to find information in the site.ways to find information in the site. AdaptabilityAdaptability – adjusts to cater to – adjusts to cater to

individual visitor’s needs.individual visitor’s needs. ActivityActivity – uses motion and sound to – uses motion and sound to

draw user’s attention to changes on draw user’s attention to changes on the site.the site.



66

The Role of each The Role of each component in DHTMLcomponent in DHTML With CSSWith CSS, we can change the style , we can change the style

of any HTML elements.of any HTML elements. With DOMWith DOM, we can have a map on , we can have a map on

every elements in the HTML page.every elements in the HTML page. With JavaScriptWith JavaScript, we can access , we can access

and have operations on the and have operations on the elements in the DOM tree.elements in the DOM tree.

With event handlerWith event handler, we can , we can execute the predefined scripts at execute the predefined scripts at any time.any time.



77

Cross-Browser DHTMLCross-Browser DHTML

Netscape 4.xNetscape 4.x Cross-Browser Cross-Browser DHTMLDHTML

Internet Internet Explorer 4.xExplorer 4.x

JavaScript JavaScript Style Sheets Style Sheets (JSS) (JSS) Netscape Netscape Layers Layers (positioning, (positioning, visibility)visibility)

CSS1, CSS2, CSS1, CSS2, CSS-PositioningCSS-PositioningJavaScriptJavaScriptDOMDOM

Visual Filters Visual Filters allow you to allow you to apply visual apply visual effects to text effects to text or graphicsor graphicsData BindingData Binding



88

Open a new browser Open a new browser windowwindow Pop-up windows are useful for Pop-up windows are useful for

navigation controls, navigation controls, advertisements, supplementary advertisements, supplementary contents.contents.

You can open a window, close the You can open a window, close the window, or toggle the window.window, or toggle the window.



99

Dynamic Technique:Dynamic Technique:Change CSS StylesChange CSS Styles You can change or add to any CSS property You can change or add to any CSS property

defined for any object on the screen.defined for any object on the screen.

onMouseOver()



1010

Change Background Change Background ColorColor

<html><head><html><head><script language="JavaScript"><script language="JavaScript">function bgChange(bg)function bgChange(bg){{ document.body.style.background=bg; }document.body.style.background=bg; }</script></head></script></head><body><b>Mouse over these table cells, and the background color will <body><b>Mouse over these table cells, and the background color will

change</b>change</b><table width="300" height="100"><table width="300" height="100"> <tr><tr> <td onmouseover="<td onmouseover="bgChangebgChange('red')" ('red')"

onmouseout="onmouseout="bgChangebgChange('transparent')" bgcolor="red">('transparent')" bgcolor="red"> </td></td> <td onmouseover="<td onmouseover="bgChangebgChange('blue')" ('blue')"

onmouseout="onmouseout="bgChangebgChange('transparent')" bgcolor="blue">('transparent')" bgcolor="blue"> </td></td> <td onmouseover="<td onmouseover="bgChangebgChange('green')" ('green')"

onmouseout="onmouseout="bgChangebgChange('transparent')” bgcolor="green">('transparent')” bgcolor="green"> </td></td></tr></tr></table></table></body></html></body></html>



1111

CSS PropertiesCSS Properties

Reference: Reference: http://www.library.utoronto.ca/HTMLcourses/DHTML/properties1.htmlhttp://www.library.utoronto.ca/HTMLcourses/DHTML/properties1.html



1212

Dynamic PositioningDynamic Positioning

It means the HTML elements can be It means the HTML elements can be positioned by using JavaScript.positioned by using JavaScript.

The element is moved by The element is moved by manipulating any of the “top”, “left”, manipulating any of the “top”, “left”, “right” and “bottom” CSS properties.“right” and “bottom” CSS properties.

The more table you use, the slower The more table you use, the slower your page displays.your page displays.

Positioning elements with CSS is Positioning elements with CSS is more accurate than tables and the more accurate than tables and the results are displayed much faster.results are displayed much faster.



1313

Moving Objects from Moving Objects from Point to PointPoint to Point Using CSS, you can change the Using CSS, you can change the

position of an object on the screen.position of an object on the screen.



1414

Moving Objects in 3-DMoving Objects in 3-D

By specifying the z-index, we can By specifying the z-index, we can put the objects in 3-D manner.put the objects in 3-D manner.



1515

Moving the browser Moving the browser windowwindow You can set an initial position of multiple windows.You can set an initial position of multiple windows.



1616

IE DHTML Visual IE DHTML Visual ControlsControls The blurOn() Filter causes the The blurOn() Filter causes the

image to blur on the screen.image to blur on the screen.



1717

IE Transition FiltersIE Transition Filters

Produce transitions between web pages.Produce transitions between web pages.

TransitionTransition Reference Reference ##

Box InBox In 00

Box OutBox Out 11

Circle outCircle out 33

Wipe upWipe up 44

Wipe down Wipe down 55

Wipe rightWipe right 66

Wipe leftWipe left 77

Random Random DissolveDissolve

1212

RandomRandom 2323



1818

Adding last modified Adding last modified DateDate

<html><html>

<head><head>

<title>Enter the title of your HTML document here</title><title>Enter the title of your HTML document here</title>

</head></head>

<body><body>

<script language=“JavaScript”><script language=“JavaScript”>

document.write(“Page last modified: “ + document.write(“Page last modified: “ + document.lastModified)document.lastModified)

</script></script>

</body></body>

</html></html>



1919

Creating a Sliding Creating a Sliding MenuMenu Allow visitors to pull out menus or put them away.Allow visitors to pull out menus or put them away.



2020

Follow the Mouse Follow the Mouse PointerPointer The mouse pointer is part of the The mouse pointer is part of the

user interface that gives designer user interface that gives designer controls.controls.



2121

Application: Using Application: Using JavaScript to Make Pages JavaScript to Make Pages DynamicDynamic Modifying Images DynamicallyModifying Images Dynamically

– The The document.imagesdocument.images property property contains an array of contains an array of ImageImage objects objects corresponding to each IMG element corresponding to each IMG element in the current documentin the current document

– To display a new image, simply set To display a new image, simply set the SRC property of an existing the SRC property of an existing image to a string representing a image to a string representing a different image filedifferent image file



2222

Modifying Images, Modifying Images, ExampleExample The following function changes the first image The following function changes the first image

in a documentin a document

function changeImage() {function changeImage() { document.images[0].src = "images/new-document.images[0].src = "images/new-

image.gif";image.gif"; }}

Referring to images by name is easier:Referring to images by name is easier:

<img src="cool-image.jpg" name<img src="cool-image.jpg" name="cool"="cool" width=75 height=25>width=75 height=25> function improveImage() {function improveImage() { document.images[document.images["cool""cool"].src = "way-cool.jpg";].src = "way-cool.jpg"; }}

2323

Modifying Images: A Modifying Images: A Clickable Image Button, Clickable Image Button, ExampleExample<script language=“JavaScript"><script language=“JavaScript"><!--<!--imageFiles = new Array("images/Button1-Up.gif",imageFiles = new Array("images/Button1-Up.gif", "images/Button1-Down.gif","images/Button1-Down.gif", "images/Button2-Up.gif","images/Button2-Up.gif", "images/Button2-Down.gif");"images/Button2-Down.gif");imageObjects = new Array(imageFiles.length);imageObjects = new Array(imageFiles.length);for(var i=0; i<imageFiles.length; i++) {for(var i=0; i<imageFiles.length; i++) { imageObjects[i] = new Image(150, 25);imageObjects[i] = new Image(150, 25); imageObjects[i].src = imageFiles[i];imageObjects[i].src = imageFiles[i];}}

function setImage(name, image) {function setImage(name, image) { document.images[name].src = image;document.images[name].src = image;}}



2424

Modifying Images: A Modifying Images: A Clickable Image Button, Clickable Image Button, ExampleExamplefunction clickButton(name, grayImage) {function clickButton(name, grayImage) { var origImage = document.images[name].src;var origImage = document.images[name].src; setImage(name, grayImage);setImage(name, grayImage); var resetString = var resetString = "setImage('" + name + "', '" + origImage + "')";"setImage('" + name + "', '" + origImage + "')"; setTimeout(resetString, 100);setTimeout(resetString, 100);}}// --></script>// --></script></head>...</head>...<a href="location1.html"<a href="location1.html" onMouseOver="clickButton('Button1', 'images/Button1-Down.gif')"onMouseOver="clickButton('Button1', 'images/Button1-Down.gif')">><img src="images/Button1-Up.gif" name="Button1"<img src="images/Button1-Up.gif" name="Button1" width=150 height=25></A>width=150 height=25></A><a href="location2.html"<a href="location2.html" onMouseOver="clickButton('Button2', 'images/Button2-Down.gif')"onMouseOver="clickButton('Button2', 'images/Button2-Down.gif')">><img src="images/Button2-Up.gif" name="Button2"<img src="images/Button2-Up.gif" name="Button2" width=150 height=25></A>width=150 height=25></A>......



2525

Highlighting Images Highlighting Images Under the Mouse, Under the Mouse, ExampleExample<html><html>

<head> <title>High Peaks Navigation Bar</title><head> <title>High Peaks Navigation Bar</title>

<script language=“JavaScript"><script language=“JavaScript">

<!—<!—

// Given "Foo", returns "images/Foo.gif".// Given "Foo", returns "images/Foo.gif".

function function regularImageFile(imageName)regularImageFile(imageName) { {

return("images/" + imageName + ".gif");return("images/" + imageName + ".gif");

}}

// Given "Bar", returns "images/Bar-Negative.gif".// Given "Bar", returns "images/Bar-Negative.gif".

function function negativeImageFile(imageName)negativeImageFile(imageName) { {

return("images/" + imageName + "-Negative.gif");return("images/" + imageName + "-Negative.gif");

}}



2626

Highlighting Images Highlighting Images Under the Mouse, Under the Mouse, Example, cont.Example, cont.

// Cache image at specified index. E.g., given index 0,// Cache image at specified index. E.g., given index 0,// take imageNames[0] to get "Home". Then preload // take imageNames[0] to get "Home". Then preload // images/Home.gif and images/Home-Negative.gif.// images/Home.gif and images/Home-Negative.gif.function cacheImages(index) {function cacheImages(index) { regularImageObjects[index] = new Image(150, 25);regularImageObjects[index] = new Image(150, 25); regularImageObjects[index].src = regularImageFile(imageNames[index]);regularImageObjects[index].src = regularImageFile(imageNames[index]); negativeImageObjects[index] = new Image(150, 25);negativeImageObjects[index] = new Image(150, 25); negativeImageObjects[index].src = negativeImageFile(imageNames[index]);negativeImageObjects[index].src = negativeImageFile(imageNames[index]);}}imageNames = new Array("Home", "Tibet", "Nepal", "Austria", "Switzerland");imageNames = new Array("Home", "Tibet", "Nepal", "Austria", "Switzerland");regularImageObjects = new Array(imageNames.length);regularImageObjects = new Array(imageNames.length);negativeImageObjects = new Array(imageNames.length);negativeImageObjects = new Array(imageNames.length);// Put images in cache for fast highlighting.// Put images in cache for fast highlighting.for(var i=0; i<imageNames.length; i++) {for(var i=0; i<imageNames.length; i++) { cacheImages(i);cacheImages(i);}}



2727

Highlighting Images Highlighting Images Under the Mouse, Under the Mouse, Example, cont.Example, cont.......

function highlight(imageName) {function highlight(imageName) { document.images[imageName].src = negativeImageFile(imageName);document.images[imageName].src = negativeImageFile(imageName);}}

function unHighlight(imageName) {function unHighlight(imageName) { document.images[imageName].src = regularImageFile(imageName);document.images[imageName].src = regularImageFile(imageName);}}// -->// --></script></head></script></head><body><body><table><table> <tr><td><a href="Tibet.html" target="Main"<tr><td><a href="Tibet.html" target="Main" onMouseOver="onMouseOver="highlight('Tibet')highlight('Tibet')" onMouseOut="" onMouseOut="unHighlight('Tibet')unHighlight('Tibet')"">> <img src="images/Tibet.gif" name="Tibet“ width=150 height=25 <img src="images/Tibet.gif" name="Tibet“ width=150 height=25

border=0>border=0> </a></a>......



2828

Highlighting Images Highlighting Images Under the Mouse, Under the Mouse, ResultResult



2929

Application: Using Application: Using JavaScript to Interact with JavaScript to Interact with FramesFrames IdeaIdea

– The default The default WindowWindow object contains a object contains a framesframes property holding an array of property holding an array of frames (other frames (other WindowWindow objects) objects) contained by the current window or contained by the current window or frame. frame. It also has It also has parentparent and and toptop properties properties

referring to the directly enclosing frame referring to the directly enclosing frame or window and the top-level window, or window and the top-level window, respectively. respectively.

All of the properties of All of the properties of WindowWindow can be can be applied to any of these entries.applied to any of these entries.



3030

Displaying a URL in a Displaying a URL in a Particular Frame, Particular Frame, ExampleExample

<HTML><HTML>

<HEAD><HEAD>

<TITLE>Show a URL</TITLE><TITLE>Show a URL</TITLE>

</HEAD></HEAD>

<FRAMESET ROWS="150, *"><FRAMESET ROWS="150, *">

<FRAME SRC="GetURL.html" NAME="<FRAME SRC="GetURL.html" NAME="inputFrameinputFrame">">

<FRAME SRC="DisplayURL.html" <FRAME SRC="DisplayURL.html" NAME="NAME="displayFramedisplayFrame">">

</FRAMESET></FRAMESET>

</HTML></HTML>



3131

Displaying a URL in a Displaying a URL in a Particular Frame, Example, Particular Frame, Example, cont.cont.<html><head><title>Choose a URL</title><html><head><title>Choose a URL</title>

<script language=“JavaScript"><script language=“JavaScript">

function showURL() {function showURL() {

var url = document.urlForm.urlField.value;var url = document.urlForm.urlField.value;

// or parent.frames["displayFrame"].location = url;// or parent.frames["displayFrame"].location = url;

parent.displayFrame.location = url;parent.displayFrame.location = url;

}}

function preloadUrl() {function preloadUrl() {

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

document.urlForm.urlField.value = "http://home.netscape.com/";document.urlForm.urlField.value = "http://home.netscape.com/";

} else {} else {

document.urlForm.urlField.value = "http://www.microsoft.com/";document.urlForm.urlField.value = "http://www.microsoft.com/";

}}

}}

<body onLoad="preloadUrl()"><body onLoad="preloadUrl()">

<h1 align=“center">Choose a URL</h1><h1 align=“center">Choose a URL</h1>

<center><form name="urlForm"><center><form name="urlForm">

URL: <input type=“text" name="urlField" size=35>URL: <input type=“text" name="urlField" size=35>

<input type=“button" value="Show URL" <input type=“button" value="Show URL" onClick="showURL()"onClick="showURL()">>

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



3232

Displaying a URL in a Displaying a URL in a Particular Frame, Particular Frame, ResultResult



3333

Giving a Frame the Giving a Frame the Input Focus, ExampleInput Focus, Example If JavaScript is manipulating the frames, the If JavaScript is manipulating the frames, the

fix is easy: just add a call to focus in showUrl:fix is easy: just add a call to focus in showUrl:function showURL() {function showURL() {

var url = document.urlForm.urlField.value;var url = document.urlForm.urlField.value;parent.displayFrame.location = url;parent.displayFrame.location = url;// Give frame the input focus// Give frame the input focusparent.displayFrame.focus();parent.displayFrame.focus();

}}

Fixing the problem in regular HTML Fixing the problem in regular HTML documents is a bit more tedious documents is a bit more tedious – Requires adding Requires adding onClickonClick handlers that call focus to handlers that call focus to

each and every occurrence of each and every occurrence of AA and and AREAAREA that that includes a includes a TARGETTARGET, and a similar , and a similar onSubmitonSubmit handler handler to each to each FORMFORM that uses that uses TARGETTARGET



3434

Using DHTML and CSS Using DHTML and CSS ToolsTools Adobe GoLiveAdobe GoLive

– A complete HTML creation packageA complete HTML creation package– An easy-to-use environment for An easy-to-use environment for

JavaScript editing, CSS and DHTML.JavaScript editing, CSS and DHTML. Macromedia DreamweaverMacromedia Dreamweaver

– Includes a bevy of other tools such Includes a bevy of other tools such as FTP, site management.as FTP, site management.

– Allows you to add Flash objects.Allows you to add Flash objects.



3535

Cool JavaScript SitesCool JavaScript Sites

http://http://www.dynamicdrive.comwww.dynamicdrive.com//

– Provides DHTML script examplesProvides DHTML script examples http://http://javascript.internet.comjavascript.internet.com//

– JavaScript examples and get the sourceJavaScript examples and get the source http://www.js-examples.comhttp://www.js-examples.com//

– JavaScript examplesJavaScript examples http://http://

developer.netscape.com/docs/examples/javascript.htmldeveloper.netscape.com/docs/examples/javascript.html

– JavaScript examples from NetscapeJavaScript examples from Netscape http://http://www.jsworkshop.comwww.jsworkshop.com//

– JavaScript WorkshopJavaScript Workshop http://http://www.glassdog.comwww.glassdog.com//

– An entertaining place for learning web designAn entertaining place for learning web design



3636

JavaScript ReferencesJavaScript References

http://www.w3.orghttp://www.w3.org– Resources of all standardsResources of all standards

http://http://www.buildingtheWeb.comwww.buildingtheWeb.com– A well-structured websiteA well-structured website

http://http://www.htmlhelp.comwww.htmlhelp.com– HTML help by the web design groupHTML help by the web design group

http://http://www.webreview.comwww.webreview.com– Includes coding, design tips, editorialsIncludes coding, design tips, editorials

http://http://www.webreference.comwww.webreference.com– In-depth articles on DHTML, CSS, …In-depth articles on DHTML, CSS, …

http://www.faqts.com/knowledge_base/index.phtml/fidhttp://www.faqts.com/knowledge_base/index.phtml/fid/53/53– FAQs for DHTML, CSS, JavaScript, …FAQs for DHTML, CSS, JavaScript, …



3737

SummarySummary

Learnt the basics of JavaScript:Learnt the basics of JavaScript:– Variable, Data Types, Flow Control, LoopsVariable, Data Types, Flow Control, Loops– Function, Event, ObjectsFunction, Event, Objects– Exception and Error HandlingException and Error Handling

JavaScript permits you to:JavaScript permits you to:– Make pages more dynamicMake pages more dynamic– Validate HTML form inputValidate HTML form input– Manipulate cookiesManipulate cookies– Control framesControl frames– Combine with CSS, DOM to build DHTML Combine with CSS, DOM to build DHTML

pagespages



3838

ReferencesReferences

Web Warrior Series - JavaScriptWeb Warrior Series - JavaScript JavaScript 1.5 by exampleJavaScript 1.5 by example SAMS – JavaScriptSAMS – JavaScript JavaScript GoodiesJavaScript Goodies DHTML and CSS for the WWWDHTML and CSS for the WWW

The End.The End. Thank you for patience!Thank you for patience!

javascript & dhtml ine2720 web application software development essential materials

Documents

web pages

dhtml reference javascript

web designer

web site dynamic

dynamic html

html elements

dhtml styles

learning dhtml