JavaScript

Illuminating the Web: JavaScript’s Dynamic Role

If HTML provides the structure and CSS orchestrates the design, then JavaScript infuses the ‘electricity’—bringing static digital content to life as a dynamic application. JavaScript is typically the driving force behind action and reaction—like the click of a button to fetch weather or financial data, or the autonomous refresh of real-time stock quotes on a page.

Enhancing load times and ensuring multi-platform compatibility, JavaScript, in conjunction with APIs and asynchronous calls, delivers a vibrant web user experience. Indeed, JavaScript possesses the potential to revolutionize your interaction with the digital world.

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