在 HTML 中使用 JavaScript

最新推荐文章于 2024-04-26 16:47:03 发布

Missed_Call

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量184

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/Missed_Call/article/details/78359878

版权

说到在 HTML 中使用 JavaScript ，就不得不提到<script>这个标签。书中也提到：在 HTML 中使用 JavaScript 的主要方法，就是使用 <script>元素。注意，这里说的是主要方法，并不是唯一方法。下面我们先来介绍一下<script>元素。

`<script>`元素

HTML 当中为<script>定义了六个属性，下面我们来一一介绍一下。

async 属性：

在讲这个属性之前，我们需要事先了解一下计算机语言中的同步和异步。当计算机面对一堆事物的时候，是一件接着一件来处理还是多个事件同时处理，这就是我们所说的同步和异步。
我们从字面上理解：同步的意思就是多件事件同步进行，异步的意思就是分开一个一个执行。但是在计算机语言当中正好相反：异步的意思是多件事件一起执行，同步的意思是事件一个接着一个执行。

我们在了解了同步和异步的概念之后，我们就来学习一下async这个属性。

这个属性表示应该立即下载脚本，但不应该妨碍其他操作。也就是异步下载的意思。
charset 属性：

这个属性表示通过 src 属性指定的代码的字符集。在乱码的时候可能会用到，一般很少用到这个属性。
defer 属性：

这个属性表示脚本可以延迟到文档完全被解析和显示之后执行，也就是延迟执行的意思。
language 属性：

这个属性表示编写代码使用的脚本语言的类型。在上一节中我们提到过 JS 的历史，在那个时候市面上不止 JS 一种脚本语言。不过现在这个属性已经被废弃。
src 属性：

这个属性表示包含要执行的外部文件，在平时的开发中使用最多。
type 属性：

这个属性表示编写代码使用的脚本语言类型(也称为 MIME 类型)，和 language 属性差不多，在实际开发中一般不需要写。

以上就是<script>标签的六种属性，这六种属性都是可选的。在实际开发中，一般要求 JS 代码尽可能与 HTML 代码分离，所以用的最多的也就是 src 属性，其他属性一般用不到。

介绍完<script>这个标签之后，我们来看一下应该把这个标签放在 HTML 代码中的什么位置。

`<script>`标签的位置

<script>标签在 HTML 中的位置有两种：一种是在<head>标签里，一种是在<body>标签里，通常我们在开发时，是把<script>标签放在<body>标签的最低端，也就是</body>标签之前。至于为什么要这样放置，那就不得不说到 JS 这门语言的独特性。
JS 这门语言是一门阻断式的语言，也就是说当浏览器的解释器在一行一行解释 HTML 中的代码的时候，遇到 JS 代码，就会“专心致志”的执行 JS 的代码，其他所有工作都必须停止，很霸道。

我们来设想一下：HTML 是控制网页中的内容的，是整个网页中最为核心的部分，也是网站的开发者真正想呈现给用户的。当把<script>标签放在<head>中的时候，如果 JS 文件过大，那就会出现页面长时间空无一物的情况，这样的用户体验是很差的。所以就会把<script>放在</body>标签的前面，等 HTML 文件加载完成之后，再加载 JS文件。

可能学过了<script>的六个属性之后，有些同学回想：不是有 defer 延迟属性和 async 异步下载属性么？那还需要把<script>写到后面么？

答案是需要的。

<!DOCTYPE html>
<html>
  <head>
        <tittle>Example HTML Page</tittle>
        <script type="text/javascript" defer="defer" src="example.js"></script>
        <script type="text/javascript" defer="defer" src="example.js"></script>
    </head>
    <body>
        <!--这里放内容-->
    </body>
</html>

在上面这段代码中，我们可以看到引用了两个 JS 外部文件。
虽然 HTML5 规范在规定在这种情况下浏览器必须一个挨着一个执行，但是在实际情况下，并不是所有的浏览器都按规范来办事，比如说 IE…所以说当引用的这两个文件有关联的时候，就很容易出现错误。

async 异步下载也是如此。所以在实际开发中，建议不要使用这两个属性。

使用 `<script>`标签的几个注意事项

1.在使用<script>元素嵌入 JS 代码的时候，不要在代码的任何地方出现</script>标签。因为浏览器在解释这行代码的时候直接认为 JS 加载完毕，会抛出一个错误。

<script type="text/javascript">
    function sayScript(){
       alert("</script>")
    }

如果在实际开发中不得不在代码中用到<script>属性时，必须使用转义字符"\"

<script type="text/javascript">
    function sayScript(){
       alert("<\/script>")
    }

2.如果是在 XHTML 文档中，是可以省略</script>闭合标签，写成下面的形式：

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

但是在 HTML 中，这种语法是不符合规范的。

3.如果在<script>标签中既引用了外部文件，又添加了内部文件，浏览器会下载执行外部文件，内部文件将会被忽略。

4.src 属性还可以包含来自外部域的文件，既跨域功能。意思就是说你想引用别人写的 JS 代码，你是可以通过 src 属性的跨域功能的，但是这个功能有好处也有坏处。

好处就是你可以引用别人写的代码，减少你的工作量。坏处就是你控制不了来自外部域的文件，你想改动是不允许的，更糟糕的是如果有人使坏，在你引用的 JS 文件中添加一些东西，后果可想而知。

在 XHTML 中的用法

书中提到因为 HTML5 的盛行，所以这部分的知识可以跳过，但是有一个知识点需要拿出来讲一下：

在 XHTML 中是不允许使用<和>的，这就使得我们编程变得非常麻烦。如果遇到要使用的情况有两种办法可以解决：
1.使用转义符\
2.使用 CData 片段，如下：

<script type="text/javascript"><![CDATA[
    function compare(a,b){
        if(a < b){
            alert("A is less than B");
        }else if (a > b){
            alert("A is greater than B");
        }else {
            alert("A is equal to B");
        }
    }
]]></script>