English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript 기본 튜토리얼

JavaScript 객체

JavaScript 함수

JS HTML DOM

JS 브라우저 BOM

AJAX 기본 튜토리얼

JavaScript 참조 매뉴얼

JavaScript 출력

때로는 JavaScript 코드에서 출력을 생성해야 하는 경우가 있습니다. 예를 들어, 변수의 값을 확인하거나, 브라우저 콘솔에 메시지를 기록하여 실행 중인 JavaScript 코드의 문제를 디버깅하는 등입니다.

이 튜토리얼에서는 JavaScript에서 출력을 생성하는 방법을 배웁니다。

JavaScript 생성 출력 방법

JavaScript는 다양한 방식으로 데이터를 표시할 수 있습니다:

innerHTML를 사용하여

귀하는 요소의innerHTML속성을 사용하여 HTML 요소 내에 출력을 기록하거나 삽입합니다。

하지만, 출력을 먼저 입력하기 전에, 우리는 다음과 같은 것을 사용해야 합니다getElementById()와 같은 방법을 사용하여 요소를 선택할 수 있습니다。

<p id="msg"></p>
<p id="output"></p>
<script>
document.getElementById("msg").innerHTML = "안녕하세요 World";
document.getElementById("output").innerHTML = 20 + 30;
</script>
테스트를 보세요‹/›

innerHTML를 사용하여 요소의 HTML 내용을 변경하는 것은 HTML에서 데이터를 표시하는 일반적인 방법입니다。

document.write()를 사용하여

귀하는 다음과 같은 것을 사용할 수 있습니다document.write()콘텐츠를 현재 문서에 해석하는 방법입니다。

<script>
document.write("안녕하세요 세상<br>");
document.write(20 + 30);
</script>
테스트를 보세요‹/›

만약document.write()페이지가 로드되면 이 메서드를 사용하여 문서에 있는 모든 기존 내용을 덮어씁니다.

<script>
function myFunc() {
   document.write("<p>test document.write().</p>");
}
</script>
테스트를 보세요‹/›

window.alert() 사용

警报 대화 상자를 사용하여 사용자에게 메시지를 표시하거나 데이터를 출력할 수 있습니다.

사용alert()메서드는 알림 대화 상자를 생성합니다.

<button onclick="alert('Hello world');">alert</button>
테스트를 보세요‹/›

console.log() 사용

사용할 수 있습니다console.log()메시지를 출력하거나 데이터를 브라우저 콘솔에 기록하는 데 쉽게 사용할 수 있는 메서드입니다.

이 콘솔은 테스트나 디버깅 목적에 사용될 수 있습니다.

<script>
console.log("Hello world");
console.log(20 + 30);
</script>
테스트를 보세요‹/›

웹 브라우저의 콘솔에 접근하려면 먼저F12개발자 도구를 열고, 콘솔 탭을 클릭하려면 키보드의 키를 누릅니다.

디버깅에 대한更多信息는 이 튜토리얼의 후반부에서 알 수 있습니다.