📖 Preparating for the course

Welcome to Beginning jQuery course. I’m Thomas Mak (a.k.a. Makzan).

jQuery Course Preparation

You’ll need to have basic HTML and CSS skills to learn jQuery. If you’re new to web design, please read the following link to get started coding basic web page with HTML and CSS.

Building your first web page by Shayhowe

Setting up development environments

Any operation system works fine with this course. We’ll need a modern browser to test the features. Chrome or Safari on Mac works fine.

Then we need text editor to code our web page. Any code editor works. I prefer BBEdit or Atom. But it’s your choice.

For quick experiments, you may use online HTML/JavaScript editors. Here are some of them:

I personally use CodePen a lot. Whenever I have ideas to explore, I create a new pen and start coding the core part of the logic. It’s live preview on devices allows me to test things out easily with only a browser.

For web IDE, I recommend Cloud9 which gives you a browser-based development machine. Besides basic web server for your HTML/JavaScript project, you also get the access to shell and ability to execute any server-side applications, such as Ruby on Rails or Node.JS.

📖 Adding jQuery into HTML

When using jQuery in Codepen, we only need to specific the library by the quick add feature. (Pen setting > JavaScript > Quick Add > jQuery)

But in real world, we aren’t using sandbox. We write HTML and JavaScript code in separated files and need to import all the external scripts file into the HTML.

So, make sure you have included the jQuery library into the web page before running your jQuery code.

<script src='http://code.jquery.com/jquery.min.js'></script>

📖 jQuery ready function

What is jQuery ready function?

$(document).ready(function(){
  // handle logic related to DOM.
});

When to use jQuery ready function?

Use it when you put your Javascript in the <head> (Before your body content)

Otherwise, we should put the Javascript before closing the </body> tag, which the browser loads and executes the JavaScript after loading all the content HTML.

In normal case, placing the JavaScript at the end has all the benefits.

It is faster because browser loads the content before encountering the script tag.

It also gets rid of the jQuery ready function because now when the JavaScript code runs, the content HTML must be loaded because the content is placed before the script.

Online references and helps

jQuery Doc is the go-to reference documentation for jQuery.

If you need reference on using the web standards, I recommend checking the Mozilla Developer Network for questions and issues.

Please don’t hesitate to ask any questions and queries. You can reach me by replying this email or find me on twitter (@Makzan).

—Thomas Mak