I’m working on an HTML application. It’s a Workout Timer and will become an HTML5 experiment that is “desktop deployable” and will store user profiles using HTML5 local storage, etc.

Though the application is in the very early stages, I know where I’m going and I want everything to be highly configurable, and for those customizations to be savable by the user.

Using the following prototype code I’m displaying a “stop watch” type display.


[sourcecode language=”html”]
<!DOCTYPE html>
<html>

<head>
<meta content=’en-us’ http-equiv=’Content-Language’>
<style type=’text/css’>

.fighttimer {
text-align: center;
padding: 5px;
width: 96%;
}

</style>

<script type=’text/javascript’ src=’js/jquery.js’></script>
<script type=’text/javascript’ src=’js/jquery.fighttimer.js’></script>

</head>

<body>

<table class=’fighttimer ‘>
<tr>
<td>&amp;nbsp;</td>
<td>&amp;nbsp;</td>
</tr>
<tr>
<td class=’timecountdown’>00:00</td>
<td>00</td>
</tr>
<tr>
<td>
<input type=’button’ class=’timestart’ value=’Start’ />
<input type=’button’ class=’timestop’ value=’Stop’ />
<input type=’button’ class=’timereset’ value=’Reset’ />
</td>
<td>&amp;nbsp;</td>
</tr>
</table>

<script type=’text/javascript’>
$(function() {
$(‘.fighttimer’).fighttimer();
});
</script>

</body>
</html>

[/sourcecode]


I’m using a table for layout because I want all the features of the timer to be displayed in a grid and dynamically resizable by the end user.

Each part of the User Interface will be manipulated in JavaScript code.

Note in the markup above the inclusion of a JavaScript file on line $17 in which we define a jQuery plugin for our Timer Application.

Note also here JavaScript code block starting on line #42 where we wire up our custom plugin to elements whose class is “fighttime”.

In our case this is a single table object.


Our unfinished jQuery code is as follows:


[sourcecode language=”javascript”]
(function($) {
jQuery.fn.fighttimer = function() {

var roundtimer = $(this);
var MinutesPerRound = 3;
var PlusSecondsPerRound = 0;
var DisplayTime = ”;
if (MinutesPerRound &lt; 10)
{
DisplayTime = ‘0’;
}
DisplayTime = DisplayTime + MinutesPerRound + ‘:’;
if (PlusSecondsPerRound &lt; 10)
{
DisplayTime = DisplayTime + ‘0’;
}
DisplayTime = DisplayTime + PlusSecondsPerRound;

var CountingTimeDisplay = roundtimer.find(‘.timecountdown’);
CountingTimeDisplay.text(DisplayTime);
var StopButton = roundtimer.find(‘.timestop’);
StopButton.hide();
}
})(jQuery);

[/sourcecode]


When the plugin is applied we want two things to happen.

  • The default interval time to be set in the time display.
  • The “Stop” button to be hidden since the timer is not running by default.

Of course, we could access the various elements on the html page by their assigned class directly in our jQuery code, but doing so assumes there will only be ONE element using each class name or that all elements using a specific class will be modified in the same way at the same time.

We could also access the individual elements from our jQuery code using the assigned element Id, but this is normally a pretty bad idea as it tightly couples your jQuery code to that one specific web page.

The answer to the above concerns is to use the jQuery $(this) object.

Note that JavaScript also has a this object [ read here ].

The jQuery $(this) object can be a bit confusing because it can contain either a “DOM Object” or a “jQuery Object” depending on it’s use [ read more HERE ]

In short, if you reference $(this) in a JavaScript callback function like a DOM element’s event handler, $(this) contains a DOM element.

If you use $(this) inside a custom jQuery function, then $(this) will refer to a jQuery Object.

While this may seem like a minor distinction, being aware of this would have saved me some frustration when the “this” object wasn’t working as I expected.

In the code listing above, note line #4


[sourcecode language=”javascript”]
var roundtimer = $(this);
[/sourcecode]


So, what does “roundtimer” now reference ?

The object that our plugin was wired to (in our case a table).

Note that the time to count down from has been set to 3:00 in the code and the “Stop” button has been hidden.

While running the page in Internet Explorer 9, hit F12 to bring up the developer tools.

Follow there steps.

  1. Switch to the “Script” tab and use the file selector (highlighted) to select our custom jquery.fighttimer.js file.
  2. Click “Start Debugging”
  3. Set a breakboint on line #5 by clicking next to line #5 in the left gutter or right-clicking on the line and choosing “Insert Breakpoint” from the context menu.
  4. Then refresh your browser.
  5. Double-Click on the variable “roundtimer”, right-click and select “Add Watch” (it should be undefined untill we start stepping in the code”.
  6. Press F10 to step past the declaration of the “roundtimer” variable and the assignment from $(this)
  7. Expand the “roundtimer” watch item and find the “OuterHTML” element.

Looking at the outerHTML element we confirm that what we have received from $(this) is the table element that we wired up to out plugin.

You can also use the Internet Explorer 9 Developer Tool via the watch item we set above to explore the jQuery object’s properties and methods which I find very useful.