JS基本应用:引入JavaScript的三种方式。
在网页中编写JavaScript代码时,需要先引入JavaScript代码。JavaScript代码有3种引入方式,分别是行内式、嵌入式和外链式,下面分别进行讲解。
行内式 {#mark-H2-2}
行内式是将JavaScript代码作为HTML标签的属性值使用。例如,在单击超链接"test"时,弹出一个警告框提示"Hello",示例代码如下:
<a href="javascript:alert('Hello');">test</a>
需要说明的是,行内式只有在临时测试或者特殊情况下使用,一般情况下不推荐使用行内式,因为行内式有如下缺点。
(1)行内式可读性较差,尤其是在HTML文件中编写大量JavaScript代码时,不方便阅读。
(2)行内式在遇到多层引号嵌套的情况时,引号非常容易混淆,导致代码出错。
嵌入式 {#mark-H2-8}
嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码,直接编写到HTML文件中,通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型,HTML.5中该属性的默认值为"text/javascript",因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下:
<script>
JavaScript代码
</script>
外链式 {#mark-H2-11}
外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中,一般使用"js"作为文件的扩展名,在HTML页面中使用<script>标签的src属性引人"js"文件。外链式适合javascript代码量较多的情况。在html页面中引入"js"文件,示例代码如下:
<script src="test.js"></script>
上述代码表示引入当前目录下的tesL.js文件。需要注意的是,外链式的标签内不可以编写JavaScript 代码。
为了帮助初学者更好地理解外链式,下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件,引入Example02.js文件,具体代码如例1-2所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="Example02.js"></script>
</body>
</html>
标签的src属性设置了要引入的文件为Example02.js。
创建Example02.js文件,在该文件中编写如下代码:
alert ('Hello JavaScript');
保存代码,在浏览器中访问Example02.html文件,页面效果与例1-1相同。
以上讲解了JavaScript的3种引入方式。现代网页开发中提倡结构、样式、行为的分离,即分离HTML、CSS、JavaScrixt这3部分代码,这样更有利于文件的维护。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScrigt代码时,推荐使用外链式。外链式相比嵌入式,具有以下3点优势:
(1)外链式存在于独立文件中,有利于修改和维护,而嵌人式会导致HTML代码与JavaScript代码混合在一起。
(2)外链式可以利用浏览器缓存提高速度。例如,在多个页面中引入相同的JavaScript文件时,打开第1个页面后,浏览器将JavaScript文件缓存下来,下次打开其他页面时就不用重新下载该文件了。
(3)外链式有利于HTML页h代码结构化,把大段的JavaScript代码分离到HTML页面之外,既美观,也方便文件级别的代码复用。