자바스크립트(JS) prompt( ), document.write( ), alert( ), console.log( ) 함수 사용, 콘솔로 오류 확인하기

이번 글에서는 기초적인 함수 몇 가지와 콘솔로 오류를 확인하는 방법을 다뤄 보겠습니다.

• prompt( ), document.write( )
  - prompt( ) 함수 : 알림 창이 나와 사용자로부터 값을 입력 받거나 정보를 알려주는 함수(C의 Scanf, Java의 Scanner와 유사)
  - document.write( ) 함수 : 웹 페이지 화면에 텍스트를 출력해주는 함수

prompt 함수 사용 코드

        - 위 코드는 prompt( )로 이름을 입력받아 출력해주는 코드입니다.
          1) 7번째 줄 : 웹 브라우저 상단 탭(Tab) 이름을 Welcome으로 지정합니다.
          2) 8 ~ 13 번째 줄 : body의 스타일을 지정해줍니다. 글씨 사이즈를 2.3, 텍스트 위치를 왼쪽으로 정렬합니다.
          3) 18번째 줄 : prompt로 값을 받아 문자열 자료형인 name에 저장합니다.
          4) 19번째 줄 : <b> 굵은 글씨, <big> 큰 글자 크기로 name의 값을 불러와 웹 브라우저 화면에 출력해줍니다. 

prompt 알림창 화면

결과 화면

           - 라이브서버로 열어서 확인해보면 prompt로 값을 입력하는 알림창이 뜨게 됩니다.
           - 그리고 prompt로 값을 받아온 name을 불러와 정상적으로 사용자가 입력한 값이 출력되는 것을 볼 수 있습니다.
           - 근데 저는 여기서 2가지의 궁금점이 생겼습니다. 
             1) 입력을 하지않고 확인을 클릭하면 어떤 결과가 나올까?
             2) 취소 버튼을 누르게되면 어떤 결과가 나올까?
           

입력없이 확인 버튼 클릭하였을 때 결과 화면

취소 버튼 클릭 시 결과 화면

       - 바로 실행해 보았더니 입력하지 않고 확인 버튼을 클릭하였더니 생략된 것 처럼 출력된 것을 볼 수 있습니다.
       - 취소 버튼 클릭 시에는 아무것도 없음을 의미하는 "NULL"이 출력된 것을 알 수 있었습니다.
       - 다음은 document( ) 함수 입니다. prompt로 값을 입력받아 document.write로 웹 브라우저 화면에 출력합니다.
         아래와 같이 입력한 Taram이라는 값이 정상적으로 출력되는 것을 확인 할 수 있습니다.
         * undefined란? : 콘솔에서 결과 값을 표시하는데 특별히 표시할 결과 값이 없을 경우 나타남.

prompt로 값을 받아 document.write로 출력

웹 브라우저 화면에 출력된 모습

• alert( ), console.log( )
  - console.log( )와 alert( )와 같은 간단한 함수를 사용하기 위해서 공책과 같이 사용할 수 있는 콘솔을 먼저 열어 보겠습니다. 꼭 상단 URL 창에 about:blank를 입력하고 접속하여 해주세요!
   Window 환경에서는 Ctrl + Shift + J를 클릭하면 콘솔 창이 열립니다. 
     * 맥 OS : Command + Option + J
  - 열린 콘솔 창을 이제 공책처럼 쓰시면 결과 화면이 바로 출력되어 간단한 함수 결과가 궁금할 땐 콘솔을 사용하시는 것을 추천드립니다.
  - alert( ) 함수를 사용하기 앞서 어떤 기능인지 먼저 예를 들어 알려드리겠습니다.
     다들 비밀번호를 잘못 입력하였을 때 상단에 알림창으로 "비밀번호가 틀렸습니다"라고 뜨는 경우를 보신 적이 있을 겁니다. 이와 같이 사용자에게 알림으로 알려주는 기능을 가지고 있는 함수입니다.

콘솔에 alert( )함수 사용

        - 위와 같이 함수를 작성하고 실행 시 입력한 내용이 알림 창으로 뜨는 것을 확인할 수 있습니다.
        - console.log( ) 함수도 기능을 먼저 알려드리겠습니다. 이 함수는 괄호 안에 입력한 내용을 콘솔 결과 창에 출력
          해주는 기능을 가지고 있습니다. 위에서 알려드린 document.write( )함수와 유사하지만 console.log는 콘솔에 출력,
           document.write는 웹 브라우저 화면에 출력되어 출력 위치가 다르다는 것을 확인 할 수 있습니다.

console.log함수 사용

        - 이와 같이 콘솔 결과 창에 출력되는 것을 알 수 있습니다.
        - 다음은 콘솔 창에서 오류를 확인할 수 있는 방법입니다.
          보통 C언어나 Java 코드를 작성할 땐 실행 했을 때 오류가 있는 부분을 컴파일에서 알려주지만
          html은 괄호같은 중요한 것을 제외하고는 알려주지 않습니다.
          그래서 콘솔 창에서 오류를 확인하여 코드를 수정할 수 있는 방법에 대해 말할려고 합니다다.
          코드를 작성한 뒤 실행하고 콘솔 창을 열어보면 19번째 줄에서 오류가 발생하고 있다는 것을 확인할 수 있습니다.

콘솔로 오류 확인

콘솔에서 말해준 오류 찾기

          19번째 줄을 보면 Nowtimes가 18번째 줄에서 선언한 변수와 다른 것을 확인 할 수 있습니다.
          오타 문제가 발생한 것이므로 NowTime으로 수정한 뒤 실행하면 오류 없이 실행되는 것을 확인할 수 있습니다.

오류 수정 후 정상적으로 출력