Introduction to JavaScript
Concepts covered in class include:
Java vs. JavaScript
Java...
Is an object orientated programming language developed at Sun Microsystems that will
not be covered in class today. Java programming requires knowledge of programming concepts that
cannot be taught in a short class. Java's presence
on the web is in the form of an applet, which can be invoked by HTML tags or JavaScript
statements.
JavaScript...
Is an interpreted scripting language developed by Netscape that is used on both client
and server machines to perform certain tasks. Today's class will cover only client-side
JavaScript. This is the JavaScript invoked in your web browser on your desktop machine.
JavaScript makes use of C-like syntax, and built-in objects that mirror entities
that are part of a web browser or form. JavaScript is not something that can be fully
mastered in a few hours, however, a basic understanding of JavaScript can provide
some additional functionality to web pages.
JavaScript and your browser
Since JavaScript's inception, there have been three versions of the scripting language,
as well as an additional adaptation of JavaScript created by Microsoft called JScript.
The table below gives information on which browsers support which incarnations of
JavaScript.
|
Navigator 2.02
|
Navigator 3.0
|
Comm 4.x
|
MSIE 3.0
|
MSIE 4.x
|
| JavaScript 1.0 |
yes
|
yes
|
yes
|
mostly, as JScript
|
yes
|
| JavaScript 1.1 |
no
|
yes
|
yes
|
some, but not really
|
yes
|
| JavaScript 1.2* |
no
|
no
|
yes
|
no
|
mostly
|
| JavaScript 1.3* |
no
|
no
|
not until
4.06 and 4.5
|
no
|
mostly
|
* Since layers do not work the same in Netscape and MSIE, don't expect
the JavaScript dealing with layers to work either
Basic JavaScript coding
hints
JavaScript will look familiar to programmers of C or C++. To everyone
else, it looks like a bunch of typos. Here is some lexical and syntactical information
to make that mess more readable...
- JavaScript is case sensitive (unlike HTML). If you look up the syntax of something
and see it in lowercase, you cannot change it to uppercase--it will not work correctly.
- JavaScript statements should have semicolons after them.(This is not required,
but it is a very good idea to do it anyway - oddly enough, I think it makes your
code more readable.)
i.e. document.write("Howdy");
- Loops, functions, and conditional logic should use curly braces{} to distinguish
condition beginnings and endings.
i.e. if (a == " ") {
alert("Hey! a is blank.");
}
- JavaScript functions, methods and event handlers are referenced with parentheses
after them(). i.e.
window.open(), onClick(),
function myfunction() {
document.write("This is my function.");
}
- JavaScript can be invoked in a variety of ways. The most common way to to write
JavaScript functions and place them between <SCRIPT></SCRIPT> tags in
an HTML document. To ensure that the JavaScript your page needs to function is available
to it, these <SCRIPT> tags are most often found in the <HEAD></HEAD>
tags at the beginning of a document. For example...
<HTML><HEAD>
<SCRIPT LANGUAGE = "JavaScript">
function myfunction() {
document.write("This is my function.");
}
</SCRIPT>
<TITLE>My Page Title</TITLE>
</HEAD>
JavaScript can also be invoked using event handlers, which will be covered in greater
detail in the next section.
Another way to invoke JavaScript that is unique to the <A HREF> tag is as follows:
<A HREF = "void javascript:functionname()">Click here</A>
Basic JavaScript entities
Here are some basic JavaScript entities we'll be concerned with in this class...
Built-in JavaScript Objects
The object data type in JavaScript contains information about itself known
as properites. This may not sound like a concept that applies to the everyday
world, but it really does. Let's use a cat as an example of an object data type.
Any cat has a set of properties that would apply to it. For example, the cat's fur
is a certain color, the cat may have a certain body type, the cat may have long hair
or short hair, and the cat may have claws or be de-clawed. The cat also almost certainly
has a name.
JavaScript is already prepared to handle many of the graphical objects you see on
a web page once it has loaded into your browser, so you don't have to make them up
like we did with the cat example above. For example, a web page with a form
on it, has a corresponding JavaScript object. The JavaScript form[ ] object
consists of any of the various elements[ ] that could be on a form, for example,
a textarea, radio buttons or a submit button. Let's take one of those form elements
as an example and look at it's properties. The Text Object is the JavaScript object
for a text input field in a form. Some properties of the Text object include name,
value (the information typed in the textbox), and form (the name of the form that
includes the textbox). The HTML below creates a form with two textboxes in it.
<FORM NAME = "infoform" METHOD="post" ACTION="process.cgi">
Please enter your SSN: <INPUT TYPE = "text" NAME = "ssn">
<br>
Please enter your birthday: <INPUT TYPE = "text" NAME = "bday">
<INPUT TYPE = "submit" VALUE = "Click here to submit">
</FORM>
Let's say you want to be able to check that the person has entered something in
both input fields before you send the form data to your processing program. You could
use JavaScript to handle that, but first you need to be able to reference those textboxes
correctly. There are two ways to do that.
One is by using the generic names for the JavaScript object on the web page...
document.form[0].element[0].value is equal to the value of whatever
has been typed in the first form in the first textbox on the page (the number zero
is used because JavaScript always starts counting from zero instead of one).
document.form[0].element[1].value is equal to the value of whatever
has been typed in the first form in the second textbox on the page.
A more intuitive way to reference these items is by using the names I made up
for them...
document.infoform.ssn.value is equal to the value of whatever has
been typed in the form named "infoform" in the form element named "ssn."
document.infoform.bday.value is equal to the value of whatever has
been typed in the form named "infoform" in the form element named "bday."
You may be wondering why I referenced the input boxes starting with the word document
instead of just starting with the form reference. One basic construct of JavaScript
is that all objects descend from one major object called window . The
window object refers to the browser window on your desktop. Within all
browser windows there resides a document object, within which there
may be a form, an image, etc. The window object is such a pillar
of JavaScript, that it is not required to be named when referencing other JavaScript
objects down in the object hierarchy, unless there are multiple windows and the reference
is to an object in another window (this is good to know when working with frames
since a frame is just another window as far as JavaScript is concerned).
Events and Event Handlers
How does your JavaScript code 'know' when to execute? JavaScript is event driven,
meaning that certain actions that can and do happen on web pages can trigger JavaScript
to do things. An event on a web page occurs when the user interacts with the page
loaded in a browser window. A mouse clicking on a button or the cursor being placed
in or being removed from a text box are events that could trigger certain actions
in JavaScript. Event handlers are used to connect the event occurring with a JavaScript
action. The event handlers are often embedded in your HTML text and invoked when
something happens to the HTML element referenced in the HTML tag.
Different JavaScript objects have different event handlers associated with them.
Below is a partial list of event handlers and their objects available in JavaScript.
Not all event handlers are available for all JavaScript objects. For example, the
event handler onSubmit is only available for the form object, since no other
object can be submitted.
|
Event Handler
|
Object
|
| onClick |
hyperlink, button |
| onMouseOver |
hyperlink, image, layer |
| onMouseOut |
hyperlink, image, layer |
| onBlur |
elements in a form, window |
| onFocus |
elements in a form, window |
| onSumit |
form |
| onLoad |
window |
Methods
Methods are actions associated with particular built-in JavaScript object. JavaScript
objects 'know' how to do some things. Remember the window object mentioned earlier?
It has many well known methods associated with it, including the alert()
method used in the previous example. The window object also 'knows' how to bring
up a confirm pop-up window (confirm()). Generally, when accessing an
object's method, the object name must be specified before the method name (except
when the method is a window method). You will need a good JavaScript reference to
learn what each JavaScript object can do and how to invoke its methods.
Functions
A function in JavaScript is similar to what other languages refer to as subroutines
or subprograms. A function takes information (parameters), does something with the
information and returns it to the statement that called it in the first place. There
is a particular syntax for declaring functions:
function greeting() {
alert("Welcome to my web page!");
}
This function could be invoked by an event hander. For example, whenever my page
loads into the browser, if I want to be really annoying, I make a little window pop
up and greet them. I would call my function like this:
<BODY onLoad = "greeting()">
Getting Started with
JavaScript
Writing JavaScript code takes no more computer resources than it takes to make web
pages. All you need is a text editor of some kind and a web browser that supports
JavaScript to get started. So far Netscape 4.5 supports JavaScript the best on all
platforms (after all, Netscape did write JavaScript), but MS Internet Explorer has
basically caught up to the JavaScript 1.1 standard, which is what most people are
using.
As for non-computer resources, JavaScript is more difficult to write than HTML. Many
JavaScript sites offer free JavaScript functions that can be modified to work on
your pages. However, complicated JavaScript takes time to write and de-bug. Do not
expect to walk out of class writing complex code without taking some time to study
and experiment. Also, when first starting out with JavaScript, you will need a resource
with all the objects, properties and methods as well as syntax for writing "if"
statements, "for" loops etc. So bookmark some of the resource pages given
below or go out and buy a book with the syntax in it.
JavaScript Error Windows
Starting with Netscape Navigator 4.06, JavaScript errors are automatically routed
to the JavaScript Console instead of popping up an error window. The only way to
know that an error has occurred is to notice a brief error message flash by in the
status area of the Netscape window. To see complete information about the error,
type 'javascript:' in the location window and the Console will open up with a list
of JavaScript errors.
Developers working on scripts loaded with potentially buggy JavaScript can force
the JavaScript Console to automatically come up when there's an error, or they can
display an error screen each time an error occurs, by adding a line to the Netscape
Preferences file:
1.Quit Netscape (your changes may not get saved properly if you don't).
2.On a Mac, find the "Netscape Preferences" file (this will be in the /System
Folder/Preferences/Netscape f/ folder).
On a PC, find the "prefs.js" file (this will be in the Program Files/Netscape/Users/
folder).
Open the file in a text editor like BBEdit or WordPad
3.Add the following line to your preferences file to open the Console automatically
on error:
user_pref("javascript.console.open_on_error", true);
4.Add the following line to your preferences file to display an error screen each
time an error occurs:
user_pref("javascript.classic.error_alerts", true);
5.Save your changes and close the file.
Online Resource
Netscape's JavaScript FAQ
(http://developer.netscape.com/support/faqs/champions/javascript.html)
Netscape's JavaScript
Developer Central
(http://developer.netscape.com/tech/javascript/index.html)
Netscape's
JavaScript Documentation
(http://developer.netscape.com/library/documentation/javascript.html)
Danny Goodman's JavaScript Pages
(http://www.dannyg.com/)
Microsoft's
JScript Pages
(http://msdn.microsoft.com/scripting/default.htm?/scripting/jscript/default.htm)
Webmonkey's
Javascript Pages
(http://www.hotwired.com/webmonkey/javascript/?tw=javascript)
(has 2 tutorials, basic and advanced)
JavaScript Sample Code Archives
Samples
and Tutorials from Developer.com
(http://www.developer.com/classroom/tutorials/cl_javascript.html)
JavaScript sample code from
Cut-n-Paste JavaScript
(http://www.infohiway.com/javascript/indexf.htm)
JavaScript sample code from
Live Software
(http://www.livesoftware.com/jrc/index.html)
Comments to Kelly Bond
TeamWeb at UT
Austin