1.4　JavaScript使用

我们可以用三种方式将JavaScript代码嵌入HTML页面中。

①　内联的JavaScript

②　外部的JavaScript

③　行内的JavaScript

首先，使用记事本创建一个空白的文件，保存时将文件名的扩展名改为.html（如：test.html），保存类型选择“所有文件（*.*）”，编码选择UTF-8，单击“保存”按钮进行保存，一个空白的HTML页面就创建好了，然后用浏览器打开这个页面。

如果你用的是Mac OS系统，则使用文本编辑工具创建一个文件，在执行“格式”|“制作纯文本”命令，同样在保存文件时将文件的扩展名改为.html，格式选择“网页（.html）”，单击“存储”按钮，此时系统会弹出一个询问框，单击“使用.html”按钮即可。

1.4.1　内联的JavaScript

如需在HTML页面中插入JavaScript，需要使用<script>标签。

浏览器会解释并执行位于<script>和</script>之间的JavaScript代码，打开你的记事本，复制以下代码到之前建立的HTML文档中，保存后刷新浏览器。

document.write方法会向HTML页面中写入指定值，在上面的代码中，我们向HTML页面中写入了一个h1标签，如果刷新浏览器，页面会显示hello world，则表示JavaScript代码运行成功。

1.4.2　外部的JavaScript

JavaScript代码也可以放在一个扩展名为.js的文件中，利用<script>标签将其引入HTML页面，<script>标签的src属性设置外部脚本的地址，这个地址可以是相对地址，也可以是绝对地址。

顾名思义，相对地址即是被引用的文件相对于当前页面的地址，例如./example.js，表示example.js文件位于当前目录下的同级位置；绝对地址则是被引用的文件在网络或本地的绝对位置，具有唯一性，不会随页面位置的变化而变化，例如https://example.com/js/example.js。

当JavaScript代码需要被应用到很多页面时，外部JavaScript引用将是理想的选择。使用外部JavaScript，即可通过更改一个文件来改变整个站点的代码，而不需要在每个页面中逐一调整。

那么，如果为<script>标签指定了src，引用外部js文件，而且又在<script>中编写了一段代码，结果将会怎么样呢？

上述代码中，页面仍然显示hello world，并不会显示hello book，这表示指定了src属性的<script>，其中的JavaScript代码会被忽略。

1.4.3　行内的JavaScript

还有一种使用JavaScript的方式，即在html标签上直接添加JavaScript代码，但通常不推荐使用这种方式，因为这样会让代码变得难以维护。

当有大量行内的JavaScript代码嵌入页面时，页面就会变得混乱不堪，降低代码维护的效率。此外，这也会增大页面的体积，增长页面的加载时间。

练习

• 新建一个HTML页面。
• 新建一个.js文件。
• 分别使用内联、外部、行内三种JavaScript代码使用方式，在浏览器中显示hello world字样。