Extreme ASP.NET Makeover: Script - Testing JavaScript

Download

How do I download the videos?

• To download, right click the file type you would like and pick “Save target as…” or “Save link as…”

Why should I download videos from Channel9?

• It's an easy way to save the videos you like locally.
• You can save the videos in order to watch them offline.
• If all you want is to hear the audio, you can download the MP3!

Which version should I choose?

• If you want to view the video on your PC, Xbox or Media Center, download the High Quality WMV file (this is the highest quality version we have available).
• If you'd like a lower bitrate version, to reduce the download time or cost, then choose the Medium Quality WMV file.
• If you have a Zune, WP7, iPhone, iPad, or iPod device, choose the low or medium MP4 file.
• If you just want to hear the audio of the video, choose the MP3 file.

Right click “Save as…”

• Mid Quality WMV (Lo-band, Mobile)
• MP3 (Audio only)
• MP4 (iPod, Zune HD)

Lingua Franca of the Programmable Web

JavaScript is the lingua franca of Web programming languages. It doesn’t matter whether you’re programming in .NET, Ruby, Python, PHP or a myriad of other server-side languages, the programming language of the browser is JavaScript. The official standard is more properly called ECMAScript and is specified in ECMA-262. JavaScript, JScript, ActionScript and others are all dialects of ECMAScript, but written by different vendors. Current browsers implement ECMA-262 Edition 3, which has been a standard since 1999. (Work is ongoing on ECMA-262 Edition 5. Edition 4 was abandoned due to irreconcilable differences within the standards committee.) The JavaScript dialect is managed by the Mozilla Foundation and is implemented by Firefox, Google Chrome, Safari and other browsers. JScript is Microsoft’s dialect and is implemented in Internet Explorer. The dialects are compliant with ECMA-262, but offer vendor-specific extensions. Throughout this article, I will use the common practice of referring to the language as JavaScript, though more properly, it should be called ECMAScript.

JavaScript Heritage

JavaScript has a reputation as a toy language. Many developers have the mistaken impression that JavaScript is a dumbed-down version of Java without strong typing. The reality couldn’t be further from the truth. When designing a new language for the Netscape browser, Brendan Eich, JavaScript’s creator, took inspiration from Self (a prototype-based object-oriented language) and Scheme (a functional language). The new language was named Mocha and later renamed LiveScript. With the surge in interest in Java in the late '90s, Mocha/LiveScript was rebranded JavaScript and modified to look more like Java, with curly braces and semicolons. In reality, JavaScript is more closely tied to its functional roots, where functions are treated as first-class citizens of the language. Although many developers still use JavaScript in a very procedural fashion, it is in fact a very powerful functional language that is running inside millions of Web browsers worldwide.

JavaScript Renaissance

A renewed interest in JavaScript has been sparked by recent JavaScript frameworks, such as jQuery, Prototype, YUI, Dojo and MooTools. jQuery has received a lot of attention recently, due in part to its power, simplicity, and ease of extensibility. It was first released by John Resig in 2006, and has since gathered an active community of contributors, plug-in authors and users. According to the jQuery Web site:

jQuery received an additional boost on Sept. 28, 2008, when Scott Guthrie, corporate vice president of the Microsoft Developer Division, announced that Microsoft had partnered with the jQuery development team and would be shipping jQuery with Visual Studio going forward. This was a historic moment because jQuery is released under the MIT open source license. Not only is Microsoft shipping an open source library with Visual Studio, it has committed to shipping the library unmodified and to contributing patches in the same way as any other developer or team.

The latest release, as of this writing, is jQuery 1.3.2, and it supports the major browsers in use today, including Internet Explorer 6.0+, Firefox 2.0+, Safari 3.0+, Opera 9.0+ and Chrome. Web development and JavaScript have garnered a bad reputation in development circles, in large part due to browser-specific inconsistencies, bugs and quirks. To achieve cross-browser support, jQuery provides a consistent API for manipulating the HTML DOM, attaching events, animating elements and AJAX interactions, by internally handling differences between browsers.

Testing JavaScript

Before diving headlong into replacing ScrewTurn Wiki’s classic-style JavaScript with jQuery-style JavaScript, we have to remember the purpose of refactoring – to change the internal implementation of code without changing its behavior. We could change the code and manually verify that the changes did not break anything, but we should be applying the same care with our JavaScript as we do with our server-side code. If this were C#, I would write a test to verify the current behavior, refactor the code and re-run the test to ensure that everything continued to behave as before. Why should I take any less care with client-side JavaScript? The question though is, how do I test JavaScript? The answer comes from jQuery itself.

When developing jQuery, the jQuery team had much the same challenge – to verify that jQuery continued to work as expected, as optimizations and fixes were applied. Its solution was to create a lightweight JavaScript test framework called QUnit. There is nothing jQuery-specific in QUnit, and you can use it to test any JavaScript code. A simple QUnit test might look like this:

test('Concatenated hello should compare equal to hello', function() { 
    var actual = 'h' + 'e' + 'l' + 'l' + 'o'; 
    var expected = 'hello'; equals(actual, expected); 
});

This test is embedded in a Web page test harness, and the results can be viewed in a browser, as shown in below.

Other videos from this article

· Testing JavaScript

· Refactoring ScrewTurn Wiki JavaScript

· jQuery IntelliSense

· jQuery SoC

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd896902.aspx