別懷疑~又是JS30的時間啦~!我知道node很重要~不過node很多東西我想好好整理完再以偏向教學文章的形式發文，這段時間會優先完成JS30，當作一些基礎的複習，很多小細節以前再學的時候沒有注意到，實在不敢說自己已經精通CSS/HTML/JS了，所以就….繼續練習JS30囉:P
HTML
<body> //僅僅是一個函式 空白也無仿 <p onClick="makeGreen()">×BREAK×DOWN×</p> </body>
CSS
//none
Javascript
//示範用資料
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('hello I am a %s string', 'strange')
// Styled
console.log('%c I am a new sentence', 'font-size:50px;');
// warning!
console.warn('nooooooooooooo!')
// Error 😐
console.error('This is an error!')
// Info
console.info('this is another error');
// Testing
console.assert(1 === 2, 'that \'s wrong');
// clearing
console.clear()
// Viewing DOM Elements
console.log(document.querySelector('p'));
console.dir(document.querySelector('p'))
// Grouping together
console.clear()
dogs.forEach(item => {
console.group(`${item.name}`)
console.log(`the dog\'s name is ${item.name}`);
console.log(`the dog\'s age is ${item.age}`);
console.groupEnd(`${item.name}`)
})
// counting
for (let i = 0; i < 11; i++) {
console.count('Danny')
}
// timing
const root = 'https://official-joke-api.appspot.com/random_ten'
console.time('fetch data!')
fetch(root, { method: 'GET' })
.then(response => response.json())
.then(json => {
console.timeEnd('fetch data!')
console.log(json);
})
學習重點
- 了解input:checked 偽元素的使用,這個挺有意思的
- 了解event.shiftKey的用法
- 複習迴圈內this的指向與添加監聽器
參考文章
Danny的學習紀錄 