JS에서 웹 브라우저 화면에 변수나 데이터를 출력하는 4가지 방법

JS에서 웹 브라우저 화면에 변수나 데이터를 출력하는 데에는 4가지의 방법이 있다. 

1) document.write() 

2) window.alert() 

3) console.log() 

4) innerHtml 등을 이용하는 방법이 그것이다. 하나 하나 예제를 보면서 설명해 보겠다.

 

1. document.write()를 사용하는 방법

document.wirte()은 JS에서 가장 쉽게 변수나 문자열을 출력하게 해 주는 메서드이다. ()속에 출력하고 싶은 변수나 문자를 입력하면 된다.  <h3></h3> 태그 사이에는 무엇을 하는 것인지에 대한 주제를 입력해서 현재 어떤 작업을 하는지 알 수 있게 한다. <script></script> 태그 사이에 JS 코드가 들어간다. document.wirte() 메서드의 ()속에 출력내용이 변수 일 경우에는 " " 없이 변수명만 입력하면 되고 문자나 문자열 일 경우에는 " " 안에 내용을 입력한다. <br>은 줄바꿈을 위한 태그이다.

 

"document.write()를 이용하여 출력하기" 라는 주제부 표시와 c 변수에 대한 값, 문자열이 브라우저안에 제대로 표시되었다.

 

 

2. window.alert()를 사용하는 방법

두번째 방식은 브라우저 화면에 경고창을 띄워서 변수나 문자를 출력하는 방식이다. window.alert()의 ()안에 내용을 입력한다. 1번에서 보았던 것처럼 변수를 출력할 수도 있고 문자나 문자열을 출력할 수도 있다.

 

브라우저의 경고 창이 뜨면서 내용이 출력된다.

 

반응형

 

3. console.log()를 사용하는 방법 

console.log()는 브라우저 화면에 바로 내용이 출력되는 것이 아니고 브라우저 화면이 나온 상태에서 'F12' 키를 눌러 개발자 도구에 내용이 출력되게 하는 것이다. 이 방식은 JS 코드를 짜면서 중간 중간 변수나 문자등이 제대로 입력되고 있는지 확인하는 용도로 많이 사용된다.

 

 

코드를 실행하고 브라우저가 뜨면 'F12'키를 눌러 개발자 도구를 열어본다. 그리고 'Console' 탭을 클릭해 보면 그 하단에 출력 내용이 보인다.

 

4. innerHtml을 사용하는 방법

이 방식은 html, css, js 세가지 언어를 모두 사용하는 복합적인 문법사항이다. <p> 태그 안에 id를 지정해 두고 하단 JS 코드 부분에서 id를 확인하고 그 위치에 변수나 문자열을 출력하게 하는 방식이다. JS 를 사용할때 가장 많이 사용하는 문법 사항중 하나이므로 잘 알아두는 것이 좋다.

 

코드에서 지정한 대로 "innerHTML을 이용하기 출력하기"란 문자열 하단부 <p></p>태그 사이에 입력한 문자열이 제대로 출력된 것을 볼 수 있다.