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

Latest Forum Discussions

See All

Make the passage of time your plaything...
While some of us are still waiting for a chance to get our hands on Ash Prime - yes, don’t remind me I could currently buy him this month I’m barely hanging on - Digital Extremes has announced its next anticipated Prime Form for Warframe. Starting... | Read more »
If you can find it and fit through the d...
The holy trinity of amazing company names have come together, to release their equally amazing and adorable mobile game, Hamster Inn. Published by HyperBeard Games, and co-developed by Mum Not Proud and Little Sasquatch Studios, it's time to... | Read more »
Amikin Survival opens for pre-orders on...
Join me on the wonderful trip down the inspiration rabbit hole; much as Palworld seemingly “borrowed” many aspects from the hit Pokemon franchise, it is time for the heavily armed animal survival to also spawn some illegitimate children as Helio... | Read more »
PUBG Mobile teams up with global phenome...
Since launching in 2019, SpyxFamily has exploded to damn near catastrophic popularity, so it was only a matter of time before a mobile game snapped up a collaboration. Enter PUBG Mobile. Until May 12th, players will be able to collect a host of... | Read more »
Embark into the frozen tundra of certain...
Chucklefish, developers of hit action-adventure sandbox game Starbound and owner of one of the cutest logos in gaming, has released their roguelike deck-builder Wildfrost. Created alongside developers Gaziter and Deadpan Games, Wildfrost will... | Read more »
MoreFun Studios has announced Season 4,...
Tension has escalated in the ever-volatile world of Arena Breakout, as your old pal Randall Fisher and bosses Fred and Perrero continue to lob insults and explosives at each other, bringing us to a new phase of warfare. Season 4, Into The Fog of... | Read more »
Top Mobile Game Discounts
Every day, we pick out a curated list of the best mobile discounts on the App Store and post them here. This list won't be comprehensive, but it every game on it is recommended. Feel free to check out the coverage we did on them in the links below... | Read more »
Marvel Future Fight celebrates nine year...
Announced alongside an advertising image I can only assume was aimed squarely at myself with the prominent Deadpool and Odin featured on it, Netmarble has revealed their celebrations for the 9th anniversary of Marvel Future Fight. The Countdown... | Read more »
HoYoFair 2024 prepares to showcase over...
To say Genshin Impact took the world by storm when it was released would be an understatement. However, I think the most surprising part of the launch was just how much further it went than gaming. There have been concerts, art shows, massive... | Read more »
Explore some of BBCs' most iconic s...
Despite your personal opinion on the BBC at a managerial level, it is undeniable that it has overseen some fantastic British shows in the past, and now thanks to a partnership with Roblox, players will be able to interact with some of these... | Read more »

Price Scanner via MacPrices.net

You can save $300-$480 on a 14-inch M3 Pro/Ma...
Apple has 14″ M3 Pro and M3 Max MacBook Pros in stock today and available, Certified Refurbished, starting at $1699 and ranging up to $480 off MSRP. Each model features a new outer case, shipping is... Read more
24-inch M1 iMacs available at Apple starting...
Apple has clearance M1 iMacs available in their Certified Refurbished store starting at $1049 and ranging up to $300 off original MSRP. Each iMac is in like-new condition and comes with Apple’s... Read more
Walmart continues to offer $699 13-inch M1 Ma...
Walmart continues to offer new Apple 13″ M1 MacBook Airs (8GB RAM, 256GB SSD) online for $699, $300 off original MSRP, in Space Gray, Silver, and Gold colors. These are new MacBook for sale by... Read more
B&H has 13-inch M2 MacBook Airs with 16GB...
B&H Photo has 13″ MacBook Airs with M2 CPUs, 16GB of memory, and 256GB of storage in stock and on sale for $1099, $100 off Apple’s MSRP for this configuration. Free 1-2 day delivery is available... Read more
14-inch M3 MacBook Pro with 16GB of RAM avail...
Apple has the 14″ M3 MacBook Pro with 16GB of RAM and 1TB of storage, Certified Refurbished, available for $300 off MSRP. Each MacBook Pro features a new outer case, shipping is free, and an Apple 1-... Read more
Apple M2 Mac minis on sale for up to $150 off...
Amazon has Apple’s M2-powered Mac minis in stock and on sale for $100-$150 off MSRP, each including free delivery: – Mac mini M2/256GB SSD: $499, save $100 – Mac mini M2/512GB SSD: $699, save $100 –... Read more
Amazon is offering a $200 discount on 14-inch...
Amazon has 14-inch M3 MacBook Pros in stock and on sale for $200 off MSRP. Shipping is free. Note that Amazon’s stock tends to come and go: – 14″ M3 MacBook Pro (8GB RAM/512GB SSD): $1399.99, $200... Read more
Sunday Sale: 13-inch M3 MacBook Air for $999,...
Several Apple retailers have the new 13″ MacBook Air with an M3 CPU in stock and on sale today for only $999 in Midnight. These are the lowest prices currently available for new 13″ M3 MacBook Airs... Read more
Multiple Apple retailers are offering 13-inch...
Several Apple retailers have 13″ MacBook Airs with M2 CPUs in stock and on sale this weekend starting at only $849 in Space Gray, Silver, Starlight, and Midnight colors. These are the lowest prices... Read more
Roundup of Verizon’s April Apple iPhone Promo...
Verizon is offering a number of iPhone deals for the month of April. Switch, and open a new of service, and you can qualify for a free iPhone 15 or heavy monthly discounts on other models: – 128GB... Read more

Jobs Board

Relationship Banker - *Apple* Valley Financ...
Relationship Banker - Apple Valley Financial Center APPLE VALLEY, Minnesota **Job Description:** At Bank of America, we are guided by a common purpose to help Read more
IN6728 Optometrist- *Apple* Valley, CA- Tar...
Date: Apr 9, 2024 Brand: Target Optical Location: Apple Valley, CA, US, 92308 **Requisition ID:** 824398 At Target Optical, we help people see and look great - and Read more
Medical Assistant - Orthopedics *Apple* Hil...
Medical Assistant - Orthopedics Apple Hill York Location: WellSpan Medical Group, York, PA Schedule: Full Time Sign-On Bonus Eligible Remote/Hybrid Regular Apply Now Read more
*Apple* Systems Administrator - JAMF - Activ...
…**Public Trust/Other Required:** None **Job Family:** Systems Administration **Skills:** Apple Platforms,Computer Servers,Jamf Pro **Experience:** 3 + years of Read more
Liquor Stock Clerk - S. *Apple* St. - Idaho...
Liquor Stock Clerk - S. Apple St. Boise Posting Begin Date: 2023/10/10 Posting End Date: 2024/10/14 Category: Retail Sub Category: Customer Service Work Type: Part Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.