這一篇主要記錄下使用外部的JavaScript文件來如何對HTML進行輸出
在日常的開發中肯定需要輸出數據來看看我們的函數是否調用正常,在JavaScript中有這幾種輸出方式:
- 使用alert()函數彈出警告框
- 使用document.write()方法寫到HTML中
- 使用innerHTML改變HTML元素
- 使用console.log()寫入瀏覽器的控制臺
下面來分別介紹下這幾種方式:
alert()
JavaScript代碼:
function alertFunc() {
window.alert(1 + 2);
}
HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="javaScript.js"></script>
<title>JavaScript學習之路</title>
</head>
<body>
<script type="text/javascript">alertFunc()</script>
</body>
</html>
可以看出鏈接外部js是<script type="text/javascript" src="javaScript.js"></script>,在HTML內部使用是<script type="text/javascript">alertFunc()</script>.
document.write()寫入HTML元素
JavaScript代碼:
function buttonAction() {
document.write(Date());
}
HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="javaScript.js"></script>
<title>JavaScript學習之路</title>
</head>
<body>
<p id="demo">我的第一個段落</p>
<button onclick="buttonAction()">click me</button>
</body>
</html>
這里用到了<button></button>按鈕元素,以及Date()時間函數,當文檔加載后點擊按鈕執行buttonAction()方法的話那么整個HTML文檔都只會顯示時間,也就是說整個HTML頁面將會被覆蓋.
innerHTML操作HTML元素
JavaScript代碼:
function innerFunc() {
document.getElementById("demo").innerHTML="已經修改";
}
HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="javaScript.js"></script>
<title>JavaScript學習之路</title>
</head>
<body>
<p id="demo">我的第一個段落</p>
<script type="text/javascript">innerFunc()</script>
</body>
</html>
在這個方法中使用getElementById("demo")方法獲取到在HTML中`id="demo"的元素,并且對其進行修改.
console.log()控制臺輸出
JavaScript代碼:
function consoleFunc() {
a = 1;
b = 1;
c = a + b;
console.log(c);
}
HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="javaScript.js"></script>
<title>JavaScript學習之路</title>
</head>
<body>
<script type="text/javascript">consoleFunc()</script>
</body>
</html>
使用這個調出控制臺可以看見打印信息:
