- 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 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.
- Posted by liammclennan on November 19, 2009
Today I had a twittersation about build servers, and how closely they should match the development and production environments. Damian’s position was that the build server should match the development environment, while I held that the build environment should be as close to production as possible. Martin Fowler’s Continuous Integration article says:
Test in a Clone of the Production Environment
The point of testing is to flush out, under controlled conditions, any problem that the system will have in production. A significant part of this is the environment within which the production system will run. If you test in a different environment, every difference results in a risk that what happens under test won't happen in production.
As a result you want to set up your test environment to be as exact a mimic of your production environment as possible.
I can provide an example of why this is a good idea. I am currently working on a project that is using Asp.Net MVC 2, which is installed on developer’s machines as a standalone MSI. The same article I mentioned before also says, “everything you need to do a build should be in there [repository] including: test scripts, properties files, database schema, install scripts, and third party libraries”. Being fallible, I made a mistake and failed to include one of the required MVC DLLs in the source repository. Because the build environment matched production we quickly detected the error because the build broke. If the build server was similar to the development environments then it would have had the required DLL in the GAC and the bug would have gone undetected.
Here are the things that I consider to be important for a build environment:
- The build server should, as close as possible, match the production environment
- The build server should be fast. Rapid feedback is important
- The same build that runs on the build server should also be runnable on the developer’s machines
- When a build fails, everyone should know
UPDATE: Kyle Baley has some interesting thoughts on this topic including, “plus, the point of a CI server is to mimic a client machine as much as possible and installing Visual Studio in order to run a build process doesn’t meet that criteria.”
- Posted by liammclennan on November 19, 2009
I have written about about WebAii before. It is functional but the API sucks. I have written about NGourd too.
I am currently working on a project that is using the combination of NGourd and WebAiii for automated acceptance testing. We start with a story:
Feature: Search
As a user
I want to search for items
so that I can find data that I am interested in
and then write some scenarios like:
Scenario: Search for a compensation agreement
Given I am at the home page
When I select the Agreements perspective
And I search for 'agreement 1'
Then the search results should be displayed
Within the test project we have the following directory structure:
Search.feature is a text file containing the previously listed feature and scenario definitions. For each scenario step we must have a corresponding step definition. For example the step ‘When I select the Agreements perspective’ matches the following step definition:
[Step(@"search for '([\w\s]+)'")]
public void search_for(string searchTerm)
{
CurrentBrowser.Find.ById("Terms").SetValue("value", searchTerm);
CurrentBrowser.Click(CurrentBrowser.Find.ById("search_submit"));
}
Note the use of regular expressions to parameterise the step. Because this step is an action we put it in the ActionSteps file. Everything that we need to do for our tests falls into one of the three categories: Action, ContentAssertion or Navigation. The goal is to avoid defining the same step twice so that the set of steps form a domain specific language that can be used by business analysts and the like.
NGourd is a Cucumber knockoff, but without many of the features. However, it is surprising how far you can get with just the basics. So far it is working nicely.