[release] Java tutorial !

Warning this is a long topic but could be helpful!

Welcome To
JavaScript for the Total Non-Programmer

This tutorial will take you step by step through the fundamentals of Javascript. You will learn how to write functions, use data from text boxes, create IF-THEN conditionals, program loops, and generally make your web page "smarter."

I teach computer classes for a living to corporate clients of all levels. After 2 years of teaching, I have learned a lot about communication between people of various levels of computer experience. This tutorial assumes that you have no prior programming experience, but that you have created your own HTML pages.

If you find this tutorial helpful, please let me know (it's my only reward). Also, links are graciously accepted.

What is JavaScript?

Javascript is an easy-to-use programming language that can be embedded in the header of your web pages. It can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more.

What's the difference between JavaScript and Java?

Actually, the 2 languages have almost nothing in common except for the name. Although Java is technically an interpreted programming language, it is coded in a similar fashion to C++, with separate header and class files, compiled together prior to execution. 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 excitment 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 I want check a form for errors, I just type an if-then statement at the top of my page. No compiling, no applets, just a simple sequence.

What is Object Oriented Programming?

Everyone that wants to program JavaScript should at least try reading the following section. If you have trouble understanding it, don't worry. The best way to learn JavaScript is from the examples presented in this tutorial. After you have been through the lessons, come back to this page and read it again.

OOP is a programming technique (note: not a language structure - you don't even need an object-oriented language to program in an object-oriented fashion) designed to simplify complicated programming concepts. In essence, object-oriented programming revolves around the idea of user- and system-defined chunks of data, and controlled means of accessing and modifying those chunks.

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.

Other Javascript pages you read will probably refer frequently to objects, events, methods, and properties. This tutorial will teach by example, without focusing too heavily on OOP vocabulary. However, you will need a basic understanding of these terms to use other JavaScript references.

Objects and Properties

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.

HOW IT'S DONE

Here's the entire page, minus my comments. Take a few minutes to learn as much as you can from this, then I'll break it down into smaller pieces.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

function MsgBox (textstring) {
alert (textstring) }

// - End of JavaScript - -->
</SCRIPT>

</HEAD>



<BODY>
<FORM>
<INPUT NAME="text1" TYPE=Text>
<INPUT NAME="submit" TYPE=Button VALUE="Show Me" onClick="MsgBox(form.text1.value)">
</FORM>

</BODY>
</HTML>


First of all, remember that your HTML page is divided into 2 segments, the HEAD and the BODY.

You set up your page this way:

<HTML>
<HEAD>
(Stuff about your page in general such as the title.)

</HEAD>


<BODY>
(The actual contents of your page.)

</BODY>
</HTML>

in the <HEAD> area, a new pair of tags has been introduced: <SCRIPT> and </SCRIPT>

All browsers currently assume you are programming in JavaScript, but other programming languages might come along in the future. As a result, it is standard form to open your scripting area with:
<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.

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>

You can name your functions anything you want. I chose to name mine MsgBox, but I could have named it Kalamazu or something else.

A function is typed like this:

function MyFunction (variable) {

(stuff you want to do with the variable)
}
This animation shows how a number can be passed to the variable "data" and then used in a function written for that 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>

ll 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>
We ended the description of the form button with:

onClick="MsgBox(form.text1.value)"

This means when the user clicks on this button, the program should run the MsgB ox function from the top of the page, and use the value of the form object named text1 as its variable.

huh?

OK, there are 2 objects in the form, a text box and a button, right? Each object has a name, and the text box is named text1. The text box's full name is form.text1. The number of characters typed in the box is called form.text1.length. The value, or string of text that was typed is called form.text1.value

If this is getting too jargon-ish for you, just remember that you end your "submit" button with
onClick=function(form.textboxname.value) where function and textboxname will be substituted.

That's it! The value of text1 gets passed to the MsgBox function; the MsgBox function passes it to the Alert command; and the alert command displays your text for all to see!

Here is a look at the script. See if you can trace how it works.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

function changecolor(code) {

document.bgColor=code
}
// - End of JavaScript - -->
</SCRIPT>

</HEAD>
<BODY>

<form>
<input type="button" name="Button1" value="RED" onclick="changecolor('red')">

<input type="button" name="Button2" value="GREEN" onclick="changecolor('green')">

<input type="button" name="Button3" value="BLUE" onclick="changecolor('blue')">

<input type="button" name="Button4" value="WHITE" onclick="changecolor('white')">

</form>

</BODY>
</HTML>

The if-then statement.
OK, once again, here is the entire code. Give it a look, then we'll break it down. This is a good example of an If-Then statement. Password scripts can also be combined with an encryption function so that hackers can't break in simply by viewing your source code. The purpose of this chapter, however, is to give you some practice with if-then statements.

<HTML>
<HEAD>
<TITLE>Chapter 3, If-then statements</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

function password() {

Ret = prompt('Type the word castle',"");
if(Ret=="castle") {
location = 'ch03_1.htm';
} else {
alert("Please try again")
}
}
// - End of JavaScript - -->
</SCRIPT>

</HEAD>
<BODY>

<A HREF="javascriptassword()">
<IMG SRC="pict1.gif" NAME="pic1" ALT="about us!" BORDER="0" align="left"></A>

<H3>Click the image to enter a password protected document. Try a wrong entry first.</H3>

</BODY>
</HTML>
function password() {
Ret = prompt('Type the word castle',"");
if(Ret=="castle") {
if(Ret=="castle") {
location = 'ch03_1.html';
} else {
alert("Please try again")
}
The if-then statement

The second line of the function is an if-then statement. It tells the computer that if the variable Ret equals "castle" then change the URL location to ch03_1.html. Otherwise, show the alert box which says "Please try again."

Here is the format of an if-then statement:
IF (a comparison)
{ sequence if the comparison is true }

ELSE { sequence is the comparison is false }

For example, let's say you've just had the reader complete a form which included their age. You want all Senior Citizens to get one message, and everyone else to get another when they submit the form.

age=form.age.value transfer the contents of the age box on the form to a variable called age.
if (age>=65) The if statement begins with the question in parentheses.
{alert("Your form has been submitted. Ask about our Senior Discounts") }
The alert box will be displayed if the question is true, age IS greater or equal to 65
ELSE {alert("Your form has been submitted.") }
The alert box command following the word ELSE will only be displayed if the question is false, and age IS NOT greater or equal to 65.


location = 'ch03_1.html';