在网页中添加JavaScript

一、如何在网页中添加JavaScript

一言以蔽之,通过<script>元素,就可以在网页中添加JavaScript。

 

二、添加的位置

传统的做法是把所有的外部文件引用都放在网页的<head>元素中。网页的内容则放在<body>元素中。由于代码按照从上到下的顺序执行,浏览器会先处理<head>中的代码,然后再显示网页内容。如果JavaScript代码执行时间比较长,那网页内容就会延迟展现。这样当我们打开一个网页时,网页可能会出现一段时间的空白。为了避免这个问题,现在一般都把全部JavaScript引用放在<body>元素中页面内容的后面,也就是</body>结束标记之前,这样JavaScript代码会在页面展现完成后开始执行。

<!DOCTYPE html>
<html>
    <head>
        <title>这是一个测试页面</title>
    </head>
    <body>
        <p>这是一个段落。</p>
        <script src="test.js"></script>
    </body>
</html>

三、 添加的方式

添加的方式主要有两种:一种是直接在网页文件中添加;另一种是在网页文件中添加一个外部文件引用。

直接添加如下:

<script>
    alert("Hi");
</script>

添加外部文件引用:

<script src="test.js"></script>

也许你会想到,那么我像下面这样添加呢?那你绝对是喜欢钻牛角尖的人。哈哈,开玩笑的。这样写的话,只有外部引用有效(test.js),嵌入的代码将会被忽略。

<script src="test.js">
    alert("Hi");
</script>

以上两种添加的方式,推荐使用外部文件引用的方式,便于维护与加载。

 

四、script标签的属性

script标签的属性一共有6个,除了上面用到的src属性,另外还有async和defer比较常用。

async属性只对外部脚本文件有效,表示立刻下载脚本,但不妨碍页面中的其他操作。使用方法:

defer属性也只对外部脚本文件有效,表示脚本可以延迟到文档完全被解析和显示之后再执行,也就是浏览器遇到</html>标签后再执行。使用方法:

 

五、noscript元素

当浏览器不支持JavaScript或者JavaScript被禁用时,使用noscript元素可以让页面平稳地退化。所谓平稳退化,就是在不支持JavaScript或者JavaScript被禁用的浏览器上,用户也可以知道页面的基本内容。示例如下:

<noscript>
    <p>本页面需要浏览器支持并启用JavaScript。</p>
</noscript>

六、题外话

XHTML,,可扩展超文本标记语言,是将HTML作为XML的应用而重新定义的一个标准。XHTML代码规则比HTML代码规则严格很多。

文档模式:包括混杂模式、标准模式、准标准模式。

如果在文档开始出没有发现文档类型声明,则所有的浏览器都会默认开启混杂模式。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注