一般我们在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="LS.js"></script>
<script type="text/javascript" src="Classs3实践myLog.js"></script>
<script type="text/javascript" src="Classs3实践testjs.js"></script>
</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.listsStyle='none';
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 style="color:#3F0; background-color:#FFF; font-weight:bold; padding:0px 5px;">'+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里也会报错：
