베짱이와 노는 개미

웹개발(javascript)프로젝트 챗봇만들기-#4 콘솔 본문

웹개발(JAVASCRIPT)프로젝트-챗봇만들기

웹개발(javascript)프로젝트 챗봇만들기-#4 콘솔

jsistop16 2021. 9. 13. 11:39

콘솔의 역할에 대해서 쉽게 설명해보겠다

 

프로그래밍을 하는 과정에서 우리가 작성한 문장이 의도대로 잘 작동하는 지 확인해보기 위한 도구이다.

 

예를들어서 html파일에서 버튼을 만들고 그 버튼을 누를때마다 숫자가 증가 또는 감소를 하는 웹페이지를 만들었다고

가정하자

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button onclick="up()">증가버튼</button>
        <button onclick="down()">감소버튼</button>
        <button onclick="zero()">초기화버튼</button>
        <script src="./countday4.js"></script>
    </body>
</html>

 

이런식으로 html파일에서 버튼 3개(버튼은 마음대로 생성해줘도 된다.)를 만들어주고

var n=0;

function up(){
    console.log(++n);
}

function down(){
    console.log(--n);
}

function zero(){
    console.log(0);
    n=0;
}

이런식으로 각 버튼에 대한 증가,감소 하는 함수를 정의해주면

 

실제로 버튼이 눌렸을때 값이 변하는지를 콘솔창을 통해 확인할수 있는것이다.

 

콘솔창은 웹페이지 에서 F12키를 누르면 오른쪽에 새로운 공간이 뜨는데

 

여기서 상단탭에 Console버튼을 누르면 뜨는 창이다.

자그럼 우리가 만든 페이지에 증가,감소 버튼을 눌렀을때 어떤 결과값이 콘솔창에 뜨는지 확인해보자

 

증가 증가 증가 감소 감소 증가 초기화 증가 증가 를 순서대로 누른 결과이다.

 

제대로 작동된다는것을 콘솔창을 통해 확인하는것이다.

 

우리가 프로그래밍 문법 공부를 하거나 알고리즘 공부를 할때 IDE에서 결과값이 바로바로 밑에 뜨는데

 

이것과 같은 역할이다.

 

다만 웹개발을 할때는 콘솔창을 우리가 수동으로 열어주면 되는것이다.

 

자주 사용하게 될것이다.

'웹개발(JAVASCRIPT)프로젝트-챗봇만들기' 카테고리의 다른 글

웹개발(javascript)프로젝트 챗봇만들기-#6 연산자  (0) 2021.09.15
웹개발(javascript)프로젝트 챗봇만들기-#5 데이터타입과 변수선언  (0) 2021.09.14
웹개발(javascript)프로젝트 챗봇만들기-#3 자바스크립트적용해보기  (0) 2021.09.10
웹개발(javascript)프로젝트 챗봇만들기-#2 자바스크립트란?  (0) 2021.09.09
웹개발(javascript)프로젝트 챗봇만들기-#1 자바스크립트란?  (0) 2021.09.08
'웹개발(JAVASCRIPT)프로젝트-챗봇만들기' Related Articles more