HTML中怎样使用JavaScript
2018-12-09 本文已影响0人
learning_future
在HTML中使用JavaScript主要有三种方式，下面逐一介绍。
在HTML标签中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to add JavaScript in HTML</title>
</head>
<body>
<button onclick="alert('This is a JavaScript alert.')">Show Alert Dialog</button>
</body>
</html>
使用<script>标签
<script>标签可以出现在html文档流中的<head>或<body>中，同时一个html文档可以包含多个<script>标签，多个<script>将会按照从上往下的顺序依次被浏览器解析执行。
但是出于性能问题，一般的建议就是把<script>放到html文档流的最后，也就是</body>标签之前，这样会优先加载内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to add JavaScript in HTML</title>
</head>
<body>
<button >Show Alert Dialog</button>
<script>
document.querySelector("button").addEventListener("click", function(){
alert("This is JavaScript alert.");
});
</script>
</body>
</html>
调用外部的.js文件
当程序比较复杂的时候，可以把javascript分成不同的模块写到单独的.js文件中。同时，这样的好处就是可以让多个html文档流可以引用同一个.js文件复用，维护性高，如后续需要修改时，只需要修改.js文件一次即可。
如下，在.html同目录下创建了一个js文件夹，且创建了一个hello.js文件来保存上面的javascript代码，可以通过如下的方式来调用hello.js。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to add JavaScript in HTML</title>
</head>
<body>
<button >Show Alert Dialog</button>
<script src="js/hello.js"></script>
</body>
</html>
参考资料
1. How To Add JavaScript to HTML
2. External JavaScript File
3. Embedding JavaScript in HTML
