Friday, November 2, 2007

What is JavaScript?


by Dori Smith


As these examples show, it's just a simple web scripting language



Introduction



What's JavaScript? What's the difference between JavaScript and Java? Isn't
JavaScript just a simplified version of Java? These are common questions that I
get all the time.


Netscape originally invented a simple scripting language called LiveScript,
which was to be a proprietary add-on to HTML. When Sun's new language Java
became unexpectedly popular, Netscape was quick to jump on the Java bandwagon,
and re-christened their scripting language JavaScript. Outside of the first four
letters, there are almost no other similarities between the two.


Microsoft then added their own version of JavaScript to Internet Explorer,
which they named JScript. Unfortunately, the two were not identical, so Netscape
then attempted to straighten matters out by turning JavaScript over to ECMA, a
Switzerland-based standards body. This gave three main versions of
JavaScript-based languages: JavaScript, which works primarily with Netscape's
browsers, JScript, which works with Internet Explorer, and ECMAScript, with
which no browser is completely compatible. Netscape and Microsoft have both
stated that future versions will match the ECMAScript standard, which should
lead to convergence. However, as the most-used features are common to all,
compatibility is not an issue unless you are trying to use JavaScript to control
DHTML.


JavaScript is growing in popularity due to its simple learning curve relative
to the amount of power it provides. Complete non-programmers are able to add a
little bit of interactivity to their web pages without buying an IDE or sweating
over why a program won't compile. There are numerous Web sites which contain any
number of scripts available for the taking, and Netscape has fairly complete
documentation on their site. And of course, there's the always useful ability to
view the source of Web pages.



Syntax & Basics



The syntax of JavaScript will be simple to anyone who has ever programmed in
an object oriented language. The primary object is the window, which is at the
top of the hierarchy. Under that are the document, frame, location, history, and
navigator objects. In turn, the document object contains anchors, applets,
embeds, forms, images, and links, each of which is an array of objects. So, a
reference to the first image on a page would be to self.document.image[0],
although it is preferable to use names instead of numbers for clarity.


JavaScript is not a stand-alone language, but rather a scripting add-on to
HTML. JavaScript is added to HTML commands by use of the <SCRIPT> tag. Anything
within this tag is (or should be) ignored by browsers that do not support
JavaScript. JavaScript is the most popular scripting language in use due to its
cross-platform and cross-browser support, although VBScript is sometimes used on
intranets when the scripter knows that everyone accessing the page is on
Windows. JavaScript will attempt to execute the commands within the <SCRIPT> tag
if there is no LANGUAGE attribute, or if the LANGUAGE attribute is set to
JavaScript; in addition, the LANGUAGE attribute also can be used to distinguish
between various versions of JavaScript.


The JavaScript in Listing 1 consists of a single line: document.write("Hello,
World!"). This writes the typical "Hello, World" message, using the
document.write() method. This method dynamically generates text within HTML
files, in lieu of hard-coded HTML. Figure 1 shows the results.


Listing 1: Everyone's first script


hello.html 


<HTML>
<HEAD>
   <TITLE>Barely a script at all</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>
<SCRIPT LANGUAGE="JAVASCRIPT">
      document.write("Hello, World!")
</SCRIPT>
</H1>   
</BODY>
</HTML>





Figure 1. The typical "Hello, World".



Using JavaScript



There are three ways that JavaScript can be used within an HTML file. It can
be put within <SCRIPT> tags within the <HEAD> tag (header scripts), within
<SCRIPT> tags within the <BODY> tag (body scripts), or called directly when
certain events occur.


JavaScript is put inside the <HEAD> tag primarily when you are initializing
variables and creating functions that will be used throughout the entire script.
Code here is executed once, when the page is loaded. Within the <BODY> tag, the
best use of JavaScript is to write out text on-the-fly. JavaScript handles these
events:
























































Event
Caused by

onAbort
The user aborted loading the page

onBlur
The user left the object

onChange
The user changed the object

onClick
The user clicked on an object

onError
The script encountered an error

onFocus
The user made an object active

onLoad
The object finished loading

onMouseOver
The cursor moved over an object

onMouseOut
The cursor moved off of an object

onSelect
The user selected the contents of an object

onSubmit
The user submitted a form

onUnload
The user left the window

Any of these event handlers can be added to any HTML tag which can cause the
event to occur. For example, the onLoad event handler can be added to the <BODY>
tag, and the event will be called when the page has completed loading.



Image Rollovers



One of the most common uses of JavaScript is the image rollover. This is a
technique which requires little programming knowledge, but can greatly enhance
the experience of visiting a Web site.


HTML has its place, but it's static. A user entering a web site and seeing a
window like that in Figure 2 doesn't know what they should do -- are
these words links, or just graphics giving us information?






Figure 2. The Navigation Bar, upon entering the page.



Adding a rollover to this gives the look in Figure 3. Now, when a user
moves a cursor over any of the options, it becomes clear that this is a
navigation bar, and that each of these words is a live link.






Figure 3. When doing a rollover, the arrow gives the user feedback.



Image rollovers are handled by browsers that support JavaScript versions 1.1
and later, which includes Netscape Navigator versions 3 and above, Internet
Explorer 4, and some versions of Internet Explorer 3. Listing 2 shows the code
to create the image rollover effect.


Listing 2: Image rollovers give users feedback


navbar.html 


<HTML>
<HEAD>
   <TITLE>Navbar</TITLE>

   <SCRIPT LANGUAGE="JAVASCRIPT">
      <!-- Hide from old browsers

      if (document.images) {
         productOn = new Image
         pricingOn = new Image
         pressOn = new Image
         
         productOff = new Image
         pricingOff = new Image
         pressOff = new Image
         
         productOn.src = "products_on.gif"
         pricingOn.src = "pricing_on.gif"
         pressOn.src = "press_on.gif"
         
         productOff.src = "products_off.gif"
         pricingOff.src = "pricing_off.gif"
         pressOff.src = "press_off.gif"
      }
      else {
         productOn.src = ""
         pricingOn.src = ""
         pressOn.src = ""
         
         productOff.src = ""
         pricingOff.src = ""
         pressOff.src = ""
         
         document.products = ""
         document.pricing = ""
         document.press = ""
      }
      
      // Stop hiding from old browsers -->
   </SCRIPT>
</HEAD>

<BODY BGCOLOR=WHITE>
   <A HREF="products.html" 
      onMouseOver="products.src=productOn.src" 
      onMouseOut="products.src=productOff.src">
   <IMG SRC="products_off.gif" WIDTH="226" HEIGHT="37" 
      BORDER="0" NAME="products"></A><BR>
      
   <A HREF="pricing.html" 
      onMouseOver="pricing.src=pricingOn.src" 
      onMouseOut="pricing.src=pricingOff.src">
   <IMG SRC="pricing_off.gif" WIDTH="189" HEIGHT="80" 
      BORDER="0" NAME="pricing"></A><BR>
      
   <A HREF="press.html" 
      onMouseOver="press.src=pressOn.src" 
      onMouseOut="press.src=pressOff.src">
   <IMG SRC="press_off.gif" WIDTH="154" HEIGHT="36" 
      BORDER="0" NAME="press"></A>
</BODY>
</HTML>

In the <HEAD> tag, we do our initializations. The first thing needed is to
hide the JavaScript commands from browsers that are too old to understand
JavaScript and too old to understand that they're supposed to ignore text within
tags they can't handle. This is done by starting a HTML comment, which is not
closed until just before the closing script tag. This closing comment line works
because it starts with a JavaScript comment symbol, which causes JavaScript to
ignore it. Next, we check to see if the browser we're using supports
manipulation of image objects. If it doesn't, then care must be taken to avoid
giving the user errors. This is done by checking for the existence of
document.images. If it exists, we're able to do the rollover. If it doesn't,
they have an old browser (JavaScript 1.0) or they have JavaScript turned off.


The image rollover technique requires two versions of each image: one "on"
and one "off," based on whether the cursor is or isn't on top of the image. So,
for each of the three images in the window, we need to create 2 new image
objects. We then assign an image URL to each of these image objects, by setting
their src property. This both enables the variables to be referenced by name
later within the body, and pre-loads the graphics into the browser cache, so
that they appear virtually immediately when the cursor moves over the image.


We also give each image on the page a name, by setting the NAME attribute of
each within the <IMG> tag. While images can be referred to as document.image[0]
(for instance), it is more flexible & manageable to instead refer to
document.products. This allows us to refer to the image by name later when we
want to manipulate it.


If the user has a browser that does not support image manipulation, we must
initialize the same variables, so that using them later does not cause an error.
Consequently, we set the src of each to the empty string. In addition, we set
three other variables: document.products, document.pricing, and document.press.
Older browsers don't understand that images can have names, so simply defining
them here lets us use the objects in all browsers without an error.


Within the body, we add event handlers to the link tags around the images,
for both onMouseOver and onMouseOut. For example, when the products image first
loads, it displays the image products_off.gif. When the cursor goes over the
image, the src of products is reset to the src of the productOn image that we
set in the header script. This displays the version of the image with an arrow.
When the cursor is moved off the image area, the src of products is reset to the
src of the productOff image (set in the header script).


If the browser does not support image manipulation, the onMouseOver event
instead just sets the src of an empty string to the src of another empty string,
with no errors and no effect.


The secret to having this look good is proper preparation of the images,
avoiding the two most common mistakes. Firstly, the two images must be of
identical sizes. When one replaces the other, the size of the image area doesn't
change, even though the images themselves may be of different sizes. Instead,
the browser will automatically resize the graphics for you, with unpredictable
(and virtually always unpleasant) results. Figure 4 shows the six images
actually used in this example. The "off" versions of the images, although they
do not include the red arrow, have identical dimensions to their "on" versions.
Secondly, the images must not have transparent areas. In this case, if the white
areas were transparent, the images would look fine upon first loading, and would
also look fine when the cursor was moved over them. But, when the cursor was
moved off the first time, the red arrow would continue to show through the
transparent area of the "off" image.






Figure 4. There are actually 6 images; 1 each with and without the
arrow.



JavaScript Navigation


Another way of improving the user interface of a web site is to improve its
navigation. One technique of doing this is to create a jumping popup menu, such
as the ones on Apple's DevWorld site. This example requires little actual
scripting, outside of handling the onChange event from the popup menu, combined
with some knowledge of how JavaScript interacts with HTML.


The HTML <SELECT> is used to create the popup menu shown in Figure 5. It has
four options: "Pick an area," "Products," "Pricing," and "Press." Choosing an
option triggers the onChange event, which evaluates the line of JavaScript shown
in Listing 3.






Figure 5. This popup menu sends you to a new page instantly.



Listing 3: Instant navigation with a popup menu


popup.html 


<HTML>
   <HEAD>
      <TITLE>Pop-up Menu</TITLE>
   </HEAD>
   <BODY BGCOLOR=WHITE>
      <P>Where do you want to go?</P>
      <FORM>
      <SELECT 
         onChange="if (this.selectedIndex > 0)
window.location.href=this.options[this.selectedIndex].value">
         <OPTION>Pick an area
         <OPTION VALUE="products.html">Products
         <OPTION VALUE="pricing.html">Pricing
         <OPTION VALUE="press.html">Press
      </SELECT>
      </FORM>
   </BODY>
</HTML>

Firstly, we check the value of selectedIndex. This is a number between 0 and
3, depending on which option was chosen. If the option chosen was the first
("Pick an area"), we don't want to do anything, so we only do anything if
this.selectedIndex is greater than zero.


Otherwise, changing the value of window.location.href will force the browser
to load a new page. This example uses the HTML VALUE attribute of <OPTION> to
store the new page that we want to jump to. Each of these values can be
referenced by JavaScript via the value property of the options array. When the
user chooses an option, JavaScript finds the new page by referencing into the
options array with the selectedIndex, and using its value as the location of the
page.


One of the major benefits of this style of handling popup menus is that
changes to the menu can be made with no knowledge of JavaScript necessary. In
fact, once the onChange handler has been added, the page can then be modified by
WYSIWYG editors with no loss in functionality, so long as the VALUE attributes
are maintained correctly.


There's one small trick here: if you decide to change the popup so that the
first option on the menu is a valid location, the user won't be able to ever get
there. The event handled is onChange, and there's no way for a user to cause it
to be triggered when choosing the default option.



Flow Control



Like most programming languages, JavaScript has the expected ways of
controlling the flow of commands. Listing 4 and Figure 6 demonstrate
functions, loops, and if statements in JavaScript.


Listing 4: Controlling flow in JavaScript


factorial.html 


<HTML>
<HEAD>
   <TITLE>Factorial</TITLE>

   <SCRIPT LANGUAGE="JAVASCRIPT">
      <!-- Hide script from old browsers
      
      function showFactorial(theEntry) {
         document.myForm.result.value =
            calcFactorial(theEntry.value)
      }
   
      function calcFactorial(inVal) {
         if (isNaN(inVal))                // isNan = Is Not a Number
            return("Not a number")
         
         startVal = eval(inVal)          // eval turns a string into a number
         if (startVal < 0 || startVal != Math.floor(startVal))
            return ("Invalid number")

         endVal = 1
         for (i=1; i<=startVal; i++) {
            endVal = endVal * i
         }
         return(endVal)
      }
   
      // End hiding script from old browsers -->
   </SCRIPT>

</HEAD>
<BODY BGCOLOR=WHITE>

   <H3>The factorial of
   <FORM NAME="myForm">
      <INPUT TYPE=TEXT SIZE=3
         onChange="javascript:showFactorial(this)"> is
   <INPUT TYPE=TEXT NAME="result">
   </FORM>
   </H3>
</BODY>
</HTML>

In this example, the user enters a number in the first field. Changing this
field passes control to the onChange event handler, which calls the
showFactorial() function, with the entry field as its parameter. The
showFactorial() function calls the calcFactorial() function, passing it the
value of the entry field.


The calcFactorial() function returns either an error message (if not a
number, less than zero, or not an integer) or the factorial to its caller. When
control passes back to showFactorial(), the result is put into the result field
in the browser window.






Figure 6. Entering a number displays its factorial.



Conclusion



Another popular use of JavaScript is form validation, which will tell the
user if the form they've submitted is valid without having the overhead of
connecting to a Web server. This technique gives the user the impression of
speedy Web access, when they haven't accessed your server at all.


JavaScript is growing in popularity, due to many factors, including its ease
of learning, the growing share of JavaScript-enabled browsers, and the large
number of resources available to novices. With Dynamic HTML on the horizon,
JavaScript will become more important and more prevalent in the future.



Bibliography & Suggested Reading





  • Castro, Elizabeth. HTML for the World Wide Web., Visual QuickStart Guide.
    2nd edn. Peachpit Press, 1997.


  • Flanagan, David. JavaScript: The Definitive Guide. 2nd edn. O'Reilly &
    Associates, 1997.


  • Negrino, Tom and Dori Smith. JavaScript for the World Wide Web, Visual
    QuickStart Guide    ,. 2nd edn. Peachpit Press, 1998.



Internet References



Posted by at No comments:
Subscribe to: Posts (Atom)