JavaScript 位置結(jié)構(gòu)
位置結(jié)構(gòu)
JavaScript 腳本可以很靈活的寫在幾乎 HTML 網(wǎng)頁的任何地方。
但是，在 HTML 文件中編寫的 JavaScript 腳本只可以放置在如下部分中：
- HTML 網(wǎng)頁的
<head>...</head>里。 - HTML 網(wǎng)頁的
<body>...</body>里。 - HTML 網(wǎng)頁的
<head>...</head>和<body>...</body>里。 - 外部文件里,并且引用在
<head>...</head>中。
JS只能存在在<script>標簽中，該標簽可以出現(xiàn)在<html>節(jié)點下的任意地方。另外<script>標簽可以用來引用外部js，所以js代碼可以單獨成為一個文件獨立引入。
如下章節(jié)，我們將了解如何在上述 HTML 文件的不同的地方編寫 JavaScript 腳本。
在 <head>...</head> 之間編寫JavaScript 腳本
如果你希望在某個事件中編寫腳本，比如，當用戶點擊一個按鈕時觸發(fā)一個事件。
你可以按照如下方式將腳本編寫在 <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)生如下效果：
在 <body>...</body> 之間編寫 JavaScript 腳本
如果你需要一段腳本來實現(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)生如下效果：
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>上述例子將產(chǎn)生如下效果：
在外部文件中編寫 JavaScript 腳本
當你在工作中開始廣泛使用 JavaScript 后，你會發(fā)現(xiàn)在多 HTML 頁面中重用相同的 JavaScript 是一個不錯的選擇。
這樣，你可以不用維護多個 HTML 文件中相同的代碼。
Script 標簽提供了在外部文件中編寫 JavaScript 腳本并引用在 HTML 文件中的功能。
下面的例子將展示如何使用 script 標簽將外部 JavaScript 腳本文件引用在 HTML 文件中。
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>為了實現(xiàn)上述功能，需要將所有的 JavaScript 源代碼編寫到以 “.js” 為格式后綴名的外部文本文件中，然后按照上面的方式引用入 HTML 文件中。
例如，你可以將下面的內(nèi)容編寫到“文件名.js” 文件中，然后在 HTML 文件中引入該外部腳本文件后，你可以使用 sayHello 函數(shù)。
function sayHello() {
alert("Hello World")
}
更多建議：