TweetFollow Us on Twitter

What is JavaScript?

Volume Number: 14 (1998)
Issue Number: 5
Column Tag: Scripting

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


Dori Smith, dori@chalcedony.com, is a partner at Chalcedony Consulting, and is the co-author (with Tom Negrino) of JavaScript for the World Wide Web, Visual QuickStart Guide, 2nd Edition (Peachpit Press, 1998).

 
AAPL
$97.67
Apple Inc.
+0.64
MSFT
$44.50
Microsoft Corpora
+0.10
GOOG
$589.02
Google Inc.
-4.33

MacTech Search:
Community Search:

Software Updates via MacUpdate

Vienna 3.0.0 RC 2 :be5265e: - RSS and At...
Vienna is a freeware and Open-Source RSS/Atom newsreader with article storage and management via a SQLite database, written in Objective-C and Cocoa, for the OS X operating system. It provides... Read more
VLC Media Player 2.1.5 - Popular multime...
VLC Media Player is a highly portable multimedia player for various audio and video formats (MPEG-1, MPEG-2, MPEG-4, DivX, MP3, OGG, ...) as well as DVDs, VCDs, and various streaming protocols. It... Read more
Default Folder X 4.6.7 - Enhances Open a...
Default Folder X attaches a toolbar to the right side of the Open and Save dialogs in any OS X-native application. The toolbar gives you fast access to various folders and commands. You just click... Read more
TinkerTool 5.3 - Expanded preference set...
TinkerTool is an application that gives you access to additional preference settings Apple has built into Mac OS X. This allows to activate hidden features in the operating system and in some of the... Read more
Audio Hijack Pro 2.11.0 - Record and enh...
Audio Hijack Pro drastically changes the way you use audio on your computer, giving you the freedom to listen to audio when you want and how you want. Record and enhance any audio with Audio Hijack... Read more
Intermission 1.1.1 - Pause and rewind li...
Intermission allows you to pause and rewind live audio from any application on your Mac. Intermission will buffer up to 3 hours of audio, allowing users to skip through any assortment of audio... Read more
Autopano Giga 3.6 - Stitch multiple imag...
Autopano Giga allows you to stitch 2, 20, or 2,000 images. Version 3.0 integrates impressive new features that will definitely make you adopt Autopano Pro or Autopano Giga: Choose between 9... Read more
Airfoil 4.8.7 - Send audio from any app...
Airfoil allows you to send any audio to AirPort Express units, Apple TVs, and even other Macs and PCs, all in sync! It's your audio - everywhere. With Airfoil you can take audio from any... Read more
Microsoft Remote Desktop 8.0.8 - Connect...
With Microsoft Remote Desktop, you can connect to a remote PC and your work resources from almost anywhere. Experience the power of Windows with RemoteFX in a Remote Desktop client designed to help... Read more
xACT 2.30 - Audio compression toolkit. (...
xACT stands for X Aaudio Compression Toolkit, an application that encodes and decodes FLAC, SHN, Monkey’s Audio, TTA, Wavpack, and Apple Lossless files. It also can encode these formats to MP3, AAC... Read more

Latest Forum Discussions

See All

This Week at 148Apps: July 21-25, 2014
Another Week of Expert App Reviews   At 148Apps, we help you sort through the great ocean of apps to find the ones we think you’ll like and the ones you’ll need. Our top picks become Editor’s Choice, our stamp of approval for apps with that little... | Read more »
Reddme for iPhone - The Reddit Client (...
Reddme for iPhone - The Reddit Client 1.0 Device: iOS iPhone Category: News Price: $.99, Version: 1.0 (iTunes) Description: Reddme for iPhone is an iOS 7-optimized Reddit client that offers a refreshing new way to experience Reddit... | Read more »
Jacob Jones and the Bigfoot Mystery : Ep...
Jacob Jones and the Bigfoot Mystery : Episode 2 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Jacob Jones is back in Episode 2 of one of Apples 'Best of 2013' games and an App Store... | Read more »
New Trailer For Outcast Odyssey, A New K...
New Trailer For Outcast Odyssey, A New Kind of Card Battler Posted by Jennifer Allen on July 25th, 2014 [ permalink ] Out this Fall is a new kind of card battle game: Outcast Odyssey. | Read more »
Hay Day – Tip, Tricks, Strategies, and C...
Recently got into Supercell’s other huge hit, Hay Day and could do with some advice on what to do? We’ve got you covered with some helpful trips and tricks to bear in mind! Ticking Along One of the key things to keep in mind while building up that... | Read more »
Monster Head Review
Monster Head Review By Nadia Oxford on July 25th, 2014 Our Rating: :: FEEDING TIMEUniversal App - Designed for iPhone and iPad Racking up a high score with Monster Head is trickier than it first appears. The appeal wears out fairly... | Read more »
Garfield: Survival of the Fattest Coming...
Garfield: Survival of the Fattest Coming to iOS this Fall Posted by Jennifer Allen on July 25th, 2014 [ permalink ] Who loves lasagna? Me. Also everyone’s favorite grumpy fat cat, Garfield. | Read more »
Happy Flock Review
Happy Flock Review By Andrew Fisher on July 25th, 2014 Our Rating: :: HERD IT ALL BEFOREUniversal App - Designed for iPhone and iPad Underneath the gloss of Happy Flock’s visuals is a game of very little substance. It’s cute, but... | Read more »
Square Register Updates Adds Offline Pay...
Square Register Updates Adds Offline Payments Posted by Ellis Spice on July 25th, 2014 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
Looking For Group – Hearthstone’s Curse...
For the first time since its release (which has thankfully been a much shorter window for iPad players than their PC counterparts), Blizzard’s wildly successful Hearthstone: Heroes of Warcraft CCG is sporting some brand new content: the single... | Read more »

Price Scanner via MacPrices.net

Record Mac Shipments In Q2/14 Confound Analys...
A Seeking Alpha Trefis commentary notes that Apple’s fiscal Q3 2014 results released July 22, beat market predictions on earnings, although revenues were slightly lower than anticipated. Apple’s Mac’... Read more
Intel To Launch Core M Silicon For Use In Not...
Digitimes’ Monica Chen and Joseph Tsai, report that Intel will launch 14nm-based Core M series processors specifically for use in fanless notebook/tablet 2-in-1 models in Q4 2014, with many models to... Read more
Apple’s 2014 Back to School promotion: $100 g...
 Apple’s 2014 Back to School promotion includes a free $100 App Store Gift Card with the purchase of any new Mac (Mac mini excluded), or a $50 Gift Card with the purchase of an iPad or iPhone,... Read more
iMacs on sale for $150 off MSRP, $250 off for...
Best Buy has iMacs on sale for up to $160 off MSRP for a limited time. Choose free home shipping or free instant local store pickup (if available). Prices are valid for online orders only, in-store... Read more
Mac minis on sale for $100 off MSRP, starting...
Best Buy has Mac minis on sale for $100 off MSRP. Choose free shipping or free instant local store pickup. Prices are for online orders only, in-store prices may vary: 2.5GHz Mac mini: $499.99 2.3GHz... Read more
Global Tablet Market Grows 11% in Q2/14 Notwi...
Worldwide tablet sales grew 11.0 percent year over year in the second quarter of 2014, with shipments reaching 49.3 million units according to preliminary data from the International Data Corporation... Read more
New iPhone 6 Models to Have Staggered Release...
Digitimes’ Cage Chao and Steve Shen report that according to unnamed sources in Apple’s upstream iPhone supply chain, the new 5.5-inch iPhone will be released several months later than the new 4.7-... Read more
New iOS App Helps People Feel Good About thei...
Mobile shoppers looking for big savings at their favorite stores can turn to the Goodshop app, a new iOS app with the latest coupons and deals at more than 5,000 online stores. In addition to being a... Read more
Save on 5th generation refurbished iPod touch...
The Apple Store has Apple Certified Refurbished 5th generation iPod touches available starting at $149. Apple’s one-year warranty is included with each model, and shipping is free. Many, but not all... Read more
What Should Apple’s Next MacBook Priority Be;...
Stabley Times’ Phil Moore says that after expanding its iMac lineup with a new low end model, Apple’s next Mac hardware decision will be how it wants to approach expanding its MacBook lineup as well... Read more

Jobs Board

*Apple* Solutions Consultant (ASC) - Apple (...
**Job Summary** The ASC is an Apple employee who serves as an Apple brand ambassador and influencer in a Reseller's store. The ASC's role is to grow Apple Read more
WW Sales Program Manager, *Apple* Online St...
**Job Summary** Imagine what you could do here. At Apple , great ideas have a way of becoming great products, services, and customer experiences very quickly. Bring Read more
Lead Software Engineer, *Apple* Online Stor...
**Job Summary** Imagine what you could do here. At Apple , great ideas have a way of becoming great products, services, and customer experiences very quickly. Bring Read more
Manager, *Apple* Fullfillment Operation (AF...
…cross-functional teams to drive the highest level of program management quality for Apple . You will help plan launch strategy and demand generation programs with Read more
Project Manager / Business Analyst, WW *Appl...
…a senior project manager / business analyst to work within our Worldwide Apple Fulfillment Operations and the Business Process Re-engineering team. This role will work Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.