JavaScript在Web页面里添加JavaScript

JavaScript在Web页面里添加JavaScript,JavaScript代码是和页面内容一起发送给浏览器的,这是如何做到的呢?有两种方法可以把JavaScript代码关联到HTML页面,它们都要用到<script></script>标签。

第一种方法是把JavaScript语句直接包含在HTML文件里:

<script>
      ... Javascript statements are written here ...
</script>

第二种方法,也是更好的方法,是把JavaScript代码保存到单独的文件,然后利用<script>元素的src(源)属性来指定文件名,从而把这个文件包含到页面里:

<script src=′mycode.js′></script>

前例包含了一个名为mycode.js的文件,其中有我们编写的JavaScript语句。如果JavaScript文件与调用脚本不在同一个文件夹,就需要添加一个相对或绝对路径:

<script src=′/path/to/mycode.js′></script>

<script src=′http://www.example.com/path/to/mycode.js′></script>

把JavaScript代码保存到单独的文件中有如下好处。

➢ 当JavaScript代码有更新时,这些更新可以立即作用于使用这个JavaScript文件的页面。这对于JavaScript库是尤为重要的。
➢ HTML页面的代码可以保持简洁,从而提高易读性和可维护性。
➢ 可以稍微提高一点性能。浏览器会把包含文件进行缓存,当前页面或其他页面再次需要使用这个文件时,就可以使用一个本地副本了。

说明:文件名后缀
按照惯例,JavaScript代码文件的名称扩展名是.js。但从实际情况来看,代码文件的名称可以使用任何扩展名,浏览器都会把其中的内容当作JavaScript来解释。

注意:留意标记
外部文件中的JavaScript语句不能放到<script></script>标签中,也不能使用任何HTML标签,只能是纯粹的JavaScript代码。

可以在<body>区域里包含一个JavaScript代码文件。JavaScript可以放置到HTML页面的<head><body>区域里,但一般情况下,我们把JavaScript代码放到页面的<head>区域,从而让文档的其他部分能够调用其中的函数。就目前而言,我们把范例代码暂时放到文档的<body>区域。

程序清单 包含了一个JavaScript文件的一个HTML文档

<!DOCTYPE html>
<html>
<head>
    <title>A Simple Page</title>
</head>
<body>
    <p>Some content ...</p>
    <script src=′mycode.js′></script>
</body>
</html>

当JavaScript代码位于文档的body区域时,在页面被呈现时,遇到这些代码就会解释和执行。为此,JavaScript代码不要试图访问没有定义的DOM元素,这一点很重要。相反,JavaScript语句必须包含在定义这些元素的HTML的后面。在代码读取和执行完毕之后,页面呈现才会继续,直到页面完成。

提示:多个脚本
你并不是只能够使用一个script元素,需要的话,可以在页面中使用任意多个script元素。

说明:HTML注释
有时在<script>标签里可以看到HTML风格的注释标签<!---->,它们包含着JavaScript语句,比如:

<script>
    <!--
    ... Javascript statements are written here ...
    -->
</script>

这是为了兼容不能识别<script>标签的老版本浏览器。这种“注释”方式可以防止老版本浏览器把JavaScript源代码当作页面内容显示出来。除非我们有特别明确的需求要支持老版本的浏览器,否则是不需要使用这种技术的。

酷客网相关文章:

赞(0)

评论 抢沙发

评论前必须登录!