>[info] 在 HTML 页面中使用 JavaScript 代码 和在 HTML中使用 CSS 样式一样，也有三种方法，即当页面书写、外部引用、和在当前行书写三种
这三种方法中，前两种都会用到 `<script>` 标签 ，第三种是在 HTML 标签中 使用 `Javascript:` 的方式书写
## 一 、当前页面书写
使用 `<script> ... </script>` 标签，可以将 JavaScript 代码写在 HTML 文档的任意位置
如：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is a test</title>
<script type="text/javascript">
function sayHello(){
alert("Hello World");
}
</script>
</head>
<body>
</body>
</html>
~~~
`<script>` 定义了下列 6 个属性
* src ：可选。表示包含要执行代码的外部文件。
* async ：可选，异步加载，表示立即下载该 JavaScript 脚本，但不影响其它代码的继续执行，此属性只有在加载外部代码（使用 src 属性）时才会有效。
* type ：可选，默认为 `type="text/javascript"` ,和 language 属性一样，都可用来指定该` <script> `标签中的脚本的类型的。
* charset： 可选，用来指定当前脚本的字符集，此属性也是只有在使用 src 属性之后才会有效，但因为一般浏览器会直接忽略该属性，所以使用的较少。
* defer： 可选，表示等到当前脚本可以等到该页面代码完全加载显示之后再执行，此属性也只针对外部引入脚本有效，也就是使用了 src 属性之后有效。
* language：已废弃，原来用于表示编写代码使用的脚本语言，由于大部分浏览器都会忽略该属性，所以也就没什么用了
>[danger] 包含在 `<script>` 元素内部的 JavaScript 代码将被从上至下依次解释。就拿前面这个例子来说，解释器会解释一个函数的定义，然后将该定义保存在自己的环境当中。在解释器对 `<script>` 元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示
## 二、外部引入方式
使用外部引入的方式，需要用到 `<script>` 标签中的 `src` 属性，例如：
~~~
<script type="text/javascript" src="howie.js"></script>
~~~
上面这段代码表示，在当前页面中引入一个外部名叫 howie.js 的 js 文件
>[danger] 如果在 `<script>` 标签中使用了 src 属性，则写在当前 `<script>`与`</script>` 标签之间的 JavaScript 代码将会被忽略，也就是不会被执行
## 三、在当前 HTML 标签中书写 JavaScript 代码
通常前两种方式已经能够满足日常的大部分需求了，但有时也会有一些特殊的需求，需要在 HTML 标签中书写 JavaScript 代码，如：
~~~
<a href="Javascript:alert('我就是不给你跳');">这个 a 链接不会跳转</a>
<button type="button" onclick="javascript:document.location.href='http://www.baidu.com'">普通按钮也可以跳转</button>
~~~
以上这段代码第一个 `<a>`标签将不会跳转，第二个普通的 `<button>` 按钮将会跳转到另一个网站。
>[danger] 无论用何种方式书写 JavaScript 代码，只要不存在 `defer` 和` async` 属性，浏览器都会按照 `<script>` 元素在页面中出现的先后顺序对它们依次进行解析。换句话说，在第一个 `<script>` 元素包含的代码解析完成后，第二个 `<script>` 包含的代码才会被解析，然后才是第三个、第四个……
## JavaScript 代码的书写位置
按照传统的做法，所有的 JavaScript 代码都需要书写在 `<head>` 标签当中，但是这样所有的 CSS 样式、JavaScript 脚本全部加载完成后，再加载 HTML 代码中的 body 部分，就会影响当前页面的加载速度，所以，推荐的书写 JavaScript 脚本的位置是在 body 的末尾部分，如下：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is a test</title>
</head>
<body>
<!-- 主体 HTML 代码部分-->
<script type="text/javascript" src="howie.js"></script>
<script type="text/javascript">
/* JavaScript 脚本书写位置 */
</script>
</body>
</html>
~~~
这样书写，在解析 JavaScript 代码之前，页面的内容将会完全呈现在浏览器当，而用户也不会因为览器窗口显示空白页面而感觉到加载太慢了。
## 建议书写方式
建议将所有的 `JavaScript` 文件及`CSS` 和 `HTML` 文件分开独立书写，做到**行为**、**样式**、**结构**相分离，这样结构会更加清晰，也更易于维护。
