JavaScript에서 객체를 화면에 표시하려면 여러 방법이 있습니다. 여기에는 웹 페이지에서 직접 사용하는 일반적인 방법이 몇 가지 있습니다.
1. Console.log를 이용한 객체 표시
개발자 콘솔에서 객체의 내용을 빠르게 확인할 수 있으며, 디버깅과 테스팅에 유용합니다.
const person = { firstName: "John", lastName: "Doe", age: 30 };
console.log(person);
2. HTML에 직접 삽입하기
HTML 요소를 직접 조작하여 객체의 속성을 웹 페이지에 표시할 수 있습니다.
const person = { firstName: "John", lastName: "Doe", age: 30 };
document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
3. JSON.stringify를 사용한 객체 표시
JSON.stringify 메서드를 사용하면 객체를 문자열로 변환하여 보기 쉽게 표시할 수 있습니다. 이것은 중첩된 객체나 복잡한 구조를 가진 객체를 살펴보기 위해 유용합니다.
const person = { firstName: "John", lastName: "Doe", age: 30 };
const jsonString = JSON.stringify(person);
console.log(jsonString); // 출력: '{"firstName":"John","lastName":"Doe","age":30}'
4. DOM 메서드를 사용하여 객체 표시
DOM 메서드를 사용하면 웹 페이지에 동적으로 요소를 생성하고 객체의 내용을 표시할 수 있습니다.
const person = { firstName: "John", lastName: "Doe", age: 30 };
const div = document.createElement("div");
div.innerHTML = `이름: ${person.firstName} <br> 성: ${person.lastName} <br> 나이: ${person.age}`;
document.body.appendChild(div);
이 방법들은 자바스크립트 객체를 웹 페이지에 표시하거나 디버깅을 위해 콘솔에 출력하는 데 사용될 수 있습니다. 원하는 방법은 객체의 복잡성, 표시하려는 위치, 그리고 프로젝트의 요구 사항에 따라 달라질 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>날씨 정보</title>
</head>
<body>
<button onclick="displayPerson()">사람 정보 표시</button>
<div id="personInfo"></div>
<script src="test.js"></script>
</body>
</html>
function displayPerson() {
const person = { firstName: "John", lastName: "Doe", age: 30 };
const div = document.createElement("div");
div.innerHTML = `이름: ${person.firstName} <br> 성: ${person.lastName} <br> 나이: ${person.age}`;
document.body.appendChild(div);
}<div> 요소 생성:
const div = document.createElement("div");
새로운 <div> 요소를 HTML 문서에 만듭니다. 이 요소는 아직 문서에 추가되지 않았으며 메모리에만 존재합니다.
HTML 내용 설정:
div.innerHTML = `이름: ${person.firstName} <br> 성: ${person.lastName} <br> 나이: ${person.age}`;
역따옴표()로 묶인 템플릿 문자열을 사용하여 <div>요소의 내부 HTML을 설정합니다.${}` 구문은 문자열 내에서 변수의 값을 직접 삽입할 수 있게 해줍니다.
<div> 요소 추가:
document.body.appendChild(div);
위에서 생성된 <div> 요소를 HTML 문서의 <body> 요소에 자식으로 추가합니다. 이렇게 하면 웹 페이지에 실제로 표시됩니다.
'JavaScript' 카테고리의 다른 글
| JavaScript 객체 접근자 (Object Accessors) (0) | 2023.08.24 |
|---|---|
| JavaScript Object 객체 메서드 (0) | 2023.08.24 |
| JavaScript for...in 루프 (객체, 배열 사용) (0) | 2023.08.24 |
| JavaScript 객체 속성 이해하기 (0) | 2023.08.24 |
| JavaScript Object 객체 이해하기 (0) | 2023.08.24 |
