7.1 Web programming with scripts

7.1 Web programming with scripts

7.1.1 Global programming via Internet browsers

In the mid-1990s, Netscape created LiveScript, a loosely defined scripting language for its 2.0 browser. It was designed to handle forms and images. The early versions of this language were mainly dedicated to a small group of Web designers without a compiler (Java-type compiler), or without any object-oriented programming experience. In December 1995, Netscape and Sun Microsystems (the creator of the Java language) reintroduced this language under the new name JavaScript and claimed it as a complement of both HTML and Java. Java and JavaScript are primarily programming languages for Web pages. Apart from this, they are quite different. For a number of years JavaScript suffered deeply from criticisms such as:

• It is not a compilation language.

• It exerts little discipline on code and data.

• It offers very little or no security on intellectual property.

• It lacks an IDE (Integrated Development Editor) and reliable cross-platform debugger.

Despite all these criticisms, JavaScript is by far the most popular programming language for the Web. It has the ability to "talk" directly to the browser software with simple and easy human sentences (scripts). Since all major browsers include JavaScript as an integral part, we don't need the "run time environment" to run them. JavaScript is a truly global programming language embedded in the Web browsers.

In response to the popularity of JavaScript, Microsoft released its own scripting language, VBScript (a small version of Visual Basic), which is platform dependent. In July 1996, Microsoft also released an implementation of JavaScript called "JScript" bundled together with all IE browsers. As a technology that has survived on this ever-changing Web environment for more than 10 years, JavaScript is now one of the fundamental technologies on the Web. Together with the European Computer Manufacturers Association (ECMA) standardization (later adopted by the ISO) and W3C DOM, JavaScript is considered by many Web developers as the foundation for the next generation of dynamic client-side Web applications, i.e., global programming via Internet browsers.

7.1.2 ECMAScript and the standard

The standardization of JavaScript began in conjunction with ECMA in November 1996. It adopted this standard in June 1997 and later it was adopted also by the International Organization for Standardization (ISO). This standard has been formally named "ECMA-262: ECMAScript Language Specification." The language itself is conveniently called ECMAScript.

All major browsers now support the ECMAScript released in December 1999 (http://www.ecma.ch) which includes all of the features from the earlier JavaScript version 1.2. We support the standards and adopt ECMAScript as the principal scripting language (client-side script) throughout this book.

Some ECMAScript (or JavaScript) has been used in many situations in previous chapters. They are characterized by the scripting element <script> inside a Web page. In fact, <script> is an XHTML element and would allow you to define an ECMAScript section anywhere within a Web page. Consider the following script fragment:

Listing: ex07-01.txt

1: <script language="JavaScript">
2:   document.write("<div>I Know Some ECMAScript (or JavaScript) Now!</div>")
3: </script>

This is a simple script to output an XHTML string to the browser. The <script> element in lines 1 and 3 specifies a script section (or a script block) so that the browser is able to interpret statements inside the block as scripting language. The language attribute in line 1 indicates that the scripting language is JavaScript. The only JavaScript statement inside the block is line 2. This built-in function document.write() is to output an XHTML statement back to the browser.

As ECMAScript is the standard and compatible with JavaScript, we generally use ECMAScript as the default client-side script. In order to avoid any confusion over different names and versions of the language, the following code is used to define an ECMAScript block:

<script> </script>

Since ECMAScript is an important subject on the Web and will be used heavily in this chapter, some practical language features are discussed in the next section.

7.1.3 Some language features of ECMAScript

For obvious reasons, a comprehensive tutorial on ECMAScript or full details of the language features are not feasible. For a friendly starting point and to prepare ourselves for the ECMAScript programming in this chapter and other chapters to come, some aspects of ECMAScript are provided. For our practical purposes, the following language features are considered:

• Variables e.g., var msg="A String", n=123, f=1.04, flag=true

• Conditionals e.g., if (ii < 10) {...}

• Loops e.g., for-loop: for (ii=1;ii<10;ii++){...}

• Arrays e.g., var myArray = new Array(12, 45, 78)

• Functions Built-in and user-defined functions

Also, they are the general practical aspects of many programming languages such as C, C++, and Visual Basic. In fact, we have used some of these ECMAScript features in Chapter 6, including some user-defined functions for controlling mouse events.

Unlike many other programming languages such as C and C++, ECMAScript is a loose language, particularly on variable declarations. In other words, you are free to define variables as you like without worrying about the data type and structure. Whether it is a string, integer, floating point number, or a Boolean type, you can define the variable simply using the keyword var as demonstrated in the example above. Consider the following ECMAScript code:

Listing: ex07-02.txt - Variable And Conditional Features Of ECMAScript

1: <script>
2:  var IE = document.all?true:false
3:   if (IE) document.write("You are using Internet Explorer")
4:   else document.write("You are not using Internet Explorer")
5: </script>

This code listing defines a script section and can be used on Web pages. The variable IE in line 2 is declared as the returned value of a Boolean type (true or false). Therefore, the variable IE is considered as a Boolean variable. The if statement in line 3 is a conditional feature of ECMAScript to detect the true or false status of the variable IE. In fact, this code is used on a number of occasions in Chapter 6 to detect browser type.

Another general programming feature is looping. Looping can make a series of tasks and coding more economical. Consider the following for-loop in ECMAScript:

Listing: ex07-03.txt - Using For-loop In ECMAScript

 1: <body style="font-family:arial;font-weight:bold;text-align:center">
 2: <script>
 3:   var msg ="Hello World! "
 4:   for (ii=14;ii<21;ii++)
 5:   {
 6:     document.write('<div style="font-size:' + ii + 'pt">')
 7:     document.write(msg + 'Font Size = ' + ii + '</div>')
 8:   }
 9: </script>
10: </body>

First, a "Hello World!" string is declared as variable msg in line 3. Lines 48 define a for-loop on variable ii to run through values from 14 to 20. That is, to run the statements in lines 67 seven times. In this case, the following XHTML statements will be output to the browser:

<div style="font-size:14pt">Hello World! Font Size =14</div>
    ...      ...        ...
<div style="font-size:20pt">Hello World! Font Size =20</div>

In ECMAScript, the plus sign "+" is used to concatenate strings and variables. This feature will be used quite often in this book to construct XHTML statements. A screen shot of this page is shown in Fig. 7.1. As you can see, the value of the variable ii is carried through the loop. Sometimes, you don't even need to declare the variable ii before using it as demonstrated in ex07-03.txt.

ECMAScript, in fact, is an object-oriented programming language. The language comes with a number of objects so that functions or methods associated with objects can be freely called by users. For example, the built-in function document.write() is actually a method of the document object. Object-oriented features greatly enhance the capabilities of ECMAScript and make it powerful and yet easy enough to be used on Web pages. For example, when you declare an array in ECMAScript, the array object is activated and the length of the array is attached. Consider the following example with an array and a user-defined function:

Listing: ex07-04.txt - Using Array And Function

 1: <script>
 2: function display_chap()
 3: {
 4:   var mArray=new Array(
 5:     "1: From HTML to XHTML and Web Site Design",
 6:     "2: Cascading Style Sheet (CSS) for Web Pages",
 7:     "3: Graphics, Font and Colors with Java and JavaScript",
 8:     "4: Images, Animations and Multimedia",
 9:     "5: XML and XSLT")
10:   for (ii=0;ii< mArray.length;ii++)
11:   {
12:     document.write('<div style="font-size:16pt">'+mArray[ii] + '<br />')
13:   }
14: }
15: </script>
16:
17: <body style="font-family:arial;font-weight:bold">
18:  <div style="font-size:20pt;text-align:center">
19:    Practical Web Technology (Part I)
20:  </div> <br />
21:   <script> display_chap() </script>
22: </body>

In this code fragment, we have two script sections. The first script section (lines 115) contains a user-defined function called display_chap(). Inside this function, we have defined an array mArray and a for-loop. The array mArray has five elements and they are all strings. Since the starting index of an array in ECMAScript is 0, the first element of mArray is (see line 5)

mArray[0] = "1: From HTML to XHTML and Web Site Design"

Also, all arrays are created as an object in ECMAScript and therefore the length of the array is attached automatically. In this case, the variable mArray.length contains the value 5 representing the total length of the mArray. A simple for-loop in lines 1013 can be used to output all elements inside mArray.

After the main message defined in lines 1820, another script section is created at line 21. Inside this section, the function display_chap() is called to display all elements of the array. A screen shot is shown in Fig. 7.2.

You now have some ideas on the language features of ECMAScript and how to use them on Web pages. One of the great strengths of ECMAScript (or simply script) is the capability to handle a user interface and to provide window programming facilities for Web page design.