What Can JavaScript Do?

In this section we take a look at a few interesting effects and programs created entirely with JavaScript. At this point, we will only focus on client-side JavaScript that is embedded in or referenced by an HTML document.

Games

You can create many interesting games with JavaScript. During our JavaScript-programming experience we have written tic-tac-toe games, a mastermind game, a Tetris game, and many others. There are basically two types of games which you can create via JavaScript:

• static games
• 4dynamic games

Static games are usually logical ones, and thus do not require much action or immediate responses. For example, you can play tic-tac-toe without any live action, because even reloading the entire page for each move does not interfere with the game itself (although it might be very boring). Static games do not require image replacements or animation. Dynamic games, on the other hand, require real-time action and animation. For example, a Tetris game requires that the blocks will fall down the screen smoothly, without having to wait each time for the screen to be refreshed. Dynamic games are often resource demanding and therefore must be programmed with efficiency in mind. It is almost impossible to create a dynamic game that works under Navigator 2.0x or MSIE 3.0x, because those browsers do not feature the Image object (explained in Chapter 25, Images and Graphics) that enables image swapping.

Small, simple games are usually embedded in existing Web pages, whereas large, complex games are most often placed on a separate page. Figure 1-1 shows a fairly complex game (an interesting implementation of Tetris, consisting of hundreds of lines of code) that makes up a Web page.

Figure 1-1.  Some complex games require multiple frames, so it is preferable to put them on a seperate page.

Figure 1-2.  A status-bar banner adds interest to the page.

Banners

JavaScript is a full scripting language, so you can create an infinite number of distinct scripts. Nevertheless, some implementations became more popular than others due to the fact that they are easy to use and create interesting effects. Banners are a classic example of such scripts. A banner is a script that displays text in the browser’s status bar or in a form’s text field. The most common browsers are those that scroll and those that type in messages sequentially. The latter was first developed for this book and is known as a T-banner! Figure 1-2 shows how banners can significantly improve the overall look of a Web page.

Figure 1-3.  A form with a validation script that selects an invalid entry (email address without @ character).

Form Validation

JavaScript is tightly connected to browser objects, including forms and their elements. Therefore, it provides a great amount of control over forms. A classic form-related script is one that validates a form’s fields before it is submitted and cancels the submission to the server if an error is found in one of the fields. The advantage of using JavaScript in this particular example is that client-side validation is much faster than validation via transmission to the server and back to the client. For example, suppose you have a form that accepts data from the user, including his or her e-mail address. Let’s assume that the e-mail address is essential, and that a string containing an “@” character is assumed a valid e-mail address. There are two options:

Figure 1-4.  JavaScript-only LED sign (ticker).

• You can choose not to validate the entries. In that case, when the user clicks the Submit button, the form is submitted to the server where a CGI script checks if the e-mail address field is valid and then processes the form. If the e-mail address does not contain an “@” character, the submission is denied and the appropriate message is returned to the user.

  
  Figure 1-5.  A graphical clock representing the client's current time.

• You can choose to use client-side validation via JavaScript. In that case the validating script is loaded as a plain text (JavaScript code embedded in the HTML code). When the user clicks the Submit button, a JavaScript function is triggered to validate the form. If the e-mail address seems valid, the form is submitted to the server—otherwise an appropriate message is immediately displayed and the submission is canceled. Note that the user does not have to wait for the form to be submitted to the server and back to the client, only to receive a message informing him or her that the e-mail address field contains an invalid entry.

Figure 1-3 shows a simple form with a client-side JavaScript validation script that highlights an incorrect entry.

Miscellaneous

We have covered three important JavaScript implementations. However, like all other languages, it is obviously impossible to cover all or most of the possible scripts. You can use JavaScript to create almost anything you desire. For example, you can create an LED sign which once could be created only with Java. Figure 1-4 shows an LED sign created with nothing but JavaScript, so you don’t have to program and compile any Java!

Bear in mind that client-side JavaScript is executed on the user’s machine. That is, you do not have any direct access to the server’s properties with client-side JavaScript. Although that may seem to be a disadvantage, it is sometimes very convenient to have access to client-side properties rather than server-side ones. For example, you can create a digital clock that shows the current time in the client’s time zone, because JavaScript extracts the time from the client’s operating system, be it Windows 95, Macintosh, Unix, or any other OS. Figure 1-5 demonstrates the digital clock.

The full control over browser objects is what makes client-side JavaScript so powerful. You can pop up windows and use them as remote controls linked to the original window. You can use one link to perform several operations or load various documents in separate frames simultaneously. You can also use JavaScript to create an online calculator or to draw graphs and curves. To attract visitors, you can enhance a Web page with JavaScript in many different ways.

We have introduced a few client-side JavaScript scripts in this section. Although client-side JavaScript is by far the most important and useful, there are many other implementations of the language. For example, you can use JavaScript for server-side applications using LiveWire compiler. Server-side JavaScript is actually an alternative to traditional CGI programming via Perl and C++. JavaScript is a very convenient language—therefore, it is being used alongside many other languages (such as VRML) and for various purposes. Another example of JavaScript use is for automatic proxy configuration. As you might already know, Netscape Navigator enables you to connect through a proxy server. You can configure the proxies manually by entering the correct values, or enter the URL of an automatic proxy configuration script, which is actually a JavaScript code. The JavaScript code is located in a text file on the server, but is not compiled like server-side JavaScript. You should know by now that there is plenty to do with JavaScript, and JavaScript is expected to be one of the most important programming languages, both for the Internet and for other general purposes. We will cover the most important implementations of the language in this book.