Forbes - The joy of jQuery : a beginners guide to the worlds most popular JavaScript library

The Joy of jQuery

A Beginner's Guide to the World's Most Popular Javascript Library

by

Alan Forbes

The Joy of jQuery

Copyright 2013 by Alan Forbes. All rights reserved, including the right to reproduce this book, or portions thereof, in any form. The scanning, hosting, downloading, or otherwise sharing this book over the Internet without the permission of the author is illegal and punishable by lawand not very nice. Please encourage me to write another book by buying your own copy.

What is jQuery?

Introduction

jQuery is a programming language you can use to create cool web applications. It's free, powerful, relatively easy to set up and learn, and it has extensions and plugins available to do almost anything you could imagine. You can get started quickly, and you won't outgrow it later when you get really good at it. In my humble opinion, jQuery is well worth it the time and effort you put into learning it.

Frankly, it's just plain fun too. That's what inspired me to write this book.

Let's get started. The most basic concept you need to grasp is that a web page is just a bunch of text, organized in a certain way, which is displayed by a browser. The browser reads this text and builds a model of the page in memory called the 'document object model'. jQuery lets you manipulate the document object model (also commonly known as the 'DOM'). You will see the term DOM throughout this book.

jQuery is a lightweight JavaScript library with the tagline of "write less, do more". So what does that mean, exactly? To understand what it means, it helps to have an idea of what jQuery is intended to help you do. If you didn't have jQuery (or any other framework like Dojo, which is also very cool) then the way you would make things happen in the browser is to use a language called JavaScript.

JavaScript is programming language that is built into all modern web browsers so that client-side scripts can interact with the user, control the browser, communicate with the server in the background, and alter the document content and formatting that is displayed. JavaScript is a full-featured programming language and, as such, it can be rather complicated.

jQuery is written in JavaScript. In fact, jQuery is a lot of JavaScript all in one place-- hence the phrase 'library'. It's like a library full of JavaScript code. The purpose of jQuery is to make it easier for you to use JavaScript in your web pages. jQuery takes many of the common tasks that would otherwise require lots of lines of JavaScript code and turns them into methods that you can call with a single line of code. But of course, when your one line of code is executed, what really happens inside the browser is that all the code in the jQuery library is executed in its place. That's what jQuery saves you from --- writing all the JavaScript that is 'under the hood'.

jQuery is a language that converts your one line of simple code into dozens and possibly even hundreds of lines of complex JavaScript code. It does this automatically and nearly instantaneously. In fact, that is the whole point of jQuery.

jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. The jQuery library contains the following core features:

• HTML/DOM manipulation

• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

In addition, jQuery also has plugins that can likely solve any problem you are facing.

What jQuery is NOT

You have to use jQuery for what it is good for. As we have described it, jQuery is a language used for manipulating web pages after they have been sent to the browser. Because it only works with the HTML in the browser, we call this a client scripting tool. 'Client' is just a fancy word meaning 'browser' in this context but I mention it because it is an industry term.

jQuery is not a server scripting language. A server scripting language is one that runs on the web server, and manipulates the HTML before it is sent to the browser. A good example of a server scripting language is PHP. If you would like to learn about manipulating HTML before it even gets to the browser, please check out the companion book 'The Joy of PHP'.

A client scripting language (such as jQuery) manipulates HTML after it has been sent to the browser.

A server scripting language (such as PHP) manipulates HTML before it has been sent to the browser.

Adding jQuery to Your Web Pages

There are two ways to start using jQuery on your web site. You can:

1. Download the jQuery library from jQuery.com or,
2. Include jQuery from a CDN, such as Google

Downloading jQuery

There are two versions of jQuery available for downloading: the production version and the development version. The production version is for your live website because it has been minified and compressed. The production version is fast, but virtually incomprehensible to humans. The development version is intended only for testing and development. The development version is uncompressed and consists of human-readable code. But of course, it's slower to load. Both versions can be downloaded from jQuery.com.

The jQuery library is a single JavaScript file, and you reference it with the HTML tag which, in general, should be placed inside the section of your HTML file, such as:

Tip: Place the downloaded file in the same directory as the pages where you wish to use it.

Do you wonder why we do not have to specify the type="text/javascript" inside the tag anymore? In fact, this is no longer required in HTML5. JavaScript is the default scripting language in HTML5 and in all modern browsers!

Alternatives to Downloading

Both Google and Microsoft host jQuery. To use jQuery from Google or Microsoft, use one of the following:

Google CDN:

If you look at the Google URL above you'll see that the version of jQuery is specified in the URL (1.10.2). If you would like to simply use the latest version of jQuery, you can either remove a number from the end of the version string (for example 1.10), then Google will return the latest version available in the 1.10 series (1.10.0, 1.10.1, etc.), or you can take it up to the whole number (1), and Google will return the latest version available in the 1 series (from 1.1.0 to 1.10.2).

Microsoft CDN:

Using a hosted version of jQuery from Google or Microsoft offers some serious advantages to hosting it yourself. Many users will have already downloaded jQuery from Google or Microsoft when visiting a different site. As a result, they won't need to download it again because their browser will already have it stored locally. This leads to faster loading time of your site. Also, most CDN's will make sure that when a user requests a file it will be served from the server closest to them, which may well be closer (and more importantly faster) than your server.

Unless you have a compelling reason to host jQuery yourself, you should use a CDN (Content Delivery Network).

Source Code

You can get all the source code that accompanies this book by visiting http://www.thejoyofjquery.com and joining the mailing list. I'll never spam you, and you can always opt out if you lose interest. Although I haven't done any yet, I do intent to make some youtube videos of the source code in action and I'll update everyone on the mailing list as they come out.

Contacting the Author

I invite you to contact me if you have any book feedback (such as typos or code bugs) or questions. If there's something you just don't get, maybe other people will have the same issue and it means I need to improve that particular section. I take the time to get back to everyone that emails me. I'm at AlanForbes@outlook.com