Rookie Javascript Mistakes

Screen Shot 2015-01-26 at 10.11.53 PM

I frequently can accomplish things by cobbling together code I find on Stack Overflow and various tutorials/examples found elsewhere. Sometimes I have a decent idea what’s going. Other times . . . my lack of real understanding slows me down much more than I’d like.

The following bits of increased knowledge come from playing around with three javascript plugins for jquery. You can see all of them in action at the site1 above.

  • Chart.js – simple HTML 5 carts that are animated on construction
  • countUp.js – does those rolling numbers
  • ToolTipsy – slick customized tooltips

“By seeking and blundering we learn.” – quite possibly Goethe2

Here are two easy things I did wrong when playing with way too many javascript libraries on the ECAR demo site.

Lesson one – If a library is a jquery plugin then the script you write (initiator?) AND the plugin reference3 have to load after jquery. That order is just a little bit important. I had previously thought far less about the plugin source URL and probably accidentally put it in the right order. In my head it wasn’t a script.4 I thought about more like a reference put into action later and so I never really thought about the order. This is basic competency stuff but I did it wrong and spent a while trying to figure out why things were failing before I noticed.

Lesson two – You can’t assign more than one function to window.onload. You can, however, merge the code chunks pretty easily.5

So something like this . . .


	window.onload = function() {
			sturesp.start();
			institute.start();
			countries.start();
			facresp.start();
			var ctx = document.getElementById("laptop-chart-area").getContext("2d");
			window.myPie = new Chart(ctx).Pie(laptoppieData);

instead of

	window.onload = function() {
			sturesp.start();
			institute.start();
			countries.start();
			facresp.start();
}

	window.onload = function() {

			var ctx = document.getElementById("laptop-chart-area").getContext("2d");
			window.myPie = new Chart(ctx).Pie(laptoppieData);

1 I probably need to write a post about what I did there and why.

2 I don’t really care who said it. It’s not like I hold Goethe up as a model for education. I’d also replace “blundering” with some other word less indicative of carelessness and more focused on moving without excess timidity. So maybe I’m not so good at using quotes.

3 I don’t know if these are the right words. The URL that points to the plugin code.

4 Clearly it is by my head is a strange place most of the time.

5 A solution but in the future it seems like options other than onload will be preferable.

One thought on “Rookie Javascript Mistakes

Comments are closed.