티스토리 뷰

JavaScript

자바스크립트로 HTML 내용 보여주기/테스트하기/출력하기

IT Knowledge Share 2021. 9. 11. 12:23
반응형

자바스크립트로 어떻게 HTML 콘텐츠를 보여줄까요?

여러가지 방법이 있으나, 그 용도와 목적에 맞게 하나씩 살펴보도록 합니다.

 

1. 가장 일반적인 사용법은 innerHTML입니다. document.getElementById( ) 메소드를 이용해서 HTML 요소에 접근할 수 있으며, 이런식으로 텍스트, 이미지 등의 콘텐츠를 보여줄 수 있습니다.

 

아래의 예문과 같이, p태그의 id값은 display이며, p태그의 내용은 현재 비어있는 상태입니다.

하지만, 자바스크립트 블록 안에서 document.getElementById("display").innerHTML 문장을 통해 id가 display인 요소, 즉 p태그를 가져오고, 여기에 100을 20으로 나눈 값을 할당합니다. 당연히 body 태그에 보이는 내용은 5가 될 것입니다.

 

이렇게 document.getElementById( ) 통해서 원하는 HTML 요소에 접근하는 것을 기억하시기 바랍니다.

<!DOCTYPE html>
<html>
<body>

<p id="display"></p>

<script>
document.getElementById("display").innerHTML = 100 / 20;
</script>

</body>
</html>

 

2. 테스트 용도의 document.write( )

 

document.getElementById( )는 실전에서 사용하는 코드입니다. 테스트 용도로는 document.write( )을 사용할 수 있습니다. 이를 실전에서 사용하지 못하는 이유는 HTML 문서가 로딩되면, 기존의 모든 HTML 문서를 삭제하기 때문입니다. document.write( ) 통해서 문서가 새로 쓰여지는 방식인데, 기존 것을 모두 지우고 새로운 내용으로 덮어 씌운다고 생각하시면 됩니다.

 

사용법은 아래와 같습니다. document.write( ) 괄호 안에 원하는 내용을 넣으시면 됩니다. 하지만, 괄호 안의 내용을 제외하고 기존 HTML 문서 내용은 없어지게 됩니다. 따라서, 테스트하는 경우에만 사용하시기 바랍니다.

<!DOCTYPE html>
<html>
<body>

<script>
document.write(200/100);
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<p>버튼을 클릭하면 document.write에 속한 내용을 제외하고 모두 사라집니다.</p>

<button type="button" onclick="document.write(100/20)">클릭</button>

</body>
</html>

 

3. window.alert( ) 

 

자바스크립트에서 window.alert( )를 사용해서 내용을 새로운 팝업창에 보여줄 수도 있습니다.

window 키워드는 생략이 가능합니다. 그 이유는 해당 키워드가 전역 변수와 같은 속성으로, alert 메소드가 window 키워드 안에 이미 속해 있기 때문입니다.

 

아래의 예시처럼, 원하는 내용을 넣으면 되는데, window는 생략해도 무방합니다.

<script>
window.alert("내용을 띄워주세요!");
</script>

 

4. console.log( )

반응형

많이 익숙한 console.log( )는 브라우저 콘솔 상에서 디버깅 목적으로 사용되는 키워드 및 메소드입니다.

자바스크립트의 내용을 브라우저 콘솔 상에서 나타내어 잘 작동하는지 확인할 경우에 사용하시기 바랍니다.

브라우저 상의 콘솔을 여는 단축키는 ctrl + shift + i 입니다.

<script>
console.log("브라우저 상에서 디버깅 목적으로 사용됩니다!");
</script>

 

5. window.print( )

 

자바스크립트에서 객체나 메소드를 출력하는 기능은 없습니다. 즉, 자바스크립트 상에서 결과를 출력하는 디바이스에 접근할 수 없습니다. window.print( )를 사용해서 현재 윈도우 창에서 보이는 페이지만 출력할 수 있습니다.

 

아래의 버튼을 클릭하면, 출력 디바이스를 불러와 해당 페이지를 출력할 수 있도록 합니다.

<!DOCTYPE html>
<html>
<body>

<p>현재 페이지 출력을 위해, 버튼을 클릭하세요!</p>

<button onclick="window.print()">출력하기</button>

</body>
</html>

 

이렇게 자바스크립트를 통해 HTML 내용을 보여주고, 이를 테스트하거나 출력할 수 있는 방법에 대해 알아보았습니다.

반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

자바스크립트 연산자 Operators  (0) 2021.09.14
자바스크립트 변수 Var, Let, Const  (0) 2021.09.12
자바스크립트 사용법  (0) 2021.09.11
자바스크립트 위치  (0) 2021.09.11
자바스크립트의 기능  (0) 2021.09.11
댓글