Experiment 5: DHTML, JavaScript and ActiveX

ugliestharrasSoftware and s/w Development

Nov 4, 2013 (3 years and 9 months ago)

62 views

Experiment
5
: DHTML, JavaScript and ActiveX

Objectives:



To learn how to use Macromedia Dreamweaver to
include sounds and
animations into

dynami
c web pages
.



To learn how to create dynamic web pages using DHTML, JavaScript and
ActiveX.



To learn how to embe
d audio into web pages using JavaScript and ActiveX.

Software:

Microsoft Internet Explorer 5

or higher

Macromedia Dreamweaver

4 or MX

References:

1.

H. Deitel, P. Deitel and T. Nieto. Internet and World Wide Web: How to
Program. Prentice
-
Hall, NJ,
2
nd

Editio
n



Chapter
13, 14, 18
.

2.

More on multimedia resources:
http://www.webdevelopersjournal.com/software/multimedia_goodies.html

Introduction

In Lab assignment
3
, we have lear
ned how to use Macromedia Flash for creating
animated movies. Flash allows the automatic genera
tion of HTML pages, which
embed
s

the animated movies. In this way, we do not have to write any HTML
pages.

With the growing multimedia applications that may gen
erate different types of
files, we may need to write the HTML files ourselves. For this reason, in this
experiment we will learn three more general technologies for creating dynamic
pages or active pages
that

may include audio and animated sequences. These

technologies are DHTML, JavaScript, or ActiveX

DHTML and JavaScript

Dynamic HTML (DHTML) extends the current set of HTML elements by
allowing them to be accessed and modified by a scripting language like JavaScript
or VBScript. Dynamic facilities can be
added by exposing tags to scripting
language; this allows pages to come alive with movement and interactivity.

JavaScript is a scripting language developed by Netscape. It can be used for
controlling events in browsers and for accessing the Document Objec
t Model for
programming Dynamic HTML.

ActiveX Control

Internet Explorer 5 offers a number of ActiveX controls, which allow you to add
certain multimedia effects to Web pages. Two of them are the Media Player control
and Sprite Control. The Media Player co
ntrol allows you to control the play out of
a wide range of media formats. The Sprite control allows you to control the rate of
playback for images or even for individual frames. In this lab experiment you will
learn how to embed the ActiveX control into y
ou web pages.

Create an Animated Sequences using DHTML/JavaScript

1.

Download the five gif pictures from the location:

http://course.ie.cuhk.edu.hk/~
ine1020
/
materials/
dhtml1a.gif

http://course.ie.cuhk.edu.hk/~
ine1020
/
materials/
dhtml1
b
.gif

http://course.ie.cuhk.edu.hk/~
ine1020
/
materia
ls/
dhtml1
c
.gif

http://course.ie.cuhk.edu.hk/~
ine1020
/
materials/
dhtml1
d
.gif

http://course.ie.cuhk.edu.h
k/~
ine1020
/
materials/
dhtml1
e
.gif

2.

Download the audio file from the location:

http://
course
.ie.cuhk.edu.hk/~
ine1020
/
materials
/jazzgos.mid

3.

Using Macromedia Dreamweaver, create an an
imated sequence by using the
five GIF pictures. What you need to do in Dreamweaver include:



C
reate five overlapping layer with each layer containing one of the figures.



A
dd each layer to the timeline.



L
oop the playback of the sequence.



S
et the autoplay t
o true so that the animation starts when the web page is
loaded.

4.

Embed the audio file into the web page and set the audio to play at the same
time as the animated sequence.

5.

Publish your page from your UNIX account.

6.

By looking at the HTML source generate
d by the Dreamweaver, answer the
following questions:

a)

What DHTML event triggers the start of the animation?

b)

Which DHTML element is used to control the image position on the
browser?

c)

What JavaScript objects are used by the web page?

d)

What standard JavaSc
ript functions are used by the web pages?

Create an Animated Sequences using ActiveX control

1.

Download the gif picture from the location:

http://course.ie.cuhk.edu.hk/~
ine1020
/
mater
ials
/activex.gif

2.

Download the audio file from the location:

http://
course
.ie.cuhk.edu.hk/~
ine1020
/
materials
/jazzgos.mid

3.

Using Macromedia Dreamweaver, create an active web page by

using the
Sprite Control
that

comes with the Internet Explorer. The Sprite Control has
the following CLSID and parameters:

a)

CLSID = FD179533
-
D86E
-
11D0
-
89D6
-
00A0C90833E6

b)

“Repeat” =
-
1

c)

“NumFrames” = 5

d)

“NumFramesAcross” = 3

e)

“NumFramesDown” = 2

f)

“SourceURL” = a
ctivex.gif

g)

“Auto
S
tart” =
-
1

4.

Also include a MediaPlayer activeX to control the playback of the audio. The
MediaPlayer has the following CLSID and parameters:

a)

CLSID = 22D6F312
-
B0F6
-
11D0
-
94AB
-
0080C74C7E95

b)

“Filename” = jazzgos.mid

c)

“AutoStart” = true

d)

“Loop” = t
rue

5.

Publish your page from your UNIX account.

6.

Comparing the approach using DHTML/JavaScript and ActiveX, answer the
following questions:

a)

List two advantages of ActiveX over DHTML/JavaScript ?

b)

List two disadvantages of ActiveX over DHTML/JavaScript ?

Grad
ing

1.

You have to complete and publish your page before
deadline
.
DEADLINE

is
23:59:59 on
Oct.
28

for Monday Group and
23:59:59 on Oct
.
31

for
Thursday Group.

2.

Send
your name
,
student id
,
URLs of your web page

and
answers to the
above questions

to

Tse Hok Man

(
hmtse3@ie.cuhk.edu.hk)
.

3.

Zero mark will be given for the work that cannot be accessed.


--

END OF LAB
--








Marking Sheet


Experiment
5
: DHTML, JavaScript and ActiveX

Student ID:


Completed Features

Max. Marks

Marks

1.


JavaScript/DHTML:



Animated s
equence works correctly

2 if yes, 1 if incomplete, 0 if no




Autoload

1 if yes, 0 if no




Audio work correctly

1 if yes, 0 if no




Q: DHTML event

0.5 if correct, 0 if not




Q: DHTML element

0.5 if correct, 0 if not




Q: JavaScript objects

0.5 if corre
ct, 0 if not




Q: JavaScript functions

0.5 if correct, 0 if not


2.


ActiveX:



Animated sequence works correctly

1 if yes, 0 if no




Audio works correctly

1 if yes, 0 if no




Q: Advantages

0.5 for each correct, max 1




Q: Disadvantages

0.5 for each corr
ect, max 1



Total (max 10 marks)