JavaScript Debugging in 2005

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/javascript_debugging_in_2005.htm]

I had written about JavaScript debugging in 2003 with the Running Documents Window. In 2005 they do things a little differently. Instead of the running documents window, there is the script explorer.

One immediate perk is that the script explorer has source code color-coded, whereas the running document window did not.

Check out Microsoft's Jerry Orman's blog to see how to debug in VS2005.

Pair and Triplet classes

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/pair_and_triplet_classes.htm]

There are some Framework classes out there that are useful, but infrequently used. In my experience, System.Web.UI.Pair and System.Web.UI.Triplet are two such examples. These provide basic utilities (like serialization) to store two or three related objects into single object. They have predictable members, for example Pair has a "First" and "Second" property that can be set either in the constructor or once instantiated.

They're simple classes, but are easy and helpful to use in web applications. Of course you could write your own container, but this saves you the step.

Sudoku board enhanced with DHTML

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/sudoku_board_enhanced_with_dhtml.htm]

I've blogged about Html, JavaScript, CSS, and combining them into DHTML. Normally I apply this to enterprise architecture, but you can apply this to online games too. One fun application of this is the Sudoku solver, editor, and generator at http://www.thetoolboxsite.com/Sudoku.aspx. Sudoku is a logic game of 9x9 cells, where each cell contains a single digit 1-9, and no row, column, or 3x3 square can have the same digit twice. Apparently it's becoming pretty popular, and hence people are making web versions of it. Here's a screen shot of a board in progress:

 The Sudoku mentioned above has a lot of JavaScript on it. Some initial interesting JavaScript features are:

• You can navigate the cells with the arrow keys, and it highlights the current cell. This kind of functionality can be implemented by using the onkeydown, onkeyup, and onfocus events to first select another cell (using .select() ), and then change the style (using .style=).
• If you type multiple values into a cell - something that's useful to record your notes - then the text shrinks accordingly to make room. This can also be done by the onkeyup event setting the styles.
• If you type an invalid value into a cell, like the letter "a" (only digits are allowed), it won't let you - there is JavaScript to block invalid user input. This can be done by returning false on the onkeydown event (i.e.: onkeydown="return IsValid()" ).
• If you click the "paste" button, it gets the text from the JavaScript clipboard, serializes it into a board object, and then updates the UI. Vice versa with the paste.

There's a lot more stuff going on there, but even with these there is a classic principle of programming: Making computer games teaches you things to make better enterprise applications! All of those input features could be useful to an enterprise app: using JavaScript validation to not even let you type invalid input, navigating and highlighting cells in a grid with the arrows (like in Excel), or juggling data to and from the clipboard. These are all good examples of using JavaScript to enhance your web UI.