JS Output
1. Intro
- JavaScript does NOT have any built-in print or display functions. -> ??
- JavaScript can "display" data in different ways:
| Way |
Description |
Remark |
window.alert() |
Writing into an alert box |
alert() 和 window.alert() 似乎沒差 |
document.write() |
Writing into the HTML output |
should only be used for testing |
innerHTML |
Writing into an HTML element |
--- |
console.log() |
Writing into the browser console |
--- |
1.1. alert() / window.alert()
<script>
window.alert(5 + 6);
alert("hi");
</script>
1.2. document.write()
- The document.write() method should only be used for testing.
- Using document.write() after an HTML document is fully loaded, will delete all existing HTML:
- EX: 按了button之後，畫面原本的內容都會被取代，"My First Web...."文字都會不見 (PS: 但因為是動態改變，檢視原始碼的內容仍不變)
<!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>
1.3. innerHTML
- The
id attribute defines the HTML element.
- The
innerHTML property defines the HTML content:
- EX:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
1.4. console.log()
- Activate the browser console with F12, and select "Console" in the menu.
- EX:
<script>
console.log(5 + 6);
</script>