JavaScript在页面中的引用方法

时间:2022-10-08 06:57:10

现在前端开发越来越流行,框架也越来越多,像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。