자바스크립트의 document.write() 를 사용하면 화면에 직접 데이터를 출력할 수 있다. 출력되는 데이터는 문자열이 될 수도 있고, 데이터객체 정보가 될 수 있다. 기능적으로는 전혀 문제가 되지 않지만, 사용상 주의가 필요한 함수이기도 하다. 자바스크립트가 처음 등장했을 때는 데이터값의 확인이나 디버그 등에 많이 활용되기도 하였다.
자바스크립트 직접 출력 document.write() 사용
javascript output
화면에 직접 데이터를 출력하는 방법으로 document.write() 함수는 유용하다.
화면이 로드되면서 데이터를 확인하고 싶을 때 주로 사용된다.
자바스크립트를 특정 태그에 위치하여 데이터를 확인할 수도 있다.
html 웹페이지를 동적 컨텐츠로 발행하고 싶을 때 주로 사용되기도 한다.
직접 출력해 보기
document.write() 를 사용하는 것은 어렵지 않다.
간단한 html 문서에 document.write(데이터) 형태를 기입하면 그만이다.
아래의 코드는 document.write() 함수를 사용한 코드이다.
자바스크립트의 특징 중 하나는 웹페이지 어디에 위치하든 상관이 없다.
document.write() 함수를 웹페이지 여러군데에 기입해 보았다.
<!DOCTYPE html>
<html>
<body>
<h1>직접 출력하기</h1>
<script>
document.write("<i><b>직접 출력</b></i>");
</script>
<p id="Intml">첫번째 문단</p>
<script>
document.write("<i><b>직접 출력</b></i>");
</script>
<p id="InText">두번째 문단</p>
<input type="button" onclick="document.write('input 태그 버튼 클릭됨')" value="input 태그 버튼"></input>
<button onclick="document.write('button 클릭됨')">button 태그 사용</button>
<script>
document.write("<i><b>직접 출력</b></i>");
</script>
</body>
</html>결과화면을 보면 document.write() 함수가 사용된 위치를 확인할 수 있다.
작성한 부분 그대로 출력이 되는 것을 볼 수 있다.
이러한 결과화면으로 볼 때 동적인 웹페이지를 구성하고자 할 때 사용하면 유용하다.
주의할 점
하지만 위의 결과에서 document.write() 함수를 버튼과 함께 사용하면 화면이 리프레시된다.
아래는 결과화면이다.
input 태그를 사용한 버튼이든, button 태그를 사용한 버튼이든 결과는 동일하다.
이 점은 유의하도록 하자.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 브라우저 콘솔 출력 console.log 사용 방법 javascript output (0) | 2021.09.23 |
|---|---|
| 자바스크립트 메세지창 window.alert 사용 방법 javascript output (0) | 2021.09.19 |
| 자바스크립트 화면 출력 innerHTML innerText 차이 사용 javascript output (0) | 2021.09.15 |
| 자바스크립트 html 외부 js 호출 실행하는 방법 Executing javascript external js file (0) | 2021.09.14 |
| 자바스크립트 html body 태그에서 실행하는 방법 Executing javascript in html body tag (0) | 2021.09.12 |
댓글