javascript学习6——javascript面向对象（实战）制作调试日志

一般我们在javascript看效果的时候，往往会用alert函数。

试想，如果我们想看一下document下有多少个对象，那么，我们要可能会写出这样的代码：

[javascript]

for(i in document)

{

alert(i);

}

可是在document下有一百多个对象，那么我们要在浏览器中不停的单击一百多次才可以看全，为此，我们来制作一个简单的日志调试，也是对我们前面学习知道的一个巩固。

制作出来的效果图如下：

调用页面：

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

</body>

</html>

Classs3实践myLog.js

[javascript]

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 undefi

补充：web前端 , JavaScript ,

上一个：javascript学习7——javascript DOM(上)
下一个：jQuery对表单的操作

更多图片编程知识:

更多JAVA疑问解答：: java怎么在线读取ftp服务器上的文件内容; 关于程序员的职业规划; HTML和JSP矛盾吗？; java小程序如何打包？; java怎么split路径文件名？; 关于Hibernate实体自身多对一的抓取问题; 关于apache2+tomcat群集出现的问题; SSH 导入导出excel 谁有这块的资料吗?; springmvc 加载一个jsp页面执行多个方法报404; 关于用jquery 导入 excel; java对时间进行循环放到List中; 一个图片的输入输出程序，第一次调用某方法会中断，第二次调用则正常; 请上过传智播客的人说一下传智播客怎么样呀！是不是像它说的那样好呀！; spring的schema怎么配置; 【菜鸟求助】SSH中怎么从JSP页面往后台传值呢

javascript学习6——javascript面向对象（实战） 制作调试日志

javascript学习6——javascript面向对象（实战）制作调试日志