BlogJava-paulwong-随笔分类-DHTML

javascript 调试工具

paulwong — Sat, 01 Jan 2011 15:00:00 GMT

项目前台需要写大量的js，寻求一种有效的调试工具，朋友告诉我office就可以，试试用着感觉挺好。
Microsoft word调试工具Windows Script Debugger下载地址，要看清楚版本哦！
http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=E606E71F-BA7F-471E-A57D-F2216D81EC3D
默认情况office是安装好的，视图->工具栏->web 工具箱->麻花状图标(Microsoft Script Editor),如果已经安装好，则会打开Microsoft Script Editor。
当然浏览器也要设置相应的属性支持js调试：iternet高级选项->高级->禁用脚本调试去掉。
当我们在前台页面写js时，一般情况下只要出错则弹出调试对话框，但是如果想跟踪变量的话，只要在js中加"debugger"即可，当程序运行到debugger处会自己弹出调试窗口，和Eclipse中使用调试java代码一样可以跟踪变量，非常方便

paulwong 2011-01-01 23:00 发表评论

javascript图片浏览器的核心——图片预加载

paulwong — Sat, 13 Nov 2010 09:24:00 GMT

网站开发时经常需要在某个页面需要实现对大量图片的浏览，如果考虑流量的话，大可以像pconline一样每个页面只显示一张图片，让用户每看一张图片就需要重新下载一下整个页面。不过，在web2.0时代，更多人愿意用javascript来实现一个图片浏览器，让用户无需等待过长的时间就能看到其他图片。

知道了一张图片的地址，需要把它在一个固定大小的html容器（可以是div等）里边显示出来，最重要的当然是需要知道这张即将显示的图片的宽和高，然后再结合容器的宽和高，按照一定的缩放比例使图片显示出来。因此，实现图片预加载就成为图片浏览器的核心功能了。

做过图片翻转效果的朋友其实都知道，要让图片轮换的时候不出现等待，最好是先让图片下载到本地，让浏览器缓存起来。这时，一般都会用到js里边的Image对象。一般的手段无非这样：

function preLoadImg(url) {
var img = new Image();
img.src = url;
}

通过调用preLoadImg函数，传入图片的url，就能使图片预先下载下来了。实际上，这里用到的预下载功能也和这基本一致。图片预下载下来后，通过 img的width和height属性，就能知道图片的宽和高了。但是需要考虑到，在做图片浏览器功能时，图片都是实时显示的。比如你点了显示的按钮，这个时候才会调用上边类似的代码来加载图片。因此，如果你直接用img.width的时候，图片还没有完全下载下来。因此，需要用一些异步的方法，等到图片下载完毕的时候才会再对img的width和height进行调用。实现这样的异步方法实际上不难，图片的下载完毕事件也很简单，就是简单的onload事件。因此，我们可以写出下面的代码：

function loadImage(url, callback) {
var img = new Image();
img.src = url;

img.onload = function(){ //图片下载完毕时异步调用callback函数。
callback.call(img); // 将callback函数this指针切换为img。
};
}

好了，再来写一个测试用例。

function imgLoaded(){
alert(this.width);
}

在firefox中测试一下，发现不错，果然和预想的效果一样，在图片下载后，就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。

不过，做到这一步，先别高兴太早——还需要考虑一下浏览器的兼容性，于是，赶紧到ie里边测试一下。没错，同样弹出了图片的宽度。但是，再点击load的时候，情况就不一样了，什么反应都没有了。刷新一下，也同样如此。

经过对多个浏览器版本的测试，发现ie6、opera都会这样，而firefox和safari则表现正常。其实，原因也挺简单的，就是因为浏览器的缓存了。当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于 firefox和safari，它们视图使这两种加载方式对用户透明，同样会引起图片的onload事件，而ie和opera则忽略了这种同一性，不会引起图片的onload事件，因此上边的代码在它们里边不能得以实现效果。

怎么办呢？最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候，因为不需要等待，这个状态值就直接是表明已经下载了，而从http请求加载时，因为需要等待下载，这个值显示为未完成。这样的话，就可以搞定了。

经过一些分析，终于发现一个为各个浏览器所兼容的Image的属性——complete。所以，在图片onload事件之前先对这个值做一下判断即可。最后，代码变成如下的样子：

经过这么一番折腾，总算是让各个浏览器都能满足我们的目标了。虽然代码很简单，但是却把图片浏览器中最核心的问题解决掉了，接下来你所要做的，仅仅是图片如何呈现的问题了。

paulwong 2010-11-13 17:24 发表评论

Javascript 篇之扩展String 函数

paulwong — Wed, 24 Mar 2010 16:38:00 GMT

/**
* @brief  扩展原生字符串
*/

var StringEx =
{
    /**
     * @brief 去除字符串前后空格
     */
    trim : function()
    {
        return this.replace(/(^\s*)|(\s*$)/g, "");
    },

    /**
     * @brief 去除左边空格
     */
    ltrim : function()
    {
        return this.replace(/(^\s*)/g, "");
    },

    /**
     * @brief 去除右边空格
     */
    rtrim : function()
    {
        return this.replace(/(\s*$)/g, "");
    },

    /**
     * @brief 避免XSS 攻击
     */
    avoidXSS : function()
    {
        var strTemp = this.replace(/&/g, "&");
        strTemp = strTemp.replace(/g, "<");
        strTemp = strTemp.replace(/>/g, ">");
        strTemp = strTemp.replace(/\"/g, """);
        return strTemp;
    } ,

    /**
     * @brief 获取字符串的字节长度汉字默认双字节
     */
    byteLength : function()
    {
          return this.replace(/[^\x00-\xff]/g,"**").length;
    },

    /**
     * @brief     除去HTML标签
     * @example    "test1">aaaa

  =>  aaaa
     */
    removeHTML : function()
    {
        return this.replace(/<\/?[^>]+>/gi, '');
    },

    /**
     * @brief      格式化字符串
     * @example "<div>{0}div>{1}".format(txt0,txt1)
     */
    format : function()
    {
        var args = [];

        for (var i = 0, il = arguments.length; i < il; i++)
        {
            args.push(arguments[i]);
        }

        return this.replace(/\{(\d+)\}/g, function(m, i)
        {
            return args[i];
        });
    },

    /**
     * @brief 字符串转数字
     */
    toInt : function()
    {
        return Math.floor(this);
    }
}

for (var it in StringEx)
{
    String.prototype[it] = StringEx[it];
}

test:

    var strTest = "   -{0}这里是扩展原生字符串test{1}- ";

            alert(strTest.length);                 // output : 26
            alert(strTest.ltrim().length);      // 23
            alert(strTest.rtrim().length);      // 25

            alert(strTest.byteLength());        // 36

            alert(strTest.format("abc","def")); //   -abc这里是扩展原生字符串testdef-

            var strNumber = "89989";

            alert(typeof strNumber.toInt());    // number

            var domTest = document.getElementById("test1").outerHTML;

            alert(domTest);

            alert(domTest.avoidXSS());
            alert(domTest.removeHTML());

下载 string.js 及 demo

paulwong 2010-03-25 00:38 发表评论

可变列宽的表格

paulwong — Fri, 24 Nov 2006 08:05:00 GMT

摘要: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> /* 表格 */ .ResizedColTable { border-bottom : ... 阅读全文

paulwong 2006-11-24 16:05 发表评论

showModalDialog和showModelessDialog

paulwong — Wed, 16 Aug 2006 06:02:00 GMT

一、showModalDialog和showModelessDialog有什么不同？

　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。
　　showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？

　　在被打开的网页里加上就可以了。这句话一般是放在和之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容？

　　在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码：

<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reloada>

　　将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合

使用，不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。

　　也要配合，不然会打开一个新的IE窗口，然后再关掉的。

五、showModalDialog和showModelessDialog数据传递技巧。
　　(作者语：本来想用一问一答形式来写的，但是我想不出这个怎么问，所以只好这样了。)
　　这个东西比较麻烦，我改了好几次了不是没办法说明白(语文水平越来越差了)，只好用个例子说明了。
　　例子：
现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name
一般的传递方式：

window.showModalDialog("filename.htm",var_name)//传递var_name变量
在showModalDialog(或showModelessDialog)读取和设置时：
lert(window.dialogArguments)//读取var_name变量
window.dialogArguments="oyiboy"//设置var_name变量
　　这种方式是可以满足的，但是当你想在操作var_name同时再操作第二个变理var_id时呢？就无法再进行操作了。这就是这种传递方式的局限性。
　　　　
以下是我建议使用的传递方式：
　　//不管要操作什么变量，只直传递主窗口的window对象
在showModalDialog(或showModelessDialog)读取和设置时：
alert(window.dialogArguments.var_name)//读取var_name变量
window.dialogArguments.var_name="oyiboy"//设置var_name变量
　同时我也可以操作var_id变量
　alert(window.dialogArguments.var_id)//读取var_id变量
　window.dialogArguments.var_id="001"//设置var_id变量

　同样还可以对主窗口的任何对象进行操作，如form对象里的元素。
　　window.dialogArguments.form1.index1.value="这是在设置index1元素的值"

六、多个showModelessDialog的相互操作。
　　因为光说很费劲，我就偷点懒，直接用代码来说了，如果不明白的话那就直接来信(oyiboy#163.net(使用时请将#改成@))问我吧。

　　以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。

　　主文件的部份js代码。
　　var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px") //打开控制窗口
　　var s2=showModelessDialog('about:blank',window,"dialogTop:200px;dialogLeft:300px")　　//打开被控制窗口

　　控制.htm的部份代码。

　　以上关键部份是：
窗口命名方式：var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px")
　　变量访问方式：window.dialogArguments.s2.dialogTop

　　这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能，通过这个原理，在showModelessDialog之间相互控制各自的显示页面，传递变量和数据等。这要看各位的发挥了。