JavaScript-创建日志调试对象与alert说拜拜

原创 2013年12月03日 20:14:57

  

JavaScript的学习是先跟着牛腩老师学的,他的视频中讲的比较简单,很顺利的就学完了,接下来是跟着姜昊老师学习,本以为有从牛腩老师那学的基础做铺垫,这里应该也会很轻松的学完,结果不是很乐观,虽然也进行了总结,也跟着做例子,但是还是云里雾里的,例子中很多东西并不能明确确实是起什么作用的,遇到问题用fireBug调试也不是很好,就是接下来要与大家分享的这个例子我犯了一个说大不大但很致命的错误,直接导致我的程序运行不出来,好了不发牢骚了马上给大家分享我的小成果,虽然……但是运行出来的时候还是如此高兴!哈哈

这个实例中涉及到了三个.js文件和一个.html文件构成,下面分别介绍以上四个文件


1.  IC.js是自己建立的JavaScript库,在这个例子中,需要在原来的库中添加一个方法

functiongetBrowserWindowSize(){
           var de = document.documentElement;
          
           return {
                    'width'      :(
                             window.innerWidth
                             || (de &&de.chileWidth)
                             || document.body.clientWidth),
                    'height' :(
                             window.innerHeight
                             || (de &&de.clientHeight)
                             ||document.body.clientHeight)
                   
           }
};


2.  test.js中代码的主要作用是向window对象里面添加一个load事件。

IC.addEvent(window, 'load', function(){
     //验证
     IC.log.writeRaw('Thisis raw.');
    
     IC.log.writeRaw('<strong>Thisis bold!</strong>');
    
     IC.log.header('Witha header');
    
     //IC.log.write('writesource: <strong>This is bold!</strong>');
    //遍历整个 document
     for(i in document){
          IC.log.write(i);
     }
 
});


3.myLog.js中涉及到 myLogger函数,此函数还包含构造函数,createWindow函数,writeRaw函数。这些函数将在rest.js文件中的到验证

function myLogger(id){
    id =id||"ICLogWindow";
    //日志窗体的引用
    var logWindow =null;
    //创建日志窗体
    var createWindow =function(){
          //获取浏览器窗口的大小
          varbrowserWindowSize = IC.getBrowserWindowSize();
          //浏览器高度
          var top =(browserWindowSize.height-200)/2||0;
          //浏览器左上角坐标
          var left =(browserWindowSize.width-200)/2||0;
         
          //使用UL
          logWindow =document.createElement('UL');
         
          //添加ID进行标识
          logWindow.setAttribute("id",id);
         
          //对窗体进行CSS样式的控制
          logWindow.style.position= 'absolute';
          logWindow.style.top= top + 'px';
          logWindow.style.left= left + 'px';
         
          //对UL窗体进行控制
          logWindow.style.width= '200px';
          logWindow.style.height= '200px';
          logWindow.style.overflow= 'scroll'; //添加滚动条
         
          //对UL进行控制,根据盒子模型
          logWindow.style.padding= '0';
          logWindow.style.margin= '0';
          logWindow.style.border= '1px solid black';
          //背景白色,列表样子没有,字体设置
          logWindow.style.backgroundColor= 'white';
          logWindow.style.listStyle= 'none';
          logWindow.style.font= '10px/10px Verdana, Tahoma, Sans';
         
          //在body上添加一个子节点,我们创建的窗体挂载到BODY上
          document.body.appendChild(logWindow);
         
    }
    //声明特权方法,向日志文件中添加一条记录另一种写法是 myLogger.prototype.writeRaw = function(){}
    this.writeRaw =function(message){
          //如果初始窗体是不存在的,则生成日志窗体
          if(!logWindow){
               createWindow();
          }
          //创建LI 的DOM节点
          var li =document.createElement('LI');
          //进行CSS样式控制
          li.style.padding= '2px';
          li.style.border= '0';
          li.style.borderBottom= '1px dotted black';
          li.style.margin= '0';
          li.style.color = '#000'
         
          //验证message信息
          if(typeofmessage == 'undefined'){
               li.appendChild(
                     document.createTextNode('Messageis undefined')
               );
          }elseif(typeof li.innerHTML != undefined){
               li.innerHTML= message;
          }else{
               li.appendChild(
                     document.createTextNode(message)
               );
          }
         
          logWindow.appendChild(li);
          return true;
    };
}
 
//使用对象自变量的方式声明特权方法
myLogger.prototype = {
    //也是向日志窗体添加一行,对输入的内容进行简单处理.
    write:function(message){
          if(typeofmessage == 'string' && message.length==0){
               returnthis.writeRaw('没有输入信息');
          }
          if(typeofmessage != 'string'){
               if(message.toString){
                     returnthis.writeRaw(message.toString());
               }else{
                     returnthis.writeRaw(typeof message); 
               }
          }
         
          //将大于号小于号进行正则转换成HTML标记
          message =message.replace(/</g,"<").replace(/>/g,">");
          returnthis.writeRaw(message);
    },
    //向日志窗体中添加标题
    header:function(message){
          message ='<spanstyle="color:white;background-color:black;font-weight:bold;padding:0px5px;">' + message +'</span>';
          returnthis.writeRaw(message);
    }
};
 
window['IC']['log'] = new myLogger();


4.log-1.html文件中只添加了其他三个.js文件

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>日志</title>
 
<scriptlanguage="JavaScript" type="text/javascript"src="IC.js"></script>
<scriptlanguage="JavaScript" type="text/javascript"src="test.js"></script>
<scriptlanguage="JavaScript" type="text/javascript"src="myLog.js"></script>
 
</head>
<body>
</body>
</html>


5.运行结果

             

6.对比

如果使用alert的话,显示的内容少还是可以应用的,但是像此例中需要显示这么多内容,那就太不人性化了,由于这里我们使用了滚动条而且固定了显示框的高度,所以大家看到的内容只有这么一点,下面我把logWindow.style.height= '200px' 改为logWindow.style.height= '700px'大家再看看效果,看完后就知道在这里该与alert说拜拜了

源代码下载地址:http://download.csdn.net/detail/cjr15233661143/6651719,欢迎广大同胞免费下载

 

 

      

 

    

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JavaScript面向对象实例——创建日志调试对象来代替alert函数进行调试

依照标题,本片博客介绍这个小例子。下面博客总结js面向对象知识。         我们做这个小例子的目的就是理解js面向对象的知识。先拿个例子试试手,然后再比较系统的总结下。这块儿知识在看视频的时候,...

HTML、CSS和JavaScript学习四(Window对象之alert、confirm、prompt、open、onload...)

Window对象 1.alert(“文本内容”):警告框(window中的方法),出现时,用户需要点击确定才能继续进行操作。一般在javascript学习时经常用,相当于java中的System.ou...

进一步认识Javascript中window对象的方法和属性以及重写alert方法,控制弹出窗口,frames[]数组

JS的好玩

Javascript中的window对象基本属性和方法以及对alert,confirm,prompt的使用

之前一直对BOM的东西一知半解,最近又拿起js的书来进一步学习下关于BOM的各种对象。 BOM的对象主要有: window对象:客户端Javascript中的顶级对象 navigator对象:包含客户...

当spfile、pfile以及init.ora文件丢失时,根据alert_log日志警告文件去创建spfile和pfile文件

我们知道数据库启动是要先读取

手工创建数据库及删除数据库示例--附建库时alert日志

首先是应对ORACLE_SID,DB_NAME,存放数据文件、REDO日志、控制文件等的目录进行规划。 如我的实验中:ORACLE_SID=bys3,DB_NAME为bys3,数据文件、REDO日志、...

黑马程序员——javascript语言的方法以及部分对象的使用学习日志

------- android培训、java培训、期待与您交流! ----------   javascript语言的方法以及部分对象的使用学习日志 1:javascript语言:是一门基于对象...

JavaScript日志操作对象实例

学完JavaScript,部分小结可参看我以前的博客《JavaScript中的正则表达式》、《JavaScript中的细节》、《自建JavaScript函数库》、《JavaScript中的面向对象》、...

javaScript学习日志1——面向对象

基于类的面向对象和基于原型的面向对象方式比较 在基于类的面向对象方式中,对象依靠 类来产生; 而在基于原型的面向对象方式中,对象则是依靠 构造器利用 原型(prototype)构造出来的。 基本面...

ALERT日志中常见监听相关报错之三:ORA-609 TNS-12537 and TNS-12547 or TNS-12170 TNS-12535错误的排查

1.11G中ALERT日志中有报错ORA-609 TNS-12537 and TNS-12547 or TNS-12170  12170, 'TNS-12535等问题的解决方法: Troublesho...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)