Friday, November 11, 2011

Droj's Javascript Evaluator Tool

When learning Javascript, one of the most valuable tools you can have is a way to run snippets of code on the fly, without editing a file, then saving it, then reloading the page in your browser. You can run individual Javascript lines with browser development tools, but they're not as nice as having a Javascript "scratchpad" to try stuff out on.



My Javascript evaluator is a utility page that lets you evaluate Javascript code in a large text box that you type code into so you can play around and see the results immediately.
Modern browsers all give you tools for development, including the ability to evaluate Javascript code. For example, in Chrome, F12 shows these tools, and the last tab is the "console" tab, where you can type in Javascript commands. This and the other tools are invaluable when working with your own web pages. Firefox and IE9 have similar developer tools.

But when you're learning the Javascript language or just need to experiment with language features, you may not need to do anything that's related to any specific web page. Heck, maybe you don't even have a page. So, why go through the bother of creating one just to play around with how functions work in Javascript? Well, you don't have to do that. You can just navigate to 'about:blank' and mess around with the Console tool there.

The only problem, really is that it evaluates commends individually. If you want to type in several lines of code and work with it and tweak it, it can get to be a bit of a pain. What you really need is just a big text box where you can type in a bunch of Javascript code and run it. Like a Javascript "pad".

Well, a few years back, when the browser tools weren't as nice as they are now, I wrote one. But I still like to use it, because I gave it some features that I still like over the developer tools that come with browsers:

  1. it's a large, resizeable text area, so you can type in large amounts of code
  2. the code stays right where it is when it's evaluated, as opposed to going into a command history
  3. you can evaluate the code quickly with CTRL+ENTER keystroke, which is nice when making lots of little tweaks and re-evaluating
  4. it provides a utility function for putting text output on the page, like log messages or 'print' commands in shells. This is one of my favorites, because printing information is sometimes the best way to figure out what's going on. The only other way Javascript lets you do that is with calls to 'alert', which are a pain, because it stops all processing and you can only see one output string at a time.

At any rate, there are other tools like this out there. I find this one useful. Hopefully, somebody else will too.

My Javascript Evaluator: http://droj-tech.blogspot.com/p/javascript-evaluator.html


No comments: