BlogJava-jasmine214--love-随笔分类-JS

JS--页面返回/跳转/刷新

幻海蓝梦 — Fri, 23 Jul 2010 02:44:00 GMT

原文：

Javascript 返回上一页
1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2);

2. history.back().

3. window.history.forward()返回下一页

4. window.history.go(返回第几页,也可以使用访问过的URL)

例:
向上一页

response.Write("")
response.Write("")
向上一页

页面跳转:onclick="window.location.href='list.aspx'"

P.S.
小技巧(JS引用JS):

Javascript刷新页面的几种方法：
1    history.go(0)
2    location.reload()
3    location=location
4    location.assign(location)
5    document.execCommand('Refresh')
6    window.navigate(location)
7    location.replace(location)
8    document.URL=location.href

自动刷新页面的方法:
1.页面自动刷新：把如下代码加入区域中

其中20指每隔20秒刷新一次页面.

2.页面自动跳转：把如下代码加入区域中

其中20指隔20秒后跳转到http://www.javaeye.com页面

3.页面自动刷新js版

ASP.NET如何输出刷新父窗口脚本语句
1. this.response.write("");

2. this.response.write("");

3. Response.Write("")

JS刷新框架的脚本语句

//如何刷新包含该框架的页面用

//子窗口刷新父窗口

(　或　刷新 )

//如何刷新另一个框架的页面用

如果想关闭窗口时刷新或者想开窗时刷新的话，在中调用以下语句即可。

开窗时刷新
关闭时刷新

幻海蓝梦 2010-07-23 10:44 发表评论

Mootool-Ajax 写法（包括其他JS库的）

幻海蓝梦 — Tue, 20 Jul 2010 03:47:00 GMT

摘要: 原文：http://www.masterboke.com/2009/01/12/javascritpprototypejquerymootools%E7%9A%84ajax%E4%BD%BF%E7%94%A8/ 老是记不住各个框架的AJAX写法，今天总结了一下，发现了一些小不同。 Javascript及prototype写法： vi... 阅读全文

幻海蓝梦 2010-07-20 11:47 发表评论

MooTools vs Prototype 核心源码比较

幻海蓝梦 — Tue, 20 Jul 2010 03:44:00 GMT

原文：http://cssrainbow.cn/articles/resources/595.html

MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的 JavaScript代码。

Mootools跟prototypejs相类似，语法几乎一样。

但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。

建议大家可以用它来代替prototypejs。

我为什么选择mootools,抛弃了prototype. (mootools 与 prototype 核心代码分析)

原文作者：小胖儿的大城

原文链接地址：http://www.javaeye.com/topic/122425

前言

最近喜欢上了mootools(相见恨晚啊),在公开表示了对他的偏爱.
很多朋友都问我为什么要移情别恋,其实理由还是蛮多的.

今天在这里打算列举出一部分.让更多的朋友能够了解一下mootools,也希望有更多的朋友喜欢上他.

文章的标题注定了我会更多的讲述 mootools比prototype好的地方,
希望大家不要被我的误导,以为mootools处处都比prototype好.
mootools还是有一些不足的.

本次对比针对 mootools 1.11版和 prototype 1.51版,
只比较了一些核心代码,其他的工具方法,辅助函数不再本文讨论之内.

开始前,再次重申一遍:我曾经很爱prototype,而且我将永远都会用"伟大"来形容它.

好下面对比正式开始 (
mootools以下简称moo.
本文所引用的代码, 只是起到说明作用,不保证他们都可以被正确的执行.
同时为了使本文简洁一些,引入的一些 moo和prototype的代码也只是片段或是伪代码.
)

一. 类机制

js里的类实际上就是function.
如果不使用任何框架和组件,那么想创建一个自己类也不是难事,方法如下:

														var PersonClass=function(name,gender){
this.name=name;
this.gender=gender;
alert("My name is "+this.name);
}
var myGirlFriend=new PersonClass('Vickey','female');

执行后, 会创建一个PersonClass类的实例myGirlFriend, 并执行function内的语句.
那些语句可以理解为是类的构造函数.

Prototype
现在来看看在prototype的帮助下如何去定义这个类:

														var PersonClass =Class.create();
 PersonClass.prototype.initialize=function(name,gender){
this.name=name;
this.gender=gender;
alert("My name is "+this.name);
};
var myGirlFriend=new PersonClass('Vickey','female');//如果想给类增加属性和方法时使用   
 PersonClass.prototype.XXX=...;//或者是使用 prototype提供的   
 Object.extend(PersonClass.prototype,{...});

(关于Object.extend稍后在对比继承机制时再细说.)

再来看看prototype是实现类机制的核心代码.

														var
														Class
														=
														{
														
    create:function(){
returnfunction(){
this.initialize.apply(this, arguments);
}
}
}

通过看代码不难看出,prototype的Class实际上只是帮助我们抽象出了"类的构造函数".
而当我们在prototype的这种机制下进行类的定义时,实际上带来的好处是非常有限的.
prototype的Class只是从结构对我们的类进行了重新规划. 而这样的规划意义并不是很大.
而且prototype带有强制性,即, initialize 是必须要定义的.
实际上这里存在一个缺陷, Class应该提供一个默认的initialize(一个空函数就好),
或者是在create返回的function里进行必要的判断.
(prototype1.6的类机制变化比较大,但是还没仔细研究过,所以不敢轻易评论).

Mootools

现在来看看在 moo的帮助下如何去定义一个类:

														var PersonClass =newClass({
    initialize:function(name,gender){
this.name=name;
this.gender=gender;
alert("My name is "+this.name);
}
});
var myGirlFriend=new PersonClass('Vickey','female');

其中类的 initialize 不是必须的.
如果你想给 PersonClass 增加属性和方法,你可以在new Class的参数里直接以 json方式定义.
也可以使用如下方式

PersonClass.implement({
    age:0,
    getName :function(){
returnthis.name;
}
},{...}, ..... 
);

implement支持多个{}.关于implement稍后在对比继承机制时再细说.

在来看一下moo类机制的一些核心代码.

														var
														Class
														=
														function
														(properties){
var klass =function(){
return(arguments[0]!==null&amp;&amp;this.initialize&amp;&amp; $type(this.initialize)==
'function')?this.initialize.apply(this, arguments):this;
};
    $extend(klass,this);
    klass.prototype= properties;
    klass.constructor=Class;return klass;
 
};
Class.prototype={
    extend:function(properties){
var proto =newthis(null);
for(var property in properties){
var pp = proto[property];
           proto[property]=Class.Merge(pp, properties[property]);
}
returnnewClass(proto);
},
    implement:function(){
for(var i =0, l = arguments.length; i &lt; l; i++)
            $extend(this.prototype, arguments[i]);
}
};

代码的具体原理就不细说了.大家在moo的Class里看到了 extend 和implement,那下面就来具体说一说moo和prototype的继承机制吧.

二. 继承机制

Prototype
prototype提供的继承很简单.

Object.extend=function(destination, source){
for(var property in source){
     destination[property]= source[property];
}
return destination;
}

他只是把source里的属性赋给destination,同时会覆盖destination里的同名属性.
他可以用于对象,也可以用于类,当要实现类的继承时,destination要使用 MySubClass.prototype.

prototype的继承机制可以说是非常薄弱的.

Mootools

moo提供了三种继承机制:

首先他也提供了简单的继承机制:
Objcet.extend (注意,不是上面代码中 Class 里的 extend)
他的代码如下

														var $extend =function(){
var args = arguments;
if(!args[1]) args =[this, args[0]];
 
for(var property in args[1])
      args[0][property]= args[1][property];
 
return args[0];
};
Object.extend= $extend;

他的使用方法和 prototype 完全一样.

但是大家可能注意到了这句 if (!args[1]) args = [this, args[0]]; 这句的纯在使得下面的代码写法成为可能.

														var myObjcet={....};
 myObjcet.extend=$extend;
 myObjcet.extend(objA);
 myObjcet.extend(objB);
 myObjcet.extend(objC);

简单的一句话,让extend的用法增加了更多的灵活性,不得不赞一个了!!!

下面说说重点, moo的类里的extend和 implement
先说 implement,之前已经说了一些了

														var MyClassA =newClass();
MyClassA.implement({
   methodA :function(){... }
});

执行后 MyClassA 将拥有 methodA.

implement用来向类中添加属性和方法(会覆盖同名属性和方法),相当于
Object.extend (MyClassA.prototype , {… } )
但是Object.extend 不支持多个source,implement可以,示例如下:
MyClassA.implement( objA , objB, objC … );

下面来看看moo的Class.extend.
moo的Class.extend才是我们期待的真正的"类继承",看一下官方的示例

														var Animal =newClass({
    initialize:function(age){
this.age= age;
}
});
var Cat = Animal.extend({
    initialize:function(name, age){
this.parent(age);//will call the previous initialize;  			
this.name=name;
}
});

看那个parent() !!!!
通过moo的Class.extend实现的继承提供一个关键的方法 parent().
使用他你可以调用父类中的同名方法,好像java里的super一样.
这个示例已经可以说明一切了.

关于prototype和moo的类机制和继承机制的对比就到这里,孰优孰劣大家心里应该有数了吧.

三.抽象对象

再来看一看"抽象对象". 这个虽然对于开发人员来说用处不大,但还是对比一下吧,小细节也能看出作者的用心.

Prototype
prototype的抽象对象很简单
var Abstract = new Object();
具体的意义不大.

Mootools
moo的的抽象对象相对更完善一些.

														var Abstract =function(obj){
    obj = obj ||{};
    obj.extend= $extend;
return obj;
};

支持自定义抽象(以参数形式传入),同时会为抽象对象自动添加extend方法.

四. 关于 $()

Prototype
prototype的$大家都比较熟悉了, 工作原理就是
通过id取得一个页面元素(或者直接传入一个页面元素对象),然后给他增加一些prototype提供的方法和属性,来方便开发人员对页面元素的使用.

Mootools
moo在这方面做的差不多.
不同的主要有两点, 首先moo为页面元素增加的方法和属性与prototype的不同(这个稍后会介绍),另外一个不同是moo的$兼具了对象管理的一个功能.
他引入了一个 Garbage 类, 来对页面元素进行一个统一的管理和回收(主要是回收).
可以更好的减少js(或浏览器)造成的内存泄露等问题.

具体的大家可以看一下代码,在这里就不详细说明了.

五.关于 Array Enumerable Hash

prototype 和 moo 都提供了集合迭代方法 (each)
这个网上已经有一篇不错的对比文章,我就不在这里重复了
http://blog.fackweb.cn/?p=50.

moo的 forEach/each方法: function(fn, bind){..}
那个bind 结合代码和上面那篇文章, 大家应该可以很好的看出来prototype和moo的不同与优劣.

prototype里面有 Enumerable 的概念,moo没有.
但是我个人一直觉得 Enumerable 比较鸡肋.
在实际开发中,很少使用.
Enumerable的功能完全可以用普通json对象或者是 Hash来实现.
moo的作者也许同样这么认为.所以不再设置一个鸡肋的 Enumerable类.
但是请大家放心, Enumerable 能做的事情, 在moo里也能完成.

可以理解为

moo的 Array + Hash +{} 完全可以接替 prototype的 Array + Enumerable + Hash +{}
当然对于一些工具方法两者提供的都不太一样,不好比较,但是那些方法都是附属品.
我们完全可以自己来实现,所以不在这次的比较范畴之内.

六. 关于 Element

两者的 Element 从作用上看类似.都是一种对页面元素的包装,为页面元素添加了一些诸如 addEvent remove style之类的方法.
但是大家通过看代码可以发现 moo的实现明显更简洁更OO.

同时还有一个关键的不同,prototype又提取出了一个Form对象,里面包含了很多表单相关的方法.
同时还衍生出了 serializeElements Method 等等很多类和方法,代码瞬间变得异常复杂和难以琢磨.

而moo中没有Form对象,在moo中,Form本身就是一个Element 他没什么特别的,这样的思想类似components模式
普通Element具备的方法 Form 都应该具备, Form具备的方法 Element也都应该包含.form 和其他页面元素没什么不同.
form元素只是一个包含了 input select textarea等子元素,同时拥有action target等属性而已.
一个div 一个span 一个td… 同样可以包含input select textarea子元素,同样可以拥有.action target属性.
浏览器处理他们的方式可能不同,但是在moo面前,大家完全平等.

其实prototype里 form和普通页面元素几乎也是平等的,但是问题就是,既然是平等的,又何必硬生生的造出Form以及那么多的衍生物呢?

七.Ajax

Prototype
prototype的ajax实现主要是靠一个 Ajax类来实现.(但是这个类形同虚设,大家更多的是和 Ajax.Request 类打交道.

先来看一个prototype下一个简单的ajax提交实例:

														var myAjax =new Ajax.Request(
     url,
{
     parameters: myData ,
     onComplete: callBackFunction 
}
);

其中 myData 可以是字符 : "name=Vickey&gender=female";
也可以是对象 { name : Vickey, gender : female }

Mootools
moo首先在将ajax机制分层.提取出了一个基类:XHR.
目前XHR有两个子类, 一个是 Ajax ,另一个是Json.Remote.

在moo下一个简单的ajax提交实例:

														var myAjax =new Ajax(
    url,
{
     data : myData ,
     onComplete: callBackFunction  
}
).request();

大家可以看到request成为了Ajax对象的一个方法,这样的设计显然是更合理更自然也更OO的.

而且关键的一点是,你可以提前创建好你需要的ajax对象.在需要发出请求时再发出请求.

1
2
3

														var myAjax =new Ajax(...);
.....   
myAjax.request();

同时还有一个重要特性, request是支持参数的,这个参数就是你要提交的数据.

也就是说,你可以在new Ajax时不指定数据或者指定一个默认数据.
在提交的时候可以提交另一个data.如.

myAjax.request(yourData);

其中data可以是字符串,可以是对象, 也可以是一个页面元素.

要用ajax提交一个form 或者一个 div下的所有表单元素,只是改变一下 myData.
var myData= $("formID"); // var myData= $("divID");
然后就和普通的ajax提交完全一样了.

myAjax.request(myData);

当然还有更oo的方式 :
myData.send({onComplete: callBackFunction });

用后一种方式的时候要保证提交的元素有action属性,没有你就赋一个 myData.action=url.
prototype里如何实现这一功能呢??

Prototype
Form.request($("formID") ,{ onComplete: callBackFunction });

当然prototype里也可以类似moo的做法 , 只要让myData=$("formID").serialize(true) 就可以了.
但是这一个小小的不同,反映出了设计上的差距.

Mootools
moo的Json.Remote类,简单,但是很实用:

														var jSonRemoteRequest =new Json.Remote(
  url ,
{
   onComplete:callBackFunction 
}
).send({name:'Vickey',gender:'female'});

这个类和Ajax类的本质区别是,
他提交的是一个序列化后的 json字符串("{name: ‘Vickey’,gender: ‘female’ } "),而不是把 json对象转化成QueryString ("name=Vickey&gender=female");

结束语

写这篇文章不是要批评prototype,以我现在的水平还没那个资格.
只是和mootools对比后, prototype在设计上的不足立刻就显现了出来.

虽然prototype新版本变化很多,很多我上面提到的一些不足都改正了,而且也加入了很多以前不具备的新的特性.
但是prototype现在的发展停留在:"修补不足,增加功能"的阶段,而没有从设计上进行深层次的重构,所以我不认为他在mootools面前有足够的底气.

至于jquery我没有深入研究过,但是它的设计觉得完全是prototype风格的, 注意,我说的是设计风格,而不是代码风格.
代码上他可能写的更精妙,更有趣,但是设计上依然是prototype风格:薄弱的类机制,靠简单的extend支撑起整个系统.
JQuery在很多方面很出色,但是归根结底他和prototype走在一条路上,只是在有些方面他走的更快.

mootools并非完美无缺,但是至少现在他美的地方比prototype更多,缺的地方比prototype更少.

所以,我选择mootools. 你呢??

不要听评论,不要看介绍, 只要看看他们的源代码, 同时动手用他们写些东西, 你的答案自然会浮现出来.

幻海蓝梦 2010-07-20 11:44 发表评论

JS --Hash/Array--（遍历）each方法

幻海蓝梦 — Tue, 20 Jul 2010 02:37:00 GMT

原文：http://www.02web.com/hublog/article.asp?id=344

数组在平时越用越多，可惜它自身没有一个遍历的方法

下面这样是最简单的一个简历方法，直接设置数组对象的

JavaScript代码

Array.prototype.each = function ( callback ){
for ( var i = 0 ,j = this .length ; i < j ; i++ ){
callback.call( this, this[i], i );
}
}

上面的可以这样使用

JavaScript代码

//遍历一个数组如果是它是数组，就把它乘以10再输出
var testArray = [1,2, '我' , '不' ,3,5];
testArray.each( function( value ){
typeof value == 'number' ? alert( value *10 ):null;
})

改变一个数组的内容

JavaScript代码

//遍历每个元素并且在它的前面加上chinese
var testArray = [1,2, '我' , '不' ,3,5];
testArray.each( function( value, index ){
this[index] = 'chinese' + value;
})
testArray.each( function( v ){
alert(v);
})

如果是一个多维数组呢？不停地调each就行了，下面修改each方法

JavaScript代码

//首先引入一个isArray函数，这个函数非常有用，必备~
isArray = function( arrayObj ){
return arrayObj &&
typeof arrayObj === 'object' &&
typeof arrayObj.length === 'number' &&
typeof arrayObj.splice === 'function'
}
Array.prototype.each = function( callback){
for( var i = 0 ,j = this.length ; i < j ; i++){
isArray( this [i] )? this [i].each( callback ):
callback.call( this, this[i], i );
}
}

下面可以试验一下

JavaScript代码

var testArray = [1,2,[ 'sdf' , '2sdf' ],[12313,[[34,45]]]];
testArray.each(function(v){
alert(v); //输出1,2,sdf,2sdf,12313,34,45
})

幻海蓝梦 2010-07-20 10:37 发表评论

Mootools ---DOM操作

幻海蓝梦 — Mon, 19 Jul 2010 11:47:00 GMT

原文：http://www.bianceng.cn/webkf/mootools/201007/18103_2.htm
Mootools DOM操作
Ajax开发中，做的最多的就是对DOM的操作，增删节点，设置样式等等等等，如果按照常规的javascript开发的话，工作量大的足以搞的人头晕目眩。所以基本上每个javascript框架都会在DOM操作上花比较大的功夫，对我们使用频率最频繁的功能操作进行封装(其中包括修正各个浏览器之间的方法差异问题)，让我们的开发事半功倍。

mootools也提供了一套非常出色的解决方案，并且更OO。

首先，之前，通常我们创建DOM节点，都使用document.createElement()方法，而我们看mootools式的创建方法：

js 代码

1.var myInput = new Element('input');
非常的优雅啊。

方法： $

美元，又见美元！

$基本上成了javascript框架中的标志性建筑了，短小精悍的语法使我们的代码看起来舒服不少，也使我们的js文件瘦了下身。

时下，各大javascript框架中都会提供$这个方法，基本上它都有按照id来获取DOM元素的功能，但各个框架在具体诠释它的时候各有不同的手法，功能的强弱上也不一样。比如prototype.js中的$可以根据给出的一个或多个id来获取这些DOM元素，而jQuery里的$更是非常强，可以按照CSS选择器的语法来获取DOM元素(其实mootools和prototype也是可以的，只不过是$$这个方法)。

这是mootools中的$()的最常用用法，它返回id为my_div的元素，并且这个元素被加上了所有mootools所进行的扩展。

js 代码

1.var mydiv = $('my_div');
如果你使用document.getElmentById来获取的元素，则此时这个元素将没有包含mootools的任何扩展，你可以把这个元素对象作为参数调用$方法，之后返回的元素将被加上mootools的扩展。

js 代码

1.var mydiv_noextend = document.getElementById('my_div');
2.var mydiv_extended = $(mydiv_noextend);
方法： $$

功能：通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的支持)

js 代码

1.$$('a'); //获取页面上所有超链接标签对象
2.$$('a','b'); //获取页面上所有超链接标签和粗体标签
3.$$('#my_div'); //获取id为my_div的元素
4.$$('#my_div a.myClass'); //获取id为my_div的元素子元素，并且这些自元素是的所有class="myClass"的标签

=================================Element扩展方法=====================================

方法： inject

作用：可以用来把当前元素插入到指定元素之前(before)，之中(inside)，之后(after)。

java 代码

1.$('myDiv3').inject($('myDiv1'),'before'); //把myDiv3插入到myDiv1之前

方法： injectBefore

作用：可以用来把当前元素插入到指定元素之前 (即相当于参数为'before'的inject方法)

js 代码

1.$('myDiv3').injectBefore($('myDiv1'));

方法：injectAfter

作用：可以用来把当前元素插入到指定元素之后 (即相当于参数为'after'的inject方法)

js 代码

1.$('myDiv3').injectAfter($('myDiv1'));

方法：injectInside

作用：可以用来把当前元素插入到指定元素之中 (即相当于参数为'inside'的inject方法)

js 代码

1.$('myDiv3').injectInside($('myDiv1'));

方法：adopt

作用：可以在当前元素中插入指定元素(参数可以是元素id，元素引用，html元素tag名)

js 代码

1.$('myDiv').adopt($('myDiv1'));
2.$('myDiv').adopt('myDiv1');
3.$('myDiv').adopt('button');

方法：remove

作用：删除元素

js 代码

1.$('myDiv').remove();

方法：clone

参数列表：

contents - 是否连带节点的内容进行复制(deep clone)，如果不指定，则连带。

作用：复制元素

js 代码

1.$('myDiv').clone();
2.$('myDiv').clone(false); //只复制myDiv本身，不复制其content和子元素

方法：replaceWith

作用：用其他元素替换当前元素

js 代码

1.var a = new Element('button');
2.a.value = 'test';
3.$('myDiv1').replaceWith($(a));

幻海蓝梦 2010-07-19 19:47 发表评论

SVG --介绍

幻海蓝梦 — Mon, 19 Jul 2010 11:20:00 GMT

http://baike.baidu.com/view/85022.htm

幻海蓝梦 2010-07-19 19:20 发表评论

DOM--Document详细的方法list

幻海蓝梦 — Mon, 19 Jul 2010 11:15:00 GMT

http://opensource.csdn.net/uploads/doc/javase-6-doc-api-zh_CN/org/w3c/dom/Document.html

原文：http://hi.baidu.com/fly_with_the_wind/blog/item/6762a22d090939e58b1399f7.html

createElementNS() 方法可创建带有指定命名空间的元素节点。此方法可返回一个 Element 对象。createElementNS() 方法与 createElement() 方法相似，只是它创建的 Element 节点除了具有指定的名称外，还具有指定的命名空间。只有使用命名空间的 XML 文档才会使用该方法。所以document.createElementNS()方法创建的是XML Element

setAttributeNS

void setAttributeNS(String namespaceURI,String qualifiedName,String value)

throws DOMException

添加新属性。如果具有相同本地名称和名称空间 URI 的属性已经出现在元素上，则将其前缀更改为 qualifiedName 的前缀部分，并将其值更改为 value 参数。此值为简单的字符串；在设置它时没有对它进行解析。因此，将任何标记（如作为实体引用识别的语法）视为字面值文本，并且需要在写出时由实现适当转义。为了分配包含实体引用的属性值，用户必须创建一个 Attr 节点，加上所有 Text 和 EntityReference 节点，构建适当的子树，并使用 setAttributeNodeNS 或 setAttributeNode 作为属性的值分配它。
按照 [XML Namespaces]，如果应用程序希望没有名称空间，则它们必须将值 null 用作方法的 namespaceURI 参数。

参数：

namespaceURI - 要创建或更改的属性的名称空间 URI。

qualifiedName - 要创建或更改的属性的限定名称。

value - 以字符串形式设置的值。

抛出：

DOMException - INVALID_CHARACTER_ERR: 根据在 Document.xmlVersion 属性中指定的正在使用的 XML 版本,如果指定名称不是 XML 名称，则引发此异常。
NO_MODIFICATION_ALLOWED_ERR:如果此节点为只读的，则引发此异常。
NAMESPACE_ERR: 在以下情况下引发此异常：如果根据 XML 规范中的名称空间，qualifiedName 是错误格式的；如果 qualifiedName 有前缀且 namespaceURI 为 null；如果 qualifiedName 有名为 "xml" 的前缀且 namespaceURI 不同于 "http://www.w3.org/XML/1998/namespace"；如果 qualifiedName 或其前缀为 "xmlns" 且 namespaceURI 不同于 "http://www.w3.org/2000/xmlns/"；或者如果 namespaceURI 为 "http://www.w3.org/2000/xmlns/" 且 qualifiedName 及其前缀都不是 "xmlns"。
NOT_SUPPORTED_ERR:如果实现不支持功能 "XML" 且文档中公开的语言不支持 XML 名称空间（例如 [HTML 4.01]），则可能引发此异常。

getAttributeNS() 方法的作用是：通过命名空间URI和名称获取属性值。

  方法：getAttributeNS(ns,name)

  参数：ns：必要参数。指定命名空间的URI（对应需要获取的属性值）；

        name：必要参数。指定需要获取的属性名称。

  例子：下面的代码片断将获取“books_ns.xml”文件中第一个元素“lang”属性值：

     xmlDoc=loadXMLDoc("books_ns.xml");

     var x=xmlDoc.getElementsByTagName("title")[0];
     var ns=http://www.w3schools.com/children/

     document.write(x.getAttributeNS(ns,"lang"));

幻海蓝梦 2010-07-19 19:15 发表评论

Thinking in VML---第一部分 VML入门

幻海蓝梦 — Mon, 19 Jul 2010 09:45:00 GMT

摘要: 原文：http://dlstone.blogchina.com/control/2107979.html 第一部分 VML 入门 ... 阅读全文

幻海蓝梦 2010-07-19 17:45 发表评论

不为人知的JS调用样式的方法---document.createElement().addRule(..)

幻海蓝梦 — Mon, 19 Jul 2010 09:20:00 GMT

原文：http://www.10000it.net/javascript/20090808/731.html

很多人可能在调用css样式都是使用传统的方式调用其实有很多方法可以进行调用，如使用内嵌样式，在html直接加入样式，给定外部样式文件，在外部样式文件中使用 @import

url(样式文件路径)，这些都是大家常用的，其实还有就是使用javascript进行样式的定义。

第一种：

var style = document.createElement(’link’);
style.href = ’style.css’;
style.rel = ’stylesheet’;
style.type = ‘text/css’;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

第二种简单：

document.createStyleSheet(style.css);

动态的 style 节点，使用程序生成的字符串：

var style = document.createElement(’style’);
style.type = ‘text/css’;
style.innerHTML=”body{ background-color:blue; }”;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

但是在上面只能在Firefox兼容，在IE里却不支持。

var sheet = document.createStyleSheet();
sheet.addRule(’body’,'background-color:red’);

如果按照上面的话就能成功，但是很麻烦，要把字符串拆开写。

我一直在搜索着用javascript定义样式的代码，终于找到了，代码如下。

document.createStyleSheet(”javascript:’body{background-color:blue;’”);

但用上面的javascript代码唯一的缺点就是url 最大 255 个字符，长一点的就不行了，经过 SXPCrazy 提示，将代码进行修改成如下：

window.style=”body{background-color:blue;”;
document.createStyleSheet(”javascript:style”);

完美解决！！代码:

以上是完整代码！
本文关键字 javascript,网页设计,javascript调用样式,疯狂IT

幻海蓝梦 2010-07-19 17:20 发表评论

JS--命名空间的理解（namespace）

幻海蓝梦 — Mon, 19 Jul 2010 09:12:00 GMT

原文：http://dev.firnow.com/course/3_program/java/javashl/20081128/152797.html

引入命名空间之前，一个令开发人员头疼的问题就是如何防止函数名/类名和其他人的冲突，在一个公司内部项目组之间可以通过命名预定（比如加前缀等）解决这个问题，但是把视线放到整个软件开发领域，在当今协作开发相当盛行的时代，这个问题却依然存在。在使用多个第三方框架或类库的时候，你唯一能作的就是祈祷它们的命名不要冲突，如果真正发生这种灾难的话，你唯一能作的就是放弃其中一个（注：可能是我孤陋寡闻，呵呵）。命名空间的引入相当程度上解决了这个问题，当然，如果你使用的命名空间和其他公司不幸一样，而对方又是微软、SUN等大佬，那恭喜你，呵呵@_@!
从事Web开发不可避免要接触JavaScript，目前最新版本的JavaScript还是不支持命名空间，所以命名冲突的问题凸显无疑，想象一下你引用了两个js文件，却发现由于命名问题导致你不得不放弃其中一个，从而导致多写了许多代码，无疑是十分令人沮丧的。在JavaScript新版本引入命名空间概念之前，发扬自立更生精神和创造性是我们程序员的基本义务;-)
实现前提：与Delphi、C#等语言不同，JavaScript中的类并不是对象的定义，事实上JavaScript中并不存在真正的类，这里的类实际上是用函数模拟实现的，而JavaScript中的函数实际上是一个对象，因此在JavaScript中：一个类就是一个对象。这和传统概念概念极为不同，在JavaScript中，创建某个类的实例实际上就是将类（=对象，记住）复制了一份。看到这里，有点设计模式概念的应该就可以看出来了，在JavaScript中，类机制使用了原型（prototype）模式。
实现原理：既然看清楚了类的本质，那么问题就简单了，如果将GEA项目组所有JS类和函数作为属性放在名为GEA的对象里面，然后将GEA对象以属性的方式放在名为Grandsoft对象里面不就可以达到我们的目的，比如Grandsoft.GEA.Person实际上是在Grandsoft对象的属性GEA（也是一个对象）中的类Person（还是一个对象）。
实现非常简单，整个命名空间机制的实现不超过20行代码，分析如下：
// 声明一个全局对象Namespace，用来注册命名空间
Namespace = new Object();
// 全局对象仅仅存在register函数，参数为名称空间全路径，如"Grandsoft.GEA"
Namespace.register = function(fullNS)
{
    // 将命名空间切成N部分, 比如Grandsoft、GEA等
    var nsArray = fullNS.split('.');
    var sEval = "";
    var sNS = "";
    for (var i = 0; i < nsArray.length; i++)
    {
        if (i != 0) sNS += ".";
        sNS += nsArray[i];
        // 依次创建构造命名空间对象（假如不存在的话）的语句
        // 比如先创建Grandsoft，然后创建Grandsoft.GEA，依次下去
        sEval += "if (typeof(" + sNS + ") == 'undefined') " + sNS + " = new Object();"
    }
    if (sEval != "") eval(sEval);
}
上面就是在JavaScript中模拟命名空间机制的完整实现，使用方式如下：

// 注册命名空间Grandsoft.GEA, Grandsoft.GCM
Namespace.register("Grandsoft.GEA");
Namespace.register("Grandsoft.GCM");
// 在Grandsoft.GEA命名空间里面声明类Person
Grandsoft.GEA.Person = function(name, age)
{
    this.name = name;
    this.age = age;
}
// 给类Person添加一个公共方法show()
Grandsoft.GEA.Person.prototype.show = function()
{
    alert(this.name + " is " + this.age + " years old!");
}
// 演示如何使用类Person
var p = new Grandsoft.GEA.Person("yanglf", 25);
p.show();
哈哈，简单吧，这么简单的代码我就不多说了，大家自己看着玩吧，其实我有点懒，呵呵@_@!!!

幻海蓝梦 2010-07-19 17:12 发表评论

namespace(命名空间)与VML---解释很易懂

幻海蓝梦 — Mon, 19 Jul 2010 09:00:00 GMT

原文：http://my.oschina.net/hcom/blog/4373
以下是网上找的关于VML的解释：

VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为， VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。
    VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。为了显示它的强大，和增加你学习VML的信心，先给你看看一个VML例子:

Hello world!
Hello VML!

    在VML里面，标记使用的是XML扩张，需要一个namespace(命名空间)，你可以使用惯用的“v”作为命名空间，使用IE5.0到IE6.0通用的定义如下:

xmlns:v="urn:schemas-microsoft-com:vml">

    xmlns 全称就是XML NameSpace 也就是命名空间。Behavior(行为)也是IE5.0新推出的东西，它的功能非常强大，结合样式表，可以给任何HTML对象增加行为（新的属性、方法、事件），而在这里，它的用处是把命名空间“v”和系统预定义的行为VML连接。这样定义以后，你就可以使用下面的标记了，和普通的HTML标记有所区别，每个标记都增加了一个命名空间:

    和其他HTML元素一样，VML标记里面可以定义DHTML大部分属性和事件，比如说id,name,title,onmouseover等等。在写法上VML比较灵活，很多属性既可以写在标记里面，又可以独立出一个新的标记来表示:

StrokeColor=red Path="m 0,0 l 10,10 x e">
等同于下面的写法:

    当然不是所有的属性都可以写成独立的标记，常用的比如说上面的 Stroke(按我的理解可以翻译成线性)，Path，Shadow，Fill(填充)等，VML这样的方式可以理解为 shape 的属性分类，使属性更直观。
    Shape 对象派生出来的一些对象，更加直接的图象，比如说 Rect(矩形)，RoundRect(圆边的矩形)，Oval(圆)，Line(线)，PolyLine(不规则折线)，Image(图形文件)等等，以后将对这些对象细细描述。

幻海蓝梦 2010-07-19 17:00 发表评论

CSS--Z-index属性详解

幻海蓝梦 — Mon, 19 Jul 2010 06:59:00 GMT

原文：http://www.csschina.net/a/jc/2010/0203/824.html

大多数的CSS属性都很容易使用。常常，当您对标记语言的元素使用CSS属性时，产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性，却会有一些复杂，且只能在给定的环境下才会工作。

Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致（兼容性）上的混乱和（开发者心理上）的挫败感。但滑稽的是，一旦你真正理解了Z-index，你会发现它却是一个非常容易使用的属性，并且会为解决很多layout方面的挑战提供强有力的帮助。

在这篇文章里，我们会准确的说明究竟什么是Z-index，它为什么会这么不为人所了解，并一起讨论一些关于它的实际使用中的问题。我们同时会描述一些会遇到的浏览器间的差异，那些存在于已有版本的IE及Firefox浏览器中的独特问题。这篇关于Z-index属性的全透视文章将会为那些有着良好基础的开发者在使用Z-index属性时提供强大的自信心及强有力的帮助。

这是什么？

Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。

为了更清晰的描述Z-index是如何工作的，上面的这张图片夸大展示了层叠元素在视觉位置上的关系。

自然的层叠顺序

在一个HTML页面中，自然的层叠顺序（也就是元素在Z轴上的顺序）是由很多因素决定的。下面的是一个列表，它展示的列表项是处于一个层叠环境（stacking context，暂时未找到合适的汉语翻译，应该是指层叠的元素所处的那个层叠的环境）中，这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋予Z-index属性。

元素的背景和边框会创建一个stacking context

引用:
具有负值的stacking contexts元素，按照出现的先后顺序排列（越靠后层级越靠上）
没有被定位，没有浮动的块级元素，按照出现的先后顺序排列
没有被定位，浮动的元素，按照出现的先后顺序排列
内联元素，按照出现的先后顺序排列排列
被定位的元素，按照出现的先后顺序排列

Z-index 属性，当被正确使用的时候，会改变自然的层叠顺序。

当然，除非元素已经被定位按照互相交叠的形式展现，否则元素的层叠顺序并不会特别的明显。下面的，负边距的BOX被拿来展示，用以说明自然的层叠顺序。

上面的BOX被定义了不同的背景和边框色，并且后两个是交错的并且定义了负值的顶部边距，所以我们可以看到自然的层叠顺序。灰色的BOX在标记中位于第一位，蓝色的BOX位于第二位，金色的排在第三。应用的负边距明确的表明这个事实：这些元素未被设置Z-index 属性；它们的层叠顺序是自然的，或者是默认的，复合规则的。产生交错的现象都是因为负值的边距。

为什么它会产生混乱？

即使Z-index并不是一个难以理解的属性，但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。

为了证明Z-index只能工作于被定位了的元素中，这里有同样的三个BOX，它们应用了Z-index属性来尝试打破他们自然的层叠顺序。

灰色的BOX具有“9999”的Z-index值，蓝色的BOX有“500”的Z-index值，金色的有“1”的Z-index值。合乎逻辑的，你会认为这三个BOX的层叠顺序会倒过来。但事实却不是这样，因为这些元素都没被设定position属性。

下面是同样的三个BOX，分别都被设置了position: relative，他们的Z-index值还是按照上面那段设定。

现在的结果是我们所期待的了：这些元素的层叠顺序实现了反向；灰色的BOX覆盖在蓝色之上，蓝色的覆盖在金色之上。

语法

重复一下，Z-index属性只能工作于那些被定义了position属性的元素中。这并没有被足够的重视，尤其是对于那些新手。

幻海蓝梦 2010-07-19 14:59 发表评论

Javascript--document对象详解

幻海蓝梦 — Mon, 19 Jul 2010 06:14:00 GMT

原文：http://www.lao8.org/html/8/2008-3-13/2008313112602.html

document 文挡对象 - JavaScript脚本语言描述
———————————————————————
注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写
否则会提示你一个错误信息 “引用的元素为空或者不是对象\\\\\”
———————————————————————

对象属性

document.title //设置文档标题等价于HTML的title标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期，只读属性
document.fileModifiedDate //文件修改日期，只读属性
document.charset //设置字符集简体中文:gb2312
document.fileSize //文件大小，只读属性
document.cookie //设置和读出cookie

———————————————————————
常用对象方法

document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.body.appendChild(oTag)
———————————————————————

body-主体子对象

document.body //指定文档主体的开始和结束等价于body>/body>
document.body.bgColor //设置或获取对象后面的背景颜色
document.body.link //未点击过的链接颜色
document.body.alink //激活链接(焦点在此链接上)的颜色
document.body.vlink //已点击过的链接颜色
document.body.text //文本色
document.body.innerText //设置body>…/body>之间的文本
document.body.innerHTML //设置body>…/body>之间的HTML代码
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.background //背景图片
document.body.appendChild(oTag) //动态生成一个HTML对象

常用对象事件

document.body.onclick=”func()” //鼠标指针单击对象是触发
document.body.onmouseover=”func()” //鼠标指针移到对象时触发
document.body.onmouseout=”func()” //鼠标指针移出对象时触发
———————————————————————
location-位置子对象

document.location.hash // #号后的部分
document.location.host // 域名+端口号//好像返回的是主机名localhost,没有返回端口号
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分
documeny.location.reload() //刷新网页
document.location.reload(URL) //打开新的网页
document.location.assign(URL) //打开新的网页
document.location.replace(URL) //打开新的网页
———————————————————————
selection-选区子对象
document.selection

例如：

请选中这里的部分文字。

selection的createRange方法

document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。

配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

这些好像都是只有在IE下才能实现。。

———————————————————————

images集合(页面中的图象)

a)通过集合引用
document.images //对应页面上的img标签
document.images.length //对应页面上img标签的个数
document.images[0] //第1个img标签
document.images[i] //第i-1个img标签

b)通过name属性直接引用
img name=”oImage”
document.images.oImage //document.images.name属性

c)引用图片的src属性
document.images.oImage.src //document.images.name属性.src

d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同时在页面上建立一个img /标签与之对应就可以显示

———————————————————————-

forms集合(页面中的表单)

a)通过集合引用
document.forms //对应页面上的form标签
document.forms.length //对应页面上/formform标签的个数
document.forms[0] //第1个/formform标签
document.forms[i] //第i-1个/formform标签
document.forms[i].length //第i-1个/formform中的控件数
document.forms[i].elements[j] //第i-1个/formform中第j-1个控件

b)通过标签name属性直接引用
/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.表单名.控件名

c)访问表单的属性
document.forms[i].name //对应form name>属性
document.forms[i].action //对应/formform action>属性
document.forms[i].encoding //对应/formform enctype>属性
document.forms[i].target //对应/formform target>属性

document.forms[i].appendChild(oTag) //动态插入一个控件
document.all.oDiv //引用图层oDiv
document.all.oDiv.style.display=”" //图层设置为可视
document.all.oDiv.style.display=”none” //图层设置为隐藏
document.getElementId(”oDiv”) //通过getElementId引用对象
document.getElementId(”oDiv”).style=”"
document.getElementId(”oDiv”).display=”none”
/*document.all表示document中所有对象的集合
只有ie支持此属性，因此也用来判断浏览器的种类*/

图层对象的4个属性
document.getElementById(”ID”).innerText //动态输出文本
document.getElementById(”ID”).innerHTML //动态输出HTML
document.getElementById(”ID”).outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML

幻海蓝梦 2010-07-19 14:14 发表评论

Javascript---Hash类详解

幻海蓝梦 — Mon, 19 Jul 2010 05:55:00 GMT

原文：http://www.phpfans.net/manu/Prototype/prototype/api/hash.htm

Hash 可以看作是一个 关联数组，它对每一个值都绑定了一个唯一的键（值并不必须是唯一的），然而，它不能保证迭代时元素的顺序始终一致。因为 JavaScript 程序语言的特性，每个对象实际上都是一个 hash，但是，本篇所述的 Hash 增加了许多方法，让你能够轻松地枚举键和值、迭代“键/值”对、合并两个 hash、将 hash 编码成为一个查询字符串等等。

创建一个 hash

构造一个 Hash 实例有两种方法：第一种是使用 new 关键字实例化一个 JavaScript 对象（new Hash(obj)）。第二种是使用 $H 函数。传递一个 JavaScript 对象或是一个 Hash 给 $H，$H 函数会克隆它们，并不会对原始对象造成任何影响。

对于上述两种构造方法，你也可以不传递任何参数而调用它们。它们将返回一个空的 hash。

在 Prototype 1.6 中的后向兼容性变更

后向兼容性变更 - 虽然新版本的 Hash 与之前的版本具有相同的目标，但是新版本的 Hash 不再兼容先前版本的 Hash 类型。

现在，不能再通过 Hash 实例的属性来访问“键/值”对，它们是私有的，这是为了防止在 Hash 实例上定义的属性和混入的方法引起键的冲突。这意味着你必须使用 Hash#get(key)、 Hash#set(key, value) 和 Hash#unset(key) 实例方法来访问、设置或删除“键/值”对。例如：

						var myhash = new Hash(); 
// 老的 API --> 新的 API 
myhash.name = "Bob";	-->	myhash.set('name', 'Bob'); 
myhash.name;		-->	myhash.get('name'); 
delete myhash.name;	-->	myhash.unset('name');

你也应该了解关于 Hash API 的其它变更：

$H(object) 快捷方法现在完全等同于 new Hash(object)。无论参数是一个对象还是另一个 Hash，它们都返回一个新的对象。
Hash#merge 返回一个新的 Hash，而不再是对调用该方法的实例对象进行修改。
Hash#update 是 Hash#merge 的一个破坏性版本，它会修改调用该方法的实例对象。
Hash#clone 返回一个新的当前 Hash 对象的克隆实例。
Hash#toObject 返回一个当前 Hash 内部对象的复本。
译注：Prototype 使用了一个单独的内部对象来存储“键/值”对。
Hash.toQueryString 现在是 Object.toQueryString 的一个别名。（Hash.toQueryString 已不推荐使用，在将来的 Prototype 版本中，这个方法将会被移除。）
Hash#remove 已经被 Hash#unset 取代。
Hash.toJSON 已经被 Object.toJSON 或 Hash#toJSON 实例方法取代。

注意，对于 Prototype 的早期版本（< 1.6）

传递一个 hash 到 $H 并不会克隆它。

因为混入了 Enumerable，同时，它还有自己的方法，所以 Hash 不是所有的名称都可以用作“键”的。如果新增的键的名称与 Hash 的任何一个方法同名，则那个方法不能再被调用。即使因为你不需要调用那个方法而侥幸获得成功，但仍然会有问题：

						var h = new Hash({ ... }); 
h['each'] = 'my own stuff';
h.map(); 
// -> 错误，因为 'each' 不再是一个函数

在 Enumerable 中，最重要的方法是 each，因为几乎每一个其它的方法都需要它——覆盖它将导致我们的 hash 实例成为一个废物。你也不能抱着侥幸心理使用 _each，因为它也是 Enumerable 内部的一个重要方法。

方法

clone
1.6

										clone() -> newHash

返回一个 hash 的克隆。

each

										each(iterator) -> Hash

迭代处理 hash 中的“键/值”对。

get
1.6

										get(key) -> value

返回 hash 指定键对应的值。

inspect

										inspect() -> String

返回 hash 针对调试的字符串表现形式。

keys

										keys() -> [String...]

返回一个数组，该数组包括 hash 中所有的键的名称。

merge
1.6 改进

										merge(object) -> newHash

将 object 和当前的 hash 实例合并，返回合并后的结果。在 v1.6.0 之前： 这是一个破坏性的方法（对象的值将会被增加到当前 hash 中）。从 v1.6.0 开始： 这不再是一个破坏性的方法（在合并之前，hash 已被克隆）。

remove
不推荐

										remove(key) -> value
remove(key1, key2...) -> Array

从 hash 中移除指定的键，并返回被移除的键对应的值。从 v1.6.0 开始，该方法不可用。

set
1.6

										set(key, value) -> value

将 hash 中 key 指定的键的值设置为 value，返回所设置的值（value）。 译注：如果不存在指定的键，则新增。

toJSON
1.5.1

										toJSON() -> String

返回一个 JSON 字符串。

toObject
1.6

										toObject() -> Object

克隆 hash 內部的 Object 并返回。译注：Hash 在内部使用一个单独的 Object 保存“键/值”对。

toQueryString
1.6 改进

										toQueryString() -> String

将一个 hash 转换为 URL 编码字符串形式。

unset
1.6

										unset(key) -> value

删除 hash 中的键，并返回键对应的值。

update
1.6

										update(object) -> Hash

使用参数 object 包含的“键/值”对更新当前 hash。原始的 hash 对象将会被修改。

values

										values() -> Array

返回一个数组，该数组是 hash 中所有的值的集合。

幻海蓝梦 2010-07-19 13:55 发表评论

Javascript 定时器---------工作原理

幻海蓝梦 — Thu, 15 Jul 2010 12:41:00 GMT

原文：http://blog.anbutu.com/javascript/how-javascript-timers-work
对于一个编写基础代码的程序员来说，理解Javascript定时器的工作原理是很重要的。由于Javascript的定时器工作在一个单线程的环境中，因此它们常常表现出一些违反直觉的行为。下面我们就首先从三个被用来创建和操作定时器函数入手来分析定时器的工作原理。

var id = setTimeout(fn, delay); 该函数初始化一个延迟为 delay 的定时器并返回该定时器的id，在定时器触发前，我们可以通过返回的定时器id来取消这个定时器。当该定时器触发时将调用 fn 这个函数。
var id = setInterval(fn, delay); 该函数和 setTimeout 类似，但它会每隔 delay 的时间间隔调用 fn 函数直到该定时器被取消。
clearInterval(id);, clearTimeout(id); 这两个函数都接受一个定时器id（前面两个函数的返回值）作为参数，用来取消相应的定时器。

为了搞清楚定时器的内部是如何工作的，我们需要证实这样一个事实：定时器的延迟时间是不能够被保证的。这是因为所有在浏览器环境中的 Javascript 都是在一个单线程中执行的，只有在遇到两个“执行窗口”的缝隙的时候那些异步的事件（用户点击鼠标、定时器触发）才能被执行。下面这个图例很好的演示了这一点：

javascript timers

上面的图中包含了很多需要理解的信息，一旦完全理解了这些，你会对 Javascript 的异步时间的执行有更加清晰的认识。在上面的这个一维的图示中，竖直方向是以微妙为单位的时间，蓝色框代表 Javascript 执行的代码块。例如，上图中第一个代码块执行时间约为18毫秒，鼠标点击（Mouse Click）事件的回调函数执行了大约11毫秒。

因为 Javascript 在同一时间只能执行某个代码块（这是由它单线程的本质决定的），当这个代码块执行的时候，异步事件的响应就被“阻塞”了，这意味着这时候产生的异步事件（鼠标点击、定时器触发、XMLHttpRequest请求完成）被加入到一个队列中（不同的浏览器处理事件缓存的方式有很大的差异，这里我们只需要认为事件被放入了一个队列就可以了）等待着下次机会执行。

在上图中，在第一个代码块执行期间初始化了两个定时器：一个10毫秒的 setTimeout 和一个10毫秒的 setInterval。由于在定时器触发的时候，第一个代码块还没有执行完成，因此定时器设定的回调函数不会被立即执行，相反它会被加入队列等待下次机会执行。

另外，在第一个代码块执行过程中发生了一次鼠标点击事件，与这个异步事件（因为我们不能确定鼠标点击事件什么时候会发生，因此也认为它是异步的）相关联的回调函数也不会立即执行，它同样被加入队列等待下次机会执行。

当第一个代码块执行完，浏览器会查询是否有等待执行的任务？而当前情况下，鼠标点击事件和定时器的回调函数都等待执行，于是浏览器按照顺序先取出鼠标点击事件的回调函数并立即执行它，而定时器的回调函数仍需要等待下次机会执行。

我们注意到，在鼠标点击事件的回调函数执行过程中，“间隔定时器”（interval）被触发，和普通定时器一样，它的回调函数也被加入队列等待机会执行。但是，当“间隔定时器”再次被触发（在普通定时器的回调函数的执行期间）的时候，它的回调函数被丢弃而不是被加入等待队列。假设所有的“间隔定时器”的回调函数无论如何都被加入等待队列的话，那么在执行一个非常大的代码块的时候就会有大批的回调函数被加入等待队列，等到代码块执行结束，这一批回调函数就会无间隔的执行。与此相反，浏览器更倾向于在把“间隔定时器”的回调函数加入等待队列之前简单的等待直到等待队列中没有其他的“间隔定时器”的回调函数。

实际上我们可以看到，这正是“间隔定时器”的回调函数正在执行的时候另一个个“间隔定时器”被触发的情形。这向我们揭示了一个重要的事实：“间隔定时器”不关心当前正在运行的回调函数是什么，只是简单的把回调函数加入等待队列即使这意味着这两个回调函数将会无间隔的被执行。

最后，当第二个“间隔定时器”的回调函数执行结束，我们看到已经没有等待处理的回调函数了，这时候浏览器等待新的异步事件发生。当到达 50ms 标记的时候，“间隔定时器”再次被触发，这时候已经没有等待执行的任务，因此回调函数立即被执行。

下面让我们看一个更加能够说明 setTimeout 和 setInterval 之间区别的例子：

setTimeout(function(){
/* Some long block of code... */
setTimeout(arguments.callee, 10);
}, 10);

setInterval(function(){
/* Some long block of code... */
}, 10);

当第一眼看上去的时候也许你会觉得这两个函数功能是完全一样的，但实际上它们并不相同。使用 setTimeout 的函数会保证它们执行的间隔至少为 10 毫秒（只可能多不可能少），而使用 setInterval 的代码会尝试每隔 10 毫秒执行一次，它不会在乎上一次执行到现在的间隔有多少。

在上面我们学到了很多东西，让我们总结一下：

Javascript 引擎是单线程的，致使异步事件的回调函数会被加入队列等待机会执行。
setTimeout 和 setInterval 在如何执行异步代码上有根本的区别
如果定时器（的回调函数）不能够被立即执行，那么它将被推迟到下次机会执行（这将大于它预期的延迟）
如果回调函数执行时间过长（长于定时器的延迟时间），“间隔定时器”有可能会一个接一个无间隔的执行

All of this is incredibly important knowledge to build off of. Knowing how a JavaScript engine works, especially with the large number of asynchronous events that typically occur, makes for a great foundation when building an advanced piece of application code.

幻海蓝梦 2010-07-15 20:41 发表评论

悟透 JavaScript--（非常诗意的文章）

幻海蓝梦 — Thu, 15 Jul 2010 12:07:00 GMT

摘要: 原文：http://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html 引子编程世界里只存在两种基本元素，一个是数据，一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。数据天生就是文静的，总想保持自己固有的本色；而代码却天生活泼，总... 阅读全文

幻海蓝梦 2010-07-15 20:07 发表评论

用wz_jsgraphics.js（javascript图形库）进行画矢量图,兼容多浏览器

幻海蓝梦 — Wed, 14 Jul 2010 03:22:00 GMT

原文： http://squll.blogbus.com/logs/3932957.html
序：在 www.sitepoint.com 上看了 Simon 的一篇 BLOG ，引导我去了一个很棒的 Web 开发站点 http://www.walterzorn.com/ ，并在那里获得了一个仅用 DHTML 和 Javscript 技术开发的一个高性能的矢量图形库 wz_jsgraphics.js （感谢 Walter Zorn 开发了这个图形库），使用它就可以在你的网页上画出漂亮的矢量图形了。进入这个图形库的介绍页面 http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm ，映入眼帘的是折线、多边形、圆等常见的一些几何图形，起初我以为不过是一些图片罢了，当我看到这行小字 These are not image files. Shapes & text have been dynamically drawn with wz_jsgraphics.js 后，并细细阅读了关于它的说明后，才意识到除了VML 和 SVG可以在网页上绘制显示矢量图形，仅用DHTML 和 Javascript 同样可以做到这一切！是不是觉得很吃惊呢？(双击一下这个文档，看看放大后的矢量图形吧)，ok!废话少说，下面我将详细介绍一下这个图形库。

★ 总览 (overview)

该图形库使用了 DHTML 和 Javascript 技术，它可以画线，圆，椭圆，折线，多边形，矩形。对于一个不太了解 Javascript 的人来说使用这个图形库也是非常容易的，另外，使用这个图形库画出的图形是完全被优化到像素级的！

★ 浏览器的兼容性

Linux 系统 :
Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror 3.0.3 ( 非常慢 ), Netscape 4, Opera 5 and 6.

Windows 系统 :
Gecko-Browsers, IE 4, 5 and 6, Netscape 4, Opera 5, 6 and 7.

说明：如果在网页全部加载完成后，使用这个矢量图形库进行绘制，在 Opera 版本 7 以前的浏览器中不会执行， Netscape 版本 4 也不会执行。相反，当 HTML 页面正在被解析时，使用这个图形库进行绘制是全部浏览器均能做到的。

★ 怎样使用这个矢量图形库？

1 ．包含这个库

插入下面的代码到你的 html 文件的开头部分（在和之间）：

2 ．使用层（ div 或 layer ）作为画布（ canvases ）
如果是当页面正被载入时，直接在 html 页面中绘制，那么这个步骤不是必须的。

如果在页面加载完成后绘制，应该设置几个具有绝对坐标的层，作为你的画布，每一个层应该有一个唯一的 id:

...

3 ．下载并保存这个图形库

到这个地址 http://www.walterzorn.com/scripts/wz_jsgraphics.zip 下载，将解压后的 wz_jagraphics.js 与你的 html 文件放至相同的目录中，如果你的 wz_jagraphics.js 与 html 文件处于不同的目录下，记得在 src=”wz_jsgraphics.js” 中指示 wz_jagraphics.js 的相对路径。

★ 怎样使用这个矢量图形库中的绘制函数？

1 ． 创建一个 jsGraphics 对象

a) 在页面完全载入后绘制：

（这种方式不会在 Netscape 版本 4 和 Opera 版本小于 7 的浏览器中执行）

还记得前面用 div 元素创建的画布吗？看下面的示例，需要为 div 创建相应的 jsGraphics 对象，这些代码必须插入到相关的 div 元素结束标志后面，但必须在的前面， div 元素的 id 作为 new jsGraphics(); 的构造参数，像下面这样：

如果有多个 div 元素，每一个 div 都需要有它自已的 jsGraphics 对象：

b ）在页面载入的时候绘制
（在 Netscape 4 和 Opera 5/6 可以执行）

只需要将构造参数设为空：

你可以选择 jg,jg2 或 jg_doc 其它的变量名，只要不违反 Javascript 的命名规则就可以。

2. 图形绘制函数

为确保所有浏览器能正确执行，这里选择页面载入时进行绘制，即上文的 b 方式

一旦产生这些图形对象（在这个示例中 jg, jg2 或 jg_doc ），就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示（采用上文 a 方式构造图形对象）：

开始画时应首先选择画笔颜色，否则，画笔的颜色取默认值－黑色。坐标值作为绘制图形方法的参数，如果采用上文的 a 方式构造图形对象，那么坐标值是相对于 div 元素的左上角的。每一个画布（图形对象），它的 paint 方法必须被显示的调用以产生 html 格式的图形，否则，在你的屏幕上什么都不会发生。

函数名（方法）	示例代码（用 jg 图形对象）
setColor( "#HexColor" ); 指定画笔颜色，一旦设置后，这个颜色会一直保留，直到下一次再重新指定画笔颜色，这个颜色值可以类似于 html 中的 #rrggbb 颜色表示，用名称表示颜色也可以，例如：“ maroon ”	jg.setColor("#ff0000"); or with identical result jg.setColor("red");
setStroke( Number ); 指定画笔采用的线厚度，这个厚度一旦被设置，会一直保留，直到下一次重新指定一，默认厚度是 1px. 要设置点划线型，需要传 Stroke.DOTTED 参数，点划线型同样适用于矩形，多边型，折线和椭圆。	jg.setStroke(3); or jg.setStroke(Stroke.DOTTED);
drawLine( X1, Y1, X2, Y2 ); 画线。从第一个坐标点到第二个坐标点，线的厚度由 setStroke 设置。	jg.drawLine(20,50,453,40);
drawPolyline( Xpoints, Ypoints ); 一条折线是一系列线段的集合， Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合，必须像下面这样声明： var Xpoints = new Array(x1,x2,x3,x4,x5); var YPoints = new Array(y1,y2,y3,y4,y5);	var Xpoints = new Array(10,85,93,60); var YPoints = new Array(50,10,105,87); jg.drawPolyline(Xpoints,Ypoints);
drawRect( X, Y, width, height ); 一个矩形的外边线。参照左上角的坐标点，并指定矩形的宽度和高度。	jg.drawRect(20,50,70,140);
fillRect( X, Y, width, height ); 填充矩形，参照左上角的坐标点，并指定矩形的宽度和高度。	jg.fillRect(20,50,453,40);
drawPolygon( Xpoints, Ypoints ); 多边形。 Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合，必须像下面这样声明： var Xpoints = new Array(x1,x2,x3,x4,x5); var YPoints = new Array(y1,y2,y3,y4,y5); 如果始点和终点末被指定，多边线将会自动闭合。	var Xpoints = new Array(10,85,93,60); var Ypoints = new Array(50,10,105,87); jg.drawPolygon(Xpoints, Ypoints); Instead of Xpoints and Ypoints you may use another name provided it follows the rules for variable names.
fillPolygon( Xpoints, Ypoints ); 填充矩形。参数作用见 drawPolygon()	jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87));
drawEllipse( X, Y, width, height ); 画椭圆边线。参照椭圆的外接矩形， x 和 y 是这个外接矩形的左上角坐标	jg.drawEllipse(20,50,70,140); or jg.drawOval(20,50,70,140);
fillEllipse( X, Y, width, height ); 填充椭圆。参数见 drawEllipse()	jg.fillEllipse(20,50,71,141); or jg.fillOval(20,50,71,141);
drawString( "Text", X, Y ); 写文本至由 x 和 y 坐标指定的位置。不同于 Java ，坐标值是第一行文本的左上角坐标值。如果文本中包含有 HTML 标记将被转义，举个例子： "Some Text more Text" 会被转义为两行 setFont( "font-family", "size+unit", Style ); 在 drawString() 之前调用。指定字体，大小，样式，字体和大小可以是与 HTML 中指示的一样，至于样式，可以使用的有： Font.PLAIN 默认样式，非粗体和斜体 Font.BOLD 粗体 Font.ITALIC 斜体它们可以结合使用	jg.setFont("arial","15px",Font.BOLD); jg.drawString("Some Text",20,50);
drawImage( "src", X, Y, width, height ); 在指定的位置画图像， ”src” 参数指定图像所在路径， width 和 height 参数允许调整图像宽高。	jg.drawImage("friendlyDog.jpg", 20,50,100,150);
paint(); 必须显示调用，才能真正在 html 页面上画图形，不推荐每隔一段（每画一个图形）就调用一次。像下面这样的调用应该避免 : jg.drawEllipse(0, 0, 100, 100); jg.paint(); jg.drawLine(200, 10, 400, 40); jg.paint(); ... 像下面这样的调用性能会很高 : jg.drawEllipse(0, 0, 100, 100); jg.drawLine(200, 10, 400, 40); /... 还有其它画的方法 ... / jg.paint(); // 最后调用 paint()	jg.paint();
clear(); 与图形对象关联的 div 画布中的图形被清除（在 div 中不是由这个图形对象创建的内容是不会被改变的）	jg.clear();
setPrintable( true ); 默认情况下，打印这些图形是不太可行的，因为浏览器的默认打印设置中会关闭打印背景，调用 setPrintable() ，并设置参数为 true ，将重置图形为可打印的（至少在 Mozilla/Netscape 6+ and IE 中）

幻海蓝梦 2010-07-14 11:22 发表评论

让DIV不换行 & 多div重叠

幻海蓝梦 — Sun, 04 Jul 2010 14:23:00 GMT

原文：http://www.okajax.com/a/200807/0G0N442008.html
一，单个DIV：
1.用nobr元素

不换行不换行

2.用nowrap元素
Code:

div不换行div不换行div不换行

二，两个DIV
1. 用CSS里的float属性

第一个div

第二个div不换行

2. 用CSS里的diplay属性

CSS中的不换行

第一个div

第二个div不要换行

多DIV重叠

注意:此写法有一个问题

若页面头部有以上这句话则无法实现滚动条的功能

幻海蓝梦 2010-07-04 22:23 发表评论

DIV--重叠

幻海蓝梦 — Sun, 04 Jul 2010 14:19:00 GMT

< div id = id1 >
< div id = id2 >< table width = " 180 " border = " 0 " cellspacing = " 0 " cellpadding = " 0 " >
   < tr >
     < td height = " 10 " > td >
   tr >
   < tr >
     < td height = " 30 " style = " font-size:14px; font-weight:bold; " > Product Type td >
   tr >
   <% set rec = conn.execute( " select * from Class where PartID='0' order by Classorder " )
       i = 1
   while not rec.eof %>
   < tr >
     < td height = " 30 " onmousemove = " kk(<%=40+(i-1)*30%>,'<%=rec( " ok " )%>') " onmouseout = " ll() " >< a href = " products.asp?ClassID=<%=rec( " NumberID " )%> " class = " a3 " target = " _blank " ><%= rec( " Class " ) %> a > td >
   tr >
    <% rec.movenext
   i = i + 1
   wend
   rec.close
   set rec = nothing %>
table >
div >
< div id = img1 style = " display:none; position:relative; float:left; left:0px; width:200px; " >
< img src = "" width = " 100 " height = " 100 " id = " img2 " name = " img2 " />
div >

< script language = " javascript " >

script >
div >
我想img1显示在id2的上面，遮掩id2的内容，但在id1有范围内，怎么设CSS

#id1 {position:relative;}
#img1 {position:absolute;top:0px;left:0px;}

< div id = " id1 " >
< div id = " img1 " > div >
< div id = " id2 " > div >
div >

补充; 我想让div1和div2的重叠部分div1的盖在div2的上面，如何实现。
加样式 position:relative;
div1的加 z-index:2;
div2的加 z-index:1;

幻海蓝梦 2010-07-04 22:19 发表评论

javascript-- select option对象总结

幻海蓝梦 — Sun, 04 Jul 2010 11:18:00 GMT

摘要: 1 一基础理解: 2 3 var e = document.getElementById( " selectId " ); 4 ... 阅读全文

幻海蓝梦 2010-07-04 19:18 发表评论

动态生成select选项-全接触

幻海蓝梦 — Sun, 04 Jul 2010 11:11:00 GMT

摘要: 1 [著者]zosatapo 2 [联系]dertyang@ 263 .net 3 [文章简单说明]本文提供在不刷新页面的前提下，动态生成select选项的 4 目前比较主流的三种方案。并且提供简单效率测试，网页制作人员可以 ... 阅读全文

幻海蓝梦 2010-07-04 19:11 发表评论

JS--联动几个表单

幻海蓝梦 — Sun, 04 Jul 2010 10:51:00 GMT

原文：http://zhidao.baidu.com/question/91138063.html?fr=qrl&cid=93&index=2&fr2=query

问题补充：我要在同一网页内用select联动几个form表单，不跳转页面的
我建了一个select菜单，想联动几个表单，代码是：
<select name=s1>
<option value='week'>一周＜／option>
<option value='month'>一月＜／option>
<option value='year'>一年＜／option>
select>
我建了三个表单form，代码如下：
表单一：
<form name=formWeek>
<table>
<tr>
<td>请输入一周的次数：＜／td>
<td><input type=text size=3>td>
tr>
table>
form>

表单二：
<form name=formMonth>
<table>
<tr>
<td>请输入一月的次数：＜／td>
<td><input type=text size=3>td>
tr>
table>
form>

表单三：
<form>
<table>
<tr>
<td>请输入一年的次数：td>
<td><input type=text size=3>td>
tr>
table>
form>

全部代码如下,测试通过.

<html>
<head><title>切换title>head>
<body>
<select name="s1" onchange="changeform(this.value)">
<option value='week'>一周option>
<option value='month'>一月option>
<option value='year'>一年option>
select>

<br />
<div id="form1">
<form name=formWeek>
<table>
<tr>
<td>请输入一周的次数：td>
<td><input type=text size=10>td>
tr>
table>
form>
div>

<div id="form2">
<form name=formMonth>
<table>
<tr>
<td>请输入一月的次数：td>
<td><input type=text size=10>td>
tr>
table>
form>
div>

<div id="form3">
<form>
<table>
<tr>
<td>请输入一年的次数：td>
<td><input type=text size=10>td>
tr>
table>
form>
div>
<script type="text/javascript">
$d=function(id){return document.getElementById(id);}
fhidden($d("form2"),$d("form3"),$d("form1"));
function fhidden(str1,str2,str3)
{
str1.style.display="none";
str2.style.display="none";
str3.style.display="";
}

function changeform(v)
{
switch (v)
{
case "month":fhidden($d("form1"),$d("form3"),$d("form2"));break;
case "year":fhidden($d("form1"),$d("form2"),$d("form3"));break;
default:fhidden($d("form2"),$d("form3"),$d("form1"));break;
}
}
script>
body>
html>

幻海蓝梦 2010-07-04 18:51 发表评论

JS--多级联动select

幻海蓝梦 — Sun, 04 Jul 2010 10:40:00 GMT

摘要: < script language = " JavaScript " type = " text/javascript " > // 定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selec... 阅读全文

幻海蓝梦 2010-07-04 18:40 发表评论

Select---几种隐藏的实现

幻海蓝梦 — Sun, 04 Jul 2010 10:29:00 GMT

1.js select 隐藏option

另一种隐藏table的

1<script>
2function setChange()
3{
4if (document.f.selfs.value == "1")
5{
6document.all.tb1.style.display = "block";
7}
8else
9{
10document.all.tb1.style.display = "none";
11}
12if (document.f.selfs.value == "2")
13{
14document.all.tb2.style.display = "block";
15}
16else
17{
18document.all.tb2.style.display = "none";
19}
20}
21
22script>
23<form name=f>
24
25    <select name="selfs" size="1 onchange="setChange()">
26        选择方式
27        <option value="1">
28            方式1
29        option>
30        <option value="2">
31            方式2
32        option>
33    select>
34
35    <table id='tb1' style='DISPLAY:none'>
36        方式1 方式1 方式1
37    table>
38
39    <table id='tb2' style='DISPLAY:none'>
40        方式2 方式2 方式2
41    table>
42form>
43

幻海蓝梦 2010-07-04 18:29 发表评论

流行的AJAX框架对比：jQuery，Mootools，Dojo，Ext JS

幻海蓝梦 — Mon, 28 Jun 2010 15:40:00 GMT

AJAX 是web20 的基石，现在网上流行几种开源的AJAX框架，比如：jQuery,Mootools,Dojo,Ext JS等等，那么我们到底在什么情况下该使用那个框架？以下是一组摘抄的数据：

Ajaxian在2007年底对Ajax工具进行了调查，部分调查结果见下表（其中数字为调查者使用该工具的百分比，详细的请参见网页）：http://ajaxian.com/archives/2007-ajax-tools-usage-survey-results

Prototype jQuery Ext Script.aculo.us Mootools YUI JSON Dojo Backbase
34.1% 29.3% 22.5% 22.3% 14.3% 13% 12.9% 11.8% 8.3%

其中Prototype使用率最高，很大程度上是因为它是最早成熟的框架，很多以前在项目中采用，所以现在一直在用

让我们来看看选择AJAX框架的基础：

你的项目需求（即你需要哪些特性，例如是否要求做出精美的界面、特效或其它功能）

是否支持A等级的浏览器（IE, Firefox等）?

文档的质量：是否完善（包含教程，API，代码示例等）

框架的可扩展性如何？为框架写插件容易吗？

你是否喜欢它的API的风格？

能大多程度上统一你的JavaScript代码的风格？

框架大小（太大的框架导致用户下载时间的延长）

框架是否强迫你改变写HTML的方式（Dojo就是这样）？

代码执行速度：性能如何？

代码是否为模块化（Mootools为高度模块化）？代码可重用性如何？

一、jQuery

主页：http://jquery.com/

设计思想

简洁的思想：几乎所有操作都是以选择DOM元素（有强大的Selector）开始，然后是对其的操作（Chaining等特性）。

优点

小，压缩后代码只有20多k（无压缩代码94k）。

Selector和DOM操作的方便：jQuery的Selector与mootools的Element.Selectors.js比较，CSS Selector, XPath Selector（1.2后已删除）

Chaining：总是返回一个jQuery对象，可以连续操作。

文档的完整，易用性（每个API都有完整的例子，这是其它框架现在不能比的），而且网上还有很多其它的文档，书籍。

应用的广泛，包括google code也使用了jQuery。

使用jQuery的站点：http://docs.jquery.com/Sites_Using_jQuery

核心的开发团队和核心人员：John Resig等。

简洁和简短的语法，容易记。

可扩展性：有大量用户开发的插件可供使用（http://jquery.com/plugins/ ）

jQuery UI（http://jquery.com/plugins/ ，基于jQuery，但和核心的jQuery是独立的），不断发展中。

友好和活跃的社区：google groups: http://docs.jquery.com/Discussion

事件处理有很多方便的方法，如click，而不是单一的addEvent之类的。

缺点

由于设计思想是追求高效和简洁，没有面向对象的扩展。设计思路和Mootools不一样。

CSS Selector的速度稍微有些慢（但是现在速度已经大幅提高）

Mootools

主页：http://mootools.net/

设计思想

面向对象的设计思想。

优点

模块化，各模块代码非常独立，最小的核心只有8k，最大的优点是可选择使用哪些模块，用的时候只导入使用的模块即可，完整的也不到180k（没有压缩），压缩后不到70k。

语法的简洁，直观。

特效（Effects）：这一点比jQuery稍强，现在也正在开发Mootools UI（这应该是Ajax框架开发的一个趋势）。

代码写的优美，易阅读和修改。

文档的完整（最新的1.2beta的文档比以前更详细）。

活跃的社区：官网(http://forum.mootools.net/ )，还有一个IRC。

性能：见：http://mootools.net/slickspeed/

缺点

修改了低层的一些类：如Array, String等，这也是设计思想的不同。

在DOM和CSS Selector上不如jQuery强大。

Dojo

主页：http://dojotoolkit.org/

优点

背后强大的支持：IBM、Sun、BEA等，这是非常重要的优势。

功能的强大，Full Stack的框架，扩展了DHTML的能力，例如：

支持与浏览器Back/Forward按钮的集成。

Dojo Offline，一个跨平台的离线存储API。

Chart组件，可以方便地在浏览器端生成图表。

基于SVG/VML的矢量图形库。

Google Maps、Yahoo! Maps组件，方便开发Mashup应用。

Comet支持，通过通用的Buyeux协议。

强大的UI（Dijit）。

面向对象的设计，统一的命名空间，包管理机制（The Package System and Custom Builds）

可扩展性。

缺点

复杂，学习曲线陡。

文档的极端不全，这是一个很大的问题。

API很多不稳定，各版本间改动较大，现在还不是一个成熟的框架。

侵入性太大，页面中大量使用dojo的属性，例如

JS--parseInt(,)方法的使用

幻海蓝梦 — Mon, 28 Jun 2010 06:00:00 GMT

原文：http://www.neoease.com/javascript-get-integer-via-parseint/

JavaScript 是弱类型语言, 为了保证数值的有效性, 在处理数值的时候, 我们可以对数值字符串进行强行转换. 如 parseInt 取整和 parseFloat 取浮点数.

Java 也有 Integer.parseInt() 方法, 但是 JavaScript 的 parseInt 处理方式与 Java 等强整型语言不太一样, 所以经常有人因为对这个方法的使用不当而获得异常返回.

下面是一段 Java 代码, 用于将字符串 020 转为整型.

														public
														class Test {
publicstaticvoid main(String args[])throwsException{
String str ="020";
System.out.println(Integer.parseInt(str));
}
}

输出结果是 20

下面是一段 JavaScript 代码, 同样是将字符串 020 转为整型.

1
2
3

														var str ="020";
var num = parseInt(str);
alert(num);

输出结果是 16

为什么呢?

无论是 Java 还是 JavaScript, parseInt 方法都有两个参数, 第一个参数就是要转换的对象, 第二个参数是进制基数, 可以是 2, 8, 10, 16, 默认以 10 进制处理. 但在 JavaScript 中, 0 开始的数被认为使用 8 进制处理, 0x 的数被认为是用 16 进制来处理. 所以上面的 JavaScript 代码计算错误了.

影响大吗?

大! 很大! 因为这个经常用于计算价钱, 一旦价格错误, 对用户来说, 这是误导, 而一个好的网站不应该出现这种误导用户的. 下面的 DEMO 中, 没有指定进制. 大家可以在数量框中输入一个以 0 开头的数字, 在点击计算按钮, 算出来的数值将比预想中的小一些, 或者小很多 (如: 8 进制中没有 019 这样的数值, 所以数值变成了 1, 9 被忽略掉).
没有为 parseInt 函数指定进制的 DEMO

如何修改?

前面说过, 有两个参数, 第二个参数可以指定计算使用的进制.

1	parseInt(num, radix);

所以我们可以将前面有问题的那段 JavaScript 代码改写为下面的代码.

1
2
3

														var str ="020";
var num = parseInt(str,10);
alert(num);

这样处理的话, 我们再重写一些前面的 DEMO, 如下:
为 parseInt 函数指定进制为 10 的 DEMO

记住了, 在 JavaScript 上使用 parseInt 方法时要带上进制参数.

幻海蓝梦 2010-06-28 14:00 发表评论

JfreeChart学习总结

幻海蓝梦 — Sun, 27 Jun 2010 14:26:00 GMT

原文：http://blog.chinaunix.net/u/17663/showart_370064.html
一、简介
WW 的发展使得基于因特网的应用程序不再局限于静态或者简单的动态内容提供。传统的一些以软件包形式发布应用程序例如报表系统等都在逐渐搬到因特网上。但是这两者之间有着天壤之别，虽然对于数据获取、业务处理等方面基本类似，但是最大的差别在于用户界面。为了能在web浏览器上显示要求用户界面使用 HTML以及图片的方式来展现数据，而传统的一些利用操作系统本身的控件来开发的用户界面无法适应琳琅满目的客户端，因此在这里也变得无能为力。回到本文的题目上来，为了创建一个可以在web浏览器上查看到图表一般有两种做法：第一种就是使用applet利用java本身对图形的支持来显示一个图表；第二种就是直接在web服务器端生成好图表图片文件后发送给浏览器。第一种方式显然对于客户端要求太高，随着现在主流浏览器放弃对JAVA的支持后，这种方式只适合一些局域网的应用，而对于因特网的环境就显得不太适合。因此我们下面将介绍一个JAVA的图表引擎JFreeChart用来产生基于WEB的图表。
JFreeChart 项目简介 JFreeChart是开放源代码站点SourceForge.net上的一个JAVA项目，它主要用来各种各样的图表，这些图表包括：饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。这些不同式样的图表基本上可以满足目前的要求。

二、JFreeChart获取。
JFreeChart 是JFreeChart公司在开源网站SourceForge.net上的一个项目，该公司的主要产品有如下：
1.JFreeReport ：报表解决工具
2.JFreeChart:Java 图形解决方案（Application/Applet/Servlet/Jsp）
3.JCommon ：JFreeReport和JFreeChart的公共类库
4.JFreeDesigner ：JFreeReport的报表设计工具
我们可以从jfree官方网站上获取最新版本和相关资料（但是jfree的document需要40美金才能获取），
获取地址：http://www.jfree.org/jfreechart/index.html（同时可以获得简明介绍）
我们以当前最新版本：jfreechart-1.0.1.zip为例子进行说明。

三、JFreeChart配置安装
1 、解压jfreechart-1.0.1.zip.zip到指定位置，其中source是jfreechart的源码，jfreechart-1.0.1-demo.jar 是例子程序，可以先运行一下看看各种效果，就知道他的nb之处了。
2 、为了配置成功，我们需要关注的文件有如下三个：
设置classpath。加入下面三个jar包。
jfreechart-1.0.1.jar 、jcommon-1.0.0.jar、gnujaxp.jar
加上第三个jar包有时web.xml会报错，把它去掉就好了。
至此jfreechart的配置就完成了，下面就可以进行jfreechart的开发了。这里值得提出的是jfreechart的类
结构设计前后兼容性不是很好，不同版本的jfreechart中类库结构可能不一样，有时候可能需要查源码。如果是中文显示的时候可能依据观感需要改变源码的字体。

四、JFreeChart功能介绍
JFreeChart 目前是最好的java图形解决方案，基本能够解决目前的图形方面的需求，主要包括如下几个方面：
pie charts (2D and 3D) ：饼图（平面和立体）
bar charts (regular and stacked, with an optional 3D effect) ：柱状图
line and area charts ：曲线图
scatter plots and bubble charts
time series, high/low/open/close charts and candle stick charts ：时序图
combination charts ：复合图
Pareto charts
Gantt charts ：甘特图
wind plots, meter charts and symbol charts
wafer map charts
( 态图表,饼图(二维和三维) , 柱状图 ( 水平,垂直),线图,点图,时间变化图,甘特图, 股票行情图,混和图, 温度计图, 刻度图等常用商用图表)
图形可以导出成PNG和JPEG格式，同时还可以与PDF和EXCEL关联
JFreeChart 核心类库介绍：
研究jfreechart源码发现源码的主要由两个大的包组成：org.jfree.chart,org.jfree.data。其中前者主要与图形
本身有关，后者与图形显示的数据有关。具体研究如果大家有兴趣的话可以自己研究。
核心类主要有：
org.jfree.chart.JFreeChart ：图表对象，任何类型的图表的最终表现形式都是在该对象进行一些属性的定制。JFreeChart引擎本身提供了一个工厂类用于创建不同类型的图表对象
org.jfree.data.category.XXXDataSet: 数据集对象，用于提供显示图表所用的数据。根据不同类型的图表对应着很多类型的数据集对象类
org.jfree.chart.plot.XXXPlot ：图表区域对象，基本上这个对象决定着什么样式的图表，创建该对象的时候需要Axis、Renderer以及数据集对象的支持
org.jfree.chart.axis.XXXAxis ：用于处理图表的两个轴：纵轴和横轴
org.jfree.chart.render.XXXRender ：负责如何显示一个图表对象
org.jfree.chart.urls.XXXURLGenerator: 用于生成Web图表中每个项目的鼠标点击链接
XXXXXToolTipGenerator: 用于生成图象的帮助提示，不同类型图表对应不同类型的工具提示类

个人感觉JFreeChart可以满足大部分图片创建的需要，美中不足的是：对字体的设置做的不够好，特别是使用中文的时候字体很不清晰。因为这个原因建议你自己去修改他的源代码，最好使用properties文件去设置字体.还有就是文档要钱所以要多花点时间去看源代码。或多上社区.

五．开始开发
对JfreeChart有了初步了解并做好准备工作之后，开始作例子程序试验。在这里我只介绍饼图的做法，而这张图采用不同的方式进行输出，其他类型的图片可以参考jfreechart提供的例子，做法都差不多。

1）直接生成图片

代码

public class PieChartPicture {
public static void main(String[] args)
{
PieDataset dataset = getDataSet();
JFreeChart chart = ChartFactory.createPieChart3D(
" 项目进度分布", // chart title
dataset,// data
true,// include legend
true,
false
);
PiePlot3D plot=(PiePlot3D)chart.getPlot();
// 图片中显示百分比:默认方式
//plot.setLabelGenerator(new StandardPieSectionLabelGenerator(StandardPieToolTipGenerator.DEFAULT_TOOLTIP_FORMAT));
// 图片中显示百分比:自定义方式，{0} 表示选项， {1} 表示数值， {2} 表示所占比例 ,小数点后两位
plot.setLabelGenerator(new StandardPieSectionLabelGenerator("{0}={1}({2})", NumberFormat.getNumberInstance(), new DecimalFormat("0.00%")));
// 图例显示百分比:自定义方式， {0} 表示选项， {1} 表示数值， {2} 表示所占比例
plot.setLegendLabelGenerator(new StandardPieSectionLabelGenerator("{0}={1}({2})"));
// 设置背景色为白色
chart.setBackgroundPaint(Color.white);
// 指定图片的透明度(0.0-1.0)
plot.setForegroundAlpha(1.0f);
// 指定显示的饼图上圆形(false)还椭圆形(true)
plot.setCircular(true);
// 设置图标题的字体
Font font = new Font(" 黑体",Font.CENTER_BASELINE,20);
TextTitle title = new TextTitle(" 项目状态分布");
title.setFont(font);
chart.setTitle(title);
FileOutputStream fos_jpg = null;
try {
fos_jpg=new FileOutputStream("D:\\ 项目状态分布.jpg");
ChartUtilities.writeChartAsJPEG(fos_jpg,100,chart,640,480,null);
fos_jpg.close();
} catch (Exception e) {
}
}
private static PieDataset getDataSet() {
DefaultPieDataset dataset = new DefaultPieDataset();
dataset.setValue(" 市场前期", new Double(10));
dataset.setValue(" 立项", new Double(15));
dataset.setValue(" 计划", new Double(10));
dataset.setValue(" 需求与设计", new Double(10));
dataset.setValue(" 执行控制", new Double(35));
dataset.setValue(" 收尾", new Double(10));
dataset.setValue(" 运维",new Double(10));
return dataset;
}
}

2) 采用servlet和struts的action方式输出
采用这种方式输出，不用生成图片。
A ．servlet输出

代码

public class PieByServlet extends HttpServlet{
public void service(ServletRequest req, ServletResponse res)
throws ServletException, IOException
{
res.setContentType("image/jpeg");
PieDataset dataset = getDataSet();
JFreeChart chart = ChartFactory.createPieChart3D(
" 水果饼图", // chart title
dataset,// data
true, // include legend
true,
false );
//设置图表属性
// 输出图片
ChartUtilities.writeChartAsJPEG(res.getOutputStream(),100,chart,800,600,null);
}

B ．struts的action方式输出
只将这条语句加上try catch即可，并返回null。

代码

try{
ChartUtilities.writeChartAsJPEG(response.getOutputStream(),100,chart,800,600,null);
} catch (Exception e) {
}
return null;

其实采用这两种方式与生成图片的方式改动并不大
加上语句response.setContentType("image/jpeg");
ChartUtilities.writeChartAsJPEG(new FileOutputStream("D:\\ 项目状态分布.jpg");,100,chart,640,480,null);
文件流改成response的输出流就可以了
hartUtilities.writeChartAsJPEG(response.getOutputStream(),100,chart,800,600,null);

3）jsp＋servlet＋javabean方式
1. Create ChartViewer servlet

代码

public class ChartViewer extends HttpServlet {
public void init() throws ServletException {
}
//Process the HTTP Get request
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// get the chart from session
HttpSession session = request.getSession();
BufferedImage chartImage = (BufferedImage) session.getAttribute("chartImage");
// set the content type so the browser can see this as a picture
response.setContentType("image/png");
// send the picture
PngEncoder encoder = new PngEncoder(chartImage, false, 0, 9);
response.getOutputStream().write(encoder.pngEncode());
}
//Process the HTTP Post request
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
//Process the HTTP Put request
public void doPut(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
//Clean up resources
public void destroy() { }
}

2. Create a servlet map in web.xml

代码

xml version="1.0" encoding="UTF-8"?>
<web-app>
<servlet>
<servlet-name>ChartViewerservlet-name>
<servlet-class>myapp.webwork.servlets.ChartViewerservlet-class>
servlet>
<servlet-mapping>
<servlet-name>ChartViewerservlet-name>
<url-pattern>/servlet/ChartViewerurl-pattern>
servlet-mapping>
web-app>

3. Create a chart in a java bean (Pie3DDemo.java)

代码

public class Pie3DDemo {
private DefaultPieDataset getDataset() {
// categories...
String[] section = new String[] { "Jan","Feb","Mar","Apr","May","Jun", "Jul","Aug","Sep","Oct","Nov","Dec" };
// data...
double[] data = new double[section.length];
for (int i = 0; i < data.length; i++) {
data[i] = 10 + (Math.random() * 10);
}
// create the dataset...
DefaultPieDataset dataset = new DefaultPieDataset();
for (int i = 0; i < data.length; i++) {
dataset.setValue(section[i], data[i]);
}
return dataset;
}
public String getChartViewer(HttpServletRequest request, HttpServletResponse response) {
DefaultPieDataset dataset = getDataset();
// create the chart...
JFreeChart chart = ChartFactory.createPie3DChart(
"Pie3D Chart Demo", // chart title
dataset, // data
true, // include legend
true,
false
);
// set the background color for the chart...
chart.setBackgroundPaint(Color.cyan);
PiePlot plot = (PiePlot) chart.getPlot();
plot.setNoDataMessage("No data available");
// set drilldown capability...
plot.setURLGenerator(new StandardPieURLGenerator("Bar3DDemo.jsp","section"));
plot.setLabelGenerator(null);
// OPTIONAL CUSTOMISATION COMPLETED.
ChartRenderingInfo info = null;
HttpSession session = request.getSession();
try {
//Create RenderingInfo object
response.setContentType("text/html");
info = new ChartRenderingInfo(new StandardEntityCollection());
BufferedImage chartImage = chart.createBufferedImage(640, 400, info);
// putting chart as BufferedImage in session,
// thus making it available for the image reading action Action.
session.setAttribute("chartImage", chartImage);
PrintWriter writer = new PrintWriter(response.getWriter());
ChartUtilities.writeImageMap(writer, "imageMap", info);
writer.flush();
} catch (Exception e) { }
String pathInfo = "http://";
pathInfo += request.getServerName();
int port = request.getServerPort();
pathInfo += ":"+String.valueOf(port);
pathInfo += request.getContextPath();
String chartViewer = pathInfo + "/servlet/ChartViewer";
return chartViewer;
}

6. 页面

代码

<html>
<head>
<title>Pie Chart Demotitle>
head>
<jsp:useBeanidjsp:useBeanid="myChart"scope="session"class="myapp.webwork.beans.Pie3DDemo" />
<body>
<h2>Pie Chart Demoh2>
<%String chartViewer = myChart.getChartViewer(request, response);%>
<img src="<%=chartViewer%>" border=0 usemap="#imageMap">
body>
html>

4）采用工具类ChartUtil和DisplayChart（jfreechart的servlet）输出
我用了上面的几个方法输出图片，发现页面里只能输出一个图片，
不过下面的方法可以输出多个图片,而且是几种方式中最简单的一个，推荐使用。

这种方式和上面的三种比较类似，是将javabean里的生成图片的方法写的一个工具类ChartUtil里面。

1 ．添加工具类ChartUtil
public class ChartUtil {
// 产生时间序列图，返回图片名称

代码

public static String generatePieChart(DefaultPieDataset dataset,String title,int width,int height,HttpSession session, PrintWriter pw) {
String filename = null;
try {
if (session != null)
{
ChartDeleter deleter = (ChartDeleter)session.getAttribute("JFreeChart_Deleter");
session.removeAttribute("JFreeChart_Deleter");
session.setAttribute("JFreeChart_Deleter", deleter);
}
JFreeChart chart = ChartFactory.createPieChart3D(
title, // chart title
dataset, // data
true, // include legend
true,
false );
// Write the chart image to the temporary directory
ChartRenderingInfo info = new ChartRenderingInfo(new StandardEntityCollection());
//If the last parameter is null, the chart is a "one time"-chart and will be deleted after the first serving.
//If the last parameter is a session object, the chart remains until session time out.
filename = ServletUtilities.saveChartAsPNG(chart, width, height, info, session);
// Write the image map to the PrintWriter
ChartUtilities.writeImageMap(pw, filename, info,true);
pw.flush();
} catch (Exception e) {
System.out.println("Exception - " + e.toString());
e.printStackTrace(System.out);
filename = "picture_error.png"; }
return filename;
}
}

2、在action里统计数据，设置好数据集dataset。传到页面

3、在页面里取出
DefaultPieDataset piedataset=(DefaultPieDataset)request.getAttribute("piedataset");
// 用ChartUtil工具类产生图片

代码

String p = ChartUtil.generatePieChart(piedataset," 项目收支线图",500,300,null, new PrintWriter(out));
String p1 = request.getContextPath() + "/servlet/DisplayChart?filename=" + p;

通过以下方式输出

代码

<td><img src="<%= p1 %>" width=500 height=300 border=0 usemap="#<%= p %>">td>

4、在web.xml中添加

代码

<servlet>
<servlet-name>DisplayChartservlet-name>
<servlet-class>org.jfree.chart.servlet.DisplayChartservlet-class>
servlet>
<servlet-mapping>
<servlet-name>DisplayChartservlet-name>
<url-pattern>/servlet/DisplayCharturl-pattern>
servlet-mapping>

5） ApplicationFrame 方式

代码

public class PieChartDemo1 extends ApplicationFrame {
public PieChartDemo1(String title) {
super(title);
setContentPane(createDemoPanel());
}
private static JFreeChart createChart(PieDataset dataset) {
JFreeChart chart = ChartFactory.createPieChart(
.......
return chart;
}
public static JPanel createDemoPanel() {
JFreeChart chart = createChart(createDataset());
return new ChartPanel(chart);
}
public static void main(String[] args) {
PieChartDemo1 demo = new PieChartDemo1("Pie Chart Demo 1");
demo.pack();
RefineryUtilities.centerFrameOnScreen(demo);
demo.setVisible(true);
}
}

六. 可参考资料与网址

官方网站

http://www.jfree.org/jfreechart/index.html

官方论坛

http://www.jfree.org/phpBB2/index.php

API 文档

http://www.jfree.org/jfreechart/api/gjdoc/index.html

中文API

http://blog.sina.com.cn/u/405da78d010000ap

原文地址http://ltc603.javaeye.com/blog/30207

幻海蓝梦 2010-06-27 22:26 发表评论

Javascript--this用法

幻海蓝梦 — Sun, 27 Jun 2010 11:50:00 GMT

原文：http://www.cnblogs.com/sanshi/archive/2009/07/08/1519251.html
这一章我们将会重点介绍JavaScript中几个重要的属性（this、constructor、prototype），这些属性对于我们理解如何实现JavaScript中的类和继承起着至关重要的作用。

this

this表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window；如果在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用。我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。

先看一个在全局作用范围内使用this的例子：

函数中的this是在运行时决定的，而不是函数定义时，如下：

        // 定义一个全局函数
        function foo() {
            console.log(this.fruit);
        }
        // 定义一个全局变量，等价于window.fruit = "apple";
        var fruit = "apple";
        // 此时函数foo中this指向window对象
        // 这种调用方式和window.foo();是完全等价的
        foo();  // "apple"

        // 自定义一个对象，并将此对象的属性foo指向全局函数foo
        var pack = {
            fruit: "orange",
            foo: foo
        };
        // 此时函数foo中this指向window.pack对象
        pack.foo(); // "orange"

全局函数apply和call可以用来改变函数中this的指向，如下：

        // 定义一个全局函数
        function foo() {
            console.log(this.fruit);
        }
        
        // 定义一个全局变量
        var fruit = "apple";
        // 自定义一个对象
        var pack = {
            fruit: "orange"
        };
        
        // 等价于window.foo();
        foo.apply(window);  // "apple"
        // 此时foo中的this === pack
        foo.apply(pack);    // "orange"

注：apply和call两个函数的作用相同，唯一的区别是两个函数的参数定义不同。

因为在JavaScript中函数也是对象，所以我们可以看到如下有趣的例子：

        // 定义一个全局函数
        function foo() {
            if (this === window) {
                console.log("this is window.");
            }
        }
        
        // 函数foo也是对象，所以可以定义foo的属性boo为一个函数
        foo.boo = function() {
            if (this === foo) {
                console.log("this is foo.");
            } else if (this === window) {
                console.log("this is window.");
            }
        };
        // 等价于window.foo();
        foo();  // this is window.
        
        // 可以看到函数中this的指向调用函数的对象
        foo.boo();  // this is foo.
        
        // 使用apply改变函数中this的指向
        foo.boo.apply(window);  // this is window.

prototype

我们已经在第一章中使用prototype模拟类和继承的实现。 prototype本质上还是一个JavaScript对象。并且每个函数都有一个默认的prototype属性。
如果这个函数被用在创建自定义对象的场景中，我们称这个函数为构造函数。比如下面一个简单的场景：

        // 构造函数
        function Person(name) {
            this.name = name;
        }
        // 定义Person的原型，原型中的属性可以被自定义对象引用
        Person.prototype = {
            getName: function() {
                return this.name;
            }
        }
        var zhang = new Person("ZhangSan");
        console.log(zhang.getName());   // "ZhangSan"

作为类比，我们考虑下JavaScript中的数据类型 - 字符串（String）、数字（Number）、数组（Array）、对象（Object）、日期（Date）等。我们有理由相信，在JavaScript内部这些类型都是作为构造函数来实现的，比如：

        // 定义数组的构造函数，作为JavaScript的一种预定义类型
        function Array() {
            // ...
        }
        
        // 初始化数组的实例
        var arr1 = new Array(1, 56, 34, 12);
        // 但是，我们更倾向于如下的语法定义：
        var arr2 = [1, 56, 34, 12];

同时对数组操作的很多方法（比如concat、join、push）应该也是在prototype属性中定义的。
实际上，JavaScript所有的固有数据类型都具有只读的prototype属性（这是可以理解的：因为如果修改了这些类型的prototype属性，则哪些预定义的方法就消失了），但是我们可以向其中添加自己的扩展方法。

        // 向JavaScript固有类型Array扩展一个获取最小值的方法
        Array.prototype.min = function() {
            var min = this[0];
            for (var i = 1; i < this.length; i++) {
                if (this[i] < min) {
                    min = this[i];
                }
            }
            return min;
        };
        
        // 在任意Array的实例上调用min方法
        console.log([1, 56, 34, 12].min());  // 1

注意：这里有一个陷阱，向Array的原型中添加扩展方法后，当使用for-in循环数组时，这个扩展方法也会被循环出来。
下面的代码说明这一点（假设已经向Array的原型中扩展了min方法）：

        var arr = [1, 56, 34, 12];
        var total = 0;
        for (var i in arr) {
            total += parseInt(arr[i], 10);
        }
        console.log(total);   // NaN

解决方法也很简单：

        var arr = [1, 56, 34, 12];
        var total = 0;
        for (var i in arr) {
            if (arr.hasOwnProperty(i)) {
                total += parseInt(arr[i], 10);
            }
        }
        console.log(total);   // 103

constructor

constructor始终指向创建当前对象的构造函数。比如下面例子：

        // 等价于 var foo = new Array(1, 56, 34, 12);
        var arr = [1, 56, 34, 12];
        console.log(arr.constructor === Array); // true
        // 等价于 var foo = new Function();
        var Foo = function() { };
        console.log(Foo.constructor === Function); // true
        // 由构造函数实例化一个obj对象
        var obj = new Foo();
        console.log(obj.constructor === Foo); // true
        
        // 将上面两段代码合起来，就得到下面的结论
        console.log(obj.constructor.constructor === Function); // true

但是当constructor遇到prototype时，有趣的事情就发生了。
我们知道每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数。如下例所示：

        function Person(name) {
            this.name = name;
        };
        Person.prototype.getName = function() {
            return this.name;
        };
        var p = new Person("ZhangSan");
        
        console.log(p.constructor === Person);  // true
        console.log(Person.prototype.constructor === Person); // true
        // 将上两行代码合并就得到如下结果
        console.log(p.constructor.prototype.constructor === Person); // true

当时当我们重新定义函数的prototype时（注意：和上例的区别，这里不是修改而是覆盖）， constructor的行为就有点奇怪了，如下示例：

        function Person(name) {
            this.name = name;
        };
        Person.prototype = {
            getName: function() {
                return this.name;
            }
        };
        var p = new Person("ZhangSan");
        console.log(p.constructor === Person);  // false
        console.log(Person.prototype.constructor === Person); // false
        console.log(p.constructor.prototype.constructor === Person); // false

为什么呢？
原来是因为覆盖Person.prototype时，等价于进行如下代码操作：

        Person.prototype = new Object({
            getName: function() {
                return this.name;
            }
        });

而constructor始终指向创建自身的构造函数，所以此时Person.prototype.constructor === Object，即是：

        function Person(name) {
            this.name = name;
        };
        Person.prototype = {
            getName: function() {
                return this.name;
            }
        };
        var p = new Person("ZhangSan");
        console.log(p.constructor === Object);  // true
        console.log(Person.prototype.constructor === Object); // true
        console.log(p.constructor.prototype.constructor === Object); // true

怎么修正这种问题呢？方法也很简单，重新覆盖Person.prototype.constructor即可：

        function Person(name) {
            this.name = name;
        };
        Person.prototype = new Object({
            getName: function() {
                return this.name;
            }
        });
        Person.prototype.constructor = Person;
        var p = new Person("ZhangSan");
        console.log(p.constructor === Person);  // true
        console.log(Person.prototype.constructor === Person); // true
        console.log(p.constructor.prototype.constructor === Person); // true

下一章我们将会对第一章提到的Person-Employee类和继承的实现进行完善。

幻海蓝梦 2010-06-27 19:50 发表评论

JavaScript语言精粹字符串(example:js变量作为URL参数乱码)

幻海蓝梦 — Sun, 27 Jun 2010 11:17:00 GMT

http://pouyang.javaeye.com/blog/575245
字符串可以被包含在单引号或双引号中,它可能包含0个或多个字符\(反斜线符号)是转义字符
JavaScript在被创建的时候,Unicode是一个16位的字符集,所以JavaScript中的所有字符都是16位的.
JavaScript没有字符类型,要表示一个字符,只须创建仅包含一个字符的字符串即可

Js代码

alert( "A" == "\u0041" ); //true
alert( "seven" .length); // 5
"o" + "y" + "p" == "oyp" ; //true;
"oyp" .toUpperCase() == 'CAT' ;

alert("A" == "\u0041");//true
alert("seven".length); // 5
"o"+"y"+"p" == "oyp";//true;
"oyp".toUpperCase() == 'CAT';

字符串是不可变的,一旦字符串被创建,就永远无法改变它,跟java一样,所以语言都是相通的

现在流行的异步提交,丰富多彩的互联网,现在不仅程序员享受着这种异步交互带来的成就感,客户也很期待也很享受Ajax的强大的交互功能,异步提交难免会出现js变量(中文)作为URL参数,js变量作为URL参数传到后台会出现中文乱码情况,(Jquery form动态提交不会出现乱码问题),异步请求过去会得到,以下是解决方法

Js代码

//前台
var accountCN = "中文" ;
var account = encodeURI(encodeURI(accountCN)); // 关键所在
var updateURL = "http://localhost:7001/ouyangping/demo.do?account=" account
function updateRow(updateURL) {
$.ajax( {
type : "POST" ,
url :updateURL,
cache : false ,
dataType: "json" ,
success : function updateSuceess(data) {
if (data.state == '1' ) {
alert( '修改成功！' );
} else {
alert( '修改失败！' );
}
}
});
}

//前台
var accountCN ="中文";
var account = encodeURI(encodeURI(accountCN));// 关键所在
var updateURL = "http://localhost:7001/ouyangping/demo.do?account="account
function updateRow(updateURL) {
	$.ajax( {
		type : "POST",
		url :updateURL,
		cache : false,
		dataType: "json",
		success : function updateSuceess(data) {
		
			
			if (data.state == '1') {
				alert('修改成功！');
			} else {	
				alert('修改失败！');
			}
		}
	});
}

//后台控制层

Java代码

String account = java.net.URLDecoder.decode(iRequest.getParameter("account"),"utf-8");//关键所在
JSONObject json = new JSONObject();
json.clear();
iResponse.setHeader("X-JSON", json.toString());
iResponse.setCharacterEncoding("UTF-8");
iResponse.setHeader("Cache-Control", "no-cache,must-revalidate");// 清楚缓存
iResponse.setHeader("Pragma", "no-cache"); // HTTP 1.0
iResponse.setDateHeader("Expires", 0); // prevents caching at the
//更新是否成功
//int state = userManagerService.modUserByYui(userManagerDTO);
int state = userManagerService.modUserByYui(userManagerDTOJS);
json.put("state",state);
try {
iResponse.getWriter().print(json.toString());
} catch (IOException e) {
e.printStackTrace();
}
return null;

String	account = java.net.URLDecoder.decode(iRequest.getParameter("account"),"utf-8");//关键所在
JSONObject json = new JSONObject();
json.clear();
iResponse.setHeader("X-JSON", json.toString());
iResponse.setCharacterEncoding("UTF-8");
iResponse.setHeader("Cache-Control", "no-cache,must-revalidate");// 清楚缓存
iResponse.setHeader("Pragma", "no-cache"); // HTTP 1.0
iResponse.setDateHeader("Expires", 0); // prevents caching at the
//更新是否成功
//int state = userManagerService.modUserByYui(userManagerDTO);
int state = userManagerService.modUserByYui(userManagerDTOJS);
json.put("state",state);
try {
	iResponse.getWriter().print(json.toString());
} catch (IOException e) {
	e.printStackTrace();
}
return null;

------------------------

有了两个关键所在,就可以处理中文乱码问题了.但是很多地方都要处理,所以也要重构下
这也带来了问题,如果URL后面的参数过多那么会导致URL非常长,曾经考虑过把所有参数封装成一个变量传递过去,这种方法可行是可行,但是解决不了中文乱码的问题,以下附上这种方法.

Js代码

//这种把对象o传递过去，o里的内容是json格式。
Object o = new Object()
o.user = document.getElementById("user");
o.password = document.getElementById("password");

//这种把对象o传递过去，o里的内容是json格式。
Object o = new Object()
o.user = document.getElementById("user");
o.password = document.getElementById("password");

Js代码

//以Json格式获取页面上的查询条件，且这些参数的name要一致
function getJsonParameters(page) {
$('input:text').each(function(){
this.value = jQuery.trim(this.value);
}
);
var parameters = document.getElementsByName('form1');
var parameter = "{";
for (var i = 0 ; i < parameters.length; i++ ) {
if (parameters[i].value != null && parameters[i].value != '') {
parameter += parameters[i].id +":'"+parameters[i].value+"',";
}
}
if (''+page != 'undefined'){
parameter +='page'+":'"+page+"',";
}
parameter += "}";
return parameter;
}

//以Json格式获取页面上的查询条件，且这些参数的name要一致
function getJsonParameters(page) {
	$('input:text').each(function(){ 
    	this.value = jQuery.trim(this.value);
    	}
    ); 
	var parameters = document.getElementsByName('form1');
	var parameter = "{";
	for (var i = 0 ; i < parameters.length; i++ ) {
		if (parameters[i].value != null && parameters[i].value != '') {
			parameter += parameters[i].id +":'"+parameters[i].value+"',";
		}
	}
	if (''+page != 'undefined'){
		parameter +='page'+":'"+page+"',";
	}
	parameter += "}";
	return parameter;
}

o 或者 parameter 传递过去,这种格式的在后台这样处理:

Java代码

// 页面参数转化为Bean
String parameter = iRequest.getParameter("parameter");
JSONObject jsonObject = JSONObject.fromObject(parameter);
UserManagerDTO user = (UserManagerDTO) JSONObject.toBean(
jsonObject, UserManagerDTO.class);

幻海蓝梦 2010-06-27 19:17 发表评论

JavaScript语言精粹标示符( example:变量未定义判断)---没看明白

幻海蓝梦 — Sun, 27 Jun 2010 11:14:00 GMT

http://pouyang.javaeye.com/blog/575231
JavaScript 是一种区分大小写的语言,不能使用保留字来表示标示符，所有语言都这样JavaScript保留字：undefined,NaN和Infinity等

变量未定义判断语句
1.1变量没有定义直接拿来用会造成未定义
1.2对象没有的属性直接拿来用会造成未定义

Js代码

//先定义一个对象
var oy = {};或者 var oy = '' ;
//自己上网查的
alert( '' +temp == 'undefined' ); //错误，浏览器阻止往下运行
alert( '' +oy.p == 'undefined' ); //显示true对话框可以往下执行
//老大告诉我的
alert(temp == undefined); //错误，浏览器阻止往下运行
alert(oy.p == undefined); //显示true对话框可以往下执行
//看yahoo table源码发现的
if ( typeof YAHOO == "undefined" || !YAHOO) {
var YAHOO = {};
}
alert( typeof temp == 'undefined' ); //true
YAHOO = ''
alert(!YAHOO); //true
看看，还是人家yahoo 牛逼！！！

//先定义一个对象
var oy = {};或者 var oy = '';
//自己上网查的
alert(''+temp == 'undefined'); //错误，浏览器阻止往下运行
alert(''+oy.p == 'undefined'); //显示true对话框可以往下执行

//老大告诉我的
alert(temp == undefined); //错误，浏览器阻止往下运行
alert(oy.p == undefined); //显示true对话框可以往下执行

//看yahoo table源码发现的
if (typeof YAHOO == "undefined" || !YAHOO) {
	var YAHOO = {};
}
alert(typeof temp == 'undefined');//true
YAHOO =''
alert(!YAHOO);//true
看看，还是人家yahoo 牛逼！！！

Js代码

1、 typeof (NaN) number、 typeof (Infinity) number、 typeof ( null ) object、 typeof (undefined) undefined
2、NaN == NaN false
3、NaN != NaN true
4、NaN >= NaN false
5、 null == undefined true
6、 null >= undefined false
7、 null <= undefined false
8、parseInt( "123abc" ) 123
9、 "123abc" - 0 NaN
10、Infinity > 10 true
11、Infinity > "abc" false
12、Infinity == NaN false
13、 true == 1 ture
14、 new String( "abc" ) == "abc" true
15、 new String( "abc" ) === "abc" false 完全相同

幻海蓝梦 2010-06-27 19:14 发表评论

BlogJava-jasmine214--love-随笔分类-JS

JS--页面返回/跳转/刷新

Mootool-Ajax 写法（包括其他JS库的）

MooTools vs Prototype 核心源码比较

前言

一. 类机制

二. 继承机制

三.抽象对象

四. 关于 $()

五.关于 Array Enumerable Hash

六. 关于 Element

七.Ajax

结束语

JS --Hash/Array--（遍历）each方法

Mootools ---DOM操作

SVG --介绍

DOM--Document详细的方法list

Thinking in VML---第一部分 VML入门

不为人知的JS调用样式的方法---document.createElement().addRule(..)

JS--命名空间的理解（namespace）

namespace(命名空间)与VML---解释很易懂

CSS--Z-index属性详解

Javascript--document对象详解

Javascript---Hash类详解

原文：http://www.phpfans.net/manu/Prototype/prototype/api/hash.htm

Hash

创建一个 hash

在 Prototype 1.6 中的后向兼容性变更

注意，对于 Prototype 的早期版本（< 1.6）

方法

clone 1.6

each

get 1.6

inspect

keys

merge 1.6 改进

remove 不推荐

set 1.6

toJSON 1.5.1

toObject 1.6

toQueryString 1.6 改进

unset 1.6

update 1.6

values

Javascript 定时器---------工作原理

悟透 JavaScript--（非常诗意的文章）

用wz_jsgraphics.js（javascript图形库）进行画矢量图,兼容多浏览器

让DIV不换行 & 多div重叠

DIV--重叠

javascript-- select option对象总结

动态生成select选项-全接触

JS--联动几个表单

JS--多级联动select

Select---几种隐藏 的实现

流行的AJAX框架对比：jQuery，Mootools，Dojo，Ext JS

JS--parseInt(,)方法的使用

为什么呢?

影响大吗?

如何修改?

JfreeChart学习总结

Javascript--this用法

this

prototype

constructor

JavaScript语言精粹 字符串(example:js变量作为URL参数乱码)

JavaScript语言精粹 标示符( example:变量未定义判断)---没看明白

clone
1.6

get
1.6

merge
1.6 改进

remove
不推荐

set
1.6

toJSON
1.5.1

toObject
1.6

toQueryString
1.6 改进

unset
1.6

update
1.6

Select---几种隐藏的实现

JavaScript语言精粹字符串(example:js变量作为URL参数乱码)

JavaScript语言精粹标示符( example:变量未定义判断)---没看明白