JavaScript

* Most notes complements of Webteacher & w3schools.com

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. After you have been through the lessons, come back and read it again.

OOP is a programming technique 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 .

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 info you read will probably refer frequently to objects, events, methods, and properties. I will attempt to 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.

Example 1

Closer look at example

Start with the basic template.
In the head area is commonly where you declare Javascript functions.

<HEAD>

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

(all of your JavaScript functions)

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

</HEAD>
Typical function

function MyFunction (variable)
{

(stuff you want to do with the variable)
}
Create a function that alerts some passes variable

<HTML>
<HEAD>

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

function MsgBox (textstring) {
alert (textstring) }

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

</HEAD>
Now for the form.

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)">

That leaves us with the following:

<body>

<form>

<input name="text1" type="text">
<input name="submit" type="button" value="Show Me" onClick="MsgBox(form.text1.value)">

</form>

</body>
What's up with the onClick="MsgBox(form.text1.value)"?

This means when the user clicks on this button, the program should run the MsgBox 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!

This leaves us with Example 1

Now lets look at Example 2
Closer look at example 2.

function changecolor(code) {
document.bgColor=code
}

This page is an excellent example of one function being used by several buttons in the same document. Our function is called changecolor(code). It has only one line:
document.bgColor=code.

You probably guessed that bgColor stands for background color.
If I type document.bgColor="red" the background will turn red.

By writing the command document.bgColor=code I am allowing myself to define the variable code as any color I want.

Later, in the form. I define a button with the command:
onClick="changecolor('green')"

onClick="changecolor('green')" is telling the program 2 things:

Run the function named changecolor(code).
code='green'

Example 3 js password protected pages. In this case the password is "yes"

Now lets breakdown the code:

*NOTICE WHERE THE JavaScript is located....in the head area.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript">
<!--
var password = prompt("What's the password","Type password");

if (password == "yes")
{
alert("Correct");
location.href='yes.html';
}

else {
alert("Sorry wrong password");
location.href='http://www.pitt.edu'
}
-->
</script>

Alternative login

Two files necessary. The login file

Login file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">

</script>

<body >
<center>
<a href ="#" onMouseOver="gateKeeper()">Access the protected area.</a><br/>
<P>
Or, click Enter...<BR>
<form name ="gatekeeperbutton" ACTION="" onSubmit="gateKeeper()">
<input type="submit" value="Enter!">
</form>

</center>

</body>
</html>

Processing file (gatekeep.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

// Get your very own Gate Keeper from Professional Web Design
// http://junior.apk.net/~jbarta/weblinks/gate_keeper/

<body onLoad="top.window.focus()" BACKGROUND="keeper.gif">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD ROWSPAN=2 WIDTH=50%>
<TD WIDTH=50% ALIGN=CENTER VALIGN=MIDDLE>
<FONT FACE="ARIAL" SIZE=2><B>Hold on there, buddy. You'll need a password to get in here. We're tryin' to keep out the riff-raff.</B></FONT><BR>
<TR>
<TD WIDTH=50% ALIGN=CENTER VALIGN=BOTTOM>
<CENTER>
<FORM NAME="testform">
<INPUT TYPE="text" NAME="inputbox" VALUE="" size=20>
<INPUT TYPE="button" NAME="button" Value="Submit Password" onClick="goForit(this.form)">
<P>the password is "yes"
</FORM>
</CENTER>
</TABLE>

</body>
</html>