Introduction to jQuery

Let's cover some basic concepts and tools that will help you get the most out of this course. Here are some tools that you should use or reference liberally during your learning:

• A good text editor

• Web browser and developer tools

• jQuery documentation

Text editor

Especially when working with a syntactically complicated language like JavaScript, a good text editor's syntax highlighting will make your code easier to read. If you've worked with development concepts before, odds are you're already using a good text editor. I recommend Sublime Text, an application I cannot work without. Another great (and free) option is Atom by GitHub. 

JavaScript without syntax highlighting (bad):

var listItems = document.querySelectorAll('li');
var i;
    for (i = 0; i < listItems.length; i++) {
listItems[i].className = 'starred';
}

JavaScript with syntax highlighting (good):

var listItems = document.querySelectorAll('li');
var i;
for (i = 0; i < listItems.length; i++) {
    listItems[i].className = 'starred';
}

From within your text editor, you'll also be able to open the JavaScript files associated with your HTML directly in the browser to view and test them with the following: browser and developer tools!

Web browser and developer tools

In the first chapter, you learned that JavaScript is particularly finicky across different browsers. Though jQuery will spare you lots of trouble, it's still good to use a powerful browser. I recommend and will be using Google Chrome myself in the course examples, though you could also use Firefox or Safari.

Within most modern web browsers, you'll have access to a JavaScript console. Within this JavaScript console, you can write and execute JavaScript on your page. To open your JavaScript console, you'll click on some combination of "View" and "JavaScript console," depending on your browser. Here's how to open it in Chrome:

You can write, view, and debug JavaScript code within this console. It even outputs JavaScript errors. Here's one line of JavaScript written in the console that prompts an alert message:

JavaScript console exercise

OpenClassrooms runs jQuery, so you can write jQuery within the console and see its effects in the browser. Open up the JavaScript console in your browser (without leaving this page), and enter the code below in the console. Don't be nervous, you won't actually be modifying our code base -- just what you see in the browser):

$('body').css('color', 'orange');

We do love orange here! If that's too colorful for you, feel free to change it back:

$('body').css('background-color', '');

jQuery documentation

Many things about jQuery can seem overwhelming, but you're never more than a click away from a great explanation. The jQuery documentation is rigorous and loaded with examples. 

On the main page, click any method name (ex..append() or category ("CSS") to learn more about the concept! You'll often find real HTML and jQuery within each page that allow you to test the method in a playground. Many of the jQuery methods can seem abstract ("this one method does what to the what on my webpage?!"), and having interactive examples is invaluable. It's also more than than flailing around on Stack Overflow.

As we advance through the course, make sure to have these tools just a click away. You'll need them all frequently!