Home » ClientCore: Pages in browsers » A Web page that interacts

Adding JavaScript and jQuery to a page

See more about:
Table of Contents
  1. This page’s goals
  2. On-page code
  3. Including a file
  4. Including the jQuery library
  5. What now?

This page’s goals

On this page, you’ll learn how to:

  • Add code directly on a page.
  • Add code from an external file.
  • Add the jQuery library.

On-page code

The easiest way to add JS code is to put it directly into a page, like this:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Welcome</title>
    <script type="text/javascript">
      alert('Your dog loves you.');
    </script>
  </head>
  <body>
    <h1>Welcome</h1>
    
    <p>Welcome to the Web site of truth and beauty.</p>
  </body>
</html>

Figure 1. On-page JS

You can try the page

The script doesn’t have to go into the head, but it’s common. Some Webers place their code at the very end of their pages.

The JS – the one alert() – runs before the page has finished loading. This isn’t usually what we want, as we’ll see later.

Including a file

What if you want to include the same JS code on many pages? You can put the code into an external file, and then tell each page to load it.

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Welcome</title>
    <script type="text/javascript" src="alert.js"></script>
  </head>
  <body>
    <h1>Welcome</h1>
    
    <p>Welcome to the Web site of truth and beauty.</p>
  </body>
</html>

Figure 2. Including a JS file

Line 7 loads an external file. Here’s the content of the file alert.js.

alert('Your dog loves you.');

Figure 3. The JS file

If you need to change the code – maybe show a different message – then you change the one file alert.js. Every page that includes the file will be changed.

This pattern – putting stuff in a separate file and loading it where needed – is used a lot by Webers. It significantly reduces the cost of changing a site.

This is an example of how Webers think about their work processes. Employers want to get the most for every dollar they pay their Webers. A Weber who uses external files can get more business tasks done in a day. S/he is a more desirable employee than one who doesn’t use external files, and therefore takes longer to make the same change to a Web site.

If you were an employer, who would you hire? Who would you promote? Who would you give the biggest raise to? Someone who could make a particular change to a Web site in 10 minutes? Or someone who took 10 hours to make the same change?

Exercise: Change the message

Change the alert() message to “Be kind to your dog.” Upload your solution to your server, and paste the URL below.

(Log in to enter your solution to this exercise.)

Exercise: Add a message

Add a second alert() message, like “Play with your dog.” Upload your solution to your server, and paste the URL below.

Hint: Copy-and-paste the alert(...); line.

(Log in to enter your solution to this exercise.)

Including the jQuery library

JS can be a pain to write. To make it easier, we’re going to use the way cool jQuery library.

Add the following to each of your pages:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Figure 4. Including jQuery

This will download jQuery from one of Google’s servers. Easier than putting it on your own servers.

Easy is good!

What now?

Let’s see how you write simple programs.


Lessons

User login


Dogs