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('Thisis bold!');
    
     IC.log.header('Witha header');
    
     //IC.log.write('writesource: This is bold!');
    //遍歷整個 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,"/g,">");
          returnthis.writeRaw(message);
    },
    //向日志窗體中添加標題
    header:function(message){
          message ='' + message +'';
          returnthis.writeRaw(message);
    }
};
 
window['IC']['log'] = new myLogger();

4.log-1.html文件中隻添加瞭其他三個.js文件

 
<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>
 

5.運行結果

6.對比

如果使用alert的話,顯示的內容少還是可以應用的，但是像此例中需要顯示這麼多內容，那就太不人性化瞭，由於這裡我們使用瞭滾動條而且固定瞭顯示框的高度，所以大傢看到的內容隻有這麼一點，下面我把logWindow.style.height= “200px’ 改為logWindow.style.height= ‘700px’大傢再看看效果，看完後就知道在這裡該與alert說拜拜瞭

源代碼下載地址：https://download.csdn.net/detail/cjr15233661143/6651719,歡迎廣大同胞免費下載