자바스크립트 출력

innerHTML.을 사용하여 HTML 요소에 쓰기
document.write().을 사용하여 HTML 출력에 쓰기
window.alert().을 사용하여 알림 상자에 쓰기
console.log().을 사용하여 브라우저 콘솔에 쓰기

HTML 요소에 쓰기, 출력하기, 알림, 콘솔에 출력하기: 자세한 설명과 예시

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

• 설명:
  • 특정 HTML 요소의 내용을 변경하거나 추가할 때 사용합니다.
  • 요소의 내부 HTML을 문자열로 대체합니다.
• 예시:

JavaScript

// HTML
<p id="myParagraph">이것은 바뀔 내용입니다.</p>

// JavaScript
let paragraph = document.getElementById("myParagraph");
paragraph.innerHTML = "<b>변경된 내용입니다.</b>";

코드를 사용할 때는 주의가 필요합니다.

 

• 해석:
  • getElementById로 "myParagraph"라는 ID를 가진 p 태그를 가져옵니다.
  • innerHTML 속성에 새로운 HTML 문자열을 할당하여 내용을 변경합니다. 이 경우, <b> 태그를 사용하여 텍스트를 굵게 만들었습니다.

2. document.write()를 사용하여 HTML 출력에 쓰기

• 설명:
  • HTML 문서의 현재 위치에 문자열을 직접 출력합니다.
  • 일반적으로 페이지 로딩 후에는 사용하지 않으며, 동적으로 HTML을 생성하는 경우에 주로 사용됩니다.
• 예시:

JavaScript

<script>
  document.write("<h1>이것은 document.write()로 출력된 제목입니다.</h1>");
</script>

코드를 사용할 때는 주의가 필요합니다.

 

• 주의:
  • document.write()는 페이지의 기존 내용을 덮어쓸 수 있으므로, 신중하게 사용해야 합니다.
  • 일반적으로 JavaScript 파일에서 사용하기보다는, HTML 문서 내에 직접 작성하는 경우가 많습니다.

3. window.alert()를 사용하여 알림 상자에 쓰기

• 설명:
  • 사용자에게 간단한 메시지를 알려줄 때 사용하는 방법입니다.
  • 사용자가 확인 버튼을 클릭해야 다음 작업을 진행할 수 있습니다.
• 예시:

JavaScript

window.alert("안녕하세요! 알림 상자입니다.");

코드를 사용할 때는 주의가 필요합니다.

 

4. console.log()를 사용하여 브라우저 콘솔에 쓰기

• 설명:
  • 개발자가 JavaScript 코드를 디버깅하거나, 변수의 값을 확인할 때 사용하는 방법입니다.
  • 브라우저 개발자 도구의 콘솔 탭에서 출력 결과를 확인할 수 있습니다.
• 예시:

JavaScript

let name = "홍길동";
console.log("이름은:", name);

코드를 사용할 때는 주의가 필요합니다.

 

• 해석:
  • "이름은:"과 변수 name의 값을 콘솔에 출력합니다.

각 방법의 차이점과 사용 시기

• innerHTML: 특정 요소의 내용을 동적으로 변경할 때 사용합니다.
• document.write(): 전체 페이지를 동적으로 생성하거나, 페이지 로딩 시 특정 부분을 채울 때 사용합니다.
• window.alert(): 사용자에게 간단한 메시지를 보여줄 때 사용합니다.
• console.log(): 개발자가 코드를 디버깅하거나, 로그를 남길 때 사용합니다.

어떤 방법을 사용해야 할지 고민될 때는 다음과 같은 질문을 해보세요.

• 어떤 부분의 내용을 변경하고 싶은가? (innerHTML)
• 전체 페이지를 새로 만들고 싶은가? (document.write())
• 사용자에게 알림을 보여주고 싶은가? (window.alert())
• 코드 실행 결과를 확인하고 싶은가? (console.log())