Lesson 4

Return to Web Design Home Page

This semester, you have learned to create some great-looking Web pages using nothing but HTML. HTML is definitely a powerful programming language, and as you have learned, you can do a lot with it. However, if you want to make your Web pages even more exciting and interactive, you may want to learn some other Web programming languages. A variety of neat languages are out there, but a good one to start with is JavaScript. This week, we will learn a little bit about JavaScript, and we will learn 5 ways that you can use JavaScript to enhance your Web pages.

What is JavaScript?

JavaScript is a programming language developed by the good people at Netscape (the same folks who created Netscape Navigator). This programming language can be used to enhance your Web pages. There are a few reasons why JavaScript is such a neat language, and why it is a great Web programming language to start with:

• Compared to many other Web programming languages, it is easy to learn.
• To use JavaScript, you simply type JavaScript code into your Web pages. You do not need any fancy software or equipment to use JavaScript.
• JavaScript is compatible with most Web browsers, including Microsoft Internet Explorer and Mozilla Firefox.

Important Note: Sometimes JavaScript works better in one browser than another. In this introductory lesson, f you try some JavaScript code, and it doesn't seem to be working right in one browser, try the other one to see if you get better results.

Another important thing to know about JavaScript is that it is case sensitive. When we learned about HTML tags, and you wanted to make some text bold, you learned the the tag <B> worked exactly the same as the tag <b>. That's because HTML does not differentiate between uppercase and lowercase characters. JavaScript is a different story. When you use JavaScript, you must pay very close attention to your uppercase and lowercase letters. If you make one little mistake, in most cases, your program will not work properly. Don't worry, I will guide you step-by-step through this lesson. Just know that you will have to pay extra attention to capitalization.

There are entire books and college courses dedicated to learning JavaScript. It is a powerful language that you can use to turn good Web pages into incredible Web pages. This lesson is only a short introduction. We will learn 5 ways to use JavaScript to improve your Web pages. If you enjoy this lesson, I encourage you to learn more about JavaScript. The Web site HTML Goodies contains excellent tutorials on JavaScript for beginners. You will also find a wide selection of good introductory books about JavaScript at your local bookstore.

Let's begin with some simple ways you can use JavaScript right now.

Creating Links without Underlined Text

Let's say you wanted to create a list of 5 links to some of your favorite Web sites. Your list might look like this (Note: These links are not active):

• MTV
• ESPN
• Amazon
• Google

Sometimes looking at all of that underlined text can make the page look cluttered or unattractive. Wouldn't it be great if there was a way to get rid of the underlined text? With JavaScript, there is! Look at these same links. See the difference?

• MTV
• ESPN
• Amazon
• Google

Here's how you do it. Here is an example of HTML code for a "normal" link:

<A HREF="http://www.google.com">Google</A>

And here is the same link set up so that the text is not underlined:

<A HREF="http://www.google.com" STYLE="text-decoration: none">Google</A>

See the difference? All you do is add the text STYLE="text-decoration: none". Believe it or not, this is an example of JavaScript. Sometimes to use JavaScript, all you do is add code inside existing HTML tags, just like this one. Let's look at another useful example of JavaScript.

Opening a New Window

This example of JavaScript is very useful. The downside of setting up a "normal link" to another Web page is that by clicking the hyperlink, you leave your existing page. Wouldn't it be great if you could click a hyperlink, and open up a second window? With JavaScript, you can! Click this link below to see what happens.

Click here to go to the Google Web site

Pretty cool, huh? This is a little more complicated than the last example, but I think you'll be able to understand this JavaScript code. Here is HTML code for a normal hyperlink to Google:

<A HREF="http://www.google.com">Click here to go to the Google Web site</A>

And here is HTML and JavaScript code to open up a second window containing the Google Web site:

<A HREF="lesson15.html" onClick="window.open('http://www.google.com','google')">Click here to go to the Google Web site</A>

OK, here is what is going on.

• Notice that the HREF command contains the URL for the page that we are currently on. I want the current page to stay open, so that is why this URL is there.
• The onClick command is a JavaScript command. It tells the browser what to do when the hyperlink is clicked with your mouse.
• The window.open code tells your browser to open a new window. I bet you figured that part out on your own.
• Inside the parentheses, there are two parts. First, there is the URL of the new window that I want to open (in this case, the URL for Google). Second, I gave this new window a name of my own. I could call it anything I want to, but "google" seemed like a good idea, so that is what I chose.

That's it. Remember that JavaScript is case sensitive, so you need to capitalize this tag exactly like I did above. Also remember that you need to place your " and ' symbols like the command above. In short, be careful when entering your JavaScript code.

So, can you combine the two bits of JavaScript code that we learned above? That is, can you create a link that is not underlined AND opens a second window? Sure! Here is a link that does just that. Go ahead, try it:

Click here to go to the Google Web site

And here is the code that produced that link:

<A HREF="lesson15.html" onClick="window.open('http://www.google.com','google')" STYLE="text-decoration: none">Click here to go to the Google Web site</A>

It's simply the two bits of JavaScript that we have already learned put together.

Page 2