jQuery, JavaScript Objects and the BOM

The second week of learning JavaScript properly went a bit slower than intended. Actually, much slower…I think I’ve spend three weeks reviewing the material from the book, doing the Codecademy exercises, working through the relevant Treehouse courses, and playing around with things on my own. Progress has been slow, but I think it’s been really important for me to try to apply what I’ve been learning as I’m learning it (I’ll share a few examples later).

I really enjoyed Week 2: Learn JavaScript Objects, the Browser Object Model (BOM), and Events; Learn jQuery. There was a lot of repetition around objects, especially in the Codecademy exercises, but overall, the “week” was great because I felt like I’m getting into the part of JavaScript that I will find most useful–manipulating the Document Object Model, and making truly interactive websites.

Javascript objects

In week two, I learned that JavaScript is primarily an object-based language. Initially, this struck fear in me…what if this is a repeat of trying to learn Java in university (pure trauma)? But it turns out my fears were completely unfounded.

The book, Codecademy, and Treehouse all went into great detail about objects–how to create them, how to access their properties using dot or array notation, and how to create methods for the objects. I was starting to see how my learning in the first week was coming together, and how I was building onto it by learning about objects.

I learned that there are several ways to create an object:

  • Using the object literal
    var thing = {};
  • Using the object object
    var thing = new Object();
  • Creating a reference type
    function Thing( param ) {};
    var thing = new Thing();

At this point, it’s probably been two weeks since I went through the lessons on objects, and while I don’t want to say that I forgot what I learned, I am feeling a bit fuzzy. Hopefully getting back into learning will refresh my memory, and I can start getting an idea of how objects can be utilized in more real-world circumstances.

The Browser Object Model (BOM) and Events

There was a very short lesson in the book on the Browser Object Model (BOM), which is different from the Document Object Model (DOM), despite sounding similar. The BOM refers mostly to very general things that can happen within the context of using a web browser. This includes things like tracking your location to provide you with a better user experience, or serving up a different pages depending upon your browser version and what’s supported. It was actually pretty interesting stuff, even if I’m not entirely sure how I’ll use it yet.

jQuery

Learning jQuery was the real highlight of Week 2. I’ve been dabbling in jQuery every once in awhile since I’ve been working with WordPress. Prior to learning jQuery, I would look at jQuery code, vaguely understand it, but felt so lost when it came to trying to come up with jQuery code on my own because I didn’t completely understand what was going on. After Week 2 of Learning JS Properly, however, I feel much more confident when it comes to writing jQuery.

The book did a nice job of introducing jQuery as a JS library, which makes working across browsers easier and makes manipulating the Document Object Model (DOM) easier. The only problem is that jQuery is a rather late chapter in the book, and assumes you’re reading the book in order. So the examples discuss working with AJAX (part of JavaScriptIs.sexy’s Week 5 learning), and the DOM (also Week 5) make a little less sense, and the examples in the book are not at all helpful. Still, it was useful for introducing jQuery, and I will probably go back to it once I’ve completed Week 5.

Codecademy, on the other hand, was actually pretty damn good for jQuery. I found it moved a lot faster for jQuery than it did JavaScript, and because they focused mostly on jQuery as a means of manipulating the DOM, I felt like I was finally doing something fun and useful with my new skills. In fact, after finishing the Codecademy jQuery course, I created a little pen about my cats (naturally):

Treehouse’s jQuery course was also very good. It moved a bit slowly at times, but one of the most important things I got from that course was how to think about what I was hoping to accomplish with jQuery, and using that starting point to search the jQuery documentation for the functions/methods that would get me the end result. For me, this was game changing, and addressed that gap of not knowing where to start. The second part of Treehouse’s jQuery course went through jQuery widgets including Animsition, Sticky.js, and Slick.js, which I thought was fun and helpful since I’ve been working with various jQuery widgets for awhile.

For those using Beginning JavaScript, 5th Edition

If you’re following along and also trying to learn JavaScript properly, and you happen to also be using Beginning JavaScript, 5th Edition, you’ll notice that there are a few differences in chapter numbers between the forth and fifth editions. Here are the equivalent chapters between the forth and fifth editions:

4th Edition 5th Edition
Chapter 5, JavaScript — An Object-Based Language [icon name=”arrow-right” class=”” unprefixed_class=””] Chapter 5, JavaScript — An Object-Based Language
Chapter 6, Programming the Browser [icon name=”arrow-right” class=”” unprefixed_class=””] Chapter 8, Programming the Browser
Chapter 15, JavaScript Frameworks [icon name=”arrow-right” class=”” unprefixed_class=””] Chapter 16, jQuery