Hashigo is spreadsheet style programming on the DOM.
Perfect for tasks like calculating totals for a shopping cart, or writing
validation.
Hashigo has a wonderful shorthand that takes a selector and returns the value in
the HTML element it selects. Functions that use this shorthand must be evaluated
and are referred to as 'formulas'.
Hashigo has two modes; formula and function.
'Formula' mode:
$(selector).calc(formula[,options]); //Example : $('#a').calc('${#b} + ${#c}');
'Function' mode:
$(selector).calc(function[,array of selectors,options]); //Example : $('#a').calc(function(b,c){return {b + c}),['#b','#c']);Options:
event: string of events triggerOnLoad: boolean, run the function or formula right away bindFn: function, the function used to bind functions to element events e.g. defaultOptions = { event: 'change', triggerOnLoad: true, bindFn: function($elements,fw){ //Assign event handlers on variable elements $elements.live(event, fw); }
The examples below show you how hashigo can simplify your code.
Note: these examples use the excellent jQuery
and Underscore.js
libraries.
Let's sum the values in this table and put the
result in the cell with the ID 'result'.
12 |
15 |
16 + |
16 |
Without Hashigo :
//Select our table elements with jQuery var $cells = $('#sum td:not(#result)'); //Map our table cells to their values var values = $cells.map(function(i,element){return $(element).text();}); //Reduce our values to a single value 'sum' var sumOfValues = _(values).reduce(0,function(memo,val){return memo + parseFloat(val);}); //Set our result $('#result').text(sumOfValues);
With some Hashigo :
$('#result').calc('_(${#sum td:not(#result)}).reduce(0,function(memo, value){' + 'return memo + parseFloat(value);' + '});');
Every right angle triangle has a hypotenuse. A hypotenuse is the longest side on any right angled triangle.
Here is a simple calculator you can use to calculate the hypotenuse of a right angled triangle:
adjacent =
opposite =
hypotenuse = sqrt(a^2 + o^2)
=
Ye olde way:
$('#a,#o').bind('keyup',function(){ var a = $('#a').val(), o = $('#o').val(); $('#h').val(Math.sqrt(Math.pow(a,2) + Math.pow(o,2))); });
With some Hashigo :
$('#h').calc('Math.sqrt(Math.pow(${#a},2) + Math.pow(${#o},2));');
Let's help our unimaginative users come up with a username for
our website.
We'll generate a username with their first initial and their last name,
lowercased and without spaces.
First name :
Last name :
User name :
Old school method:
$('#firstname,#lastname').bind('keyup change',function(){ var username = $('#firstname').val().substr(0,1) + $('#lastname').val().replace(/ /g,"").toLowerCase(); $('#username').val(username); });
With help from Hashigo :
//Hashigo escapes all user input before it operates on it. //Note this for when your formulas manipulate text. $('#username').calc('(${#firstname}.substr(0,1) + ${#lastname}).replace(/'+escape(' ')+'/g,"")').toLowerCase();
With help from Hashigo Function mode
//Hashigo can take functions too. //Useful for long calculations(enhances readibility). It's also faster. $('#username').calc(function(firstname,lastname){ return (firstname.substr(0,1) + lastname).replace(/ /g,"").toLowerCase(); },['#firstname','#lastname']);
Other input types and how you might interact with them using Hashigo.
$('#selectedOption').calc("${[name=whatBeer]};'Selected : ' + ${[name=whatBeer] option:selected};");
$('#beerCost').calc("${.beer};'Beer bill : $' + _(${.beer:checked}).reduce(0, function(memo,value){return memo + parseFloat(value);});");
$('#selectedRadioTimes10').calc("10 * ${input[name='multiplier']:checked}[0]");