Tag: Javascript

Posted on

Revisiting the JavaScript Calendar Control – Part 1

Tame the scripting beast. Check out The Little Book of JavaScript!

A few years ago, I wrote a calendar control for a Code Project article. Although I’ve used it myself several times, and despite the fact that people still appear to be using it, I can’t help but cringe every time I look at it again. Every time, the thought that comes to mind is “It could have been so much cleaner in jQuery…”.

Well, the time has come to bite the bullet and see how it can be pulled off again. Rather than going over the whole thing in one go though, we’re going to take it in steps over a number of posts to implement a feature or a group of features, so we can look each in slightly more detail. This is as much for my benefit as everyone else’s. If anyone spots anything weird, inefficient, or badong in these posts, please let me know. I like to think of this as public code review, so, you know. Bring it on.

We can rebuild him – we have the technology

The posts will be divided as follows:

  • In part 1 (this post), we will deal with the display of a simple static calendar.
  • In part 2, we will add the facility to pick a date, and to switch the month on display.
  • In part 3, we will add some sanity checks, and the ability to display events on given days.

And with that, on to the post itself. Continue reading “Revisiting the JavaScript Calendar Control – Part 1”

Posted on

An Up/Down control in jQuery

Make machines do your bidding with JavaScript. Check out The Little Book of JavaScript!

Recently, I needed to write an up/down selector – you know the sort, it’s where you select a number by clicking on an up or down arrow. Since they can be useful for other things besides numbers, I gave it the plugin treatment.

Most of the information about the plugin can be found in its documentation page.

Also available is a slightly beefier styled and animated demo of the plugin.

If you’re just interested in the plugin itself, you can find it here.

Posted on

Attaching data to elements in jQuery

Bring on the scripting! Check out The Little Book of JavaScript!

This morning, I found out about a very useful jQuery function going by the unassuming name of data. This fantastic little beast creates a data store for an element, and lets you store just about anything in there.

One of the ways in which this can be used is to attach functions to an element, and using them when required. To demonstrate the usefulness of this feature, I wrote two versions of a simple validation system. In one, we use the data function to assign one or more validators to an input box [Example 1: using $(x).data()]. In the other, we iterate over the inputs and check them against validators as needed [Example 2: not using $(x).data()]. Continue reading “Attaching data to elements in jQuery”

Posted on

Size does matter

Write better JavaScript. Check out The Little Book of JavaScript!

A good user experience requires responsiveness. Speed. Web pages that don’t make you wait more than a couple of seconds while they load, or even worse, load in bits and pieces and reorganize themselves in front of the user; “that’s the way these things work” isn’t good enough an excuse. Your users don’t want to know how your site works (even if your site is about how the internet works – they want to read about the problems, not experience them), they just want to get things done and move on. As Eve says in Gaiman’s The Sandman Vol. 6: Fables and Reflections, “Some people have real problems with the stuff that goes on inside them … sometimes it can just kill the romance”.

Two of the culprits these days seem to be huge JavaScript and CSS files. They’re by no means the only causes, but they can cause trouble at times. Delays when loading a CSS file result in the dreaded flash of unstyled content on some browsers. Problems loading a JavaScript file… well, let’s just say it ain’t pretty. The delivery of these files can be slowed down by a number of factors. File size is one of them; a 168kb file will download considerably more slowly than a 6kb one.

This is made worse by the use of multiple JavaScript and/or CSS files. Separating functionality or styles in a sensible way is heaven-sent when it comes to maintenance, but the way the web works means that it’s a lot easier to download one largish file than several small ones. Multiple files mean that the browser must make multiple requests to the server, and each request carries a small overhead since the server has to include a certain amount of information with each response it makes. To top it off, most browsers are configured to open a limited number of connections to a server at any one time – IE8 allows up to 6 concurrent downloads on broadband, while Firefox allows 8; these connections must be shared between the JavaScript, style, images, and other embedded files. This can cause the downloads to be queued up on pages with a lot of stuff on them.

What we need, then, is a small number of reasonably sized files: how do we get to that?

Continue reading “Size does matter”

Posted on

Aspect Oriented Programming in JavaScript

Want to level up your scripting? Check out The Little Book of JavaScript!

The sources can be downloaded here.

A couple of days ago, some colleagues and I were discussing the ins and outs of JavaScript, and one of the things that came up as we talked was how handy having functions as first class objects really is. Although I’d (ab)used this feature several times in the past, I’d never really thought much about it. It was just one of those things that’s, well, taken for granted in the language. Thinking it over a bit, a niggling thought came to me – that it would be really easy to implement aspect oriented programming in JavaScript. Continue reading “Aspect Oriented Programming in JavaScript”