- hw04 deadline sect.11: Thu 23:59

- quick review of some html concepts
- DOM
- examples of javascript which modifies the DOM

======

- quick review of some html concepts
  What's the different between the tags 
     <em>    <i>    <cite>
  "em" is semantic: emphasis
      HTML properly shows the *structure* of the document
  "i" is the details of presentation
      Presentation SHOULD be handled by css (hence <i> is deprecated)

- when using css:
  There are three ways to associate CSS with a tag:
  - id        #fname { font-style: bold; }
  - by tag:   h3 { font-style: bold; }
        useful for having a uniform design-feel.  (not common, for me)
  - class:    .important { font-style: bold; fg-color: blue; }
       <li class="important">...</li>
       Use meaningful ("semantic") names for your classes.

Most html tags convey meaning/structure.
There are two tags that don't come with pre-defined meaning:
  div   span
These tags, when combined with a meaningul css class-name,
  kinda become new semantic html tags!!
      <span class="important">...</span>
      I said <span class="foreign">au revoir</span> to my vacation.

---------
DOM -- Document Object Model -- the page's html tree as represented
   live, in browser's memory.
   Starts as the html (as a tree);
   each node (in addition to its children)
   has its attributes (from html) AND all css attributes (like font-size).
   It can change as time passes.
   
   Note that the html `<h3 align="center">blah</h3>`
   turned into, in the DOM, a h3 node with an 
    attribute "align" whose value is "center".
   In general, any HTML-attribute becomes a DOM-attribute.
   With one exception: the HTML-attribute "class" corresponds, in the DOM,
     to the attribute "classname". [Gotcha!]   
     (reason?: 'class' is a reserved word in javascript?)




'class' vs 'classname'
   
Our favorite javascript function:
    document.getElementById("fname")  -- go to the DOM and grab one node (and return it)

      Note: `document` is a global variable holding the DOM;
            this global variable exists only if running javascript
            inside a browser.

    // some lines of javascript:
    var someNode;
    someNode = document.getElementById("fname");

    someNode.align="left";  // we can assign to fields(attributes) of a node

    // Or just:
    document.getElementById("fname").align="left";


    someNode.style.color = "blue";
    someNode.classname = "important";  // change the css class



==== Javascript that modifies the DOM



------------
We want to *generate* tags that look like:
<a href="#Aardvarks" onclick="showJust('animalParagraphs','Aardvarks');">Aardvarks</a> <br />
<a href="#Bees" onclick="showJust('animalParagraphs','Bees');">Bees</a> <br />


The javascript:
     document.createElement('a');   (call it `newMenuItem`)
     think:  "<a></a>" if it were html
creates a whole new DOM-node, but it's currently disconnected from the
rest of the tree.  (We'll attach it later.)


   newMenuItem.appendChild( document.createTextNode(aChild.id) )
     think:  "<a>Aardvark</a>" if it were html
     
   newMenuItem.setAttribute('href', '#'+aChild.id);
     think:  "<a href='#Aardvark'>Aardvark</a>" if it were html

   newMenuItem.setAttribute('onclick', ... )
     think:  "<a href='#Aardvark' onclick=...>Aardvark</a>" if it were html

   newMenuItem.setAttribute('onclick', "showJust('" 
                                     + choiceSourceId 
                                     + "','" 
                                     + aChild.id 
                                     + "');" );
     think:  "<a href='#Aardvark' onclick=...>Aardvark</a>" if it were html



       html
     /      \
   head     body
           /  |
              p id='navBar'
             /|\ 
            a a a