Become a better JavaScript developer by recreating jQuery effects in raw JS

November 2nd, 2011

A couple of days ago, a client wanted a couple of pages of videos changed to one page with a series of thumbnail links to the videos. And they wanted a way to show all the video thumbs or ones in certain categories. And, of course, I didn’t have a lot of time to build this, so I turned to jQuery. I ended up building a page like this. There’s no fancy effects but it gets the job done. Later on, I began to wonder if I could do the same thing in JavaScript and if it would be anywhere near as simple to write.

First, let’s take a look at the jQuery I wrote to get the effect the first time:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
  var divs = $('#wrapper div');

  $('#blue').click(function(e) {
    e.preventDefault();
    showBox('.blue');
  });
  $('#red').click(function(e) {
    e.preventDefault();
    showBox('.red');
  });
  $('#show-all').click(function(e) {
    e.preventDefault();
    $(divs).filter('.box').show();
  });
 
  function showBox(box) {
    $(divs).hide();
    $(divs).filter(box).show();
  }
 
});

I’m getting all the divs inside the wrapper div and putting them into a variable called divs. Next, I check to see which of the links you click on and if it’s blue or red, then I run a function called showBox, which hides all the boxes and then shows the ones I want to be shown. If the show-all link is clicked, then I just show all the boxes. I hide all the boxes because it’s easier then remembering which ones are showing and which ones aren’t.

It’s pretty simple and it’s like jQuery code you see everywhere on the web. I used jQuery exactly for the reason it was created, to add an effect to a site quickly and easily and there’s nothing wrong with doing it this way. But I want to get as good as I can at JavaScript, so why not see if I can do this without jQuery. And I did it and I actually learned a thing or two.

Let’s take a look at JavaScript code that does the same thing:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var divs = document.getElementsByClassName('box'),
    blueDivs = document.getElementsByClassName('blue'),
    redDivs = document.getElementsByClassName('red'),
    blue = document.getElementById('blue'),
    red = document.getElementById('red'),
    showAll = document.getElementById('show-all');

function hideDivs() {
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.display = 'none';
  }
}

function showDivs(el) {
  var div;
  if (el === divs) {
    div = el;
  } else {
    div = this[el + 'Divs'];
  }
  for (var i = 0; i < div.length; i++) {
    div[i].style.display = 'block';
  }
}

function click(e) {
  e.preventDefault();
  hideDivs();
  var target = e.target.id;
  if (target === 'show-all') {
    showDivs(divs);
  } else {
    showDivs(target);
  }
}

blue.addEventListener('click', click, false);
red.addEventListener('click', click, false);
showAll.addEventListener('click', click, false);

This does the exact same thing as the jQuery code. I used getElementsByClassName to create an array of divs and I also had to create arrays for the blue and red divs, which jQuery did for me. And the event listeners do the same thing as the click method of jQuery. Really, the only difference is that I had to write loops through the arrays myself, which is something else that jQuery did for me in the earlier code.

So people are probably thinking, why do this:

1
2
3
for (var i = 0; i < div.length; i++) {
  div[i].style.display = 'block';
}

when jQuery will just let you do this:

1
$(divs).filter(box).show();

Well, that’s what jQuery is doing behind the scenes. And the big difference going here is this, yes, the JS is about twice as much code in the HTML page, but to make the jQuery work, I need to load a 31KB file. With the raw JS, I have 40 lines or so.

I’m in no way ripping on jQuery here, I use it all the time and on the site I used this on was using jQuery for other things, so it was already loaded. I like to do things like this because it’s a challenge with a definite goal. Challenging yourself like this will help you become a better JS developer and it might lead to you relying on jQuery less.

Leave a Reply

Your email address will not be published. Required fields are marked *