在本章中,您將學習如何將JavaScript整合到您的網(wǎng)頁中。
通常,有三種方法可以將JavaScript添加到網(wǎng)頁:
使用事件屬性(例如onclick,onkeypress等)將JavaScript代碼直接放在HTML標記內(nèi)
創(chuàng)建一個外部JavaScript文件,然后通過<script>標記的src屬性將其加載到頁面中
在HTML中,必須在<script>和</script>標記之間插入JavaScript代碼。
注意:舊的JavaScript示例可能使用type屬性:<script type="text/javascript">。自HTML5以來,不再需要type屬性。JavaScript是HTML5的默認腳本語言。
您可以在HTML文檔中放置任意數(shù)量的腳本。
腳本可以放置在HTML頁面的<head>或<body>中,具體取決于您希望何時加載腳本。
在此示例中,JavaScript函數(shù)放置在HTML頁面的<head>部分中。
單擊按鈕時將調(diào)用該函數(shù):
<!DOCTYPE html> <html> <head> <script> function myFunc() { document.getElementById("output").innerHTML = "Hello World"; } </script> </head> <h2>JavaScript in Head</h2> <button type="button" onclick="myFunc()">Click</button> <p id="output">This is a Paragraph</p> </html>測試看看?/?
每個<script>標記都會阻止頁面呈現(xiàn)過程,直到它完全下載并執(zhí)行了JavaScript代碼為止,因此在沒有任何正當理由的情況下將它們放置在文檔的開頭部分會嚴重影響您的網(wǎng)站性能。
在此示例中,JavaScript函數(shù)放置在HTML頁面的部分中。
單擊按鈕時將調(diào)用該函數(shù):
<!DOCTYPE html> <html> <h2>JavaScript in Body</h2> <button type="button" onclick="myFunc()">Click</button> <p id="output">這是一個段落</p> <script> function myFunc() { document.getElementById("output").innerHTML = "Hello World"; } </script> </html>測試看看?/?
腳本應(yīng)放在正文部分的末尾,緊挨</body>標記之前,這將使您的網(wǎng)頁加載速度更快,因為它可以防止初始頁面呈現(xiàn)受阻。
您還可以使用事件屬性(例如onclick,onkeypress等)將JavaScript代碼直接放在HTML標記內(nèi)。
但是,應(yīng)避免將大量JavaScript代碼內(nèi)聯(lián),因為JavaScript會使HTML混亂,并使JavaScript代碼難以維護。
您還可以將JavaScript代碼放入具有.js擴展名的單獨文件中,然后通過<script>標記的src屬性將其加載到頁面中。
下面的示例指向一個外部JavaScript文件:
要將多個腳本文件添加到一頁中,請使用多個腳本標簽:
<script src="myscript_1.js"></script> <script src="myscript_2.js"></script>
您可以根據(jù)需要在<head>或<body>放置一個外部腳本引用。
該腳本的行為就好像它恰好位于<script>標記所在的位置一樣。
注意:外部腳本文件中不能包含<script>標記。
將腳本放在外部文件中具有一些優(yōu)點:
它將JavaScript與HTML分開
它使HTML和JavaScript易于閱讀和維護
緩存的JavaScript文件可以加快頁面加載速度
同一腳本可用于多個文檔
提示:通常,首次下載外部JavaScript文件時,它會存儲在瀏覽器的緩存中(就像圖像和樣式表一樣),因此無需從制作該網(wǎng)頁的Web服務(wù)器上多次下載該文件。加載更快。
可以使用完整URL或相對于當前網(wǎng)頁的路徑引用外部腳本。
本示例使用完整的URL鏈接到腳本:
本示例使用位于當前網(wǎng)站上指定文件夾中的腳本:
您可以在“ HTML文件路徑 ”一章中了解有關(guān)文件路徑的更多信息。