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

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Macs Fan Control 1.3.1.0 - Monitor and c...
Macs Fan Control allows you to monitor and control almost any aspect of your computer's fans, with support for controlling fan speed, temperature sensors pane, menu-bar icon, and autostart with... Read more
NetShade 6.3.1 - Browse privately using...
NetShade is an anonymous proxy and VPN app+service for Mac. Unblock your Internet through NetShade's high-speed proxy and VPN servers spanning seven countries. NetShade masks your IP address as you... Read more
Dragon Dictate 4.0.7 - Premium voice-rec...
With Dragon Dictate speech recognition software, you can use your voice to create and edit text or interact with your favorite Mac applications. Far more than just speech-to-text, Dragon Dictate lets... Read more
Persecond 1.0.2 - Timelapse video made e...
Persecond is the easy, fun way to create a beautiful timelapse video. Import an image sequence from any camera, trim the length of your video, adjust the speed and playback direction, and you’re done... Read more
GIMP 2.8.14p2 - Powerful, free image edi...
GIMP is a multi-platform photo manipulation tool. GIMP is an acronym for GNU Image Manipulation Program. The GIMP is suitable for a variety of image manipulation tasks, including photo retouching,... Read more
Sandvox 2.10.2 - Easily build eye-catchi...
Sandvox is for Mac users who want to create a professional looking website quickly and easily. With Sandvox, you don't need to be a Web genius to build a stylish, feature-rich, standards-compliant... Read more
LibreOffice 5.0.1.2 - Free, open-source...
LibreOffice is an office suite (word processor, spreadsheet, presentations, drawing tool) compatible with other major office suites. The Document Foundation is coordinating development and... Read more
f.lux 36.1 - Adjusts the color of your d...
f.lux makes the color of your computer's display adapt to the time of day, warm at night and like sunlight during the day. Ever notice how people texting at night have that eerie blue glow? Or wake... Read more
VirtualBox 5.0.2 - x86 virtualization so...
VirtualBox is a family of powerful x86 virtualization products for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers... Read more
File Juicer 4.43 - Extract images, video...
File Juicer is a drag-and-drop can opener and data archaeologist. Its specialty is to find and extract images, video, audio, or text from files which are hard to open in other ways. In computer... Read more

ReBoard: Revolutionary Keyboard (Utilit...
ReBoard: Revolutionary Keyboard 1.0 Device: iOS Universal Category: Utilities Price: $1.99, Version: 1.0 (iTunes) Description: Do everything within the keyboard without switching apps! If you are in WhatsApp, how do you schedule a... | Read more »
Tiny Empire (Games)
Tiny Empire 1.1.3 Device: iOS Universal Category: Games Price: $2.99, Version: 1.1.3 (iTunes) Description: Launch cannonballs and blow tiny orcs into thousands of pieces in this intuitive fantasy-themed puzzle shooter! Embark on an... | Read more »
Astropad Mini (Productivity)
Astropad Mini 1.0 Device: iOS iPhone Category: Productivity Price: $4.99, Version: 1.0 (iTunes) Description: *** 50% off introductory price! ​*** Get the high-end experience of a Wacom tablet at a fraction of the price with Astropad... | Read more »
Emo Chorus (Music)
Emo Chorus 1.0.0 Device: iOS Universal Category: Music Price: $1.99, Version: 1.0.0 (iTunes) Description: Realistic Choir simulator ranging from simple Chorus emulation to full ensemble Choir with 128 members. ### introductory offer... | Read more »
Forest Spirit (Games)
Forest Spirit 1.0.5 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0.5 (iTunes) Description: | Read more »
Ski Safari 2 (Games)
Ski Safari 2 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: The world's most fantastical, fun, family-friendly skiing game is back and better than ever! Play as Sven's sister Evana, share... | Read more »
Lara Croft GO (Games)
Lara Croft GO 1.0.47768 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0.47768 (iTunes) Description: Lara Croft GO is a turn based puzzle-adventure set in a long-forgotten world. Explore the ruins of an ancient... | Read more »
Whispering Willows (Games)
Whispering Willows 1.23 Device: iOS Universal Category: Games Price: $4.99, Version: 1.23 (iTunes) Description: **LAUNCH SALE 50% OFF** - Whispering Willows is on sale for 50% off ($4.99) until September 9th. | Read more »
Calvino Noir (Games)
Calvino Noir 1.1 Device: iOS iPhone Category: Games Price: $3.99, Version: 1.1 (iTunes) Description: The film noir stealth game. Calvino Noir is the exploratory, sneaking adventure through the 1930s European criminal underworld.... | Read more »
Angel Sword (Games)
Angel Sword 1.0 Device: iOS Universal Category: Games Price: $6.99, Version: 1.0 (iTunes) Description: Prepare to adventure in the most epic full scale multiplayer 3D RPG for mobile! Experience amazing detailed graphics in full HD.... | Read more »

Price Scanner via MacPrices.net

iPad Air 2 on sale for up to $100 off MSRP
Best Buy has iPad Air 2s on sale for up to $100 off MSRP on their online store for a limited time. Choose free shipping or free local store pickup (if available). Sale prices available for online... Read more
MacBook Airs on sale for $100 off MSRP
Best Buy has MacBook Airs on sale for $100 off MSRP on their online store. Choose free shipping or free local store pickup (if available). Sale prices for online orders only, in-store prices may vary... Read more
Big Grips Lift Handle For iPad Air and iPad A...
KEM Ventures, Inc. which pioneered the extra-large, super-protective iPad case market with the introduction of Big Grips Frame and Stand in 2011, is launching Big Grips Lift featuring a new super-... Read more
Samsung Launches Galaxy Tab S2, Its Most Powe...
Samsung Electronics America, Inc. has announced the U.S. release of the Galaxy Tab S2, its thinnest, lightest, ultra-fast tablet. Blending form and function, elegant design and multitasking power,... Read more
Tablet Screen Sizes Expanding as iPad Pro App...
Larger screen sizes are gaining favor as the tablet transforms into a productivity device, with shipments growing 185 percent year-over-year in 2015. According to a new Strategy Analytics’ Tablet... Read more
Today Only: Save US$50 on Adobe Elements 13;...
Keep the memories. lose the distractions. Summer’s winding down and it’s time to turn almost perfect shots into picture perfect memories with Elements 13. And get the power to edit both photos and... Read more
1.4GHz Mac mini on sale for $449, save $50
Best Buy has the 1.4GHz Mac mini on sale for $50 off MSRP on their online store. Choose free shipping or free local store pickup (if available). Price for online orders only, in-store price may vary... Read more
12-inch 1.1GHz Gold MacBook on sale for $1149...
B&H Photo has the 12″ 1.1GHz Gold Retina MacBook on sale for $1149.99 including free shipping plus NY sales tax only. Their price is $150 off MSRP, and it’s the lowest price available for this... Read more
27-inch 3.3GHz 5K iMac on sale for $1849, sav...
Best Buy has the 27″ 3.3GHz 5K iMac on sale for $1849.99. Their price is $150 off MSRP, and it’s the lowest price available for this model. Choose free shipping or free local store pickup (if... Read more
Worldwide Tablet Shipments Expected to Declin...
Does Apple badly need a touchscreen convertible/hybrid laptop MacBook? Yes, judging from a new market forecast from the International Data Corporation (IDC) Worldwide Quarterly Tablet Tracker, which... Read more

Jobs Board

*Apple* Retail Online Store: Customer Insigh...
**Job Summary** Apple Retail (Online Store) is seeking an experienced e-commerce analytics professional to join the Customer Insights Team. The Web e-Commerce Analyst Read more
*Apple* Music, Business Operations - Apple I...
Changing the world is all in a day039s work at Apple . If you love innovation, here039s your chance to make a career of it. You039ll work hard. But the job comes with Read more
WW *Apple* Retail Online Store: Customer In...
**Job Summary** The Apple Retail - Online Store is seeking an experienced web merchandising analytics professional to join the Customer Insights Team. The Web Read more
Senior Payments Security Manager - *Apple*...
**Job Summary** Apple , Inc. is looking for a highly motivated, innovative and hands-on senior payments security manager to join the Apple Pay security team. You will Read more
Software QA Engineer, *Apple* Pay Security...
**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
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.