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

CrossOver 14.1.3 - Run Windows apps on y...
CrossOver can get your Windows productivity applications and PC games up and running on your Mac quickly and easily. CrossOver runs the Windows software that you need on Mac at home, in the office,... Read more
Little Snitch 3.5.3 - Alerts you about o...
Little Snitch gives you control over your private outgoing data. Track background activity As soon as your computer connects to the Internet, applications often have permission to send any... Read more
OmniGraffle Pro 6.2.3 - Create diagrams,...
OmniGraffle Pro helps you draw beautiful diagrams, family trees, flow charts, org charts, layouts, and (mathematically speaking) any other directed or non-directed graphs. We've had people use... Read more
OmniFocus 2.2 - GTD task manager with iO...
OmniFocus helps you manage your tasks the way that you want, freeing you to focus your attention on the things that matter to you most. Capturing tasks and ideas is always a keyboard shortcut away in... Read more
Cocktail 8.4 - General maintenance and o...
Cocktail is a general purpose utility for OS X that lets you clean, repair and optimize your Mac. It is a powerful digital toolset that helps hundreds of thousands of Mac users around the world get... Read more
PDFKey Pro 4.3 - Edit and print password...
PDFKey Pro can unlock PDF documents protected for printing and copying when you've forgotten your password. It can now also protect your PDF files with a password to prevent unauthorized access and/... Read more
Kodi 15.0.beta1 - Powerful media center...
Kodi (was XBMC) is an award-winning free and open-source (GPL) software media player and entertainment hub that can be installed on Linux, OS X, Windows, iOS, and Android, featuring a 10-foot user... Read more
DiskCatalogMaker 6.4.12 - Catalog your d...
DiskCatalogMaker is a simple disk management tool which catalogs disks. Simple, light-weight, and fast. Finder-like intuitive look and feel. Super-fast search algorithm. Can compress catalog data... Read more
Macs Fan Control 1.3.0.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
Lyn 1.5.11 - Lightweight image browser a...
Lyn is a lightweight and fast image browser and viewer designed for photographers, graphic artists and Web designers. Featuring an extremely versatile and aesthetically pleasing interface, it... Read more

Battle of Gods: Ascension (Games)
Battle of Gods: Ascension 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: TURN-BASED TACTICAL COMBATFight tactical battles against the forces of Hades! In Battle of Gods: Ascension you play... | Read more »
Shadowmatic's Latest Update Adds a...
Shadowmatic's shadowy shadow-ness is getting a little shadowy-er thanks to a recent update that adds an Arcade Mode. [Read more] | Read more »
Sunrise Calendar and Slack Have Assimila...
Wunderlist is perhaps one of the most populat and beloved productivity apps on the App Store - and now it's gone and incorporated itself into other useful services like Sunrise Calendar and Slack. [Read more] | Read more »
Crossy Road Devs Hipster Whale are Bring...
Hipster Whale, the minds behind the rather popular (and rather great) Crossy Road, have teamed-up with Bandai Namco to create PAC-MAN 256: an absolutely bonkers looking maze runner chaser thing. | Read more »
Meet the New Spotify Music
Spotify Music  has a lot going on. They're introducing 3 new modes to serve all your musical needs, with the "Now" start page  gives you curated playlists based on your particular tastes. As you listen the app will learn more about your tastes and... | Read more »
What the Apple Watch Gets Right, and Wha...
| Read more »
Celebrate PAC-MAN's 35th Birthday W...
BANDAI NAMCO Entertainment America is celebrating PAC-MAN's 35th anniversary by releasing updates for PAC-MAN and PAC-MAN Lite for iOS. [Read more] | Read more »
Strike Wing Episode 2 has Landed on the...
Strike Wing: Raptor Rising is an exciting space combat simulator by Crescent Moon Games, which was recently updated to continue the story with Episode 2. [Read more] | Read more »
Kiqplan Expands its Interactive Coaching...
The makers of Fitbug have been hard at work on their Kiqplan lineup, and have added four new summer themed plans to help you get the most out of your workout. [Read more] | Read more »
Make a Photobook in Minutes with Pictyea...
What happens when you can't stop taking photos and have an urge to create a photobook? Pictyear saves the day. [Read more] | Read more »

Price Scanner via MacPrices.net

What Would the ideal Apple Productivity Platf...
For the past four years I’ve kept a foot in both the Mac and iPad camps respectively. my daily computing hours divided about 50/50 between the two devices with remarkable consistency. However, there’... Read more
PageMeUp 1.2.1 Ten Dollar Page Layout Applica...
Paris, France-based Softobe, an OS X software development company, has announced that their PageMeUp v. 1.2.1, is available on the Mac App Store for $9.99. The license can be installed on up to 5... Read more
Eight New Products For USB Type-C Application...
Fresco Logic, specialists in advanced connectivity technologies and ICs, has introduced two new product families targeting the Type-C connector recently introduced across a number of consumer... Read more
Scripps National Spelling Bee Launches Buzzwo...
Scripps National Spelling Bee fans can monitor the action at the 2015 Spelling Bee with the new Buzzworthy app for iOS, Android and Windows mobile devices. The free Buzzworthy app provides friendly... Read more
13-inch 2.5GHz MacBook Pro on sale for $120 o...
B&H Photo has the 13″ 2.5GHz MacBook Pro on sale for $979 including free shipping plus NY sales tax only. Their price is $120 off MSRP, and it’s the lowest price for this model (except for Apple’... Read more
27-inch 3.3GHz 5K iMac on sale for $1899, $10...
B&H Photo has the new 27″ 3.3GHz 5K iMac on sale for $1899.99 including free shipping plus NY tax only. Their price is $100 off MSRP. Read more
Save up to $50 on iPad Air 2, NY tax only, fr...
B&H Photo has iPad Air 2s on sale for up to $50 off MSRP including free shipping plus NY sales tax only: - 16GB iPad Air 2 WiFi: $469 $30 off - 64GB iPad Air 2 WiFi: $549.99 $50 off - 128GB iPad... Read more
Updated Mac Price Trackers
We’ve updated our Mac Price Trackers with the latest information on prices, bundles, and availability on systems from Apple’s authorized internet/catalog resellers: - 15″ MacBook Pros - 13″ MacBook... Read more
New 13-inch 2.9GHz Retina MacBook Pro on sale...
B&H Photo has the 13″ 2.9GHz/512GB Retina MacBook Pro on sale for $1699.99 including free shipping plus NY tax only. Their price is $100 off MSRP, and it’s the lowest price for this model from... Read more
Apple refurbished 2014 MacBook Airs available...
The Apple Store has Apple Certified Refurbished 2014 MacBook Airs available starting at $679. An Apple one-year warranty is included with each MacBook, and shipping is free: - 11″ 1.4GHz/128GB... Read more

Jobs Board

Senior Software Engineer - *Apple* SIM - Ap...
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
Lead *Apple* Solutions Consultant - Retail...
**Job Summary** Job Summary The Lead ASC is an Apple employee who serves as the Apple business manager and influencer in a hyper-business critical Reseller's store Read more
Architect / Senior Software Engineer, *Apple...
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
*Apple* Pay Support Readiness Project Manage...
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
Hardware Design Validation Engineer - *Apple...
**Job Summary** The Apple Watch team is looking for a Hardware Design Validation Engineer. This person will be part of the Apple Watch hardware team with Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.