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.

Comments on this post

No comments.

Leave a Reply

Trackbacks and Pingbacks on this post

  1. What I’ve Been Reading | In Another Place said on February 1, 2015 at 4:23 pm

    […] is often experienced through failure rather than success as Tom Woodward suggests in his post, Rookie Javascript Mistakes.  I’ve been playing around with the Kano I bought and going through the challenges for […]

TrackBack URL