JavaScript 腳本可以很靈活的寫在幾乎 HTML 網(wǎng)頁的任何地方。
但是,在 HTML 文件中編寫的 JavaScript 腳本只可以放置在如下部分中:
<head>...</head> 里。 <body>...</body> 里。 <head>...</head> 和 <body>...</body> 里。 <head>...</head> 中。 如下章節(jié),我們將了解如何在上述 HTML 文件的不同的地方編寫 JavaScript 腳本。
<head>...</head> 之間編寫JavaScript 腳本如果你希望在某個(gè)事件中編寫腳本,比如,當(dāng)用戶點(diǎn)擊一個(gè)按鈕時(shí)觸發(fā)一個(gè)事件。
你可以按照如下方式將腳本編寫在 <head>...</head> 結(jié)構(gòu)中
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
上述例子將產(chǎn)生如下效果:
http://wiki.jikexueyuan.com/project/javascript/images/hello.png" alt="" />
<body>...</body> 之間編寫 JavaScript 腳本如果你需要一段腳本來實(shí)現(xiàn)頁面加載后將信息內(nèi)容顯示在頁面中的功能。
這段腳本需要編寫在HTML文件的 <body>...</body> 部分。
這種情況下,你不需要定義任何 JavaScript 函數(shù)。
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
上述例子將產(chǎn)生如下效果:
Advertisements
Hello World
This is web page body
<body>與<head>中編寫JavaScript腳本你也可以同時(shí)將腳本編寫在 <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>
上述例子將產(chǎn)生如下效果:
http://wiki.jikexueyuan.com/project/javascript/images/say-hello.png" alt="" />
當(dāng)你在工作中開始廣泛使用 JavaScript 后,你會(huì)發(fā)現(xiàn)在多 HTML 頁面中重用相同的 JavaScript 是一個(gè)不錯(cuò)的選擇。
這樣,你可以不用維護(hù)多個(gè) HTML 文件中相同的代碼。
Script 標(biāo)簽提供了在外部文件中編寫 JavaScript 腳本并引用在 HTML 文件中的功能。
下面的例子將展示如何使用 script 標(biāo)簽將外部 JavaScript 腳本文件引用在 HTML 文件中。
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
為了實(shí)現(xiàn)上述功能,需要將所有的 JavaScript 源代碼編寫到以 “.js” 為格式后綴名的外部文本文件中,然后按照上面的方式引用入 HTML 文件中。
例如,你可以將下面的內(nèi)容編寫到“文件名.js” 文件中,然后在 HTML 文件中引入該外部腳本文件后,你可以使用 sayHello 函數(shù)。
function sayHello() {
alert("Hello World")
}