JS30-Day9 & Day11 练习重点整理

JS30-Day9-14 Must Know Dev Tools Tricks

教你14个使用 Dev Tools 的技巧，以下内容是记录了我不知道的技巧

1. 为 console.log 加上 css 样式

字串最前面加上 %c

console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue');

2. 断言 console.assert()

括号里可写判断式，第一个参数是 false，就输出第二个参数的内容

const p = document.querySelector('p');console.assert(p.classList.contains('ouch'), 'That is wrong!');

3. 印出 DOM 元素 console.dir()

印出 DOM 元素还有其属性
範例:

console.dir(p);

4. console.groupCollapsed()

用于包覆 console 的内容，可搭配 console.groupEnd() 结束包覆内容
範例:

console.log("outside group");console.groupCollapsed();console.log("inside group");console.groupEnd();console.log("outside group");

5. console.time()

和 console.timeEnd() 搭配使用，计算此两行程式内的程式执行时间

console.time('fetching data');fetch('https://api.github.com/users/wesbos')  .then(data => data.json())  .then(data => {    console.timeEnd('fetching data');    console.log(data);  });

JS30-Day11-Custom HTML5 Video Player

实作一个影片拨放器

1. 选取 HTML data 属性

在教学中看到用 querySelectorAll 选取标籤内的 data，以前不知道可以这样选取，纪录一下

const skipButtons = player.querySelectorAll('[play-skip]');

2. timeupdate 事件

属于 Audio/Video 的事件，这里用来控制影片进度条

3. 小技巧

为了让滑鼠实际有点击并拉动进度条时才会成功控制影片进度，所以使用 mouseClick 纪录点击状态，当 mouseClick 为 true 时，才触发后面 controlBar() 此函式

progress.addEventListener('mousemove', (e) => mouseClick && controlBar(e));

全部练习的程式码都在此连结:
https://github.com/a90100/JavaScript30