✅Console로 문제해결하기
Javascript 코드가 실행되는 과정을 우리가 직접 눈으로 볼 수 없기 때문에 코드가 실행이 된 건지, 의도한 대로 진행되고 있는 건지, 함수가 잘 실행되고 있는 건지 등 의문점이 발생할 수 있다. 또한, Javascript 언어로 코딩을 하다 보면 다양한 문제를 직면하게 될 것이다. 그렇기 때문에 Javascript 코딩에서 console은 필수적이다.
➰console 띄우기
웹 개발을 하면서 사용할 console은 웹브라우저 개발자 도구의 console이다.
chrome에서 f12를 누르거나 우 클릭을 하여 검사 탭을 클릭하고 우측 창에서 Console을 클릭하면 console 창이 뜬다.
➰console 사용법 - console.log()
예시 코드로 console 사용법을 알아보자. 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<script src="example.js"></script>
</body>
</html>console.log("안녕하세요 !");위의 코드들은 console의 log를 통해 "안녕하세요 !"를 출력하고자 하는 코드이다.
코드를 실행하면 console창에 다음과 같은 화면이 뜬다.
➰console 사용법 - 연산, 기능 테스트
이외에도 간단한 연산이나 기능을 테스트하는 데에 console을 사용할 수 있다.
Javascript 파일에서 선언한 n의 값이 현재 얼마인지 볼 수 있다. 다음 코드를 실행하고 console에서 확인해 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<script src="example.js"></script>
</body>
</html>let n = 13;
위의 코드를 실행하고 console에 n을 입력한 후 enter키를 누르면 n의 값이 제대로 출력되는 것을 볼 수 있다.
또한, 변수의 연산 결과값도 볼 수 있다.
'WEB > JS' 카테고리의 다른 글
| [JS] 5-1. 타입 및 변수 (0) | 2021.09.19 |
|---|---|
| [JS] 4-2. 과제 - 콘솔 사용법 (0) | 2021.09.19 |
| [JS] 3-2. 과제 - HTML + Javascript(2) (0) | 2021.09.19 |
| [JS] 3-1. HTML + Javascript(2) (0) | 2021.09.19 |
| [JS] 2. HTML + Javascript(1) (2) | 2021.09.14 |
