Appendix A. Learning jQuery
Because this is a book on jQuery UI and not jQuery Core, I assume the reader has some knowledge of the jQuery library before starting this book. Because I often get asked, “What’s the best way to learn jQuery?” I thought I’d gather a few of the resources that have worked for me.
A.1. Experimentation
Different people learn in different ways, but what has helped me is digging right into code. The appeal of jQuery is that it makes difficult tasks extraordinarily easy (its motto is write less, do more, after all!), and seeing results visually provides amazing feedback. Here are some of my favorite ways to experiment.
A.1.1. Try jQuery (try.jquery.com)
My go-to starting point for learning jQuery is Try jQuery—which is available at http://try.jquery.com. The great thing about Try jQuery is that it’s an interactive tutorial that you must actively participate in to advance. Figure A.1 shows an example exercise.
Figure A.1. An example exercise from Try jQuery about selecting elements
This example teaches how to select elements with jQuery; it specifically asks the user to select the <h2> element in the HTML provided. The user must type this in the console located at the bottom of the screen (which works the same as the browser’s developer tools that we’ll look at in a minute). In the screenshot, I have already typed the correct answer, $( "h2" ), and the UI responded with a success message and a Continue button that takes me to the next exercise.
I highly recommend going through the entire set of Try jQuery tutorials as a starting point to learning jQuery.
A.1.2. Online testing tools
Another set of learning tools I’m fond of are the online environments that let you run web code—such as HTML, CSS, and JavaScript—in the browser. You can easily experiment without worrying about the setup and boilerplate that typically goes into building a web page.
Each of these tools has different features, but they all function similarly. The next three figures show the same code—appending a new <h2> to the <body> and underlining its text—running in the three most popular of these tools: JS Bin (figure A.2), jsFiddle (figure A.3), and CodePen (figure A.4).
Figure A.2. Live coding in JS Bin
Figure A.3. Live coding in jsFiddle
Figure A.4. Live coding in CodePen
Each tool gives you an area to write HTML, CSS, and JavaScript, and then shows you the result in another area. For the purposes of learning jQuery, each tool has a convenient way of adding jQuery to your example. In JS Bin, it’s the Add library button; in jsFiddle, it’s the Frameworks & Extensions section; and in CodePen, it’s the cog or gear icon at the top of the JS panel.
Which of these tools to use is largely a matter of personal preference, and I encourage you to play with them all to decide which you like best. Personally, I’m a fan of jsFiddle because of its screen layout (I like the four panels in a grid) and how it handles URLs for sharing test cases with others. I’m such a fan of jsFiddle that I use it in numerous examples throughout this book. You can learn more about jsFiddle in chapter 1.
A.1.3. The browser’s developer tools
One of the best ways to experiment with jQuery is to use the browser’s built-in developer tools. I recommend learning the browser’s developer tools early on because you’ll acquire knowledge that extends far beyond learning jQuery. In my opinion, it’s the single most valuable tool a web developer has, enabling you to inspect the DOM, alter CSS, profile your applications, and more.
Although all browsers’ developer tools are different, they have consolidated around a few core pieces of functionality, including the keyboard shortcut needed to open them. You can use F12 on Windows and Cmd + Option + I on OS X.
Tip
For Safari on OS X, you first have to enable the developer tools by going to Preferences → Advanced and clicking the Show Develop Menu in Menu Bar check box.
The main task worth familiarizing yourself with is the browser’s console, as it lets you execute JavaScript code and is great for experimentation. Figures A.5 and A.6 show the same example of adding an underlined <h2> to a page using the developer tools in Chrome and Internet Explorer.
Figure A.5. Adding an <h2> with Chrome’s developer tools
Figure A.6. Adding an <h2> with Internet Explorer’s developer tools
You can do a lot with the browsers’ develop tools, and it’s worth taking time to learn them. For a more detailed guide on these tools, you can use the following resources:
- Chrome—https://developers.google.com/chrome-developer-tools/
- Internet Explorer—http://msdn.microsoft.com/library/ie/bg182326(v=vs.85)
- Firefox—https://developer.mozilla.org/en-US/docs/Tools
- Safari—https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
Chrome’s documentation is particularly good, and it also has a free interactive course that works exactly like Try jQuery at http://discover-devtools.codeschool.com/. If you’re a Chrome user, it’s a great set of tutorials to go through; even seasoned developers can learn a thing or two.
A.2. Reading
After you’ve experimented with jQuery, a well-written resource can help you learn the finer points of the library, and to understand why the library works as it does. I’ll give a few recommendations for reading material.
A.2.1. jQuery Learning Center (learn.jquery.com)
The jQuery Learning Center (http://learn.jquery.com) is a collection of articles and tutorials about all things jQuery. Here you can find everything from jQuery 101 to tutorials on advanced features of the library. You can even find material on jQuery UI (some authored by yours truly). Figure A.7 shows the site with a sampling of topics.
Figure A.7. Sampling of topics on the jQuery Learning Center. The screenshot is from http://learn.jquery.com/using-jquery-core/.
What’s cool is that the Learning Center is an open source project that’s officially maintained by the jQuery Foundation. The project is hosted on GitHub at https://github.com/jquery/learn.jquery.com, and there you can report issues with the site, contribute fixes, and even write your own articles!
A.2.2. Books
Although the Learning Center is great for reference material, it doesn’t give you the thorough walkthrough of jQuery that you get from a whole book dedicated to it. There are a ton of books on jQuery out there, so to help you sift through the list, I’ll make two recommendations for books I’ve personally read.
Although now slightly dated, jQuery Enlightenment by Cody Lindley (2009) is the best free book I know of on jQuery. The book is full of examples that link to live code on JS Bin (this book is where I got the inspiration to use jsFiddle examples throughout the book), which in my opinion significantly enhances the learning experience. jQuery Enlightenment is freely available as a PDF on http://jqueryenlightenment.com/.
About a year after I read jQuery Enlightenment, Bear Bibeault and Yehuda Katz released the second edition of jQuery in Action (Manning, 2010). This book fascinated me, as it explained not just how jQuery works, but also why it works the way that it does. It inspired me to mimic this approach and answer the whys behind jQuery UI in this book. The second edition of jQuery in Action is now a little dated. Aurelio De Rosa is completing a third edition to get the content up to speed. You can check out the third edition of jQuery in Action at http://manning.com/derosa/.