Lecture 4d - Computing
Download
Report
Transcript Lecture 4d - Computing
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
JavaScript
Style Sheets
(JSS)
Netscape
Layers
(positioning,
visibility)
Cross-Browser
DHTML
CSS1, CSS2,
CSS-Positioning
JavaScript
DOM
INE2720 – Web Application Software Development
7
Internet Explorer
4.x
Visual Filters
allow you to apply
visual effects to
text or graphics
Data Binding
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.
INE2720 – Web Application Software Development
17
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
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.