JavaScript를 사용하여 데이터를 다양한 방식으로 "표시"할 수 있습니다.
innerHTML을 사용하여 HTML 요소에 작성하기
innerHTML 속성을 사용하여 HTML 요소의 내용을 동적으로 변경할 수 있습니다.
예를 들어, document.getElementById('elementId').innerHTML = '텍스트';와 같이 사용하여 특정 요소의 내용을 변경할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>My First Web Page
My First Paragraph.
document.write()를 사용하여 HTML 출력에 작성하기
document.write() 함수를 사용하여 HTML 문서에 직접 데이터를 작성할 수 있습니다.
예를 들어, document.write('텍스트');와 같이 사용하여 HTML 출력에 텍스트를 작성할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>My First Web Page
My first paragraph.
Never call document.write after the document has finished loading. It will overwrite the whole document.
document.write()는 문서가 로드된 이후에 사용해야 하며, 문서를 덮어쓰므로 이전 HTML은 삭제되니 주의해야 합니다.
document.write() 메서드는 테스트용으로만 사용하는 것이 좋습니다.
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>My First Web Page
My first paragraph.
window.alert()를 사용하여 알림 상자에 작성하기
window.alert() 함수를 사용하여 브라우저의 알림 상자에 데이터를 표시할 수 있습니다.
예를 들어, window.alert('텍스트');와 같이 사용하여 알림 상자에 텍스트를 표시할 수 있습니다.
window.alert()는 모달 창이기 때문에 사용자의 상호 작용이 필요하며, 간단한 알림 용도로 사용됩니다.
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>My First Web Page
My first paragraph.
console.log()를 사용하여 브라우저 콘솔에 작성하기
console.log() 함수를 사용하여 개발자 도구의 브라우저 콘솔에 데이터를 기록할 수 있습니다.
예를 들어, console.log('텍스트');와 같이 사용하여 콘솔에 텍스트를 출력할 수 있습니다.
console.log()는 디버깅이나 개발 목적으로 사용되며, 사용자에게 직접적으로 표시되지 않습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Activate Debugging</h2>
<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>Activate Debugging
F12 on your keyboard will activate debugging.
Then select "Console" in the debugger menu.
Then click Run again.
'FRONTEND > JAVASCRIPT' 카테고리의 다른 글
| JavaScript 튜토리얼 - JavaScript Variables (0) | 2023.07.21 |
|---|---|
| JavaScript 튜토리얼 - JavaScript Syntax (0) | 2023.07.19 |
| JavaScript 튜토리얼 - JavaScript Statements (0) | 2023.07.17 |
| JavaScript 튜토리얼 - JavaScript 위치 (0) | 2023.07.13 |
| JAVASCRIPT 튜토리얼 - 자바스크립트 기초적인 사용 기능 (0) | 2023.07.12 |