90 CHAPTER 3 Getting started with JavaScript
Hello World from JavaScript
There are several ways to write a Hello World program, and they differ primarily in how you
want to display the Hello World message. For example, you can programmatically make the
Hello World text visible or invisible on an HTML page, or you can display an alert message
with Hello World in it. These are good examples, but it would be better if the first example
started you on the correct way of writing JavaScript code. Try doing the Hello World from a
test-driven perspective.Writing test-driven code
Test-driven development (TDD) is a great way to write code and learn about code. One of the
benefits is that you can write your test without having to write a user interface. It’s also easy
to prototype code. TDD makes it easy to write a bit of code to see whether the code works
the way you expected. Best of all, it’s easy to get started.
There are many add-ins for writing test-driven code, but the choices are relatively few for
test-driven JavaScript code. Probably the most common tool is QUnit, which can be used with
ASP.NET web applications; for Windows 8 applications, a variant to QUnit is QUnit-Metro.Setting up QUnit with ASP.NET applications
To set up QUnit with an ASP.NET application, you must first start Visual Studio Express 2012
for Web and create a web application. In this example, the ASP.NET Empty Web Application is
created.
In the Solution Explorer window, right-click the project node and click Manage NuGet
Packages. This displays the Manage NuGet Packages window. NuGet is an open-source
package-management system for the .NET platform that simplifies the addition of third-
party libraries into your code. Click the Online node, and then, in the Search Online text box,
type QUnit and click the magnifying glass to perform the search. The results display similar
to Figure 3-4. Keep in mind that your result screen might be different due to the many new
packages that are being released, so be sure to look for the QUnit for ASP.NET MVC package.
Click QUnit For ASP.NET MVC; you should see an Install button. Click the Install button to
install QUnit For ASP.NET MVC into your project. After the package is installed, you should
see a check mark where the Install button was located. Click the Close button to close the
Manage NuGet Packages screen. Note that this QUnit for ASP.NET MVC package works with
both model, view, controller (MVC) applications and ASP.NET web applications, although the
cascading style sheet that is added is not in the standard style sheet location for ASP.NET
applications. (For the time being, we’ll leave the style sheet alone.)
After the QUnit for ASP.NET MVC package has been added, you see a packages.config file,
which contains a reference to your package. The Scripts folder contains a file called qunit. js,
which contains the QUnit source code. The Content folder contains a qunit.css file, which
contains the cascading style sheet for QUnit.