jQuery

A basic Bootstrap template with script libraries

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery</title>
  <link rel="stylesheet" href="/css/bootstrap.css">
  <script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="/js/bootstrap.js"></script>
</head>
<body style="padding-top: 50px;">
<div class="navbar navbar-fixed-top"></div>
<script>
    $(function() { $(".navbar-fixed-top").load("navbar.html"); });
</script>
<div class="container">
<h1>jQuery</h1>
</div>
</body>
</html>

Ignoring the advice that the page might just load a wee bit faster by putting the script references down before the end of the body, I've come up with this basic template for this web site.

The companion script library to the Bootstrap styles contains over a dozen jQuery plugins that can help in making web pages look even prettier than with just the styles alone. Being jQuery plugins, it is no surprise the jQuery proper is required and needs to be loaded first.

Loading the navigation bar

The template above doesn't even contain any of the markup that the Bootstrap plugins rely on. The entire navigation bar is gone, just leaving a single placeholder behind, followed by one of those 1-line scripts that jQuery's fame is based upon.

Ever since web pages with framesets fell out of fashion, eventually being banned entirely from the HTML5 standards, the site navigation needs to be a part of every single page on the site. All kinds of templating schemes have been developed that can piece together a complete page from a header, body, and footer section. For the purpose of this site there should not be any reliance on the server to achieve that, ruling out PHP on the Apache backend or JSPs and Velocity on any Java backend.

Another requirement for me was that the page content should not be separated from the stylesheet and script references, so that a somewhat intelligent HTML editor can better support the development of the page, e.g. by autocompletion for jQuery methods. The NetBeans IDE does a pretty good job at that, but there sure are other options out there. I'm currently using Netbeans in PHP mode, but with no PHP actually involved here that only means the HTML files get deployed to an htdocs directory of a local XAMPP installation during development.

AJAX extra light

So what does

    $( function() { $(".navbar-fixed-top").load("navbar.html"); } );

actually do?

On the index.html page the navigation bar is not loaded via AJAX but included directly. This is necessary so that search engines can follow these links. The Google crawler is not doing any AJAX.

A drop-down menu

<div class="navbar-inner container">
<a class="brand" href="../index.html">&nbsp;Home</a>
<ul class="nav">
    <li><a href="index.html"    >Overview</a></li>
    <li><a href="jscript.html"  >Javascript</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">jQuery</a>
        <ul class="dropdown-menu" role="menu">
        <li><a href="jquery.html">JQuery entry page</a></li>        
        <li class="divider"></li>
        <li><a href="StreetXing.htm" target="_blank">Street crossing game</a></li>
        <li><a href="Labyrandom.htm" target="_blank">Random maze game</a></li>
        </ul>
    </li>
    <li><a href="angular.html"  >Angular.JS</a></li>
</ul>
</div>

Here is a shortened menu structure that can be found in navbar.html. There are no further lines of script. So where does JavaScript get involved here? Bootstrap uses a rather intricate combination of CSS definitions and jQuery to make things happen.

Behind the scenes

Looking through the 150 lines of code for the Dropdown plugin in boostrap.js I've found the equivalent to this line:

    $(document).on('click.dropdown', '[data-toggle=dropdown]', toggle)

This gets executed before my navbar.html ever gets loaded. Still the dropdown menu contained therein does its job as expected. Well, jQuery is such a gold mine for JavaScript reverse engineering and I felt much enlightened after this discovery:

The particular beauty of this type of event handler is that the document element and the event handler are there before my navigation bar gets inserted into the document structure. Once it is in, a click on the anchor

    <a href="#" class="dropdown-toggle" data-toggle="dropdown">jQuery</a>

bubbles up just the same. This allows markup to be inserted dynamically with full plugin capabilities.

More complex examples

jQuery is very good in a number of areas

The two little browser games linked into the menu above are the result of my more in-depth studies with jQuery. The Manning book jQuery in Action was very helpful. I realised that JavaScript purely as a dynamic language is actually pretty powerful and smart. A lot of the ugliness in JavaScript browser applications is due to the less than pretty offical W3C DOM API and Microsoft's bungling with it. This is where jQuery plays its strength. You still need to learn JavaScript itself, although a lot of your code might be jQuery centric, but you probably will never get close to calling the DOM API directly again. jQuery makes use of API advances when they become available, e.g. the selection of elements by CSS selectors with .querySelectorAll. But even with official APIs becoming more powerful, the shorthand style supported by jQuery will keep it popular for a long time to come.