• 4 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 3/3/20

Your jQuery toolkit

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!

Open in browser
Open in Browser

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:

Opening the JavaScript console in Chrome
Opening the JavaScript console 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:

Prompting an alert by writing code in the JS console
Prompting an alert by writing code in the JS console
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', '');
Using jQuery on this OpenClassrooms page
Using jQuery on this OpenClassrooms page to modify the 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!

Robust jQuery documentation
Robust jQuery documentation
Ever considered an OpenClassrooms diploma?
  • Up to 100% of your training program funded
  • Flexible start date
  • Career-focused projects
  • Individual mentoring
Find the training program and funding option that suits you best
Example of certificate of achievement
Example of certificate of achievement