Category Archives: SharePoint JavaScript

JavaScript for the C# Developer – Part 1

Next: JavaScript for the C# Developer Part 2 – Variables and Scoping Rules

In my recent post, My First Thoughts on SP 2013 – What does it mean for developers?, I wrote, "If you can’t work effectively in client side technologies, you will no longer be able to legitimately claim to be a senior or architect." Some of my friends expressed some trepidation about this new model on twitter. For example:



I’ve gotten quite a few requests to do a video or turn the presentation, better JavaScript in just 60 minutes, into writing. I decided writing would be fun and this is the first post in the series.

There are many great tutorials out there about JavaScript development so I wouldn’t be surprised if this one has very few readers after the first couple of weeks because I don’t expect the search engines will put this anywhere near the first page of results. So if you like this series some links would be very much appreciated.

The original presentation and this series of posts is designed to help .NET developers get up to speed on JavaScript (although I got some great praise from a Java developer who said it was ‘a revelation’). Because of this some of the terminology and the concepts I describe are technically wrong or are oversimplifications that I build on later on. If you already have a deep understanding of JavaScript and you submit comments to complain about these details there is a good chance I won’t approve them if they spoil my narrative.

Lesson 1 – JavaScript is not C#

If you are reading this there is a good chance you use JavaScript the same way I did prior to making a commitment to understand it back in 2010 – your JavaScript looks very similar to C# and you commonly copy bits and pieces from tutorials you find on the Internet. You can get away with this because the syntax of the two languages is similar because of their common ancestor, C. However, the two languages have very different rules and require different techniques. Comparing C# to JavaScript is not an apples to oranges comparison because they come from the same family. Instead it is more like comparing oranges to limes – similar in many respects but also very different.

The biggest difference is that C# enforces certain good coding practices via a complex and robust system of types centered on classes. Conversely, JavaScript is a deceptively simple language that does almost nothing to prevent accidental injuries.


When using JavaScript one must take care else one may cut off one’s foot.

Essential tools

If you find this series of posts worthwhile and want to follow along there are a few tools I recommend you should use to help follow along and test out concepts.

  • An up to date browser with its associated developer tools. My favorite is Firefox + Firebug, but I use them all.
  • JSFiddle

JSFiddle.net

JSFiddle is an awesome website that lets you create, test, and share JavaScript. It supports many popular JavaScript frameworks including Mootools, jQuery, Prototype, and Knockout.js. It’s hard to beat as a learning aid; I think it’s much better than Visual Studio for tinkering.

Instead of embedding a screen shot into this post I will share a link to a simple ‘Hello World’ fiddle I wrote: http://jsfiddle.net/DougWare/jWBsz/. Follow the link and click Run to see the awesome demo in action. By the time you finish reading this series of posts you’ll completely understand the syntax I used in my script, but for now I just want to point out some of my favorite JSFiddle features.

JSFiddle incorporates a few features that make it indispensable for me which I pray that Visual Studio’s completely deficient JavaScript editor will someday include. All are accessed via JSFiddle’s simple toolbar.


TidyUp

The TidyUp tool reformats your JavaScript to make it readable with proper indentation and line feeds. I often go to JSFiddle simply to paste in a poorly formatted or minified script and use TidyUp to make it readable.

JSLint

JSLint is a code analysis tool for JavaScript written and maintained by Douglas Crockford who is also the author of JavaScript: The Good Parts, a book I highly recommend.

Unlike C# which you must compile before you can execute code, JavaScript is interpreted. If you do something silly with your C# the compiler will tell you. The same sorts of mistakes in JavaScript manifest as runtime errors. JSLint helps you catch those mistakes just as a compiler does for C#. However, unlike a compiler, JSLint also criticizes your style and points out potential problems with your code. In this respect JSLint is like FxCop, but it’s feedback is much better than FxCop.

I use JSLint on every bit of JavaScript code I write and I credit it with being the most important factor in my evolution as a JavaScript programmer. I only have to be told a few dozen times before I quite making a mistake!

Versioning and Sharing

If you have an account and you are signed in you can create and track multiple versions of your fiddle. Even if you aren’t signed in, you get some support for this via the Save function.

That’s it for now…

I think this post is long enough. The next post will be an introduction variables and scoping rules. Stay tuned!

Next: JavaScript for the C# Developer Part 2 – Variables and Scoping Rules

Author: Doug Ware