Download Introduction to Web Page Interactivity

Web Developer Foundations:
Using XHTML
Chapter 12
Adding Interactivity
to Your Web Pages
1
Learning
Outcomes

In this chapter, you will learn how to:

Describe the features and common uses of JavaScript
• Add JavaScript code to a web page

Describe the features and common uses of Java Applets
• Add a Java Applet to a web page

Describe the features and common uses of DHTML
• Add a DHTML effect to a web page

Describe the features and common uses of CGI
• Invoke CGI from a web page

Describe the features and common uses of Macromedia Flash
• Add a Flash Animation to a web page


Find free Javascript, Java Applets, DHTML, CGI, and Flash
resources on the Web
Describe other technologies that can be used to add web page
interactivity
2
What is
JavaScript?





Object-oriented scripting language.
Used to work with the objects associated with a
web page document --the window, the document,
the elements such as forms, images, links, etc
Originally developed by Netscape and called
LiveScript
Netscape collaborated with Sun Microsystems on
modifications to the language and it was renamed
JavaScript
JavaScript is NOT Java
3
Common Uses
of JavaScript








Display a message box
Select list navigation
Edit and validate form information
Create a new window with a specified size and
screen position
Image Rollovers
Status Messages
Display Current Date
Calculations
4
Coding
JavaScript

JavaScript code can be added to a web
page using two different techniques:


Place Javascript code between <script> tags
Place Javascript code as part of an event
attached to an XHTML element
5
JavaScript
Using <script> tags



The script tag
A container tag
May be placed in either the header or the body section of a
web page (see ex1.htm)
<script language="JavaScript" type=”text/javascript”>
<!- alert("Welcome to Our Site")
// - ->
</script>
6
JavaScript
and Events

Events are actions that the visitor to the
web page can take such as






clicking (onclick), (ex4.htm)
placing the mouse on an element
(onmouseover), (ex5.htm)
removing the mouse from an element
(onmouseout), (ex6.htm)
loading the page (onload), (ex1a.htm)
unloading the page (onunload), (ex1b.htm)
etc.
7
JavaScript
and Events
 JavaScript can be configured to perform
actions when these and other events occur.

The JavaScript code is added directly to the
XHTML tag with the type of event as an
attribute.

The value of the event attribute will contain
one or more JavaScript statements.
8
JavaScript
Coding for Events

The sample code below will display an alert box
when the mouse is placed over a link.
<a href=”home.htm” onmouseover=”alert(‘Click to go home’)”>Home</a>
9
JavaScript
Debugging






Check the syntax of the statements that you typed - pay very close
attention to upper and lower case letters, spaces, and quotations.
Verify that you have saved the page with your most recent changes.
Verify that you are testing the most recent version of the page (refresh or
reload the page)
If you get an error message, Use the error messages that are displayed by
the browser.
Some web authoring tools such as Microsoft FrontPage and Macromedia
Dreamweaver provide line numbers for the XHTML/JavaScript source code.
Macromedia Dreamweaver has its own JavaScript debugger that will let you
step through the code.
10
What is
Java?

Java is an Object Oriented Programming (OOP)
language developed by Sun Microsystems.

Java is not the same language as JavaScript.

Java is more powerful and much more flexible than
JavaScript.

Java can be used to develop both stand-alone
executable applications and applets that are invoked
by web pages.
11
Java
Applets



Java applets (“.java” files) are
compiled (translated from the
English-like Java statements to an
encoded form) and saved as “.class”
files which contain byte code.
The byte code is interpreted by the
Java Virtual Machine (JVM) in the
web browser. The JVM interprets the
byte code into the proper machine
language for the operating system.
The applet is then executed and
appears on the web page.
12
Common Uses
of Java Applets

Navigation Bars and Buttons
Image Effects
Text Effects
Games
Web and Business Applications

See example:




ex8.htm
13
Adding a Java Applet
to a Web Page



The applet tag
A container tag
Attributes:


code, codebase, height, width, alt, id
Works together with <parameter> tags


Stand alone tags
Attributes:
• name, value

The <parameter> tags used by an applet are
determined by the developer who writes and
distributes the applet
14
Sample
Java Applet
<applet code=“myapplet.class" height=“50" width=“500“
alt=“Java applet: displays a moving logo with company name”>
<param name="bgColor" value="#FFFFFF" />
<param name=“txtColor" value="#0000CC” />
This Java applet displays a moving logo with the company name
</applet>

The sample applet is named
myapplet.class and requires two
parameters, bgColor and txtColor.
15
What is
DHTML (Dynamic HTML)?



A group of technologies work together to
change a web page after it has been
downloaded.
These technologies allow the web page to
respond to user actions.
Technologies used in DHTML:



Document Object Model (DOM)
Cascading Style Sheets (CSS)
Client-side Scripting
16
Document Object Model
(DOM)



The DOM defines
every object and
element on a web
page.
Its hierarchical
structure can be
used to access
page elements and
apply styles to
page elements.
A portion of the
DOM is shown at
the right.
17
More on
DHTML

Has a long learning curve because of the extent of the knowledge needed

Implemented differently by major versions of the major browsers,

Convergence between the DHTML implementations of Internet Explorer 5

It should become easier to write cross-browser DHTML in the future.
to successfully combine the three technologies.
Internet Explorer and Netscape.
 DHTML coded to work in Internet Explorer will often not work in
Netscape.
 DHTML coded to work in Netscape 4.x will not work in Netscape 6.
and Netscape 6 is better.
18
Common Uses
of DHTML
Hiding and showing text
 Navigation
 Image Effects
 See example: ex9.htm

19
Adding DHTML
to a Web Page



The code needed to add a DHTML effect to a web
page will vary based on the desired effect – usually
using a combination of CSS and JavaScript.
The JavaScript tends to get complex because of the
differences in the syntax required for different
browser and browser versions.
It is a good idea to become comfortable with CSS
and JavaScript before tackling DHTML.
20
What is
Macromedia Flash?

Flash is a popular multimedia application developed by
Macromedia.

It is often used to create animation and multimedia effects on web
pages (ex10.htm)

Flash effects are saved in “.swf” files

.swf files play as they download and give the perception of
speedy display of complex graphic animations

Flash requires a free browser plug-in, which is available for
download from Macromedia
21
How to create
Macromedia Flash?

“.swf” files can be created in a
number of applications including
• Macromedia Flash,
• Macromedia Fireworks,
• Macromedia Dreamweaver,
• Swish,
• and Adobe LiveMotion
22
Common Uses of
Macromedia Flash
Navigation
 Splash Screen
 Entire Web Site

23
Adding Flash to
a Web Page



Both the <object> tag and the <embed> tag are
used to place Flash media on a page
Some versions of currently popular browsers such as
Netscape support the <embed> tag and do not fully
support the <object> tag.
Use the <noembed> tag to contain a text description
of the Flash media in order to provide for
accessibility.
24
Flash
General Sample
<object … object attributes go here….
<param name="movie" …value attribute goes here… />
<param name="quality" …value attribute goes here… />
<param name="bgcolor" …value attribute goes here… />
<embed … object attributes go here…. />
<noembed> … a brief description of the Flash media can go
here along with a link to alternate text content if
appropriate… </noembed>
</object>
25
Flash
Detail Sample
The following code places a Flash file called flashbutton.swf on a
web page:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.ca
b#version
=4,0,2,0" width="147" height="34">
<param name="movie" value="flashbutton.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="flashbutton.swf" quality="high"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_
Version=ShockwaveFlash" type="application/x-shockwave-flash" width="147"
height="34" bgcolor="#FFFFFF" />
<noembed>This is a Flash button that links to <a
href=”http://macromedia.com”>Macromedia’s web site</a>
</noembed>
</object>
26
What is
CGI?




Common Gateway Interface
A standard method for web pages to request special
processing on the web server.
Provides a protocol for a Web server to pass a Web
page's request to a program or script stored on the
server, receive a response from the program or
script, and send that response to the web browser for
display.
CGI scripts/programs can be written in many
languages, including Perl and C++.
27
Steps in Utilizing
CGI
Web page invokes CGI by a form post, action,
hyperlink, etc...
1.

Any form information is sent in the form of
name=value pairs to the web sever.
2.
CGI script on web server is executed
3.
CGI script accesses requested database, file, or
process
4.
Web server returns web page with requested
information or confirmation of action
28
Common Uses
of CGI





Search a database
Place an order at an online store
Send a web page to a friend
Subscribe to a newsletter
Any type of server-side file or e-mail
processing is a candidate for CGI
29
Using
CGI

Invoke a CGI from an Anchor Tag
<a href="http://terryfelke.com/cgi-bin/date.pl">Server Date and Time</a>

Invoke a CGI from a Form

When a web page visitor clicks the "Submit" button on a
form, the form data is sent to the URL in the form tag's
action attribute. This URL should be a CGI script or other
server-side processing technique.
<form method=“post” action=http://terryfelke.com/cgi-bin/order.pl”>
 Method Attribute
• “get” is the default. This places the form information appended to the URL in
the HTTP request sent to the web server.
• “post” is preferred by W3C. This places the form information in the entity
body of the HTTP request to the web server.
30
Summary of
Interactive Technologies

The purpose of this chapter was to
introduce you to a number of technologies
used to add interactivity to web pages.

As you continue your studies, you may
choose to specialize in one or more of
these technologies.
31