개발자의 길/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> |