JavaScript has grown steadily in both popularity and capability since its inception and is now the number one browser scripting language. The technology has two key strengths: cross-browser support, and the ease with which it can be programmed. So successful has the JavaScript technology become that it's no longer used for browser-based programming alone, but also for programming PDF files and web server programming.
While the JavaScript language has been growing in capability, browsers themselves have also become much more programmable, enabling developers to access more of the page and its HTML elements. So JavaScript browser programming can now be extremely sophisticated and functional.
Consequently, a book about JavaScript might cover all sorts of things, so we've narrowed down the field of exploration to concentrate on using JavaScript to develop user interfaces for web pages and applications that are both usable and functional. In the first few chapters we will look at the essentials of the JavaScript language, and then move on to implementing it: using DHTML to dynamically change pages after they have loaded, validating data entered by the user, and building more interaction into applications than is possible with HTML alone.
We'll be creating a lot of short scripts in the chapters that follow, and we'll tie everything together into a large application that builds up through the book: an image viewer with shopping cart functionality. We'll start by constructing a web page that enables visitors to view large libraries of images, which would work well for sites with large numbers of images on them like a fanzine site. This part of the application will show you how to create effective user interfaces with JavaScript, and demonstrate how the usability of the web site can be improved with such an interface.
As we progress through the book we'll add e-commerce functionality to the site so that visitors can buy the images as well as view them. We'll look at how JavaScript can be used to create shopping baskets, to obtain the information needed to place an order, and to validate that information. We'll be concentrating our efforts on the frontend development process, leaving the server-side for another book.
Of course, it all begins here with this chapter, and this is where we'll set up the rest of the book by looking at:
- What JavaScript is and what it can do for us
- The advantages and disadvantages of JavaScript; the problems you are likely to encounter during JavaScript development, and the solutions to those problems.
- JavaScript in a web page and essential syntax
- Object Oriented Programming (OOP) - sometimes also termed Object Oriented Development (OOD) - in relation to JavaScript the web browser.
- Writing and running a simple JavaScript program
Many of you will already have come across JavaScript, and already have an idea of what it is and what it can do, so we'll move quite swiftly through the language and its capabilities first.
What is JavaScript?
JavaScript started life as LiveScript, but Netscape changed the name, possibly because of the excitement being generated by Java, to JavaScript. The name does confuse people, though, who expect there to be a closer relationship between Java and JavaScript than actually exists. In fact there's little in common between the languages, although some of the syntax looks similar.
The JavaScript language was created by Netscape in 1996 and included in their Netscape Navigator (NN) 2.0 browser via an interpreter that reads and executes the JavaScript included in .html pages. The language has steadily grown in popularity since then, and is now supported by the most popular browsers: those produced by Netscape and Microsoft as well as less widely used browsers like Opera. The good news is that this means JavaScript can be used in web pages for all major modern browsers. The not quite so good news is that there are differences in the way the different browsers implement JavaScript, although the core JavaScript language is much the same.
The great thing about JavaScript is that once you've learned how to use it for browser programming, you can move on to use it in other areas. Microsoft's IIS uses JavaScript to program server-side web pages, PDF files now use JavaScript, and even Windows admin tasks can be automated with JavaScript code.
What Can JavaScript Do for Us?
The rollovers and DHTML tricks associated with JavaScript came along relatively recently in the history of the technology. In the early days JavaScript was primarily used for manipulating data before posting it to the server, saving the contents of a form as the user moved from one page of an application to another, and client-side form validation - in fact, much of the functionality that it's widely used to implement now.
Validating the user's data simply means checking that the data entered is appropriate before proceeding with the form. For example, if you want the user to enter a date in the format dd/mm/yy, then you can check that numbers and not letters have been entered, and that the numbers make sense: that the number representing the day isn't higher than 31, and that the number representing the month isn't higher than 12.
There are two very good reasons for validating data on the client's machine:
- User experience: the user doesn't have to wait for the form to be sent to the server, checked for validity, and then possibly sent back with error messages. Validating data on the client makes for a much smoother user experience.
- Server processing power: you're generating far less work for the computer hosting the web site by checking forms before they are sent to the server. The hosting machine won't have to handle the workload of validating the data and resending pages with errors in them to the user. Data checking on the server, although sometimes necessary, uses up bandwidth and will ultimately reduce the maximum number of visitors you can accommodate on your web site at any one time.
Since Netscape Navigator 2 and the first implementation of JavaScript, things have moved on quite a bit. As browsers have become more programmable, developers have been able to create more functional and interactive pages. A simple example of browser programmability in action is the image rollover, where one image is swapped for another when the user rolls her mouse pointer over it. A more sophisticated example is a JavaScript powered shopping cart, something we'll be creating later in the book.
As JavaScript has developed in its own right, developers and designers have been able to create much more impressive visual effects and interaction with the user. For example, JavaScript can be used to create a tree menu for web site navigation, like that one shown below which was on Microsoft's web site (http://msdn.microsoft.com).
Special effects and inventive interaction can really enhance the user's experience, but they can also really get in the user's way if they are overused or inappropriately placed. It’s the usability enhancements that you can make to your web site using JavaScript that will encourage users to come back again and again.
The Advantages and Disadvantages of JavaScript
We've already seen some of the advantages of JavaScript, like cross-browser support, validating data on the client, and being able to create more sophisticated user interfaces.
JavaScript effects are also much faster to download than some other front-end technologies like Flash and Java applets. In fact, unless you're writing a massive JavaScript application, it's quite likely that no significant extra download time will be added to a page by using JavaScript on it. Nor do users need to download a plugin before they can view your JavaScript, as they would with Flash for example, they simply need a browser that supports it - and, of course, most modern browsers do.
Other advantages include the fact that you don't need any extra tools to write JavaScript, any plain text or HTML editor will do, so there's no expensive development software to buy. It's also an easy language to learn, and there's a thriving and supportive online community of JavaScript developers and information resources.
The disadvantages of JavaScript, as with most web development, are almost entirely related to browser compatibility.
While the advances in browser programmability we've seen over recent years are, generally speaking, a good thing, if you don't implement them with care you can create a lot of inconsistencies and broken pages quite unintentionally using JavaScript. Code that works just great on IE4 might not work at all on Netscape 4, what works in NN6 doesn’t always work in NN 4, and so on.
In essence, there are two main problems with JavaScript and browsers:
- The different JavaScript versions in different browsers.
- Browser programmability: the HTML elements and features of the browser that can be accessed through any scripting language. (IE4 , for example, makes most of the page and HTML accessible to scripts, but Navigator 4 limits what can be accessed and manipulated.)
JavaScript Version Differences between Browsers
The JavaScript language has gone through a number of versions, right from the first release, JavaScript 1.0, to the latest version, JavaScript 1.5 (supported by Netscape browsers, currently Netscape 6.2). Microsoft calls its own version of JavaScript JScript, which began with JScript 1.0, and is currently at JScript 5.6, (supported by IE 6).
While the names and numbers of the versions of JavaScript supported by Netscape and Microsoft may differ, the languages themselves are broadly, but not entirely, the same. And therein lies the problem: there are a significant number of small and sometimes subtle differences that can catch you out.
This table lists the different versions and indicates where IE and Navigator versions of JavaScript are roughly compatible:
The table only gives a very rough approximation, and in those terms JavaScript IE3 = NN3, IE4 = NN4 and IE5+ = NN6. An example of the small differences is the try..catch clause, which is supported in JavaScript by IE5+ and NN6+, but not in IE4 or NN4.
Although there are plenty of references you can use to look up such differences, the only way of being absolutely sure that a page will work on different browsers is to test it as widely as possible. Programs such as VirtualPC from www.connectix.com allows you to install and run multiple operating systems with different browsers from one host operating system.
Browser Programmability
While the language syntax and features of different versions of JavaScript are important, even more so is the browser being used to view your web pages. Let's go back to the basics to explain what this means in terms of JavaScript development.
JavaScript isn't able to do much without an environment, and in this book we're working with JavaScript in the browser. In this sense we could say that the browser is essentially the host. JavaScript's usefulness lies in its ability to manipulate the host environment, whether that's a web page, a PDF file, a web server, or Windows itself.
Each of these host environments makes itself available for programming. It does this by providing objects that allow JavaScript to learn about, and manipulate, the host environment. For example, the browser makes the document object that represents a web page available to JavaScript. This enables us to use JavaScript to add new HTML into a web page even as the user is viewing it. If we were using JavaScript in a Windows server then we'd find that the server exposes a very different set of objects with functionality related to the server.
So browsers themselves also have different levels of programmability: the collection of browser elements and features that can be accessed through a programming language. Just as the HTML supported by different browser versions varies, so too do the things we can access in the browser. A simple example would be the ability to change the image loaded in an IMG tag; this was supported by Netscape 3 but not by Internet Explorer 3, so attempting to access an IMG tag and change its source image will work great in one browser but fail completely in the other.
Not only do different browsers enable us to do different things in JavaScript, the way certain pieces of functionality are implemented can vary between browsers as well. For example, if we're creating pages accessible to IE4+ and NN4+ browsers, then we need to cope with three different ways of accessing HTML tags through JavaScript:
- The IE4+ way that works exclusively with IE4+
- The NN4 way that works exclusively with NN4
- The DOM Interface that works with IE5+ and NN6 browsers
We'll be covering each of these ways in depth in this book.
