Introduction

HTML and CSS are awesome technologies, and you can use them to create pages that look amazing. But after you funnel your page to your web server and look at it a few (dozen) times, you may notice a subtle feeling of disappointment creeping in. Why? It can be hard to pin down, but that hint of dismay comes from a stark fact: Your web page just kind of sits there.

Sure, you probably have a link or three to click, but most likely those links just take you to more of your pages that also just kind of sit there. Or maybe a link takes you to another site altogether, one that feels dynamic and alive and interactive. Ah, engagement! Ooh, excitement!

What’s the difference between a page that does nothing and a page that seems to be always dancing? One word: JavaScript. If you want your pages to be dynamic and interactive, you need a bit of behind-the-scenes JavaScript to make it so.

But, I hear you object, HTML isn’t that hard to learn. JavaScript is a programming language, for crying out loud! I hear you. It’s true that anyone can learn HTML as long as they start with the basic tags, examine lots of examples of how they work, and slowly work their way up to more complex pages. It’s just a matter of creating a solid foundation and then building on it.

I’m convinced that JavaScript can be approached in much the same way. I’m certainly not going to tell you that JavaScript is as easy to learn as HTML. That would be a bald-faced lie. However, I will tell you that there is nothing inherently difficult about JavaScript. I believe that if you begin with the basic syntax and rules, study tons of examples to learn how they work, and then slowly build up to more complex scripts, you can learn JavaScript programming. I predict here and now that by the time you finish this book, you’ll even be a little bit amazed at yourself and at what you can do.

About This Book

Welcome, then, to JavaScript Essentials For Dummies. This book gives you a solid education on the standard programming language underlying the World Wide Web. You learn how to set up the tools you need and, given any web pages you have (or someone else has) built with HTML and CSS, you learn how to use JavaScript to program those pages. My goal is to show you that adding a sprinkling of JavaScript magic to a page isn’t hard to learn, and that even the greenest rookie programmer can learn how to create dynamic and interactive web pages that will amaze their family and friends (and themselves).

If you’re looking for lots of programming history, computer science theory, and long-winded explanations of concepts, I’m sorry, but you won’t find it here. My philosophy throughout this book comes from Linus Torvalds, the creator of the Linux operating system: Talk is cheap. Show me the code. I explain what needs to be explained and then I move on without further ado (or, most of the time, without any ado at all) to examples and scripts that do more to illuminate a concept that any verbose explanations I could muster (and believe me, I can muster verbosity with the best of them).

Foolish Assumptions

This book is not a primer on the internet or on using the World Wide Web. This is a book on coding web pages, pure and simple. This means I assume the following:

You know how to operate a basic text editor, and how to get around the operating system and file system on your computer.

You have an internet connection.

You know how to use your web browser.

You know the basics of HTML and CSS.

Yep, that’s it.

Icons Used in This Book

Remember This icon points out juicy tidbits that are likely to be repeatedly useful to you — so please don’t forget them.

Tip Think of these icons as the fodder of advice columns. They offer (hopefully) wise advice or a bit more information about a topic under discussion.

Warning Look out! In this book, you see this icon when I’m trying to help you avoid mistakes that can cost you time, money, or embarrassment.

Where to Go From Here

How you approach this book depends on your current level of coding and/or JavaScript expertise (or lack thereof):

If you’ve never programmed before, begin at the beginning with Chapter 1 and work at your own pace sequentially through Chapters 2, 3, 4, and 5. This will give you all the knowledge you need to pick and choose what you want to learn throughout the rest of the book.

If you’ve done some non-JavaScript programming, start with Chapter 1, skim through Chapters 2 through 5 to see how JavaScript does the standard programming tasks, and then pick and choose your topics from there.

If you’ve done some JavaScript coding already, I suggest working quickly through the material in Chapters 2 through 5, and then diving into the all-important material on the Document Object Model in Chapter 6. From there, you can peruse the rest of the chapters as you see fit.

Chapter 1

JavaScript: The Big Picture

IN THIS CHAPTER

Bullet Getting a feel for programming in general, and JavaScript in particular

Bullet Checking out the tools you need to get coding

Bullet Adding comments to your JavaScript code

Bullet Storing your code in a separate JavaScript file

In this chapter, you explore some useful JavaScript basics. Don’t worry if you’ve never programmed before. I take you through everything you need to know, step-by-step, nice and easy. As you’re about to find out, it really is fun to program.

Adding JavaScript Code to a Web Page

Okay, it’s time to roll up your sleeves, crack your knuckles, and start coding. This section describes the standard procedure for constructing and testing a script and takes you through a couple of examples.

The

The basic container for a script is, naturally enough, the HTML end tag:

JavaScript statements go here

Where do you put the

With certain exceptions, it doesn’t matter a great deal where you put your

en>

        utf-8>

       

JavaScript statements go here

Here are the exceptions to the put-your-script-anywhere technique:

If your script is designed to write data to the page, the

If your script refers to an item on the page (such as a form object), the script must be placed after that item.

With many HTML tags, you can add one or more JavaScript statements as attributes directly within the tag.

Remember It’s perfectly acceptable to insert multiple end tag, and as long as you don’t put one

Example #1: Displaying a message to the user

You’re now ready to construct and try out your first script. This example shows you the simplest of all JavaScript actions: displaying a basic message to the user. The following code shows the script within an HTML file:

en>

        utf-8>

       

            alert(Hello JavaScript World!);

As shown in here, place the script within the header of a page, save the file, and then open the HTML file within your browser.

This script consists of just a single line:

alert(Hello JavaScript World!);

This is called a statement, and each statement is designed to perform a single JavaScript task. Your scripts will range from simple programs with just a few statements to huge projects consisting of hundreds of statements.

You may be wondering about the semicolon (;) that appears at the end of the statement. Good eye. You use the semicolon to mark the end of each of your JavaScript statements.

In the example, the statement runs the JavaScript alert() method, which displays to the user whatever message is enclosed within the parentheses (which could be a welcome message, an announcement of new features on your site, an advertisement for a promotion, and so on). Figure 1-1 shows the message that appears when you open the file.

FIGURE 1-1: This alert message appears when you open the HTML file containing the example script.

How did the browser know to run the JavaScript statement? When a browser processes (parses, in the vernacular) a page, it basically starts at the beginning of the HTML file and works its way down, one line at a time. If it trips over a function, which I explain in Chapter 5.

Warning One of the cardinal rules of JavaScript programming is one statement, one line. That is, each statement must appear on only a single line, and there should be no more than one statement on each line. I said should in the second part of the previous sentence because it is possible to put multiple statements on a single line, as long as you separate each statement with a semicolon (;). There are rare times when it’s necessary to have two or more statements on one line, but you should avoid it for the bulk of your programming because multiple-statement lines are difficult to read and to troubleshoot.

Example #2: Writing text to the page

One of JavaScript’s most powerful features is the capability to write text and even HTML tags and CSS rules to the web page on-the-fly. That is, the text (or whatever) gets inserted into the page when a web browser loads the page. What good is that? For one thing, it’s ideal for time-sensitive data. For example, you may want to display the date and time that a web page was last modified so that visitors know how old (or new) the page is. Here’s some code that shows just such a script:

en>

        utf-8>

       

        This is a regular line of text.

            document.write(Last modified: + document.lastModified)