JavaScript

If HTML provides structure and CSS dictates designs, then Javascrip adds the electricy, so to say, that evolves static digital content into a dynamic application. Javascript is often what makes things happen when an action is taken, like the click of button to query weather or finance data. Javascript sometimes updates content without user action, like when stock quotes change on a page in realtime.

In addition to improving load time and multi-platform compatibility, JavaScript and AJAX create a dynamic Web user experience. It’s true: JavaScript can change the way you live your life.

Form examples

Jump-to-page menu

<select class="select-port" name="newLocation" onChange="jumpPage(this.form.newLocation)">

        <option value="botswana/index.php">Botswana</option>

Conditional menus

Hidden menus

Convert characters to unicode (try 北京 or Běijīng)

Sortable Tabular Data

Tables should be used for tabular data; such with my (sortable) baseball cards most wanted list:

Wanted	Year	Brand
Joe Montana	1981	Topps
Michael Jordan	1986	Fleer
Shaq Rookies	1993	All
Roger Clemens	1984	Fleer Updated
Barry Bonds	1986	Topps Traded Tiffany

Debugging

JavaScript can be a pain debugging. Although loosely typed and forgiving with syntax, there are still a number of issues that will frustrate. To start:

Add in an alert box to make sure statements work

alert("Test");

Determine if targeting is correct by parsing the value

if alert == to None, then it is finding.
If alert == undefined, then it is not finding.

alert("form.Node=" + form.Node.value);

JavaScript & DOM Manipulation

Change cursor — Roll over each one to see it

<span onmouseover = "this.style.cursor='pointer';">

Cursors: crosshair, default, e-resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text, w-resize, wait, inherit

Browser functions

<a href="javascript:window.close();">Close window</a>

      <a href="javascript:history.back(1);">Go back</a>

      <a href="javascript:location.reload();">Reload</a>

      <a href="javascript:window.print();">Print me</a>

      <a href="javascript:void();">This link won’t work</a>

Conditional comments

<!--[if !IE]><!-->

      <a href="#" onclick="alert('Use IE');">Text</a>

      <![endif]-->

      <!--[if IE]>

      <a href="url">Text</a>

      <![endif]-->

JavaScript

Form examples

Sortable Tabular Data

Debugging

JavaScript & DOM Manipulation

JavaScript and AJAX Toolkit

JavaScript Links