Javascript

In languages like C# and Java you never really need to give a thought to the this operator. In javascript things are a little more complicated due to functions being first class objects.

How to use a tool called Packer.NET to build javascript minification into a MSBuild script.

Prototype chaining is used to build new types of objects based on existing ones. It has a very similar job to inheritance in a class based language.

The javascript object prototype is javascript’s way of sharing implementation across similar objects, much like the way classes are used to do this in many other languages. Although constructor functions look a lot like classes, javascript does not have a class based object system like C# or Java. Instead it has a prototype based object [...]

A neat little trick I learnt from Ting is a way to check whether a value was null or undefined using the or operator (||). It’s really simple. If valueThatMightBeEmpty has a value set, you get that value. If it is null you get the default. It’s just like the ?? operator in C#: var [...]

Javascript closures are a really powerful feature of the javascript language. Closures are created when a function that’s nested inside another function accesses a variable from its parent’s scope. This is really useful for passing state around your application when the inner function is called after the outer function has exited. Javascript supports functions nested [...]

The object literal syntax is great for setting up one off objects but sometimes you’ll want to mass produce objects that all have the same properties and methods. It would be a pain to have to set up each object individually so instead you can use a constructor function to do it for you. There’s [...]

In 2008 I did a talk at a .NET user group in Oxford about the nuts and bolts of how objects actually work in javascript. Here are the presentation slides and code samples.

Anonymous functions are functions that are dynamically declared at runtime. They’re called anonymous functions because they aren’t given a name in the same way as normal functions. Anonymous functions are declared using the function operator. You can use the function operator to create a new function wherever it’s valid to put an expression. For example [...]

Functions in javascript are first class objects. This means that javascript functions are just a special type of object that can do all the things that regular objects can do. Really, just like any other variable Here are a few of the important objects things that you can do with a function in javascript. A [...]

Javascript objects are basically just hash tables, a group of related properties and functions that can be accessed by a key. Properties are dynamically added at runtime. Methods are just properties that happen to be functions. Building a simple object The simplest way to build objects in Javascript is by declaring a new variable of [...]

This is a series of articles about how to use the javascript language features to write object oriented type code. It’s designed for people who are already sold on the idea of bundling functionality up into objects and want to know the javascript way of doing things.

One thing coming up in the W3C selectors api spec are a couple of new methods for retrieving DOM elements called querySelector() and querySelectorAll() that take a css selector and return a node or list of nodes that match. They basically do the same thing as the css query features of JQuery or Dean Edward’s [...]

Learnt something new today! There’s a repository of open source javascript code called JSAN modelled on the perl version. There’s a whole lot of interesting stuff on there like UI widgets, animations and AJAX. I haven’t tried any but it’s nice to know there’s somewhere you can see what other people are doing.

One recurring problem I’ve had when using a function from a custom javascript object as an event handler is that when the event handler is called the “this” property of the function no longer references the object it originally belonged to. To show you what I mean, take a look at this simple javascript object. [...]

I came across a weird feature of javascript last week, a way of spanning javascript strings over multiple lines. To do it you put a ‘\’ character just before the line break and javascript knows it should keep going on the next line: var mystring = "hello \               [...]

How to use arguments.callee to walk up the javascript call stack when you’re doing something that a debugger can’t help you with.

Something I really, really love at the moment is a little application called javascript lint. It’s a javascript syntax checker that’s built on top of the Mozilla javascript engine. You can run it over a javascript include file (I don’t know if it’ll work on inline javascript) and it’ll syntax check it for you without [...]

I found a link to a new page for the really useful drip tool which looks for IE memory leaks in javascript code. There’s also been a new revision of the program by the guy who’s hosting it.

I found a very interesting article about ASP.NET data binding that talks about exactly what’s happening when you call the DataBind() method on a templated control like the repeater. It’s got some really interesting stuff on how the templates are instantiated and how the child controls are built.

I don’t know if this will be useful to anyone else but I thought this was kind of a neat trick for messing around with ASP.NET page rendering for debugging purposes. My problem was I wanted to stop the rendering of a page at a certain point so I could see how the scripts were [...]

I ran into a weird problem with dynamically created ASP.NET 2.0 user controls yesterday. I was using the user control to populate a panel of a tab control which meant I didn’t actually have a reference to the user control object anywhere on my form. The only way I could get a reference to it [...]

IE has a pretty nice DOM property called currentStyle that you can use to find out the resolved style properties of a DOM object. This is neccessary because the style property will only tell you what style properties have been set, they won’t tell you what properties have been inherited from the element’s parent nodes. [...]

I found a useful little utility called Lint that checks for things in your javascript code that’s likely to introduce errors. I really like that it checks for undeclared variables because I always, always, always want to declare my variables before I use them. Considering that forgetting to declare the variable sets it global for [...]

I found a really useful page on the MSN site that explains how measuring element dimensions and locations work in javascript. There’s a great image that shows you how to measure any of the different areas using the different javsacript width, height and placement properties.