CodingForums.com - Just Try It

CodingForums.com (http://www.codingforums.com/index.php)

- Post a JavaScript (http://www.codingforums.com/forumdisplay.php?f=19)

- - Just Try It (http://www.codingforums.com/showthread.php?t=251099)

Just Try It is not pretty, just functional. Yes, the idea of the layout and inspiration is from jsfiddle
Also, yes it can be broken, but its nice to have a light-weight way to try out code.

Just Try It is a small client side testing sandbox for html/css/ and javascript.
It's obviously no jsfiddle., nor even a w3scools try it now, but there are no server calls required.

Just Try It works both locally from the desktop and also from a web host.

The iframe is where all of the user provided html/css/javascript is run, isolating it from the
containing page.

A new iframe is created at each run to bypass all same-origin issues when the iframe is loaded from a remote url.

How to use:
1) Put your html in the html textarea
2) css goes in the css textarea
3) javascript goes in the javascript textarea
4) Click the ">>>Run" button and the reults will be shown in the iframe.

The ">>>Take it with me" button opens a new window with your code in a textarea.

There is example code in the textareas that you can obviously remove.
Click the run button to see what a run looks like.

You can set up custom error reporting by throwing something like this into the top of the html textarea:

Code:

<div id="info"> </div>

<script type="text/javascript">

window.onerror = function (msg, url, num) {

  document.getElementById("info").innerHTML=msg + ';' + url + ';' + num + "<br>";

   return true;

}

</script>

Obvious extensions are adding document declaration options - it's quirks mode right now. Change it
by adding the doctype declaration before the html.
something like ._("!doctype html"), or just create options the user can select from.

I feel like I should say sorry for the justtryit function names, but they're short, distinct, and tucked away.

justtryit functions:
._(n) puts n inside angle brackets
.__(n) gets the contents of the nth textarea
nl(n) adds a section name and new lines

Finally,
(From How JQuery Works Tutorial)
You can add external library references by putting the full script reference in the html textarea:

<a href="http://jquery.com/">jQuery</a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

and then putting the code you want in the script textarea:

Code:

$(document).ready(function(){

   $("a").click(function(event){

     alert("As you can see, the link no longer took you to jquery.com");

     event.preventDefault();

   });

});

All in all, I hope someone finds this useful.

Just Try It works with all modern browsers: ie,ff,safari,chrome,opera.
Tested on vista.

Here's the Just Try It Code in full:

Code:

<!doctype html>

<html>

<head>

<title>

Just Try It

</title>

<style type='text/css'>



.html, .css {width:550px;height:150px;}

.code, .result {width:550px;height:300px;}



</style>



</head>

<body>



<table>

<tr>

        <td>

                <div>HTML</div>

                <textarea><p><a href="http://albumnized.net46.net">albumnized</a></p>

&lt;textarea id="ta1">Play in the sandbox.&lt;/textarea></textarea>

        </td><td>

                <div>CSS</div>

                <textarea>a {font:normal normal 16px/16px verdana;color:red;}

#ta1 {width:350px;height:250px;background:navy;color:cyan;}</textarea>

        </td>

</tr><tr>

        <td>

                <div>JavaScript</div>

                <textarea>setTimeout(function(){

   document.getElementsByTagName("a")[0].style.color="green";

   var a = document.getElementsByTagName("a")[0];

   a.innerHTML = a.innerHTML.toUpperCase();

   setTimeout(function(){

       document.getElementsByTagName("textarea")[0].value+="\nWHEEE!";},1000);

},1000);</textarea>

        </td><td>

                <div>Result</div>

                <iframe></iframe>

        </td>

</tr>

</table>



<button> >>> Run </button>



<button> >>> Take It With You </button>



<script type="text/javascript">



(function(){

        // just try it needs 3 textareas, 1 iframe, and 2 buttons to work.



        document.getElementsByTagName("textarea")[0].className = "html";

        document.getElementsByTagName("textarea")[1].className = "css";

        document.getElementsByTagName("textarea")[2].className = "code";

        document.getElementsByTagName("iframe")[0].className = "result";



        var justtryit={

                res:"",

                clear:function(){justtryit.res=""},

                __:function(n){justtryit.res+=document.getElementsByTagName("textarea")[n].value;return this;},

                _:function(n){justtryit.res+="<"+n+">";return this;},

                nl:function(n){justtryit.res+="\n\n"+["<!-- html -->","/* css */","// script"][n]+"\n";return this;}

        };



        document.getElementsByTagName("button")[0].onclick = function(){

                justtryit.res="";

                justtryit._("html")._("head")._("style").__(1)._("/style")

                ._("/head")._("body")

                .__(0)._("script").__(2)._("/script")

                ._("/body")._("/html");



                document.getElementsByTagName("td")[3].innerHTML ="<div>Result</div><iframe></iframe>";

                document.getElementsByTagName("iframe")[0].className = "result";

                document.getElementsByTagName("iframe")[0].contentWindow.document.open();

                document.getElementsByTagName("iframe")[0].contentWindow.document.write(justtryit.res);

                document.getElementsByTagName("iframe")[0].contentWindow.document.close();

        };



        document.getElementsByTagName("button")[1].onclick = function(){

                justtryit.res="";

                justtryit.nl(0).__(0).nl(1).__(1).nl(2).__(2);

        

                var a = window.open("about:blank");

                a.window.document.open();

                a.window.document.write("<textarea rows='25' cols='80'>"+justtryit.res.replace(/<\/textarea/g,"&lt;textarea")+"</textarea>");

                a.window.document.close();

        };

})();

</script>

</body>

</html>

Thanks,

Changes:

Added doctype declaration list - defaults to quirks.

Test Button replaces old Run button.
Take It with you - no change.
Run button now opens results in a new window.

You can get just the content you added in the
“Take it with you” window, or the full source
of you code in the “Run” window,

Internal changes to anonymous function and justtryit object.

justtryit functions:
._(n) : puts n inside angle brackets
.__(n) : gets the contents of the nth textarea
.nl(n) : adds a section name and new lines
.clean() : clears the module level res
.add(n) : appends n to res
.dt (n) : appends nth doctype def to res
.write(n) : writes n to a new window.

Here is the updated code:

Code:

<!doctype html>

<html>

<head>

<title>

Just Try It

</title>

<style type='text/css'>

.html, .css {width:550px;height:150px;}

.code, .result {width:550px;height:300px;}

</style>

</head>

<body>

<table>

<tr>

        <td>

                <div>HTML</div>

                <textarea><p><a href="http://albumnized.net46.net">albumnized</a></p>

&lt;textarea id="ta1">Play in the sandbox.&lt;/textarea></textarea>

        </td><td>

                <div>CSS</div>

                <textarea>a {font:normal normal 16px/16px verdana;color:red;}

#ta1 {width:350px;height:250px;background:navy;color:cyan;}</textarea>

        </td>

</tr><tr>

        <td>

                <div>JavaScript</div>

                <textarea>setTimeout(function(){

   document.getElementsByTagName("a")[0].style.color="green";

   var a = document.getElementsByTagName("a")[0];

   a.innerHTML = a.innerHTML.toUpperCase();

   setTimeout(function(){

       document.getElementsByTagName("textarea")[0].value+="\nWHEEE!";},1000);

},1000);</textarea>

        </td><td>

                <div>Result</div>

                <iframe></iframe>

        </td>

</tr>

</table>



<button> >>> Test </button>

<button> >>> Take It With You </button>

<button> >>> Run </button>



[

<label for="dtype">doctype</label>

<select id="dtype">

<option selected="true">Quirks</option>

<option>html5</option>

<option>4.01 strict</option>

<option>4.01 transitional</option>

<option>4.01 frameset</option>

<option>xhtml strict 1.0</option>

<option>xhtml transitional 1.0</option>

<option>xhtml framset 1.0</option>

<option>3.2 final</option>

</select>

]



<script type="text/javascript">

(function(){

        // just try it needs 3 textareas, 1 iframe, and 2 buttons to work.

        document.getElementsByTagName("textarea")[0].className = "html";

        document.getElementsByTagName("textarea")[1].className = "css";

        document.getElementsByTagName("textarea")[2].className = "code";

        document.getElementsByTagName("iframe")[0].className = "result";

        var justtryit={

                res:"",

                clear:function(){justtryit.res=""},

                add:function(n){justtryit.res+=n;return this;},

                __:function(n){justtryit.res+=document.getElementsByTagName("textarea")[n].value;return this;},

                _:function(n){justtryit.res+="<"+n+">";return this;},

                nl:function(n){justtryit.res+="\n\n"+["<!-- html -->","/* css */","// script"][n]+"\n";return this;},

                dt:function(n){

                        justtryit.add([

                                '',

                                '<!DOCTYPE html>',

                                '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">',

                                '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',

                                '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">',

                                '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',

                                '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',

                                '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',

                                '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">'

                        ][n]);

                        return this;

                },

                write:function(n){

                        n=n.replace(/(<.*?>)/g,"$1\n");

                        var a = window.open("about:blank");

                        a.window.document.open();

                        a.window.document.write(n); 

                        a.window.document.close();

                }

        };

        document.getElementsByTagName("button")[0].onclick = function(){

                justtryit.clear();

                justtryit.dt(document.getElementById("dtype").selectedIndex)._("html")._("head")._("style").__(1)._("/style")

                ._("/head")._("body")

                .__(0)._("script").__(2)._("/script")

                ._("/body")._("/html");

                document.getElementsByTagName("td")[3].innerHTML ="<div>Result</div><iframe></iframe>";

                document.getElementsByTagName("iframe")[0].className = "result";

                document.getElementsByTagName("iframe")[0].contentWindow.document.open();

                document.getElementsByTagName("iframe")[0].contentWindow.document.write(justtryit.res);

                document.getElementsByTagName("iframe")[0].contentWindow.document.close();

        };

        document.getElementsByTagName("button")[1].onclick = function(){

                justtryit.clear();

                justtryit.dt(document.getElementById("dtype").selectedIndex).nl(0).__(0).nl(1).__(1).nl(2).__(2);

                justtryit.write("<textarea rows='25' cols='80'>"+justtryit.res.replace(/<\/textarea/g,"&lt;textarea")+"</textarea>");

        };

        document.getElementsByTagName("button")[2].onclick = function(){

                justtryit.clear();

                justtryit.dt(document.getElementById("dtype").selectedIndex)._("html")._("head")._("style").__(1)._("/style")

                ._("/head")._("body")

                .__(0)._("script").__(2)._("/script")

                ._("/body")._("/html");

                justtryit.write(justtryit.res);

        }

})();

</script>

</body>

</html>

Thanks,