이 글에서는 자바스크립트 출력에 대해 살펴봅니다. 본문의 내용은 W3Schools의 JavaScript Output 문서를 참고하여 정리한 것입니다.
자바스크립트 데이터 표시 방법
JavaScript는 여러 가지 방식으로 데이터를 "표시"할 수 있습니다.
- innerHTML을 사용하여 HTML 요소에 쓰기
- document.write()를 사용하여 HTML 출력에 쓰기
- window.alert()를 사용하여 alert 상자에 쓰기
- console.log()를 사용하여 브라우저 콘솔에 쓰기
innerHTML 사용하기
HTML 요소에 액세스하기 위해 자바스크립트는 document.getElementById(id) 메소드를 사용할 수 있습니다.
id 속성은 HTML 요소(엘리먼트)를 정의합니다. innerHTML 속성은 HTML 콘텐츠를 정의합니다.
예시:
HTML 요소의 innerHTML 속성을 변경하는 것은 HTML에 데이터를 표시하는 일반적인 방식입니다.
document.write() 사용하기
테스트를 실시할 때에는 document.write()를 사용하는 것이 편리합니다.
예시:
HTML 문서가 로드된 후 document.write()를 사용하면 이전의 모든 HTML이 삭제됩니다.
예시:
document.write() 메소드는 테스트 목적으로만 사용해야 합니다.
window.alert() 사용하기
경고 상사를 사용하여 데이터를 표시 할 수 있습니다.
예시:
window 키워드를 생략할 수 있습니다.
자바스크립트에서 windows 개체는 전역 범위 개체이므로 변수, 속성 및 메소드가 기본적으로 window 개체에 속합니다. 또한, window 키워드 지정은 선택 사항입니다.
예시:
console.log() 사용하기
디버깅 목적으로 브라우저에서 console.log() 메소드를 호출하여 데이터를 표시할 수 있습니다.
예시:
<h2>디버깅 활성화</h2>
<p>키보드에서 F12를 누르면 디버깅이 활성화됩니다.</p>
<p>디버깅 모드에서 "Console"을 선택하세요.</p>
<p>그런 다음 실행을 다시 클릭하세요.</p>
<script>
console.log(5 + 6);
</script>자바스크립트 인쇄
JavaScript에는 print 개체나 print 메소드가 없습니다.
자바스크립트에서 출력 장치에 접근할 수 없습니다.
단, 유일한 예외로 브라우저에서 window.print() 메소드를 호출하여 현재 창의 콘텐츠를 인쇄할 수 있습니다.
<h2>window.print() 메소드</h2>
<p>아래의 버튼을 클릭하여 현재 페이지를 인쇄하세요.</p>
<button onclick="window.print()">이 페이지 인쇄하기</button>jsfiddle에서 실행하기: