The first thing that should
be mentioned, when discussing Java and Javascript, is that they are two
different things - so don't be fooled by the similarity in the names. Java is
used to create applets, which are applications designed to operate dynamically
across an internet connection. Applets are called from, but not embedded in,
HTML. Java is an object-oriented language that requires programming experience
in order for it to be utilised for development purposes. Javascript, on the
other hand, creates scripts that are embedded into HTML code. Whilst not as
powerful as Java, Javascript is far easier to learn. We do suggest, however,
that you gain a good understanding of HTML before attempting Javascript.
And that's just our
description of the two languages. Here's the word from Danny Goodman,
author of The JavaScript
Bible and a bona-fide expert on the subject:
Java Applets
Java, developed under the Sun
Microsystems brand, is a full-fledged object-oriented
programming language. It can be used to create standalone applications and a special
type of mini application, called an applet. Applets are downloaded as separate
files to your browser alongside an HTML document, and provide an infinite
variety of added functionality to the Web site you are visiting. The displayed
results of applets can appear to be embedded in an HTML page (eg. the scrolling
banner message that is so common on Java-enhanced sites), but the Java code
arrives as a separate file. This usually has the extension of
".class".
There are 1000's of Java
applets out on the net, and if you know a little about how they work, you can
get them to run on your own page. Remember that if you use an applet off of
another page, make sure that it doesn't mention in the HTML code that the
applet is copyrighted. If it is, you must obtain permission to use the applet
first.
JavaScript
JavaScript, developed by Netscape, is a smaller language that does not create
applets or standalone applications. In its most common form today, JavaScript
resides inside HTML documents, and can provide levels of interactivity far
beyond typically flat HTML pages -- without the need for server-based CGI
(Common Gateway Interface) programs.
Some server software, such
as Netscape's SuiteSpot, lets web application developers write CGI programs in
a server-side version of JavaScript. Both client-side and server-side
JavaScript share the same core JavaScript language, but each side deals with
different kinds of objects. Client-side objects are predominently the
components on an HTML web page (eg. forms, text boxes, buttons). Server-side
objects are those that facilitate the handling of requests that come from
clients, as well as connectivity to databases.
It is important to
understand that a Java-enabled browser is not automatically a
JavaScript-enabled browser: the two technologies require entirely separate
interpreters (licensed from separate companies) to handle the languages. It is
unlikely, however, that future browsers will incorporate one but not the other
(plus or minus implementation timetables on various platforms).
Starting with Netscape
Navigator 3.0, HTML authors have been able to use JavaScript to link HTML form
elements to Java applets (and plug-ins) or link Java applets to each other -
LiveConnect (tm), Netscape calles this technology. Rather than competing with
each other, Java and JavaScript are a powerful combination.
Much simpler and smaller
than the Java vocabulary, JavaScript is within reach of authors who know HTML;
writing full-fledged Java, on the other hand, benefits from experience with C
and C++. Java and JavaScript share a number of vocabulary and syntax
constructions, but the languages are intended for very different purposes.
All you need to program in
JavaScript is a text editor and a JavaScript-enabled browser, such as Netscape
Navigator 2.0 or greater.
What we can do
for you
Whew! As you can see, there's a lot to cover - particularly with Java. Our
suggestion, especially if you're not of the programming type, is to get a book
on the subject. There are lots of excellent ones on the market and many come
with CD-ROMs full of interactive tutorials and resources. If we were to post a
Java tutorial here, we're talking hundreds of pages - something we can only
commit resources to if there's sufficient (and we mean huge) demand.
As for JavaScript, we can
certainly do something for you here. We're working on our tutorial even as you
read this, but in the interim we'll provide you with some useful scripts that
you can copy and paste into your own HTML documents.
|
Mouseover
Scripts
Bits and
Pieces
|
Single
Image Mouseover Script
The Mouseover is definitely
one of the most popular JavaScripts on the net. The concept being: To change
the image that the cursor is moved over by substituting it with another image
then, when the cursor leaves the image, to revert to the original image. Or
something.
Anyway, here's a Script to
do this. Unfortunately, this Script will only work properly on Version 4.X
browsers because they're the only ones that recognise the 'onmouseover' and
'onmouseout' parts of the JavaScript language - but hey, they're giving these
browsers away and everyone should be using them already.
Here we go. Firstly, you'll
need to place this code after your <body> tag:
<script
language="Javascript">
<!--//
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0)
{ roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" &&
browser_version >= 4.0) { roll = 'true'; }
else { roll = 'false'; }
function msover1(img,ref) { if (roll == 'true') { document.images[img].src =
ref; } }
function msout1(img,ref) { if (roll == 'true') { document.images[img].src =
ref; } }
//-->
</script>
The code above is what's
called by the following code, which you'll need to do a little bit of work with
once you've pasted it into your HTML. We'll explain it to you further down the
page.
<onmouseover="msover1('NAME1','IMAGE2');"
onmouseout="msout1('NAME1','IMAGE1');"><img
src="IMAGE1" name="NAME1">
Now this code should be
placed where you want the image to go. You'll have to place a NAME attribute
within the <img> tags; this is to identify the original image within the
code. IMAGE1 is the file name of the original image eg. 'house.gif', while
IMAGE2 is the file name of the image that will be displayed on mouseover.
Other attributes such as
WIDTH, BORDER etc can also be used with this code. If you're confused, the
image below has a mouseover effect applied to it. Try it out then view this
page's source to check out the code.
The file name of the
original image is 'hello.gif', and it's NAME attribute is 'hello'. The file
name of the second image, the one that replaces the first image on mouseover,
is 'bye.gif'. Look for these in the code and then relate that to the instructions
given above.