The slow and steady pace continues as I follow more basic tutorials on HTML, CSS and JavaScript, taking lots of breaks to rest my eyes. (This is the third week I’ve had headaches or eye strain or whatever it is, so I’m pretty frustrated at this point. Hopefully when I get my new glasses next week, I’ll have some relief!
Today I’m learning about jQuery, the most popular JavaScript library. I had avoided it until now because I wanted to make sure I had a good grasp of plain JavaScript first. You see tons of anonymous functions in jQuery, so now that I know what those are, I figure I’m probably ready.
By the way, I think it’s especially weird (and cool!) that you can define and run an anonymous function at the same time, like this:
( function() {
alert("This works!");
}
)();So yeah, the syntax is quirky, but it’s not difficult to learn. The difficult thing about jQuery and JavaScript is the adjustment to event-driven programming, where pieces of your code run when a button is clicked or some other event occurs. It seems simple at first, but it can be really hard to wrap your mind around a complex program that doesn’t run sequentially! (I had some headaches with this when I learned Java in the context of Android app development, so at least I sort of know what to expect.)
Anyway, today I’m taking it easy and just following along with a Codecademy tutorial to get an easy introduction to jQuery’s syntax.
Today I learned:
- The
.ready()method, which doesn’t execute code until the page is ready for JavaScript to manipulate its elements - A bunch of jQuery’s effects, like
.fadeOut()and.slideUp() - A bunch of jQuery’s DOM manipulation methods, like
.append()andaddClass() - Some of jQuery’s event methods, like
.click() - At first I was scared of jQuery’s weird dollar sign syntax – it looks like some sort of PHP black magic! – but it turns out that
$is a valid variable name in JavaScript, and jQuery uses it as the shorthand name for thejQuery()function! (Recommended reading: The Mystery of the jQuery Object) - Thanks to a very smart friend of mine, I’m now starting to understand what closures are!
Questions:
- Is there any difference between using jQuery’s
.ready()method (as in$(document).ready( )) and simply including the JavaScript file at the end of the HTML document?