Earlier, I described the three layers of an HTML document — content, presentation, and behavior. Let's take a look at how we can set up our files for these three layers:
- 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. - Inside the folder, create a folder called
styles. We'll use this folder to hold any CSS 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. Likewise, create a folder called
imagesto hold any images we'll use. - 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 file to keep it separate from the other layers.
- Now, inside the
jQueryForDesignersfolder, create a new HTML page very basic as follows:<!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 arguably the most important layer; as it's likely the reason site visitors are coming to our website at all. - Next, we'll attach the CSS and JavaScript files that we made to our HTML page. In the head section, add a line to include the CSS file:
<head> <title>Practice Page</title> <link rel="stylesheet" href="styles/styles.css"/> </head>And then head down to the bottom of the HTML file, just before the closing
</body>tag and include the JavaScript file:<script src="scripts/scripts.js"></scripts> </body> </html>As these files are just empty placeholders, attaching them to your HTML page won't have any effect. But now we have a handy place to write our CSS and JavaScript when we're ready to dive into an exercise.
Note
Note that 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.- Here's 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:
You'll notice you have two options under Choose Your Compression Level. You'll always want to check the Production checkbox. This is the version that's ready to use on a website. The Development version is for experienced JavaScript developers who want to edit the source code of the jQuery library.
- Clicking on the Download button will open the production jQuery file in your browser window, and it looks a little bit scary, as follows:
- 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 and then save the file to your hard drive, inside the
scriptsfolder we created. By default, the script will have the version number in the file name. 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:<script src="scripts/jquery.js"></script> <script 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.