Front/javascript / / 2021. 12. 19. 18:59

[JAVASCRIPT] 출력 방법

javascript 출력 방법에 대해 알아보겠습니다.

출력 방법은 크게 아래와 같이 나눌 수 있습니다.

  • window.alert()
  • console.log()
  • document.write()
  • innerTEXT 또는 innerHTML

window.alert()


 대화 상자를 띄워서 데이터를 표시해 줍니다.

<body>
	<input type="text" id="msg" name="msg" autofocus="autofocus">
	<button>js 출력</button>
	<p id="demo"></p>
<script>
  document.querySelector("button").onclick = function (){
	  var message = document.getElementById("msg").value;
	  
	  window.alert( message );
  }
</script> 
</body>

출력 결과

console.log()


웹 브라우저의 콘솔을 통해 데이터를 출력해 줍니다.

콘솔은 크롬 브라우저를 기준으로 F12 -> 콘솔 메뉴에서 확인할 수 있습니다.

<body>
	<input type="text" id="msg" name="msg" autofocus="autofocus">
	<button>js 출력</button>
	<p id="demo"></p>

<script>
  document.querySelector("button").onclick = function (){
	  var message = document.getElementById("msg").value;
	  
	  console.log( message );
  }
</script> 
</body>

출력 결과

document.write()


주로 테스트나 디버깅을 위해 사용됩니다.

<body>
	<input type="text" id="msg" name="msg" autofocus="autofocus">
	<button>js 출력</button>
	<p id="demo"></p>

<script>
  document.querySelector("button").onclick = function (){
	  var message = document.getElementById("msg").value;
	  
	  window.document.write( message );
  }
</script> 
</body>

 

innerHTML, innerText


innerHTML과 innerText의 차이점은 innerHTML은 HTML 태그를 반영하여 출력하며 innerText는 태그를 미 반영 후 전부 출력합니다.

<body>
	<input type="text" id="msg" name="msg" autofocus="autofocus">
	<button>js 출력</button>
	<p id="demo"></p>

<script>
  document.querySelector("button").onclick = function (){
	  var message = document.getElementById("msg").value;
	  
	  document.getElementById("demo").innerHTML = message;
  }
</script> 
</body>
반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유