iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
0
自我挑戰組

新手村-30 Day JS Coding Challenge系列 第 9

新手村09 - Dev Tools Domination

09 - Dev Tools Domination

俗話說的好,一天一蘋果,醫生遠離我

一天一 JS,What the f*ck JavaScript?

small steps every day - 記錄著新手村日記

完成目標

  • 一個開發工具和 console 技巧的範例,直接來練習吧!

index_START.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Console Tricks!</title>
</head>
<body>

  <p onClick="makeGreen()">×BREAK×DOWN×</p>

  <script>
    const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

    function makeGreen() {
      const p = document.querySelector('p');
      p.style.color = '#BADA55';
      p.style.fontSize = '50px';
    }

    // Regular

    // Interpolated

    // Styled

    // warning!

    // Error :|

    // Info

    // Testing

    // clearing

    // Viewing DOM Elements

    // Grouping together

    // counting

    // timing

  </script>
</body>
</html>

JS - step by step

首先,範例都與 JS 的 Console 有關,所使用到的 Console 方法都可以參考以下

Console:https://tinyurl.com/y6nrq9gq

  1. Regular Console

    console.log('hello');
    
    // hello
    
  2. Interpolated Console

    console.log('hi my name is %s','chester');
    console.log('hi my name is %d', 3.14 );
    console.log('hi my name is %f', 3.14 );
    
    // hi my name is chester
    // hi my name is 3
    // hi my name is 3.14
    
  3. ES6 Console

    let es6 = 'es6';
    console.log(`my name is ${es6}`);
    
    // my name is es6
    
  4. Styled Console

    console.log("%c住手", "font-size:60px; color:red");
    
    // 紅色的大大的住手(fb?)
    
  5. Warning Console

    console.warn("警告");
    
    // 黃色的緊告
    
  6. Error Console

    console.error("錯誤");
    
    // 紅色的錯誤
    
  7. Info Console

    console.info("好像跟log沒有什麼差別,以前有一個圖標的樣子orz");
    
  8. Testing Conosle

    console.assert(true,"訊息");
    console.assert(false,"前面訊息沒有通過,就會噴這段訊息");
    console.assert("","前面訊息沒有通過,就會噴這段訊息");
    console.assert(0,"前面訊息沒有通過,就會噴這段訊息");
    console.assert(NaN,"前面訊息沒有通過,就會噴這段訊息");
    console.assert(null,"前面訊息沒有通過,就會噴這段訊息");
    console.assert(undefined,"前面訊息沒有通過,就會噴這段訊息");
    
  9. Clearing Console

    CTRL+L
    
  10. Viewing DOM Elements Console

    let p = document.querySelector("p");
    console.log(p);
    console.log(dogs);
    // <p onclick="makeGreen()">×BREAK×DOWN×</p> html的dom
    // (2) [{…}, {…}]                            array的dom
    
    console.dir(p);
    console.dir(dogs);
    
    // p        P內的所有可以用  展開dom告訴有哪些屬性可以用
    // Array(2) DOGS內的所有可以用  展開dom告訴有哪些屬性可以用
    
  11. Grouping together Console

    console.table(dogs);
    console.table(dogs,['name']);
    // 只要有name欄位
    
  12. counting Console

    console.count('Wes');
    console.count('Wes');
    console.count('Steve');
    console.count('Steve');
    console.count('Wes');
    console.count('Steve');
    console.count('Wes');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');
    console.count('Steve');
    
    // 印出 count 東西的數量
    
  13. timing Conolse

    console.time("test1");
    let i
    let j 
    for (i = 0 ; i < 1000; i++) {
    	j = i;
    }
    console.timeEnd("test1");
    
    // test1: 0.015869140625ms
    
    console.time("test2"); 
    for (let i = 0 ; i < 1000; i++) {
    	j = i ;
    }
    console.timeEnd("test2");
    
    // test2: 0.01513671875ms
    

就大功告成啦!

JS - Final

<script>
  const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

  function makeGreen() {
    const p = document.querySelector('p');
    p.style.color = '#BADA55';
    p.style.fontSize = '50px';
  }

  // Regular
  console.log('hello');
  
  // Interpolated
  console.log('hi my name is %s','chester');
  console.log('hi my name is %d', 3.14 );
  console.log('hi my name is %f', 3.14 );
  
  //ES6
  let es6 = 'es6';
  console.log(`my name is ${es6}`);

  // Styled
  console.log("%c住手", "font-size:60px; color:red");

  // warning!
  console.warn("警告");

  // Error :|
  console.error("錯誤");

  // Info
  console.info("跟log沒有什麼差別,以前有一個圖標的樣子orz");

  // Testing
  console.assert(true,"訊息");
  console.assert(false,"前面訊息沒有通過,就會噴這段訊息");
  console.assert("","前面訊息沒有通過,就會噴這段訊息");
  console.assert(0,"前面訊息沒有通過,就會噴這段訊息");
  console.assert(NaN,"前面訊息沒有通過,就會噴這段訊息");
  console.assert(null,"前面訊息沒有通過,就會噴這段訊息");
  console.assert(undefined,"前面訊息沒有通過,就會噴這段訊息");

  // clearing
  // CTRL+L

  // Viewing DOM Elements
  let p = document.querySelector("p");
  console.log(p);
  console.log(dogs);

  console.dir(p);
  console.dir(dogs);

  // Grouping together
  console.table(dogs);
  console.table(dogs,['name']);

  // counting

  console.count('Wes');
  console.count('Wes');
  console.count('Steve');
  console.count('Steve');
  console.count('Wes');
  console.count('Steve');
  console.count('Wes');
  console.count('Steve');
  console.count('Steve');
  console.count('Steve');
  console.count('Steve');
  console.count('Steve');

  // timing

  console.time("test1");
  let i
  let j 
  for (i = 0 ; i < 1000; i++) {
    j = i;
  }
  console.timeEnd("test1");

  console.time("test2"); 
  for (let i = 0 ; i < 1000; i++) {
    j = i ;
  }
  console.timeEnd("test2");
</script>

本刊同步於個人網站:http://chestertang.site/

本次範例程式碼原作者來源:https://tinyurl.com/yxhsxcnl


上一篇
新手村08 - Fun with HTML5 Canvas
下一篇
新手村10 - Hold Shift and Check Checkboxes
系列文
新手村-30 Day JS Coding Challenge30

尚未有邦友留言

立即登入留言