一、基本概念
1、标签(Tag)
标签是一种XML元素，通过标签可以使JSP网页变得简洁并且易于维护，还可以方便地实现同一个JSP文件支持多种语言版本。由于标签是XML元素，所以它的名称和属性都是大小写敏感的。
2、标签库(Tag library)
由一系列功能相似、逻辑上互相联系的标签构成的集合称为标签库。
3、标签库描述文件(Tag Library Descriptor)
标签库描述文件是一个XML文件，这个文件提供了标签库中类和JSP中对标签引用的映射关系。它是一个配置文件，和web.xml是类似的。
4、标签处理类(Tag Handle Class)
标签处理类是一个Java类，这个类继承了TagSupport或者扩展了SimpleTag接口，通过这个类可以实现自定义JSP标签的具体功能。
二、自定义JSP标签的格式
1、为了使到JSP容器能够使用标签库中的自定义行为，必须满足以下两个条件：
<% @ taglib prefix=”someprefix” uri=”/sometaglib” %>
1)从一个指定的标签库中识别出代表这种自定义行为的标签；
2)找到实现这些自定义行为的具体类。
第一个必需条件－找出一个自定义行为属于那个标签库－是由标签指令的前缀(Taglib Directive's Prefix)属性完成，所以在同一个页面中使用相同前缀的元素都属于这个标签库。每个标签库都定义了一个默认的前缀，用在标签库的文档中或者页面中插入自定义标签。所以，你可以使用除了诸如jsp,jspx,java,servlet,sun,sunw(它们都是在JSP白皮书中指定的保留字)之类的前缀。
uri属性满足了以上的第二个要求。为每个自定义行为找到对应的类。这个uri包含了一个字符串，容器用它来定位TLD文件。在TLD文件中可以找到标签库中所有标签处理类的名称。
2、当web应用程序启动时，容器从WEB-INF文件夹的目录结构的META-INF搜索所有以.tld结尾的文件。也就是说它们会定位所有的TLD文件。对于每个TLD文件，容器会先获取标签库的URI，然后为每个TLD文件和对应的URI创建映射关系。
在JSP页面中，我们仅需通过使用带有URI属性值的标签库指令来和具体的标签库匹配。
三、自定义JSP标签的处理过程
1、在JSP中引入标签库
<% @ taglib prefix=”taglibprefix” uri=”tagliburi” %>
2、在JSP中使用标签库标签
3、Web容器根据第二个步骤中的prefix，获得第一个步骤中声明的taglib的uri属性值
4、Web容器根据uri属性在web.xml找到对应的元素 5．从元素中获得对应的元素的值 6．Web容器根据元素的值从WEB-INF/目录下找到对应的.tld文件 7．从.tld文件中找到与tagname对应的元素 8．凑元素中获得对应的元素的值 9．Web容器根据元素的值创建相应的tag handle class的实例 10. Web容器调用这个实例的doStartTag/doEndTag方法完成相应的处理。
四、创建和使用一个Tag Library的基本步骤
1、创建标签的处理类(Tag Handler Class)
2、创建标签库描述文件(Tag Library Descrptor File)
3、在web.xml文件中配置元素 4.在JSP文件中引人标签库
五、TagSupport类简介
1、处理标签的类必须扩展javax.servlet.jsp.TagSupport。
2、TagSupport类的主要属性：
A.parent属性：代表嵌套了当前标签的上层标签的处理类；
B.pageContex属性：代表Web应用中的javax.servlet.jsp.PageContext对象；
3、JSP容器在调用doStartTag或者doEndTag方法前，会先调用setPageContext和setParent方法，设置pageContext和parent。因此在标签处理类中可以直接访问pageContext变量；
4、在TagSupport的构造方法中不能访问pageContext成员变量，因为此时JSP容器还没有调用setPageContext方法对pageContext进行初始化。
#p#
六、TagSupport处理标签的方法
1、TagSupport类提供了两个处理标签的方法：
public int doStartTag() throws JspException
public int doEndTag() throws JspException
2、doStartTag：但JSP容器遇到自定义标签的起始标志，就会调用doStartTag()方法。
doStartTag()方法返回一个整数值，用来决定程序的后续流程。
A.Tag.SKIP_BODY：表示?>…之间的内容被忽略；
B.Tag.EVAL_BODY_INCLUDE：表示标签之间的内容被正常执行。
3、doEndTag：但JSP容器遇到自定义标签的结束标志，就会调用doEndTag()方法。doEndTag()方法也返回一个整数值，用来决定程序后续流程。
A.Tag.SKIP_PAGE：表示立刻停止执行网页，网页上未处理的静态内容和JSP程序均被忽略任何已有的输出内容立刻返回到客户的浏览器上。
B.Tag_EVAL_PAGE：表示按照正常的流程继续执行JSP网页。
七、用户自定义的标签属性
如果在标签中还包含了自定义的属性，那么在标签处理类中应该将这个属性作为成员变量，并且分别提供设置和读取属性的方法。
八、创建标签处理类的步骤
1、创建包含JSP网页静态文本的文件(即是要替换自定义JSP标签的文本)；
2、在Web应用启动时装载静态文本；
3、创建标签处理类。
九、如何创建包含JSP网页静态文本的文件
1、使用java.util.Properties类来存放要替换网页中自定义JSP标签的静态文本；
2、Properties类代表了一系列属性的集合，其实例既可以被保存到流中，也可以从流中加载。这些文本以key/value的形式存放在WEB-INF目录下，例如key=value，在属性列表中这些key/value都是String类型的。
十、Properties类的常用API
1、setProperty(String key, String value)：调用Hashtable类的put方法添加属性；
一般我们在javascript看效果的时候，往往会用alert函数。
试想，如果我们想看一下document下有多少个对象，那么，我们要可能会写出这样的代码：
for(i in document)
{
alert(i);
}
可是在document下有一百多个对象，那么我们要在浏览器中不停的单击一百多次才可以看全，为此， 我们来制作一个简单的日志调试，也是对我们前面学习知道的一个巩固。
制作出来的效果图如下：
调用页面：
<!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=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src=/blog_article/"LS.js"></script>/index.html <script type="text/javascript" src=/blog_article/"Classs3实践myLog.js"></script>/index.html <script type="text/javascript" src=/blog_article/"Classs3实践testjs.js"></script>/index.html </head> <body> <span style="color:#3F0; background-color:#FFF; font-weight:bold; padding:0px 5px;">这是标题</span> </body> </html>
Classs3实践myLog.js
function mylogger(id){
//给id是为了识别日志窗口，如果不给的话，那么默认是LSLogWindow
id=id||'LSLogWindow';
var logWindow=null;
//创建日志窗体
var createWindow=function(){
var browserWindowSize=LS.getBrowserWindowSize();
//如果browserWindowSize为空的话，或者没有取到，为了保证安全性，我们给它｜｜一个0
//这样的话，就算前面为空的话，top也会等于0，不至于报错。
var top=(browserWindowSize.height-200)/2 || 0;
var left=(browserWindowSize.width-200)/2 || 0;
//使用UL
//我们在document下添加UL这样一个DOM对象，并且把这个DOM对象的引用赋给logWindow对象。
logWindow=document.createElement('UL');
//添加ID进行标识
logWindow.setAttribute('id',id);
//对窗体进行CSS控制
logWindow.style.position='absolute';
logWindow.style.top=top+'px';
logWindow.style.left=left+'px';
logWindow.style.width='200px';
logWindow.style.height='200px';
logWindow.style.overflow='scroll';
logWindow.style.padding='0';
logWindow.style.margin='0';
logWindow.style.border='1px solid black';
logWindow.style.backgroundColor='white';
logWindow.style.lists;
logWindow.style.font='10px verdana,Tahoma,Sans';
document.body.appendChild(logWindow);
};
//向日志窗体中添加一行
this.writeRow=function(message){
//如果初始窗体是不存在的，则生成日志窗体。
if(!logWindow)
{
//这里可不要加this哦，因为如果这里加this的话，那么this表示调用当前方法writeRow的一个实例
//也就是myLogger，而createWindow是一个私有属性，所以肯定会报错。
createWindow();
}
//创建li的DOM结点
var li=document.createElement('li');
//进行CSS样式控制
li.style.padding='2px';
li.style.border='0px';
li.style.borderBottom='1px dotted black';
li.style.margin='0';
li.style.color='#000';
if(typeof message=='undefined')
{
li.appendChild(document.createTextNode('Message is undefined'));
}
//innerHTML不是W3C标准，但是所有的浏览器都实现了这个方法，但是这个效率比较高，如果不支持这个方法就用else里面的方法
//innerHTML的其它缺点：比如说我们在li下挂了一些其它的DOM元素，我们用innerHTML直接放进去了，这个时候它并不在DOM的结点树下
//比如说在li下放心一个div那么页面的DOM元素树里是无法找到这个结点的，将来我们所有DOM操作的话，都无法对这个结点进行操作。还有一个缺点
//就是说，因为innerHTML是专门针对html，那么对于大多数的xml的处理来说，它都是无效的。
else if(typeof li.innerHTML!='undefined')
{
li.innerHTML=message;
}
else
{
li.appendChild(document.createTextNode(message));
}
logWindow.appendChild(li);
return true;
};
};
mylogger.prototype={
//向日志窗体中添加一行，对输入的内容进行简单的处理
write:function(message){
if(typeof message =='string' && message.length==0)
{
return this.writeRow('没有输入信息');
}
//注意string的大小写
if(typeof message !='string')
{
//使用能力检测
if(message.toString)
{
return this.writeRow(message.toString());
}
else
{
return this.writeRow(typeof message);
}
}
message=message.replace(/</g,'<').replace(/>/g,'>');
return this.writeRow(message);
},
//向日志窗体中添加标题
header:function(message){
message='<span +message+'</span>';
//直接输出，不用转换
return this.writeRow(message);
}
};
//我们在window上添加了LS.log这样一个对象，它是mylogger的一个实例
window['LS']['log']=new mylogger();
Classs3实践testjs.j
LS.addEvent(window,'load',function(){
//LS.log.writeRow('This is Row');
//LS.log.write('<strong>This is bold</strong>');
LS.log.header('Write a header');
for(i in document)
{
LS.log.write(i);
}
//for(i in document)
// {
// alert(i);
// }
});
刚才犯一个错误：
mylogger.prototype={
//向日志窗体中添加一行，对输入的内容进行简单的处理
write:function(message){
if(typeof message =='string' && message.length==0)
{
return this.writeRow('没有输入信息');
}
//注意string的大小写
if(typeof message !='string')
{
//使用能力检测
if(message.toString)
{
return this.writeRow(message.toString());
}
else
{
return this.writeRow(typeof message);
}
}
message=message.replace(/</g,'<').replace(/>/g,'>');
return this.writeRow(message);
},
就是其中的红色部分，还是this的问题，在这个作用域里肯定没有这个函数，在firefox里也会报错：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function unique(data) {
data = data || [];
var a = {};
for ( var i = 0; i < data.length; i++) {
var v = data[i];
//用下标去重
if (typeof (a[v]) == 'undefined') {
a[v] = 1;
}
}
;
data.length = 0;
//遍历数组
for ( var i in a) {
data[data.length] = i;
}
return data;
}
function test() {
var arr = [ 1, 4, 1, 1, 1, 3, 3, 4, 6, 7, 8, 7, 0, 11, 22, 22 ];
var arr1 = unique(arr);
alert(arr1.join(","));
}
test();
</script>
</head>
<body>
It's a kyle-test.
</body>
</html>