作品網址:


https://steven5j.github.io/09-Dev-Tools-Domination/

 

 


主題目標


開發工具 Console 的運用說明。介紹 log 、 warn 、 error 、 info 、 assert 、 clear 、 dir 、groupCollapsed 、 groupEnd 、 count 、 time 、 timeEnd 等指令運用。

 


需求思考分析


  1. 依照題目要求 完成相關網頁處理。

 


處理步驟


步驟 1.

console.log 基本運用,利用 log(string) 裡面輸出字串。
進階運用是透過字符的替換

  • %s:字串
  • %f:浮點數
  • %o:物件
  • %d:整數
  • %c:設定輸出的樣式,在之後的文字將按照第二個參數里的設置進行顯示
console.log("I am a string: %s ", "log"); //log
console.log("I am a float number: %f ", 1.23); //1.23
console.log("I am a object: %o ", {name:"allen"}); // {name:"allen"}
console.log("I am a int number: %d ", 1); //1
console.log("%c other style", "color: #00fdff; font-size: 2em;");
string format sample

步驟 2.

各式不同的訊息類型

  • warning 訊息前出現此符號 
  • Error 訊息前出現此符號 
  • Info 單純只有訊息

步驟 3.

Preserve log

測試使用的 assert 與清除 console 的方法 clear
使用 chrome 的時候,看一下有沒有設定 Preserve log ,這個選項勾選的話, clear 會無法清除 console 喔

查看 DOM 元素,分別使用基本方式 log() 與 dir()

  • log() 假如是物件的話,會直接輸出物件內容;假如是 DOM 則會輸出 HTML 標籤
  • dir() 以樹狀結構呈現結果

步驟 4.

進行分組、統計計算與時間計算等。分別運用 groupCollapsed 、 count 與 time


特別技術、函式


<HTML>

<CSS>

<JavaScript>

console

此篇主題都是 Console 的運用,可以參考 MDN 上的說明來學習。

Element.classList

<strong>Element.classList</strong> 唯讀屬性代表了該元素所擁有之類別屬性(Class Attribute)的即時更新集-DOMTokenList

Console.assert()

測試使用,當判斷的條件式成立,不會有任何反應,當條件式不成立,則會提供錯訊息,然後訊息顯示自訂的訊息部分

console.assert(1===1, 'this is wrong');  
console.assert(1===2, 'this is wrong');  // Assertion failed: this is wrong

Console.count()

輸出 count() 被調用的次數。此函數接受一個可選參數 label
如果有 label ,此函數輸出為那個指定的 label 和 count()被調用的次數。
如果 label 被忽略,此函數輸出 count() 在其所處位置上被調用的次數。

var user = "";

function greetEmpty() {
  console.count();
}
function greet() {
  console.count(user);
  return "hi " + user;
}
greetEmpty();       // 1
greetEmpty();       // 2
greetEmpty();       // 3
console.count();    // 1

user = "bob";
greet();                // "bob: 1"
user = "alice";
greet();                // "alice: 1"
greet();                // "alice: 2"
console.count("alice"); // "alice: 3"


Console.dir()

在控制台中顯示指定JavaScript對象的屬性,並通過類似文件樹樣式的交互列表顯示。

groupCollapsed() 與 groupEnd()

console .groupCollapsed

在Web控制台上創建一個新的分組.隨後輸出到控制台上的內容都會被添加一個縮進,表示該內容屬於當前分組,直到調用 console.groupEnd() 之後,當前分組結束。和 console.group() 方法的不同點是,新建的分組默認是折疊的。用戶必須點擊一個按鈕才能將折疊的內容打開.

說明上這兩個方法都是無參數,但是範例中,是可以輸入參數的,輸入的參數則是顯示的分組標題文字。

const dogs = [{ name: "Snickers", age: 2 }, { name: "hugo", age: 8 }];
dogs.forEach(dog => {
  // 此是分組標題
  console.groupCollapsed(`${dog.name}`);
  console.log(`This is ${dog.name}`);
  console.log(`${dog.name} is ${dog.age} years old`);
  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
  console.groupEnd();
});


time() 與 timeEnd()

console.time

你可以啟動一個計時器(timer)來跟踪某一個操作的佔用時長。每一個計時器必須擁有唯一的名字,頁面中最多能同時運行 10,000 個計時器。當以此計時器名字為參數調用 console.timeEnd() 時,瀏覽器將以毫秒為單位,輸出對應計時器所經過的時間.

計算出來的時間以毫秒顯示


 

參考資料:


JS30紀錄 09-Dev Tools Domination: https://shunnien.github.io/2017/12/26/Javascript30days-9/

Js 30 day 中文指南:https://github.com/soyaine/JavaScript30

發佈留言