728x90
반응형
자바스크립트의 데이터를 웹 상에서 직접 출력하려고 한다.
일반적으로 사용하는 3가지 방법이 있다.
1. document.write() 함수 사용
JavaScript에서 가장 간단한 출력 방법은 document.write() 함수를 사용하는 것이다.
이 함수는 HTML 문서에 새로운 내용을 추가하며, 웹 페이지에서 동적으로 결과를 출력할 수 있다.
예를 들어, 아래와 같이 코드를 작성해 볼 수 있다.
<!DOCTYPE html>
<html>
<body>
<p>버튼 클릭!</p>
<button onclick="printText()"> 출력 </button>
<script> //js 로드해서 사용해도 됨.
function printText(){
var text = "hi";
document.write(text);
}
</script>
</body>
</html>
결과
2. innerHTML 속성 사용
다른 방법으로는, innerHTML 속성을 사용하여 HTML 요소에 새로운 내용을 추가할 수 있다.
예를 들어, HTML 문서에서 다음과 같은 요소가 있다고 가정한다면 아래와 같이 작성이 가능하다.
<!DOCTYPE html>
<html>
<body>
<p>innerHTML</p>
<div id="output"></div>
<script>
document.getElementById("output").innerHTML = "Hello, world!";
</script>
</body>
</html>
결과
3. console.log() 함수 사용
출력을 디버그 용도로 사용할 경우, console.log() 함수를 사용하여 웹 브라우저의 개발자 도구 콘솔 창에 로그를 출력할 수 있다.
이 방법은 개발자가 실시간으로 JavaScript 코드의 상태를 추적하고 디버깅할 수 있도록 도와준다.
예를 들어, 아래 코드와 같이 작성할 수 있다.
console.log("Hello, world!");
결과
728x90
반응형
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 눈 내리는 효과 HTML, CSS | 민민의 하드디스크 - 티스토리 (0) | 2023.05.16 |
|---|---|
| [JavaScript] 자바스크립트 특정 페이지 이동 | 민민의 하드디스크 - 티스토리 (1) | 2023.05.15 |
| [JavaScript] 자바스크립트 심볼(Symbol)이란? | 민민의 하드디스크 - 티스토리 (0) | 2023.05.14 |
| HTML, CSS 버튼 디자인 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.12 |
| [JavaScript] JavaScript에서 그래프 그리기 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.11 |
