How to Sort an Associative Array (object) in Javascript

I’ve been working on an ajax site that needs to pass parameters elegantly via the hash tag. While working, I realized that there is usability value to a standardized URL (not to mention SEO value, if Google ever indexes such javascript based pages). In any event, I created this function to sort my hash arrays, and figured you might find it useful too:

function sortObj(arr){
	// Setup Arrays
	var sortedKeys = new Array();
	var sortedObj = {};

	// Separate keys and sort them
	for (var i in arr){
		sortedKeys.push(i);
	}
	sortedKeys.sort();

	// Reconstruct sorted obj based on keys
	for (var i in sortedKeys){
		sortedObj[sortedKeys[i]] = arr[sortedKeys[i]];
	}
	return sortedObj;
}

You can construct a demo page with the following HTML:

<html>
<body>
<script type="text/javascript">

// These vars are for demonstration purposes
var alertSort = "";
var blah = {}
blah.test2 = "testb";
blah.test1 = "testa";
blah.test3 = "testc";

// This function sorts objects by key
function sortObj(arr){
	// Setup Arrays
	var sortedKeys = new Array();
	var sortedObj = {};

	// Separate keys and sort them
	for (var i in arr){
		sortedKeys.push(i);
	}
	sortedKeys.sort();

	// Reconstruct sorted obj based on keys
	for (var i in sortedKeys){
		sortedObj[sortedKeys[i]] = arr[sortedKeys[i]];
		alertSort += "/" + sortedKeys[i] + "=" + arr[sortedKeys[i]];
// This line is for demonstration purposes
	}
    alert(alertSort);   // This line is for demonstration purposes
	return sortedObj;
}

// Call the function
sortObj(blah);

</script>
</body>
</html>

Automated Link Building – White Hat Style

Yaknow, most of the time, black hat SEOs have all the fun. When you don’t have to follow the rules, the world of SEO opens up to mathematically generated content, canned-ham links, and any number of script based processes. Well, today is the day of the white hat, because I’ve just written a killer link building script that will amplify your honest successes.

Link Building Pro, based at seox.org, will automatically add a citation to the footer of any text copied from your website. Unlike other similar solutions, though, it specifically uses the meta keywords from the page as the anchor text – ensuring that the links use the precise keywords you’re optimizing for. And, here’s the best part, any text within the selection that matches the text of another link on the page will automatically be converted into that link. As a consequence, if this selection is then copied into the user’s site, you’ve not only gained one link of citation, but also as many links as logically apply to the text itself.

Of course, what makes this white hat is that it’s allĀ voluntary. The user could easily remove the links if he chooses. But the default switches from being no citation or link to several, and as the default action is the easiest, it is also the one most often taken.

PS: Unfortunately, my previous script “Search and Share” interferes this script (doh!). For now, you’ll have to pick one or the other, but I’ve got big integration plans for the future!

Separating jQuery Functions into External Files (without selectors!)

In javascript, writing reusable blocks of code is easy. You simply enter something like: “function myFunction() { … }”, and then you later call it by simply writing “myFunction();”. Consequently, when I write jQuery, I often use this javascript shorthand within my jQuery ready tags. As long as all the code stays in a single file, things go smoothly.

But sometimes code grows, and when it does, you’ve got to separate your logic into separate external js files. That’s when things break. You see, in each of these external files, you now have to separately reiterate the jQuery ready tags, and when you do, you’ve buried your functions in a (jQuery) function, rendering it hidden. Out of scope. Or as the error console will tell you, “Missing”.

The trick is to create a jQuery function. There are articles all over the place that tell you how to do this. But every one that I’ve found seems to assume that you want your function to act on a selector. What I needed (and you may as well), was a function that acted just like that regular old javascript function (with jQuery syntax enabled). Believe it or not, all it takes is a minor tweek. Check it out:

External File (tilex.js):

  (function($){
    tile = function() {
      $("body").append('See? It works.');
    };
  })(jQuery);

Inline HTML:

<!DOCTYPE html>
<html>
<head>
<title>HyperStudio Timeline</title>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/tilex.js"></script>

  <script type="text/javascript">
   $(document).ready(function(){
      tile();
    });
</script>
</head>
<body>
</body>
</html>