Scribd
Upload
55 views38 pages

Javascript & DHTML

Uploaded by

Madhavi Hosur
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
55 views38 pages

Javascript & DHTML

Uploaded by

Madhavi Hosur
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 38

JavaScript & DHTML

INE2720
Web Application Software Development

Essential Materials
Outline – Part D
 Introducing DHTML
– Styles and Layers
– Dynamic Positioning
– Moving objects in 3D
– Internet Explorer Filters
 Using DHTML and CSS Tools
 Cool JavaScript Sites
 JavaScript and DHTML Reference
 Summary
INE2720 – Web Application Software Development 2 All copyrights reserved by C.C. Cheung 2003.
Dynamic HTML
 Everyone is a Web Designer.
– Learning DHTML, CSS and JavaScript is your next
step into the web design world.
 “DHTML” is a term used by some vendors to
describe the combination of HTML, style
sheets and scripts that allows documents to
be animated.
 Web pages can be made to respond to
users’ actions.
 Problem: How to achieve “Dynamic”?
INE2720 – Web Application Software Development 3 All copyrights reserved by C.C. Cheung 2003.
DHTML advantages /
disadvantages
 Supported by most browsers
 Small file sizes (faster than Flash)
 No plug-ins required
 Easy to learn (learn HTML, JavaScript)
 Faster web experience (change the
page content without load new pages)
 Browser and OS incompatibilities
– The implementation of CSS, DOM varies
from browser to browser
INE2720 – Web Application Software Development 4 All copyrights reserved by C.C. Cheung 2003.
What makes a web site
dynamic?
 Interactivity – adapt and react to the
visitor’s actions as quick as possible.
 Synchronicity – bring together relevant
information from a variety of sources.
 Flexibility – give the visitor different ways to
find information in the site.
 Adaptability – adjusts to cater to individual
visitor’s needs.
 Activity – uses motion and sound to draw
user’s attention to changes on the site.
INE2720 – Web Application Software Development 5 All copyrights reserved by C.C. Cheung 2003.
The Role of each
component in DHTML
 With CSS, we can change the style of
any HTML elements.
 With DOM, we can have a map on
every elements in the HTML page.
 With JavaScript, we can access and
have operations on the elements in
the DOM tree.
 With event handler, we can execute
the predefined scripts at any time.
INE2720 – Web Application Software Development 6 All copyrights reserved by C.C. Cheung 2003.
Cross-Browser DHTML

Netscape 4.x Cross-Browser Internet Explorer


DHTML 4.x
JavaScript CSS1, CSS2, Visual Filters
Style Sheets CSS-Positioning allow you to apply
(JSS) JavaScript visual effects to
Netscape DOM text or graphics
Layers Data Binding
(positioning,
visibility)

INE2720 – Web Application Software Development 7 All copyrights reserved by C.C. Cheung 2003.
Open a new browser
window
 Pop-up windows are useful for
navigation controls, advertisements,
supplementary contents.
 You can open a window, close the
window, or toggle the window.

INE2720 – Web Application Software Development 8 All copyrights reserved by C.C. Cheung 2003.
Dynamic Technique:
Change CSS Styles
 You can change or add to any CSS property
defined for any object on the screen.

onMouseOver()

INE2720 – Web Application Software Development 9 All copyrights reserved by C.C. Cheung 2003.
Change Background Color
<html><head>
<script language="JavaScript">
function bgChange(bg)
{ document.body.style.background=bg; }
</script></head>
<body><b>Mouse over these table cells, and the background color will change</b>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('red')"
onmouseout="bgChange('transparent')" bgcolor="red">
</td>
<td onmouseover="bgChange('blue')"
onmouseout="bgChange('transparent')" bgcolor="blue">
</td>
<td onmouseover="bgChange('green')"
onmouseout="bgChange('transparent')” bgcolor="green">
</td>
</tr>
</table>
</body></html>
INE2720 – Web Application Software Development 10 All copyrights reserved by C.C. Cheung 2003.
CSS Properties

 Reference: http://www.library.utoronto.ca/HTMLcourses/DHTML/properties1.html
INE2720 – Web Application Software Development 11 All copyrights reserved by C.C. Cheung 2003.
Dynamic Positioning
 It means the HTML elements can be
positioned by using JavaScript.
 The element is moved by manipulating
any of the “top”, “left”, “right” and
“bottom” CSS properties.
 The more table you use, the slower your
page displays.
 Positioning elements with CSS is more
accurate than tables and the results are
displayed much faster.
INE2720 – Web Application Software Development 12 All copyrights reserved by C.C. Cheung 2003.
Moving Objects from
Point to Point
 Using CSS, you can change the
position of an object on the screen.

INE2720 – Web Application Software Development 13 All copyrights reserved by C.C. Cheung 2003.
Moving Objects in 3-D
 By specifying the z-index, we can put
the objects in 3-D manner.

INE2720 – Web Application Software Development 14 All copyrights reserved by C.C. Cheung 2003.
Moving the browser
window
 You can set an initial position of multiple windows.

INE2720 – Web Application Software Development 15 All copyrights reserved by C.C. Cheung 2003.
IE DHTML Visual Controls
 The blurOn() Filter causes the image
to blur on the screen.

INE2720 – Web Application Software Development 16 All copyrights reserved by C.C. Cheung 2003.
IE Transition Filters
 Produce transitions between web pages.

Transition Reference #
Box In 0
Box Out 1
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Random Dissolve 12
Random 23
INE2720 – Web Application Software Development 17 All copyrights reserved by C.C. Cheung 2003.
Adding last modified Date
<html>
<head>
<title>Enter the title of your HTML document here</title>
</head>
<body>
<script language=“JavaScript”>
document.write(“Page last modified: “ + document.lastModified)
</script>
</body>
</html>

INE2720 – Web Application Software Development 18 All copyrights reserved by C.C. Cheung 2003.
Creating a Sliding Menu
 Allow visitors to pull out menus or put them away.

INE2720 – Web Application Software Development 19 All copyrights reserved by C.C. Cheung 2003.
Follow the Mouse Pointer

 The mouse pointer is part of the user


interface that gives designer controls.

INE2720 – Web Application Software Development 20 All copyrights reserved by C.C. Cheung 2003.
Application: Using JavaScript to
Make Pages Dynamic
 Modifying Images Dynamically
– The document.images property
contains an array of Image objects
corresponding to each IMG element in
the current document
– To display a new image, simply set the
SRC property of an existing image to a
string representing a different image file

INE2720 – Web Application Software Development 21 All copyrights reserved by C.C. Cheung 2003.
Modifying Images,
Example
 The following function changes the first image in a
document
function changeImage() {
document.images[0].src = "images/new-image.gif";
}

 Referring to images by name is easier:


<img src="cool-image.jpg" name="cool"
width=75 height=25>
function improveImage() {
document.images["cool"].src = "way-cool.jpg";
}
INE2720 – Web Application Software Development 22 All copyrights reserved by C.C. Cheung 2003.
Modifying Images: A Clickable
Image Button, Example
<script language=“JavaScript">
<!--
imageFiles = new Array("images/Button1-Up.gif",
"images/Button1-Down.gif",
"images/Button2-Up.gif",
"images/Button2-Down.gif");
imageObjects = new Array(imageFiles.length);
for(var i=0; i<imageFiles.length; i++) {
imageObjects[i] = new Image(150, 25);
imageObjects[i].src = imageFiles[i];
}

function setImage(name, image) {


document.images[name].src = image;
}
INE2720 – Web Application Software Development 23 All copyrights reserved by C.C. Cheung 2003.
Modifying Images: A Clickable
Image Button, Example
function clickButton(name, grayImage) {
var origImage = document.images[name].src;
setImage(name, grayImage);
var resetString =
"setImage('" + name + "', '" + origImage + "')";
setTimeout(resetString, 100);
}
// --></script>
</head>...
<a href="location1.html"
onMouseOver="clickButton('Button1', 'images/Button1-Down.gif')" >
<img src="images/Button1-Up.gif" name="Button1"
width=150 height=25></A>
<a href="location2.html"
onMouseOver="clickButton('Button2', 'images/Button2-Down.gif')" >
<img src="images/Button2-Up.gif" name="Button2"
width=150 height=25></A>
...
INE2720 – Web Application Software Development 24 All copyrights reserved by C.C. Cheung 2003.
Highlighting Images Under
the Mouse, Example
<html>
<head> <title>High Peaks Navigation Bar</title>

<script language=“JavaScript">
<!—
// Given "Foo", returns "images/Foo.gif".
function regularImageFile(imageName) {
return("images/" + imageName + ".gif");
}
// Given "Bar", returns "images/Bar-Negative.gif".
function negativeImageFile(imageName) {
return("images/" + imageName + "-Negative.gif");
}
INE2720 – Web Application Software Development 25 All copyrights reserved by C.C. Cheung 2003.
Highlighting Images Under
the Mouse, Example, cont.
// Cache image at specified index. E.g., given index 0,
// take imageNames[0] to get "Home". Then preload
// images/Home.gif and images/Home-Negative.gif.
function cacheImages(index) {
regularImageObjects[index] = new Image(150, 25);
regularImageObjects[index].src = regularImageFile(imageNames[index]);
negativeImageObjects[index] = new Image(150, 25);
negativeImageObjects[index].src = negativeImageFile(imageNames[index]);
}
imageNames = new Array("Home", "Tibet", "Nepal", "Austria", "Switzerland");
regularImageObjects = new Array(imageNames.length);
negativeImageObjects = new Array(imageNames.length);
// Put images in cache for fast highlighting.
for(var i=0; i<imageNames.length; i++) {
cacheImages(i);
}
INE2720 – Web Application Software Development 26 All copyrights reserved by C.C. Cheung 2003.
Highlighting Images Under
the Mouse, Example, cont.
...
function highlight(imageName) {
document.images[imageName].src = negativeImageFile(imageName);
}

function unHighlight(imageName) {
document.images[imageName].src = regularImageFile(imageName);
}
// -->
</script></head>
<body>
<table>
<tr><td><a href="Tibet.html" target="Main"
onMouseOver="highlight('Tibet')" onMouseOut="unHighlight('Tibet')">
<img src="images/Tibet.gif" name="Tibet“ width=150 height=25 border=0>
</a>
...
INE2720 – Web Application Software Development 27 All copyrights reserved by C.C. Cheung 2003.
Highlighting Images
Under the Mouse, Result

INE2720 – Web Application Software Development 28 All copyrights reserved by C.C. Cheung 2003.
Application: Using JavaScript to
Interact with Frames
 Idea
– The default Window object contains a
frames property holding an array of
frames (other Window objects) contained
by the current window or frame.
 It also has parent and top properties
referring to the directly enclosing frame or
window and the top-level window,
respectively.
 All of the properties of Window can be
applied to any of these entries.

INE2720 – Web Application Software Development 29 All copyrights reserved by C.C. Cheung 2003.
Displaying a URL in a
Particular Frame, Example

<HTML>
<HEAD>
<TITLE>Show a URL</TITLE>
</HEAD>
<FRAMESET ROWS="150, *">
<FRAME SRC="GetURL.html" NAME="inputFrame">
<FRAME SRC="DisplayURL.html" NAME="displayFrame">
</FRAMESET>
</HTML>

INE2720 – Web Application Software Development 30 All copyrights reserved by C.C. Cheung 2003.
Displaying a URL in a Particular
Frame, Example, cont.
<html><head><title>Choose a URL</title>
<script language=“JavaScript">
function showURL() {
var url = document.urlForm.urlField.value;
// or parent.frames["displayFrame"].location = url;
parent.displayFrame.location = url;
}
function preloadUrl() {
if (navigator.appName == "Netscape") {
document.urlForm.urlField.value = "http://home.netscape.com/";
} else {
document.urlForm.urlField.value = "http://www.microsoft.com/";
}
}
<body onLoad="preloadUrl()">
<h1 align=“center">Choose a URL</h1>
<center><form name="urlForm">
URL: <input type=“text" name="urlField" size=35>
<input type=“button" value="Show URL" onClick="showURL()">
</form></center></body></html>
INE2720 – Web Application Software Development 31 All copyrights reserved by C.C. Cheung 2003.
Displaying a URL in a
Particular Frame, Result

INE2720 – Web Application Software Development 32 All copyrights reserved by C.C. Cheung 2003.
Giving a Frame the Input
Focus, Example
 If JavaScript is manipulating the frames, the fix is
easy: just add a call to focus in showUrl:
function showURL() {
var url = document.urlForm.urlField.value;
parent.displayFrame.location = url;
// Give frame the input focus
parent.displayFrame.focus();
}
 Fixing the problem in regular HTML documents is a
bit more tedious
– Requires adding onClick handlers that call focus to each
and every occurrence of A and AREA that includes a
TARGET, and a similar onSubmit handler to each FORM
that uses TARGET

INE2720 – Web Application Software Development 33 All copyrights reserved by C.C. Cheung 2003.
Using DHTML and CSS
Tools
 Adobe GoLive
– A complete HTML creation package
– An easy-to-use environment for
JavaScript editing, CSS and DHTML.
 Macromedia Dreamweaver
– Includes a bevy of other tools such as
FTP, site management.
– Allows you to add Flash objects.

INE2720 – Web Application Software Development 34 All copyrights reserved by C.C. Cheung 2003.
Cool JavaScript Sites
 http://www.dynamicdrive.com/
– Provides DHTML script examples
 http://javascript.internet.com/
– JavaScript examples and get the source
 http://www.js-examples.com/
– JavaScript examples
 http://developer.netscape.com/docs/examples/javascript.html
– JavaScript examples from Netscape
 http://www.jsworkshop.com/
– JavaScript Workshop
 http://www.glassdog.com/
– An entertaining place for learning web design
INE2720 – Web Application Software Development 35 All copyrights reserved by C.C. Cheung 2003.
JavaScript References
 http://www.w3.org
– Resources of all standards
 http://www.buildingtheWeb.com
– A well-structured website
 http://www.htmlhelp.com
– HTML help by the web design group
 http://www.webreview.com
– Includes coding, design tips, editorials
 http://www.webreference.com
– In-depth articles on DHTML, CSS, …
 http://www.faqts.com/knowledge_base/index.phtml/fid/53
– FAQs for DHTML, CSS, JavaScript, …
INE2720 – Web Application Software Development 36 All copyrights reserved by C.C. Cheung 2003.
Summary
 Learnt the basics of JavaScript:
– Variable, Data Types, Flow Control, Loops
– Function, Event, Objects
– Exception and Error Handling
 JavaScript permits you to:
– Make pages more dynamic
– Validate HTML form input
– Manipulate cookies
– Control frames
– Combine with CSS, DOM to build DHTML pages
INE2720 – Web Application Software Development 37 All copyrights reserved by C.C. Cheung 2003.
References
 Web Warrior Series - JavaScript
 JavaScript 1.5 by example
 SAMS – JavaScript
 JavaScript Goodies
 DHTML and CSS for the WWW

 The End.
 Thank you for patience!
INE2720 – Web Application Software Development 38 All copyrights reserved by C.C. Cheung 2003.

You might also like