반응형
코드 분석
<!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';
}
</script>
</body>
</html>
목표
콘솔 창에서 확인할 수 있는 여러가지에 대해 알아보자
분석
console.log('hello');
console.log('Hello I am a %s string!', '💩');
console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')
console.warn('OH NOOO');
console.error('Shit!');
console.info('Crocodiles eat 3-4 people per year');
여러가지 내용 중 내가 모르던 것만 골라서 보겠다.
%s는 그 자리에 ,뒤의 부분에 적은 내용을 넣는 것이다.%c는 ,앞에 있는 내용에다가 ,뒤의 스타일을 적용하는 것이다.
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');
console.log(p);
console.dir(p);
.assert는 ,앞의 내용이 참일경우 아무것도 반환하지 않고,
거짓일 경우 ,뒤의 내용을 반환하는 것이다.
따라서 이 코드에서는 classList에 'ouch'가 없기 때문에 뒤의 문장이 반환된다..dir의 경우 그 아래에 있는 classList를 볼수 있게 해준다.
<46: .log , 47: .dir 의 반환값.>
dogs.forEach(dog => {
console.group(`${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(`${dog.name}`);
})
.forEach라는 것은 그 내용을 소속 객체의 내용에 하나씩 적용하는 것이다..group과 .groupEnd는 이 두 함수 사이의 내용을 ()에 따라서 분류하는 함수이다.
이 에문에서는 ${dog.name}이 되어 아래의 그림처럼 나오게 된다.
console.count('Wes');
console.count('Wes');
console.count('Smith');
console.count('Wes');
console.count('Wes');
위의 내용은 결과 사진으로 설명을 대신하겠다.
console.time('fetching data');
fetch('https://api.github.com/users/wesbos')
.then(data => data.json())
.then(data => {
console.timeEnd('fetching data');
console.log(data);
})
.time과 .timeEnd도 이 두 함수 사이의 내용이 완료되는 동안의 시간을 체크해 주는 것이다.
한 가지 유의해야 할 점은 .time과 .timeEnd 뒤의 인자부분에 같은 내용을 입력해야 하는데, 그 이유는 뒤에 적어주는 내용을 key값으로 사용하여 계산을 하기 때문이다.
마무리
오늘 내용을 어려운 내용이 별로 없었던 것 같다.
끝.
반응형
'개발 > JavaScript 30' 카테고리의 다른 글
| 11. Custom Video Player (0) | 2017.04.18 |
|---|---|
| 10. Hold Shift and Checkboxes (0) | 2017.04.14 |
| 8. Fun with HTML5 Canvas (0) | 2017.04.12 |
| 7. Array Cardio Day 2 (2) | 2017.04.11 |
| 5. Flex Panel Gallery (0) | 2017.04.07 |
