<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:copyright="http://blogs.law.harvard.edu/tech/rss" xmlns:image="http://purl.org/rss/1.0/modules/image/">
    <channel>
        <title>AJAX</title>
        <link>http://theruntime.com/blogs/jaykimble/category/42.aspx</link>
        <description>AJAX</description>
        <language>en-US</language>
        <copyright>Jay Kimble</copyright>
        <managingEditor>jkimble@gmail.com</managingEditor>
        <generator>Subtext Version 1.9.5.0</generator>
        <item>
            <title>JavaScript for the masses</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/09/03/javascript-for-the-masses.aspx</link>
            <description>&lt;p&gt;As you may be aware &lt;a href="http://www.hanselman.com/blog/ScottHanselmans2009UltimateDeveloperAndPowerUsersToolListForWindows.aspx"&gt;Scott Hanselman’s 2009 Ultimate Developer and Power Users Tool List for Windows&lt;/a&gt; came out yesterday. If you are like me you end up pooling through the list especially the new stuff to see if there is something cool that somehow you missed.&lt;/p&gt;
&lt;p&gt;I found an item on the list that answers something I think I have been looking for (but not for me), but before I go on I need to give you some background (as usual).&lt;/p&gt;
&lt;p&gt;&lt;a href="http://new.efficientcoder.net/"&gt;Kevin D. Wolf&lt;/a&gt; (aka ByteMaster) and I have been talking over the last several months on all things Ajax. We’re both pretty deep on the topic of Ajax (Actually Kevin is deep on a number of topics), and we’re both pretty opinionated about a few things (I know you are shocked that I would say that about myself). &lt;/p&gt;
&lt;p&gt;One of the things I’ve sort of been looking for is something that makes it easy for someone to write Ajax. The new Blend Skecthflow stuff is a HUGE game changer, but if what I want to write is Ajax then after using Sketchflow I’m back to the drawing board.&lt;/p&gt;
&lt;h2&gt;Interractions in Ajax.. found!&lt;/h2&gt;
&lt;p&gt;So yesterday, I was browsing the Hanselman list and I found a side reference to a tool to watch called “&lt;a href="http://www.ixedit.com/"&gt;IxEdit&lt;/a&gt;.” All I can say is WOW! [Personal Note: Diane Leeper download this now! I think you could have some fin with this…] Their video tells it all, but I will tell you what I think is cool about it. &lt;/p&gt;
&lt;p&gt;You create a page and add references to jquery, jquery ui, and their ixEdit script as well as a few CSS. Once you do this the page launches with a movable dialog. This new dialog let’s you create Ajax/Web 2.0 (more the latter) interactions with your page all by simply playing in their GUI. Really, really cool! Now they don’t do everything, and in fact from what I saw of the tool you can’t set up to make calls back to the server (but I could see something like that being set up, and am starting to think about it). Once you are satisfied you can “save and reload” which reloads the page and applies your designed interaction (so now you can see how it worked).. something not look right simply edit the interaction to tweak it’s setting.&lt;/p&gt;
&lt;p&gt;When you are done it will help you deploy the script, so now you have designed JS code with out actually writing a line of code! Really, really cool, IMO!&lt;/p&gt;
&lt;p&gt;[I spent a couple of hours looking for pictures to fancy this up a little.. I run a UI/UX users group for crying out loud.. I need to get better at that, so sorry my post is bland.. I’ll try to follow up with something more graphically pleasing]&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2824.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/09/03/javascript-for-the-masses.aspx</guid>
            <pubDate>Thu, 03 Sep 2009 17:43:57 GMT</pubDate>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/09/03/javascript-for-the-masses.aspx#feedback</comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2824.aspx</wfw:commentRss>
        </item>
        <item>
            <title>jQuery-UI visual studio intellisense (vsdoc) file</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/07/20/jquery-ui-visual-studio-intellisense-vsdoc-file.aspx</link>
            <description>&lt;p&gt;If you’ve ever tried to use jQuery UI with Visual Studio, you’ve run into a JavaScript parse error and you lose JavaScript intellisense in Visual Studio. I wasn’t exactly sure of the issue until I read someone’s advice (who was just trying to get the datepicker working) to simply include a dummy jquery-datepicker-vsdoc.js file. So I did this for the jquery-ui.js file and lo and behold, no JavaScript parsing errors, and I had intellisense for everything EXCEPT jQuery UI.&lt;/p&gt;
&lt;p&gt;Anyway, I dug around and couldn’t find one… so I created the beginnings of one. What you get is very core level (and not an actual working file). Simply add it to your project along side your jquery-ui.js file and VS will automagically realize that when it gives you intellisense for JavaScript and you are using (or have referenced) the jquery-ui file.&lt;/p&gt;
&lt;p&gt;As I said it’s not complete. The areas that I know for sure is that it doesn’t give you any of the theming support.. actually the jquery.ui object is pretty much not there at all… I did get the effects and all the base controls intellisense working (datepicker, tabs, dialogs, etc.). It’s not perfect, but it will be a good start for someone else…&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;How to Use it&lt;/strong&gt;    &lt;br /&gt;
So to use this simply add it alongside your jquery-ui.js file in visual studio and visual studio should pick up my file and use it to give you intellisense. If you are using an external JS file you’ll need to use “/// &amp;lt;reference… /&amp;gt; to reference the JS file. &lt;/p&gt;
&lt;p&gt;If I get around to it I will publish an update in the future.&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;div class="wlWriterEditableSmartContent" id="scid:fb3a1972-4489-4e52-abe7-25a00bb07fdf:671d55e1-df05-4ebd-b698-7ee816b9f77c" style="margin: 0px; padding: 0px; display: inline; float: none;"&gt;
&lt;p&gt;File Attachment: &lt;a target="_blank" href="http://theruntime.com/blogs/images/theruntime_com/blogs/jaykimble/WindowsLiveWriter/jQueryUIvisualstudiointellisensevsdocfil_98FB/jquery-ui-vsdoc_1.js"&gt;jquery-ui-vsdoc.js&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2818.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/07/20/jquery-ui-visual-studio-intellisense-vsdoc-file.aspx</guid>
            <pubDate>Mon, 20 Jul 2009 13:19:18 GMT</pubDate>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/07/20/jquery-ui-visual-studio-intellisense-vsdoc-file.aspx#feedback</comments>
            <slash:comments>5</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2818.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Better JavaScript class generation</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/06/24/better-javascript-class-generation.aspx</link>
            <description>&lt;p&gt;For years, I have been espousing how great Script# is. I often do an advanced MS ASP.NET Ajax client talk and end it with a Script# talk. Mainly because I think that the idea of learning the nuances of JavaScript OO techniques can be a little confusing. It’s really the challenge (All you need to do is search the archives of my blog and you’ll see my own confusion on this topic).&lt;/p&gt;
&lt;p&gt;I think many web developers can wrap their heads around building the functionality, but making something private/public/static can get a little confusing. Especially if you are used to using something like C# or VB to do it.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://new.efficientcoder.net/"&gt;Kevin “ByteMaster” Wolf&lt;/a&gt; and I have been talking about this. As a result of those talks I started playing with an idea of allowing developers create something that feels more like OO… Anyway, I have come up with a very alpha version. &lt;/p&gt;
&lt;h3&gt;A Better OO For JavaScript??&lt;/h3&gt;
&lt;div style="BORDER-BOTTOM: silver 1px solid; TEXT-ALIGN: left; BORDER-LEFT: silver 1px solid; PADDING-BOTTOM: 4px; LINE-HEIGHT: 12pt; BACKGROUND-COLOR: #f4f4f4; MARGIN: 20px 0px 10px; PADDING-LEFT: 4px; WIDTH: 97.5%; PADDING-RIGHT: 4px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; MAX-HEIGHT: 200px; FONT-SIZE: 8pt; OVERFLOW: auto; BORDER-TOP: silver 1px solid; CURSOR: text; BORDER-RIGHT: silver 1px solid; PADDING-TOP: 4px" id="codeSnippetWrapper"&gt;
&lt;div style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px" id="codeSnippet"&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum1"&gt;   1:&lt;/span&gt; compileClasses({    &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum2"&gt;   2:&lt;/span&gt;     testClass: {        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum3"&gt;   3:&lt;/span&gt;         ctor: &lt;span style="COLOR: #0000ff"&gt;function&lt;/span&gt;() {            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum4"&gt;   4:&lt;/span&gt;             &lt;span style="COLOR: #008000"&gt;// this is a test        &lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum5"&gt;   5:&lt;/span&gt;         },        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum6"&gt;   6:&lt;/span&gt;         &lt;span style="COLOR: #0000ff"&gt;private&lt;/span&gt;: {            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum7"&gt;   7:&lt;/span&gt;             privateVar:1,            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum8"&gt;   8:&lt;/span&gt;             privateMethd:&lt;span style="COLOR: #0000ff"&gt;function&lt;/span&gt;() {                &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum9"&gt;   9:&lt;/span&gt;                 &lt;span style="COLOR: #008000"&gt;// test method            &lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum10"&gt;  10:&lt;/span&gt;             }        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum11"&gt;  11:&lt;/span&gt;         },        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum12"&gt;  12:&lt;/span&gt;         &lt;span style="COLOR: #0000ff"&gt;public&lt;/span&gt;:{            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum13"&gt;  13:&lt;/span&gt;             &lt;span style="COLOR: #008000"&gt;// public stuff here            &lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum14"&gt;  14:&lt;/span&gt;             publicVar:&lt;span style="COLOR: #006080"&gt;"2"&lt;/span&gt;        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum15"&gt;  15:&lt;/span&gt;         },        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum16"&gt;  16:&lt;/span&gt;         &lt;span style="COLOR: #0000ff"&gt;static&lt;/span&gt;:{            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum17"&gt;  17:&lt;/span&gt;             &lt;span style="COLOR: #008000"&gt;//public statics            &lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum18"&gt;  18:&lt;/span&gt;             staticVar:&lt;span style="COLOR: #006080"&gt;"test"&lt;/span&gt;        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum19"&gt;  19:&lt;/span&gt;         }    &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum20"&gt;  20:&lt;/span&gt;     },    &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum21"&gt;  21:&lt;/span&gt;     testClass2: {        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum22"&gt;  22:&lt;/span&gt;         ctor: testFunc,        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum23"&gt;  23:&lt;/span&gt;         &lt;span style="COLOR: #0000ff"&gt;private&lt;/span&gt;: {            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum24"&gt;  24:&lt;/span&gt;             privateVar2:&lt;span style="COLOR: #006080"&gt;"2"&lt;/span&gt;        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum25"&gt;  25:&lt;/span&gt;         },        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum26"&gt;  26:&lt;/span&gt;         &lt;span style="COLOR: #0000ff"&gt;public&lt;/span&gt;:{            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum27"&gt;  27:&lt;/span&gt;             publicMethod:&lt;span style="COLOR: #0000ff"&gt;function&lt;/span&gt;() {                &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum28"&gt;  28:&lt;/span&gt;                 &lt;span style="COLOR: #0000ff"&gt;return&lt;/span&gt; &lt;span style="COLOR: #0000ff"&gt;true&lt;/span&gt;;            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum29"&gt;  29:&lt;/span&gt;             },            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum30"&gt;  30:&lt;/span&gt;             myVar:&lt;span style="COLOR: #006080"&gt;"this is a test"&lt;/span&gt;,            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum31"&gt;  31:&lt;/span&gt;             dispose:&lt;span style="COLOR: #0000ff"&gt;function&lt;/span&gt;() {            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum32"&gt;  32:&lt;/span&gt;             }        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum33"&gt;  33:&lt;/span&gt;         },        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum34"&gt;  34:&lt;/span&gt;         implements:[&lt;span style="COLOR: #006080"&gt;"Sys.IDisposable"&lt;/span&gt;]    &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum35"&gt;  35:&lt;/span&gt;     }&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum36"&gt;  36:&lt;/span&gt; });&lt;/pre&gt;
&lt;!--CRLF--&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Two classes are defined here.. the first one is the testClass. you will see that I’m creating a JSON object that has members called “&lt;em&gt;ctor&lt;/em&gt;” (constructor), “&lt;em&gt;private&lt;/em&gt;” (private members are contained within this object), “&lt;em&gt;public&lt;/em&gt;” (public members are contained within this object),”&lt;em&gt;static&lt;/em&gt;” (static public members are contained within this object), and “&lt;em&gt;implements&lt;/em&gt;” (“array of interfaces that are implemented). I also will handle single inheritance using a member called “&lt;em&gt;inherits&lt;/em&gt;.” &lt;/p&gt;
&lt;p&gt;I think this makes class definition a little more straightforward for those of us who aren’t closure gurus, and it just might replace the pull of Script# on my life.&lt;/p&gt;
&lt;p&gt;Right now this all works with a simple function that uses the MS Ajax Client framework. I’m considering doing this for other frameworks (so if you love some other framework, never fear I’m considering your framework as well).&lt;/p&gt;
&lt;p&gt;I created a codeplex project which contains a single release that contains a simple ASP.NET project (could have been a simple html page too).. Don’t fret I expect the code to be a ton cleaner in the next version (I’m reading the MEAP version of John Resig’s &lt;a href="http://www.manning.com/resig/"&gt;Secrets of the JavaScript Ninja&lt;/a&gt; (and am learning a ton!)&lt;/p&gt;
&lt;p&gt;Here’s the link: &lt;a href="http://JsClassDef.codeplex.com"&gt;JsClassDef Project&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Let me know what you think.. does it stink? is it cool? I know it ain’t Resig-like, but both Kevin and I think the simplified structure is nice and not un-JavaScript-like&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2808.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/06/24/better-javascript-class-generation.aspx</guid>
            <pubDate>Wed, 24 Jun 2009 21:15:32 GMT</pubDate>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/06/24/better-javascript-class-generation.aspx#feedback</comments>
            <slash:comments>2</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2808.aspx</wfw:commentRss>
        </item>
        <item>
            <title>The two ways one writes JavaScript code..</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/04/21/the-two-ways-one-writes-javascript-code.aspx</link>
            <description>&lt;p&gt;I think sometimes in the past I have been guilty in my presentation on JavaScript (JS) of not defining for myself who my audience is. Actually I know that I’ve done a poor job of this. You see there are 2 ways to write JavaScript code. Something that I knew, but recently realized the importance of.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;OO Baby&lt;/strong&gt;    &lt;br /&gt;
If you are building your own controls then you are all about building things in an OO manner because it helps you in the areas on manageability. You may or may not be testing your components with automated/unit test tools and quality is everything.. as well as browser compatibility. When doing this one of the major struggles in your world will probably be in the area of memory leaks (I’ve joined the coalition to kill IE6). &lt;/p&gt;
&lt;p&gt;To be honest this is probably not you, but if you’ve come to one of my deep JS talks… this is my target (and my cardinal sin… sorry)&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;The way you probably use JS&lt;/strong&gt;    &lt;br /&gt;
Ok, the most common use of JS and the way that I think most people use it is to do minimal coding to wire up some validation or to wire up some interaction or even to include some Web 2.0 control (aka “Ajax Control”). Your mantra is “I want to get in and out quickly so that I don’t have to touch JS more than I need to…" We usually don’t take the time to test this stuff because it feels more declarative and that seems trustworthy (although you could test it)&lt;/p&gt;
&lt;p&gt;This is exactly why jQuery is so popular. Not only does encourage this type of thinking (and even embraces it), but the re-usable plugins take on this same sort of thinking (the show/hide methods come to mind). That and the sheer fluency of the library makes it easy to use. The selectors are really a variation of the same selectors that CSS uses so you are re-using knowledge that should already be in your head as a web-developer/designer.. &lt;/p&gt;
&lt;p&gt;Anyway, while JS OO is cool.. most of us work the other way (and even those of us who use JS OO do most of our JS coding using the latter method)&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2784.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/04/21/the-two-ways-one-writes-javascript-code.aspx</guid>
            <pubDate>Tue, 21 Apr 2009 15:44:54 GMT</pubDate>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/04/21/the-two-ways-one-writes-javascript-code.aspx#feedback</comments>
            <slash:comments>3</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2784.aspx</wfw:commentRss>
        </item>
        <item>
            <title>CodeRush/Refactor Pro refactors Javascript too</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/02/18/coderushrefactor-pro-refactors-javascript-too.aspx</link>
            <description>&lt;p&gt;I just saw an article talking about a new Ruby product from JetBrains. One of the side effects of this product is that they offer refactoring support for JS code. &amp;lt;yawn /&amp;gt; &lt;/p&gt;  &lt;p&gt;I had to chuckle a bit. I guess my love affair with the Developer Express’ Code Rush/Refactor Pro (CR/RP) addin continues to pay off… I’ve had refactorings for JavaScript &lt;strong&gt;AND &lt;/strong&gt;&lt;em&gt;HTML/ASP.NET &lt;/em&gt;markup for about a year (and they added it a long time ago). If you didn’t know that… now you do (they keep finding new places to add refactorings… it seems like nearly every file in your project is fair game with their addin.)&lt;/p&gt;  &lt;p&gt;The more I work with CR/RP the more I love it. I keep finding new things I can do with it. Their most recent version actually contains a feature that I missed from ReSharper (code analysis… they will make code improvement suggestions and can auto-implement it). &lt;/p&gt;  &lt;p&gt;There’s also a new community addin that builds some test runner facilities within the IDE (although not as mature as ReSharpers).&lt;/p&gt;  &lt;p&gt;One thing to remember though… with CR/RP you need to somewhat relearn to use your IDE and you need to tame their addin a little for your own purposes… going through their training videos is a must (unlike ReSharper). At the end of it you will be MORE productive with CR/RP (although it’s debatable whether you would be more productive with it over ReSharper… it’s a preference thing.. I personally think I am more productive though).&lt;/p&gt;  &lt;p&gt;[NOTE: I don’t work for DevExpress and they don’t pay me to do this… in fact I’m currently out of date on my product upgrades which ended in Dec. The release I’m using is from November… and it absolutely rocks]&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2749.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/02/18/coderushrefactor-pro-refactors-javascript-too.aspx</guid>
            <pubDate>Wed, 18 Feb 2009 15:05:29 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2749.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/02/18/coderushrefactor-pro-refactors-javascript-too.aspx#feedback</comments>
            <slash:comments>2</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2749.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Client-side Scripting 101 Part 2: JavaScript OOP Basics</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/02/03/client-side-scripting-101-part-2-javascript-oop-basics.aspx</link>
            <description>&lt;p&gt;[Sorry this took so long to get out… I have been distracted by Windows 7 and am working between 2 OS’ on 1 machine… Win7 is now my primary OS and I didn’t have this post here… that and I’m now twittering doesn’t help either]&lt;/p&gt;  &lt;p&gt;Ok, since in the first version of my last &lt;a href="http://theruntime.com/blogs/jaykimble/archive/2009/01/02/client-side-scripting-101-part-1-the-reasons.aspx"&gt;article&lt;/a&gt; I referenced the "prototype" property, it felt natural to begin by talking about JavaScript OOP basics. Now, I’m not going to try to define all the terms that usually get associated with the type of OOP used in JavaScript ("JS" hereafter). I want to give you --my valued reader-- with the practical knowledge. So let’s go over how JS as a language works:&lt;/p&gt;  &lt;p&gt;&lt;strong&gt;JavaScript objects and types are extensible simply through use&lt;/strong&gt;     &lt;br /&gt;What this means that to add a field to a JS object you need only reference the field. As a result there are 3 states of any value that you interrogate in JS: has a value (like 2, "v2", etc), is null, is undefined. "Null" means that the type member (property, field, method) is defined, but as of yet there is no value here. "Undefined" means that a type member does not exist as of yet. So let’s illustrate this with some code:&lt;/p&gt;  &lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;   &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;     &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   1:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; myObj = &lt;span style="color: #0000ff"&gt;{}&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   2:&lt;/span&gt; myObj.myNewProperty = &lt;span style="color: #0000ff"&gt;null&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   3:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; test1 = &lt;span style="color: #0000ff"&gt;typeof&lt;/span&gt;(myObj.myNewProperty) == &lt;span style="color: #006080"&gt;"undefined"&lt;/span&gt;; &lt;span style="color: #008000"&gt;// returns false&lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   4:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; test2 = &lt;span style="color: #0000ff"&gt;typeof&lt;/span&gt;(myObj.myOtherNewProperty) == &lt;span style="color: #006080"&gt;"undefined"&lt;/span&gt;; &lt;span style="color: #008000"&gt;// returns true&lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   5:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; test3 = (myObj.myNewProperty == &lt;span style="color: #0000ff"&gt;null&lt;/span&gt;); &lt;span style="color: #008000"&gt;// returns true&lt;/span&gt;&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;So what did we do there? Well, we created a new object; the "{}" is short hand for "new object()." BTW, that’s really JSON syntax (there’s more to that and we’ll cover it much later in another column). After creating an empty object we create a "myNewProperty" field and set it’s value to null (this field is created and is "defined"). Next we do a couple tests on the variable. The first test checks to see if the "myNewProperty" field on the created object is undefined (it is defined so test1 is false). The next test checks to see if the "myOtherNewProperty" field on the created object is undefined (since this is the first time we referenced it, the field is in fact undefined, so test2 is true). Finally we test to see if the "myNewProperty" field on the created object is null (which it is).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JavaScript object’s members can be referenced like a dictionary&lt;/strong&gt; 

  &lt;br /&gt;In the example above we could have referenced the "myNewProperty" field like this:&lt;/p&gt;

&lt;div&gt;
  &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;myObj[&lt;span style="color: #006080"&gt;"myNewProperty"&lt;/span&gt;] = &lt;span style="color: #0000ff"&gt;null&lt;/span&gt;;&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;What this means that with JS we can sometimes reference object members as if they were an array or more like a HashTable in .NET. The real importance of this is that JS objects are really strange characters in that they can be manipulated like both an object and an array/dictionary/hashtable. We’ll be briefly revisiting this syntax at the end of the Prototype section (but don’t blink… it’s really fast). &lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Function is used to create a class  &lt;br /&gt;&lt;/strong&gt;So thus far, we have extended objects and not classes. In JS we can use the Function type to define a class (I know that seems weird, but bear with me). Functions can contain other functions which have access to all the variables within them and any variable that it’s parent function can access. The constructor is actually the parent function. Let’s look at an example:&lt;/p&gt;

&lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;
  &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   1:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;function&lt;/span&gt; myClass()&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   2:&lt;/span&gt; {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   3:&lt;/span&gt;   &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; privateVar = &lt;span style="color: #006080"&gt;"Private variable"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   4:&lt;/span&gt;   &lt;span style="color: #0000ff"&gt;this&lt;/span&gt;.publicVar = &lt;span style="color: #006080"&gt;"public variable"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   5:&lt;/span&gt;   &lt;span style="color: #0000ff"&gt;this&lt;/span&gt;.publicFn = &lt;span style="color: #0000ff"&gt;function&lt;/span&gt;() {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   6:&lt;/span&gt;     &lt;span style="color: #008000"&gt;// this fn can manipulate any of the above vars including the private ones&lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   7:&lt;/span&gt;     privateVar = &lt;span style="color: #006080"&gt;"Private accessed by publicFn"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   8:&lt;/span&gt;     &lt;span style="color: #0000ff"&gt;return&lt;/span&gt; &lt;span style="color: #006080"&gt;"Public Function"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   9:&lt;/span&gt;   }&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  10:&lt;/span&gt; }&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;myClass is a class that has a single private variable called “privateVar”. It has 1 public variable/field called “publicVar” and a public function called “publicFn.” We can create a variable of this type by doing the following:&lt;/p&gt;

&lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;
  &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   1:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; myNewObject = &lt;span style="color: #0000ff"&gt;new&lt;/span&gt; myClass();&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;The above example isn’t the way this is normally done though. Here’s why. That initial function/constructor looks really weird with the function declaration inside of it (imagine a public field declared after the a function declaration. It would get really messy quickly).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prototype&lt;/strong&gt; 

  &lt;br /&gt;So instead there is a special properties called “prototype” which can be used to add additional members to a function. Here’s an example of what that looks like:&lt;/p&gt;

&lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;
  &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   1:&lt;/span&gt; myClass = &lt;span style="color: #0000ff"&gt;function&lt;/span&gt;()&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   2:&lt;/span&gt; {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   3:&lt;/span&gt;     &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; privateVar = &lt;span style="color: #006080"&gt;"Private Var"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   4:&lt;/span&gt;     &lt;span style="color: #0000ff"&gt;this&lt;/span&gt;.publicVar = &lt;span style="color: #006080"&gt;"Public Var"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   5:&lt;/span&gt; }&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   6:&lt;/span&gt; myClass.prototype.publicFN = &lt;span style="color: #0000ff"&gt;function&lt;/span&gt;()&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   7:&lt;/span&gt; {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   8:&lt;/span&gt;     privateVar = &lt;span style="color: #006080"&gt;"Private var accessed by function"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   9:&lt;/span&gt;     &lt;span style="color: #0000ff"&gt;return&lt;/span&gt; &lt;span style="color: #006080"&gt;"Public Function"&lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  10:&lt;/span&gt; }&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;&lt;/p&gt;

&lt;p&gt;We made a couple changes here. First we switched the order around for the function declaration. This is all perfectly legal. The function syntax creates an anonymous function and assigns it to the myClass (for instance). As you can see from the prototype syntax on line 6 that you simply extend the prototype object like we did earlier in the first code example.&lt;/p&gt;

&lt;p&gt;We’re almost done. Let’s make a slight change to the more preferred syntax(and see our first very small example of JSON):&lt;/p&gt;

&lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;
  &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   1:&lt;/span&gt; myClass = function()&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   2:&lt;/span&gt; {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   3:&lt;/span&gt;     var privateVar = &lt;span style="color: #006080"&gt;"Private Var"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   4:&lt;/span&gt;     &lt;span style="color: #0000ff"&gt;this&lt;/span&gt;.publicVar = &lt;span style="color: #006080"&gt;"Public Var"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   5:&lt;/span&gt; }&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   6:&lt;/span&gt; myClass.prototype = {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   7:&lt;/span&gt;     publicFn : function() {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   8:&lt;/span&gt;         privateVar = &lt;span style="color: #006080"&gt;"Private Var changed by function"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   9:&lt;/span&gt;         &lt;span style="color: #0000ff"&gt;return&lt;/span&gt; &lt;span style="color: #006080"&gt;"Public Function"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  10:&lt;/span&gt;     },&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  11:&lt;/span&gt;     get_PrivateVar : function() {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  12:&lt;/span&gt;         &lt;span style="color: #0000ff"&gt;return&lt;/span&gt; privateVar;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  13:&lt;/span&gt;     }&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  14:&lt;/span&gt; }&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;Not much has changed from the last version except one thing, and we’re setting the prototype function to an object (remember that the squiggly brackets are JSON syntax for object). The methods are mapped out using a “name:value” syntax. and is comma separated (you get a weird error if that comma is missing). We also went ahead and added one more new member which now exposes our private variable via a “property” get function.&lt;/p&gt;

&lt;p&gt;There’s actually another variation on the syntax, but this is good enough for now. With this in hand you should be able too read just about any JavaScript object library and figure out where you can call things.&lt;/p&gt;

&lt;p&gt;You might also notice that inheritance doesn’t look like it’s baked in… which is absolutely correct! Inheritance is not baked in. You have to use a separate framework to get it (it shouldn’t be that hard to see how one would get inheritance. One way would be to simply query the Parent type’s prototype and add those methods/properties to the child class; we can do all this by using that dictionary/HashTable syntax we mentioned above and a foreach loop. There are other ways as well but that is way beyond the scope of this tutorial --and really isn’t something you should care all that much about right now).&lt;/p&gt;

&lt;p&gt;After all, being able to read this syntax was our overall goal (we want to use Script# to actually do our programming).&lt;/p&gt;

&lt;p&gt;Next time we’ll cover Script# basics. (I’ll try not to take 3 weeks to get you the next installment)&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2740.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/02/03/client-side-scripting-101-part-2-javascript-oop-basics.aspx</guid>
            <pubDate>Tue, 03 Feb 2009 21:50:02 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2740.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/02/03/client-side-scripting-101-part-2-javascript-oop-basics.aspx#feedback</comments>
            <slash:comments>1</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2740.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Client-side Scripting 101 Part 1: The Reasons</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/01/02/client-side-scripting-101-part-1-the-reasons.aspx</link>
            <description>&lt;p&gt;[Welcome to my multi-part tutorial on. I know I did an introduction earlier in the month, but before we dig in deep into this I thought it would be good to get a few questions out of the way.]&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;font size="4"&gt;Why is this (Client-side Scripting) all that important to me?&lt;/font&gt;&lt;/strong&gt; &lt;br /&gt;
You may be thinking "&lt;em&gt;Hey Jay, my company bought Telerik/Component Arts/Component One/{fill in some other ASP.NET tools suite} and it seems to do everything I need and more. I can see some places where a little client-side code is helpful, but it’s not that important, is it?&lt;/em&gt;"&lt;/p&gt;
&lt;p&gt;Well, I’m definitely not one to criticize the third party tools vendors, but their tools are just that tools. If your site grows large enough you will run into a place where you need to tweak their tools, and my experience is that all the ones I’ve mentioned have really nice client-side APIs that underlie their server-side components. Stuff that will really let you push the envelope of their tools. But, you probably already know that. The hard part is for all the great things these tools can do, sometimes you need something else (usually a little more light weight). In order to do this you need a background in client-side technologies so that you are able to assess your solutions.  &lt;/p&gt;
&lt;p&gt;For instance, in my day job I created an MS Ajax behavior that takes a regular HTML table and adds a selection behavior. We did this to replace the big name grid we are using because, while this grid does amazing things, it also comes with a price of a heavy footprint and a larger than desired viewstate (we’re trying to slim our pages for performance sake). I also have created 2 additional behaviors: one injects client-side paging to a regular HTML table, and the other provides sorting functionality via the column header row. All of these behaviors inherit from a common class that wraps the table. My lightweight behaviors are simple components that can handle up to about 1000 rows which make them really useful for smaller sets of data. I tried them on as many as 5000 rows which gave OK but sluggish performance, and with 10,000 rows was simply unusable (I was using all three components, so it might be possible to use say just the paging and get decent performance). &lt;/p&gt;
&lt;p&gt;It comes in handy to be able to build these types of lightweight components (which incidentally only took me about 40 hours to build all 3 which included server-side extenders).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Our first term: &lt;em&gt;Client-side (or Ajax) Behavior &lt;br /&gt;
&lt;/em&gt;&lt;/strong&gt;Since I have thrown the term "&lt;em&gt;behavior&lt;/em&gt;" out a couple of times, let’s go ahead and define what it is exactly. In the realm of MS Ajax (and other frameworks), a client-side behavior is a client-side component/class that injects functionality into an HTML element. In MS Ajax, it is a separate component that is associated with an HTML element. When activated, it usually sets up UI events (onclick, onfocus, etc.) to intercept some UI interaction and apply new interactions. It can also inject additional css classes/styles or html elements on the page to apply a particular look (which is what the Ajax Control Toolbox’s Drop Shadow and the Rounded Corners behaviors do). It all depends on what the component needs to do. If you have played with any MS Ajax toolbox on the server side, you have probably throw Ajax Extender controls on a form; extenders are a server-side wrapper for the client behaviors. I hope that’s clear. If not fire off some comments to me at the bottom of this post and I’ll try to better explain in the comments (and will update this accordingly).&lt;/p&gt;
&lt;p&gt;One of my goals for this blog series is to take you from knowing a little bit about client-scripting (and maybe nothing) to being able to build your own behaviors and extenders.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;font size="4"&gt;JavaScript is like a foreign language to me... Why couldn’t this be easier?&lt;/font&gt;&lt;/strong&gt; &lt;br /&gt;
This may shock you, but I struggle with it too -- and I’m a(n admittedly) self-proclaimed guru with it. Two weeks ago (I was off last week) I wrote a very simple JavaScript component/class and I forgot something. I set up a timer event and it wasn’t making the call correctly into my class. Eventually I realized that what was happening was that I was calling a method within my JavaScript class and the instance of that class was being lost. I needed to use the MS Ajax "Function.createDelegate" function to get a wrapper function that wouldn’t lose the instance of my class. This is a total pain in the you-know-where. I actually told my boss that this is the exact reason I use &lt;a href="http://projects.nikhilk.net/ScriptSharp"&gt;Script#&lt;/a&gt; since it takes care of this stuff for me. &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;What the Heck is Script#?&lt;/strong&gt; &lt;br /&gt;
&lt;a href="http://projects.nikhilk.net/ScriptSharp"&gt;Script#&lt;/a&gt; is a life saver! It is the invention of Nikhil Kothari (MS Ajax Architect and SilverLight2 Architect, and he is one of my heroes... I hope I get to meet him at Mix09). What it does is let you write C# code in Visual Studio against a framework (either Nikhil’s or MS Ajax... there are also jQuery extensions and a few others for it as well). This framework has a set of CoreLib replacements (System, etc.) that consist of set of .NET dlls and a set of JS client libraries. When you compile this code, you get a DLL which can be used in other Script# projects (yes, there are VS templates for creating a new Script# project), and  a set of JS files (debug and shrunk runtime versions). Script# makes it easy to create multiple inherited classes (an object tree if you will) as well as it handles things like passing functions around. &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;So that means I don’t have to know anything about JS right? Cool!&lt;/strong&gt; &lt;br /&gt;
Hang on there! You will need to know a little bit about this stuff as it will help you read the code generated by JS. You can always patch bugs with Script#, but testing will (at this time) always exist in the JS side (in a browser), so you need to know enough to get around the source code that gets generated. The line numbers will always point to a line in the generated JavaScript (for instance), so your going to need to be able to read the JavaScript file and determine where the problems exist (you can still fix the code in your C# code, and can write debug messages that show up in the JavaScript console (or in VS if you are debugging the script running in IE).&lt;/p&gt;
&lt;p&gt;So next up will be a column on JS OOP Basics.&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2729.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/01/02/client-side-scripting-101-part-1-the-reasons.aspx</guid>
            <pubDate>Sat, 03 Jan 2009 03:13:43 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2729.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/01/02/client-side-scripting-101-part-1-the-reasons.aspx#feedback</comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2729.aspx</wfw:commentRss>
        </item>
        <item>
            <title>C# Style Attributes in Script#/Javascript</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2008/12/20/c-style-attributes-in-scriptjavascript.aspx</link>
            <description>&lt;p&gt;[If you aren’t knee deep into Script# or JavaScript this post might not make any sense. If you are into BDD (or TDD) you might want to read further to see some ideas I’m playing with. If you write TDD tools for running tests... please read further... ]&lt;/p&gt;
&lt;p&gt;[NOTE (For Joe Only): Joe, yes, this is a "shiny stuff" post; some day it might have a practical use at which point I’ll write a non-alpha geek version of this post which will be a tutorial of how to use this to make your life easier.]&lt;/p&gt;
&lt;p&gt;One of the things I’ve been looking for again is a way to create C#-Style (or even Java-Style) attributes on a function in JavaScript. Mind you, I’m the author of such a library, but making it work in Script# is a bit of a pain. To do it would require me writing in Script# something like this (and I’ll give away what I want to do as well):&lt;/p&gt;
&lt;div style="BORDER-BOTTOM: gray 1px solid; BORDER-LEFT: gray 1px solid; PADDING-BOTTOM: 4px; LINE-HEIGHT: 12pt; BACKGROUND-COLOR: #f4f4f4; MARGIN: 20px 0px 10px; PADDING-LEFT: 4px; WIDTH: 97.5%; PADDING-RIGHT: 4px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; MAX-HEIGHT: 200px; FONT-SIZE: 8pt; OVERFLOW: auto; BORDER-TOP: gray 1px solid; CURSOR: text; BORDER-RIGHT: gray 1px solid; PADDING-TOP: 4px"&gt;
&lt;div style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;   1:&lt;/span&gt; &lt;span style="COLOR: #008000"&gt;// NOTE: what follows is something I could do not something that is fully working&lt;/span&gt;&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;   2:&lt;/span&gt; &lt;span style="COLOR: #008000"&gt;// the JS Style Attributes work and that is all&lt;/span&gt;&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;   3:&lt;/span&gt;  &lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;   4:&lt;/span&gt; [Concern()]&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;   5:&lt;/span&gt; &lt;span style="COLOR: #0000ff"&gt;public&lt;/span&gt; myClass&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;   6:&lt;/span&gt; {&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;   7:&lt;/span&gt;     &lt;span style="COLOR: #0000ff"&gt;public&lt;/span&gt; myClass()&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;   8:&lt;/span&gt;     {&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;   9:&lt;/span&gt;         Script.Literal(&lt;span style="COLOR: #006080"&gt;"/*--@Concern()--*/"&lt;/span&gt;);&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;  10:&lt;/span&gt;     }&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;  11:&lt;/span&gt;  &lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;  12:&lt;/span&gt;     [Observation(&lt;span style="COLOR: #006080"&gt;"When adding a person, full name should not be blank"&lt;/span&gt;)]&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;  13:&lt;/span&gt;     &lt;span style="COLOR: #0000ff"&gt;public&lt;/span&gt; &lt;span style="COLOR: #0000ff"&gt;void&lt;/span&gt; When_adding_a_person_full_name_should_not_be_blank()&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;  14:&lt;/span&gt;     {&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;  15:&lt;/span&gt;         Script.Literal(&lt;span style="COLOR: #006080"&gt;"/*--@Concern("&lt;/span&gt;When adding a person, full name should not be blank&lt;span style="COLOR: #006080"&gt;")--*/"&lt;/span&gt;);&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;  16:&lt;/span&gt;         &lt;span style="COLOR: #008000"&gt;// Test Code appears here&lt;/span&gt;&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;  17:&lt;/span&gt;     }&lt;/pre&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: consolas, &amp;quot;Courier New&amp;quot;, courier, monospace; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060"&gt;  18:&lt;/span&gt; }&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;br /&gt;
See that Script.Literal in the constructor? That’s required for my JS Attributes Library and for Script#. You see we have to force a comment into Script#, and do it in a manner that the comment ends up in the runtime version (non-debug version) of the code.&lt;/p&gt;
&lt;p&gt;So why would I want to use regular attributes as well ("they don’t make their way into the JS code, right?"). Well, since my BDD experimentation is starting to be seen. I’ve started experimenting using Test Driven.Net with Script# assemblies (I took a &lt;a href="http://weblogs.asp.net/bleroy/archive/2008/12/09/really-simple-testing-for-javascript.aspx"&gt;Bertrand Le Roy’s Simple Test framework&lt;/a&gt; for JavaScript and converted it to Script# (I also made a couple enhancements, so I could target alternate consoles... instead of just html). After hooking everything up, I ran the DLL through reflector and sure enough, it decompiled into my exact source code. Next I tried running it with Test Driven.Net personal with no luck... not sure what I need to do to get it running actually, but I bet if I had a Test Attribute that would start sending me in the right direction.&lt;/p&gt;
&lt;p&gt;Regardless, I’m not all that interested in regular xUnit style frameworks; I really want BDD. One of the things I started doing was investigating all the BDD style frameworks for .NET. Almost all of them inherit from NUnit, so if I wanted to say port Scott Bellware’s &lt;a href="http://code.google.com/p/specunit-net/"&gt;SpecUnit&lt;/a&gt; to JavaScript/Script#, then I would need to have an NUnit implementation and a recent one. Recent NUnit implementations all use Attributes which is how we get here. [For the acronym police: BDD stands for Behavior Driven Development... I won’t attempt to define it as I would probably get it wrong, but it’s a variation on Test Driven Development -- TDD... BDD emphasizes testing specs, user stories, use cases, etc.]&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;BDD with JavaScript &lt;br /&gt;
&lt;/strong&gt;One of the things I’ve been thinking about is how something like Script# DLLs lend themselves for testing. Seriously. If you take an UI behavior approach to components, then you need to isolate the functionality by creating a fake element (or more than one), attach the behavior and then start firing events on the model to make sure that the desired results happen. For instance if I have a draggable element then I want to make sure that the element shows the hand cursor when the mouse passes over the element as well as when the mouse button is down and the mouse is moved does the element’s position changes, etc. I keep thinking that this should be infinitely easier in the DLL as an abstraction then in the actual browser. Of course one needs to test various browsers, but if your math is off for instance, it won’t matter which browser you use. &lt;/p&gt;
&lt;p&gt;Why BDD and not TDD? Well, I usually have a list of rules that the UI Behavior should adhere to before I ever write a line of code. This is a perfect fit for a BDD style of test first (and yes, I want to do BDD testing first... I know that’s shocking, but I do want to try it... for how I TRY to build JS components quality is usually a huge factor that BDD would greatly help).&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2728.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2008/12/20/c-style-attributes-in-scriptjavascript.aspx</guid>
            <pubDate>Sun, 21 Dec 2008 04:19:03 GMT</pubDate>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2008/12/20/c-style-attributes-in-scriptjavascript.aspx#feedback</comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2728.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Script# - Literal feature... How did I miss this one?</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2008/12/10/script---literal-feature.-how-did-i-miss-this-one.aspx</link>
            <description>&lt;p&gt;Today, I’m doing some work with Script# and I ran into the one thing about Script# that I don’t like: there are a few areas where Script# just isn’t able to perform some task. This happens a lot when you are developing Atlas (MS Ajax) components instead of using Nikhil’s ScriptFX client library. &lt;/p&gt;  &lt;p&gt;Today I ran into one of those areas. Specifically I needed to dynamically add/remove options from a select element. In JS this is a breeze for me, but Script#'s SelectElement’s options array is defined as a dictionary which doesn’t allow for adding elements. In the process of doing it I ran across an article on how to do it in a more DOM-compliant manner (read that as "the standard way you’re supposed to do it"). The article is over &lt;a href="http://www.mredkj.com/tutorials/tutorial005.html"&gt;here&lt;/a&gt;. &lt;/p&gt;  &lt;p&gt;Anyway, I originally used Script.Eval, but I knew that was going to put some ugly code in my resulting Javascript files (I really do hate that).&lt;/p&gt;  &lt;p&gt;While I was doing that I noticed the reference to "Script.Literal" in my intellisense, so I grabbed the docs and took a look. To my amazement this new element did away with this limitation once and for all.&lt;/p&gt;  &lt;p&gt;Here’s what it does. It lets you emit your own script code into the resulting script. So I could use the above article and reference properties that don’t exist in the Script# implementation. That really rocks!&lt;/p&gt;  &lt;p&gt;So you could do something like this:&lt;/p&gt;  &lt;div&gt;   &lt;div style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"&gt;     &lt;pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"&gt;&lt;span style="color: #008000"&gt;// Hide all elements of a certain type in my doc and hide them &lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"&gt;&lt;span style="color: #008000"&gt;// (this is a contrived example, I know)&lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"&gt;&lt;span style="color: #0000ff"&gt;public&lt;/span&gt; &lt;span style="color: #0000ff"&gt;void&lt;/span&gt; HideAllElementsOfType(&lt;span style="color: #0000ff"&gt;string&lt;/span&gt; tagName)&lt;/pre&gt;

    &lt;pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"&gt;{&lt;/pre&gt;

    &lt;pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"&gt;   Script.Literal(&lt;span style="color: #006080"&gt;"$(tagName).css('display', 'none')"&lt;/span&gt;); &lt;span style="color: #008000"&gt;// this is a JQuery call&lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"&gt;}&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;In the resulting JS there will be something like this (I’m manually doing this so it won’t be exact here):&lt;/p&gt;

&lt;div&gt;
  &lt;div style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"&gt;
    &lt;pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"&gt;&lt;span style="color: #0000ff"&gt;function&lt;/span&gt; hideAllElementsOfType(tagName)&lt;/pre&gt;

    &lt;pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"&gt;{&lt;/pre&gt;

    &lt;pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"&gt;    $(tagName).css(&lt;span style="color: #006080"&gt;'display'&lt;/span&gt;, &lt;span style="color: #006080"&gt;'none'&lt;/span&gt;);&lt;/pre&gt;

    &lt;pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"&gt;}&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;You see? it took the string in the literal and injected it into the source. Using a "$" is not possible with Script#/C#, but we were able to inject it into our code with no problems.  Literal also supports String.Format syntax as well. This is so cool! It means that it is trivial to get around Script# limitations and still get good performance (no need to litter your code with Eval)&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2727.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2008/12/10/script---literal-feature.-how-did-i-miss-this-one.aspx</guid>
            <pubDate>Wed, 10 Dec 2008 20:41:29 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2727.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2008/12/10/script---literal-feature.-how-did-i-miss-this-one.aspx#feedback</comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2727.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Tampa Code Camp 2008 Wrap up</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2008/12/07/tampa-code-camp-2008-wrap-up.aspx</link>
            <description>&lt;p&gt;Yesterday I had an excellent day at the Tampa Code Camp. My wife gave me a vacation day from the family (thank you!) which makes for a good day that I can just hang out catch a couple sessions, speak, and connect with a few other geeks.&lt;/p&gt;  &lt;p&gt;I have attached my slides and sample projects to this post (the sample solution requires that you have Script# installed). I also attached my MS Ajax Cheat sheets as well.&lt;/p&gt;  &lt;p&gt;Normally that would be all that I would put up here, but there were some additional things that happened as a result of me meeting a few people. BTW, I absolutely love Code Camps, but usually not for the presentations. I normally end up meeting a couple people that I have a really cool conversation with. In this case I had a little chat one of my attendees that got me thinking. Morgan mentioned that she would love to see me do something that would help someone like her wrap her head around all this client scripting stuff (she’s an experience Windows Developer whose now having to build some web sites and is starting to see the need to be able to dive deeper than throwing an UpdatePanel on a form. &lt;/p&gt;  &lt;p&gt;She got me thinking about doing what I’ve started thinking of as "Dive Deep" into ClientScript.  I wanted to do another Day of Ajax (but I think Joe is a little hesitant to let me do it as in the past I have tended to dive just below the stuff I’m currently doing losing most of the people in the room... actually my talk yesterday was probably another one of those... sorry, if you were one of those people...) Actually Joe wasn’t the only one who kind of shot me down, so an event sounds out of the question.&lt;/p&gt;  &lt;p&gt;&lt;strong&gt;New Blog post series (for Morgan and folks like her)&lt;/strong&gt;    &lt;br /&gt;Since I can’t do another Day of Ajax (well, I could if someone wanted to give me a facility to do it in...), I’ve started thinking about doing a series of blog posts to help someone go from minimal knowledge (I can drop a control on a WebForm) to being able to customize a behavior/extender in the Ajax Control Toolbox and to be able to build your own controls. These skills really go outside your core MS skills... you need to be able to look at things a little differently. These blog posts will have source code in JavaScript and in Script# (since I imagine a lot of people doing ASP.NET would rather leverage a skill that they use on a regular basis). We’ll be leveraging both the MS Ajax ClientScript library and the jQuery library.&lt;/p&gt;  &lt;p&gt;I’ll try to get some of this going this week and will try to regularly blog about it.... with the holidays please forgive me if I fall behind.&lt;/p&gt;  &lt;p&gt;&lt;strong&gt;I was right BDD is cool and translates to my world really well&lt;/strong&gt;    &lt;br /&gt;I also had some conversations with Sean Chambers and Chris Bennage. Between conversations I have had with Chad Myers and Sean, I have a decent agile community in &lt;a href="http://www.lostechies.com/"&gt;Los Techies&lt;/a&gt; who seem to be less thick skinned and are really good at communicating their methodology in a very clear manner without being zealots. My conversations with Chirs really showed me the practicality of the whole discipline (looking forward to having more conversations with Y’all). I actually attended Sean’s BDD talk and found it really enlightening... I’m looking for a good project to try BDD on (and BDD first). If I can manage to not tick off Mr. Reynolds, maybe I can find some Agile friends in Florida that I can pick a few things up from (I leave it all open ended at that).&lt;/p&gt;  &lt;p&gt;So you’ll probably hear some posts around this subject as well. I actually had Chris admit that he over-architected a sample once (which has probably been my problem with some of this stuff... FWIW, all my conversations about DI seem fairly stupid at the moment as what I build typically is DI in some form or another). Anyway, BDD is something I’ll definitely be exploring a little more (since I was given a copy of TypeMock, I’ll be exploring that was well).&lt;/p&gt;  &lt;p&gt;&lt;strong&gt;Summary&lt;/strong&gt;    &lt;br /&gt;All in all a really great day for me.&lt;/p&gt;  &lt;div class="wlWriterSmartContent" id="scid:fb3a1972-4489-4e52-abe7-25a00bb07fdf:b8f1dd75-4139-47c0-a80c-ab5ac8622627" style="padding-right: 0px; display: inline; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px"&gt;&lt;p&gt;Here’s the files &lt;a href="http://theruntime.com/blogs/images/theruntime_com/blogs/jaykimble/WindowsLiveWriter/TampaCodeCamp2008Wrapup_DB28/slides.zip" target="_blank"&gt;Slides&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;    &lt;div class="wlWriterSmartContent" id="scid:fb3a1972-4489-4e52-abe7-25a00bb07fdf:38235e49-75b9-47e8-9301-89b0a6532e02" style="padding-right: 0px; display: inline; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px"&gt;&lt;p&gt; &lt;a href="http://theruntime.com/blogs/images/theruntime_com/blogs/jaykimble/WindowsLiveWriter/TampaCodeCamp2008Wrapup_DB28/TUX%20-%20MS%20Ajax%20Client%20Script%20101%20projects.zip" target="_blank"&gt;Sample Solution&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;   &lt;div class="wlWriterSmartContent" id="scid:fb3a1972-4489-4e52-abe7-25a00bb07fdf:edb877bf-b8ec-4a94-8d28-8ff644e49162" style="padding-right: 0px; display: inline; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px"&gt;&lt;p&gt; &lt;a href="http://theruntime.com/blogs/images/theruntime_com/blogs/jaykimble/WindowsLiveWriter/TampaCodeCamp2008Wrapup_DB28/MS%20Ajax%20Cheat%20Sheets.doc" target="_blank"&gt;Jay’s MS Ajax Cheat Sheets&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2725.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2008/12/07/tampa-code-camp-2008-wrap-up.aspx</guid>
            <pubDate>Sun, 07 Dec 2008 20:36:53 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2725.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2008/12/07/tampa-code-camp-2008-wrap-up.aspx#feedback</comments>
            <slash:comments>3</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2725.aspx</wfw:commentRss>
        </item>
    </channel>
</rss>