2022. 12. 27. 15:59ㆍJavascript/TCP school
자바스크립트 출력 방법
1. window.alert() 메소드
2. HTML DOM 요소를 이용한 innerHTML 프로퍼티
3. document.write() 메소드
4. console.log() 메소드
메소드(method)와 프로퍼티(property)에 대한 더 자세한 사항은 자바스크립트 객체의 개념 수업에서 확인할 수 있음
window.alert() 메소드
브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Output</title>
</head>
<body>
<h1>Window 객체의 alert() 메소드</h1>
<button onclick="alertDialogBox()">alert 대화 상자</button>
<script>
function alertDialogBox() {
alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
}
</script>
</body>
</html>Window 객체의 alert() 메소드
HTML DOM 요소를 이용한 innerHTML 프로퍼티
HTML DOM 요소를 이용한 innerHTML 프로퍼티를 이용하는 방법
1. document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택
2. innerHTML 프로퍼티를 이용하면 선택된 HTML 요소의 내용(content)이나 속성(attribute)값 등을 손쉽게 변경 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Output</title>
</head>
<body>
<h1>HTML DOM 요소를 이용한 innerHTML 프로퍼티</h1>
<p id="text">이 문장을 바꿀 것입니다!</p>
<script>
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다!";
</script>
</body>
</html>HTML DOM 요소를 이용한 innerHTML 프로퍼티
이 문장을 바꿀 것입니다!
innerHTML 프로퍼티에 대한 더 자세한 사항은 자바스크립트 DOM 요소 수업에서 확인
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
document.write() 메소드
웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력
따라서 document.write() 메소드는 대부분 테스트나 디버깅을 위해 사용됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Output</title>
</head>
<body>
<h1>Document 객체의 write() 메소드</h1>
<script>
document.write(4 * 5);
</script>
</body>
</html>Document 객체의 write() 메소드
하지만 웹 페이지의 모든 내용이 로딩된 후에 document.write() 메소드가 실행되면,
웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력하게 됨.
따라서 document.write() 메소드를 테스트 이외의 용도로 사용할 때에는 충분히 주의해서 사용해야 함
console.log() 메소드
웹 브라우저의 콘솔을 통해 데이터를 출력
대부분의 주요 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용
이러한 콘솔 화면을 통한 데이터의 출력은 좀 더 자세한 사항까지 출력되므로, 디버깅하는데 많은 도움을 줌
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Output</title>
</head>
<body>
<h1>console.log() 메소드</h1>
<p>F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.</p>
<script>
console.log(4 * 5);
</script>
</body>
</html>console.log() 메소드
F12를 눌러서 콘솔 화면을 열면 결과를 확인할 수 있습니다.
출처
http://www.tcpschool.com/javascript/js_intro_output
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'Javascript > TCP school' 카테고리의 다른 글
| 기본 타입 (0) | 2022.12.27 |
|---|---|
| 자바스크립트 적용 (0) | 2022.12.27 |
| 자바스크립트 문법 (1) | 2022.12.26 |
| 자바스크립트 소개 (0) | 2022.12.26 |
| 자바스크립트 기초 (0) | 2022.12.26 |