0

我一直很愛FrontPage裡的一項功能!

當我想測試一小段Javascript時，我都習慣用FrontPage開個新網頁，在Source View插入Javascript，接著切到Preview View，Javascript Code會立刻被執行，馬上可以看結果。舉例來說，有時我想用Javascript的unscape函數去幫我轉換某個URL參數，有時則是在構思Client-Side Scripting的過程中，想驗證某個寫法/語法是不是OK。

雖然，用文字編輯工具開新檔、寫Code、存檔、開IE檢視可以得到同樣的結果，但常常要測試的Code只不過兩三行，FrontPage的"Preview On The Fly"就明顯輕便許多。在大部分的情況下，敲幾個字母再配幾個Click，馬上就知結果，連檔案都不必存、IE也不用開，快捷得很!

好景不常，身為FrontPage 2003的接班人，Sharepoint Designer 2007在提供多項新功能的同時，卻悄悄地把這個即時預覽的功能給取消了(莫非全天下只有我在乎這個功能?)。這下彷彿滑板車被沒收了，要測Javascript時，只好乖乖地步行，走完開檔、存檔、預覽的循環。

懶惰為發明之母，過了一陣子步行生涯後，實在是太懷念FrontPage裡的Javascript即時預覽，於是我寫了以下的HTML，借用Javascript強大的eval函數，三兩行就達到類似的效果。

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=utf-8" />
<title>Javascript Mini Lab</title>
</head>
<body>
<form method="post">
    Javascript Mini Lab<br />
    <textarea name="txtScript" id="txtScript" 
    style="width: 600px; height: 200px"></textarea><br />
    <input name="btnRunScript" type="button" value="Run Script" 
    onclick="eval(document.getElementById('txtScript').value);"/>
    <input name="btnRunDocument" type="button" value="Run HTML"
    onclick="buildWebPage();" />
    <hr />
    <script type="text/javascript">
    function showMsg(x) {
        document.getElementById("spnOutput").innerHTML=x;
    }
    function buildWebPage() {
        var html=document.getElementById('txtScript').value;
        var xwin=window.open("about:blank");
        xwin.document.write(html);
    }
    </script>
    <div id="spnOutput" 
    style="width: 600px; height:100px; background-color:#CCCCCC">
    * You can use 
    <font color="green">showMsg(<i>varName</i>);</font> 
    to display message here.<br />
    </div>
</form>
</body></html>

這個網頁上半部的TextArea可以用來輸入要測試的內容，然後有兩種玩法。

如果你只單純地想測幾行Javascript Code，請直接輸入Code(例如: alert(escape("中文")); 、showMsg(Math.round(2.5)); )，接著按下"Run Script"即可直接看執行結果。

第二種情況是Javascript需要與Document中的元素互動，則你可以輸入完整的HTML Code(如下例)，再按下Run HTML，則會開啟IE/Firefox的新視窗執行你的HTML。
<html><body><span id="x">Darkthread</span><script>alert(document.getElementById("x").innerHTML);</script></body></html>


Comments

Be the first to post a comment

Post a comment