JavaScript 출력
JavaScript 출력 방법
JavaScript는 다양한 방법으로 데이터를 표시할 수 있습니다.
innerHTML을 사용해서 HTML 요소에 쓰기.document.write()를 사용해서 HTML 출력에 쓰기.window.alert()를 사용해서 알림 상자에 쓰기.console.log()를 사용해서 브라우저 콘솔에 쓰기.
innerHTML 사용
HTML 요소에 액세스하기 위해 JavaScript는 document.getElementById(id) 메서드를 사용할 수 있습니다.
id 속성은 HTML 요소를 정의합니다. innerHTML 속성은 HTML 콘텐츠를 정의합니다.
예제 1
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
innerHTML 요소의 HTML 속성은 HTML로 데이터를 표시하는 일반적인 방법입니다.
document.write() 사용
테스트 목적으로는 document.write()를 사용하는 것이 편리합니다.
예제 2
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
HTML 문서를 로드한 후 document.write()를 사용하면 기존 HTML이 모두 삭제됩니다.
예제 3
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
document.write() 메서드는 테스트에만 사용해야 합니다.
window.alert() 사용
알림 상자를 사용하여 데이터를 표시할 수 있습니다.
예제 4
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
여기서 window 키워드는 생략할 수 있습니다.
JavaScript에서 window 객체는 글로벌스코프 객체입니다. 이것은 변수, 속성 및 메서드가 기본적으로 window 객체에 속함을 의미합니다. 이는 window 키워드의 지정은 옵션임을 의미합니다.
예제 5
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
console.log() 사용
디버깅을 위해 브라우저에서 console.log() 메서드를 호출하여 데이터를 표시할 수 있습니다.
예제 6
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript print
JavaScript에는 프린트 객체 또는 메서드가 없습니다.
JavaScript에서 출력 디바이스에 액세스할 수 없습니다.
유일한 예외는 브라우저에서 window.print() 메서드를 호출하여 현재 창의 내용을 프린트할 수 있다는 것입니다.
예제 7
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>