티스토리 뷰

[JQUERY]자바스크립트

jQuery 004. 콘솔에서 데이터 확인 console.log()

가산동 2018. 7. 21. 11:55


이전 강좌 보기.

>> [[JQUERY]자바스크립트] - jQuery 002. 알림창 alert()

>> [[JQUERY]자바스크립트] - jQuery 003. 출력기능 document.write()


데이터를 확인하는데 가장 많이 사용되는 기능은 console.log이다. 

앞서 알아봤던 alert() 이나 document.write() 는 사실 잘 사용되지 않는다.


시작하기에 앞서 혹여 크롬을 설치 하지않았다면 '크롬 브라우저' 를 설치해주자. 

기능면이나 활용도에서 ie, edge 보다 좋으니 웹 코딩을 공부하거나 개발중이라면 필수다.

설치법이 어렵지 않으니 설치법은 넘어간다. 설치가 완료되면 기본브라우저로 사용해주자. 


아래는 오늘 알아볼 console.log() 의 예제다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //console.log()
            
            console.log('단순문자입력');
            
            var str = '변수문자값'; 
            console.log('str',str);
            
            var num = 123;
            console.log('num',num);
            
            var list = ['a','b','c'];
            console.log('list',list);
            
            var map = {a:1,b:2,c:'a'};
            console.log('map',map);
            
        });
    </script>
</head>
    <body>
    </body>
</html>
cs

아래는 실행 화면이다.



콘솔 값을 확인하는 방법은 브라우저에서 f12 를 누르면 처음에는 elements 가보이는데, 바로옆에 console 탭이 있다. 탭을 눌러서 확인 해보면된다. list 나 map 의 경우 콘솔에서 보이는 화살표를 누르면 전체적으로 볼수있다. 


자세한 설명은 alert() 이나 documet.write() 에서 설명했으니 list 와 map만 설명 하겠다.


var list = ['a','b','c'];

console.log('list',list);


'list'라는 문자와 list 변수를 같이 console.log() 로 콘솔에 보내면 



콘솔창에 이런식으로 나오는데, 앞에 list 는 입력했던 'list' 이다.

그뒤 나오는 Array(3) 은 변수 list 이다. 화살표를 눌러보면 list의 내용을 볼수 있다.

(3)은 값이 3개가 있다는 뜻이다. 어려우면 대충 이런거구나 하고 넘어가자 쓰다보면 안다.


뒤에 index.html:21 은 예제의 라인 넘버이다. 이걸통해 어느라인에서 호출하는 지를 볼 수 있다.

화살표를 누르게 되면 




이렇게 나오는데, 0: "a" 에서 보면 0은 순서(index) 이고 "a"는 값이다. jquery 에서 순서 index)는 0부터 시작이다.


var map = {a:1,b:2,c:'a'};

console.log('map',map);


map의 경우 어떻게 나오는지 확인해보자.



map의 경우 list 와는 달리 순서(index)가 아닌 key 값이 나오는걸 볼 수 있다. 

list나 map 의 경우 추후에 설명할 예정이니 console.log()는 alert()이나 document.write() 와는 달리

[object Object]를 표시 안하고 보여준다는 것만 기억하고 넘어가자.


위에서 사용한 소스 편집기는 이전 글을 통해 설치 및 설정이 가능하다.

[[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설치하기

[[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설정하기

[[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 제이쿼리(jquery) 연결하기


저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 006. 연산자 +-*/%  (0) 2018.07.26
jQuery 005. 배열 list  (0) 2018.07.24
jQuery 003. 출력기능 document.write()  (0) 2018.07.21
jQuery 002. 알림창 alert()  (0) 2018.07.21
jQuery 001. 변수사용 var  (0) 2018.07.21
댓글