xhtml + css + javascript demo
Jim Mahoney, April 2009, GPL

This demo introduces several ideas
on using xhtml, css, and javascript
together to make a web page do something
in response to user activity.

We'll discuss each of these ideas in class;
I'm not going to try to write down everything
there is to know about them here.  

 * DOM (document object model)
     * document, div, p, ...
     * each has "methods"
     * details visible in firebug window
     * invoke with a syntax like
          document.method()
 
 * functions in javascript are recipes of tasks;
   each is like a mini program.
   Their definitions looke like this:
     
     function its_name(argument1, argument2){
       do_this();
       do_that();
     }
     
   Then to "run" one of these (we say "invoke" it), 
   you give its name, with parens after, and any
   information to send along, like this.
   
     its_name(1.3, 'hello')

 * user actions : when this happens, do this javascript
     * onclick = "some_function_to_do()"
     * onmouseover
     * onmouseover
     * onload

And it all fits together like this :

 (1) A user action is defined in the xhtml, 
     that specifies which javascript function
     to run when a certain "event" takes place.
 
 (2) The javascript function manipulates properties
     of the DOM objects to change things in 
     the webpage, including CSS values and page content.

At the top level, there's a unique "document" object
that refers to the whole web page.  It has methods 
that let you fetch other DOM objects, and store them
in named "variables".

Note that here the "=" is an "assignment", which means
 * get that thing on the right hand side, 
 * and stick it in the location named on the left hand side.

 javascript example :
   a = 2;
   b = 3;
   c = a + b;
   alert("a + b is " + c)
 
 

Here's an example.
 
=== in the html =====

 <div id='stuff'>
  <a href="#" onclick="change_stuff_color()">
    change background
  </a>
 </div>

=== in the javascript ==========

  function change_background(){
  
    the_stuff = document.getElementById('stuff')
 // ^^^         ^^^      ^^^            ^^^
 // variable    object   method         argument
 
    the_stuff.style.background_color='yellow';
  }

==============================

Things to play around with :

 * Put in some mistakes, and see the messages in FireBug.
 
 * Watch properties of DOM objects change in FireBug.
 
 * Execute javascript directly from FireBug console.

===============================
 
Gotcha's :

 CSS names like 
  
    background-color
    
 turn into javascript names like
 
    backgroundColor
 
 since otherwise javascript sees the "-" character as "minus".
 
==============