Essential Javascript -- A Javascript Tutorial

By Patrick Hunlock
2007-12-02


DHTML: Dynamic HTML

The above example is what's technically considered Dynamic HTML (or DHTML) because the contents of the page dynamically change based on user interaction after the page has finished loading. Going into great detail on DHTML is beyond the scope of this article but there is one small, trivial jump that can really change how you see HTML and Javascript.

This page has pulled an HTML element with the use of document.getElementById. Once we've had this assigned to a variable we've been able to manipulate the contents of that element with innerHTML, and in the case of forms find the value of the element with the value property.

There is also a style property which lets you access, and change, the CSS styles for that element. There is a nice CSS reference at ILoveJackDaniels. Most all of the properties you can access are listed on the left and right margin of the cheat sheet (the interior/brown areas aren't applicable). The only real trick is that where you see a dash in the CSS name, for Javascript you need to remove the dash and capitalize the next letter. So the CSS style background-color becomes backgroundColor in Javascript.

Here's an example which will change the background color of a division when you click on it's contents.

<div id="example" onClick="colorize()">Click on this text to change the background color</div>
<script type='text/javascript'>
   function colorize() {
      var element = document.getElementById("example");
      element.style.backgroundColor='#800';
   }
</script>

And the example.

Here we create a division with a name of example which will call a function called colorize() when that division is clicked. colorize() will lookup the example division and assign it to the Javascript variable element. Next, we assign a color of #800 (burgundy) to the element's style.backgroundColor property.

This actually made the text hard to read so in the next example we'll add another line to change the color of the text to white.

<div id="example" onClick="colorize()">Click on this text to change the background color</div>
<script type='text/javascript'>
   function colorize() {
      var element = document.getElementById("example");
      element.style.backgroundColor='#800';
      element.style.color='white';
   }
</script>

And the new example…

And lets go ahead and center the text as well.

<div id="example" onClick="colorize()">Click on this text to change the background color</div>
<script type='text/javascript'>
   function colorize() {
      var element = document.getElementById("example");
      element.style.backgroundColor='#800';
      element.style.color='white';
      element.style.textAlign='center';
   }
</script>

The manipulation of an HTML element's CSS styles is incredibly powerful! You can hide, or display elements with the style.display property (style.display=none=invisible, style.display=block=visible) You can let the elements float over the page with style.position (absolute/relative/fixed), you can change their position on the page by setting style.left and style.top. The possibilities are literally endless.

Tutorial Pages:
» Essential Javascript -- A Javascript Tutorial
» Getting Started
» In-Line Javascript
» External Javascript
» Javascript is case sensitive
» Output (writeln)
» Output (alert)
» Output (getElementById)
» Input (One Click To Rule Them All)
» Input (User Input)
» Javascript is an Event Driven Language
» Comments
» Variables
» Variable Scope
» Special Keywords
» Arithmetic Operators
» Logical and Comparison Operators
» JavaScript Conditionals: IF
» JavaScript Conditionals: SWITCH
» JavaScript Conditionals: Shorthand Assignment
» JavaScript Conditionals: Ternary Operators
» JavaScript Loops: FOR
» JavaScript Loops: FOR/IN
» JavaScript Loops: WHILE
» Bringing It All Together
» DHTML: Dynamic HTML
» Conclusion


copyright © 2006, 2007 by Patrick Hunlock

Related Tutorials: » JavaScript Debugging Techniques with Firebug » Striped Tables Using JavaScript » Opening PDFs in a New Window with JavaScript » Submit Forms Conditionally using JavaScript » How to Setup a Randomising Function » Introduction to JavaScript Tutorial