JS OUTPUT
JavaScript Display Possibilities
JS는 여러 방법으로 Data를 "DISPLAY" 할 수 있다.
- innerHTML 사용하여 HTML 요소(element)에 쓰기.
- document.write() 사용하여 HTML에 출력 쓰기.
- window.alert() 사용하여 alert box에 쓰기.
- console.log() 사용하여 browser console에 쓰기.
①Using innerHTML
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html> RUN 결과.
document.getElementById(id) - (참조 : Tutorial.1)
HTML 요소에 접근하기 위해 JS에서 표제와 같은 메소드를 사용 할 수 있다.
"id"는 해당하는 HTML의 요소이고, innerHTML 속성은 HTML의 내용이다.
HTML요소를 변경하는 innerHTML은 가장 대표적으로 HTML에 data를 "DISPLAY"하는 방법이다.
②-1 Using document.write()
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html> RUN 결과.
②-2 Using document.write()
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html> RUN 결과.
버튼 클릭 시 결과.
document.write()
해당 메소드는 웹 페이지가 로딩될 때 실행되면, 웹 페이지 가장 먼저 데이터를 출력한다.
따라서 해당 메소드는 대부분 테스트나 디버깅을 위해 사용된다.
※주의 - 웹 페이지의 모든 내용이 로딩된 후에 document.write()메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력한다.
(참조 : https://developer.mozilla.org/ko/docs/Web/API/Document/write)
(참조 : http://tcpschool.com/javascript/js_intro_output)
③Using window.alert()
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html> RUN 결과.
window.alert()
window 객체의 모든 메소드나 속성을 사용할 때는 window라는 접두사를 생략가능.
window.alert() -> alert().
④Using console.log()
<!DOCTYPE html>
<html>
<body>
<h2>Activate Debugging</h2>
<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html> RUN 결과.
console.log()
디버깅 목적으로 사용한다. F12누르고 console 탭을 키고 "RUN"하면 결과 확인 가능
⑤JavaScript Print
<!DOCTYPE html>
<html>
<body>
<h2>The window.print() Method</h2>
<p>Click the button to print the current page.</p>
<button onclick="window.print()">Print this page</button>
</body>
</html>RUN 결과.
버튼 클릭 시 결과.
JavaScript Print
JS는 프린트 객체나 프린트 메소드가 없다. JS에서 출력장치에 엑세스 할 수 없다.
유일하게 window.print() 메소드를 사용하여 브라우저에서 프린트만 가능하다.
한국어 자료는 tcpschool, 영문 자료는 w3schools을 참조한다.
(참조 : http://tcpschool.com/javascript/js_intro_output)
(참조 : https://www.w3schools.com/js/js_output.asp)
