http://www.w3schools.com/js/js_output.asp
JavaScript Output
JavaScript does NOT have any built-in print or display functions.
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
- window.alert() : 경고창
- document.write() : HTML출력
- innerHTML : HTML요소 작성(태그 내부값을 읽고, 설정)
- console.log() : 콘솔로그 쓰기
Using window.alert()
You can use an alert box to display data:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>Using document.write()
For testing purposes, it is convenient to use document.write():
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>Using document.write() after an HTML document is fully loaded, will delete all existing HTML:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="document.write(5 + 6)">Try it</button>
</body>
</html> | The document.write() method should be used only for testing. |
|---|
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html> | To "display data" in HTML, (in most cases) you will set the value of an innerHTML property. |
|---|
Using console.log()
In your browser, you can use the console.log() method to display data.
Activate the browser console with F12, and select "Console" in the menu.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>반응형
'차근차근 > JAVA Script' 카테고리의 다른 글
| JavaScript Comments _ 주석처리 (0) | 2016.02.15 |
|---|---|
| JavaScript Statements (0) | 2016.02.15 |
| JavaScript Where To (0) | 2016.02.15 |
| HTML 렌더링 순서에 따른 <script> 태그 사용 권장사항 (0) | 2016.02.01 |
| 호환성체크 | 팝업 | 오늘 하루 이 창을 열지않기 (0) | 2015.11.10 |