TweetFollow Us on Twitter

Solitaire in JavaScript

Volume Number: 16 (2000)
Issue Number: 6
Column Tag: Web Technologies

Solitaire in JavaScript

by Danny Swarzman

One approach to structuring code with initializers and lambda expressions

Preface

This article introduces JavaScript. I focus on a feature of the language that gets very little mention in books: the ability to use a function definition as an expression. This article provides an example of how such expressions can be used to produce a legible program.

I hope to provide a hint of JavaScript's power to create an interesting user experience under 4.x browsers, by presenting a sample program that creates a Peg Solitaire game in a web page.

Getting started with JavaScript is easy. All you need is a text editor and a browser. But first, let's review some core JavaScript concepts.

JavaScript and HTML

JavaScript interpreters have been written to run in different environments. This article discusses Client-Side JavaScript, which runs in a web browser. The JavaScript code is inside the HTML. It can appear:

  • Between a <SCRIPT> and a </SCRIPT> tag.
  • Inside an HTML tag as the value of an attribute such as onMouseOver, onMouseOut, etc. This code is interpreted when the event occurs.
  • As the value of the HREF attribute in a link or an area tag. In this case, the JavaScript must be prefixed with javascript:. This is interpreted when the user clicks on the link or area.

As the browser interprets the HTML, it creates a hierarchy of objects representing the various parts of the web page. The imbedded JavaScript can access those objects. At the top of the hierarchy is the document, corresponding to the web page.

The JavaScript program can manipulate the contents of the page though these objects. It can change the text that appears in a <TEXTAREA>. It can change the source file for an <IMG> tag. The JavaScript can insert text into the input stream that is currently being interpreted as HTML.

The <SCRIPT> tag

The general form is like this:

<SCRIPT LANGUAGE="JavaScript1.2">
	<!—HIDE
	JavaScript code goes here.
	//NOHIDE—> 
</SCRIPT>

When the browser encounters the <SCRIPT> tag, it starts interpreting the code as JavaScript. The LANGUAGE attribute specifies that JavaScript1.2 or later is required to interpret this script. This will work with most version 4 and later browsers.

If the browser does not interpret at least the specified level of the language, it will try to interpret the text inside the script tags as HTML. To prevent that, the script is enclosed with <!— and —>, marking it as an HTML comment.

When the JavaScript interpreter encounters <!— , it interprets the rest of the line as a comment. The // is another form of rest-of-line JavaScript comment.

Event Handlers

Several tags in HTML have attributes whose value can be text to be interpreted as JavaScript when a particular event occurs. An <A> tag, for example, can have an onMouseOver attribute. Corresponding to the tag is a JavaScript link object. When the browser interprets the tag, the text specified as the onMouseOver attribute becomes the onMouseOver property of the link object. That text is subsequently passed to the JavaScript interpreter when the user moves the mouse over the link.

Order of Interpretation of a Web Page

Every HTML document contains a header and a body. The header is interpreted first. A common practice is to place into the header the JavaScript to generate objects and functions that will be used in the body of the code.

As the browser interprets the body, it creates the enclosure hierarchy of objects corresponding to the various tags. This hierarchy is completely constructed only after the browser has completed interpreting the body.

There is an event generated when the load process is complete. Code that needs to be run only after the enclosure hierarchy has been completely constructed can run in an onLoad event handler.


Figure 1. Peg Solitaire Game

Developing JavaScript

To develop JavaScript to run in a web page, you need a text editor to create an HTML file. The script is embedded in the HTML code. BBEdit is my favorite, but any editor will do.

Test the file by opening it in a browser. I start with Netscape because the error messages are better. When you enter javascript: as the URL in any browser window, Netscape will open a new window in which to display the JavaScript error messages.

In Internet Explorer, you need to set preferences to see error messages. Each error message is displayed as a separate alert. Look at the Web Content subsection of the Web Browser section in the preferences dialog. The relevant choices appear under the heading of Active Content.

As with many web technologies, you may need to make an extra effort to ensure that your code works in all browsers. There are many different strategies for dealing with questions of cross-browser compatibility. That is beyond the scope of this article. The sample code has been tested for recent versions of the two popular browsers running on two popular operating systems.

Another helpful tool is a shell in which you can test fragments of code. An HTML file, enriched with JavaScript, can be used to allow the user to enter text into a text area and invoke the JavaScript interpreter to evaluate it, showing the results in another text area. An example is available on the web. See the references section at the end of this article.

The Evolution of JavaScript

JavaScript is the name of a language promoted by Netscape to complement HTML scripts. This use of JavaScript is called Client-Side JavaScript. Microsoft developed a similar scripting language called JScript. At the time of this writing, there have been five versions of JavaScript, 1.0 through 1.4 and five versions of JScript, 1.0 through 5.0.

In each version, new features have been added and old ones broken. Insuring compatibility with the early versions is a nightmare. Fortunately, around JavaScript 1.2 things began to stabilize.

The European Computer Manufacturers' Association is developing a standard for these languages. Both Netscape and Microsoft are members of the association and both have agreed that their future browsers will conform to the standard. The standard is called ECMAScript. It also is known as E-262 or ECMA262.

The first two editions of the ECMA262 report described a language that was quite limited. The third edition is more comprehensive and corresponds to the implementations in version 5.x of the two popular browsers.

The ECMAScript documents are more difficult reading than the documentation produced by the browser vendors but are more precise. Although they are primarily intended for developers of script interpreters, they are useful reading for anyone who wants a thorough understanding of the language.

There are also interpreters for JavaScript that run outside of the browser environment. These are implementations that run in servers and interpreters imbedded inside other applications.

The example program presented in this article, Peg Solitaire, works with versions of the language starting with JavaScript 1.2. The description of the language is based on the third version of ECMA262.

Some JavaScript Syntax

Variables and Scope

A variable is a container, the atom of the JavaScript cosmos. A container contains a value. A value can be primitive type like number, string, etc. or it can be an object. A variable can contain data of any type.

A variable has a name, its identifier. The identifier is associated with a scope that is either global or local to the function in which the variable is declared. When variables are created with a var keyword inside a function, the identifier is local to the function. Otherwise the variable is global in scope.

For example, the following would create a variable:

var i = 7;

There are actually two actions taken by the interpreter:

  • When the scope is entered, the identifier is associated with a variable, the value of which is undefined.
  • When the statement is interpreted, the value of 7 is assigned to the variable.

A variable may be created by an assignment statement, even if the assignment statement is in the body of a function, without using the keyword var. A variable thus created is global in scope. For example:

i = 7;

creates a global variable and puts 7 into it. The variable will be created when the statement is interpreted, rather than when the scope is entered.

Objects and Initializers

An object is a collection of properties. A property is a container. It has a name and contains a value.

There are several ways to create objects. One way is to use a constructor function. Constructor functions are not used in the sample code, but are described later in this article. Instead, all of our objects will be built with initializers.

An initializer is a list of properties separated by commas. The list is enclosed in curly braces. Consider the statement:

var blob = { color:"red", size:3 };

This creates an object with two properties named color and size. The value contained in the property, color, is the string "red". The left side of the statement, var blob, tells the interpreter to create a variable. The name blob is associated with the newly created variable. If the statement occurs within a function, the scope of the variable is local to the function. If the keyword var is omitted, the scope of the variable will be global.

A script can reference a property directly by name with this syntax:

blob.color

or it can use a string expression to refer to the property:

blob["color"]

Either of these references will return the value red.

The value of a property can be changed by an assignment like:

blob.color = "blue";

or:

blob["color"] = "blue";

New properties can be added to an object:

blob.weight = 3.14;

or:

blob["weight"] = 3.14;

The JavaScript object model is quite different from the object models that appear in C++ and Java. For example, the number and names of properties change dynamically, unlike members and methods. There are many other differences that I do not discuss here.

Arrays Are Objects

In a typical JavaScript object, properties are named with strings. There is a special kind of object in which the properties are named with numbers. These are arrays. Array initializers have square brackets. For example:

var codes = [ "black", "brown", "red", "orange" ];

creates an array object with four numbered properties, starting with 0. The third element in the array, codes[2], contains "red" .

Functions Are Objects

A function is also an object. The initializer for a function object is a function definition. There are two flavors of function definition: function declaration and function expression. They both produce the same kind of object.

A function declaration creates a new object and assigns the object to an identifier. The identifier is local to the scope in which the declaration appears. When a scope is entered, the function declarations are evaluated before any statements in the scope are interpreted. The form of function declaration is:

function Identifier ( FormalParamterListopt ) { 
FunctionBody }

The formal parameter list is a sequence of identifiers separated by commas. The opt indicates that the list may be empty. The function body is a series of statements and function declarations. The parameter list and body are bound to the identifier when the function declaration is interpreted.

An example of a function declaration is:

function a ( x ){return x+1}

The function expression looks much like a function declaration at first glance:

function Identifieropt ( FormalParamterListopt ) { FunctionBody }

The identifier is optional and is ignored if it does appear. This expression yields a value that is a function object. The value is used by the statement in which the expression appears. For example:

var a=function(x){return x+1}

works much like a function declaration except that the function object is created at the time the statement is executed, not when the scope is entered. The object will become the contents of the newly declared variable. The concept of considering a function as a data structure dates back to LISP programming's lambda expressions. These allow for some interesting programming styles.

The syntax of a function call is familiar. The function name is followed by a list of values to be substituted for the formal parameter. For example the expression:

a(4)

will have a value of 5 regardless of the definition, if a is declared with either of the above examples.

A function call is interpreted at runtime. Thus this fragment:

b=a;
b(4)

will also have the value of 5.

An Idiosyncrasy of Syntax (in case you were wondering)

The interpreter considers any statement that begins with the keyword function to be a function declaration. Consider this sequence:

function(x){return x+1}(7)

Although this is not a proper function declaration, the interpreter will accept it and create a function without assigning it to a container. The value of this sequence is the value of the expression statement, 7.

If the sequence starts with any other character, the part beginning with the keyword would be interpreted as a function expression. The following contain function expressions that behave like function calls. The value in each case is 8:

1,function(x){return x+1}(7)
(function(x){return x+1}(7))

Lambda Expressions in Object Initializers

In the sample code, objects are built using object initializers. The initializers for the properties are separated with commas. The function properties are defined with lambda expressions. Consider this example:

var setterGetter =
{
	dataPart:0,
	set: function ( x ) 
	{ 
		this.dataPart = x;
	},
	get: function ()
	{
		return this.dataPart;
	}
}

These functions would be called with statements like:

a=setterGetter.get();
setterGetter.set(7);

The keyword this refers to the current object. Inside this object initializer this.dataPart is synonymous with setterGetter.dataPart.

Note that the fields of an object initializer must be separated with commas. This technique achieves encapsulation of data and scoping. It eliminates some of the clutter involved in using constructor functions when you don't require them.

There is only one copy of setterGetter.dataPart. This is similar to the result of using the keyword static in Java and C++

Constructor Functions

The usual way to do things is to define a function that sets up an object. For example:

function SetterGetter ()
{
	this.dataPart = 0;
	this.set = function ( x ) 
	{ 
		this.dataPart = x;
	};
	this.get = function ()
	{
		return this.dataPart;
	};
}

A call to this function with the new keyword will create an object:

var aSetterGetter = new SetterGetter();

First a new object is created with default properties. Then the constructor is interpreted. This constructor adds properties to the newly created object. The this in the SetterGetter() function refers to the newly created object.

Thus aSetterGetter will acquire properties : aSetterGetter.set(), aSetterGetter.get(), and aSetterGetter.dataPart.

This mechanism allows the creation of something similar to an instance of a class in other languages. There is also a mechanism similar to inheritance. For a thorough discussion about how this works and the contrast with classes in C++ and Java see the Netscape Documents listed in the references section.

The objects in our sample code are each unique. We don't need anything like classes and can get rid of the extra steps required to use constructors.

Peg Solitaire

About the Game

The play area consists of holes containing pegs. They are arranged in a cross consisting of 33 holes. See Figure 1. The game is centuries old and has attracted the attention of many great minds — Gottfried Wilhelm Leibniz, Elwyn Berlekamp, John Conway, Martin Gardner, to name a few.

In the beginning every hole is filled except the one in the center. A move consists of peg jumping over an adjacent peg and landing in an empty hole two spaces away in one of four directions. There are no diagonal jumps. The jumped peg is removed. The object is to remove as many pegs as possible. At the end, one peg remaining constitutes a perfect score.

About the Program

The sample code displays the board in a web page. To view the script, open the web page in your browser and choose the menu command to view the source. The URL is:

http://www.stowlake.com/Solitaire

The program does not play the game. It does enforce the rules and performs housekeeping. Making a play is a two step process:

  • The user clicks on a peg to be moved. A smiling face appears on the peg, indicating that it is selected.
  • The user clicks on the hole where the peg is to go. The peg moves and the jumped peg disappears.

There are rollover effects to indicate legal selections.

The sample is completely contained within one HTML document. There is JavaScript code in both the head and body. The objects that do the work are defined in the head. In the body, JavaScript is used to generate HTML.

Objects Defined in the Head of the HTML Document

There is a set of variables assigned to object initializers in the head of page,

	PegBoard keeps track of which holes contain pegs.
	PegGame makes moves and interprets the rules.
	PegDisplay displays the board on the screen.
	PegControl keeps track of which peg is selected and displays it accordingly.
	PegMouse handles mouse events.
	PegMake generates the HTML for the playing board.

The statements defining these objects appear together, enclosed in HTML script tags specifying JavaScript 1.2.

List of Functions

Some of the functions listed below are described in this article. For the others, see the source code on the web.

	PegBoard.IsEmpty ( where )
	PegBoard.HasPeg ( where )
	PegBoard.RemovePeg ( where )
	PegBoard.PutPeg ( where )
	PegBoard.ClonePosition ()
	PegGame.Jump ( from, delta )
	PegGame.IsLegal ( from, delta )
	PegGame.JumpExistsFrom ( from )
	PegGame.InDeltaSet ( delta )
	PegGame.AreThereAny ()
	PegGame.Refresh ()
	PegDisplay.LoadImages ()
	PegDisplay.ShowImage ( where, what )
	PegDisplay.NormalImage ( where )
	PegDisplay.ShowNormal ( where )
	PegDisplay.ShowOver ( where )
	PegDisplay.ShowGameOver ()
	PegDisplay.ShowSelected ( where )
	PegDisplay.PegNumberToName ( where )
	PegControl.Select ( where )
	PegDisplay.Jump ( where, delta )
	PegDisplay.Redraw ()
	PegDisplay.Reset()
	PegMouse.Over ( where )
	PegDisplay.Out ( where )
	PegDisplay.Click ( where )
	PegMaker.MakePlace ( where )
	PegMaker.MakeRow ( left )
	PegMaker.MakeBoard ()
	PegMaker.MakeBody()
	Resizer.Install ()
	Resizer.Resize () 

where, from, and left are numbers identifying peg positions.

delta is the difference in peg numbers of adjacent peg positions.

what is a string representing the contents of a peg position - emptyHole, hasPeg, selectedPeg, etc.

Generating HTML Code for the Pegs in the Body of the HTML Document

Listing 1: The PegMaker object

PegMaker
PegMaker =
{
	//
	// Generate the strings to make the board in HTML
	//
	// An example, suppose where is 26
	//
	// <A HREF="#" 
	// onMouseOver="self.status=''; return PegMouse.Over(26)
	//	onMouseOut=PegMouse.Out(26) 
	// onMouseDown=self.status=''; return PegMouse.Click(26)>
	//	<IMG SRC="
	// 

	MakePlace: function ( where )
	{
		var result = '<A HREF="#"';
		result+= ' onMouseOver='	
			+ '"self.status=' + "''"+';return PegMouse.
        Over(' + where + ')"';
		result+= ' onMouseOut='
			+ '"PegMouse.Out(' + where + ')"';
		result+= ' onMouseDown='
			+ '"self.status=' + "''"
			+';return PegMouse.Click(' + where + ')">';
		result+= '<IMG src="' + pegdisplay.normalimage(where) + '"';
		result+= 'BORDER="0" HEIGHT="60" WIDTH="60"';
		result+= ' NAME=' 
			+ '"' + PegDisplay.PegNumberToName( where )+ '">';
		result += '</A>';
		return result;
	},
	
	MakeRow: function ( left )
	{
		var result = '<TR>';
		for ( var where=left; where<(left+7); where++ )
			result += '<TD>' + this.MakePlace ( where ) + '</TD>';
		result += '</TR>';
		return result;
	},	
	
	MakeBoard: function ()
	{
		var result = '<TABLE BORDER="0" CELLSPACING="0"'
			+' CELLPADDING="0">';
		for ( var where=24; where<101; where+= 11 )
			result += this.MakeRow ( where );
		result += '</TABLE>';
		return result;
	},
	
	MakeBody: function()
	{
		var boardHTML = this.MakeBoard();
		document.write 
			( '<BODY BGCOLOR="#A7DDDD">' );
		document.write ( '<DIV ALIGN="center">' );
		document.write ( '<P>' );
		document.write ( boardHTML );
		document.write ( '</P>' );
		document.write ( '</DIV>' );
		document.write ( '	</BODY>' );
	}
}

The PegMaker object constructs the body of the web page. MakeBody() is the top level function. It writes a series of strings to the current document. When the call to the document.write() function is executed, the generated HTML is fed to the browser to be interpreted.

MakeBody() wraps the board with tags to display the board centered on the screen and with the appropriate background.

MakeBoard() constructs a string which contains the HTML tags to generate a table.

The table is a square array of cells. We assign numbers to each of the cells:

	   24,25,26,27,28,29,30,
	   35,36,37,38,39,40,41,
	   46,47,48,49,50,51,52,
	   57,58,59,60,61,62,63,
	   68,69,70,71,72,73,74,
	   79,80,81,82,83,84,85,
	   90,91,92,93,94,95,96

creating a 7x7 area inside an 11x11 frame. These elements correspond to the playing area:

	         26,27,28,
	         37,38,39,
	   46,47,48,49,50,51,52,
	   57,58,59,60,61,62,63,
	   68,69,70,71,72,73,74,
	         81,82,83,
	         92,93,94

Position 24 is used to display a message when there are no more legal moves. Position 96 is a reset button. The other elements take no role in the game and display the image noHole. This numbering system simplifies the move calculations done by the PegGame object.

MakePeg() generates a string for each cell. It consists of an <A> tag which contains an <IMG> tag. The <IMG> tag has a NAME attribute formed by the Peg preface followed by the number. For example, NAME="Peg26".

There are attributes, onMouseOver, onMouseDown, and onMouseOut, assigned to each <A> tag . The value of each of these is JavaScript code that calls functions that are defined in the header, PegMouse.Over(), PegMouse.Out(), and PegMouse.Click(). The peg number is passed as an argument to the PegMouse function.

The Main Program

Listing 2: The Main Program

PegDisplay

  <!— The body will be generated by this script. —>
  <SCRIPT LANGUAGE="JavaScript1.2">
  <!—HIDE
    Resizer.Install();				// Set up event handler for resizing
    PegDisplay.LoadImages();		// Preloads images 
    PegMaker.MakeBody();				// Genereate tags-uses preloaded images
    PegControl.Reset();				// Set up the board and show it.
  //NOHIDE—> 
  </SCRIPT>

Instead of having a body in the HTML file, there is a JavaScript that creates the body. This is the top level of the program, playing the role of main(). See Listing 2. This code calls functions defined in the header.

The script initializes an event handler for resize events in Netscape and then loads the images that can appear in the board display. Once these are in place, the HTML that will be the body of the page is generated by the call to PegMaker.MakeBody(). Once the tags are created, the board is set up in the starting position.

Swapping Images

Listing 3: The PegDisplay Object

PegDisplay

PegDisplay = 
{
	// File paths for images that can go on board.
	ImageList :
	{ 
		noHole:"PegSolitGifs/nohole.gif",
		overHole:"PegSolitGifs/overhole.gif",
		emptyHole:"PegSolitGifs/emptyhole.gif",
		hasPeg:"PegSolitGifs/haspeg.gif",
		overPeg:"PegSolitGifs/overpeg.gif",
		selectedPeg:"PegSolitGifs/selectpeg.gif",
		gameOver:"PegSolitGifs/gameover.gif",
		resetButton:"PegSolitGifs/reset.gif"
	},

	StoredImages : new Array(),
	
	// Make sure all the images are in memory. Doing this makes
	// the display of these images smooth.
	LoadImages : function ()
	{
		for ( imagePath in PegDisplay.ImageList )
		{
			PegDisplay.StoredImages[imagePath] = new Image();
			PegDisplay.StoredImages[imagePath].src = PegDisplay.ImageList[imagePath];
		}
	},
	
	// Show specified image and place
	ShowImage: function ( where, what )
	{
		var name = this.PegNumberToName(where);
		document[name].src=
			this.ImageList[what];
	},
	// Show the no rollover, not selected image for where.
	NormalImage: function ( where )
	{
		var what = 
			PegBoard.IsEmpty ( where )
				? "emptyHole"
				: PegBoard.HasPeg ( where )
					? "hasPeg"
					: where == PegBoard.resetPosition
						? "resetButton"
						: "noHole";
		return what;
	},
	// 
	// All these Show... functions assign
	// a file path to the source for the 
	// image.
	//	
	ShowNormal: function ( where )
	{
		PegDisplay.ShowImage ( where,
			PegDisplay.NormalImage(where) );
	},	
	// Hilite hole that can be destination of current selection or
	// peg that can make a legal move.
	ShowOver: function ( where )
	{
		if ( PegGame.IsLegal ( PegControl.selection, 
			(where-PegControl.selection)/2 ) )
				this.ShowImage ( where, "overHole" );
		else if ( where!=PegControl.selection 
			&& PegGame.JumpExistsFrom ( where ) )
				this.ShowImage ( where, "overPeg" );
	},
	
	ShowGameOver: function ()
	{
		this.ShowImage ( PegBoard.gameOverPosition, "gameOver" );
	},
	
	ShowSelected: function ( where )
	{
		if ( where )
			this.ShowImage ( where, "selectedPeg" );
	},
	
	// Form the name to refer to the peg.
	PegNumberToName : function ( where )
	{
		return "Peg" + where;
	}

}

The program reacts to mouse events by changing the .gif that is assigned to one or more peg positions. The .gif files are referred to by these names:

  • noHole is the image displayed outside the playing area.
  • emptyHole is the normal appearance of an empty hole.
  • overHole appears when the mouse is over a hole to which the currently selected peg can jump.
  • hasPeg is the normal appearance of a peg.
  • selectedPeg shows a peg ready to move.
  • overPeg is displayed when the mouse is over a peg for which a legal move exists-that is, a peg that can become selected.
  • gameOver is displayed in position 24 when there are no legal moves on the board.
  • resetButton is always displayed in position 96.

These are shown in Figure 2.

The function PegDisplay.LoadImages() sends requests to load the .gif files. It is called before they are actually needed to display. This prevents an annoying delay the first time the user moves the mouse over a selectable peg. For each .gif that it is loaded, a new Image object is created and assigned to an element of the array PegDisplay.ImageList. This is the same type of object that the browser creates for an <IMG>.

The actual request to get the file comes when this statement is executed:

PegDisplay.StoredImages[imagePath].src = 	PegDisplay.ImageList[imagePath];

This assigns a URL from the PegDisplay.ImageList to the src property of the newly created Image object. Image objects watch for a change in the src property. When it changes, a handler in the Image object tries to get the image data. If the image hasn't already been loaded, it sends a request to the server to get the specified image file. If the Image object was created by an <IMG> tag, the display on the screen will also change.

The Image objects created by tags in the peg board each have a NAME attribute based on the position number. The value of that attribute is used as the name of a property in the document object. For example, document["Peg26"] refers to Image object created by the browser when it interpreted the <IMG> tag that specified the attribute NAME="Peg26". When the name of a .gif file is placed in the src property of that object, the image displayed in position 26 will change accordingly.


Figure 2. Images that are swapped in the board display.

Conclusions

JavaScript has some powerful features that make it an interesting programming language, and it offers many choices for programming style. Even if you've developed a good understanding of how to create a lucid program in C++ or Java, you'll find that JavaScript presents its own set of challenges.

This article showed that a practical program can be created using lambda expressions. They offer a means to create clean code. There are other uses for lambda expressions. This article showed only one application.

Some of the mechanics of interaction with the browser were also demonstrated. As the standard for web pages evolves, the role of JavaScript will grow. We can only hope that the cross-browser compatibility problems will abate.

References

The code described in this article is available at these locations:

Choose the menu command from your browser to view the source.

If you work with JavaScript, you will need to download the documentation on the net. There are several books, though the language is a little too new and still changing too fast for books to keep up. My favorite is JavaScript, The Definitive Guide by David Flanagan, published by O'Reilly, although it is not definitive.

Netscape publishes a variety of documents on JavaScript. A good starting point would be the Client-Side JavaScript Guide:

http://developer.netscape.com/docs/manuals/js/client/jsguide/contents.htm

Microsoft calls its version of JavaScript JScript. Documentation is at:

http://msdn.microsoft.com/scripting/default.htm?/scripting/JScript/doc/Jstoc.htm

The official standard is ECMAScript. The publication of the standard lags behind the implementation in browsers. The features illustrated here will be described in the third edition of the ECMA standard. See:

http://ecma.ch/stand/ECMA-262.htm

A shell to test code fragments in JavaScript is available at:

http://www.stowlake.com/JavaScriptShell/

Credits

Thanks to Victoria Leonard for producing the artwork. Thanks to Bob Ackerman, Mark Terry and Victoria Leonard for proofreading.

Thanks to Jan van den Beld, ECMA Secretary General, for explaining some fine points of the ECMA- 262 standard.


Danny Swarzman writes programs in JavaScript, Java, C++ and other languages. He also plays Go and grows potatoes. You can contact him with comments and job offers. mailto:dannys@stowlake.com, http://www.stowlake.com

 
AAPL
$100.53
Apple Inc.
+1.37
MSFT
$45.33
Microsoft Corpora
+0.22
GOOG
$586.86
Google Inc.
+4.70

MacTech Search:
Community Search:

Software Updates via MacUpdate

Apple Motion 5.1.2 - Create and customiz...
Apple Motion is designed for video editors, Motion 5 lets you customize Final Cut Pro titles, transitions, and effects. Or create your own dazzling animations in 2D or 3D space, with real-time... Read more
A Better Finder Rename 9.39 - File, phot...
A Better Finder Rename is the most complete renaming solution available on the market today. That's why, since 1996, tens of thousands of hobbyists, professionals and businesses depend on A Better... Read more
PopChar X 6.6 - Floating window shows av...
PopChar X helps you get the most out of your font collection. With its crystal-clear interface, PopChar X provides a frustration-free way to access any font's special characters. Expanded... Read more
MacUpdate Desktop 6.0.2 - Install Mac ap...
MacUpdate Desktop 6 brings seamless 1-click installs and version updates to your Mac. With a free MacUpdate account and MacUpdate Desktop 6, Mac users can now install almost any Mac app on macupdate.... Read more
PDFpenPro 6.3.2 - Advanced PDF toolkit f...
PDFpenPro allows users to edit PDF's easily. Add text, images and signatures. Fill out PDF forms. Merge or split PDF documents. Reorder and delete pages. Even correct text and edit graphics! Create... Read more
PDFpen 6.3.2 - Edit and annotate PDFs wi...
PDFpen allows users to easily edit PDF's. Add text, images and signatures. Fill out PDF forms. Merge or split PDF documents. Reorder and delete pages. Even correct text and edit graphics! Features... Read more
OS X Yosemite 10.10 DP6 - Developer Prev...
Note: This is a Developer Preview. You must be a registered Apple Mac Developer to download this update. You can also sign up for the free OS X Beta Program to download and preview public beta... Read more
Flavours 1.1.15 - Create and apply theme...
Flavours is a Mac application that allow users to create, apply and share beautifully designed themes. Classy Give your Mac a gorgeous new look by applying delicious themes! Easy Unleash your... Read more
EtreCheck 1.9.14 - For troubleshooting y...
EtreCheck is a simple little app to display the important details of your system configuration and allow you to copy that information to the Clipboard. It is meant to be used with Apple Support... Read more
iFFmpeg 4.5 - Convert multimedia files b...
iFFmpeg is a graphical front-end for FFmpeg, a command-line tool used to convert multimedia files between formats. The command line instructions can be very hard to master/understand, so iFFmpeg does... Read more

Latest Forum Discussions

See All

Go to Bed – An Interview With Touchfight...
Touchfight Games is an exciting new indie studio that was co-formed between game journalist and author Nathan Meunier, artist Leonard Kenyon, and programmer Jon Kenyon. Their debut game Go To Bed will be released this fall, and with all the... | Read more »
Assault Vector Review
Assault Vector Review By Rob Thomas on August 19th, 2014 Our Rating: :: SIMPLE STRATEGYUniversal App - Designed for iPhone and iPad While this hex-based warp ride is fine in theory, Assault Vector is a bit too simple to be... | Read more »
Tom Hanks’ Hanx Writer has Taken the App...
Tom Hanks’ Hanx Writer has Taken the App Store by Storm Posted by Jessica Fisher on August 19th, 2014 [ permalink ] iPad Only App - Designed for the iPad | Read more »
It Came from Canada: Galaxy Dash
With its use of well-established tropes like endless flying and sci-fi space shooting, the upcoming Galaxy Dash: Race to the Outer Run most likely won’t confound expectations. However, with its robust amount of opportunities for fun player... | Read more »
PromptSmart Review
PromptSmart Review By Jennifer Allen on August 19th, 2014 Our Rating: :: SNAPPY SPEECHGIVINGUniversal App - Designed for iPhone and iPad Offering you a teleprompter in your pocket, PromptSmart is immensely helpful for those who do... | Read more »
The Firm (Games)
The Firm 1 Device: iOS iPhone Category: Games Price: $.99, Version: 1 (iTunes) Description: RELEASE SPECIAL SALE 50%! Welcome to THE FIRM, Your profil retained our full consideration and we have the pleasure to inform you that your... | Read more »
They Need To Be Fed 3 (Games)
They Need To Be Fed 3 1.0.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0.0 (iTunes) Description: 360 degree gravity platforming is back! Run, jump, collect, avoid enemies and feed yourself to the monster at the... | Read more »
Who Wore it Best? Phantom Flower vs. And...
Who Wore it Best? takes a break from all the bloodshed to check out two decidedly tranquil and nature-loving puzzles games: Phantom Flower and And Then it Rained. [ Who Wore it Best? Phantom Flower vs. And Then it Rained is a post from... | Read more »
Sentinel 4: Dark Star Review
Sentinel 4: Dark Star Review By Jennifer Allen on August 19th, 2014 Our Rating: :: STURDY TOWER DEFENSEUniversal App - Designed for iPhone and iPad After 4 years, the latest entry to the Sentinel series is here. It’s not quite as... | Read more »
TrashEver2 - You can move your selected...
TrashEver2 - You can move your selected notes to trash box. 1.0.0 Device: iOS Universal Category: Productivity Price: $.99, Version: 1.0.0 (iTunes) Description: TrashEver is an application only for throwing away the note of Evernote... | Read more »

Price Scanner via MacPrices.net

15-inch 2.2GHz MacBook Pro on sale for $1899,...
Adorama has the new 15″ 2.2GHz Retina MacBook Pro on sale for $1899 including free shipping plus NY & NJ sales tax only. Their price is $100 off MSRP, and it’s the lowest price available for this... Read more
Mid-Size Tablet Shootout Posted: iPad mini wi...
I ‘m curious about how many iPads Apple is actually selling these days. It’s been widely rumored and anticipated that new models with A8 SoCs, 2 GB of RAM, 8 megapixel cameras, and fingerprint... Read more
The 15 Biggest iPad Air Problems And How To A...
What’s this? Fifteen “biggest” problems with the iPad Air? Does that mean there are a lot of smaller problems as well? Say it isn’t so! My old iPad 2 has manifested no hardware problems in three... Read more
TYLT Syncable-Duo, 2-in-1 USB Cable With Appl...
TYLT has introduced the Syncable-Duo, a universal cable solution for charging and syncing data to smartphones and tablets. The Syncable-Duo eliminates the need for multiple cables by incorporating... Read more
Save up to $140 off MSRP with Apple refurbish...
Apple is offering Certified Refurbished iPad Airs for up to $140 off MSRP. Apple’s one-year warranty is included with each model, and shipping is free. Stock tends to come and go with some of these... Read more
2.5GHz Mac mini on sale for $549, save $50
B&H Photo has the 2.5GHz Mac mini on sale for $549.99 including free shipping. That’s $50 off MSRP, and B&H will also include a free copy of Parallels Desktop software. NY sales tax only. Read more
Chromebooks Are Actually Sometimes A Better C...
Mac360′s Kate MacKenzie notes that when Steve Jobs announced the post-PC era, he was assuming that the dominant post-PC device would be the iPad he was unveiling, or another Apple product like the... Read more
Files-Finder Edition 1.0 app Brings Finder/Ex...
Appsicum’s Files Finder App is designed for iPad users who miss the functionality of the OS X Finder and Windows’ Explorer on their tablet. Files-Finder Edition App is a complete tool having rich... Read more
Apple and Samsung Both Face Growth Declines I...
As the tablet PC market matures and growth slows, the dominance of market leaders Apple and Samsung is also weakening, according to the latest NPD DisplaySearch Monthly Tablet PC Panel Shipment... Read more
Target online offers $50 off iPad Air, $100 o...
Target has iPad Airs on sale for $50 off MSRP and the 16GB iPad mini on sale for $199 on their online store this week only. Choose free shipping or free local store pickup (if available). Prices are... Read more

Jobs Board

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
Position Opening at *Apple* - Apple (United...
**Job Summary** As businesses discover the power of Apple computers and mobile devices, it's your job - as a Solutions Engineer - to show them how to introduce these Read more
Position Opening at *Apple* - Apple (United...
**Job Summary** As more and more people discover Apple , they visit our stores seeking ways to incorporate our products into their lives. It's your job, as a Store Read more
Position Opening at *Apple* - Apple (United...
**Job Summary** Being a Business Manager at an Apple Store means you're the catalyst for businesses to discover and leverage the power, ease, and flexibility of Apple 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.