Rich client: Under the hood

• Elements: The "nouns" in the HTML code; things like tables (<table>), rows (<tr>), and links (<a>)
• Events: Triggers that are set off by user or system initiated actions
• Attributes/Properties: The "adjectives" of the elements
• Styles: Similar to attributes/properties, with some overlap; styles are more extensively defined to cover greater detail with CSS

When working with these four pieces, you can dictate that when a specific event occurs, an attribute of a particular object must change. You can do this for everything on the page.

<baby id="babyJoe" 
      onCry="checkCry(this)" 
      style="personality:cute"> I am cute </baby>

function checkCry(babyFocus) {
     if  (babyFocus.wetDiaper) {
           changeDiaper(babyFocus);
            babyFocus.style.personality = "happy";
     }
}

Not only can you reference existing HTML elements, you can also insert new nodes into the document. You can seamlessly remove nodes as well. Need an extra row in that table? Just add one on the client side: tbody.insertRow(0). Need to remove a row? Rip it out: table.deleteRow(0). No trips to the server are needed and the user is in complete, instantaneous control.