Monday, September 10, 2012

Desigh an online JavaScript and Jquery tool

--> -->


Basic idea to  design an online JavaScript and Jquery tool to run  and  display JS script online:
1) Left panel is the source code of JavaScript and JQuery code, Jquery library is already loaded. Right panel is the running result of JavaScript code:
2)  Use HTML form:
<form id="diy_form" action="test1.php" method="post" target="diy_result">
<textarea name="code">
</textarea>

</code>
<p><span><input id="diy_submit" name="submit" value="Run the code" type="submit"></span>
</form>

In test1.php:
 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<?php
    echo $_POST['code'];
?>


Due to that  my server default is to addslashes for all POST data, I need to add  stripslashes to reverse
 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<?php
    echo
stripslashes($_POST['code']);
?>


The result:

 http://swf.site40.net/jstools/
or 
http://www.jiansenlu.zoka.cc/jstools/

To test jQuery: you can use the following code to the left panel:
 <a href="http://jquery.com/">jQuery</a>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
   </script>

No comments:

Post a Comment