Picasso's Fantasy Notepad: JavaScript Console

這一次要記錄的是JavaScript下的一個功能函式─console；為何叫Console，因為它就像我們在開發產品時，並不是每個3C產品都有電腦螢幕，所以很多開機的訊息，或是一些Run Time (執行階段)的Debug Messages我們無法得知，這個時後我們就會將產品透過RS-232來和電腦連線，再執行類似Tere Term的軟體來接收訊息。

同理，應用於網頁設計的程式語言JavaScript也有類似這樣的函式；可以先看一下它要怎麼用：

console.log("LOG \n");
console.error("ERROR!! \n");
console.info("Information!! \n");
console.warn("WARRNING!! \n");

console函式也有區分訊息等級，就跟Linux Kernel Space的printk()，或是User Space的syslog()一樣。

var objPerson = {
    FirstName: "Pablo",
    LastName: "Picasso",
    Tel: "(02) 2887-9576",
    Mobile: "0800-024-365",
    Age: 32
};
console.log(objPerson);

除了列印出一般的格式化訊息之外，還能夠展現物件 (Object)。

console.log("%d: %s \n", 6, "Hello!! World!!");

也能夠像C語言中的API printf()一樣，格式化所要輸出的訊息。

console.time("Start0");
// ....
console.timeEnd("Start0");

除此之外，還提供了計時器 (Timer)的方法，可以讓程式設計師去觀察某些函式 (或是功能)的執行時間；time()和timeEnd()必需要成對出現，可以在括弧中輸入一些關鍵字 (Key Word)來確保它們是一對的，在此範例中是用"Start0"。

來看一下完整的程式碼和執行結果：

<!DOCUMENT HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.prg/TR/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="./jquery-1.8.3.min.js"></script>
<script language="JavaScript" type="text/javascript">
var objPerson = new Object();

objPerson.FirstName = "Pablo";
objPerson.LastName = "Picasso";
objPerson.Tel = "(02) 2887-9576";
objPerson.Mobile = "0800-024-365";
objPerson.Age = 32;
</script>
</head>
<body>

</body>
<script language="JavaScript" type="text/javascript">
    (function($) {
        $(window.document).ready(function() {
            console.time("Start0");
   
            console.log("LOG \n");
            console.error("ERROR!! \n");
            console.info("Information!! \n");
            console.warn("WARRNING!! \n");
   
            console.log(objPerson);
            console.log("%d: %s \n", 6, "Hello!! World!!");
   
            console.timeEnd("Start0");
   
            return;
        }); 
    })(jQuery);
</script>
</html>

在MSIE中，按下F12，開啟「開發人員工具 (L)」，如下圖：