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 and AJAX Toolkit
- jQuery | jQuery UI
- jsFiddle — online editor for jQuery, MooTools, etc.)
- JavaScript forum — webdeveloper.com
- Stack overflow — JavaScript
- JavaScript reference — W3 Schools
- JavaScript tutorial — W3 Schools
- Special characters — W3 Schools
- Event handlers — W3 Schools
- MochiKit JavaScript Library
- Yahoo YUI Library
- Dojo JavaScript Toolkit
- JavaScript Kit
- Pop-up window generator
- Collapsible Divs (IE & Firefox)