j03. 자바스크립트 출력

자바스크립트 출력

자바스크립트는 어떤 내장 프린트 (built-in print) 또는 디스플레이 (display) 기능 (functions, 함수)을 가지고 있지 않습니다.

자바스크립트에서 데이터를 "화면에 표시 (display)" 하는 방법은 아래와 같이 몇 가지가 있습니다.

(1) window.alert() 을 사용하여, 경고 상자 (alert box) 를 띄우는 방법
(2) document.write() 를 사용하여 HTML 로 출력하는 방법
(3) innerHTML 로 HTML 태그 안에 쓰는 방법
(4) console.log() 를 사용하여 브라우저 콘솔 (browser console) 에 보여주는 방법

---

(1) window.alert()

window.alert() 을 사용하여 경고 박스를 표시하였습니다.

<h3>(1) window.alert()</h3>
<p>window.alert() 을 사용하여 경고 박스를 표시하였습니다.</p>

<script>
window.alert("window.alert() 을 사용하여 경고 박스를 표시하였습니다.");
</script>

---

(2) document.write()

document.write() 을 이용하여 출력을 할 수 있습니다. document.write() 함수는 는 테스트 목적으로 적합합니다.

<h3>(2) document.write()</h3>
<p>document.write() 을 이용하여 출력을 할 수 있습니다.</p>

<script>
document.write("document.write() 를 사용하여 100 + 100 을 계산하니 결과가 ", 100 + 100, "이 나왔습니다.");
</script>

---

(3) innerHTML 로 HTML 태그 안에 쓰기

HTML 태그에 접근하려면, 자바스크립트는 document.getElementById(id) 메소드를 사용합니다. 여기에서 id 속성이 HTML 태그를 가리킵니다. 이렇게 찾은 태그에 innerHTML 속성으로 HTML 의 내용을 삽입합니다.

<h3>(3) innerHTML 로 HTML 태그 안에 쓰기</h3>
<p>HTML 태그에 접근하려면, 자바스크립트는 document.getElementById(id) 메소드를 사용합니다.

여기에서 id 속성이 HTML 태그를 가리킵니다. 이렇게 찾은 태그에 innerHTML 속성으로 HTML 의 내용을 삽입합니다.</p>

<p id="myInnerHTML"></p>

<script>
a = 100;
b = 200;
document.getElementById("myInnerHTML").innerHTML = a + b;
</script>
HTML 태그에서 자료를 표현 하려면, 대부분의 경우에는 innerHTML 속성에 값을 설정하면 됩니다.

---

(4) console.log() 로 콘솔에 메시지 띄우기

브라우저에서 console.log() 메소드로 데이터를 표시할 수 있습니다. 크롬, 인터넷 익스플로러, 파이어 폭스 브라우저에서는 F12 키를 눌러서 디버깅을 활성화하고, 디버거 메뉴에서 "콘솔 (Console)" 을 선택합니다.

콘솔에 c = 200, d = 300 일때 c + d 의 결과값이 출력되면 됩니다. 다만 운영체제에 따라 다를수 있습니다. 예를 들어 맥의 크롬에서는 "option + command + i" 로 "Developer Toos" 를 열고, "Console" 탭을 클릭하여 로그를 조회합니다.

<h3>(4) console.log() 로 콘솔에 메시지 띄우기</h3>
<p>브라우저에서 console.log() 메소드로 데이터를 표시할 수 있습니다. 크롬, 인터넷 익스플로러, 파이어 폭스 브라우저에서는 F12 키를 눌러서 디버깅을 활성화하고, 디버거 메뉴에서 "콘솔 (Console)" 을 선택합니다.</p>

<p>콘솔에 c = 200, d = 300 일때 c + d 의 결과값이 출력되면 됩니다. 다만 운영체제에 따라 다를수 있습니다. 예를 들어 맥의 크롬에서는 "option + command + i" 로 "Developer Toos" 를 열고, "Console" 탭을 클릭하여 로그를 조회합니다.</p>

<script>
c = 200;
d = 300;
console.log(c + d);
</script>

---

[광고] Udemy 동영상 강의로 보기