|
|
|
What's the difference between JavaScript and Java?
Java is a compiled programming language, similar
to C. It is powerful enough to write major applications and insert them in a web page as a special object called an "applet." Java has been generating a lot of excitement because of its unique
ability to run the same program on IBM, Mac, and Unix computers.
Java is not considered an easy-to-use language for non-programmers.
Javascript is much simpler to use than Java. With
Javascript, if you want check a form for errors, just type an
if-then statement at the top of the page. No compiling, no applets,
just a simple sequence.
Object-oriented programming consists of Objects,
Methods and Properties.
An object is basically a black box which
stores some information. It may have a way for you to read that
information and a way for you to write to, or change, that information.
It may also have other less obvious ways of interacting with the
information.
Some of the information in the object may actually
be directly accessible; other information may require you to use
a method to access it - perhaps because the way the information
is stored internally is of no use to you, or because only certain
things can be written into that information space and the object
needs to check that you're not going outside those limits.
The directly accessible bits of information in the
object are its properties. The difference between data accessed
via properties and data accessed via methods is that with properties,
you see exactly what you're doing to the object; with methods,
unless you created the object yourself, you just see the effects
of what you're doing.
A few examples
Your web page document is an object. Any table, form,
button, image, or link on your page is also an object. Each object
has certain properties (information about the object). For example,
the background color of your document is written document.bgcolor.
You would change the color of your page to red by writing the
line: document.bgcolor="red"
The contents (or value) of a textbox named "password" in a form named "entryform" is
document.entryform.password.value.
Methods
Most objects have a certain collection of things
that they can do. Different objects can do different things, just
as a door can open and close, while a light can turn on and off.
A new document is opened with the method document.open() You can
write "Hello World" into a document by typing document.write("Hello
World") . open() and write() are both methods of the object:
document.
Events
Events are how we trigger our functions to run. The
easiest example is a button, whose definition includes the words
onClick="run_my_function()". The onClick event, as its
name implies, will run the function when the user clicks on the
button. Other events include OnMouseOver, OnMouseOut, OnFocus,
OnBlur, OnLoad, and OnUnload.
JavaScript and HTML
JavaScript is inserted in the <HEAD> area
of HTML documents, between <SCRIPT> and </SCRIPT>
tags.
This is the standard open and close to the JavaScript
section of your page:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
< !-- Beginning of JavaScript -
(all of your JavaScript functions)
// - End of JavaScript - -->
</SCRIPT>
</HEAD>
Remember to tell the browser your script language:
<SCRIPT LANGUAGE="JavaScript">
The <!-- and --> tags are used to hide comments
in HTML from the browser. Old browsers will not understand the
<SCRIPT> tags, so you need to include the comment tags to
keep your JavaScript from showing up on the Browser (e.g. Netscape
1.0).
Hiding scripts within comment tags
Only Netscape Navigator versions 2.0 and later recognize
JavaScript. To ensure that other browsers ignore JavaScript code, place the
entire script within HTML comment tags, and precede the ending comment tag with a double-slash
(//) that indicates a JavaScript single-line comment:
<SCRIPT>
<!-- Begin to hide script contents from old browsers.
JavaScript statements...
// End the hiding here. -->
</SCRIPT>
Since browsers typically ignore unknown tags, non-JavaScript-capable
browsers will ignore the beginning and ending SCRIPT tags. All
the script statements in between are enclosed in an HTML comment, so they are ignored
too. Navigator properly interprets the SCRIPT tags and ignores the line in
the script beginning with the double-slash (//).
Although you are not required to use this technique,
it is considered good etiquette so that your pages don't generate unformatted script
statements for those not using Navigator 2.0 or later.
Functions
You can name your functions anything you want. A
function is typed like this:
function MyFunction (variable) {
(stuff you want to do with the variable)
}
The variable can be a number, a piece of text, or a date.
The curly brackets { } define the beginning and end
of the function.
The alert command will create an message box displaying
a piece of text or a number.
Alert("Hello World") will display Hello
World in the box.
Alert(SomeText) will assume that SomeText is a variable, and will display whatever value it contains.
Notice that "Hello World" was in quotes and SomeText was not.
If I put these two lines together:
SomeText="My Three Sons"
Alert(SomeText)
then "My Three Sons" will be displayed in the message
box.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
< !-- Beginning of JavaScript -
function MsgBox (textstring) {
alert (textstring) }
// - End of JavaScript - -->
</SCRIPT>
</HEAD>
The Form is a JavaScript user's best friend. Forms can be used to input text, to display results, and to trigger JavaScript functions. The form in our example used 2 objects, a text box, and a button.
All forms start with the tag <FORM> and end
with </FORM>.
The text box should include a NAME and a TYPE. The
NAME will be used when we need to tell the function which box
has the text we want. TYPE is how the browser knows to create
a text box, button, or check box. For example:
<INPUT NAME="text1" TYPE=Text>
The button is how we tell JavaScript to run a particular
function. The button should include a NAME, TYPE, VALUE, and ONCLICK
command.
The NAME could be used to refer to the button in JavaScript, but is usually not important.
The VALUE is the label which will appear inside the
button. The ONCLICK is followed by the name of a function, and
the name of the text box containing the data. For example:
<INPUT NAME="submit" TYPE=Button VALUE="Show Me"
onClick="MsgBox(form.text1.value)">
<BODY>
<FORM>
<INPUT NAME="text1" TYPE=Text>
<INPUT NAME="submit" TYPE=Button VALUE="Show Me"
onClick="MsgBox(form.text1.value)">
</FORM>
</BODY>
</HTML>
|
||||
|
