- Posted by liammclennan on March 12, 2010
The following code adds a method to javascript arrays that returns a distinct list of values.
Array.prototype.distinct = function() {
var derivedArray = [];
for (var i = 0; i < this.length; i += 1) {
if (!derivedArray.contains(this[i])) {
derivedArray.push(this[i])
}
}
return derivedArray;
};
and to demonstrate:
alert([1,1,1,2,2,22,3,4,5,6,7,5,4].distinct().join(','));
This produces 1,2,22,3,4,5,6,7
Note that this implementation of distinct() is dependant upon my implementation of contains.
- Posted by liammclennan on March 11, 2010
This javascript adds a method to javascript arrays that returns a boolean indicating if the supplied object is an element of the array
Array.prototype.contains = function(item) {
for (var i = 0; i < this.length; i += 1) {
if (this[i] === item) {
return true;
}
}
return false;
};
To test
alert([1,1,1,2,2,22,3,4,5,6,7,5,4].contains(2)); // true
alert([1,1,1,2,2,22,3,4,5,6,7,5,4].contains(99)); // false
- Posted by liammclennan on March 10, 2010
Javascript allows you to declare variables simply by assigning a value to an identify, in the same style as ruby:
Good javascript developers know that this is a bad idea because undeclared variables are assigned to the global object, usually window, making myVar globally visible. So the above code is equivalent to:
window.myVar = "some text";
What I did not realise is that this applies to for loop initialisation as well.
for (i = 0; i < myArray.length; i += 1) {
}
// is equivalent to
for (window.i = 0; window.i < myArray.length; window.i += 1) {
}
Combine this with function calls nested inside of the for loops and you get some very strange behaviour, as the value of i is modified simultaneously by code in different scopes. The moral of the story is to ALWAYS declare javascript variables with the var keyword, even when intialising a for loop. This way i is scoped to the current function.
for (var i = 0; i < myArray.length; i += 1) {
}
- Posted by liammclennan on March 4, 2010
Posts like my intro to jQuery client-side templates may appear, at first glance, to add nothing to the existing body of knowledge. However, the trouble that I regularly encounter with technical documentation is that the author tries too hard to be exhaustive. When first approaching a new topic the reader is most interested in the success scenario. Under normal conditions, how would I use this technology? What is the most basic syntax?
A great example of documentation that focuses on the core usage of a technology is Joel Spolsky’s excellent Hg Init. The top level topics are: Subversion Re-education, Ground up Mercurial, Setting up for a Team, Fixing Goofs, Merging and Repository Architecture. These are exactly the things I want to know about as a Hg newbie.
Much as we describe software functionality with user stories, the best introductory documentation is grouped by ‘what is the reader trying to do’, instead of alphabetical or chronological groupings. Once the reader has a working knowledge of the topic then exhaustive reference documentation becomes useful.
- Posted by liammclennan on March 3, 2010
Why Use Client-side Javascript Templates?
When building rich internet applications you often need to construct html on the client. I am going to demonstrate how to construct DOM elements using the jqote jQuery plugin (2.0.0).
The naive approach to client-side html generation is to embed html inside javascript like:
var text = 'Some text';
$('body').append($('<div id="content>' + text + '</div>"'));
This approach fails as the complexity of the html increases. It is also a clear separation of concerns violation to mix html (presentation) with script (interaction).
Javascript templates provide a way to dynamically build html on the client while storing the dynamic html with the rest of the presentation markup. Additionally javascript templates provide MVC-like separation of concerns.
Dynamically Building a Table with a Client-side Javascript Template
Suppose you want a web page that allows the user to build a table of people. For each person the user can enter their name and age. First we need a form to collect the values, and we need some jQuery magic to cancel the form post:
<form id="people_input">
<label for="name">Name: </label><input type="text" name="name" /><br />
<label for="age">Age: </label><input type="text" name="age" /><br />
<input type="submit" value="Add" />
</form>
<script type="text/javascript">
$(document).ready(function () {
$('form#people_input').submit(function (e) {
e.preventDefault();
});
});
</script>
There needs to be a table to display the people, and each time the form is submitted a new row should be added to the table. jqote templates are defined in the html by wrapping the template in a script tag and a CDATA tag. The script tag is necessary to stop the template from being interpreted as part of the page. The CDATA tag is required so that the page remains syntactically valid. Here is my empty table and a template for a row:
<table id="person_table">
<tr>
<th>Name</th><th>Age</th>
</tr>
</table>
<script type="text/html" id="template">
<![CDATA[
<tr>
<td><$= this.name $></td><td><$= this.age $></td>
</tr>
]]>
</script>
The default jqote tags use <%= %> syntax which I have replaced with <$= $> to avoid conflict with Asp.Net MVC. Inside of a jqote template ‘this’ refers to the data object used to render the template. Within the jqote tags any javascript is valid since jqote is based on John Resig’s Javascript Micro-Templating.
The final, and most interesting step is to render the template each time the form is submitted and insert the result at the end of the table. Note the second parameter to the jqote() method, which is the character to use for the html nugget syntax.
$(document).ready(function () {
$('form#people_input').submit(function (e) {
var data = { name: $('input[name=name]').val(), age: $('input[name=age]').val() };
$('table#person_table').append($('#template').jqote(data, '$'));
e.preventDefault();
});
});
To try out the complete code, grab it from codepaste.net.
- Posted by liammclennan on November 27, 2009
Javascript does not have classes in the traditional sense, but we can achieve something similar in a number of ways. C# and Ruby both have standard class syntax.
This post is part of a series comparing the language features of the C#, Javascript and Ruby programming languages.
C#
public class Vehicle
{
protected string Make { get; private set; }
protected string Model { get; private set; }
public Vehicle(string make, string model)
{
Make = make;
Model = model;
}
public virtual void Print()
{
Console.WriteLine(GetDescription());
}
protected string GetDescription()
{
// string formatting syntax return string.Format("Make: {0} Model: {1}", Make, Model);
}
}
public class Helicopter : Vehicle // inheritance syntax {
public int NumberOfRotorBlades { get; private set; }
public Helicopter(int numberOfRotorBlades, string make, string model)
: base(make, model)
{
NumberOfRotorBlades = numberOfRotorBlades;
}
public override void Print()
{
// string concatenation syntax Console.WriteLine(GetDescription() + " Number of Rotor Blades:" + NumberOfRotorBlades);
}
}
Javascript
Class:
// declare vehicle 'class' var vehicle = function(seed) {
var that = {};
// private method var getDescription = function() {
return "Make: " + seed.make + " Model: " + seed.model;
};
// public method that.print = function() {
alert(getDescription());
};
return that;
};
// instantiate a vehicle var magna = vehicle({
make: 'Mitsubishi',
model: 'Magna' }); magna.print();
Derived class:
// declare helicopter 'class' var helicopter = function(seed) {
var that = {};
that.prototype = vehicle(seed);
var getDescription = function() {
return "Make: " + seed.make + " Model: " + seed.model;
};
that.print = function() {
alert(getDescription() + " Number of Rotor Blades:" + seed.numberOfRotorBlades);
};
return that;
};
// instantiate a helicopter var ah64 = helicopter({
make: 'Hughes Helicopters',
model: 'AH-64',
numberOfRotorBlades: 4 }); ah64.print();
Ruby
class Vehicle def initialize(make, model) @make = make;
@model = model;
end
def print
puts get_description
end
private
def get_description
return "Make: #{@make} Model: #{@model}" end end magna = Vehicle.new('Mitsubishi', 'Magna')
magna.print
class Helicopter < Vehicle
def initialize(make, model, number_of_rotors)
super(make, model)
@number_of_rotors = number_of_rotors
end
def print
puts get_description + " Number of Rotors: #{@number_of_rotors}" end end ah64 = Helicopter.new("Hughes Helicopters", "AH-64", 4)
ah64.print
- Posted by liammclennan on November 24, 2009
This post is part of a series comparing the language features of the C#, Javascript and Ruby programming languages.
Variables
C# requires that variables be declared with a specific type. Javascript and Ruby determine the type of variables at runtime. Here is the syntax:
C#
public string publicMessage = "Hello World";
private string privateMessage = "Hello World";
static string PRIVATE_MESSAGE = "Hello World";
Javascript
var message = "Hello World";
Javascript does not have a syntax for making variables public or private, instead it is achieved by a clever usage of closure (discussed later). Javascript does not have block scope, which means that variables defined within a block can be accessed from outside the block (a block is anything in {} such as and if statement or a loop). In Javascript variables are scoped to the function in which they are declared and are visible anywhere within that function, including within inner functions.
// this function will alert "Hello World" twice.
function showMessage() {
if (true) {
var message = "Hello World";
}
alert(message);
var innerFunction = function() {
alert(message);
};
innerFunction();
}Ruby
A ruby variable is declared by assigning to the variable name. Ruby uses prefixes to indicate the variable scope.
# local variable
message = "Hello World"
# instance variable
@message = "Hello World"
# static variable
@@message = "Hello World"
# global variable
$message = "Hello World"
- Posted by liammclennan on November 23, 2009
I’m going to be looking at a few different languages and blogging my thoughts. I am not a language dork so it will probably be mostly wrong. The languages I care about are c# (which is what I mostly use), javascript (which I love) and ruby (which everyone else loves).
This post is part of a series comparing the language features of the C#, Javascript and Ruby programming languages.
Installation
C# is installed by installing visual studio, Javascript is included in all the popular browsers and Ruby can be installed (at least on Windows) using the Windows one-click installer.
Scripting-ness
Javascript and ruby are scripting languages, meaning that they are interpreted and dynamically typed. C# is strongly typed and compiled. In practice, this means that C# executes faster and is better at detecting errors at compile time. Javascript and Ruby support a faster development cycle, since there is no compile step, and provide more flexibility.
hello world
Here are the canonical hello world applications in each language.
C#:
class Program
{
static void Main(string[] args)
{
Console.WriteLine("Hello World");
}
}Javascript:
Ruby:
To execute a ruby program open a command prompt and run: ruby [ruby file name]
Note that the scripting languages require less ceremony to get something to run. You can drop commands in a text file, hand it to the interpreter, and it will run. This simple example also demonstrates the differences in line endings – Javascript and C# terminate lines with a semicolon, Ruby uses the new line character.
- Posted by liammclennan on November 22, 2009
Most of 2009 I have been working from home. This is a workforce revolution, made possible by technology advances and attitude changes. Here is my list of simple rules for working from home:
- don’t do it all the time. It is important to have some face-to-face interaction with your team.
- even when working from home stay in touch. Call your client or team at least once a day.
- working from home can be isolating. I make sure that I get out of the house every day so that I don’t end up like Edward Scissorhands.
- have quality gear. Working from home means that your home office is now your working environment. You should have a good workspace and sufficient redundancy. My home office has UPS, two internet connections, two printers and at least two computers.
- have a separate workspace so that you are able to clearly differentiate between work, and non-work time.
- Be fastidious with your timesheet. Trust does not come easily, so you need to do everything you can to help your employer understand that you don’t need to be supervised to work well.
Working from home is not for everyone, but there are some great benefits such as reduced travel time and working flexibility (such as the choice to wear pants).
This is my outdoor office:
- Posted by liammclennan on November 21, 2009
Sometimes you have a t-shirt idea, but there is no way to try it out – until now. Introducing OnAShirt.net. It is a simple app I coded in a couple of hours today that allows the user to place text over a picture of a t-shirt, or even to conduct t-shirt conversations with themself.
Thanks to jQuery for making this sort of thing so easy.