JavaScript 使用
本章通过一些实例来讲解 javaScript 的用法。
<script> 标签
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
实例
<!DOCTYPE html><html><body><h2>Body 中的 JavaScript</h2><p id="demo"><script>document.getElementById("demo").innerHTML = "我的第一段 JavaScript";</script></body></html>
注释：某些 JavaScript 也许会使用 type 属性：<script type="text/javascript">。但 type 属性不是必需的，javascript 是 HTML 中的默认脚本语言。
JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。
例如，当发生事件时调用函数，比如当用户点击按钮时。
可以结合 HTML事件 一起学习如何在 HTML的事件中调用 JS 方法。
<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <head> 或 <body> 部分中，但是执行的顺序，会按照 HTML 标签的顺序执行。
<head> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的 <head> 部分。
该函数会在按钮被点击时调用：
实例
<!DOCTYPE html><html><head><script>function changeText() {document.getElementById("demo").innerHTML = "段落已被更改。";}</script></head><body><p id="demo">一个段落。</p><button type="button" onclick="changeText()">试一试</button></body></html>
<body> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的 <body> 部分。
该函数会在按钮被点击时调用：
<!DOCTYPE html><html><body><h2>Body 中的 JavaScript</h2><p id="demo">一个段落。</p><button type="button" onclick="changeText()">试一试</button><script>function changeText() {document.getElementById("demo").innerHTML = "段落已被更改。";}</script></body></html>
提示：把脚本置于元素的底部，可改善显示速度，因为脚本编译会拖慢显示。后期也可以通过 jquery 的 ready
外部脚本
脚本可放置与外部文件中：
外部文件：demo.js
function changeText() {document.getElementById("demo").innerHTML = "段落被更改。";}
外部脚本很实用，如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：
<!DOCTYPE html><html><body><h2>外部 JavaScript</h2><p id="demo">一个段落。</p><button type="button" onclick="changeText()">试一试</button><p>（changeText 存储在名为 "demo.js" 的外部文件中。）</p><script src="/example/js/demo.js"></script></body></html>
您可以在 <head> 或 <body> 中放置外部脚本引用。
该脚本的表现与它被置于 <script> 标签中是一样的。
注释：外部脚本不能包含 <script> 标签。
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：
- 分离了 HTML 和 JS
- 使 HTML 和 JavaScript 代码更易于查看和维护
- 已缓存的 JavaScript 文件可加速 HTML 页面加载
如需向一张页面添加多个脚本文件，可以使用多个 script 标签
<script src="demo1.js"></script><script src="demo2.js"></script>
外部引用
可通过完整的 URL ，这样可以减少站内资源加载数，从而加快网页加载速度，不少网站将 js 文件以二级域名方式分布式部署也是基于这个原因：
<!DOCTYPE html><html><body><h1>外部 JavaScript</h1><p id="demo">一个段落。</p><button type="button" onclick="changeText()">试一试</button><p>（changeText 存储在名为 "demo.js" 的外部文件中。）</p><script src="https://cankaoshouce.com/example/js/demo.js"></script></body></html>
站内引用
使用了位于当前网站上指定文件夹(相对路径)中的脚本：
<!DOCTYPE html><html><body><h2>站内 JavaScript</h2><p id="demo">一个段落。</p><button type="button" onclick="changeText()">试一试</button><p>（myFunction 存储在名为 "demo.js" 的外部文件中。）</p><script src="/example/js/demo.js"></script></body></html>