BlogJava-sunfruit[请访问http://www.fruitres.cn]-随笔分类-JAVASCRIPT

Swift GIS--稳定、自主、高效

sunfruit — Fri, 21 Mar 2008 09:48:00 GMT

地图操作
点、线
多边形	圆	中心半径
	矩形	左上右下
	多边形
标记(marker)
滑动条(PanZoomBar)
比例尺(scale)
地图属性
事件
其它

sunfruit 2008-03-21 17:48 发表评论

[原创]Applet上叠加层的解决方案(非div)

sunfruit — Sat, 29 Dec 2007 07:36:00 GMT

    --sunfruit

    在applet上叠加层有2种方式
    第一：使用iframe的方式
    第二：使用window.createPopup();方式

的方式我是没有试成功，无论如何设置，div都在applet的下面，要是哪位实验成功了，经验也共享一下

    由于window.createPopup()主要用于创建右键菜单，由于其的一些特性，例如在其他地方点击,该window.createPopup()对象消失，所以叠加层方式使用window.createPopup()并不合适，使用iframe制作叠加层的效果更好更好

    效果图如下


    演示：http://www.fruitres.cn/applet.jsp，可以从该演示页直接下载js代码，或者到代码下载页下载
    代码下载：http://www.fruitres.cn/servlet/buyproductservlet?tag=single&tag1=info&PRODUCT_ID=1084563770&number=0
    更多下载：http://www.fruitres.cn/

sunfruit 2007-12-29 15:36 发表评论

[资料]WEB开发利器--JAVASCRIPT API文档 HTML API 文档

sunfruit — Tue, 31 Oct 2006 08:37:00 GMT

    --sunfruit
    有三个压缩包需要下载，下载以后放在同一个目录中解压即可
     下载包1
     下载包2
     下载包3

sunfruit 2006-10-31 16:37 发表评论

[转]JavaScript面向对象的特性

sunfruit — Wed, 30 Aug 2006 01:37:00 GMT

如果你使用JavaScript编程，你或许会怀疑它是否包含了面向对象（OO）的结构。实际上，JavaScript的确支持面向对象的架构――在某种程度上。本文将通过一个可扩展向量图形（SVG）的实例来说明JavaScript的OO结构。

我如何在类中定义方法和属性？

OO开发的一个基本方面是类及其相应的方法和／或属性的使用。JavaScript通过function关键字支持类（及其属性）的使用。下面的代码定义了一个叫做Figure的JavaScript类：
function Figure() {
this.centerX=0;
this.centerY=0;
this.area=0;
this.transform = transform; // methods are defined like this
function transform(moveX,moveY,angle) {
this.centerX += moveX;
this.centerY += moveY;
} }

这个Figure类有三个属性：centerX，centerY，和area。另外，它还有一个方法叫做transform()。前三行是这个类的构造器。
但是它看起来不像一个类
你会想Figure()看起来不像一个类，而更像一个JavaScript的函数。那么为什么Figure()定义的是个类？

严格的说，Figure()函数没有定义一个类，但是它仿造了一个。它实际上创建了一个对象，在括号里的代码使这个对象的构造器。JavaScript的对象支持是很基础的，它并不区分类和对象。
这就引到了问题为什么Figure()函数创建的是一个对象。对象是可以有属性和方法的。基本上，因为Figure()函数同时包含了属性和方法，它就是个对象。在JavaScript里，所有的函数即是对象又是可调用的代码块。这不像它听起来的那样容易被误解。要创建一个Figure()类／对象，你只用使用以下句法：
MyFigure = new Figure();
你也可以把Figure()函数当作代码块调用，就像这样：
figValue = Figure();
变量figValue没有被定义是因为代码块Figure()没有返回任何值。如果你把return(this.area)加到函数的最后一行，figValue就会有个值0。所以figValue是个类型数字，MyFigure是对象 Rectangle的实例。
为什么所有的变量前面都一个“this”？

这个关键字this表示这是对象的实例变量，可以使用MyFigure.centerX从对象外部访问。要让变量成为私有变量，去掉前缀this就行了。this.transform = transform这一行让方法成为公用方法。这个方法通过MyFigure.transform(100,100,0)调用。

这些类有层次之分吗？

另一个好问题的是JavaScript的类是否有层次之分。回答是肯定有。我们来仔细看看是怎么做到分层的。我们可以定义一个Rectangle子类，并把Figure作为父类：

function Rectangle(startX, startY, endX, endY) {
this.width = endX - startX;
this.height = endY - startY;
this.centerX = (endX + startX)/2;
this.centerY = (endY + startY)/2;
this.computeArea = computeArea;
function computeArea() {
this.area = this.width*this.height;
} }
Rectangle.prototype = new Figure();

Rectangle对象是用4个自变量创建的，前四行是构造器。 Rectangle类包含了一个方法： computeArea()。最后一行Rectangle.prototype = new Figure();，把Rectangle类定义为从Figure类继承来的子类。
然我来解释一下prototype（原型）。每个对象构造器都有prototype属性；这是用来给所有的对象增加新属性和方法的。这就是为什么原型被用来实现继承：child.prototype = new parent();。通过原型，父对象的所有属性和方法都被添加到子对象上。
要注意this.centerX，this.centerY，和area是Rectangle类中所使用的属性，但是它们是 Figure父类的属性。和Rectangle类相似，Circle类可以被定义成Figure类的原型。这种父子关系可以按你需要来定义深度；你可以创建另一个Rectangle的子类。
我如何创建一个类的实例？

在JavaScript里创建一个类的实例很容易：
rect = new Rectangle(100,100,900,800);
这就创建了Rectangle类型的一个对象。Rectangle的构造器在属性width, height, centerX, 和centerY中填入了值。rect.area属性的值是零（0）。使用这个命令就能调用area方法：
rect.computeArea();
rect.area的值现在是560,000。要调用transform方法使用：
rect.transform(100,200,0);

父和子对象的属性可以像这样访问到：
var ar = rect.area;
var wi = rect.width;

我能超越属性和方法吗？

就像你在Java中的一样，你可以超越属性和方法。在子类中定义的属性或者方法可以超越同名的父类的属性和方法。
和全局变量互动
JavaScript也支持全局变量的使用。在以下代码段中测试一下g_area变量的范围：

rect.area的值是20（不是你预计的40），这是因为Rectangle对象是Figure对象的原型，这种关系在test()被调用以前就被定义了。要使用g_area的新值，你需要用以下的方法：

function test() {
g_area = 40;
Rectangle.prototype = new Figure();
rect = new Rectangle();
alert(rect.area);
}

对于所有的Rectangle的新实例，这将改变area属性的值。或者，你可以使用这种方法：function test() {
g_area = 40;
rect = new Rectangle();
Rectangle.prototype.area = g_area;
alert(rect.area);
}

这将改变Rectangle所有现存的以及新实例的area属性的值。
结论

为了效仿OO开发，JavaScript提供了必需的继承、封装和超越属性，尽管它不支持接口和方法的过载。如果你是刚接触到OO开发，用它试试。OO概念允许开发者将一组数据和相关操作集中入一个对象。这在管理浏览器事件和管理浏览器内SVG图时很有用。

sunfruit 2006-08-30 09:37 发表评论

[技巧]在JAVASCRIPT里面实现延时功能

sunfruit — Tue, 14 Mar 2006 05:44:00 GMT

--sunfruit

我们有的时候需要在javascript里面实现延时功能，比如：当某一个按钮按下提交内容以后就马上把状态改为失效，过2秒钟以后再把状态改为有效，才可以进行下一次提交

这个过程就需要延时功能了，这里用到了javascript的setTimeout函数，这个函数的入口参数为2个，第一个参数是需要执行的内容，这个可以是一个URL，也可以是另一个javascript函数，第二个参数是延时的时间数单位是毫秒，下面举个例子

无标题文档

执行这个例子的效果是：按钮按下去以后2秒钟“OK”对话框弹出，呵呵用这个特性实现button的失效和有效就简单多了

这里有一个技巧，就是在页面body的onload属性里面加上setTimeout的执行方法，而且setTimeout方法的第一个参数为执行自身页面，这样的效果就是间隔一定时间刷新本页，也许有人问了，html的自身属性就提供定时刷新页面功能，jsp页面的head属性里面也有类似的功能，干嘛这么麻烦使用setTimeout方法

不知道大家注意了没有，不管是使用html的自身提供定时刷新页面功能还是jsp页面head属性里面类似的功能，都会有浏览器发出的“啪啪”的声音，而使用setTimeout则没有这样的声音，所以使用setTimeout方法还是很有用的

sunfruit 2006-03-14 13:44 发表评论

[原创]JAVASCRIPT判断输入框中的内容全部为数字的不同方法分析

sunfruit — Sun, 19 Feb 2006 09:45:00 GMT

--sunfruit

分析了使用正则表达式和使用isNaN函数验证输入的内容是否全部为数字的区别

    1、使用正则表达式
    var patrn=/^[0-9]{1,20}$/;
    if(xxx!=null && !patrn.exec(xxx))
    {
       alert("请保证输入的全是数字");
    }
    这个表达式要求输入的字符每一个都必须是数字,123是正确的而1.23不正确

    2、使用isNaN
    if (isNaN(xxx))
    {
        alert('请输入数字!');
    }
    这个表达式认为123,1.23,-1.23甚至是-.23都是正确的

可以看出,使用正则表达式更适合验证输入内容必须为纯数字的情况,而使用isNaN对输入的内容要求更为宽松一些

sunfruit 2006-02-19 17:45 发表评论