My javascript toolkit is a set of resources that can help aid in the development of javascript-heavy or AJAX style applications. I encourage the use, enhancement and distribution of this javascript library. I hope that you find it useful as well.

You can download the toolkit here: http://www.tricedesigns.com/portfolio/js_toolkit/JavaScriptToolKit.js

There are four major components to the Javascript Toolkit. They are not necessarily "pretty" yet, but they are very useful. Each is described on this page. Use the following links to see a demo of each.

CommandPrompt

The CommandPrompt object is simply a command line interface for javascript, within a web page. Just type javascript commands into the text box and hit enter, and your code is executed. It is built so that it can easily be added to any page. From within it, you can call any javascript command, get or set the value of any existing variable within the page, or evaluate expressions. Although, It is still subject to the rules of your browser's security model.

An instance of the CommandPrompt object can be created as easily as this:
<script>
	var cmdPrompt = new CommandPrompt();
</script>
...And it is written such that there can be multiple instances of the CommandPrompt per browser instance (in the random event that you actually need this).

CommandArea

The CommandArea object is another a command line interface for javascript, within a web page. All internal functionality is identical to the CommandPrompt. The only difference is how you enter the javascript commands. Instead of having a textbox, and listening for the kepress event on the enter key, The CommandArea object uses a multiline textarea control, to allow you to inject longer code chunks and values. It is also built so that it can easily be added to any page. From within the CommandArea, you can also call any javascript command, get or set the value of any existing variable within the page, or evaluate expressions. One thing to keep in mind is that functions defined within the CommandArea are only accessible during code execution. For example, if you define a function within the CommandArea and execute it, then go and change the contents of the CommandArea... your function will be gone.

An instance of the CommandArea object can be created as easily as this:
<script>
	var cmdArea = new CommandArea();
</script>
...And it is also written such that there can be multiple instances of the CommandArea per browser instance.

VarWatch

The VarWatch object is a usefull debugging tool. It is designed to watch the values of your javascript variables during code execution. You can either programmatically add variables to the watch list, or you can add them during runtime through the user interface. The VarWatch object will display a list of all variables that you are watching, and their corresponding values will be updated every 500 millisecond.



An instance of the VarWatch object can be created, and variables assigned to it as easily as this:
<script>
	//create varWatch
	var varWatch = new VarWatch();
	
	//assign values
	varWatch.addWatch("Math.random()");
	varWatch.addWatch("Math.PI");
	varWatch.addWatch("myVariable");
</script>


DebugConsole

The DebugConsole object is an easy way to create both a VarWatch object and a CommandPrompt object with one line of code. Nothing more, nothing less.



The console image shown above can be created by this easy statement:
<script>
	var debugConsole = new DebugConsole();
</script>