Time for action – downloading and attaching jQuery
Earlier, I described the three layers of an HTML document: content, presentation, and behavior. Let's take a look at how to set up our files in these three layers, as follows:
- First, let's set up a folder on your hard drive to hold all of your work as you work through the lessons in this book. Find a good place on your hard drive and create a folder called
jQueryForDesigners. - Create a folder called
imagesin thejQueryForDesignersfolder to hold any images we'll use. - Next, create a folder called
styles. We'll use this folder to hold any CSS files we create. Inside thestylesfolder, create an empty CSS file calledstyles.css.The styles represent our presentation layer. We'll keep all of our styles in this file to keep them separate.
Tip
There is a standard CSS style sheet that we'll start with for each exercise in this book, which applies some basic colors and typography. You'll find the CSS code that should be included with all examples in the sample code for the book.
- Next, create a folder called
scriptsto hold our JavaScript and jQuery code. Inside thescriptsfolder, create an empty JavaScript file calledscripts.js.The JavaScript we write here represents our behavior layer. We'll keep all of our JavaScript in this folder to keep it separate from the other layers.
- Now, inside the
jQueryForDesignersfolder, create a new HTML page—very basic with the following code:<!DOCTYPE html> <html> <head> <title>Practice Page</title> </head> <body> <!-- Our content will go here --> </body> </html>Save this file as
index.html. The HTML file is our content layer and is arguably the most important layer, as it's likely to be the reason site visitors are coming to our website at all. - Next, we'll attach the CSS and JavaScript files that we created to our HTML page. In the head section, add a line of code to include the CSS file, as follows:
<head> <title>Practice Page</title> <link rel="stylesheet" href="styles/styles.css"/> </head>
Then, head down to the bottom of the HTML file, just before the closing
</body>tag, and include the JavaScript file as follows:<script src="scripts/scripts.js"></script> </body> </html>
As these files are just empty placeholders, attaching them to your HTML page won't have any effect. However, now, we have a place to write our CSS code and JavaScript that will come handy when we're ready to dive into an exercise.
Note
It's perfectly fine to self-close a
<link>element, but a<script>element always needs a separate closing</script>tag. Without it, your JavaScript won't work.The following screenshot is what my folder looks like at this point:
- Now, we have to include jQuery in our page. Head over to http://jquery.com and hit the Download jQuery button.
This will take you to the Download page where you'll see that you've got quite a few options to download jQuery these days.
Note
As of April 2013, you officially have two versions of jQuery to choose from. In developer speak, these versions are called branches. To easily understand which branch you should use, keep this rule in mind. The 2.x branch of jQuery no longer has support for Internet Explorer (IE) 6, 7, or 8. If you're working on a project that will need to work in these older versions of IE, then you'll need to work with the 1.x branch of jQuery. If you don't need to support these older versions of IE, then you can choose to work with the 2.x branch. All the code files in this book will use the 2.x branch, since my philosophy with web development is to look forward, not back. However, all of the code samples will work fine with either the 1.x branch or the 2.x branch of jQuery.
Note that the jQuery team will be discontinuing support for IE6 and IE7, even in the 1.x branch, with the jQuery 1.12 release in 2014.
On the Download page, in the section for your selected branch, you'll see several files available for download: a compressed version and an uncompressed version, a map file, and release notes. The only file we need to be concerned with is the compressed, production version.
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
- Clicking on the link for the compressed, production version of your selected branch of jQuery will open the production jQuery file in your browser window, and it looks a bit scary, as shown in the following screenshot:
- Don't worry, you don't have to read it and you definitely don't have to understand it. Just go to your browser's File menu and choose Save Page As... or right-click on the page and select Save As.... Then, save the file to your hard drive, inside the
scriptsfolder we created. By default, the script will have the version number in the filename. I'm going to go ahead and rename the file tojquery.jsto keep things simple. - Now, we just have to include our jQuery script in our page—just like we included our empty JavaScript file. Go to the bottom of your practice HTML file, just before the
<script>tag we created earlier, and add a line to include jQuery, as follows:<script src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/scripts.js"></script> </body> </html>
You won't notice any changes to your HTML page; jQuery doesn't do anything on its own. It just makes its magic available for you to use.
What just happened?
We learned how to set up our files and folders to work through the practice exercises in this book. We also learned how to select and download the correction version of jQuery and get it attached to our HTML page. Now we're all set to start coding pages and adding jQuery magic to them.
Pop quiz – setting up a new project
Q1. Which of the following is the content layer of a project?
- HTML
- CSS
- JavaScript
