Adding JavaScript and jQuery to a page

See more about:

This lesson’s goals

In this lesson, you’ll learn how to:

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

JavaScript and browsers

In the previous lesson, you learned that your Web browser runs JavaScript code. That is, your browser does what the JavaScript instructions say.

Your browser needs to get the programs from somewhere. It gets programs in two ways:

  • Programs are put directly into Web page.
  • Programs are in separate files. Web pages load the files they want.

Let’s talk about each option.

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.

There’s one line of JavaScript, in line 7. The alert statement shows a message to the user.

Renata
Renata

What about lines 6 and 8? They look like HTML, with the < and >.

Kieran
Kieran

You’re right, they are HTML. The <script> tag tells the browser that it’s about the get some program code. If you put code on a page, you must use the <script> tag.

CC
CC

What about type="text/javascript"? Does that need to be there?

Kieran
Kieran

Yes, always include it. Some browsers can understand more than one programming language. The type attribute tells the browser what language to expect.

Your program will usually still work if you omit the type, but put it in anyway, so there is never any confusion.

In Figure 1, I put the script into the <head>. It doesn’t have to go into the <head>, but it’s common.

Renata
Renata

When I tried the page in Figure 1, the message box showed before any content. Like this:

Alert

Only after I clicked the OK button, did any content show.

After alert

Is that normal?

Kieran
Kieran

Yes, that’s what the browser should do. The alert() was in the HTML file (Figure 1) before any content. So it ran before any of the content showed.

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 6 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 that file into many different pages – is used a lot. It significantly reduces the cost of changing a site.

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 this to your pages that use JavaScript:

<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. This line downloads version 1.3.2. You can include a newer version, if you prefer.

One of the real pains of JS was that you would have to write different versions of your code for different browsers. What would work in Firefox, Chrome, and Safari would not work in Internet Explorer.

jQuery makes that problem go away. Write your code once, and jQuery will make it run everywhere. It also does animations and other cool things.

What now?

Let’s see how you write simple programs.


How to...

Lessons

User login

Log in problems? Try here


Dogs