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)




Results:

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 and AJAX Toolkit

JavaScript Links

local_airport