Struggling for Competence

First Steps with JavaScript and jQuery

I'm beginning to learn JavaScript and jQuery. I want me some of those sexy client side effects. I've got a couple of books to help JavaScript: The Good Parts (Crockford) and Learning jQuery (Swedberg). I'd recommend both, though to be honest with you the JavaScript book is a bit hard for me as a beginner.

Getting started is pretty simple:

  1. Download jQuery code and visual studio documentation
  2. Get intellisense working in visual studio.
  3. Get QUnit, a jQuery unit testing tool.

Installation is simply putting the jQuery and QUnit files somewhere suitable in the source tree, and then referencing them in the head of your web page. My first jQuery program calculates how long it takes to double your money with a given interest rate:

interest.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>Calculate Interest Payments</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script src="../jquery/jquery-1.3.2.js" type="text/javascript"></script>
		<script src="interest.js" type="text/javascript"></script>
	</head>
	<body>
	    <div>
	        <div>
	            <h2>Double your money</h2>
	            <p>How long does it take for your money to double for a given interest rate?</p>
                Interest (%/year) 
                <input id="rate" type="text"/>
                <input id="calculate" type="button" value="Calculate" />
                <span id="result"/>         
            </div>
	    </div>
	</body>
</html>

interest.js


/// <reference path="..\jquery\jquery-1.3.2.js"/>

$(document).ready(function() {
    $('#calculate').bind('click', function() {
        var rate = $('#rate').val()
        $('#result').text(doublePeriod(rate) + " Years");
    });
});

function doublePeriod(interestRate) {
    return 72 / interestRate;
}

interest.test.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <script src="../jquery/jquery-1.3.2.js"></script>
    <script src="interest.js"></script>
    <link rel="stylesheet" href="../jquery/testsuite.css" type="text/css" media="screen" />

    <script>
        $(document).ready(function() {
            test("Test doublePeriod", function() {
                equals(doublePeriod(8), 9, "");
            });
        });
    </script>
</head>
<body>
    <script type="text/javascript" src="../jquery/testrunner.js"></script>
    <h1>Interest</h1>
    <h2 id="banner"></h2>
    <h2 id="userAgent"></h2>
    <ol id="tests"></ol>
    <div id="main"></div>
</body>
</html>