JavaScript에서 출력을 표시하는 방법

JavaScript 코드에서 출력을 생성해야 하는 경우가 있을 수 있습니다. 예를 들어 실행 중인 JavaScript 코드의 문제를 디버깅하는 데 도움이 되도록 변수 값을 검사하거나 브라우저 콘솔에 메시지를 보낼 수 있습니다.

브라우저 창이나 콘솔에 출력 쓰기, 대화 상자에 출력 표시, HTML element 에 출력 만들기 등 JavaScript로 출력을 생성하는 방법은 많습니다.

JavaScript에서 데이터를 표시할 수 있는 다양한 방법은 다음과 같습니다.

innerHTML을 사용하여 HTML 요소에 쓰기.

console.log()를 사용하여 브라우저 콘솔에 씁니다.

window.alert()를 사용하여 경고 상자에 기록합니다.

document.write()를 사용하여 HTML 출력에 씁니다.

innerHTML 사용

JavaScript의 document.getElementById(id) 메서드를 사용하여 HTML 요소를 가져올 수 있습니다.
id 속성은 HTML 요소를 정의합니다. innerHTML 속성은 HTML 콘텐츠를 정의합니다.

<p id="greet"></p>

<script>
// Writing text string inside an element
document.getElementById("greet").innerHTML = "Hello World!";
</script>
// Outputs: Hello World!

브라우저 콘솔에 출력 쓰기

console.log() 메서드를 사용하면 쉽게 메시지를 생성하거나 브라우저 콘솔에 데이터를 쓸 수 있습니다. 이는 세부적인 출력을 생성하기 위한 기본적이지만 효과적인 방법입니다. 예를 들면 다음과 같습니다.

// Printing a simple sum in the browser console
console.log(10 + 20);
// Outputs: 30

경고 대화 상자에 출력 표시

경고 대화 상자를 사용하여 사용자에게 메시지 또는 출력 데이터를 표시할 수도 있습니다. alert() 메서드는 경고 대화 상자를 생성합니다. 예를 들어 다음 예를 고려하십시오.

// Displaying a simple text message
window.alert("I am an alert box!");
// Outputs: I am an alert box!

document.write() 사용

HTML에서 document.write() 메서드는 콘텐츠 또는 JavaScript 코드를 문서에 삽입하는 데 사용됩니다. 이 방법은 주로 테스트에 사용됩니다. HTML 문서에서 모든 내용을 제거하고 새 정보로 대체하는 데 사용됩니다.

document.write("I am new text");
// Outputs: I am new text

페이지가 로드된 후 document.write() 메서드를 사용하면 해당 문서의 기존 콘텐츠를 덮어씁니다. 다음 예를 고려하십시오.

<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>

<button type="button" onclick="document.write('Hello World!')">Click Me</button>
// Outputs: Hello World!
// and overwrites any existing content

참고: document.write() 메서드는 테스트용으로만 사용해야 합니다.

결론

이 기사는 또한 console.log(), document.write(), document.getElementById() 및 window.alert() 함수를 사용하여 JavaScript에서 출력을 표시하는 방법을 보여줍니다. 선택 사항에 따라 HTML 요소에 출력을 작성하거나, 경고 상자에 출력을 표시하거나, 브라우저 콘솔 창에 출력을 표시하여 JavaScript에서 출력을 생성하고 표시할 수 있습니다.

JavaScript에 대해 자세히 알아볼 훌륭한 리소스를 찾고 있다면 MDN Web Docs – JavaScript을 적극 권장합니다.

읽어 주셔서 감사합니다. 계속 코딩하세요.