这一篇主要记录下使用外部的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>
使用这个调出控制台可以看见打印信息:
