SE Using JavaScript

Special Edition Using JavaScript

Chapter 1 — An Overview of JavaScript

In This Chapter:

JavaScript: Controlling the Machine

What Is a Programming Language?

Is JavaScript Hard to Learn?

What Can You Do with JavaScript?

What Can't You Do with JavaScript?

Cross-Browser Concerns

JavaScript: Controlling the Machine

When a Web browser is confronted with an HTML file, it goes through a simple but tedious process: it reads the file one line at a time, starting from (usually) the <html> tag at the top and finishing with the </html> tag at the bottom. Along the way, it might have to break out of this line-by-line monotony to perform some action based on what it has read. For example, if it stumbles over the <img> tag, the browser will immediately ask the Web server to ship out a copy of the graphics file specified in the src attribute.

The point here is that, at its core, a Web browser is really just a page-reading machine that doesn't know how to do much of anything else besides follow the instructions (the markup) in an HTML file. (For my own convenience, I'm ignoring the browser's other capabilities, such as saving favorites or bookmarks.)

One of the reasons that I think many people get instantly hooked on creating Web pages is that they quickly realize they have control over this page-reading machine. Slap some text between a <b> tag and its corresponding </b> end tag and the browser dutifully displays the text as bold. Create a <table> structure and the browser displays your formerly haphazard text in nice, neat rows and columns, no questions asked. In other words, instead of just viewing pages from the outside, you now have a key to get inside the machine and start working its controls. That is the hook that grabs people and gets them seriously interested in Web page design.

Imagine if you could take this idea of controlling the page-reading machine to the next level. Imagine if, instead of ordering the machine to process mere tags and text, you could issue much more sophisticated orders that could actually control the inner workings of the page-reading machine. Who wouldn't want that?

Well, that's the premise behind JavaScript. It's essentially just a collection of commands that you can wield to control the browser. Like HTML tags, JavaScript commands are inserted directly into the Web page file. When the browser does its line-by-line reading of the file and it comes across a JavaScript command, it executes that command, just like that.

However, the key here is that the amount of control JavaScript gives you over the page-reading machine is much greater than what you get with HTML tags. The reason is that JavaScript is a full-fledged programming language. The "L" in HTML might stand for "language," but there isn't even the tiniest hint of a programming language associated with HTML. JavaScript, though, is the real programming McCoy.

What Is a Programming Language?

So what does it mean to call something a "programming language"? To understand this term, you need look no further than the language you use to speak and write. At its most fundamental level, human language is composed of two things—words and rules:

The words are groupings of letters that have a common meaning among all the people who speak the same language. For example, the word "book" denotes a particular type of object and the word "read" denotes a particular type of action.
The rules are the ways in which words can be combined so as to create coherent and understandable concepts. If you want to be understood by other speakers of the language, then you have only a limited number of ways to throw two or more words together. "I read a book" is an instantly comprehensible sentence, but "book a I read" is gibberish.

The key goal of human language is being understood by someone else who is listening to you or reading something you wrote. If you use the proper words to refer to things and actions, and if you combine words according to the rules, then the other person will understand you.

A programming language works in more or less the same way. That is, it, too, has words and rules:

The words are a set of terms that refer to the specific things that your program works with (such as a browser window) or the specific ways in which those things can be manipulated (such as opening a browser window). They're known as reserved words or keywords.
The rules are the ways that the words can be combined so as to produce the desired effect. In the programming world, these rules are known as the language's syntax.

In JavaScript, many of the words you work with are very straightforward. There are some that refer to aspects of the browser, others that refer to parts of the Web page, and some that are used internally by JavaScript. For example, in JavaScript the word window refers to the browser window as a whole. Similarly, the word open() refers to a specific type of action (opening something).

The crucial concept here is that just as the fundamental purpose of human language is to be understood by another person, the fundamental purpose of a programming language is to be understood by whatever machine is processing the language. With JavaScript, that machine is the page-reading machine, the Web browser.

You can make yourself understood by the page-reading machine by using the proper JavaScript words and by combining them using the proper JavaScript syntax. For example, JavaScript's syntax rules tell you that you can combine the words window and open() like so: window.open(). If you use open().window or window open or any other combination, the page-reading machine won't understand you.

The key, however, is that being "understood" by the page-reading machine really means being able to control the machine. That is, your JavaScript "sentences" are actually commands that you want the machine to carry out. For example, if you want to open a new browser window using JavaScript, you insert the following command inside your Web page:

window.open()

When the page-reading machine trudges through the HTML file and it comes upon this statement, it will go right ahead and open up a new browser window. (Actually, there are some extra things that need to go along with the command for it to work properly. I tell you about them in Chapter 2, "Creating Your First Scripts.")

Is JavaScript Hard to Learn?

I think there's a second reason why many folks get jazzed about creating Web pages: it's not that hard. HTML sounds like it's a hard thing, and certainly if you look at the source code of a typical Web page without knowing anything about HTML, the code appears about as intimidating as anything you can imagine.

However, I've found that anyone can learn HTML as long as they start with the basic tags, see 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. Using our language analogy, it just has a few more words to know and a few more rules to learn. But I believe that if you begin with the basic words and rules, see lots of examples of how they work, and then slowly build up to more complex scripts, that you can learn JavaScript programming. By the time you finish this book, I predict here and now that you'll even be a little bit amazed at yourself and at what you can do.

What Can You Do with JavaScript?

The readers of my book on creating Web pages are a friendly bunch who enjoy writing to me to tell me how their pages are coming along. In many cases, they tell me they've hit the Web page equivalent of a roadblock. That is, there's a certain thing they want to do, but they don't know how to do it in HTML. So I end up getting lots of questions like these:

How do I display one of those pop-up boxes?

How do I figure out which browser a surfer is using?

How can I get a message to scroll along the status bar?

How can I make an image change when the mouse is over it?

How can I calculate the total for my order form?

For each question, the start of the answer is always this: "Sorry, but you can't do that using HTML; you have to use JavaScript, instead." I then supply them with a bit of code that they can "cut and paste" into their Web pages and then get on with their lives.

If you're just getting started with JavaScript, then my goal in this book is to help you to move from "cut-and-paste" to "code-and-load." That is, I hope you'll end up being able to create your own scripts to solve your own unique HTML and Web page problems. I hope to show you that learning JavaScript is worthwhile because there are many other things you can do with it:

You can display the user's current date and time, create animated "clocks," determine a person's age, and perform many other date-related actions.
You can calculate loan and mortgage payments and other financial data.
You can determine not only the name of the user's browser, but also its version number and the operating system it's running on.
You can work with extra browser windows, which means you can open them, resize them, close them, and even change their content at will.
You can send the user's browser to another page.
You can set up a password-protected page.
You can create a navigation "tree" that makes it easy for users to traverse the pages of your site.
You can validate the values in a form before submitting it to the server. For example, you can make sure that certain fields are filled in.
You can create a "shopping cart" that stores the items a user has selected for purchasing.
You can create sophisticated animations such as making text scroll across the screen or setting up an image slide show complete with transition effects.

In this book you'll learn how to do all of these things and many more.

What Can't You Do with JavaScript?

JavaScript is good, but it's not that good. JavaScript can do many things, but there's a long list of things that it simply can't do. Here's a sampling:

You can't write data permanently to a file. For example, you can't take the data from a guest book and add it to a page that displays the messages.
You can't access files on the server.
You can't access files on the user's computer (except for a special file called a cookie; see Chapter 25, "Creating and Using Cookies").
You can't glean any information about the user, including her email address or IP address.
You can't submit credit card-based purchases for authorization and payment.
You can't create multiplayer games.
You can't get data from a server database.
You can't handle file uploads.

There are versions of JavaScript that run on the server and that can do some of these things, but I don't discuss them in this book. Instead, this is a book about what's known as client-side JavaScript, which means JavaScript that runs on the user's browser (which programming types like to call a client). Not to worry, though: there are so many things that client-side JavaScript can do that you'll have no trouble being as busy as you want to be.

Cross-Browser Concerns

I mentioned earlier that your goal as a JavaScript programmer is to structure the language's words and rules in such a way that the browser's page-reading machine understands and carries out your commands. That sounds like a straightforward idea, but there's a pretty big fly in the JavaScript ointment: browser compatibility. As you probably know from your HTML coding—or, even more so, from your style sheet coding—there are three problems that crop up constantly:

Browsers from different companies render HTML or style sheet codes in different ways.
Browsers from different companies don't support the same set of tags and styles. Some browsers have their own proprietary tags (such as Internet Explorer's <marquee> tag and Netscape's <layer> tag) and some browsers lack support for tags and styles that are considered to be standard.
Older browsers (including older versions of browsers from the same company) don't support all of the features found in newer browsers.

Unfortunately for your career as a JavaScript programmer, all of these problems also apply to the JavaScript language. The JavaScript words, and to a lesser extent the rules, understood by the page-reading machine are slightly different from one browser (and one browser version) to the next. The good news is that these differences aren't major, so most of your code will run fine in most browsers. However, it's important that you never assume that just because a script is working in one browser that it will automatically work in all browsers. In the same way that a good Web page designer checks out his pages in different browsers and browser versions, so should you run your scripts in as many different browsers as you possibly can. I'll talk more about this in the next chapter.

Return to Special Edition Using JavaScript home page