CSci 220 - Lecture 16

Web Page Design

© Morris Firebaugh




I. Conclude Web Graphics Formats & Introduce JavaScript

 


II. PNG Graphics Format

History



Example 1 - Photographic Image

Original 1 Mb PICT file, compressed to JPEG file [Size = 117 Kb]

(Note compression artifacts near peak)




GIF Version [Size = 284 Kb]

(Note dithering in the sky)




PNG Adaptive Format [Size = 634 Kb]




PNG Adaptive Format with Transparency [Size = 649 Kb]




Example 2 - Flat Color Logo

Original 161K PICT file, compressed to 14.6 Kb JPEG, Compression 23:1

(from http://www.thepumpkinfarm.com/)




GIF Image, 37.5 Kb, Compression 2:1




PNG Image, 39.3 Kb, Compression 8:1




Conclude:




III. Interactivity on the Web

Recall the basic problem with classic stateless HTML Web pages - they are static, one-way documents

 

The primary players in this game are

 


III. JavaScript and Java

Two leading approaches to providing interactivity on the Web include JavaScript and Java. How do they differ?

 

As example of what JavaScript can do, let's go to the

UNICO Advanced Web Design Seminars


OOP Attributes

 


Example 1: Button Links

Let's build a JavaScript that links us to another Web page when we click a button:

<form>   
<input type="button"  value="Go to Insturctor's HomePage"
onClick="window.location='http://www.uwp.edu/
academic/computer.science/Faculty/firebaugh.www/
firebaugh.html'">
</form>

This code results in the action:

 


IV. JavaScript Syntax

The syntax ("rules of the language") closely resembles that of C++.

1. JavaScript is case sensitive

2. JavaScript ignores white space

3. JavaScript recognizes (and gets confused by) hard returns

4. Be sure that all punctuation symbols ( { [ " ' close properly ' " ] } )

5. The backslash, "\" serves as the Escape Key to ignore characters following

6. JavaScript data types include

 

7. JavaScript supports variables, with names starting with letters or the (_)

 

8. JavaScript support standard programming operators and expressions, e.g. the "verbs" of the language

fred = 0
fred  <  100
fred =  fred  +  2
if  (fred  >  80  &&  fred  <  90)  then window.alert  ("You have a B average.")

 

9. JavaScript objects are the "nouns" of the language, e.g.

 

10. Object have attributes, e.g. in

window.name  ("controlWindow")

 

11. Objects also have methods, e.g. in

document.write  ("Come on in.  The water is fine!")

 

12. JavaScript scripts are a series of statements of the form:

command  (attributes);

e.g.

window.alert ("You are entering the strange JavaScript World.");

 

13. Comments are of two forms:

//This is a comment up to the end-of-line

and

/*Comments may also be enclosed between "/*. . . .*/" compound symbols.  */

 

14. Command Blocks are enclosed in "{ . . . }", e.g.

{   document writeln  ("Greetings  &{userName};!");   document writeln  ("Select a manu option:");}

 

15. Functions may be defined as a series of statements, e.g.

function Greeting  (userName,dayPart) {   document.writeln("Greetings "+ userName + "!<br>");   document.writeln( "Have a good " + dayPart + ".<br>")}

 

16. JavaScript recognized a number of built-in events:

 

17. JavaScript provides a number of methods for handling events

18. JavaScript supports standard C++ arithmetic and logical operators

 

19. A wealth of JavaScript Objects, their properties, methods, and event handlers are listed in ProjectCool.

 


V. JavaScript Examples

Example 1: JavaScript to change background color

<html>
<head>
<title>Function Backgound Color Change
</title>
<script  language=javascript>
<!--
function changecolor(newcolor){   window.document.bgColor = newcolor;}//-->
</script>
</head>
<body bgcolor=white link=#888888 vlink=#888888><h2>
<a  href="javascript:changecolor('black');"> Change Background to Black</a></h2>
<h2><a  href="javascript:changecolor('white');"> Change Background to White</a></h2>
</body>
</html>

 


Example 2: onMouseover Slideshow

Air show
links

Plane 1

Plane 2

Plane 3

Plane 4

Plane 5

This example was borrowed from Website Abstraction, a great source of free JavaScripts

 

 


Example 3: UNICO, Inc. Home Page Active Button Control

 

 




Updated March 3, 2001