[JavaScript] 자바스크립트 다양한 데이터 출력

JavaScript 데이터 출력

JavaScript를 사용하면 웹 페이지에 동적으로 내용을 추가하거나 변경할 수 있습니다.
다양한 방법으로 사용자에게 정보를 제공하는 방법을 소개합니다.

 

• document.write()
• innerHTML
• DOM 조작
• console.log()
• alert(), prompt(), confirm()
• addEventListener()
• AJAX와 서버와의 통신 ( XMLHttpRequest / fetch )
• JSON 데이터 처리 ( JSON.parse() / JSON.stringify() )
  
• 템플릿 리터럴 `${variable}`
• 모듈화 ( import / export )
• 예외처리 ( try / catch )

---

1. document.write() 사용

document.write() 메서드는 HTML 페이지가 로드될 때 직접 문서에 문자열을 쓰는 데 사용됩니다.

document.write("Hello, World!");

 

2. innerHTML 사용

 

innerHTML 속성을 사용하면 특정 HTML 요소의 내부 HTML을 가져오거나 설정할 수 있습니다.

document.getElementById("myElement").innerHTML = "안녕하세요!";

 

3. DOM 조작

 

HTML 문서의 구조, 스타일 및 내용을 변경할 수 있는

Document Object Model(DOM)을 제공합니다.

var new_element = document.createElement("p");
new_element.innerHTML = "이것은 새로운 단락입니다.";
document.body.appendChild(new_element);

 

4. 콘솔 출력 : console.log()

 

console.log()는 브라우저의 개발자 콘솔에 메시지를 출력합니다.

console.log("이 메시지는 콘솔에 출력됩니다");

 

5. 경고 및 대화상자 : alert(), prompt(), confirm()

 

alert(), prompt(), confirm()은 사용자와의 간단한 상호작용을 위해 사용됩니다.

alert("경고 메시지입니다!");
var name = prompt("당신의 이름은 무엇입니까?");
var result = confirm("계속하시겠습니까?");
console.log(name, result);

 

6. 이벤트 처리하기

 

addEventListener를 사용해 특정 이벤트에 반응하는 함수를 설정할 수 있습니다.

document.getElementById("myButton").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

 

7. AJAX와 서버와의 통신 : XMLHttpRequest와 fetch

 

XMLHttpRequest나 fetch API를 사용해 서버로부터 데이터를 받아와 페이지에 출력할 수 있습니다.

예제 (fetch 사용)

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

 

8. JSON 데이터 처리하기

 

JSON.parse()와 JSON.stringify()를 사용해 JSON 데이터를 다룰 수 있습니다.

var jsonString = '{"name": "홍길동", "age": 25}';
var obj = JSON.parse(jsonString);
console.log(obj.name, obj.age);

 

9. 템플릿 리터럴과 문자열 처리하기 `${variable}`

 

ES6부터는 백틱(`)을 사용한 템플릿 리터럴을 통해 문자열 내 변수를 쉽게 삽입할 수 있습니다.

var name = "홍길동";
console.log(`안녕하세요, ${name}님!`);

 

10. 모듈화와 코드 구조화하기

 

코드를 모듈로 분리하고 import/export를 사용해 관리할 수 있습니다.

// module.js
export function sayHello(name) {
    return `Hello, ${name}!`;
}

// main.js
import { sayHello } from './module.js';
console.log(sayHello('World'));

 

11. 오류 처리와 디버깅하기

 

try...catch 구문을 사용해 예외를 처리하고, 오류 발생 시 적절한 대응을 할 수 있습니다.

try {
    nonExistentFunction();
} catch (error) {
    console.error("An error occurred:", error);
}

 

 

 

출처: https://statuscode.tistory.com/71