우당탕탕 좌충우돌 개발일기
자바스크립트 출력(JavaScript Output) 본문
자바스크립트는 다양한 방식으로 데이터를 나타낼 수 있다.
- HTML 요소 안에 작성하려면 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>
My First Web Page
My First Paragraph.
11
HTML 요소에 접근하기 위해서 자바스크립트는 document.getElementbyId(id) 메소드를 사용하는데, 여기서 id 속성은 HTML 요소를 정의한다.
💡 HTML 요소의 innerHTML을 변경하는 것은 HTML의 데이터를 나타내는 흔한 방법 중 하나이다.
- HTML 출력에는 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>
My First Web Page
My first paragraph.
Never call document.write after the document has finished loading. It will overwrite the whole document.
11
💥 document.write()를 HTML 문서가 로드되고난 후 사용하게 되면, 모든 존재하는 HTML을 지우게 되니 주의바람
<예제>
<!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>
button을 누르면 모든 HTML이 지워지고 숫자 11만 덜렁 남게된다.
💡 document.write() 메소드는 테스트용으로만 사용하도록 하자
- 알림창을 띄우기 위해서는 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>
💡 window.alert()에서 window를 생략 가능하다.
자바스크립트에서 window 객체는 전역 유효 범위 객체이다.
이 말인즉슨 변수, 속성 및 메소드가 기본적으로 window 객체에 속한다는 것을 의미하며 window 키워드를 지정하는 것이 선택사항임을 의미한다.
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
- 브라우저 콘솔에 나타내기 위해서는 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>
- 프린트 출력을 위해서는 window.print()를 사용한다.
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>
자바스크립트는 어떠한 프린트 객체나 메서드를 갖고 있지 않아서 자바스크립트를 이용해 출력장치에 액세스 할 수 없다.
💡 유일한 예외는 웹 브라우저에서 window.print() 메소드를 사용하면 현재 창을 인쇄할 수 있다.
반응형
'Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트 주석(JavaScript Comments) (0) | 2022.10.13 |
|---|---|
| 자바스크립트 문법(JavaScript Syntax) (0) | 2022.10.13 |
| 자바스크립트 구문(JavaScript Statements) (0) | 2022.10.12 |
| 자바스크립트 위치(JavaScript Where To) (0) | 2022.10.12 |
| 자바스크립트 소개(JavaScript Introduction) (0) | 2022.10.12 |