網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

js如何引入js檔案

欄目: 網際網路 / 釋出於: / 人氣:6.08K

在前端頁面製作中,有時候我們需要觸發某個功能才會引入js檔案,那如何在觸發功能時引入這個js檔案呢?要引入js檔案首先需要思路清晰,接下來會使用一個案例來講解如何引入js如何js檔案。
思路:
1.建立一個script的節點;
2.設定script的檔案型別;
3.設定引入js檔案的路徑;
4.把新建的script放到頁面上。

js如何引入js檔案

操作方法

(01)建立一個資料夾,這個資料夾有一個js資料夾和一個html檔案。js資料夾用來存放需要引入的js檔案。如圖:

js如何引入js檔案 第2張

(02)開啟html檔案,在html檔案上找到<body>,在<body>標籤裡建立一個按鈕標籤,然後給這個標籤新增一個點選addJs事件。如圖

js如何引入js檔案 第3張
js如何引入js檔案 第4張

(03)在js資料夾下建立一個js檔案為。

js如何引入js檔案 第5張

(04)在檔案上輸入一個alert彈出框並儲存,當引入js檔案成功就會執行alert彈出框。

js如何引入js檔案 第6張

(05)回到html檔案,在按鈕輸入框後面建立一個script標籤,然後新增用來引入檔案的addJs事件。在addJs事件執行以下幾個步驟:1.使用teElement("script")建立script節點;2.使用type設定型別;3.使用src設定引入js檔案的路徑;4.給新建的節點設定存放的位置。

js如何引入js檔案 第7張

(06)儲存html檔案後使用瀏覽器開啟,點選按鈕即可看到出現一個彈出,表示引入js檔案成功。

js如何引入js檔案 第8張

(07)所有程式碼。所有程式碼分文html程式碼和js程式碼,只需把所有程式碼複製到新建的html和js檔案上,儲存後執行即可看到效果。htm頁面l程式碼:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>引入js檔案</title></head><body><input type="button" onclick="addJs()" value="點選按鈕" /><script type="text/javascript">function addJs(){var newScript=teElement("script");="text/javascript";="js/";var head=lementsByTagName("head")[0];ndChild(newScript);}</script></body></html>js頁面程式碼:alert("恭喜你,成功引入了js檔案!");

Tags:js 引入 檔案