Indiana University
Division of Continuing Studies

September 3, 2001
Lecture Three

Javascript. The DOM

Let's create a few JavaScript objects and put them to use: 

<html>
  <head><title>Testing</title></head>
  <body bgcolor=white>
  <script language="Javascript">

    var account = new Object(); 

    account.balance = 20; 

    function getBalance() {
      return this.balance; 
    }

    account.getBalance = getBalance; 

    function deposit(amount) {
      this.balance += amount; 
    }

    account.deposit = deposit; 

    document.write(account.getBalance() + "<br>"); 

    account.deposit(30); 

    document.write(account.getBalance()); 
    </script>
  </body>
</html>

So we see that objects are simply hashtables.

Also, that functions are first-class entities in Javascript.

Let's do some of these exercises.

Here are some diagrams we used in the Java class.

Let's look now at cosntructor functions. 

<html>
  <head><title>Testing</title></head>
  <body bgcolor=white>
    <script language="Javascript">

      function Account(initialBalance) {
        this.balance = initialBalance; 
        this.deposit = function deposit(amount) {
                         this.balance += amount; 
                       }
        this.getBalance = function getBalance() { return this.balance; }
      }

      var account = new Account(20); 
      account.deposit(300);

      document.write(account.balance + "<br>"); 

      document.write(account.getBalance()); // [1] 

    </script>
  </body>
</html>
What do you think would happen if we changed the line marked // [1] to 
document.write(account.getBalance);
Note that the parens are missing.

Well, functions are first-class (that is, they can also be data).

Here are a few more examples: 

<html>
  <head><title>Testing</title></head>
  <body bgcolor=white>
    <script language="Javascript">

      function square(x) { return x * x; }

      a = square(4); 

      b = square; 

      c = b(5); 

      document.write(a + "<hr>" + b + "<hr>" + c); 

    </script>
  </body>
</html>
Let's look now at objects as associative arrays (or hashes in Perl). 

object.property
and 
object["property"]
are one and the same thing.

Here's where the second approach would make a difference: 

<html>
  <head><title>Testing</title></head>
  <body bgcolor=white>
    <script language="Javascript">

        var one = new Object(); 

        for (i = 0; i < 4; i++) 
          one["prop" + i] = "This is property " + i; 

      document.write(one.prop0 + "<br>"); 
      document.write(one.prop1 + "<br>"); 
      document.write(one.prop2 + "<br>"); 
      document.write(one.prop3 + "<br>"); 

    </script>
  </body>
</html>
How do we get the properties out in a more uniform manner?

You need to know about the for/in construct. 

<html>
  <head><title>Testing</title></head>
  <body bgcolor=white>
    <script language="Javascript">

      var one = new Object(); 

      for (i = 0; i < 4; i++) 
        one["prop" + i] = "This is property " + i; 

      // document.write(one.prop0 + "<br>"); 
      // document.write(one.prop1 + "<br>"); 
      // document.write(one.prop2 + "<br>"); 
      // document.write(one.prop3 + "<br>"); 

      for (prop in one) {
        document.write(prop +": " + one[prop] + "<br>"); 
      }

    </script>
  </body>
</html>
Now we can put together these last two examples in a more complex one. 

<html>
  <head><title>Testing</title></head>
  <body bgcolor=white>
    <script language="Javascript">

      // first define some simple functions
  
      function add(x, y) { return x + y; }
      function subtract(x, y) { return x - y; }
      function multiply(x, y) { return x * y; }
      function divide(x, y) { return x / y; }

      // this function takes three arguments
      //      a function (operator)
      //      and two operands (operand1, operand2) 

      function operate(operator, operand1, operand2) {
        return operator(operand1, operand2); 
      }

      var result = operate(add, 3, 4); 

      document.write(result + "<br>"); 

      document.write(operate(add, operate(subtract, 3, 4), 5) + "<br>"); 

    </script>
  </body>
</html>
Here's an even more powerful example.

So it's a bit like this: 

<html>
  <head><title>Testing</title></head>
  <body bgcolor=white>
    <script language="Javascript">

      var value = 3; 

      function add(val, arg) { return val + arg; }

      function subtract(val, arg) { return val - arg; } 

      function change(n) {
        if (n % 2 == 0) {
          eval("value = add(value, " + n + ")"); 
        } else {
          eval("value = subtract(value, " + n + ")"); 
        }
      }
 
      change(2); 

      document.write(value + "<br>"); 

      change(3); 

      document.write(value + "<br>"); 

   </script>
</body>
</html>
We'll spend the rest of the day looking at the CSS example and the shopping cart.

Last modified by Adrian German on September 5, 2001 for the IU CTED WebDev Certificate Program