Team LiB
Previous Section Next Section

Chapter 1: JavaScript Programming Basics

Overview

JavaScript, designed by Netscape Communications and Sun Microsystems, is a lightweight programming language that you can use to add dynamic effects to your Web pages. HTML (Hypertext Markup Language) can only describe the way a Web page's elements (text, forms, hyperlinks, and tables) look—it has no way of dictating how they behave. The ability to embed JavaScript scripts in a Web page gives you, the programmer, much more control over how your Web page behaves.

Scripting languages like JavaScript give Web pages far more processing power. JavaScript allows a Web page to interact with both a site visitor and the Web server from which the page originated. One common use for JavaScript is form validation, the process by which a form is checked prior to submission in order to verify that it contains all the required information and that it is in the correct format. By itself, HTML allows a visitor to retrieve a form from a server, fill in the required information, and send the form back to the server for processing. Unfortunately, if the user enters invalid data, the whole process must be repeated until entirely valid data is entered. As JavaScript is executed in the client browser, form validation can occur after the user has filled out the form and before it is sent back to the server. This saves both the client and server considerable time.

As you read through this book studying the projects and customizing the code I'll present, bear in mind that JavaScript is a scripting language that was created to run in browsers. Because of this, JavaScript cannot be used to create stand-alone programs, in the same way that HTML cannot be used to create stand-alone programs. Both JavaScript and HTML require a Web browser in order to be executed. More precisely, a JavaScript interpreter is required to understand and run JavaScript programs. JavaScript interpreters come prepackaged in almost all of today's mainstream Web browsers (including Netscape and Internet Explorer). This means that a client will not need to install any other programs on their computers before using Web sites with embedded JavaScript.

Unlike with many of today's common programming languages—such as C, C++, Visual Basic, and Java—you don't need any special development environment in order to write JavaScript applications. You can use the same text editor you're using to create your Web pages. To insert a script into a preexisting Web page, you need only enclose the JavaScript code between script tags (<script></script>). This will tell the Web browser to execute the code instead of trying to display it. As an example, here is a simple Web page that displays the classic Hello World!! message:

<html>

  <head>
    <title> 
      JavaScript Professional Projects - "Hello World!!" Example
    </title>
  </head>

  <body> 
    <center> 
      <font size=6>JavaScript Professional Projects</font><br>
      <font size=4>Chapter 1: "Hello World!!" Example</font>
    </center> 

    <br><br>
    <p>
      Not only can you display text as usual on your Web page,
      but you can also use JavaScript's built in 'document.write();'
      function to display dynamic information such as the current
      date and time.
    </p>
   <script language="JavaScript">
   <!--

     document.write( "Your current date and time is: " +
                          new Date().toString() + "<br>" );
   // -->
   </script>

   <br><br>
   <p>
     You can also use JavaScript to display normal HTML
     elements repeatedly. Here is an example of that:
   </p>

   <script language="JavaScript">
   <!--

     for( i = 0 ; i < 5 ; i++ )
     {
       document.write( "Hello World!!<br>" );
     }

   // --<
   </script>

   <br><br>
   <p>
     As you can see, JavaScript has great power.
   </p>
 </body>

</html>

The statements enclosed in the script tags are considered executable code by the browser. It is important to specify the language attribute's value for the script tag because JavaScript is not the only scripting language that can be embedded within Web pages. In addition, it is always a good idea to include HTML comment tags within the script tags, to allow for older browsers that do not support JavaScript.

All of the commands used in the code example just presented will be explained in full in the following chapters. To run the example, type the HTML code into a text editor (such as Notepad for Windows, VI for Unix, or Applescript for Mac) and save it as HelloWorld.html. Opening the file in your browser will display the page that you see in Figure 1.1.

Click To expand
Figure 1.1: A page displaying simple JavaScript capabilities.

When JavaScript code is embedded into an HTML Web page, the browser will read and display the HTML as usual. When the browser encounters a script tag, it will interpret the JavaScript code. The JavaScript code can then be executed as the page loads, the entire time the page is being displayed, as the page is being unloaded, or along with programmer-designated events. It is important to remember that the interpretation occurs at the client side and after the Web page has been completely downloaded from the server. This has its advantages and disadvantages. Because JavaScript is run on the client's computer, it is unable to access resources located on the server from which it originated—most notable are databases. JavaScript does, however, run much faster than other server-side languages that do communicated directly with the server. When used in combination with the browser's Document Object Model (DOM), JavaScript can produce intricate, dynamic HTML effects as well as animation and sound.


Team LiB
Previous Section Next Section