标签存档: JavaScript - 第2页

[JavaScript] 慎用 somefunction.prototype

在写 JavaScript 脚本的时候,为了创建一个类,如果不使用框架,一般情况我们都会使用 prototype 来给要创建的类增加公有方法,例如:

  • // code from xujiwei.cn
  • function Person(name) {
  • this.Name = name;
  • }
  • Person.prototype.SayHello = function() {
  • alert('Hello, ' + this.Name);
  • }
  • Person.prototype.SayBye = function() {
  • alert('Goodbye, ' + this.Name);
  • }

不过,有的时候,为了书写以及维护的方便,我们会把公有方法的声明写到一个对象里,然后赋值给 Person.prototype,例如:

  • // code from xujiwei.cn
  • function Person(name) 


阅读全文 »

JavaScript 中为 Date 类实现 DateAdd 方法

JavaScript 中的并没有提供像 VBScript 里的 DateAdd 方法用于日期的操作,像加一年,减一个月什么的,这在服务端经常用到,比如设置 Cookie 的到期时间为现在时间的后一年,那么就需要使用这个方法了。

虽然 JavaScript 中没有 DateAdd 方法,但是 Date 类却有设置年月日时分秒的方法,比如 setFullYear、setMonth 之类的,而且,这些个方法的参数是可以为负的,在设置之后, Date 类会自行进行调整,每个月是30天还是31天,年份是不是闰年都不用我们来管了,只管设置值就是。

有了这个特性之后,我们就可以很方便的来为 Date 类添加 add 方法了。之所以不添加一个 DateAdd 方法而是给 Date 类添加一个 add 方法是因为我觉得那样更加方便,当然你也可以将 Date 类的 add 方法转换成为一个全局函数 DateAdd。

为了对每一个 Date 类的实例都有效,这里用到了 prototype 对象。

在 VBScript 里的 DateAdd 方法是用一个字符串来控制所加的量是年还是月还是其他的,所以在这里我也模仿 VBScript 里的 DateAdd 方法,使用一个字符串来控制所加量对应的部分,比如 y …

阅读全文 »

Firefox与IE兼容性:getAttribute的返回值类型

在改AJAXRequest的过程中,碰到了个问题,应该算是Firefox和IE之间的兼容性问题。

提交表单时,往往需要先对表单进行验证,而这个验证的过程一般是放在form标签的onsubmit属性中。

onsubmit一般是由浏览器在form的submit动作发生时自动触发,但是如果表单由我们自己来提交,比如在AJAX应用中,就是由我们自己写程序将表单转换成请求字符串,再通过XMLHttpRequest发送到服务器,那么如果在此同时不丢掉表单验证的话,就需要我们自己来获取onsubmit属性,并去处理它。

在获取属性时,为了保证兼容性,我用getAttribute来获取标签的属性值,但是发获取了onsubmit属性之后,发现在Firefox和IE中使用getAttribute("onsubmit")所返回的返回值类型是不同的。

测试代码如下:



阅读全文 »

[JavaScript] setTimeout和setInterval的浏览器兼容性

无意中测试AJAXRequest浏览器兼容性的时候,发现AJAXRequest.update方法在某些情况下在IE里有问题,经过测试找到是setTimeout和setInterval的问题。

问题出现在当调用AJAXRequest.update方法时,如果带了更新间隔及更新次数,那么在IE下面就会出现问题,具体表现为带了更新间隔时是函数工作,带上更新次数时函数无法在更新指定次数后停止执行。

测试几个例子之后找到了问题所在,在IE里,setTimeout和setInterval是不支持参数传递的

演示地址:http://www.xujiwei.cn/demo/usetimer/

在Netscape的JavaScript参考中找到setTimeout的语法如下:

setTimeout

Evaluates an expression or calls a function once after a specified number of milliseconds elapses.

语法

setTimeout(expression, msec)

setTimeout(function, msec, arg1, ..., argN)

参数

expression  A string containing a JavaScript expression.

msec  A numeric value or numeric string, in 



阅读全文 »

VBScript中变量作用域

下午在写程序的时候,碰到个变量重定义的问题,具体是在一个函数中的两个地方定义了相同的变量,两个变量分别放在IF语句的两部分中,本来以为这两次定义在语句中不同的块,应该没有影响,然而在运行中IIS却提示变量重定义,把重复定义去掉即正确。

解决了问题之后突然想到在Fdream的blog看过一篇文章《JavaScript变量无块级作用域》,似乎这两个是差不多的,在VBScript中变量同样没有块级作用域

再次去看了那篇文章之后我也做了下试验,得到结果:在VBScript中,函数中定义的变量的作用域是整个函数,而不是块级,不管这个变量是在函数中哪个位置定义的。因此,函数中一个变量不管在函数的哪个位置定义,它在整个函数中都可以使用。

下面用一些例子来说明这个问题。

Option Explicit
Sub foo()
Dim var
var="hello,world!"
MsgBox var
End Sub
Call foo()

下面的代码跟上面的代码等效,但是var的定义放在了函数的最后:

Option Explicit
Sub foo()
var="hello,world!"
MsgBox var
Dim var
End Sub
Call foo()

下面的例子说明变量不管在哪定义,在整个函数中都是可以使用的,当然如果把定义的位置放的特殊一点有利于代码的清晰,阅读起来比较方便,修改时也比较方便。

Option Explicit
Sub foo()
Dim var1
var1="YES"
MsgBox "var1: "&var1&vbCrLf&"var2: "&var2
IF var1="YES"



阅读全文 »

AJAX应用之草稿自动保存

相信用过Gmail的人都知道Gmail有一个草稿自动保存的功能,每过一段时间,Gmail都会自动保存邮件草稿,这样在一些突发情况下就能快速地恢复工作,免得写了半天的邮件眨眼之间就没有了。在学了AJAX之后,我也给自己的blog加上了这个功能。当然,这个应用并不只限于blog上,应该说还是比较通用的。

PS.为了开发的方便,我用了一个自己写的AJAX类,具体内容和下载在这里

演示地址

仍旧以代码加注释的方式来说明怎么编写。

首先是表单填写页面,用一个ID为AutoSaveMsg的DIV来显示返回信息,并且用一个ID为Draft_AutoSave的CheckBox来确定是否进行自动保存,然后将Textarea的ID命名为message。同时为了应对多用户同时使用的需要,加上用户名,每个用户的草稿分开保存。为了说明方便,我把一些修饰性的东西去掉,这样看起来比较明了:

  • AJAX应用之草稿自动保存<br />
  • <!-- 用户名默认为NONAME -->
  • 用户名:<input type="text" name="memName" id="memName" size="20" value="NONAME" />&nbsp;&nbsp;&nbsp;&nbsp;
  • <!-- 在自动保存选项的onclick事件中调用自动保存状态设置函数 -->
  • <input onclick="SetAutoSave();" type="checkbox" id="Draft_AutoSave" value="1" checked="true"  />自动保存?<br />
  • 内容:
  • <textarea id="message"></textarea><br />
  • <!-- AutoSaveMsg显示返回信息 -->
  • <div id="AutoSaveMsg"></div>
  • <input type="submit" value="提交内容" />&nbsp;&nbsp;
  • <!-- 调用函数恢复最后保存的草稿 -->


阅读全文 »

AJAX初体验之上手篇

AJAX是这两年蛮热的东西,我也凑凑热闹,前些天去找了些教程学学,下面就按整个处理过程把自己学的东西写写,不过,因为是初学,所以有错误就请见谅啦,也欢迎指正,vipxjw#163.com。

PS.写完了之后看了下,结果再次验证自己写教程真是乱得可以,东说一块西说一块,条理不太清楚的说:)。

1.创建 XMLHttpRequest 对象

现在的浏览器有很多种,创建 XMLHttpRequest 的方法也不相同,所以为了兼容各种浏览器,在创建 XMLHttpRequest 时也应该考虑到各种浏览器的情况。目前主流的浏览器在Windows下有IE、Firefox及Opera,所以我们写的代码要尽量兼容这几个浏览器。在参考了一些资料后,我用下面的方法来创建 XMLHttpRequest 对象:

// 先定义一个变量,并赋初值为 false,方便后面判断对象是否创建成功
var xmlObj = false;
// 使用 try 来捕获创建失败,再换个方法来创建
try {
// 在 Mozilla 中使用这种方式来创建 XMLHttpRequest 对象
xmlObj=new XMLHttpRequest;
}
catch(e) {
try {
// 如果不成功,那么尝试在较新 IE 里的方式
xmlObj=new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e2) {
try {
//


阅读全文 »

[JavaScript] 静态的动态续篇之来点XML

在搞定了基本的伪动态之后,我马上把它应用到了网站,但随后就发现了一个问题:我如何来管理新闻列表呢?要是让我在每次要加新闻时去修改源文件然后再上传我可是千万个不愿,不仅麻烦而且容易出错,懒人怎么能可以这么做。动动脑子,于是想到了用XML,这个早已存在,但近些年才流行起来的技术。

在HTML里,可以使用数据岛来使用XML数据,一个使用方法就是在HTML里加入一句:

<xml id="data">

<!-- 在此为XML数据 -->

</xml>

这样,就可以在HTML里使用XML提供的数据。不过,这样还是显得麻烦了,还是要上传整个文件,那么用方便点的吧~~

<xml id="data" src="data.xml"/>

这样处理之后,我就可以只用修改一个XML文件然后上传到服务器了。

接下来,就是搞定在客户端对XML数据的处理了~~

首先,我得设计一个新闻的数据结构。这个简单,毕竟在列表时只需要用到新闻的标题和时间,但为了链接,需要加上一个ID,结果如下:

<newslist>

<news>

<id>1</id>

<title>第一个新闻</title>

<date>2005-11-16</date>

</news>

</newslist>

数据结构搞定了,继续!

在客户端对数据处理当然首选JavaScript了,再么这篇文章讲的也是用JavaScript来实现伪动态。

在JS里,对数据岛的访问可以使用记录集:

var rs=data.recordset;

这个记录集的使用方法和ASP中类似,这下方便我了:),可以很方便地实现新闻的列表及链接了~在显示新闻,还需要显示的是上一条新闻的标题及下一条新闻的标题,而且显示新闻列表时,就不需要显示上一条及下一条新闻了。于是我放了两个层分别用来显示新闻和上一条及下一条新闻的信息,并在需要的时候设置是否显示。其中newsmain用来显示新闻或者新闻列表,newspage用来显示上一条及下一条新闻的信息。接着把对应ID的新闻存为网页文件,在显示时使用iframe嵌入。

先写个函数来从网址中获取新闻ID,这个在前一篇文章已经讲过,拿来用~~

function getid() {

var str,len,pos,id,fn;     // 定义一些变量

str=top.window.location.href;    //获取当然文件地址

len=str.length;     // 得到地址长度

pos=str.indexOf("?id=",0);   // 得到"?id="的起始地址

// 判断是否存在"?id="

if(pos>0) {

id=str.substring(pos+4,len);   // …

阅读全文 »

[JavaScript] 静态的动态

这段时间因为要做个网站,而空间又不支持ASP,所以又拿起JavaScript教程看了下,看能不能在静态的空间里实现动态,当然,这个动态不是真正意义上的了,可以说只是一个“伪动态”了:)

最基本的动态页面的功能,莫过于news.asp?id=1这样的形式了,于是我就拿这个目标开工,弄了一会还真有些成效~基本构思是:从浏览器的地址栏获取当前文件的地址,然后从其中提取id,最后用内嵌框架来显示相关内容。以下是基本的代码

<script>
var str,len,pos,id,fn;     // 定义一些变量
str=top.window.location.href;    //获取当然文件地址
len=str.length;     // 得到地址长度
pos=str.indexOf("?id=",0);   // 得到"?id="的起始地址
if(pos>0)   // 判断是否存在"?id="
{
id=str.substring(pos+4,len);   // 获取ID
fn="<iframe src='news/" + id + ".htm'></iframe>"  // 在内嵌框架里显示相关内容
document.write(fn);   // 输出
} else {
document.writeln("错误的参数!");  // 不存在ID
}
</script>

这样,就可以把新闻做成页面放在news目录,然后在外部调用news.htm?id=1就可以来查看相关的新闻了~~

当然这里的代码并不成熟,比如没有判断ID是否为数字等,这等以后去慢慢完善了:)