JavaScript在页面中的引用方法

现在前端开发越来越流行，框架也越来越多，像ExtJs、JQuery、Bootstrap等。虽然入行这么多年，但是感觉自己在前端方面还是存在基础不牢的地方，特别是CSS和JS。因此最近打算重新阅读这方面的经典书籍，来夯实自己的基础。因此打算边读书，边写博客，将我自己的感觉有用的地方记下来，以加深印象。

在前端开发，人人都会遇到JavaScript，也必须了解它。在用到它之前，首先必须了解怎么样将其引用到自己的页面中去。以前因为是快速开发，很少去关注这点，对JavaScript的引入，一掠而过，没有过多关注，代码的引入也是Ctrl+C和Ctrl+V，导致出现问题的时候，也不知道在何处，对于这一点，深以为戒。

JavaScript引入代码的方式有2中。

一、直接引用。在HTML页面中直接嵌入JS代码。如：

<script type="text/javascript">

    function showMessage(){

        alert("I'm javascript");

    }

</script>

　

当将上面的代码插入到HTML页面，流量器打开之后，会出现一个弹出框，里面有条语句“I'm javascript”。

二、以外部文件方式引用。

此时，在HTML文档或JSP文档中，使用如下的方式引用：

<script type="text/javascript" src="example.js"></script>

在上面的example.js中，可以将showMessage函数放入进去，这样，就可以直接在js代码中直接使用上面的showMessage函数了。

以上就是引入javascript代码的2中方法。但是在使用这2种方法的时候，使用script标签的时候，需要注意，该标签还有其他的属性，需要注意。

1、async：可选，表示应该立即下载脚本，在不妨碍页面中的其他操作的前提下。该属性只对第二种引入方法有效；

2、charset：可选，表示src属性指定的字符集；

3、defer属性：可选，表示脚本延迟执行，直到文档被完全解析和显示之后。这个属性很有效，我就遇到过bug调试的问题。当时是需要执行另外一个文件的方法，但是却有找不到该文件，一直报错。后面经过排查，才知道需要将进入的脚本的属性显性defer设置这样不会在其他文件未加载的时候就执行。

4、language：该属性已经废弃，现在大多少的浏览器会忽略该属性。

5、src属性，可选：外部javascript文件的路径属性；

6：type属性：可选。目前大多少浏览器，默认的熟悉都是text/javascript。