首頁 >web前端 >js教程 >如何在HTML文件中放置JS腳本

如何在HTML文件中放置JS腳本

清浅原創: 2019-01-11 09:55:164725瀏覽

在HTML文件中放置JS腳本的方法：1、在
標籤裡放置JS腳本；2、在標籤裡放置JS腳本；3、在和標籤裡放置JS腳本；4、外部引入js腳本。

如何在HTML文件中放置JS腳本

本文操作環境：Windows7系統、Dell G3電腦、html5&&javascript1.8.5版。

js腳本的放置位置有在

標籤裡，在標籤裡、在和標籤裡，以及外部引入js腳本

我們可以在HTML文件中的任何位置放置JavaScript程式碼。但是，在HTML檔案中放置JavaScript程式碼的最佳方法如下

1、在

... head>部分

2、

.. . body>部分放置程式碼

3、在

... body>與 ... head>部分

4、在外部文件中編寫腳本，然後在

... head>部分引入

接下來將在文章中詳細說明這四種方法

如何在HTML文件中放置JS腳本

【推薦課程：JavaScript課程】

在 ... head>部分

如果希望在某個事件上執行腳本，例如當使用者點擊某個位置時會觸發的事件，這時我們可以將該腳本放在頭部

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type = "text/javascript">
            function Hello() {
               alert("Hello World")
            }
      </script>  
</head>

效果圖：

如何在HTML文件中放置JS腳本

#在 .. . body>部分

如果需要在頁面載入時執行腳本以便腳本在頁面中產生內容，則腳本將進入文件的

部分。在這種情況下，將不會使用JavaScript定義任何函數

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
 
<body>
<script type = "text/javascript">
            document.write("Hello World")
      </script>
<p>页面加载时脚本就会生成内容</p>
</body>
</html>

效果圖：

如何在HTML文件中放置JS腳本

#在和部分中的JavaScript程式碼##

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type = "text/javascript">
            function Hello() {
               alert("Hello World")
            }
  
      </script>
</head>
 
<body>
	<script type = "text/javascript">
      
        document.write("Hello World")

      </script>

效果圖：

如何在HTML文件中放置JS腳本

在外部檔案中的JavaScript

當需要在網站上的多個頁面上重複使用相同的JavaScript程式碼時我們就可以透過外部引入js檔案來實現。這樣有利於維護相同的程式碼，該腳本標籤提供一種機制，允許儲存的JavaScript在外部檔案中，然後包含到的HTML檔案。

HTML程式碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="111.js"></script>
</head>
<body>
  <input type = "button" onclick = "Hello()" value = "点击" />
</body>
</html>

外部js檔案

   function Hello() {
 document.write("hello world")
            }

效果圖：

Image 6.jpg

總結：以上就是這篇文章的全部了，希望對大家學習JavaScript有幫助。

以上是如何在HTML文件中放置JS腳本的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用JavaScript實作並行處理下一篇：如何使用JavaScript實作並行處理

看更多