• Private Members in JavaScript
• How to achieve private, public, and privileged members in JavaScript
• Private JavaScript

• Hijax
• 456 Berea Street

• JavaScript Closures for Dummies
• JavaScript Closures
• Closures and executing JavaScript on page load

• JavaScript Object-Oriented Programming Part 1
• Objectifying JavaScript
• JavaScript and Object Oriented Programming (OOP)
• Douglas Crockford Video: Advanced JavaScript

• AJAX Queue Class
• Reusing XMLHttpRequest Object in IE
• AJAX Patterns
• Managing sessions in an Ajax-enabled application

• JScript Memory Leaks
• Fixing JavaScript memory leaks for good
• Memory leak patterns in JavaScript

• Namespacing your JavaScript
• JavaScript Namespaces
• JavaScript: Put everything in a namespace

• JSON for the masses
• Show love to the object literal
• JSON is a subset of the Object Literal
• JSON

• Wikipedia Cross-site scripting entry
• XSS (Cross Site Scripting) Cheat Sheet
• JSON is not as safe as people think it is
• Google Caja

• Ajaxian
• A List Apart: Topics: Code: Scripting
• DevGuru JavaScript Reference
• Digital Web Magazine - Articles by Topic: DOM
• JavaScript Kit
• Microsoft JScript Reference on MSDN
• Mozilla Developer Center Core JavaScript Reference
• Sitepoint JavaScript & AJAX Tutorials
• Visibone JavaScript Reference
• Web Reference Core JavaScript Reference
• W3 Schools JavaScript Tutorial

• A (Re)-Introduction to JavaScript
• Douglas Crockford JavaScript
• Dustin Diaz
• Eloquent JavaScript
• Jack Slocum
• JavaScript - Table of Contents
• John Resig
• Jonathan Snook
• Kevin Yank
• QuirksMode.org

• Dean Edwards Packer
• Firebug Firefox Extension
• RegExPal
• Web Developer Toolbar Explorer Plugin
• Web Developer Toolbar Firefox Add-on

• DED|Chain
• Dojo
• Ext JS
• jQuery
• MochiKit
• Mootools
• Prototype
• Script.aculo.us
• Yahoo! UI

  计算机的应用已经从过去单纯的科学计算渗透到政务管理、商品交易、金融证券、军事指挥、航天航空、通讯导航、生物工程、医疗服务等多个领域。随着计算机技术的发展和应用范围的不断延伸，作为计算机灵魂的软件系统，其规模也在不断扩大，结构越来越复杂，代码越来越长、维护越来越困难，从过去几百行代码扩大到几万甚至几十万、几百万行代码的软件系统俯首皆是。因此，设计一个功能完善、结构优良，开发效率高，稳定性和安全性强，扩展方便，维护简单，易于复用，生命周期长，投资成本低的软件系统，一直是系统管理、设计和开发者所追求的目标之一。遗憾的是，现实生活中，被抛弃的软件系统随处可见，造成极大的投资浪费。原因之一是系统开发仓促编码，结构劣拙，功能扩展困难，稍有修改，便错误百出，无法维护，唯有弃之不用。

  软件发展的实践证明，模块化的分层设计模型是提高系统可用性和可维护性的主要途径。分层模型设计，既将整个软件系统划分为若干个相互独立的层次进行描述，层与层之间通过事先约定的接口相互通讯。某个层只负责一个或多个功能，各负其则，不越俎代庖。分层设计把一个复杂的问题分而治之，降低了复杂性，功能清晰、易于实现、修改和维护。

  分层设计可以分为面向过程、面向对象、面向组件等设计模式。面向过程的设计使用结构化的面向过程的计算机语言来编码；面向对象的设计则使用面向对象的计算机语言来实现，而面向组件的设计则既可用面向过程，也可用面向对象的语言来实现。由于面向组件的设计，系统的耦合度低、复用性强、维护容易，已经成为软件系统设计和开发的主流技术。

  组件软件技术的基本思想是：将大而复杂的软件应用分成一系列可先行实现、易于开发、理解和调整的软件单元??组件。每个组件功能确定，单独设计，分开编码，最后用组件组装应用，完成系统开发和部署。因此，以组件为基础的软件系统解决方案，开发效率高，投资少，维护成本低，复用能力强，软件升级简单。

1、组件技术的发展现状

  目前常用的组件框架模型，一类是与某一计算机操作系统密切相关，而另一类是跨计算机操作系统平台的。前者的典型代表是COM组件对象模型，以及在此基础上发展起来的ActiveX、DCOM、COM+、MTS和.NET等技术。COM组件具有二进制一级的兼容性，基本上与计算机编程语言无关，其缺点是目前只能运行在Windows 操作系统平台上，而不能在Linux 和Unix 系统中运行。COM并不只是面向对象的组件对象模型，它既可用面向过程，也可用面向对象的语言编码。但多采用的编码语言是VC ＋＋、VB和Delphi，性能要求高的场合也可用C语言来编码。COM已经广泛使用在Windows 操作系统中，浏览器、邮件收发系统，Web服务器、字处理软件中都广泛使用COM组件。跨计算机操作系统平台的组件模型其典型代表是CORBA，CORBA主要使用在Unix 类型的操作系统中，但它也可在Windows平台上运行。

  从计算机语言来讲，组件模型有以Java语言为代表的框架和以C语言为基础的框架。前者在理论上可以跨平台运行，底层平台支持是JVM 技术，而后者则与虚拟机无关，直接在操作系统中运行，因此，速度快，运行效率高。从应用系统的角度来讲，目前市场上，主要是J2EE和.NET的竞争，两者理论上没有本质的区别，都是采用虚拟机技术。但J2EE可以跨平台运行，而.NET 则基本不行。在企业级的应用系统中，以Java 技术为基础的J2EE似乎更占优势。Java和. NET技术各有特长，因此，在信息系统建设中，应该允许两种技术存在，取长补短，协同发展，最大限度地提高系统开发的性价比和稳定性。

2 、组件框架的体系结构

2.1描述组件的要素

  组件是事先定义了编程接口和功能、相互独立的软件单元。一个组件一般有组件标识符、接口、创建方法和功能等要素组成。组件标识符也就是组件的名字，在整个体系结构中必须是唯一的，它是客户程序使用组件的唯一标识。如在COM规范中，组件用一个128位的clsid，通过注册表将clsid与组件真实的物理文件名关联，实现组件的位置无关性。而J2EE框架中的组件则多使用名称服务和事先约定的特殊字符串表示。组件接口是组件与客户程序、容器交互和通讯的API。具体包括函数名称、参数和参数类型等内容。如在Java 语言中可用接口表示，在C语言中用相互有关系的一组函数表示，在C＋＋中则可用虚函数描述。组件多有组件工厂创建，组件工厂也是组件，其创建一般由组件框架提供的系统函数来生成。组件的功能定义了组件需要完成的事情。通常情况下，组件标识符、组件接口、创建方法是组件对用户程序的契约和承诺，设计好后不能轻易改变，但组件的功能可以修改，体现多态性。

2.2组件体系结构图

  总结目前常用的组件框架体系结构，组件框架的通用体系结构如图1所示。组件框架通常由容器、组件和粘合剂三部分组成。容器就是一个根据框架体系结构的API管理应用程序组件以及提供API访问的系统运行环境，容器是一个递归概念，它也是组件。组件则是遵循容器规范、实现API接口的功能部件。粘合剂主要供容器用来组装组件之间的相互关系，其多表现为一个或多个部署描述符和配置文件，流行的描述语法格式包括XML、属性文件和Windows系统中常用的段节式结构等。通过粘合剂，整个框架就能够实现组件的动态加载、相互去耦和多态性。组件框架体系结构也具有递归结构，即框架之中存在框架。

  组件框架的通用体系结构除了上述三个功能部件外，还包括要求应用程序必须实现的组件协议API、容器服务API，容器声明服务API等。后两者一般由容器提供商开发，供应用程序组件通过容器上下文环境引用。

  常见的组件体系结构J2EE、Struts、Spring、PicoContainer等均基于上述结构设计，具有非常高的开放性和可扩展性。

3 、组件框架设计和开发

3.1组件框架设计的方法

  实践中，组件框架设计应该采用分层设计模型，组件采用递归结构。每个框架不能依赖其他框架而存在，应该能够独立开发和部署。组件和组件之间，组件和框架之间只能通过API 通讯。

  将组件框架应该再细分成表现层框架、业务层框架、数据层框架、公共服务框架、基础框架、系统框架和与业务系统密切相关的业务框架等构成，除了具体的业务框架外，其他框架必须优先选择比较成熟的产品和免费框架。

  组件设计过程中要精心定义组件的创建方法、组件标识符、接口规范和组件的功能等要素。组件多采用定义了良好接口的工厂组件创建，而工厂组件则由系统函数或系统对象创建。组件标识符主要采用GUID、接口名称、其他特定的字符串等表示，它是客户程序使用组件的逻辑名，应用系统在运行过程中，由容器将其与组件的具体实现映射。接口规范多用函数和抽象类的形式表现。组件的内部结构如图2所示。有组件工厂、组件服务提供者、抽象服务等。抽象服务是实现组件接口的一个抽象类，其目的是为了简化应用程序对组件的编码。应用程序只要继承该抽象类即可满足接口规范需要，而把精力集中到核心功能的实现上。

  组件采用组件工厂、组件服务提供者、抽象服务等内部设计模式，可以极大地降低组件与使用该组件的客户程序的耦合度，客户程序只要使用组件的逻辑名，通过容器提供的名称服务得到组件接口即可利用组件提供的功能，而不必关心组件的内部具体实现，组件具有非常好的封装性。

  系统函数或系统对象、组件标识符、接口规范一旦定义则不能轻易改变，否则，就会造成整个框架体系和使用此框架的所有应用程序的修改。这里唯一需要改变的是组件的功能，它由具体的应用程序实现。

  框架设计需要解决的问题还包括容器规范、组件规范、容器提供服务和部署描述符设计、类装入方案等。部署描述符定义容器和组件之间的协议，并封装组件之间的相互关系。部署描述符要优先选择XML语言表达。

3.2设计组件框架的原则和评价标准

  当一个组件框架设计完成后，应该按照开闭原则、依赖倒转原则、接口隔离原则等对其进行评价，检查和评价整个系统的可维护性和可复用性。

  按照开闭原则，要检查设计的组件框架是否满足对扩展开发，而对修改关闭，即整个框架在扩展其功能时，应当是在不修改代码的前提下便可，换言之，源代码不修改，框架行为就可改变。要实现开闭原则，组件的抽象化是关键，实践中，检查在框架中是否容易加入“即插即用”的组件便是经验之一。

  依赖倒转原则，就是要检查系统要依赖于抽象，而不是依赖于具体的实现。即客户端编程要依赖于抽象耦合，而不是具体耦合，要针对接口编程，而不是针对实现编程。具体的讲，就是看一个组件在其逻辑名称、接口不改变的情况下，修改其对象名称、类名称以及具体实现的情况下，客户程序是否需要修改。如果不是，则该框架不符合依赖倒转原则，可扩展性和可维护性存在问题。

  通过接口隔离原则，可以检查一个组件是使用了多个专门的接口，还是使用单一的总接口进行编程。如果使用过于臃肿的接口，便存在接口污染。一个接口应当简单地只代表一个角色，而不是多个角色。如果组件涉及多个角色，那么每一个角色应当由一个特定的接口代表。也就是说，一个接口其中的函数数量应该越少越好。

  符合上述原则的框架，基本上是在高层次实现了系统的复用，也是一个易于维护的系统，才值得投入人力和物力去编码，否则，该框架的生命周期不会太长，系统开始修改之时，可能也是其终结之日。

4、组件框架的选择和应用

  选择组件框架设计模式开发信息系统已经成为当今缩短系统开发周期、提高稳定性、降低维护成本、延长生命周期的主流技术。目前，从运行环境、基础框架到专业的业务实现方面均有可资利用的成熟框架。我们在开发专业的应用系统时，无论从时间，还是资金方面考虑，都有必要充分利用现成的框架体系结构。选择框架应该综合考虑，跨平台、成熟度、稳定性和规范程度等多种因素。

（1）在容器选择方面，对于需要跨平台的企业级应用，应该优先考虑Websphere、Weblogic等支持J2EE构架的商用服务器端系统。而对于访问量低、并发用户不多的应用则可以选择Tomcat、Jboss、Jfox等开源项目作为系统运行环境，其性价比非常高。对于图形界面要求高的系统也可以选择.NET作为系统运行容器。而开发客户端应用程序首选Eclipse、Netbeans等作为系统的运行容器。Eclipse和Netbeans都是用Java语言开发的基于插件的体系结构，源码开发，成熟度较高。前者目前主要用于集成C++、Java编译器和其他开发工具，以及整合工作流、系统部署等方面，得到了IBM等大公司的支持。后者主要的应用集中在Java应用程序方面的开发。它们的可扩展性和可维护性都比较高，作为客户端应用程序的容器非常理想，应用的部署和运行比较简单，比如Eclipse只要将开发好的插件压缩封装成jar包，拷贝到系统规定的Plugins目录中便可，几乎不需要什么配置，在因特网中有许多开源的插件可供使用，应用涉及的范围很广。

（2）对于基础框架，可供选择的框架有PicoContainer、Spring和Avalon等。PicoContainer框架基于注册模式封装组件关系。而Spring框架其组件均利用Java beans实现，支持国际化、事件监听、事务管理，支持内省反射和AOP技术，易于和Mail、JNDI及数据库集成。对于Avalon框架，定义的组件接口非常简单，比如，组件创建、销毁、服务等接口，函数单一，结构清晰，充分体现了接口隔离原则，实现起来均比较容易。这些框架属开源项目，帮助文档较多，有许多人在研究和开发，它们均可脱离J2EE应用服务器运行，是开发专用业务系统比较理想的基础框架。

（3）在系统的表现层，如果系统需要单点登录、能够集成其他应用和服务、提供个性化支持，则应该选择支持Ｐortal规范的框架作为表现层的容器。此类框架如  Weblogic Portal、IBM Websphere Portal等，其特点是系统比较成熟，但结构复杂，投资成本较高，页面的美工设计不够灵活，系统集成需要比较多的编程经验和编程知识，不适合系统维护力量较低，页面设计频繁改动的应用。免费的Ｐortal框架典型的是Jetspeed，其Portal组装使用PSML语言，结构良好，运行在Turbine框架之中，Turbine将页面视图划分为页面、布局、屏幕、导航和动作等组件，并利用属性文件封装，使用Velocity模板语言，表现和业务代码分离。Jetspeed和前述商用Portal相比，缺乏好的开发工具支持，比较适合技术力量雄厚的部门使用。

表现层还可以选择的一个框架就是Struts，其在许多系统开发中得到了广泛的支持。该框架有控制器组件、视图组件和插件等组成。完全基于MVC模式设计，组件关系利用符合XML规范的配置文件封装，并提供了控制器、插件等许多扩展点，支持国际化、无编程数据验证、配置性异常处理以及多应用部署，能够和EJB、SOAP集成，其中内置了几乎所有的HTML标签，和Tiles模板框架配合使用，能够开发出高质量的应用系统。

（4）在模型层和数据层，主要是将数据的概念模型映射成设计模型，大多数框架都是将和数据库通讯的JDBC驱动程序通过二次封装，屏蔽掉不同数据库之间在SQL语言方面的差异，减少开发人员用数据库系统实现数据持久化方面的知识，并为上层模块提供比较统一的系统调用。可资选择的框架除了著名的实体EJB外，还有如Hibernate、Toplink和Torque等轻量级的持久化框架，其实现大同小异，基本都是通过XML配置文件将数据概念模型中的字段映射成Java语言中的对象属性，编程人员一般只要按照DAO设计模式，用Java语言定义业务对象BO，并完成数据映射配置文件便可，减少了通过JDBC直接使用SQL语言的复杂度。此类框架的选择，一般应考虑支持目前的主流数据库系统，如Oracle、SQL Server等。对于小型的应用还要考虑支持MYSQL、PostgreSQL等免费的数据库管理系统。这样更换数据库时，只要修改数据映射配置文件、数据库驱动程序和数据源配置便可，整个系统框架不用修改，提高了系统的稳定性和可维护性。

（5）在系统日志管理方面选择Log4j、XML解析框架选择Degester，工作流引擎选择OFBIZ、SHARK、OBE或JBPM等，内容管理选择基于管道技术的COCOON这些开源框架，均会缩短编码时间，提高系统的开发效率。

总之，在信息系统的开发中，重点应该放在规划业务系统，开发业务型框架，定义和实现信息系统本身的业务逻辑上，而对于所有业务系统通用的功能和逻辑应优先选择现有框架的有效组合实现，以期达到事半功倍的效果。

参考文献

 [1] 阎宏编著，Java与模式，电子工业出版社，2004

[2] 潘爱民著，COM原理和应用，清华大学出版社， 1999年

[3] 孙卫琴编著，精通struts－基于MVC的Java Web设计和开发，电子工业出版社，2004

[4] [美]，Subrahmanyam  Allamaraju等著，马树奇译，J2EE编程指南（1.3版），电子工业出版社，2002

[5] http://www.apache.org网站

[6] http://www.sun.com网站

[7] http://www.ibm.com网站

[8] http://www.microsoft.com网站

在一个大型项目中，尤其是基于J2EE的项目，一个好的框架设计极其重要，它是项目成败的关键。而要设计好框架，首先必须做的工作是深入理解需求，从中进行业务逻辑的抽象。

框架是一种特殊的软件，它在软件开发中有很高的重用性，同时它也需要高超的设计技巧。软件组织，使用框架来积累知识，对推动软件开发是一种有效的方式，那么，什么是框架呢？在设计模式中，Gamma等人为框架给出了一个定义: “框架就是一组协同工作的类，它们为特定类型的软件构筑了一个可重用的设计。”因此，框架是针对特定的问题领域的。

框架包括了一组抽象概念，这些抽象概念来源于问题领域。例如，struts是基于MVC模式进行设计的，所以它必须为model、view、control建立抽象概念。框架使得这些抽象概念相互协作，并提供了一种扩展的形式，以实现重用。这是框架的具体工作。框架在抽象概念上进行工作，定义抽象概念之间的协作方式。框架和普通软件或是类库的区别就在于，用户通过扩展框架来重用该框架。这些扩展点的设计称为框架设计的核心。例如，在struts1.0中，采用的是类继承的扩展方式(对Action进行扩展)。

框架对软件开发作用重大

知识积累。框架的核心价值是对知识的积累。软件开发是一项知识性的活动。但是知识存在于人的大脑中，是最难进行积累的。而在软件开发中，代码是最确定的知识，人和机器通过浏览代码都能够了解代码所表达的意思，而且不会出现不同的理解。所以，从代码出发进行知识的积累是最佳的办法。框架就是这种思路的产出物。框架包含了大量的代码，这些代码是对某个特定问题领域中抽象概念及这些抽象概念之间关系的描述。所以，框架能够胜任知识积累的工作。虽然代码是框架的核心，但是光有代码的框架是很难为人所理解的。代码的层次太低，开发人员从代码的角度来完全地理解框架是很困难的。所以，必须要有层次高于代码的工件来协助理解。这些工件可以是设计文档、领域模型、UML图、JavaDoc等。它们的目的都是为了帮助框架的开发人员和使用人员顺利地理解框架。

保护资产。知识积累本身就是一项对资产的保护工作。而另一项很重要的保护工作就是软件组织(尤其是企业)需要保证对知识的学习和改进是经过合法授权的。例如，知识的非法外流是任何组织都不希望看到的。将知识积累为框架的形式有助于缓解这种情况。框架可以是以源码形式发布的，也可以是以库形式发布的，为不同的框架用户选择不同的发布形式，可以起到权限控制的作用。

鼓励重用。框架之所以称为框架，是因为它可以重用。在软件组织中形成以框架为核心的开发方式，在开发中使用框架，并在开发完成后改进框架。在这个反覆的过程中，重用的工作就已经开展起来了。重用其实并没有那么困难，其实就是将通用的行为抽取出来。

优化架构。所谓软件架构，亦即体系结构，包括组件元素、元素互助合作模式、基础要求与限制。这说明架构的设计就是将各组件元素以某些理想的合作模式组织起来，以达成系统的基本功能和限制。框架其实就是在特定领域基于体系结构的可重用的设计，即框架是体系结构在特定领域下的应用。框架代表了一种优秀的软件架构。框架定义了扩展方式，从而规范了框架的使用行为。这使得软件能够保持整体架构的稳定性和一致性。

框架好坏关系J2EE项目成败

框架技术通过重用提高了软件的生产效率，一个软件系统由两大部分组成: 针对本应用的新设计和可重用的软件组件或框架。后者所占比例越大，那需要实现的新设计或实现工作量就会越小，生产效率越高、成本越低。J2EE项目成败主要取决于架构设计好坏以及合适框架的选择，而不是体现在对技术的具体应用上，常常有人将一个J2EE项目的失败归咎于后者，这可能是最大的误导。

J2EE项目是通过框架、模式的设计运用达到控制软件质量的目的的。虽然这是很多喜欢自由编程的程序员所不喜欢的，但是它带来了稳定的软件质量和可重用的组件，为规模生产创造了条件。不仅如此，它还降低了对开发框架以外其他开发人员的技术要求，使大多数开发人员无需很高的技术，就能在已有的框架下进行开发，而且能大大缩短开发周期。根据自己项目领域特点，在J2EE框架下设计自己领域的应用框架，不仅可以提高在该领域软件开发的效率，而且可以节约开发成本和维护成本。

框架的特征

● 框架包括大量类或组件，每一种类或组件都提供了某种概念的抽象;

● 框架定义了这些抽象如何协作解决问题;

● 框架组件可以重用;

● 框架在更高层次上组织模型。

如何进行有效的框架设计

一个好的框架设计是有一定的准则可供遵循的。

设计抽象层次。在框架的定义中，抽象体是至关重要的。抽象体是框架的目标，没有目标的框架决不是一个好框架，要么是一个类库，要么是一种编程语言。光有抽象体还是没有办法工作，还需要定义出抽象体的行为，有了行为之后，还需要规范、穷尽这些行为。

分析抽象行为的通用部分和非通用部分。在抽象体的行为中，有些动作是通用的，有些是特殊的。前者就是框架要实现的部分。而后者则作为扩展留给用户。将抽象层次提取为框架，并设计扩展点。有了抽象体、抽象体的通用行为之后，就可以设计扩展点了。最简单的扩展点是采用方法调用的方式，复杂的可能通过设计模式或是配置文件等方式。扩展点设计优劣的评价标准是使用起来是否方便，这里的使用包括应用、调试、测试等。

适当的使用设计模式。设计模式代表了先进的软件设计思路。在框架中适当地使用设计模式有助于改进框架的结构。在框架设计中不宜采用过多的设计模式，这会使得框架理解起来困难。

有效利用、隔离第三方技术。当前的软件开发向着协作的方向发展。在这种情况下，大量的第三方软件出现了。软件业的分工将会给软件业带来繁荣，但是对于软件组织来说，就需要考虑第三方软件的成本、生命力、本组织系统对其的依赖程度等问题。这部分工作应该交给框架。让框架来负责把核心应用和第三方技术隔离开来。因此，设计一个抽象的层次，把这些技术和核心应用隔离起来。

目前，许多应用系统都采用了基于Web的B/S结构应用，同时在应用层中包含了数据库、安全、人性化、交易化、分布式等等大量的软件技术，这些技术纷繁而复杂，不是一个人或者几个人可以单独完成的，而且其规模产生了数以万计的代码量和成千上万的各种资源。这些不仅要聚合在一起，同时，它们之间还要相互通信和访问，共同完成业务逻辑所要求的各种处理过程。因此，拥有能用来规范所有程序调用、访问、错误等常规处理的框架非常重要，同时框架还要保证程序的易读性、可交互性、可维护性等等这些保证质量的前提要求。所以框架不仅起到规范的作用，它还是出发点，是所有程序的起点和终点。

为此，框架必须综合现在先进的技术、设计模式、开发理念，用被广泛接受和认可的方法论产生的一套框架性核心代码，包括从前端Web交换到业务层数据交互、数据持久化和存储到事务，安全机制和错误处理等这些在开发中涉及的逻辑和方法。

1，不要认为Struts已经过时了，也不要盲目的去追随JSF以及更新的MVC框架，在目前Struts仍旧是最为优秀的MVC框架，尤其是后来与Spring、Hibernate（或者Ibatis）的结合，使得Struts的应用得到了进一步的发展，也许你认为Webwork2、SpringMVC或者JSF更为优秀和实用，那么也没有关系，其实只要对你或你的公司适用，那么就可以了。

2，你知道Javascript中的typeof和instanceof操作吗，如果不知道，劝你还是看看这方面的知识吧，typeof返回的是对象的类型，例如string、number、object等等，而instanceof判断的是一个对象是否是某个类的实例，例如：
  var arr=new Array();
  var type=typeof(arr);//返回object
  var flag=arr instanceof Array;//返回true
  var flag2=arr instanceof Object;//返回true;
  在实际使用过程中，你会发现instanceof是更为强大的，当然了许多时候typeof用起来很方便，但是对于复杂的场合typeof就不太适用了，尤其是对于自定义对象以及对象之间有着复杂的继承关系时，使用instanceof可以方便的对这些进行判断。

3，虽然你可能知道javascript中typeof的用法，但是如果你不能做对下面的题，说明你对typeof的理解还是不够的，例如：
  var a;
  var rs=typeof(a);//请问rs的值是什么？
  （A）object （B）variable （C）undefined (D) string （E）null （F）以上答案全不正确
  如果你选择A还算对JS有一些了解，如果选择B则基本上是乱猜的，如果选择D什么也说明不了，如果选择E则说明你对于Java和Javascript有些东西还没有分清楚，选择F也是不正确的。答案是C，记住在Javascript之中，如果一个变量没有初始化，那么该变量的类型为undefined。

4，也许你一直在抱怨Javascript之中没有列表、哈西表以及堆栈、队列等数据结构，如果真的在抱怨，那么也不是你的错，毕竟包括我自己在内，我们对JS的了解太少了，其实在JS之中，数组对象自身完全支持上面的那些数据结构，例如：
  var list=new Array();//列表
  list[0]="a";
  list[100]="b";
  var map=new Array();//哈西表
  map["001"]="a";
  map["username"]="zhangsan";
  var stack=new Array();//堆栈，即后进先出
  stack.push("a");
  stack.pop();
  var queue=new Array();//队列，即先进先出
  queue.unshift("a");
  queue.shift();
  可见JS是非常强大的，关键是我们知道的太少了，关于Javascript对于数组的操作，你也可以参考《Javascript对数组的操作》。

5，作为一个web开发人员，我们不能指望美工在完成漂亮的效果图之后，还要为我们将图切分，最后生成html文件后再给我们，然后我们对这些html文件，再修改转换为jsp、asp或者php文件。我一直认为效果图的切分应该或者最好由我们程序员自己来做，因为美工做的效果图实际上是要应用到我们的产品或者项目中的，而具体的产品和项目，对效果图中哪些部分是需要输入文字的，哪些地方是需要背景的，哪些地方是需要可以自动伸缩的，而哪些地方又是必须保证大小的，是有很严格的要求的，尤其是我们的产品或项目中如果使用了类似sitemesh等的模板技术，那么切图的工作就更要由我们自己来做了。这样并不是说美工不需要懂得html、css等技术，也不是说美工切出的图，会不符合我们的要求，我们知道，一张效果图，可以有n种切法，但是要能够满足实际的需求，往往只有一种最合适的切法，而这个切法一般来说美工是不太清楚的，开发人员也是不清楚的，只有既是开发人员，又懂得美工切图的人，才能够找到最为合适的切分方法，而这样的人才是非常奇缺的！

6，不要过于痴迷Ajax技术，也不要过于追捧web2.0这个时髦的词汇，并不是说什么东西粘上ajax或者web2.0，就能够火起来或者对我们的实际发展有利的，如果你是做公网网站的，那么要注意，不合适的ajax使用，会使得网站被搜索引擎收录的信息大幅度减少，但是ajax或者Flex2等技术对于用户体验而言，还是相当不错的，因此是否使用ajax等技术，一要看对你们的解决方案宣传是否有作用，另外一点就是要看，它是否真正的改进了我们的应用。

7，对于ajax的post提交方式，可能你有些问题要问，例如post的方式是不是只要在open时指定method就可以了，为什么我将大数据放到url后面，而没有被完全传递过去，为什么我后台使用类似jsp中的request.getParamter方法接收不到数据，我们通过一个例子看一下ajax发送/接受大数据的方式：

  1）send.jsp:（我举的例子使用的是Javascript开源框架JsJava的ajax类库，该类库对IE和Firefox等的XMLHttpRequest等对象进行了易用性的封装，不像prototype.js默认对传递的数据进行urlencode编码）

 var ajaxRequest=new AjaxRequest();
 ajaxRequest.setRequestMethod("post");
 ajaxRequest.setRequestURL("ajaxresponse.jsp");
 ajaxRequest.setAsync(true);
 ajaxRequest.setMethodOnSuccess(onSuccess,[ajaxRequest]);
 ajaxRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
 ajaxRequest.send("content=这是一篇几千字的文档...在此省略");

  要注意设置发送方式为post，设置头信息的内容类型为application/x-www-form-urlencoded，charset是否设置要看内容的编码情况，另外大数据就放到send之中，记住大数据不是放在url的参数之中的。

  2）receive.jsp

    InputStream stream=request.getInputStream();
    InputStreamReader isr=new InputStreamReader(stream);
    BufferedReader br=new BufferedReader(isr);
    String str=br.readLine();   
    System.out.println(str);
    br.close();

  要知道，对于ajax post方式提交的数据，在服务器端如果是jsp不是简单使用getParameter就能取得到的，需要从输入流中去取，这和附件上传有些类似的地方。当然要注意编码和解码的问题。

8，我们在界面中经常会通过setTimeout方法来实现定时或者异步操作，例如：
  setTimeout(myfunc,2000);//两秒后执行myfunc函数
  但是要注意setTimeout方法并不能阻止后面js代码逻辑的执行，例如：
  <script>
    var a =8;
    setTimeout(myfunc,3000);
    document.write("wait...");
  </script>
  上面的代码中，document.write("wait...");逻辑并不会等到3秒后才执行，而是立即执行的，其实这一点可能大部分开发人员都知道，但是如果不注意，就很容易犯下面的错误，如下面代码所示：
  var ajax2HasExecuted=false;
  var ajaxRequest1;
  function ajax1Func(){
    if(!ajax2HasExecuted){
      setTimeout(ajax1Func,200);
   }
   var text=ajaxRequest1.getResponseText();
   ...
  }
  var ajaxRequest2;
  function ajax2Func(){
   var text=ajaxRequest2.getResponseText();
   ...
   ajax2HasExecuted=true;
  }
  上面的代码是一个页面中同时发送了两个ajax异步请求，分别有两个对应的接收操作，而业务逻辑要求，这两个操作是要有先后顺序的，其中第一个接收操作，需要等待第二个接收操作完成之后，才能进行处理，于是第一个操作中就采用setTimeout的方式，本意是在执行第一个操作的开始的地方，先判断第二个操作是否已经执行完毕，如果没有执行完毕，则等待200毫秒后，重新执行第二个操作，然后由于setTimeout并不能组织后续的逻辑继续执行，所以实际上不管第二个操作是否完成，第一个操作都会一直往下执行下去，从而导致业务上的错误。解决方法要么是在if后面加上else，或者在setTimeout之后直接return，例如：
  if(!ajax2HasExecuted){
      setTimeout(ajax1Func,200);
      return;
   }

9，window.open和window.showModalDialog方法相信你已经用到过许多次了，但是总是出现这样或那样的问题，问题主要是以下几个方面：
1）showModalDialog这个函数名经常被写错，例如经常被写成showModelDialog，使得不能执行打开窗口的操作。
2）控制打开窗口的属性，例如尺寸、滚动条、菜单、状态栏等，是我们经常会碰到的情况，但是我们经常会将这两种打开方式的属性名称以及属性之间的分隔符混用，使得属性执行不正确，例如我举下面的例子，要求弹出一个宽200高300的窗口，你看哪些方式是对的？
（A）  window.open("about:blank","","width=200,height=300");
（B）  window.open("about:blank","","width:200,height:300");
（C）  window.open("about:blank","","width=200;height=300");
（D）  window.open("about:blank","","width:200;height:300");
（E） window.showModalDialog("about:blank","","dialogWidth:200px;dialogHeight:300px");
（F） window.showModalDialog("about:blank","","dialogWidth=200px;dialogHeight=300px");
（G） window.showModalDialog("about:blank","","dialogWidth:200;dialogHeight:300");
再多的选项就不写了，正确答案是A和E，通过上面的问题我们需要记住一下几点：

• window.open控制属性之间的分隔符是逗号“,”，属性和值之间用等于号"="连接
• window.showModalDialog控制属性之间的分隔符是分号“;”，属性之间的用冒号“:”连接
• window.open控制属性中长度和宽度尺寸可以直接写数字，也可以加上度量，例如px，但是对于window.showModalDialog的长度和宽度则必须带上px，否则尺寸无效，这一点是很重要的。

10，对于数据库中的varchar型字段，是有长度限制的，例如oracle10g中varchar2字段的最大长度为4000字符,在mysql中varchar最长为255字符，要注意这里面的限制值是单字节字符值，而汉字属于双字节字符，因此对于汉字存储而言，varchar2字段最多可以存储2000个汉字，由此引申出来的一个问题，就是web开发过程中的表单提交验证问题，因为对于中国用户而言，输入的内容有可能是汉字和英文字符的组合，因此判断输入字符串的长度需要注意，Javascript中判断一个字符串的长度的方法为：
  var str="abcdef";
  var length=str.length;
但是字符串的这个属性，计算的是独立字符的长度，例如一个中文字符按长度1计算，因此如下：
  var str="你好";
  var length=str.length;
其长度的值为2，而不是4，那么如何计算含有汉字或者说是双字节字符的真实长度呢？通过搜索可以很快找到方法，就是先将双子节字符替换为两个单字节字符，然后计算替换后的字符的长度，当然了JsJava中提供了对于双字节字符串真实长度的计算支持，你可以查看其中的StringUtils类。

11，如果你不能默写出常用颜色的英文表示值和16进制表示值，那么说明你的HTML基本功还是需要练的，例如白色是white，十六进制是FFFFFF，红色是red，十六进制是FF0000，蓝色是blue，十六进制是0000FF，紫色是purple，橙色是orange，网页中常用的灰色一般都是EEEEE，或者再浅一些EFEFEF，当然说这些并不是让你去背大量的颜色和十六进制值，但掌握一些常用的，还是很有必要的。

12，Javascript支持多维数组，但是没有构造函数可以直接生成多维数组，例如一维数组可以通过Array生成，例如：
  var arr=new Array(12);
生成多维数组，虽然没有构造函数支持，但是可以通过另外一种方式实现，例如实现一个12x5的二维数组：
  var arr=new Array(12);
  for(var i=0;i<arr.length;i++){
    arr[i]=new Array(5);
  }
另外，你可以直接使用JsJava的标准类MultiDimensionArrayUtils，支持生成二维和三维数组。

13，对于img标签，我们知道它有一个align属性，这个align是控制该图片与临近文本的位置关系，按照MSDN的说法，该属性的默认值是left，但是从实际的显示效果来看，好像并非如此，我们可以一起来比较一下不写align属性和将align赋值为left的情况，如果默认就是left，那么不写align和将align赋值left，其效果应该是一样的，那我们来一下：
<img src="http://jsjava.sourceforge.net/images/logo.gif">JsJava是最优秀的Javascript类库解决方案和界面应用开发支撑框架！
效果如下：

再看加入align=left的情况：
<img src=http://jsjava.sourceforge.net/images/logo.gif" _fcksavedurl="http://jsjava.sourceforge.net/images/logo.gif"" _fcksavedurl="http://jsjava.sourceforge.net/images/logo.gif"" _fcksavedurl="http://jsjava.sourceforge.net/images/logo.gif"" _fcksavedurl="http://jsjava.sourceforge.net/images/logo.gif"" align="left">JsJava是最优秀的Javascript类库解决方案和界面应用开发支撑框架！
效果图如下：

从实际效果来看，img的默认align并非是left，好像应该是bottom，而且上面的情况在IE6.0和Firefox2.0上都试验过，看来MSDN的说法是不太可信的，或者是自己理解错了？你可以看一下MSDN中的描述：http://msdn2.microsoft.com/en-us/library/ms533066.aspx

14，在界面中添加事件的方式主要有如下几种，例如当页面加载之后，执行函数myfunc，几种定义方式如下：
1）在<body/>标签中加入onload事件，即：
<body onload="myfunc()"...>
2）在任何一个可以执行Javascript的地方定义window.onload，即：
window.onload=myfunc;
3）在<script/>标签中定义，即：
<script for=window event=onload>
  myfunc();
</script>
4）将事件加入到事件队列中，即：
IE中 window.attachEvent("onload",myfunc)
Firefox中 window.addEventListener("load",myfunc,false)
建议大家使用第四种方式，因为只有第四种方式，可以避免将其它的同类事件覆盖，第四种方式是将该事件加入到同类的事件的队列之中，不会覆盖其它的同类事件，这在web开发过程种，是需要特别注意的，尤其我们自己定义一些界面框架或者组建的时候，经常需要定义onload事件，这个时候最好是使用第四种方式，因为引用界面框架和组建的用户，可能在页面上也想使用onload逻辑，当然用户自己使用第四种方式也不会有问题，但是做为一个负责任的界面高手，是不应该这样想得，我们应该严于律己，而宽以待人。

15，并不只是body（或者说window）有onload事件，<iframe/>中也可以定义onload事件，还有<img/>也可以定义onload事件，例如当图片加载完毕后，在window的状态栏种显示加载成功的字样：
<img src=http://jsjava.sourceforge.net/images/logo.gif" onload="window.status='加载完毕！'">
当然了对于img，你最好深入研究一下其各个事件和属性的用法，你会发现原来不知道的东西还有那么多，当然肯定有不少开发人员，已经对这一点有所研究了，但是大多数开发人员还是缺乏对这方面知识的了解。

16，如何在HTML种加入一段保留格式化的文本，相信你会想到<pre></pre>标签，例如：
<pre>
  这是一段格式化文本，
里面的文字直接将格式输出
</pre>
显示结果为：
  这是一段格式化文本，
里面的文字直接将格式输出

对于一般情况而言，pre标签就够用了，但是pre标签的不足之处，在于它不能将其中的html标签也原样输出，而是进行了解析，例如：
<pre>
  这是一段格式化文本，<font color="red">里面的文字</font>直接将<br>格式输出
</pre>
显示结果为：
  这是一段格式化文本，里面的文字直接将
格式输出

那么如何才能将含有HTML的内容也原样输出呢？实际上在HTML规范种有<xmp/>标签，可以实现这种效果，例如：
<xmp>
  这是一段格式化文本，<font color="red">里面的文字</font>直接将<br>格式输出
</xmp>
显示结果为：
  这是一段格式化文本，<font color="red">里面的文字</font>直接将<br>格式输出

17，如何获取某个对象区域的尺寸以及坐标，是我们界面开发过程种经常会遇到的一个问题，一般我们都采用getBoundingClientRect方法来获取对象的区域，进而得到该区域的尺寸和坐标，但是该方法只能在IE中使用，当然Firefox也有类似的方法，相信大多数开发人员不知道，该方法就是getBoxObjectFor，为了不想为跨浏览器而操心，你可以直接下载JsJava，使用其中的DocumentUtils类的getElementRectangle静态方法，例如：
<script src="jsjava.js"></script>
<script>
  var elemObj=document.getElementById("div1");//div1是一个div的id
  var rect=DocumentUtils.getElementRectangle(elemObj);//返回的rect是JsJava中的Rectangle对象
  var x=rect.getX();
  var y=rect.getY();
  var width=rect.getWidth();
  var height=rect.getHeight();
</script>
JsJava的类和方法都是经过IE和Firefox测试的，使用起来很方便。

18，在界面中对象的位置的计算与理解是比较麻烦的一件事情，例如clientHeight、clientTop、scrollHeight、scrollTop、offsetHeight、offsetTop，这些该怎么区分，又分别代表什么意思，对位置属性的深入理解，非常有助于对HTML界面布局本质的理解，是成为高手的必由之路，下面就简单介绍一下：
1）clientHeight，代表对象区域的屏幕高度，不包含区域的border尺寸，但包含padding的尺寸
2）clientTop，对象区域offsetHeight与clientHeight的差的一半
3）scrollHeight，代表对象区域内容的底部距区域最上边的距离
4）scrollTop，代表对象区域滚动部分的高度，即区域的最上边距离该区域可见部分的最上边的距离
5）offsetHeight，代表对象区域的屏幕高度，包含border和padding尺寸
6）offsetTop，代表对象区域距离上一个对象高度
上面的解释如果没有实际的经验，多少会有些迷糊，没有关系，我给你一个示意图：

因此，scrollHeight并非总是大于或等于clientHeight，实际上确实有一些开发人员认为一个区域没有滚动时scrollHeight和clientHeight相等，有滚动时scrollHeight＝clientHeight+scrollTop，这种认识是不对的或者说是不准确的。
上面的图的html源码为：
<script>
  function pos(){
    debug(test1.clientHeight);
    debug(test1.clientTop);
    debug(test1.scrollHeight);
    debug(test1.scrollTop);
    debug(test1.offsetHeight);
    debug(test1.offsetTop);
    debug("--------------");
    debug(test2.clientHeight);
    debug(test2.clientTop);
    debug(test2.scrollHeight);
    debug(test2.scrollTop);
    debug(test2.offsetHeight);
    debug(test2.offsetTop);
    debug("--------------");
  }
  function debug(str){
    info.value+=str+"\n";
  }
</script>
<body onclick="pos()">
  <div id="test1" style="padding:5;border-width:15;border-color:black;border-

style:solid;background-color:red;height:100;width:200">区域1，高100</div>
  <span id="test2" style="background-color:blue;height:50;width:200">区域2，高50</span>
  <div id="test4" style="height:100;width:200;background-color:green">区域4，高100</div>
  <textarea id="info" cols="50" rows="20"></textarea>
<body>
显示结果为：
70
15
28
0
100
15
--------------
50
0
18
0
50
115
--------------

19，网上许多人都问，如何将一个RGB颜色转换为HTML中的十六进制颜色，我看到了一些网友的实现，例如定义一个长度为256的数组，并按照十六进制的规律将其全部初始化，还有的利用了HTML标签的一些特点，不过有一定的局限性，其实我们只要理解了RGB颜色的基本知识，转换起来是很方便的，RGB分别代表红（Red）、绿（Green）、蓝（Blue）三种基色，其中每一种基色从浅到深又可以定义256色，这样RGB总共可以表示256x256x256种颜色，而对于十六进制颜色来说，其实就是用十六进制数字来表示RGB，例如FFFFFF代表rgb(256,256,256)，换算起来也很简单，就是十进制与十六进制之间的表示方法的转换，例如对于RGB颜色rgb(132,216,12)，用十六进制颜色表示的计算方式为：
132转换为十六进制数字为84
216转换为十六进制数字为D8
12转换为十六进制数字为0C
因此rgb(132,216,12)的十六进制颜色就是84D80C，我们可以看一下两者的效果：
<div style="background-color:rgb(132,216,12);width:50;height:50"></div>
<br>
<div style="background-color:#84D80C;width:50;height:50"></div>
显示为：

那么Javascript之中是否提供了十进制数与十六进制数的转换呢，Javascript没有提供内置的函数来进行这种转换，不过你可以下载JsJava，使用其中Integer类的静态方法：toHexString方法，例如
<script src="jsjava.js"></script>
<script>
  var hex=Integer.toHexString(253);
  document.write("<br>"+hex);//显示为FD
</script>
或者你直接使用JsJava种的Color对象：
var color=new Color(132,216,12);
var hex=color.toHexValue();//hex的值为84d80c

20，web开发过程中，经常会遇到原页面与弹出页面之间进行交互的问题，如果只是简单的变量传递，还是不难的，而我们经常遇到的一个实际场景是：例如有一个用户列表页面，点击“新建”按钮，弹出一个创建用户的页面，填写完信息后要提交表单并关闭窗口，同时列表页面中要列出新建的用户，这个时候我们一些开发人员喜欢使用的方式为：
userForm.submit();
opener.location.reload();//或者有些开发人员喜欢用opener.location=列表页面的请求url
window.close();
上面的代码有一个很明显的问题，就是如果表单提交给后台，后台还在处理，而此时原页面已经执行了重载，那么等新用户在后台存储后了，也不会反映到列表页面中了，当然刷新一个就有了，但是就达不到我们所要的效果了。下面给你介绍一种比较稳妥的方式（ajax方式就不介绍了）：
先让表单提交，提交后还是回到弹出的那个页面，或者一个其它的页面，然后在该页面中做判断，如果后台信息处理成功，那么就执行原页面的重载，然后关闭窗口。
当然有些开发人员说，前面的那种方式，一直在项目中使用没有发现什么问题，那我告诉你，那是因为你比较幸运，后台处理速度很快，列表重载的时候，后台已经处理完了，但是一旦后台处理慢了，客户就该找麻烦了。

21，界面问题是当前web开发领域（不要认为只是asp、jsp和或者php等的开发，大的说可以包括ASP.NET以及J2EE等）最为棘手的问题之一，而且大部分开发人员，不懂得该如何去解决界面问题，而且经常会遇到一些不可思议的问题。其实我告诉你，界面问题的确有一些是非常奇怪的，但是不要因为这样，就不去深究问题的原因所在，我在这些年的开发中，遇到了不少的离奇的界面问题，包括自己碰到的和别人让我去解决的，不过我发现，在这些离奇的问题背后，体现的却是我们大部分开发人员，在界面能力和素养方面的一些问题，例如有些人就是太粗心，而有些人则是缺乏界面基础知识等等。成为界面高手不是目的，培养解决界面问题的能力和素养才是最关键的。

22，在连接标签中加入onclick操作是很常用的一种方式，例如：
<a href="#" onclick="window.open('yoururl')">人员管理</a>
一般情况，这种方式是没有问题，但是如果页面内容比较长，出现了上下滚动条的时候，这种方式就会出一些问题，主要是由于href的#造成的，我们知道锚的作用就是让页面定位并移动到锚处，上面的代码开发人员的意图主要是想点击的时候不要执行链接href，所以写一个#，但是#对于滚动的页面，会在执行onclick的同时，页面出现移动定位行为，这样的用户体验是很不好，解决方式有如下几种：
<a href="javascript:void 0" onclick="window.open('yoururl')">人员管理</a>
<a href="javascript:return" onclick="window.open('yoururl')">人员管理</a>
建议使用void 0方式，因为return方式，有时会影响click事件的传播，尤其是return false的时候。

23，在Window XP系统中，我们经常奇怪为什么我们使用的Javascript控制窗口尺寸和位置的一些操作，而IE竟然没有全部支持呢，例如下面的代码：
<script>
  window.open("about:blank","","width=10000,height=15000");
</script>
按道理应该弹出一个10000x15000的大窗口，然后实际上IE给我们弹出的不过是一个和浏览器尺寸大小一致的窗口，为什么会这样呢？其实我们理解微软，如果不这样限制，系统可能会因为大量的这种代码而最终崩溃，当然微软的IE也提供了配置入口，配置是否进行限制，具体入口为：

对一般站点类说，默认都是禁用的，只要打开就可以了。

24，我们页面中经常会以post方式提交表单数据，提交之后，如果我们刷新页面，IE中一般都会提示如下图所示的信息：

如果避免这种提示出现，一种是编程上去解决，即表单提交后，不要从其它窗口对该窗口继续执行location的reload方法等等，最好是使用location的href属性或者assign、replace等方法），在IE的高级选项中，也有一个条目可以设置重定向表单提交时是否给出提示信息，但是设置了之后，没有什么效果，因此也就不过多介绍了。

25，现在很流行div+css方式的布局，的确这样做界面框架的灵活性大为增加，可以说什么布局都能出的来，而且目前的ajax方式的轻量级portal框架基本上都采用的是div+css的布局方式，但是也不要过度的使用，或者什么场合下都使用，例如对于一个中大型的项目而言，要考虑的不仅仅是布局这样的事情，还要考虑界面框架的许多东西，在这种情况下，还是使用模板的方式比较好，事实上div+css是一种布局，而模板是一种“框架”，两者可以结合使用，至于能结合到什么程度，就看你的实际本领了。

26，做为一个项目经理、产品经理或者是技术总监，你应该要重视界面方面的问题了，想想吧我们现在的开发人员，大都能很快的完成后台逻辑的开发，但是到了界面展现却是捉襟见肘，界面效果和易用性做的都不到位，界面方面都调整好了，需要的时间往往并不比后台逻辑开发用的时间少多少，相信你见到过吧，为了调试一个界面中的奇怪的问题，往往会用掉一个人一两天的时间，如果再不重视界面技术的学习和素养的培养，我们的路还能走多远。

  又七七八八的为大家总结了一下我在web开发尤其是界面开发上的一些经验，这些都是摸爬滚打出来的，可以算作是经验，但不一定就特别的正确，许多东西还需要你自己去实践、检验和再总结，如果我写的这些东西，对你而言哪怕只是有一点的用处，我都是很欣慰的，另外一点我需要说的，就是我们应该逐步走出大师崇拜的阴影，不要再津津乐道于敏捷开发、极限编程等等，面对那些国外的大师，我们更为重要的是学习他们身上的精神和品质，而不是做一个忠实的传道士，对于这些精神和品质，我们中华民族实际上很早就有了，只是到现在已经少的可怜的，但并不是说我们就没有希望了，看看当今科学界和各个行业的民族精英们，看看他们骨子里面的那种精神，是很值得我们崇敬和学习的。

1，document.getElementById方法只能获取到一个对象，即使有多个同名的对象，也只取第一个具有该名称的对象，例如在一个form（名称为myform）中，有三个id="mycheckbox"的复选框，那么使用document.getElementById("mycheckbox")，返回的是第一个checkbox对象，而不是返回一个数组，如果使用document.myform.mycheckbox则返回一个数组。

2，使用showModalDialog打开一个页面，则在这个页面中，对于任何链接和任何表单提交，都会在新的窗口中执行，即使你在链接或form中指定了target="_self"也是没有用的。例如使用showModalDialog打开一个test.html，在该页面有一段代码
<a href="test2.html" target="_seft">打开</a>
如果点击该链接，那么将会在新窗口中打开test2.html，至少在ie中是这样的，那么是不是就没有办法解决了呢？不是的，我们可以通过在弹出的页面的head中加入下面的代码来解决这个问题：
<head>
  <base target="_self">
</head>

3，在一个页面含有某个iframe，其id="myframe" name="myframe"，此时使用document.getElementById("myframe")取到的是iframe标签对象，通过该对象可以获取iframe的各个属性，例如src、frameborder、style等等，但是不能获取到iframe所包含的子页面的各个对象。如果使用document.frames("myframe")取到的是iframe组件对象，通过该对象可以获取到iframe所包含的页面的子页面的各个对象，例如子页面的window对象，但是不能获得iframe标签得各个属性，例如上面说到的src等等。请参看如下类似代码：
1.html
<script>
  function check(){
    var obj1=document.getElementById("myframe");
    alert(obj1.src);
    //alert(obj1.window.document.myform.username.value);//Error
    var obj2=document.frames("myframe");
    alert(obj2.window.document.myform.username.value);
    //alert(obj2.src);//Error
  }
</script>
<body onload="check()">
  <iframe id="myframe" name="myframe" src="2.html" frameborder="3" style="width:300;height:200;border-width:1;border-color:red;border-style:solid"></iframe>
</body>
2.html
<body>
  <form name="myform">
    用户名：<input type="text" name="username" value="test" />
  </form>
</body>

4，在table中，如果在table中加入border="1" bordercolor="red"，那么table中所有单元格都会加上厚度为1的红色边框，但是如果在table中加入css style="border-width:1;border-color:red;border-style:solid" 那么只会在整个table的最外面加上厚度为1的红色边框，分别如下图所示：

当然第一个出现了双边框，这是因为没有设置cellspacing的缘故，只要在table中设计cellspacing="0"，那么就变为单边框了。

5，许多时候我们需要在页面加载时能够通过javascript去动态操作html中的一些对象，对于这些操作我们最好是在body中定义onload操作，然后在该操作中去完成这些任务，尽量避免在html中嵌入script执行代码，因为对于比较大的页面，当这些脚本执行的时候，页面往往还没有加载完毕，因此许多页面对象还没有被生成，此时动态去改变很可能会报异常。

6，有时候我们需要在iframe子页面中调用父页面的javascript函数，例如在父窗口中定义了一个函数如下：
<html>
  <script>
    function loadImage(){
       //...
   }
 </script>
<body>
//...
</body>
</html>
那么在iframe子页面中可以通过parent.loadImage()来实现调用，这也说明用户在页面定义的所有javascript函数都属于window对象之下。那么在父窗口如何调用子窗口中的函数呢，应该很简单了，就是获得子窗口对象，然后调用子窗口对象的window对象下的这些函数即可，例如iframe的name为myframe，在子窗口定义了一个函数getUserName，那么父窗口中的调用方式为document.frames("myframe").getUsername();另外对于父窗口调用子窗口中的方法，还要注意一个问题，就是子窗口的加载有时候会比较慢，如果子窗口正在加载，那么此时它的各种页面对象都不存在，那么当在父窗口调用子窗口的方法时，为了保险可以使用借助setTimeout来实现异步调用，即通过setTimeout指定一定时间之后（例如100ms），再执行调用，调用执行总是判断子窗口页面是否加载完毕，如果没有加载完毕，则继续使用setTimeout方法，循环往复直到子窗口被完全加载，然后执行子窗口的函数调用。既然这里解释了窗口间的异步调用，后面就不专门解释了。

7，在一个网页中如何最小化窗口，当然你可能会说，网页的右上角不是有最小化、最大化和关闭三个按钮吗，当然了这里说这个问题是指，如果不点击网页右上角的最小化，如何实现网页的最小化操作，例如有些项目中，用户需要办公界面是全屏化的，这意味着网页自己提供的许多操作都不可见，更不用说去操作了。在网络上我们搜索最小化的解决方式，我们会发现千篇一律的使用如下的方式实现：
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> 
<param name="Command" value="Minimize"></object>
<input type=button value=最小化 onclick=hh1.Click()> 
在win98和windows2000中这个方式可能是可以的，但是在windows XP中却是不再支持了，不仅如此在windows XP中对javascript不少函数做了限制。那么在XP中如何实现最小化呢，一个可以实现的方式就是自己写一个activeX控件，这个是在项目中证明可以实现的。（不要认为activeX控件很难写，也不要以为activeX控件用户不接受，在实际的项目中如果用户使用的都是ie，那么用户一般是会接受的，当然这里的项目最好是内网办公项目，对于公网项目来说，用户接不接受就很难说了）

8，注意td中nowrap的使用，这个属性是很有用的，例如如果一个td中含有多张图片，那么如果不加入nowrap，那么很可能这些图片会由于其它的td的挤压而产生细微的上下错位，这表现的页面上就是某处出现了一条横向的细缝。这一点很重要，页面中许多非常奇怪的现象都与此有关。

9，对于showModalDialog弹出的页面，不能使用右键菜单，也不支持F5和ctrl+r刷新，如果此时修改弹出页面的内容，那么必须关闭该窗口，然后重新弹出才可以。另外，对于许多web服务器，由于服务器都设置有缓存，如果修改了弹出页面的内容，那么许多时候只是关闭弹出页面还是不够的，往往还需要关闭弹出该页面的那个页面才可以。在这里多说一句，web开发许多奇怪的页面现象都和web服务器的缓存有着很大的关系，因此出现问题时考虑一下是否是由于服务器的缓存所致。

10，我们喜欢在form中定义onsubmit操作，主要是为了在表单提交之前可以做一些有意义的操作，例如检查输入域的有效性等等，但是一定要注意，如果我们通过点击该form中的submit按钮（type=submit或type=image）提交表单，那么该onsubmit操作会被执行，但是如果通过document.formName.submit()提交表单，那么此onsubmit操作将不被执行。

11，许多时候我们修改了页面的内容，但是我们刷新页面或重新打开该页面，却看不到修改的效果，除了前面提到过的showModalDialog和缓存的情况要考虑外，还要检查一下是否改对了地方，即你修改的那个页面是否是服务器上的那个页面，有可能你修改了其它地方的一个页面，如果不是这个原因，那么再进行其它方面的检查。

12，在没有系统规划好之前，请不要在css中定义html标签的统一行为，即下面的形式：
<style>
  TABLE{font-size:11pt;color:black;}
  INPUT{border-width:1;border-color:pink;border-style:solid}
</style>
因为一但定义了这些标签的属性，那么这将会影响页面中所有的这些标签属性，尤其在一些公用的css文件中，尽量不要定义html标签的统一行为。当然如果经过了系统的良好的规划，那么这样做将是非常好的，只是在国内在css上经过良好规划的并不多，因此虽然我们见到许多项目和产品中对html标签做了许多css的定义，但是真正起到作用的并不多。

13，在html标签中有许多属性的名称都是复合词，例如borderColor、frameBorder、readOnly等等，注意这些复合词在html的书写，一般来说我们在html标签中写为borderColor和bordercolor，各个浏览器的解析都会通过，但是我们在使用javascriopt引用这些属性时却需要注意了，一定使用正确的属性名称，严格来说，对于复合词而言，除了第一个有意义的词之外，其它任何有意义的词的首字母都要大写，例如对于上面列出的三个属性的引用，一定要使用borderColor、frameBorder、readOnly的形式。
<input type="text" id="myinput" readonly />
<script>
    var flag=document.getElementById("myinput").readOnly;//正确的方式
    //var flag=document.getElementById("myinput").readonly;//错误的方式
</script>

 14，我们知道当使用浏览器的菜单“查看”->“文字大小”来改变文字的显示时（或者有些浏览器也可以使用ctrl+滚轮键），网页中的文字的字号会发生相应的变化，如果我们在网页中的文字块中定义了style="font-size:10pt"，那么这些文字块中的文字的大小将是固定的了（注意在<font/>标签定义size属性是不能固定字号的），我想这一点多数人都应该知道的。但是我们使用中有时会出现一种非常奇怪的现象，例如下面的一段代码：
<table><tr><td>
<div style="font-size:10pt;border-width:1;border-color:red;border-style:solid">
  这是上面
</div>
<br />
<div style="font-size:10pt;border-width:1;border-color:green;border-style:solid">
  这是下面
</div>
</td></tr></table>
我们看一下在字号显示“最大”和“最小”下的差别：

从上图我们可以看到字号我们是固定住了，但是table的高度却会随着查看方式的不同而发生变化，这是为什么呢？原因就在于td当中的那个<br />，我们知道<br />是表示段内换行，但是要注意在网页中所谓的行也是有一定的默认高度的，而且这个高度随着查看方式的不同而发生相应的变化，因此如果我们想固定上面table的高度不发生变化，有下面两种方式：
方式一：在table标签中加入字号限制例如<table style="font-size:10pt"...
方式二：在<br />中加入字号限制例如<br style="font-size:10pt" />...
如果你是一个web开发人员，你可以试着使用ctrl+滚轮键改变网页查看文字的大小，你会发现不少页面都存在这个问题的。

15，网页中定位对象的方式有许多种，下面先简单总结一下，以后再专门写这个方面的文章的：
1）页面内通用定位方式（这些定位方式适用于后面其它元素的定位）
document.getElementById(objId);//通过对象的id获取对象，这个是各个浏览器都支持的，返回一个对象
document.getElementsByName(objName);//通过对象的name获取对象，这个是各个浏览器都支持的，返回一个数组
document.getElementsByTagName(tagName);//通过标签名称获取对象，这个是各个浏览器都支持的，返回一个数组
document.all.objId;//通过对象id获取对象，这个是ie支持的，返回一个对象
document.all(objId);//通过对象id获取对象，这个是ie支持的，返回一个对象
document.layers.objId;//通过对象id获取对象，这是Netscape支持的，返回一个对象
document.layers(objId);//通过对象id获取对象，这是Netscape支持的，返回一个对象
window.objName;//通过对象名称获取对象，至少在ie中如此
objName;//通过对象名称获取对象，至少在ie中如此
2）页面内集合元素的定位方式
我们知道在页面中有许多集合，例如form、frame、image等等，引用这些集合中某个对象的方式为，举其中一个为例，其它都差不多，以form为例：
document.formName;//通过表单name获取表单对象
document.forms[index];//通过索引获取表单对象，浏览器会按顺序将页面中所有的表单集合城数组，可以通过下标引用
document.forms(formName);//通过表单name获取表单对象
3）定位子窗口的方式（定位子窗口对象，不是标签对象，见前面3中的说明）
子窗口是指页面中frame或iframe窗口，定位方式为：
document.frames[index];//索引定位方式
document.frames(frameName);//通过名称定位
window.frameName;//通过名称定位
frameName;//直接通过名称来定位
4）在子定位父窗口的方式
通过关键字parent来引用即可，同理parent.parent则表示父父窗口，top则表示最上层窗口。
5）原窗口定位open弹出窗口的方式，例如下面代码：
window.open("test.html");
这里我们要知道window.open将会返回一个弹出窗口的句柄，即可以如下：
var owin=window.open("test.html");
owin即代码弹出窗口对象，通过改对象可以引用到弹出窗口的各个对象。
6）原窗口定位showModalDialog弹出窗口的方式，例如：
window.showModalDialog("test.html");
注意showModalDialog与open不同，open弹出窗口后，window.open后面的代码可以继续执行，而showModalDialog弹出窗口后，原页面被阻塞，即window.showModalDialog后面的代码不被执行，直到用户关闭了弹出窗口才会继续往下执行，但这时因为已经关闭了弹出窗口，所以已经无法再对该窗口进行引用。
7）open弹出的窗口对原窗口的定位方式，这个我们一般都知道，在弹出窗口中使用opener即可。
8）showModalDialog弹出的窗口对原窗口的定位方式，这个不是使用opener，而应该在弹出窗口中使用parent。

16，编写页面代码尽量使用标准的html、css和javascript，不要以为只要在ie上通过就可以了，要注意最近浏览器市场已经开始发生变化了，不知道你是否听说过Firefox2.0，它的用户量已经不在ie之下了，至少你的代码要在ie和Firefox上都通过才可以，另外现在linux越来越吃香，保不准几年后我们的许多客户都开始使用linux，到那个时候，我们将不得不对原来已经完成的项目进行维护，与其这样的后果，还不如从现在开始就使用标准为好，不要认为跨浏览器是很虚的话题，觉得没有必要，要知道这已经不是几年前了，现在形式和市场都在发生变化，我们的思想也该变一变了。

17，我们的产品或OA系统往往会有许多模块，例如用户管理、发文流程、物品管理等等，我们在为这些模块命名时往往都是不太讲究的，没有注意名字的结构、字数等的统一，例如在个人事务模块下面有三个子模块，名称分别如下：待办事项、已办事项，维护个人信息。对于字数而言我们往往不会苛求太多，但是对于词的结构，我们还是要讲究的，例如上面的三个模块，前两个是名词结构，而后一个是谓词结构（动宾结构），这是不太妥当的，也许你觉得这有些吹毛求疵，当然大多数项目中不会要求这么严格，但是有些客户的确会有这样的要求，另外对我们自己而言，这也体现了我们做事认真、一丝不苟的品格和态度。

18，图标与文字的配比要合适，这不仅要求图标能够正确显示文字的意思，而且还要求图标不能盖过文字的显示与含义，即图标太显眼而文字无足轻重的情况需要避免，例如下面的情况就是不太合适的：
 用户管理
之所以不合适，主要是因为图标的含义与用户管理关系不大，图标的含义更接近“XX编辑”的意思，和用户管理基本没有什么联系。

19，在用户登录和表单处理页面，我们要处理用户按enter键的情况，即用户按enter键也要触发提交事件，不要只有用户点击“登录”或“提交”按钮才触发提交操作。

20，如果我们在页面中使用<a />标签，那么默认情况，当鼠标移到该链接时，鼠标自动会变为手的形状，许多时候我们希望鼠标移动到其它非链接的区域，也希望鼠标变为手的形状，我们一般的处理方式为在该区域的style中加入cursor属性，如下：
<span style="cursor:hand" onclick="myfunc()">下一页</span>
或者使用：
<span style="cursor:url('http://webme.bokee.com/inc/mouse118.cur')" onclick="myfunc()">下一页</span>
但是要注意，只有在ie中才支持cursor:hand，在firefox2.0中的cursor中是没有hand的，像wait、help等都是支持的，另外firefox中也不支持cursor:url方式。

21，我们有时想通过javascript进行跨域页面的调用，不过出于安全性的考虑，各个浏览器一般都是不支持的，例如下面的代码：
<iframe src="http://www.google.com"></iframe>
<script>
  setTimeout("document.frames[0].window.location.href",3000);
</script>
使用setTimeout是为了可以让iframe子页面可以加载完毕，上面的调用会报安全性警告，例如在ie如下：


那么是不是说只要是跨域就能不能进行javascript访问了呢？不是的，一种比较常用的办法就是设置document.domain属性，这种方式的描述如下：
假设有两个页面
test1.html 所在域：aaa.maindomain.com 访问协议：http 端口：8080
test2.html 所在域：bbb.maindomain.com 访问协议：http 端口：8080
满足上面条件的两个页面test1.html、test2.html是可以通过javascript相互访问的，上面的条件即为两个页面位于同一个基础域（例如上面同为maindomain.com），遵循同一个访问协议和端口（例如上面同为http 8080）。只要在这样的两个页面中都设置document.domain为所在基础域名，就可以相互调用了，例如：
test1.html 所在域为aaa.mydomain.com
<script>
  document.domain="mydomain.com";
</script>
<iframe src=http://bbb.mydomain.com/test2.html></iframe>
<script>
  setTimeout("document.frames[0].window.location.href",3000);
</script>
test2.html 所在域为bbb.mydomain.com
<script>
  document.domain="mydomain.com";
</script>
...
这样一来，test1.html的调用就是可以的了。一般来说跨域调用的场景发生在集团型企业项目或多机构的政务项目中，而对于这种类型的项目，它们的基础域基本上是相同的，只是三级域名不同，因此可以使用上面的方式来进行跨域调用。

22，你会页面中的javascript调试吗？也许你还不会使用ie或firefox提供的页面调试器或插件，那么没有关系，至少你懂得一种最基本的调试：alert调试，不要认为这是一种很土或很傻的方式，很多时候这种方式都很非常有用的，对于一段很长的javascrip代码，从头到尾加入几个alert，那么立即就能定位错误的大概位置，当然使用调试器的断点也可以很快定位，只是说alert也是一种不错的方式。当然还是希望你能够掌握更为高级的调试器的使用，毕竟调试器带给我的功能更强大。

23，我们许多时候编写完网页之后，发现最终的显示效果和我们想象的不太一样，这有些时候是由于浏览器的不同造成的，但除此之外，我们如何具体定位到底是页面的哪块代码导致不太理想的页面效果呢？当然你可能会使用Dreamweaver或Frontpage打开出问题的页面，然后查找原因，但是这些所见即所得的网页设计器，并非我们想象的那么完美，例如明明在设计器种预览很好的效果，到了真实环境中页面竟然出现了错位等等，这里和你介绍一种非常不错的css的调试方式，这里就不具体说了，请参看我新写过的一篇文章【css在html中的调试作用 】

24，网页打印我们都知道可以调用window.print函数，那么如果想打印iframe子窗口中页面呢，如果你只是获得子窗口对象，然后调用子窗口对象的print方法，此时打印机打印出却不是子窗口页面的内容，而是父窗口页面自身，为什么会这样呢？原来（至少在ie中如此）在父页面调用子窗口的print函数时，因为此时焦点还在父窗口之中，所以打印机此时会将获得焦点的窗口进行打印，我们在打印子窗口之前，只需做一件事即可完成对子窗口的打印，如下代码：
<html>
 <head>
  <script>
    function myprint(){
       document.frames("myframe").window.focus();
       document.frames("myframe").window.print();
   }
  </script>
 </head>
<body onload="myprint()">
  <iframe name="myframe" src="test2.html"></iframe>
</body>
</html>

25，网页切图许多人都习惯于网页三剑客的配合使用，网页三剑客就是网页开发者都熟悉的Dreamweaver、Fireworks和Flash，一般我们使用使用Flash或Fireworks将动画或图切分后输出成为html页面，然后通过Dreamweaver编辑输出后的页面，这是我们网页切图常用的配合方式，但是通过使用比较发现，在图片的切分方面，使用Photoshop要好于Fireworks，Photoshop不仅定位更加精确，而且由于自身是平面设计的标准，因此它提供了许多图片编辑的其它功能，这要比fireworks强大得多。目前专业的网页设计师都在开始或一直使用Photoshop进行网页设计并切分后输出成为HTML页面。如果你是三剑客的爱好者也没有关系，你可以使用一下看看效果如何，总之我从2000年就开始使用三剑客，现在才逐渐认识到Photoshop已经不仅仅是平面设计的标准了。

26，在javascript中有一个方法可以列出当前对象所支持的所有属性、集合和事件，通过使用in关键字来实现，如下样例代码：
var str="";
for(var i in document){
    str+=i+"\n";
}
alert("document's all attributes:"+str);

27，在一个名称为myform的表单中，含有一个名称为mychckbox的复选框，那么document.myform.mycheckbox所取到的是那个复选框对象，那么此时调用document.myform.mycheckbox.length是错误的，如果该表单中含有多个名称为mycheckbox的复选框，那么document.myform.mycheckbox返回的是一个数组，此时调用document.myform.mycheckbox.length就是正确的。单独说这个问题，可能感觉比较简单，但是在实际应用中我们经常会犯与此相关的错误，如下图所示：

上图是我们在应用中经常遇到的“增、删、改”的逻辑，我们在其中经常会对复选框做操作，经常会使用类似document.myform.mycheckbox.length的方式，一般情况不会报错，这主要是因为在我们的列表中一般来说都不会只有一条记录，但是当列表中只有一条记录的时候（尽管这种时候不常见），这样引用就会报错，因为此时document.myform.mycheckbox返回的不是一个数组，则对length的引用就没有意义了，这种错误说起来很容易，但是在编程时往往就会忽略，因此在编程时我们建议如下方式：
if(document.myform.mycheckbox.length){
  //...
}else{
  //...
}

28，在ie中有一个很特别的css语法，如果你听说过，那说明你的积累真是太丰富了！在css中有一种给汉语注音的语法，如下所示：
<style>
    ruby{font-size:13pt;} 
    rt{font-size:18pt;color:red}
</style>
<ruby>你知道这个语法吗？<rt>ni zhi dao zhe ge yu fa ma</rt><br>
不知道<rt>bu zhi dao</rt>   
</ruby>
你运行这段代码看看什么效果（要在ie中运行），我这里效果如下：

29，我们项目中经常会遇到页面打印的需求，许多时候用户需要只打印页面某一部分，如果直接调用window.print则打印的是整个网页的内容。解决办法不外乎两种，第一种方式是将整个页面分为几个部分，将需要打印的部分放在其中的一个部分，然后定义onbeforeprint和onafterprint两个操作，即打印之前将不要打印的部分隐藏，打印之后将隐藏的部分显示，类似代码如下：
<script>
   function beforePrint(){
       document.getElementById("hidden1").style.display="none";
       document.getElementById("hidden2").style.display="none";
   }
   function afterPrint(){
       document.getElementById("hidden1").style.display="block";
       document.getElementById("hidden2").style.display="block";
   }
   document.onbeforeprint=beforePrint;
   document.onafterprint=afterPrint;
</script>
<div id="hidden1" style="display:block">
这里不需要打印
</div>
<div id="printDiv" style="display:block">
这里需要打印
</div>
<div id="hidden2" style="display:block">
这里不需要打印
</div>
<input type="button" value="打印" onclick="window.print()"/>
第二种方式是将需要打印的部分放到iframe之中，然后将焦点移到子窗口，然后调用子窗口的print方法即可。

30，Javascript中的数组和我们一般的编程语言中的数组是不太一样，一般语言中数组的长度是固定的，有些语言中数组中的数据类型也要求是一样的，但是javascript数组却不受这些限制，在javascript中数组基本上是没有长度限制的，而且类型也没有限制，例如下面的一些使用方法：
var arr=new Array();
arr[1000]="ok";
arr[300]=255;
arr[200]=new Date();
var date=arr[200];
alert(date.getTime());
因为数组的这种机制，我们可以使用数组实现许多数据结构，例如列表、哈西表等等。

31，对于XML的处理一般情况下都是在服务器端处理的，例如在Java中有W3C、JDOM、XPath等许多xml的解析器，但是现在许多时候我们需要在浏览器端处理xml字符串，目前在ie和netscape中都有针对xml字符串的解析，如果你喜欢使用，也没有什么关系，不过对于Java程序员，我给你介绍一个完全按照W3C Document API实现的XML解析器，相信你会非常喜欢的，因为完全是Java的风格，请从 http://download.jsjava.com 下载jsjava0.91，在其中的src/jsorg/w3c/dom下有XML各个对象的实现，在页面中只需引用其中的xmlp.js和i18n.js即可，具体使用可以参考里面的例子：位于下载包的examples/XMLParser/XMLW3CParser下面，也可以直接访问：http://jsjava.sourceforge.net/examples/XMLParser/XMLW3CParser/W3CXMLParser.html 查看例子。

32，一段文本的首行文本缩进两个汉字，这是中文段落的格式要求，我们可以通过在首行加入多个&nbsp;来实现，不过还是建议使用css的标准属性text-indent，例如下面的代码：
<p style="text-indent:28;font-size:10pt">
这是一段文本，请注意它的格式，<br>
你看到了什么效果？如果你看到首行<br>
缩进了，那么说明起作用了。
</p>
显示效果如下：

33，在Javascript中字符串的替换函数为replace(regexp, newSubStr)，其中第一个参数是一个正则表达式，但是我们在实际使用中，往往习惯使用为一个字符串，这虽然不会报错，但是得到的结果往往是不正确的，例如下面的例子：
var str=“ abbbbacc”;
var rs=str.replace(“a”,”0”);
(A)0bbbbacc (B)0bbbb0cc
正确答案是A，当然A可能不是你想要的结果，你想要的结果是字符串中所有的“a”都被替换为“0”，可是上面的使用方式只能将第一个“a”替换为“0”，正确的使用方式，在第一个参数中输入一个正则表达式，如下所示：
var str=“ abbbbacc”;
var rs=str.replace(“/a/g”,”0”);//注意如果第一个参数为/a/，结果也是不正确的。
(A)0bbbbacc (B)0bbbb0cc
这样的话答案就是B了，如果你不明白/a/g是什么意思，那么你就需要对Javascript的正则表达式好好学习了，具体可以参看我以前写过的一篇文章：http://blog.csdn.net/eye_of_back/archive/2006/07/14/922667.aspx

34，无论你使用的是ASP，还是PHP，或者JSP，都不建议在页面代码中夹杂着大量的业务逻辑代码。我们应该将业务逻辑代码封装到应用服务器层或者说业务层，web端只是进行调用。在JSP和PHP中我们可以将业务逻辑封装到BO（业务对象）中，由于支持类、接口等一套面向对象的机制，使得这种封装显得很容易，对于ASP，由于ASP.NET和C#的兴起，使得它对业务封装也变得相当方便。虽然我们都懂得服务器的三层架构，但是我们发现许多的项目之中，开发人员仍然在页面中直接编写业务逻辑，甚至直接访问数据库，面对这种情况，不能不说我们的项目管理是存在很大的问题的，我们的项目经理和程序设计师们，我们应该好好反思一下了。

35，有些时候我们在<a/>标签的href中直接加入javascript代码，通过window.open来打开一个自己可以控制许多属性的窗口，例如下面的代码：
<a href="javascript:window.open('http://www.google.com');">打开Google</a>
当我们点击链接后，确实弹出了Google的页面，但同时原页面却变为了下面的样子：

这种情况相信有些人遇到过，解决方式如下：
<a href="javascript:window.open('http://www.google.com');window.opener=null;window.close()">打开Google</a>
但是为什么前面的那种方式就会出现那种情况呢，其实只要做个简单实验就会明白了，你运行一下下面的代码，点击链接看看会出现什么结果：
<a href="javascript:window">打开Google</a>
实验后你会发现，点击链接后页面出现的结果与上面那种结果相同，然后你再实验一下下面的代码：
<a href="javascript:'test'">打开Google</a>
点击链接后，你会发现页面中会显示test字样。可见对于类似
<a href="javascript:js代码">点击</a>
的代码，如果js代码执行完毕后返回一个对象，那么页面内容会被冲掉，然后将该对象的描述输出到页面中，我们知道window.open方法返回的是弹出的页面的窗口对象（window），因此javascript:window.open将会在弹出一个窗口的同时，原页面会冲掉原有内容并将返回的window对象输出到原页面中。如果在window.open后面加入window.opener=null;window.close()，则弹出窗口后，返回给原页面的对象为空，则原页面不执行任何其它操作。

最近完成的一个股票信息管理系统的总结：

由于对安全性健壮性要求比较高，因此我们必须考虑很全面，对于货币的合法性计算等问题就不一一总结，只需在验证过程中严格限制用户输入数据即可。

1. 一般管理页面是框架，各种分管理页面都在iframe或frameset中，因此限制只能浏览框架页面（如main.asp），其他页面必须在main.asp框架内。
   方法：每个分页面加上
   window.onload=function(){
    if(top==self){
     top.location="main.asp"; 
    }
   }
2. 可能我们需要主页面main.asp为弹出的全屏页面，可以限制main.asp只能为弹出页面并在弹出后关闭打开它的页面。
   方法(注意只针对ie，在ff下刷新会出现opener丢失（null）的情况：
   if(navigator.userAgent.indexOf('MSIE')>-1){
    if(!opener){
     window.open('main.asp','','location=no,status=no,toolbar=no,scrollable=yes,resizable=no');
     window.close();
    }else{
       opener.close();
    }
   }
3. 每个页面开始出增加权限验证（如check.asp）来检验用户访问权限。
4. 及时检验客户端用户输入数据的合法性。
5. 及时根据用户选择选项的不同或输入不同在客户端及时更新显示用户应该得知的信息，隐藏不应该显示的内容，防止用户误理解或误操作。
6. 提交数据前检验输入是否为空或是否合法。方法：在submit按钮上添加onclick="return checkForm()"
7. 检验提交的数据后如果需要用户再次确认提交可以使用return confirm(...)。
8. 判断一个对象的属性是否存在不能直接使用if(!obj.property){...},因为一个元素的属性值可能为0这样也会返回true。所以应该使用if(obj.property==undefined){...}
9. 对于货币的转换：一般保留小数点后两位有效数字，多于的位数四舍五入。使用number.toFixed(2)即可。数字2代表保留的小数位数。
10. 对于计算过程中出现了异常或非法结果应及时反馈用户并清空用户当前输入，如货币计算结果出现负数或除数为0等。
11. 对于刚载入页面时如果需要根据页面某处的值显示不同效果应该使用
    window.onload=function(){
         if(...){
              ...
        }
    }
12. 对于一些需要进行关联显示的数据，可以采用json，这样方法简单且安全准确。json数据可以在服务端生成。
    =@@=如根据用户id获取相应的金额的一个json例子。
    var userMoney={'code8':'5709','code7':'3576','code6':'38454.66'};
    注意此处code8代表用户id为8的用户，因为对象属性或方法不能是数字开头，所以在服务端生成时应该带上相关字母或下划线或$。
    这样访问id为8的用户的货币可以使用userMoney.code8,如果需要根据用户选择的id不同获取不同值可以这样：eval("userMoney.code"+userid)
    
    =@@=对于多重关联，如果只需访问最后一层的值，如：如果需要访问特定用户特定股票的股数可以在服务端组合数据生成json。
    例：var userRemain={'u8_c1000001':'5','u8_c2342342342':'0','u7_c1000001':'0','u7_c2342342342':'0','u6_c1000001':'0','u6_c2342342342':'0'};
    此json数据生成办法：循环读取用户id(用字母u表示)，然后对于某个id在循环读取该用户所有股票类型(用字母c表示)及对应的股数，然后组合："'u"+userid+"_c"+cateId+"':'"+count+
    这样在客户端读取的方法同服务器端生成方法一样重新组合并读取即可。
13. 在页面加载速度比较慢的情况下，可能出现js访问页面后面的变量或后面的页面元素时出现“找不到对象”的错误提示，解决办法在head区的js中加上
    window.onerror=function(){
            location.reload();
    }
    这样就可以使页面在出现错误时重新加载，由于之前的缓存下次加载会比较快也就不会出现对象访问不到的情况。

CSS库

做设计的时候总是容易没有灵感。到CSS库去看看别人做得设计也许会帮你找到不少灵感。如果你的设计足够优秀让这些CSS库收录的话，那么这还会为你带来很多访问者。

当用div布局页面时有时我们发现无法成功使用滤镜，即无法看到滤镜效果。解决办法其实也很简单，我们只需要加上几个必要的属性即可！
这几个属性是：position,width,height。加上这几个属性即可显示滤镜效果，很简单吧！

"window.event.keyCode=0x65+0x66"中的0x65+0x66代表着字母键编号(上文已经提到过)。字母键必须用字母键编号表示，不能用字母表示，否则程序将不认此键。下面给出A～Z、0～9以及功能键的各键值编号：

键名 键编号 键名 键编号
A　　0X65 　U 　　0X85
B　　0X66　 V　　 0X86
C　　0X67　 W　　 0X87
D　　0X68　 X 　　0X88
E　　0X69　 Y　　 0X89
F　　0X70　 Z　　 0X90
G　　0X71　 0　　 0X48
H　　0X72　 1　　 0X49
I　　0X73　 2　　 0X50
J　　0X74　 3 　　0X51
K　　0X75　 4 　　0X52
L　　0X76　 5 　　0X53
M　　0X77　 6　　 0X54
N　　0X78 　7 　　0X55
O　　0X79 　8 　　0X56
P　　0X80 　9 　　0X57
Q　　0X81　ESC　　0X1B
R　　0X82　CTRL 　0X11
S　　0X83　SHIFT　0X10
T　　0X84　ENTER　0XD 

head区是指首页HTML代码的<head>和</head>之间的内容。

1.公司版权注释
<!— The site is designed by Maketown,Inc 06/2000 —>

2.网页显示字符集
简体中文：<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=gb2312″>
繁体中文：<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=BIG5″>
英 语：<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=iso-8859-1″>

3.网页制作者信息
<META name=”author” content=”webmaster@maketown.com”>

4.网站简介
<META NAME=”DESCRIPTION” CONTENT=”xxxxxxxxxxxxxxxxxxxxxxxxxx”>

5.搜索关键字
<META NAME=”keywords” CONTENT=”xxxx,xxxx,xxx,xxxxx,xxxx,”>

6.网页的css规范
<LINK href=”style/style.css” mce_href=”style/style.css” rel=”stylesheet” type=”text/css”>
(参见目录及命名规范)

7.网页标题
<title>xxxxxxxxxxxxxxxxxx</title>

.可以选择加入的标签

1.设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<META HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”>

2.禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>

3.用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV=”Window-target” CONTENT=”_top”>

4.自动跳转。
<META HTTP-EQUIV=”Refresh” CONTENT=”5;URL=http://www.yahoo.com”>
5指时间停留5秒。

5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<META NAME=”robots” CONTENT=”none”>
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。

6.收藏夹图标
<link rel = “Shortcut Icon” href=”favicon.ico” mce_href=”favicon.ico”>

所有的javascript的调用尽量采取外部调用.
<SCRIPT LANGUAGE=”JavaScript” src=”script/xxxxx.js” mce_src=”script/xxxxx.js”></SCRIPT>

附<body>标签：
<body>标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景<body bgcolor=”#FFFFFF”>