最近写了一个Javascript Editer web

时间 2019-11-15

标签最近写了一个 javascript editer web 栏目 JavaScript 繁體版

原文原文链接

这是一款开发测试工具，用于测试Javascript代码的执行状况，也可用于html代码测试。毕竟两者密不可分。但它只是个简单的工具，仅有测试功能，不能提示error或自动调试，没有调试功能个人一个调试代码的办法是逐句测试，再把成功的句子组合。目前这仍是个架构式demo，不完善，可修改。原本是本身写代码时为了少用ctrltab键切换屏幕，以为晃眼睛，因此把写文件的记事本和查看执行状况的nevigater设计在一个html页面上。javascript

项目地址：https://git.oschina.net/yihazino/jesEcss

项目有四个htm可用，jesE.htm用于编辑和测试javascript代码，Hsave.htm用于编辑和测试html代码，还有一个snr.htm是能够查看文件和展现编程效果的简单的宽屏browser，最后Up.htm是综合改进版（第一屏先是效果显示区，scroll可在第二屏的textarea编辑代码。）最近都增长了保存文件功能并实线了自动刷新效果区。html

这是文件的网盘连接，请多多指教！（前一个连接是初版，有一些测试文件，后面一个连接是简化与界面改进后的版本。）java

https://share.weiyun.com/08083b1656ab387b95f4a46b2541efbagit

https://share.weiyun.com/2c3439f12b1f404fd19e27b3cceaabafweb

界面没有太多设计，左面是白板，用来查看执行结果，后面是文本框，用来写代码。两个按钮，一个用来提交代码，保存在缓存文件fe.htm中，另外一个能够清空白板的内容，可是文本框中的代码不会随之清空，由于开发过程全部代码都很重要。由于没有保存文件的功能，因此要保存测试成功的代码，须要退出软件后在程序的文件夹找到fe.htm文件，手动复制，更名，再归档。可见功能还不够完善，可由开发者本身改进，我也不使用中不断的修改它。编程

举例，可将按钮修改成红色，只需修改ui.css文件中.bt类的color和border两个样式缓存

除了help.txt文件（提醒保存路径和刷新查看结果），其余三种文件分别是：架构

一.自定义的Javascript函数写在f.js文件：函数

function rt(a){document.write(a)}
function m(a){rt('<'+a+'>')}
function n(a){rt('</'+a+'>')}
function mk(a,b){m(a);rt(b);n(a)}
function el(a){return document.getElementById(a)}
function ih(a){return el(a).value}
function eq(a,b){var mi=a-b;if(mi==0){rt(1)}}

二.首页jesE.htm的代码：

<link href='ui.css'  rel='stylesheet' />
<script src='f.js'></script>
<script>
function pass()
    { var wt=ih('wt'); 
      wt="<script src='f.js'"+"></"+"script>"+"<script"+">"+wt+"</script"+">"+"<body style='font-size:24px;'"+"></"+"body>";
      var fso=new ActiveXObject('Scripting.FileSystemObject');
      var fl=fso.CreateTextFile('e://a/fe.htm');
      fl.Write(wt);
      fl.Close
    }
function clr()
   { var fso1=new ActiveXObject('Scripting.FileSystemObject');
     var fl1=fso1.CreateTextFile('e://a/fe.htm');
     fl1.Write(null);
     fl1.Close;
   }
    rt('<iframe id="panel" src="fe.htm" /></iframe>');
    m("textarea id='wt'");n('textarea');
    m("div class='bt' onclick='pass()'");rt('presee');n('div');
    m("div class='bt bt2' onclick='clr()'");rt('clear');n('div');
</script>
<body style='background:#e4e4e8;'></body>

这个文件有两处能够根据开发者须要修改。一是第8行和第14行的文件保存位置，能够把e://a/fe.htm改为其余存储路径，而在第十八行的src=“fe.htm”，也要与之同步。fe.htm是缓存文件的名字，这个缓存文件存放待测试的代码，并在刷新首页后，在首页iframe标记位置打开，固然缓存文件名字能够本身随意更改，可是注意得和保存路径的最后的那个文件名字一致。二是按钮的名称能够自行修改，第一个按钮的名称在倒数第四行的rt('presee');位置，好比也可根据我的习惯把presee（预览）改为preview，exec或test等其余与执行代码和测试有关的词语。

若是把第六句的字符串变量wt的赋值语句去除，点击执行按钮后就不会在代码缓存文件fe.htm

中写<script></script>标记，也必会写f.js的调用语句，这样就将这个webpage软件改为了HTML代码的测试软件，这也是个不错的修改方法，我如今就是这样用的。能够将想要测试的html文件代码直接粘贴到右面的textarea，单击presee按钮，而后刷新，在左面的白板中就会查看到结果了。

三.设计界面用的样式文件ui.css的代码

#panel {border:1px solid #0083ce;
margin-top:50px;
margin-left:70px;
margin-right:80px;
float:left;
width:560px;
height:640px;
background:#fff;}

#wt {border:0px solid #919191;
margin-top:50px;
padding-top:16px;
padding-left:22px;
position:relative;
float:left;
overflow:auto;
width:480px;
height:640px;
background:#4b4236;
color:#ffffff;
font-size:26px;}

.bt {margin-top:56px;
margin-left:34px;
float:left;
width:80px;
height:28px;
background:white;
border:2px solid #900;
color:#900;
font-family:Microsoft Yahei;
font-size:18px;
text-align:center;}
.bt2 {margin-top:32px;}