반응형
자바스크립트의 출력방식, javaScript Output, window.alert(), document.wirte(), innerHTML, console.log()
자바스크립트는 어떠한 built-in print나 display function이 없다.
하지만 자바스크립트는아래의 4가지 방식으로 보일 수 있다.
1. 경고창 window.alert()
2. HTML출력 document.write()
3. HTML요소에 출력 innerHTML
4. 브라우저 콘솔에 출력 console.log()
1. 경고창 window.alert()
예)
<!DOCTYPE html>
<html>
<body>
<h1>Hello JavaScript</h1>
<script>
window.alert("경고창 출력");
</script>
</body>
</html>
2. HTML출력 document.write()
document.write()는 테스트 시에만 사용하는 것이 좋다.
예)
<!DOCTYPE html>
<html>
<body>
<h1>Hello JavaScript</h1>
<script>
document.write("HTML출력");
</script>
</body>
</html>
-결과
참고)
HTML document 이후에 document.write()의 사용은 존재하는 모든 HTML을 지우고 완전히 로드된다.
<!DOCTYPE html>
<html>
<body>
<h1>Hello JavaScript</h1>
<button onclick="document.write('HTML출력')">Try it</button>
</body>
</html>
-결과
'Try it' 버튼 클릭시 ↓ 모든 요소를 지우고 document.write()를 실행한다.
3. HTML요소에 출력 innerHTML
getElementById(), innerHTML에 대한 설명
예)
<!DOCTYPE html>
<html>
<body>
<h1>Hello JavaScript</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'innerHTML출력';
</script>
</body>
</html>
-결과
4. 브라우저 콘솔에 출력 console.log()
브라우저 에서 F12를 눌러 console 메뉴를 통해 데이터 값을 확인할 수 있다.
예)
<!DOCTYPE html>
<html>
<body>
<h1>Hello JavaScript</h1>
<script>
console.log("콘솔출력");
</script>
</body>
</html>
-결과(window)
반응형
'Programing > JavaScript' 카테고리의 다른 글
| 자바스크립트 키워드란? 키워드 종류 javaScript Keywords (0) | 2015.07.14 |
|---|---|
| 자바스크립트 구문, 주의점 javaScript Statements (0) | 2015.07.14 |
| javaScript syntax 기본 문법, variables, operator, keywords, comments (0) | 2015.07.13 |
| JavaScript 자바스크립트 작성 위치와 용법, 외부 스크립트의 장점, external javaScript (0) | 2015.07.12 |
| JavaScript란? getElementById, InnerHTML, isNaN(), 변수선언등 기본 설명, 특징 (0) | 2015.07.12 |
댓글