外部JS文件引入（推荐）；
行内引用（较少用）；
属性引用（不推荐使用）；
一，外部JS文件引入：
- 实际开发中通常将javascript的相关代码都保存在一个单独的.js文件中，然后再包含到需要调用相关JS方法的HTML文件中，通常使用HTML的<Script>标签来引用。 需要指定src属性来帮助定位js文件。 将js单独放置在一个独立文件中的好处在于可以在其它的HTML中重用。同时也可以帮助客户端浏览器来缓存js文件，有效的提高页面加载速度。
- 写法优点：通常很多开发人员都将js文件放置在页面的底端，也就是</body>标签之前，这样可以帮助加快页面加载和呈现的速度。同时可以避免如果javascript访问页面元素可能无法找到的问题，因为放到页面最后，保证了页面元素会首先被加载。
二，行内引用：
- 这种方式可以将js代码直接的嵌入HTML代码中。使用<script>标签来实现，和外部引用不同，可以直接将代码放置于标签之间。
- 例子:
<script>
alert( "Hello H5!" );
</script>
三，属性引用：
通过HTML元素的属性来引用JS。
例子：
<button onClick="alert( 'Hello H5!' );">点我!</button>
四，JS文件放置的位置选择：
1，把JS文件放置不同的页面位置得到的结果可能也完全不一样。通常如果书写的javascript代码并不访问页面的元素的话，放在<head>标签中，没有任何问题，但是如果代码访问页面中内容相关元素，就需要放置在页面底端</body>之前。
2，举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS-基础</title>
</head>
<body>
<h1>标签在JS之后，按钮不响应</h1>
<script type="text/javascript">
var button = document.querySelector("button");
button.addEventListener("click",function (ev) {
alert("哈哈哈哈");
// body...
},false);
</script>
<button>点我</button>
</body>
</html>
运行后，按钮不能响应JS代码；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS-基础</title>
</head>
<body>
<button>点我</button>
<h1>标签在JS之前，按钮响应</h1>
<script type="text/javascript">
var button = document.querySelector("button");
button.addEventListener("click",function (ev) {
alert("哈哈哈哈");
// body...
},false);
</script>
</body>
</html>
网友评论