Home › A simple JavaScript executor

A simple JavaScript executor 

Displaying notes 1 - 2 of 2

Dr. Xi
Joined:
04/09/2007
Posts:
753

January 09, 2008 03:47:31    Last update: August 31, 2008 16:33:28
Many times I need to test some JavaScript snippet before writing code. Maybe I forgot how some JavaScrpit function is supposed to work, maybe I saw some tricky JavaScript code and needed to figure out how it worked. I used MS scripting host for while, but found it cumbersome. Plus, DOM objects are not available in the scripting host.

Below is a simple HTML page I created for this task. You can use the Logger.debug method to output debugging messages. 

<html>
<head>
<script language="JavaScript" type="text/javascript">
Logger = {
	buffer : '',
	debug : function(s) {
	    this.buffer += s + '<br/>';
	},
	reset : function() {
	    this.buffer = '';
	},
	flush : function() {
		return this.buffer;
	}
}

function execute() {
    Logger.reset();
	try {
	    result = eval(document.getElementById('src').value);
		if (result) {
		    output(Logger.flush() + result);
	    }
		else {
		    output(Logger.flush());
		}
	}
	catch (e) {
		output(Logger.flush() + e);
	}
}

function output(s) {
	document.getElementById('output').innerHTML = s;
}
</script>
</head>
<body>
Enter script here:<br/>
<textarea id="src" name="src" cols="120" rows="10">
</textarea>
<br/><button id="execute" onclick="execute();">Execute</button>
<p>
Output:
<div id="output"></div>
</p>
</body>
</html>


For example, if you enter 
Logger.debug(unescape('http%3a%2f%2fwww.56.com%2fn_v166_%2fc33_%2f17_%2f'));
Logger.debug('abcd'.substr(1));
document.body;

into the text area and click "Execute", you get the following output: 
http://www.56.com/n_v166_/c33_/17_/
bcd
[object HTMLBodyElement]
Share |
| Comment  | Tags
 
Dr. Xi
Joined:
04/09/2007
Posts:
753

August 31, 2008 20:43:44    Last update: January 22, 2011 12:48:08
It's probably more useful to make the JavaScript executor a bookmarklet. That way it gains access to the page on which it is invoked. Therefore, more helpful while debugging. Here's the code: 

<html>
<body>
    <a href="javascript:(function(){if(!document.getElementById('$jew')) {
    var $0 = {
        c: function(s) {
            return document.createElement(s);
        },
        init: function() {
            var css = '#\\$jew,#\\$jew div,#\\$jew table,#\\$jew tbody,#\\$jew tr,#\\$jew td,#\\$jew th,#\\$jew textarea {'
        + 'margin:0;padding:0;border:0;outline:0;font-family:sans-serif;font-size:0.95em;'
        + 'vertical-align:baseline;background:transparent;width:auto;height:auto;}'
        + '#\\$jew td,#\\$jew th {padding:4px;background-color:#FFF;}'
        + '#\\$jew table{border-collapse:separate;border-spacing:1px;}'
        + '#\\$jew textarea{width:100%;height:150px;border:1px #ddd solid;overflow:auto}';
            if ('\v' == 'v') {
                document.createStyleSheet().cssText = css;
            }
            else {
                var s = this.c('STYLE');
                s.type = 'text/css';
                document.getElementsByTagName('HEAD')[0].appendChild(s);
                s.innerHTML = css;
            }

			var f = '$0.log';
			if (!window.log) {
				f = 'log';window.log=$0.log;
			}
			else if (!window.logit) {
				f = 'logit';window.logit=$0.log;
			}

            var d = this.c('DIV');
            d.id = '$jew';
            d.style.cssText = 'position:fixed;border:1px solid #B34700;display:block;'
            + 'color:black;background:#FFF;z-index:1000000;height:auto;width:auto;top:5px;left:5px';
            d.innerHTML = &quot;<table style='background:#FFD478'>&quot;
    +    &quot;<tr><th style='background:#B39554;color:#FFF;width:500px'>&quot;
    +    &quot;<div style='display:block;float:right;cursor:pointer;width:auto'>x</div>&quot;
    +    &quot;JavaScript Executor&quot;
    +    &quot;</th></tr>&quot;
    +    &quot;<tr><td style='text-align:left'>&quot;
    +    &quot;Enter script here, use <code>&quot;+f+&quot;(msg)</code> to output log message:<br>&quot;
    +    &quot;<textarea></textarea><br>&quot;
    +    &quot;<button style='margin:2px;float:right'>Execute</button><br>&quot;
    +    &quot;<div style='clear:both'>Output:</div>&quot;
    +    &quot;<textarea></textarea>&quot;
    +    &quot;</td></tr>&quot;
    +    &quot;</table>&quot;;
            document.body.appendChild(d);
            this.a = d.getElementsByTagName('TEXTAREA');
            this.b = d.getElementsByTagName('BUTTON')[0];
            d.getElementsByTagName('DIV')[0].onclick = function() {d.style.display = 'none'};
        },
        log: function(s, clear) {
            if (clear) {
                $0.a[1].value = s;
            }
            else {
                $0.a[1].value += s + '\n';
            }
        }
    };

    $0.init();
    $0.b.onclick = function() {
        $0.log('', true);
        try {
            var r = eval($0.a[0].value);
            $0.log(r ? r : '');
        }
        catch (e) {
            $0.log(e);
        }
    };
}else{document.getElementById('$jew').style.display=''}})()">JavaScript Executor</a>
</body>
</html>


Or, you can add this link to your bookmarks, name it "JS Executor". For a full featured JavaScript console, you may need Jash
Share |
| Comment  | Tags
 

Related Notes