浏览器中的 JavaScript

<script>
    // 输出语句
    console.log('HelloWrold')
    alert('HelloWorld')
    document.write('HelloWorld')
</script>

// 输出语句

console.log('HelloWrold')

alert('HelloWorld')

document.write('HelloWorld')

</script>

在 HTML 中引入 JavaScript，主要包括以下 4 种方式，推荐使用“外部脚本”：

行内脚本

主要是通过 HTML 属性把 JS 代码写在属性值中来实现。

其问题在于：结构、行为混合，因此，不建议使用。

[1] HTML 中的事件处理程序 — on[EventName]

当脚本所在的 HTML 文件被载入浏览器时，这个脚本里的 JS 代码只会执行一次；

JS 代码可以通过把函数赋值给 Element 对象的属性来注册事件处理程序 — HTML 中定义的事件处理程序的属性可以包含任意条 JS 语句，相互之间用逗号分隔，这些语句组成一个函数体，然后这个函数成为对应事件处理程序属性的值

<input type="button" value="click" onclick="window.alert('HelloWorld');" onmouseover="this.style.backgroundColor='#000';this.style.color='#fff';" onmouseout=" this.style.backgroundColor='red'; this.style.color='inherit'; "/>

1
2
3
4
5
6
7

<input type="button" value="click"
       onclick="window.alert('HelloWorld');"
       onmouseover="this.style.backgroundColor='#000';this.style.color='#fff';"
       onmouseout="
        this.style.backgroundColor='red';
        this.style.color='inherit';
        "/>

[2] URL 中的 JavaScript（ JS 伪协议）— javascript:URL

在 URL 后面跟着一个 javascript:协议限定符，是另一种将 JS 代码嵌入到客户端的方式。

这种特殊的协议类型指定 URL 内容为任意字符串，这个字符串是会被 JS 解释器运行的 javascript 代码，它被当作单独的一行代码对待，这意味着语句之间必须用分号隔开，而注释必须用 /**/ 代替。

javascript:URL 能识别的资源是转换成字符串的执行代码的返回值。

若返回 undefined，则这个资源是没有内容的。

// javascript:URL 可以在可以使用常规 URL 的任意地方， // 如 a 链接的 href 属性、form 的 action 属性等。 <a href="javascript:alert('Hello');">HelloWorld</a> <iframe src="javascript:document.write('<p>World</p>');" frameborder="0"></iframe>

1
2
3
4
5

// javascript:URL 可以在可以使用常规 URL 的任意地方，
// 如 a 链接的 href 属性、form 的 action 属性等。

<a href="javascript:alert('Hello');">HelloWorld</a>
<iframe src="javascript:document.write('<p>World</p>');" frameborder="0"></iframe>

使用 Script 元素引入（内部脚本、外部脚本）

使用 <script> 元素的方式有两种：

直接在页面中嵌入 JS 代码 — 内部脚本

使用 <script> 元素可以把 JS 嵌入到 HTML 页面中，让脚本和标记混合在一起。

<script> console.log('demo'); </script>

1
2
3

<script>
console.log('demo');
</script>

包含外部 JS 文件 — 外部脚本

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

1

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

在 HTML 文档中嵌入 JS 代码，虽然没问题，

但，一般认为更好的做法，还是尽可能的使用外部文件来包含 JS 代码。

不过，并不存在必须使用外部文件的硬性规定，但使用外部文件有如下优点：

可维护性：遍及不同 HTML 页面的 JS 会造成维护问题。但是，所有的 JS 文件都放在一个文件夹中，维护起来就方便多了；且开发人员也可以在不触及 HTML 标签的情况下集中精力编辑 JS 代码。

可缓存：浏览器能够根据具体的设置缓存链接的所有外部 JS 文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需要下载一次。因此，最终结果就是能够加载页面加载的速度。

需注意的是：

内部脚本和外部脚本不能混合使用。即，在外部 JS 引用的标签中不能写入代码（ jQuery 中会遇见问题）。

<script> 标签在页面中可出现多次。

同一 <script> 中有错误代码，会影响该标签中后续 JS 代码的执行，但不影响其他 <script> 中代码的执行。

<script> 标签一般放在 body 的底部或被操作元素的下方（主要是因为代码自上而下执行）。

<script> 中可添加 type="text/javascript" 和 language="JavaScript" 属性，但 html5 规范中，二者皆可省略。

浏览器中的 JavaScript

行内脚本

使用 Script 元素引入（ 内部脚本、外部脚本 ）

使用 Script 元素引入（内部脚本、外部脚本）