Binary World

자바스크립트 출력방법 본문

개발자의 길/Javascript

자바스크립트 출력방법

모쿠 2017. 4. 4. 14:57

<자바스크립트에서의 다양한 출력 방법>


<03_output>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
</head>
<body>
 
<h1>자바스크립트 출력 방법</h1>
<h2>document.write() 함수 사용</h2>
<script>
document.write('<p>안녕하세요~</p>')
</script>
<button onclick="test()">Click!</button>
 
<hr/>
 
<h2>innerHTML 속성 사용</h2>
<div id="output"></div>
<button onclick="test2()"> Click! </button>
 
<hr/>
<h2>다이얼로그(dialog) 사용</h2>
<button onclick="showAlert">alert</button>
<button onclick="showConfirm">confirm</button>
<button onclick="showPrompt">Prompt</button>
 
<hr/>
 
<h2>콘솔 로그 출력</h2>
<button onclick="showLog()">로그 출력</button>
 
<script>
function test(){
    document.write('<p>방가!!</p>');
    // (주의)HTML 문서의 로딩이 끝난 후 document.write()를 호출하면
    // 문서 전체의 내용을 덮어쓰게 됨!
    
}
 
function test2(){
    var output = document.getElementById('output');
    output.innerHTML = '출력 완료';
}
 
function showAlert() {
    alert('hi~~~');
}
 
function showConfirm(){
    var result = confirm('삭제하시겠습니까?');
    document.getElementById('output').innerHTML = result;
}
 
function showPrompt() {
    var result = prompt('이름을 입력하세요...', '이름');    
    document.getElementById('output').innerHTML = result;
}
 
function showLog() {
    console.log('테스트.....');
}
</script>
 
 
</body>
</html>

cs



저작자표시 비영리

'개발자의 길 > Javascript' 카테고리의 다른 글

자바스크립트 Switch문  (1) 2017.04.04
자바스크립트 if문, 비교연산자, 삼항연산자  (0) 2017.04.04
자바스크립트 변수 선언과 사용  (0) 2017.04.04
자바스크립트가 할 수 있는 일들  (0) 2017.04.04
자바 스크립트 소개  (0) 2017.04.04
'개발자의 길/Javascript' Related Articles more
Comments