JS 코딩 #04 - 자바스크립트 Output

안녕하세요,

이번 강의에서는 자바스크립트의 출력(output) 기능에 대해 알아보겠습니다. 여기서 '출력' 이란 자바스크립트를 이용해 화면에 정보를 표현하는 것을 뜻합니다. 다음은 자바스크립트의 출력 방법들을 나타냅니다.

1. innerHTML 사용

자바스크립트로 HTML 요소(elements)에 접근하기 위해서는 document.getElementById(id) 메소드를 사용할 수 있습니다.

id 속성은 특정 HTML 요소를 가리키며, HTML 요소에 주어지는 독특한(unique) 한 값으로서 문서 내의 다른 요소들과 중복되지 않습니다. innerHTML 속성은 HTML 내용(content)을 정의할 때 사용합니다.

예제 코드를 통해 알아보겠습니다.

innerHTML속성을 변경하는 것은 HTML 안에 데이터를 표현하는 일반적인 방법 중 하나입니다.

테스트를 목적으로 할 때에는 document.write()를 사용하는 것이 편리합니다.

❗️주의: HTML 문서가 로딩된 후에 document.write() 을 사용하면 기존 문서의 내용이 사라지게 됩니다. 아래 예제를 통해 확인해보세요.

💡 document.write() 메소드는 테스트 목적으로만 사용하는 것이 좋습니다.

사용자에게 경고성 메시지를 표시할 때 사용합니다.

여기서 window 키워드는 생략할 수 있습니다. (위 코드를 직접 수정해보세요)

자바스크립트에서 window 객체는 전역(global scope) 객체로서 모든 변수와 속성, 메소드들이 기본적으로 window 객체에 속하게 됩니다. 따라서 window 키워드 사용은 선택적(optional)입니다.

위 예제에서 window 키워드를 뺀 예제 코드는 여기서 확인하세요.

console.log() 는 브라우저의 콘솔 창에 정보를 표시하는 기능으로 코드를 작성하면서 실행 중간에 데이터를 확인하거나 디버깅(debugging) 할 때 주로 사용합니다.

디버깅에 대해서는 추후에 자세히 다루겠습니다.

사실 자바스크립트는 프린트를 위한 직접적 객체와 메소드를 가지고 있지 않습니다.

다시말해, 자바스크립트는 직접적으로는 외부 장치(devices)에 접근할 수 없습니다. 하지만 사용자가 보고 있는 HTML 문서의 내용을 프린트 하기 위해 브라우저에서 지원하는 window.print() 메소드를 호출(call) 할 수 있습니다.

이상으로 이번 강의를 마칩니다. 다음 시간에는 자바스크립트 문법을 기초부터 차근차근 다뤄 나가도록 하겠습니다.