Heading 1

JavaScript

HTML Template Containing a Script

Template.html

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> From HTML Template </TITLE>
</HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- hide from browsers

// script code goes here

//-->
</SCRIPT>

DOM

JavaScript is an object-based language. Users can create objects or use built-in objects. An object can have constructors, properties, methods, and event handlers.

Creating Generic Objects

myCustomer = new Object();
myCustomer.firstName = "Bill";
myCustomer.lastName = "Ding";
myCustomer.id = 4289;

myCustomers = new Array(10);
myCustomers[0] = myCustomer;

Built-In Classes/Objects

JavaScript provides a view of the XML Document Object Model (DOM). There seems to be some confusion over terminology, though. In some cases objects seem to be classes.

Array
Button
Date
Document
Element
Form
Function
Link
Location
Math
Navigator
Number
Object
String
Text
TextArea
Window
etc.

Syntax

JavaScript syntax is pretty similar to Java syntax except functions and variables are untyped.

Variable Declarations and Expressions

Fibonacci Sequence

The Script

<SCRIPT LANGUAGE="JavaScript">
<!-- hide script

function fib(n)
{
   if (n <= 1)
      return 1;
   else
      return fib(n - 1) + fib(n - 2);
}

document.writeln("The Fibonacci sequence: <br>");
for(var i = 0; i < 10; i++)
{
   var count = fib(i);
   for(var j = 0; j < count; j++)
      document.write("+");
   document.writeln("<br>");
}

//-->
</SCRIPT>

Pascal's Triangle

The Script

<SCRIPT LANGUAGE="JavaScript">
<!-- hide script

// = n!
function fact(n)
{
   var result = 1;
   for(var i = n; i > 0; i--)
      result *= i;
   return result;
}

// = # of ways to choose m from n
function choose(n, m)
{
   if (m == 0 || m == n)
      return 1;
   else if (n < m)
      return 0;
   else if (m == 1 || m == n - 1)
      return n;
   else
   {
      var num = fact(n);
      var den = fact(m) * fact(n - m);
      return num/den;
   }
}

document.writeln("Pascal's Triangle: <br>");
for(var i = 0; i < 10; i++)
{
   for(var j = 0; j <= i; j++)
      document.write(choose(i, j) + '\t');
   document.writeln("<br>");
}

//-->
</SCRIPT>

Event Handling

Mouse Events

html

<html>
<head>
<title>Link Event Example</title>
</head>
<body>

<h1>Link Events</h1>

<a href="#" onClick="alert('Ooo, do it again!');">Click on me!</a><br>
<a href="#" onMouseOver="alert('Hee hee!');">Mouse over me!</a><br>

</body>
</html>

Example: Calculator

calc.html

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> From HTML Template </TITLE>
</HEAD>

<BODY BGCOLOR="#FFF00">
<H1 ALIGN="CENTER"> Calculator </H1>
<HR><p>

<SCRIPT LANGUAGE="JavaScript">
<!-- hide script

var arg = 0, ans = 0, y = 0;
var resultBox = window.document.forms[0];

function handleClick(x)
{
   if (0 <= x)
   {
      arg = 10 * arg + x;
      resultBox.display.value = arg;
   }
   else
   {

      if (y == -2) // +
      {
         ans += arg;
      }
      else if (y == -3) // *
      {
         ans *= arg;
      }
      else if (y == -4) // -
      {
         ans -= arg;
      }
      else if (y == -5) // /
      {
         ans /= arg;
      }
      else
      {
         ans = arg;
      }
      if (x == -1) // =
      {
         //ans = arg;
         y = 0;
      }
      else
      {
         y = x;
      }
      arg = 0;
      resultBox.display.value = ans;
   }
}

//-->
</SCRIPT>

Forms

Example: Craps

craps.html

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Craps </TITLE>
</HEAD>

<BODY BGCOLOR="#FFF00">
<H1 ALIGN="CENTER"> Want to play CRAPS? </H1>
<HR><p>

<FORM NAME="craps" onSubmit="roll(); return false;">
Die #1 <INPUT TYPE=TEXT NAME=die1 SIZE=10><BR>
Die #2 <INPUT TYPE=TEXT NAME=die2 SIZE=10><BR>
total <INPUT TYPE=TEXT NAME=total SIZE=10><BR>
point <INPUT TYPE=TEXT NAME=point SIZE=10>
<P><INPUT TYPE=SUBMIT VALUE="Roll">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!-- hide script

var sum, point;
var newGame = true;

}
//-->
</SCRIPT>

JavaScript Styles

Dynamic HTML

Event Monitoring

JavaScript Applications

HTML Customization

Dynamic HTML

Validating Forms

Manipulating Cookies

Interacting with Frames

Calling Java

Java Calling JavaScript