BlogJava-乖，别哭的薄壳-随笔分类-Javascript

用ActiveXObject控件替换word书签，将内容导出到word后打印

小祝 — Wed, 16 Apr 2008 11:49:00 GMT

最近有需求将数据导出到word里，然后编辑打印。
想过几种方案：
1.使用jacob。
2.使用apache的poi。
3.使用itext。
由于时间比较紧，没多的时候去学习研究上述工具包，现在用javascript操作ActiveXObject控件，用替换word模板中的书签方式解决。

前提条件：
1.浏览器安全级别降低，可以使用ActiveXObject控件。

2.装有office word。

目前实现了替换单个书签，多行表格书签，和图片，基本上满足需求。不过还有很多操作word的使用方法不太清楚，网上大部分都使用的VB，有不清楚的地方，大家可以交流。

下面说一下我的设计实现思路：

首先当然是定义word模板，在需要替换的地方加上标签。菜单－插入－书签，输入属性名，如year,date,pic1,voList等等。
打印页面：
需要把打印的数据从后台取出，以单个vo(一个对象)为一组，或以voList（对象的列表集合）为一组组织好页面上再得到这些数据后进行替换。
数据组织形式如下：

使用：

注意：
替换图片的值需要解释一下：
1.可以设为相对本页面的路径如../zbgl/abc.png
2.如果是输出流，则需要把请求输出流的url映射成以图片格式结尾的。如/.../abc.do?id=123换成/../abc.png?id=123
可以在web.xml里配一个servlet，如以*.png的请求转成.do的。如：

public class PngDispatcherServlet extends HttpServlet {

private static final long serialVersionUID = 6230740581031996144L;

  public void init() throws ServletException {

}

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws
        ServletException, IOException {
    doGet(request, response);
    }

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws
        ServletException, IOException {

     //StringBuffer url = request.getRequestURL();
    StringBuffer url = new StringBuffer(request.getRequestURI());
     if(request.getQueryString() != null) {
         url.append('?');
         url.append(request.getQueryString());
      }
     String newUrl = url.toString().replaceAll(".png", ".do");
     ServletContext sc = getServletContext();
    RequestDispatcher rd = sc.getRequestDispatcher(newUrl); //定向的页面
    rd.forward(request, response);
   }
}

export2word.js代码：

/**
*

Title: 用word书签替换的方式将内容导出到word

Description: **

Company: **

* @author zhu
* @version 1.0
*/
var baseVoListObj = function(){
this.volist = new Array();
this.cols = new Array();
this.widths = new Array();
}

var WordApp = function(wordTplPath){
var wordObj = new ActiveXObject("Word.Application");
if(wordObj==null){
alert( "不能创建Word对象！");
}
wordObj.visible=false;
this.wordObj = wordObj;
this.docObj = this.wordObj.Documents.Open(getRootPath() + wordTplPath);
}

WordApp.prototype.closeApp = function(){
if (this.wordObj !=null){
this.wordObj.Quit();
}
}

WordApp.prototype.replaceBookmark = function(strName,content,type){
if (this.wordObj.ActiveDocument.BookMarks.Exists(strName)) {
  if (type != null && type == "pic") {//图片
            var objDoc = this.wordObj.ActiveDocument.BookMarks(strName).Range.Select();
            var objSelection = this.wordObj.Selection;
            objSelection.TypeParagraph();
   //alert(getRootPath()+content);
            var objShape = objSelection.InlineShapes.AddPicture(getRootPath()+content);
  }
  else {
   this.wordObj.ActiveDocument.BookMarks(strName).Range.Select();
   this.wordObj.Application.selection.Text = content;
  }
}else{
  //alert("标签不存在");
}
}

WordApp.prototype.replaceBookmarkUsevo = function(voObj){
if(typeof voObj != "object"){
  alert("请输入正确的vo对象");
}else{
  for(var i in voObj){
   this.replaceBookmark(i,voObj[i]);
  }
}
}

WordApp.prototype.replaceBookmarkUsepicvo = function(voObj){
if(typeof voObj !="object"){
  alert("请输入正确的vo对象");
}else{
  for(var i in voObj){
   this.replaceBookmark(i,voObj[i],"pic");
  }
}
}

WordApp.prototype.replaceBookmarkUsevolist = function(strName,voListObj){
if(typeof voListObj != "object"){
  alert("参数应为数组类型");
}else{
  var row = voListObj.volist.length;
  var col = voListObj.cols.length;
  var objDoc = this.wordObj.ActiveDocument.BookMarks(strName).Range;
  var objTable = this.docObj.Tables.Add(objDoc,row,col) ;//插入表格
  for (var i = 0; i < row; i++) {
   for(var j=0; j     //todo 列表里面如果有图片类型不支持，需要判断
    objTable.Cell(i+1,j+1).Range.InsertAfter(voListObj.volist[i][voListObj.cols[j]]);
    var width = voListObj.widths[j];
    if(width.indexOf("px")!=-1){
     objTable.Cell(i+1,j+1).Width = (width.substr(0,width.length-2)/100) * 28.35;//1厘米=28.35磅
    }
   }
  }
  //objTable.AutoFormat(16);
  objTable.Borders.InsideLineStyle = 1
        objTable.Borders.OutsideLineStyle = 0;
}
}

WordApp.prototype.getSingleVo = function(formName,arrayObj){//第二个参数可以为空，不填时默认为表单里的所有元素
var formObj = document.forms[formName];
if(formObj!=null){
  if(arrayObj!=null){
   if(arrayObj instanceof Array){
    var vo = {};
    for(var i=0;i      if(formObj.elements[arrayObj[i]]!= undefined ){
      eval("vo." + arrayObj[i] + " = formObj.elements[arrayObj[i]].value;");
     }
    }
    //alert(objToString(vo));
    return vo;
   }else{
    alert("弟二个参数应为数组类型");
   }
  }else{
   var vo = {};
   for(var i=0;i     eval("vo." + formObj.elements[i].name + " = formObj.elements[i].value;");
   }
   return vo;
  }
}else{
  alert("第一个参数表示的表单不存在");
  return null;
}
}

WordApp.prototype.getVoList = function (formName,arrayObj){//表单名，属性数组(可以为空)
//var formArray = document.forms[formName];
var formArray = document.getElementsByName(formName);
if (formArray != null) {
  if (arrayObj instanceof Array) {
   var voListObj = new baseVoListObj();
   for(var i=0;i     var vo = {};
    for(var j=0;j      if(formArray[i].elements[arrayObj[j]]!= undefined ){
      eval("vo."+arrayObj[j]+" = formArray[i].elements[arrayObj[j]].value;");
      if(i==0){//第一次的时候定义有效属性和宽度
       voListObj.cols.push(arrayObj[j]);
       voListObj.widths.push(formArray[i].elements[arrayObj[j]].style.width);
      }
     }
    }
    voListObj.volist.push(vo);
   }
   return voListObj;
  }else{
   var voListObj = new baseVoListObj();
   for(var i=0;i     var vo = {};
    for(var j=0;j      eval("vo."+formArray[i].elements[j].name+" = formArray[i].elements[j].value;");
     if(i==0){//第一次的时候定义宽度
      voListObj.cols.push(formArray[i].elements[j].name);
      voListObj.widths.push(formArray[i].elements[j].style.width);
     }
    }
    voListObj.volist.push(vo);
   }
   return voListObj;
  }
}else{
  return null;
}
}

function getRootPath()
{
var location=document.location;
if ("file:" == location.protocol) {
var str = location.toString();
return str.replace(str.split("/").reverse()[0], "");
}
var pathName=location.pathname.split("/");
return location.protocol+"//"+location.host+"/"+pathName[1]+"/";
}
先说到这里吧，以后有更好的再更新，希望对大家有用。

小祝 2008-04-16 19:49 发表评论

xml+xsl+javascript取值及修改数据

小祝 — Fri, 06 Jul 2007 16:12:00 GMT

摘要: 前几天公司要用xml快速方便的存取属性N多的数据,跟sinoly合作研究了一下.做了一个小例子.1.example.xml--主要数据文件阅读全文

小祝 2007-07-07 00:12 发表评论

javascript学习笔记(八)－－错误处理

小祝 — Tue, 24 Apr 2007 16:58:00 GMT

1.onerror事件处理函数
onerror事件处理函数是第一个用来协助javascript处理错误的机制。页面上出现异常时，error事件便在window对象上触发。
例如：

<html>
    <head>
        <title>OnError Exampletitle>
        <script type="text/javascript">
            window.onerror = function () {
                alert("An error occurred.");
            }
        script>
    head>
    <body onload="nonExistentFunction()">
    body>
html>

在这个例子中，尝试调用不存在的函数nonExistentFunction()时，就会引发一个异常。这时会弹出警告框显示“An error occurred.”不幸的是，浏览器的错误信息也显示出来了，要从浏览器中隐藏它，onerror事件处理函数必须返回true值：如下

<html>
    <head>
        <title>OnError Exampletitle>
        <script type="text/javascript">
            window.onerror = function () {
                alert("An error occurred.");
                return true;
            }
        script>
    head>
    <body onload="nonExistentFunction()">
    body>
html>

2.取出错误信息
onerror事件处理函数提供了三种信息来确定错误确切的性质：
错误信息－－对于给定错误，浏览器会显示同样的信息。
URL－－在哪个文件中发生了错误。
行号－－给定的URL中发生错误的行号。

3.图像载入错误
图像对象也支持onerror事件处理函数。当一个图像由于某种原因未能成功载入时（例如，文件不存在），error事件便在这个图像上触发。

<html>
    <head>
        <title>Image Error Testtitle>
    head>
    <body>
        <p>The image below attempts to load a file that doesn't exist.p>
        <img src="blue.gif" onerror="alert('An error occurred loading the image.')" />
    body>
html>

与window对象的onerror事件处理函数不同，image的onerror事件处理函数没有任务关于额外信息的参数。

4.处理语法错误
onerror事件处理函数不仅可以处理异常，它还能处理语法错误，也只有它才能处理。

<html>
    <head>
        <title>OnError Exampletitle>
        <script type="text/javascript">
            window.onerror = function (sMessage, sUrl, sLine) {
                alert("An error occurred:\n" + sMessage + "\nURL: " + sUrl + "\nLine Number: " + sLine);
                return true;
            }
            alert("Syntax error.";
        script>
    head>
    <body onload="nonExistentFunction()">
        <p>The syntax error on this page comes <em>afterem> the <code>onerrorcode>
        event handler is defined, so the custom dialog catches it.p>
        <p><strong>Note:strong> This may not work in newer browsers with tighter security restrictions.p>
    body>
html>

注：使用onerror事件处理函数的主要问题是，它是BOM的一部分，所以，没有任何标准能控制它的行为。因此，不同的浏览器使用这个事件处理函数处理错误的方式有明显的不同。例如，在IE中发生error事件时，正常的代码会继续执行：所有的变量和数据都保存下来，并可能过onerror事件处理函数访问。然而在Mozilla中，正常的代码执行都会结束，同时所有错误发生之前的变量和数据都被销毁。Safari和Konqueror不支持window对象上的onerror事件处理函数，但是它们支持图像上的onerror事件处理函数。

5.try...catch语句

<html>
    <head>
        <title>Try Catch Exampletitle>
        <script type="text/javascript">
                try {
                    window.nonExistentFunction();
                    alert("Method completed.");
                } catch (exception) {
                    alert("An exception occurred.");
                } finally {
                    alert("End of try...catch test.");
                }
        script>
    head>
    <body>
    body>
html>

与java不同，ECMAScript标准在try...catch语句中指定只能有一个catch子句。因为javascript是弱类型，没办法指明catch子句中的异常的特定类型。不管错误是什么类型，都由同一个catch子句处理。Mozilla对其进行了扩展，可为try...catch语句添加多个catch子句。当然只有Mozilla才能使用这个形式，所以不推荐使用。

(1)嵌套try...catch语句

<html>
    <head>
        <title>Try Catch Exampletitle>
        <script type="text/javascript">
                try {
                    eval("a ++ b");        //causes error
                } catch (oException) {
                    alert("An exception occurred.");
                    try {
                        var arrErrors = new Array(10000000000000000000000);  //causes error
                        arrErrors.push(exception);
                    } catch (oException2) {
                        alert("Another exception occurred.");
                    }
                } finally {
                    alert("All done.");
                }

        script>
    head>
    <body>
    body>
html>

(2)Error对象
类似于java有个用于抛出的基类Exception，javascript有个Error基类用于抛出。Error对象有以下特性：
name－－表示错误类型的字符串。
message－－实际的错误信息。
Error对象的名称对象对应于它的类(因为Error只是一个基类)，可以是以下值之一：

类	发生原因
EvalError	错误发生在eval()函数中
RangeError	数字的值超出javascript可表示的范围
ReferenceError	使用了非法的引用
SyntaxError	在eval()函数调用中发生了语法错误。其他的语法错误由浏览器报告，无法通过try...catch语句处理
TypeError	变量的类型不是预期所需的
URIError	在encodeURI()或者decodeURI()函数中发生了错误

Mozilla和IE都扩展了Erro对象以适应各自的需求。Mozilla提供一个fileName特性来表示错误发生在哪一个文件中，以及一个stack特性以包含到错误发生时的调用堆栈;IE提供了一个number特性来表示错误代号。
(3)判断错误类型

<html>
    <head>
        <title>Try Catch Exampletitle>
        <script type="text/javascript">
                try {
                    eval("a ++ b");        //causes SyntaxError
                } catch (oException) {
                    if (oException.name == "SyntaxError") {      //或者if(oException instanceof SyntaxError)
                        alert("Syntax Error: " + oException.message);
                    } else {
                        alert("An unexpected error occurred: " + oException.message);
                    }
                }

        script>
    head>
    <body>
    body>
html>

(4)抛出异常
ECMAScript第三版还引入了throw语句，用于有目的的抛出异常。语法如下：
throw error_object; //error_object可以是字符串、数字、布尔值或者是实际的对象。

<html>
    <head>
        <title>Try Catch Exampletitle>
        <script type="text/javascript">
                function addTwoNumbers(a, b) {
                    if (arguments.length < 2) {
                        throw new Error("Two numbers are required.");
                    } else {
                        return a + b;
                    }
                }

                try {
                    result = addTwoNumbers(90);
                } catch (oException) {
                    alert(oException.message);      //outputs "Two numbers are required."
                }

        script>
    head>
    <body>
    body>
html>

另个，因为浏览器不生成Error对象（它总是生成一个较精确的Error对象，比如RangeError），所以区分浏览器抛出的错误和开发人员抛出的错误很简单，使用前面的技术就行了：
try{
   result = addTwoNumber(90,parseInt(z));
}catch(oException){
   if(oException instanceof SyntaxError){
      alert("Syntax Error: "+oException.message);
   }else if(oException instanceof Error){
      alert(oException.message);
   }
}
注意检查instanceof　Error必须是if语句中的最后一个条件，因为所有其他的错误类都继承于它（所以在检测instanceof Error时都返回true）。

所有的浏览器都可以报告开发人员抛出的错误，但是错误消息的显示方式可能有所不同。IE6只会在抛出Error对象时，才显示错误信息;其他情况下，它就只显示Exception thrown and not caught，而没有任何详细内容。Mozilla则会报告Error:uncaught exception:然后调用所抛出的对象的toString()方法。

小祝 2007-04-25 00:58 发表评论

javascript学习笔记(七)－－DOM基础

小祝 — Tue, 24 Apr 2007 14:06:00 GMT

一、DOM基础
1.节点(node)层次
Document－－最顶层的节点，所有的其他节点都是附属于它的。
DocumentType－－DTD引用（使用语法）的对象表现形式，它不能包含子节点。
DocumentFragment－－可以像Document一样来保存其他节点。
Element－－表示起始标签和结束标签之间的内容，例如或者。这是唯一可以同时包含特性和子节点的节点类型。
Attr－－代表一对特性名和特性值。这个节点类型不能包含子节点。
Text－－代表XML文档中的在起始标签和结束标签之间，或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。
CDataSection－－的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。
Entity－－表示在DTD中的一个实体定义，例如。这个节点类型不能包含子节点。
EntityReference－－代表一个实体引用，例如"。这个节点类型不能包含子节点。
ProcessingInstruction－－代表一个PI。这个节点类型不能包含子节点。
Comment－－代表XML注释。这个节点不能包含子节点。
Notation－－代表在DTD中定义的记号。这个很少用到。

Node接口定义了所有节点类型都包含的特性和方法。

特性/方法	类型/返回类型	说明
nodeName	String	节点的名字;根据节点的类型而定义
nodeValue	String	节点的值;根据节点的类型而定义
nodeType	Number	节点的类型常量值之一
ownerDocument	Document	指向这个节点所属的文档
firstChild	Node	指向在childNodes列表中的第一个节点
lastChild	Node	指向在childNodes列表中的最后一个节点
childNodes	NodeList	所有子节点的列表
previousSibling	Node	指向前一个兄弟节点;如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling	Node	指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes()	Boolean	当childNodes包含一个或多个节点时,返回真
attributes	NamedNodeMap	包含了代表一个元素的特性的Attr对象;仅用于Element节点
appendChild(node)	Node	将node添加到childNodes的末尾
removeChild(node)	Node	从childNodes中删除node
replaceChild(newnode,oldnode)	Node	将childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode)	Node	在childNodes中的refnode之前插入newnodd

除节点外，DOM还定义了一些助手对象，它们可以和节点一起使用，但不是DOM文档必有的部分。
NodeList－－节点数组，按照数值进行索引;用来表示和一个元素的子节点。
NamedNodeMap－－同时使用数值和名字进行索引的节点表;用于表示元素特性。

2.访问相关的节点
下面的几节中考虑下面的HTML页面

<html>
    <head>
        <title>DOM Exampletitle>
    head>
    <body>
        <p>Hello World!p>
        <p>Isn't this exciting?p>
        <p>You're learning to use the DOM!p>
    body>
html>

要访问元素（你应该明白这是该文件的document元素），你可以使用document的documentElement特性：
var oHtml = document.documentElement;
现在变量oHtml包含一个表示的HTMLElement对象。如果你想取得和元素，下面的可以实现：
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
也可以使用childNodes特性来完成同样的工作。只需把它当成普通的javascript array，使用方括号标记：
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
注意方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法：
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
HTML DOM页定义了document.body作为指向元素的指针。
var oBody = ducument.body;
有了oHtml,oHead和oBody这三个变量，就可以尝试确定它们之间的关系：
alert(oHead.parentNode==oHtml);
alert(oBody.parentNode==oHtml);
alert(oBody.previousSibling==oHead);
alert(bHead.nextSibling==oBody);
alert(oHead.ownerDocument==document);
以上均outputs "true"。

3.处理特性
正如前面所提到的，即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有
Element节点才能有特性。Element节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法：
getNamedItem(name)－－返回nodename属性值等于name的节点;
removeNamedItem(name)－－删除nodename属性值等于name的节点;
setNamedItem(node)－－将node添加到列表中，按其nodeName属性进行索引;
item(pos)－－像NodeList一样，返回在位置pos的节点;
注：请记住这些方法都是返回一个Attr节点，而非特性值。

NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。
当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，这的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。例如，假设有这样一个元素：

Hello world!

同时，假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值:
var sId = oP.attributes.getNamedItem("id").nodeValue;
当然，还可以用数值方式访问id特性，但这样稍微有些不直观：
var sId = oP.attributes.item(1).nodeValue;
还可以通过给nodeValue属性赋新值来改变id特性：
oP.attributes.getNamedItem("id").nodeValue="newId";
Attr节点也有一个完全等同于(同时也完全同步于)nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。
因为这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性：
getAttribute(name)－－等于attributes.getNamedItem(name).value;
setAttribute(name,newvalue)－－等于attribute.getNamedItem(name).value=newvalue;
removeAttribute(name)－－等于attribute.removeNamedItem(name)。

4.访问指定节点
(1)getElementsByTagName()
核心(XML) DOM定义了getElementsByTagName()方法，用来返回一个包含所有的tagName(标签名)特性等于某个指定值的元素的NodeList。在Element对象中，tagName特性总是等于小于号之后紧跟随的名称－－例如，的tagName是"img"。下一行代码返回文档中所有元素的列表：
var oImgs = document.getElementsByTagName("img");
把所有图形都存于oImgs后，只需使用方括号或者Item()方法（getElementsByTagName()返回一个和childNodes一样的NodeList），就可以像访问子节点那样逐个访问这些节点了：
alert(oImgs[0].tagName); //outputs "IMG"
假如只想获取在某个页面第一个段落的所有图像，可以通过对第一个段落元素调用getElementsByTagName()来完成，像这样：
var oPs = document.getElementByTagName("p");
var oImgsInp = oPs[0].getElementByTagName("img");
可以使用一个星号的方法来获取document中的所有元素：
var oAllElements = document.getElementsByTagName("*");
当参数是一个星号的时候，IE6.0并不返回所有的元素。必须使用document.all来替代它。
(2)getElementsByName()
HTML DOM 定义了getElementsByName()，这用来获取所有name特性等于指定值的元素的。
(3)getElementById()
这是HTML DOM定义的第二种方法，它将返回id特性等于指定值的元素。在HTML中，id特性是唯一的－－这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。
注：如果给定的ID匹配某个元素的name特性，IE6.0还会返回这个元素。这是一个bug，也是必须非常小心的一个问题。

5.创建新节点
最常用到的几个方法是
createDocumentFragment()－－创建文档碎片节点
createElement(tagname)－－创建标签名为tagname的元素
createTextNode(text)－－创建包含文本text的文本节点

createElement()、createTextNode()、appendChild()

<html>
    <head>
        <title>createElement() Exampletitle>
        <script type="text/javascript">
            function createMessage() {
                var oP = document.createElement("p");
                var oText = document.createTextNode("Hello World!");
                oP.appendChild(oText);
                document.body.appendChild(oP);
            }
        script>
    head>
    <body onload="createMessage()">
    body>
html>

removeChild()、replaceChild()、insertBefore()
删除节点

<html>
    <head>
        <title>removeChild() Exampletitle>
        <script type="text/javascript">
            function removeMessage() {
                var oP = document.body.getElementsByTagName("p")[0];
                oP.parentNode.removeChild(oP);
            }
        script>
    head>
    <body onload="removeMessage()">
        <p>Hello World!p>
    body>
html>

替换

<html>
    <head>
        <title>replaceChild() Exampletitle>
        <script type="text/javascript">
            function replaceMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                oNewP.appendChild(oText);
                var oOldP = document.body.getElementsByTagName("p")[0];
                oOldP.parentNode.replaceChild(oNewP, oOldP);
            }
        script>
    head>
    <body onload="replaceMessage()">
        <p>Hello World!p>
    body>
html>

新消息添加到旧消息之前

<html>
    <head>
        <title>insertBefore() Exampletitle>
        <script type="text/javascript">
            function insertMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                oNewP.appendChild(oText);
                var oOldP = document.getElementsByTagName("p")[0];
                document.body.insertBefore(oNewP, oOldP);
            }
        script>
    head>
    <body onload="insertMessage()">
        <p>Hello World!p>
    body>
html>

createDocumentFragment()
一旦把节点添加到document.body（或者它的后代节点）中，页面就会更新并反映出这个变化。对于少量的更新，这是很好的，然而，当要向document添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中，假如想创建十个新段落。

<html>
    <head>
        <title>insertBefore() Exampletitle>
        <script type="text/javascript">
            function addMessages() {
                var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];

                var oFragment = document.createDocumentFragment();

                for (var i=0; i < arrText.length; i++) {
                    var oP = document.createElement("p");
                    var oText = document.createTextNode(arrText[i]);
                    oP.appendChild(oText);
                    oFragment.appendChild(oP);
                }

                document.body.appendChild(oFragment);

            }
        script>
    head>
    <body onload="addMessages()">

    body>
html>

6.让特性像属性一样
大部分情况下，HTML DOM元素中包含的所有特性都是可作为属性。
假设有如下图像元素：

如果要使用核心的DOM来获取和设置src和border特性，那么要用getAttribute()和setAttribute()方法：
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jpg");
oImg.setAttribute("border",1);
然而，使用HTML DOM，可以使用同样名称的属性来获取和设置这些值：
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border ="1";
唯一的特性名和属性名不一样的特例是class属性，它是用来指定应用于某个元素的一个CSS类，因为class在ECMAScript中是一个保留字，在javascript中，它不能被作为变量名、属性名或都函数名。于是，相应的属性名就变成了className;
注：IE在setAttribute()上有很大的问题，最好尽可能使用属性。

7.table方法
为了协助建立表格，HTML DOM给,和等元素添加了一些特性和方法。
给

元素添加了以下内容：

元素的集合元素（如果存在）元素（如果存在）元素并将其放入表格元素并将其放入表格元素元素

元素并将其放入表格
特性/方法	说明
caption	指向
tBodies
tFoot	指向
tHead	指向
rows	表格中所有行的集合
createTHead()	创建
createTFood()	创建
createCpation()	创建
deleteTHead()	删除
deleteTFood()	删除
deleteCaption()	删除
deleteRow(position)	删除指定位置上的行
insertRow(position)	在rows集合中的指定位置上插入一个新行

元素添加了以下内容
中所有行的集合

特性/方法	说明
rows
deleteRow(position)	删除指定位置上的行
insertRow(position)	在rows集合中的指定位置上插入一个新行

元素添加了以下内容
元素中所有的单元格的集合

特性/方法	说明
cells
deleteCell(postion)	删除给定位置上的单元格
insertCell(postion)	在cells集合的给点位置上插入一个新的单元格

8.遍历DOM
NodeIterator，TreeWalker
DOM Level2的功能，这些功能只有在Mozilla和Konqueror/Safari中才有，这里就不介绍了。

小祝 2007-04-24 22:06 发表评论

javascript学习实践－－新手上路－－验证表单

小祝 — Wed, 18 Apr 2007 15:36:00 GMT

这几天学习javascript，就只在看书，都没怎么实践，
今天工作的时候要检验表单数据，属性Ｎ多，以前做的时候是对每个属性都写四五句话来判断，类似
function checkData(){
   if(document.forms[0].username==""){
      alert("请输入用户名");
      document.forms[0].username.focus();
      return false;
   }
   return true;
}
关于这种验证的实用性暂且不谈，现在一般的验证早已不用这个了。
只是为了在工作中偷偷懒，写了个方便点的CheckUtil，如下

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>验证</title>
<script type="text/javascript">
var CheckUtil = new Object();
var checkutil = CheckUtil;
CheckUtil.status = true;//状态，用来标志是否有不合格验证
CheckUtil.checks = new Array();//用来存储需要验证的对象参数
CheckUtil.definedchecks = new Array();//用来存储自定义验证
CheckUtil.errors = new Array();//用来存储输出错误信息
CheckUtil.firstErrObj = null;//用来存储第一个出错对象，设置焦点
//////////////////////各种验证类型/////////////////////////////
CheckUtil.REQUIRED = /\S/;        //非空
CheckUtil.INT = /^-?\d+$/;        //整数
CheckUtil.FLOAT = /^(-?\d+)(\.\d+)?$/;        //浮点数
CheckUtil.USERNAME = /^[a-zA-Z]{1}(\w){4,19}$/;        //用户名
CheckUtil.EMAIL = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;    //电子邮箱
CheckUtil.TEL = /^(($\d{3}$)(\d{3}\-))?($0\d{2,3}$0\d{2,3}-)?[1-9]\d{6,7}$/;    //电话号码
CheckUtil.MOBILEPHONE = /^(($\d{3}$)(\d{3}\-))?13\d{9}$/;        //手机
CheckUtil.NUM = /^\d+$/;    //数字
CheckUtil.CARDID = /^\d{15}(\d{2}[A-Za-z0-9])?$/;        //身份证号
CheckUtil.POSTCODE = /^[1-9]\d{5}$/;        //邮编
CheckUtil.DATE1 = /^(?:19\d{2}|20\d{2})-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12][0-9]|3[01])$/        //日期，形如yyyy-mm-dd
///////////////////////////////////////////////////////////////////////
/**
*初始化
*/
CheckUtil.init = function(){
    CheckUtil.status = true;
    CheckUtil.checks = new Array();
    CheckUtil.definedchecks = new Array();
    CheckUtil.errors = new Array();
    CheckUtil.firstErrObj = null;
}
/**
*添加验证对象及参数
*@param obj 需验证表单对象
*@param checktype 需验证类型
*@param errmessage 验证失败时提示信息
*/
CheckUtil.addCheck = function(obj,checktype,errmessage){
    var check_obj = new checkObj(obj,checktype,errmessage);
    CheckUtil.checks.push(check_obj);
}
/**
*添加自定义验证
*@param expression 需验证表达式，为真时返回错误信息
*@param errmessage 验证失败时提示信息
*/
CheckUtil.addDefinedCheck = function(expression,errmessage){
    var check_obj = new definedcheckObj(expression,errmessage);
    CheckUtil.definedchecks.push(check_obj);
}
/**
*验证对象
*/
function checkObj(obj,checktype,errmessage){
    this.obj = obj;
    this.value = obj.value;
    this.checktype = checktype;
    this.errmessage = errmessage;
}
/**
*自定义验证对象
*/
function definedcheckObj(expression,errmessage){
    this.expression = expression;
    this.errmessage = errmessage;
}
/**
*执行验证并提示信息，并返回验证状态
*/
CheckUtil.execute = function(){    
    checkChecks();
    checkDefinedChecks();
    showError();
    return CheckUtil.status;
}
/**
*检验对象
*/
function checkChecks(){
     for(var i=0;i<checkutil.checks.length;i++){
          var check_obj = CheckUtil.checks[i];
          if(check_obj.checktype==CheckUtil.REQUIRED){//判断是否是必填
                 if(!check_obj.checktype.test(check_obj.value)){
                     CheckUtil.status = false;
                     if(!CheckUtil.firstErrObj){
                         CheckUtil.firstErrObj = check_obj.obj;
                     }
                     CheckUtil.errors.push(check_obj.errmessage);
                 }
          }else{//不是必填的话，看有没有填入值，填了就检查，没填也是可行的
               if(CheckUtil.REQUIRED.test(check_obj.value)){
                    if(!check_obj.checktype.test(check_obj.value)){
                          CheckUtil.status = false;
                          if(!CheckUtil.firstErrObj){
                              CheckUtil.firstErrObj = check_obj.obj;
                          }
                          CheckUtil.errors.push(check_obj.errmessage);
                    }
               }
         }
    }
}
/**
*检验自定义验证
*/
function checkDefinedChecks(){
    for(var i=0;i<checkutil.definedchecks.length;i++){
          var check_obj = CheckUtil.definedchecks[i];
          if(check_obj.expression){
                  CheckUtil.errors.push(check_obj.errmessage);
          }
    }
}
/**
*显示错误信息
*/
function showError(){
    if(!CheckUtil.status){
        var show = "";
        for(var i=0;i<checkutil.errors.length;i++){
            show +=(i+1)+". "+CheckUtil.errors[i]+"\n";
        }
        alert(show);    
        CheckUtil.firstErrObj.focus();
        CheckUtil.firstErrObj.select();
    }
}
function checkData(){
    CheckUtil.init();
    CheckUtil.addCheck(document.forms[0].username,CheckUtil.REQUIRED,"请输入用户名");
    CheckUtil.addCheck(document.forms[0].username,CheckUtil.USERNAME,"用户名须由字母开头,及4-19位单词字符组成");
    CheckUtil.addCheck(document.forms[0].password,CheckUtil.REQUIRED,"请输入密码");
    CheckUtil.addCheck(document.forms[0].checkcode,CheckUtil.NUM,"验证码须为数字");
    CheckUtil.addCheck(document.forms[0].logindate,CheckUtil.DATE1,"请输入正确的日期格式，形如yyyy-mm-dd");
    CheckUtil.addDefinedCheck(document.forms[0].password!=document.forms[0].password2,"两次输入的密码不相同");
    return CheckUtil.execute();
}
</script>
</head>
<body>
<form name="form1" action="www.blogjava.net/ilovezmh" method="post" onsubmit="return checkData();">
<label>用户名</label>
<input name="username" type="text" size="20" /><br/>
<label>密　码</label>
<input name="password" type="password" size="20" /><br/>
<label>确　认</label>
<input name="password2" type="password" size="20" /><br/>
<label>验证码</label>
<input name="checkcode" type="text" size="20" /><br/>
<label>日　期</label>
<input name="logindate" type="text" size="20" /><br/>
<button name="sub" type="submit"> 提　交　</button>
</form>
</body>
</html>

其实也可以方便的根据需要更改提示的方式。

小祝 2007-04-18 23:36 发表评论

javascript学习笔记(六)－－资料

小祝 — Tue, 17 Apr 2007 16:50:00 GMT

唉，前面写了几篇，感觉像在抄书，累。
把整个文档放在这里算了，到时候需要再找。
重要的地方再记录下了。
注：本资料为《javascript高级程序设计》一书配套源代码。学习笔记也从本书摘录。

源代码下载

小祝 2007-04-18 00:50 发表评论

javascript学习笔记(五)－－事件

小祝 — Tue, 17 Apr 2007 16:18:00 GMT

EventUtil.formatEvent = function (oEvent) {
    if (isIE && isWin) {
        oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
        oEvent.eventPhase = 2;
        oEvent.isChar = (oEvent.charCode > 0);
        oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
        oEvent.pageY = oEvent.clientY + document.body.scrollTop;
        oEvent.preventDefault = function () {
            this.returnValue = false;
        };

        if (oEvent.type == "mouseout") {
            oEvent.relatedTarget = oEvent.toElement;
        } else if (oEvent.type == "mouseover") {
            oEvent.relatedTarget = oEvent.fromElement;
        }

        oEvent.stopPropagation = function () {
            this.cancelBubble = true;
        };

        oEvent.target = oEvent.srcElement;
        oEvent.time = (new Date).getTime();
    }
    return oEvent;
};

EventUtil.getEvent = function() {
    if (window.event) {
        return this.formatEvent(window.event);
    } else {
        return EventUtil.getEvent.caller.arguments[0];
    }
};

小祝 2007-04-18 00:18 发表评论

javascript学习笔记(四)－－检测浏览器和操作系统

小祝 — Tue, 17 Apr 2007 16:13:00 GMT

var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);

function compareVersions(sVersion1, sVersion2) {

}

var isOpera = sUserAgent.indexOf("Opera") > -1;
var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;

if (isOpera) {
    var fOperaVersion;
    if(navigator.appName == "Opera") {
        fOperaVersion = fAppVersion;
    } else {
        var reOperaVersion = new RegExp("Opera (\\d+\\.\\d+)");
        reOperaVersion.test(sUserAgent);
        fOperaVersion = parseFloat(RegExp["$1"]);
    }

    isMinOpera4 = fOperaVersion >= 4;
    isMinOpera5 = fOperaVersion >= 5;
    isMinOpera6 = fOperaVersion >= 6;
    isMinOpera7 = fOperaVersion >= 7;
    isMinOpera7_5 = fOperaVersion >= 7.5;
}

var isKHTML = sUserAgent.indexOf("KHTML") > -1
              || sUserAgent.indexOf("Konqueror") > -1
              || sUserAgent.indexOf("AppleWebKit") > -1;

var isMinSafari1 = isMinSafari1_2 = false;
var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;

if (isKHTML) {
isSafari = sUserAgent.indexOf("AppleWebKit") > -1;
isKonq = sUserAgent.indexOf("Konqueror") > -1;

    if (isSafari) {
        var reAppleWebKit = new RegExp("AppleWebKit\\/(\\d+(?:\\.\\d*)?)");
        reAppleWebKit.test(sUserAgent);
        var fAppleWebKitVersion = parseFloat(RegExp["$1"]);

        isMinSafari1 = fAppleWebKitVersion >= 85;
        isMinSafari1_2 = fAppleWebKitVersion >= 124;
    } else if (isKonq) {

        var reKonq = new RegExp("Konqueror\\/(\\d+(?:\\.\\d+(?:\\.\\d)?)?)");
        reKonq.test(sUserAgent);
        isMinKonq2_2 = compareVersions(RegExp["$1"], "2.2") >= 0;
        isMinKonq3 = compareVersions(RegExp["$1"], "3.0") >= 0;
        isMinKonq3_1 = compareVersions(RegExp["$1"], "3.1") >= 0;
        isMinKonq3_2 = compareVersions(RegExp["$1"], "3.2") >= 0;
    }

}

var isIE = sUserAgent.indexOf("compatible") > -1
           && sUserAgent.indexOf("MSIE") > -1
           && !isOpera;

var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false;

if (isIE) {
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(sUserAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);

    isMinIE4 = fIEVersion >= 4;
    isMinIE5 = fIEVersion >= 5;
    isMinIE5_5 = fIEVersion >= 5.5;
    isMinIE6 = fIEVersion >= 6.0;
}

var isMoz = sUserAgent.indexOf("Gecko") > -1
&& !isKHTML;

var isMinMoz1 = sMinMoz1_4 = isMinMoz1_5 = false;

if (isMoz) {
    var reMoz = new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)");
    reMoz.test(sUserAgent);
    isMinMoz1 = compareVersions(RegExp["$1"], "1.0") >= 0;
    isMinMoz1_4 = compareVersions(RegExp["$1"], "1.4") >= 0;
    isMinMoz1_5 = compareVersions(RegExp["$1"], "1.5") >= 0;
}

var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML
            && (sUserAgent.indexOf("Mozilla") == 0)
            && (navigator.appName == "Netscape")
            && (fAppVersion >= 4.0 && fAppVersion < 5.0);

var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false;

if (isNS4) {
    isMinNS4 = true;
    isMinNS4_5 = fAppVersion >= 4.5;
    isMinNS4_7 = fAppVersion >= 4.7;
    isMinNS4_8 = fAppVersion >= 4.8;
}

var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC")
|| (navigator.platform == "Macintosh");

var isUnix = (navigator.platform == "X11") && !isWin && !isMac;

var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;
var isMac68K = isMacPPC = false;
var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false;

if (isWin) {
    isWin95 = sUserAgent.indexOf("Win95") > -1
              || sUserAgent.indexOf("Windows 95") > -1;
    isWin98 = sUserAgent.indexOf("Win98") > -1
              || sUserAgent.indexOf("Windows 98") > -1;
    isWinME = sUserAgent.indexOf("Win 9x 4.90") > -1
              || sUserAgent.indexOf("Windows ME") > -1;
    isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1
              || sUserAgent.indexOf("Windows 2000") > -1;
    isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1
              || sUserAgent.indexOf("Windows XP") > -1;
    isWinNT4 = sUserAgent.indexOf("WinNT") > -1
              || sUserAgent.indexOf("Windows NT") > -1
              || sUserAgent.indexOf("WinNT4.0") > -1
              || sUserAgent.indexOf("Windows NT 4.0") > -1
              && (!isWinME && !isWin2K && !isWinXP);
}

if (isMac) {
    isMac68K = sUserAgent.indexOf("Mac_68000") > -1
               || sUserAgent.indexOf("68K") > -1;
    isMacPPC = sUserAgent.indexOf("Mac_PowerPC") > -1
               || sUserAgent.indexOf("PPC") > -1;
}

if (isUnix) {
isSunOS = sUserAgent.indexOf("SunOS") > -1;

    if (isSunOS) {
        var reSunOS = new RegExp("SunOS (\\d+\\.\\d+(?:\\.\\d+)?)");
        reSunOS.test(sUserAgent);
        isMinSunOS4 = compareVersions(RegExp["$1"], "4.0") >= 0;
        isMinSunOS5 = compareVersions(RegExp["$1"], "5.0") >= 0;
        isMinSunOS5_5 = compareVersions(RegExp["$1"], "5.5") >= 0;
    }
}

小祝 2007-04-18 00:13 发表评论

javascript学习笔记(三)－－正则表达式

小祝 — Mon, 16 Apr 2007 16:45:00 GMT

一、简单模式
1.元字符
这里是正则表达式用到的所有元字符
( [ { \ ^ $ | ) ? * + .
任何时候要在正则表达式中使用这些元字符，都必须对它们进行转义。因此要匹配一个问号，正则表达式就该这样表示：
var veQMark =/\?/;
或者这样表示：
var veQMark=new RegExp("\\?");
注意当正则表达式以第二种形式表示时，所有的反斜杠都必须用两个反斜杠来替换，因为javascript字符串解析器会按照\n的方式尝试翻译\?。为了保证不会出现这个问题，在元字符的前面加上两个反斜杠（双重转义）。这个小小的gotcha就是多数开发者更偏好使用字面量语法的原因。

2.使用特殊字符
要使用ASCII来表示一个字符，则必须指定一个两位的十六进制代码，并有前面加上\x。例如字符b的ASCII码为98，等于十六进制的62，因此，表示字符b可以使用\x62
另外也可以使用八进制代替十六进制来指定字符代码，直接在反斜杠之后跟上八进制数值，例如，b等于八进制的142，所以下面就该这样
/\142/
如果要使用Unicode来表示字符，必须指定字符串的四位十六进制表示形式，因此b应该是\u0062
另外还有其他一些预定义的特殊字符，如下表所列

字符	描述
\t	制表符
\n	换行符
\r	回车符
\f	换页符
\a	alert字符
\e	escape字符
\cx	与X相对应的控制字符
\b	回退字符
\v	垂直制表符
\0	空字符

3.字符类
3.1简单类
假设相匹配"bat","cat","fat"。使用简单类可以很方便的解决这个问题
/[bcf]at/gi
后面的g表示全匹配，i表示不区分大小写。
3.2负向类
要匹配除了a和b的所有字符，那么这个字符就是[^ab]
3.3范围类
[a-z]
[A-Z]
[0-9]
[^1-4]
3.4组合类
匹配所有从a~m的字母以及从1~4的数字，以及一个换行符
[a-m1-4\n]
3.5预定义类

代码	等同于	匹配
.	[^\n\r]	除了换行和回车之外的任意字符
\d	[0-9]	数字
\D	[^0-9]	非数字字符
\s	[\t\n\x0B\f\r]	空白字符
\S	[^\t\n\x0B\f\r]	非空白字符
\w	[a-zA-Z_0-9]	单词字符（所有字母，所有的数字和下划线）
\W	[^a-zA-Z_0-9]	非单词字符

4.量词
4.1简单量词

代码	描述
?	出现零次或一次
*	出现零次或多次
+	出现一次或多次（至少出现一次）
{n}	一定出现n次
{n,m}	至少出现n次但不超过m次
{n,}	至少出现n次

4.2贪婪的、惰性的和支配性的量词
贪婪量词：先看整个的字符串是不是一个匹配，如果没有发现匹配，它去掉字符串中的最后一个字符，并再次尝试。直到发现一个匹配字符或者字符串不剩任何字符。
惰性量词：先看字符串中的第一个字线是不是一个匹配。如果单独这个字符还不够，就读入下一个字符，组成两个字符的字符串，如果还是没有发现匹配，继续添加字会直到发现一个或者整个字符都检查过也没有匹配。其工作方式恰好与贪婪相反。
支配量词：只尝试匹配整个字符串。如果整个字符串不能产生匹配，不做进一步尝试。
表示方法如下表

贪婪	惰性	支配	描述
?	??	?+	零次或一次出现
*	*?	*+	零次或多次出现
+	+?	++	一次或多次出现
{n}	{n}?	{n}+	恰好n次出现
{n,m}	{n,m}?	{n,m}+	至少n次至多m次出现
{n,}	{n,}?	{n,}+	至少n次出现

浏览器对支配量词的支持还很不完善。IE和Opera不支持，Mozilla将支配量词看作是贪婪的。

二、复杂模式
1.分组
分组是通过一系列括号包围一系列字符、字符类以及量词来使用的。
/dogdog/可使用分组来重写成/(dog){2}/
/([bd]ad?)*/匹配零个和多个"ba","da","bad"或"dad"
/(mom( and dad)?)/匹配"mom" 或　"mom and dad"

2.反向引用
在表达式计算完成后还可以怎样利用分组？每个分组都被存放在一个特殊的地方以备将来使用。这些存储在分组中的特殊值，我们称之为反向引用。
反向引用是按照从左到右遇到的左括号字符的顺序进行创建和编号的。例如表达式(A?(B?(C?)))将产生编号从1-3的三个反向引用
(1).(A?(B?(C?)))
(2).(B?(C?))
(3).(C?)
反向引用可以有几种不同的使用方法。
首先，使用正则表达式对象的test(),match()或search()方法后，反向引用的值可以从RegExp构造函数中获得。例
var sToMatch = "#123456789";
var reNumbers = /#(\d+)/;
reNumbers.test(sToMatch);
alert(RegExp.$1);      //outputs "123456789"
然后，还可以直接在定义分组的表达式中包含反向引用，这可以通过使用特殊转义序列如\1,\2等等实现
例如
var sToMatch = "dogdog";
var reDogDog = /(dog)\1/;
alert(reDogDog.test(sToMatch));      //outputs "true"
正则表达式reDogDog首先创建单词dog的组，然后又被特殊转义序列\1引用，使得这个正则表达式等同于/dogdog/
第三，反向引用可以用在String对象的replace()方法中，这通过使用特殊字符序列$1,$2等等来实现。例如
var sToChange = "1234 5678";
var reMatch = /(\d{4}) (\d{4})/
var sNew = sToChange.replace(reMatch,"$2 $1");
alert(sNew);      //outputs "5678 1234"

3.候选
有时候要构建一个能够正确匹配想得到所有可能性的模式是十分困难的。如果要对同一个表达式同时匹配"red"和"break"时要怎么做呢？这些单词完全没有相同的字符，这样就要写两个不同的正则表达式，并分别对两个字符串进行匹配，像这样：
var sToMatch1 = "red";
var sToMatch2 = "black";
var reRed = /red/;
var reBlack = /black/;
alert(reRed.test(sToMatch1)||reBlack.test(sToMatch1));      //outputs "true"
alert(reRed.test(sToMatch2)||reBlack.test(sToMatch2));      //outputs "true"
这完成了任务，但是十分冗长。还有另一种方式就是使用正则表达式的候选操作符。例：
var sToMatch1 = "red";
var sToMatch2 = "black";
var reRedOrBlack = /(red|black)/;
alert(reRedOrBlack.test(sToMatch1));      //outputs "true"
alert(reRedOrBlack.test(sToMatch2));      //outputs "true"

4.非捕获性分组
创建反向引用的分组，我们称之为捕获性分组。同时还有一种非捕获性分组，它不会创建反向引用。在较长的正则表达式中，存储反向引用会降低匹配速度。
如果要创建一个非捕获性分组，只要在左括号的后面加上一个问号和一个紧跟的冒号：
var sToMatch = "#123456789";
var reNumbers = /#(?:\d+)/;
reNumbers.test(sToMatch);
alert(RegExp.$1);      //outputs ""

5.前瞻
有时候，可能希望，当某个特定的字符分组出现在另一个字符串之前时，才去捕获它。如果使用“前瞻”就可以让这个过程变得十分简单。
前瞻，告诉正则表达式运算器向前看一些字符而不移动其位置。同样存在正向前瞻和负向前瞻。正向前瞻检查的是接下来出现的是不是某个特定字符集。而负向前瞻则是检查接下来的不应该出现的特定字符集。
创建正向前瞻要将模式放在(?=和)之间。注意这不是分组，虽然它也用到括号。
var sToMatch1 = "bedroom";
var sToMatch2 = "bedding";
var reBed = /(bed(?=room)/;
alert(reBed.test(sToMatch1));      //outputs "true"
alert(RegExp.$1);      //outputs "bed"
alert(reBed.test(sToMatch2));      //outputs "false"
负向前瞻，则要将模式放在(?!和)之间。
var sToMatch1 = "bedroom";
var sToMatch2 = "bedding";
var reBed = /(bed(?!room)/;
alert(reBed.test(sToMatch1));      //outputs "false"
alert(reBed.test(sToMatch2));      //outputs "true"
alert(RegExp.$1);      //outputs "bed"

6.边界
边界　用于正则表达式中表示模式的位置。下表列出了几种可能的边界

边界	描述
^	行开头
$	行结尾
\b	单词的边界
\B	非单词的边界

假设想查找一个单词，但要它只出现在行尾，则可以使用美元符号$来表示它：
var sToMatch = "Important word is the last one.";
var reLastWord = /(\w+).$/;
reLastWord.test(sToMatch);
alert(RegExp.$1); //outputs "one"

7.多行模式
要指定多行模式，只要在正则表达式后面添加一个m选项。这会让$边界匹配换行符(\n)以及字符串真正的结尾。
var sToMatch = "First second\nthird fourth\nfifth sixth";
var reLastWordOnLine = /(\w+)$/gm;
var arrWords = sToMatch.match(reLastWordOnLine);
表达式返回"second","fourth"和"sixth"。若不指定多行模式，表达式将只返回"sixth"。

二、RegExp对象
javascript中的每个正则表达式都是一个对象，同其他的对象一样。
1.实例属性
global－－Boolean值，表示g(全局选项)是否已设置。
ignoreCase－－Boolean值，表示i(忽略大小写选项)是否已设置。
lastIndex－－整数，代表下次匹配将会从哪个字符位置开始(只有当使用exec()或test()函数才会填入，否则为0)。
multiline－－Boolean值，表示m(多行模式选项)是否已设置。
source－－正则表达式的源字符串形式。例如表达式/[ba]*/的source将返回"[ba]*"。

2.静态属性
静态的RegExp属性对所有的正则表达式都有效。

长名	短名	描述
input	$_	最后用于匹配的字符串(传递给exec()或test()的字符串)
lastMatch	$&	最后匹配的字符
lastParen	$+	最后匹配的分组
leftContext	$`	在上次匹配的前面的子串
multiline	$*	用于指定是否所有的表达式都使用多行模式的布尔值
rightContext	$'	在上次匹配之后的子串

IE和Opera并不支持RegExp.multiline，所以最好单独的对每个表达式设置m选项而不要直接设置这个标记。

小祝 2007-04-17 00:45 发表评论

javascript学习笔记(二)－－继承

小祝 — Mon, 16 Apr 2007 15:24:00 GMT

一、继承的方式
1.对象冒充
function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}

function ClassB(sColor, sName) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.call(this, sColor);

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

var objA = new ClassA("red");
var objB = new ClassB("blue", "Nicholas");
objA.sayColor();
objB.sayColor();
objB.sayName();

3.apply()方法
apply()方法有两个参数，用作this的对象和要传递参数的数组。例如：
function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.apply(this, arguments);

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

var objA = new ClassA("red");
var objB = new ClassB("blue", "Nicholas");
objA.sayColor();
objB.sayColor();
objB.sayName();

当然，只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象。如果不是，就必须创建一个单独的数组，按照正确的顺序放置参数。此外，还可以使用call()方法。

4.原型链
function ClassA() {
}

ClassA.prototype.color = "red";
ClassA.prototype.sayColor = function () {
alert(this.color);
};

function ClassB() {
}

ClassB.prototype = new ClassA();

ClassB.prototype.name = "";
ClassB.prototype.sayName = function () {
alert(this.name);
};

var objA = new ClassA();
var objB = new ClassB();
objA.color = "red";
objB.color = "blue";
objB.name = "Nicholas";
objA.sayColor();
objB.sayColor();
objB.sayName();
注意，调用ClassA的构造函数时，没有给它传递参数。这在原型链中是标准做法。要确保构造函数没有任何参数。
原型链的弊端是不支持多重继承。

5.混合方式
与创建对象最好方式相似，用对象冒充继承构造函数的属性，用原型链继承prototype对象的方法。
function ClassA(sColor) {
this.color = sColor;
}

ClassA.prototype.sayColor = function () {
alert(this.color);
};

function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
}

ClassB.prototype = new ClassA();

ClassB.prototype.sayName = function () {
alert(this.name);
};

var objA = new ClassA("red");
var objB = new ClassB("blue", "Nicholas");
objA.sayColor();
objB.sayColor();
objB.sayName();

二、其他继承方式
1.zlnherit库
可以从http://www.nczonline.net/downloads处下载
zInherit库给Object类添加了两个方法，inheritFrom()和instanceOf()
ClassB.prototype.inheritFrom(ClassA);
CalssB.instanceOf(ClassA);

2.xbObjects库
可以从http://archive.bclary.com/xbprojectsdocs/xbobject/处下载
第一步，必须注册类。
_classes.registerClass("Subclass_Name","Superclass_Name");
         这里，子类和超类名都以字符串形式传进来，而不是指向它们的构造函数的指针。这个调用必须放在指定子类的构造构函数前。
第二步，在构造函数内调用defineClass()方法，传给它类名及被Clary称为原型函数的指针，该函数用于初始化对象的所有属性和方法。
如
_classes.registerClass("ClassA");
function ClassA(color){
   _classes.defineClass("ClassA",prototypeFunction);

   function prototypeFunction(){
      //...
   }
}
第三步，为该类创建init()方法。该方法负责设置该类的所有属性，它必须接受与构造函数相同的参数。作为一种规约，init()方法总是在defineClass()方法后调用。
_classes.registerClass("ClassA");
function ClassA(color){
   _classes.defineClass("ClassA",prototypeFunction);
   this.init(sColor);
   function prototypeFunction(){
     ClassA.prototype.init = function(sColor){
         this.parentMethod("init");
         this.color = sColor;
      }
   }
}
第四步，在原型函数内添加其他类的方法。
_classes.registerClass("ClassA");
function ClassA(color){
   _classes.defineClass("ClassA",prototypeFunction);
   this.init(sColor);
   function prototypeFunction(){
     ClassA.prototype.init = function(sColor){
         this.parentMethod("init");
         this.color = sColor;
      }
      ClassA.prototype.sayColor = function(){
         alert(this.color);
      }
   }
}
然后，即可以以常规方式创建ClassA的实例
var objA = new ClassA("red");
objA.sayColor();      //outputs "res"

小祝 2007-04-16 23:24 发表评论

javascript学习笔记(一)－－对象

小祝 — Mon, 16 Apr 2007 14:20:00 GMT

一、定义类或对象
1.工厂方式
创建对象car
var oCar = new Object;
oCar.color = "red";
oCar.doors = 4;
oCar.mpg = 23;
oCar.showColor = function(){
   alert(this.corlor);
};

创建多个car
function createCar(color, doors, mpg) {
    var tempcar = new Object;
    tempcar.color = color;
    tempcar.doors = doors;
    tempcar.mpg = mpg;
    tempcar.showColor = function () {
        alert(this.color)
    };
   return tempcar;
}

var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor();    //outputs "red"
car2.showColor();    //outputs "blue"
这个例子中，每次调用函数createCar()，都要创建新函数showColor()，意味着每个对象都有自己的showColor()版本，事实上，每个对象都共享了同一个函数。
有些开发者在工厂函数外定义对象的方法，然后通过属性指向该方法，从而避开这个问题。
function showColor(){
   alert(this.color);
}
function createCar(color, doors, mpg) {
    var tempcar = new Object;
    tempcar.color = color;
    tempcar.doors = doors;
    tempcar.mpg = mpg;
    tempcar.showColor = showColor;
    return tempcar;
}

var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor();    //outputs "red"
car2.showColor();    //outputs "blue"
从功能上讲，这样解决了重复创建函数对象的问题，但该函数看起来不像对象的方法。所有这些问题引发了开发者定义的构造函数的出现。

2.构造函数方法
function Car(sColor, iDoors, iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.showColor = function () {
        alert(this.color)
    };
}

Car.prototype.showColor = function () {
alert(this.color);
};

var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);

oCar1.drivers.push("Matt");

alert(oCar1.drivers);    //outputs "Mike,Sue,Matt"
alert(oCar2.drivers);    //outputs "Mike,Sue"
现在就更像创建一般对象了。所有的非函数属性都有构造函数中创建，意味着又可用构造函数的参数赋予属性默认值了。因为只创建showColor()函数的一个实例，所以没有内存浪费。

5.动态原型方法
function Car(sColor, iDoors, iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = new Array("Mike", "Sue");

if (typeof Car._initialized == "undefined") {

        Car.prototype.showColor = function () {
            alert(this.color);
        };

Car._initialized = true;
}
}

var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);

oCar1.drivers.push("Matt");

alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar2.drivers); //outputs "Mike,Sue"
动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内定义非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。

6.混合工厂方式
这种方式通常是在不能应用前一种方式时的变通方法。它的目的是创建假构造函数，只返回另一种对象的新实例。
function Car() {
    var tempcar = new Object;
    tempcar.color = "red";
    tempcar.doors = 4;
    tempcar.mpg = 23;
    tempcar.showColor = function () {
        alert(this.color)
    };
   return tempcar;
}
与经典方式不同，这种方式使用new运算符，使它看起来像真正的构造函数。

7.采用哪种方式
   如前所述，目前使用最广泛的是混合的构造函数/原型方式。些外，动态原型方法也很流行，在功能上与前者等价，可以采用这两种方式中的任何一种。

二、修改对象
1.创建新方法
可以用prototype属性为任何已有的类定义新方法，就像处理自己的类一样。
例：
Array.prototype.indexOf = function(vItem){
   for(var i=0;i      if(vItem == this[i]){
         return i;
      }
   }
   retunr -1;
}
最后，如果想给ECMAScript中的每个本地对象添加新方法，必须在Object对象的prototype属性上定义它。

2.重定义已有方法
就像能给自己的类定义新方法一样，也可重定义已有的方法。函数名只是指向函数的指针，因此可以轻易地使它指向其他函数。
如
Function.prototype.toString = function(){
   return "Function code hidden";
}
function sayHi(){
   alert("hi");
}
alert(sayHi.toString());      //outputs "Function code hidden"

小祝 2007-04-16 22:20 发表评论