jQuery and JavaScript Phrasebook (2014)

1. Jumping into jQuery, JavaScript, and the World of Dynamic Web Development

JavaScript and its amped-up counterpart jQuery have completely changed the game when it comes to creating rich interactive web pages and web-based applications. JavaScript has long been a critical component for creating dynamic web pages. Now, with the advancements in the jQuery, jQuery UI, and jQuery Mobile libraries, dynamic web development has changed forever.

This chapter focuses on providing you with some concepts of dynamic web programming and getting set up to use JavaScript and jQuery in your web pages.

Understanding JavaScript

JavaScript is a programming language much like any other. What separates JavaScript from other programming languages is that the browser has a built-in interpreter that can parse and execute the language. That means you can write complex applications running in the browser that have direct access to the browser, web page elements, and the web server.

This allows JavaScript code to dynamically add, modify, or remove elements from a web page without reloading it. Access to the browser gives you access to events such as mouse movements and clicks. This is what enables JavaScript to provide functionality such as dynamic lists as well as drag and drop. Figure 1.1 shows an example of downloading a web page from a server and then using JavaScript code to dynamically populate a <ul> element with <li> children.

Figure 1.1 JavaScript runs in the browser and can change the HTML elements on the web page without needing to retrieve additional pages from the web server.

Adding JavaScript to an HTML Document

<head>
<script type="text/javascript">
alert("JavaScript is Enabled!");
</script>
</head>

You can add JavaScript to an HTML document using HTML <script> tags. When the browser encounters a <script> tag, it parses the contents and then executes the JavaScript inside. Typically, the <script> tags are added to the <head> element, but you can also add them to the<body> element.

The web browsers currently default all scripts to javascript; however, it is a good idea to still set the type to "text/javascript" for future compatibility if that changes.

Watch out!

The order that <script> tags appear in the HTML document determines their load order. If you are loading multiple scripts, keep in mind that using the same variable and function names in subsequent scripts overwrites the ones already defined in previous ones.

Loading JavaScript from External Files

<head>
<script type="text/javascript"
src="scripts/scriptA.js"></script>
<script type="text/javascript"
src="scripts/scriptB.js"></script>
</head>

As you create more and more complex JavaScript web applications, you will find that adding the JavaScript to your HTML files doesn’t make much sense. The files become too big, and you will often want to reuse the scripts in other web pages.

Instead of including the JavaScript inside the <script> tag, you can specify a src location for the script to be loaded from. When the browser encounters a src attribute in the <script> tag, it downloads the script from the server and loads it into memory.

Watch out!

The browser downloads the external scripts asynchronously. That means you need to be careful if you reference one script from another because the second script may not be downloaded yet.

Introducing jQuery

jQuery is a library that is built on JavaScript. The underlying code is actually JavaScript; however, jQuery simplifies a lot of the JavaScript code into simple-to-use functionality. The two main advantages to using jQuery are selectors and built-in functions.

Selectors provide quick access to specific elements on the web page, such as list and tables. Selectors also provide access to groups of elements, such as all paragraphs, or all paragraphs of a certain class. This allows you to quickly and easily access specific Document Object Model (DOM) elements.

jQuery also provides a rich set of built-in functionality that makes it easy to do a lot more with a lot less code. For example, tasks such as hiding an element on the screen or animating the resize of an element take just one line of code.

Loading jQuery in Your Web Pages

<head>
<script src="local/jquery-2.0.3.min.js"></script>
. . . or . . .
<script src=
"http://code.jquery.com/jquery-2.0.3.min.js">
</script>
</head>

The jQuery library is just a .js file. You can load it just like any other JavaScript file. There are two ways to add jQuery to your web page.

The easiest method of adding jQuery to web pages is to use one of the several Content Discovery Network locations, or CDNs. A CDN allows you to load the libraries from a network of jQuery hosting servers spread globally. The benefit of this method is that the servers are spread globally so the downloads are distributed to multiple servers. Also, if the user has loaded another web page with a link to the CDN file, it may already have the jQuery library cached. The following are some examples of hosting CDNs:

//jQuery
<script src=
"http://code.jquery.com/jquery-2.0.3.min.js">
</script>
<script src=
"http://code.jquery.com/jquery-migrate-1.1.0.min.js">
</script>
//google
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>
//Microsoft
<script src=
"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js">
</script>

The other option is to download the .js file from http://jquery.com/download and load it with your other JavaScript libraries. This has the advantage of being more closely tied to your site’s content so you don’t have to worry about possible unavailability issues or site-blocking issues with the external locations.

Accessing jQuery in Your JavaScript

jQuery("#myElement")
. . . or . . .
$("#myElement")

jQuery is accessed using the jQuery object that is defined when the library is loaded. jQuery also provides a shortcut $ character that you can use in the phrases throughout the book. For example, the following two jQuery statements are identical:

jQuery("#myElement")
$("#myElement")

Introducing jQuery UI

jQuery UI is an additional library built on top of jQuery. The purpose of jQuery UI is to provide a set of extensible interactions, effects, widgets, and themes that make it easier to incorporate professional UI elements in your web pages.

jQuery UI is made up of two parts: JavaScript and Cascading Style Sheets (CSS). The JavaScript portion of jQuery UI extends jQuery to add additional functionality specific to adding UI elements or applying effects to those elements. The CSS portion of jQuery UI styles the page elements so that developers don’t need to style the elements every time.

jQuery UI saves developers time by providing pre-built UI elements, such as calendars and menus, with interactions, such as dragging and resizing, right out of the box.

Getting the jQuery UI Library

To get started with jQuery UI, you need to download the library and add it to your web pages. You can download the jQuery library from http://jqueryui.com/download/ by selecting the options that you would like to include and clicking on the Download button at the bottom. This downloads the jQuery UI files.

When you download the jQuery UI library, you get a zip file. Inside that file are three main folders that you need to understand. They are

js—This is the folder that contains the jQuery UI and jQuery libraries files. You need to deploy these files so you can load them in your web pages.

css—This contains the theme-named folders that house the .css files and an images folder used by the jQuery UI library. The .css file and images/ folder need to be placed in the same location and accessible from your web pages.

development-bundle—This folder contains the full source for jQuery UI. If you are not planning to modify the jQuery UI code, you can ignore this folder.

Loading jQuery UI

<head>
<link rel="stylesheet" type="text/css"
href="local/jquery-ui-1.10.3.css">
<script src="local/jquery-2.0.3.min.js"></script>
<script src="local/jquery-ui-1.10.3.min.js"></script>
. . . or for CDN. . .
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/ui/1.10.3/themes/base/jquery-ui.css">
<script src=
"http://code.jquery.com/jquery-2.0.3.min.js">
</script>
<script src=
"http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>

</head>

To load jQuery UI, you first need to load the jQuery library. The jQuery UI is also a .js file. You can load it just like any other JavaScript file. Also, just like jQuery, you can load the script from an external CDN source or download the library and load it locally.

You also need to load the jQuery UI .css file using a <link> tag. This can be a local file or an external CDN location. For example:

Introducing jQuery Mobile

Mobile devices are the fastest growing development platform. Much of that development is geared toward making web sites mobile friendly. It is much easier to implement and maintain a mobile web site than it is to maintain a mobile application.

jQuery mobile is an additional library built on top of jQuery. It is designed to streamline many of the necessary structural, UI, and event implementations to build mobile web sites. jQuery Mobile provides several advantages with developing mobile solutions, including

Hiding some of the complexities of resizing page elements to a wide array of mobile devices.

Providing simple UI components with mobile event interactions already built into them.

Building on JavaScript and jQuery provides a common and well developed platform that is based on proven concepts.

Developing a mobile web apps is simple to do and does not require any installation of the user’s part. That is why they are becoming more and more popular.

Getting the jQuery Mobile Library

To get started with jQuery Mobile, you need to download the library and add it to your web pages. You can download the jQuery library from http://jquerymobile.com/download/. You can also download jQuery Mobile from http://jquerymobile.com/download-builder/ by selecting the version and options that you would like to include and clicking on the Download button at the bottom. This downloads a zip file containing the jQuery Mobile library.

Watch out!

The .css files and the images folder that are included with the jQuery Mobile library come as a set. You need to make sure they are installed in the same location and you don’t mix and match them from different custom downloads.

When you download the jQuery Mobile library, you get a zip. Inside the zip file are three main components that you need to put where your mobile web pages can load them. They are

js files—There will be a jquery.moble.###.js as well as a minified version. This is the main library file, and one of these needs to be placed where you can add it to your project files in a <script> tag.

css files—There will be jquery.mobile.###.css, jquery.mobile.###.structure.css, and jquery.mobile.###.theme.css files as well as their minified forms. This is all the styling code and should be placed in the same location as thejquery.moble.###.js file.

images folder—This folder contains the images and icons used by jQuery Mobile to style the elements. This should also be placed in the same location as the jquery.moble.###.js file.

Loading jQuery Mobile

<head>
<link rel="stylesheet"
href="local/jquery.mobile-custom.min.css" />
<script src="local/jquery-2.0.3.min.js"></script>
<script src="local/jquery.mobile-custom.min.js"></script>
. . . or for CDN . . .
<link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src=
"http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src=
"http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js">
</script>
</head>

Similar to what you did for jQuery UI, you need to load jQuery before loading jQuery Mobile. Once jQuery is loaded, you can load the jQuery Mobile .js file from an external CDN source or a locally downloaded version of the library.

You need to load the jQuery Mobile .css file as well using a <link> tag. For example, the following code loads the jQuery library first because it is required by jQuery Mobile and then loads the jQuery Mobile JS and CSS files:

Configuring Browser Development Tools

An important aspect of developing JavaScript and jQuery is using the web development tools incorporated in web browsers. These tools allow you to see the script files loaded, set breakpoints, step through code, and much, much more. It is beyond the scope of this book to delve too much into the browser tools. However, I wanted to provide you with the steps to enable them and encourage you to learn about them if you have not already done so.

Installing Firebug on Firefox

Use the following steps to enable JavaScript debugging on Firefox:

1. Open Firefox.

2. Select Tools > Add-Ons from the main menu.

3. Type Firebug in the search box in the top right to search for Firebug. Then click the Install button to install it.

4. Type FireQuery in the search box in the top right to search for FireQuery. Then click the Install button to install it. FireQuery extends Firebug to also support jQuery.

5. When you reload Firefox, click on the Firebug button to display the Firebug console.

Enabling Developer Tools in Internet Explorer

Use the following steps to enable JavaScript debugging on Internet Explorer:

1. Open IE.

2. Click on the Settings button and select Developer Tools from the drop-down menu. Or you can press the F12 key.

3. The Developer console is displayed.

Enabling the JavaScript Console in Chrome

Use the following steps to enable JavaScript debugging in Chrome:

1. Open Chrome.

2. Click on the Settings button and select Tools > Developer Tools from the drop-down menu. Or you can press Ctrl+Shift+J on PCs or Cmd+Shift+J on Macs.

3. The JavaScript console is displayed.