[toc]
JavaScript 腳本可以很靈活的寫在幾乎 HTML 網頁的任何地方。
但是，在 HTML 文件中編寫的 JavaScript 腳本只可以放置在如下部分中：
HTML 網頁的 `<head>...</head>` 里。
HTML 網頁的 `<body>...</body>` 里。
HTML 網頁的 `<head>...</head>` 和 `<body>...</body>` 里。
外部文件里,并且引用在 `<head>...</head>` 中。
如下章節，我們將了解如何在上述 HTML 文件的不同的地方編寫 JavaScript 腳本。
## 在 `<head>...</head>` 之間編寫JavaScript 腳本
如果你希望在某個事件中編寫腳本，比如，當用戶點擊一個按鈕時觸發一個事件。
你可以按照如下方式將腳本編寫在 `<head>...</head>` 結構中
~~~
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
~~~
上述例子將產生如下效果：
## 在 `<body>...</body>` 之間編寫 JavaScript 腳本
如果你需要一段腳本來實現頁面加載后將信息內容顯示在頁面中的功能。
這段腳本需要編寫在HTML文件的 `<body>...</body>` 部分。
這種情況下，你不需要定義任何 JavaScript 函數。
~~~
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
~~~
上述例子將產生如下效果：
~~~
Advertisements
Hello World
This is web page body
~~~
## 在`<body>`與`<head>`中編寫JavaScript腳本
你也可以同時將腳本編寫在 `<body>` 與 `<head>` 中。
~~~
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
~~~
上述例子將產生如下效果：
## 在外部文件中編寫 JavaScript 腳本
當你在工作中開始廣泛使用 JavaScript 后，你會發現在多 HTML 頁面中重用相同的 JavaScript 是一個不錯的選擇。
這樣，你可以不用維護多個 HTML 文件中相同的代碼。
Script 標簽提供了在外部文件中編寫 JavaScript 腳本并引用在 HTML 文件中的功能。
下面的例子將展示如何使用 script 標簽將外部 JavaScript 腳本文件引用在 HTML 文件中。
~~~
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
~~~
為了實現上述功能，需要將所有的 JavaScript 源代碼編寫到以 “.js” 為格式后綴名的外部文本文件中，然后按照上面的方式引用入 HTML 文件中。
例如，你可以將下面的內容編寫到“文件名.js” 文件中，然后在 HTML 文件中引入該外部腳本文件后，你可以使用 sayHello 函數。
~~~
function sayHello() {
alert("Hello World")
}
~~~
