現在的位置: 首頁 > 移動開發 > 正文

將 JavaScript 腳本嵌入到 HTML 文檔中有哪些方法

2020年06月11日 移動開發 ⁄ 共 2371字 ⁄ 字號 評論關閉

  avaScript必需嵌入到HTML文檔,才能被瀏覽器解釋和執行。下面學步園小編來講解下將JavaScript腳本嵌入到HTML文檔中有哪些方法?

  將JavaScript腳本嵌入到HTML文檔中有哪些方法

  一.通過script>標簽嵌入

  通過script>標簽嵌入JavaScript代碼時,必需將代碼放在scripttype="text/javascript">和/script>標記對之間。

  【例1-2】通過script>標簽嵌入JavaScript代碼:

  html>

  head>

  title>通過script>標簽嵌入/title>

  /head>

  bdoy>

  !--開始嵌入JavaScript代碼-->

  scripttype="text/javascript">

  document.write("這是通過script>標簽嵌入的代碼");//輸出語句

  /script>

  !--結束-->

  /body>

  /html>

  瀏覽器載入HTML文檔時,會識別script>標簽,執行其中的JavaScript代碼,然后將結果返回并在瀏覽器窗口顯示。

  二.引入外部腳本

  當網頁功能比較復雜,或通用代碼(每個頁面都是用)較多時,直接在script>標簽中嵌入JavaScript代碼會導致網頁雜亂,不易管理。這時候,我們希望能將JavaScript代碼保存在單獨的文件中,使用時再嵌入到HTML文檔。

  可以通過script>標簽的src屬性引入外部文件。

  例如,引入網站根目錄下的demo.js文件:

  scripttype="text/javascript"src="/demo.js">/script>

  引入上級目錄中script目錄下的demo.js文件:

  scripttype="text/javascript"src="../script/demo.js">/script>

  引入百度的JavaScript文件:

  scripttype="text/javascript"src="http://www.baidu.com/script/demo.js">/script>

  【例1-3】引入外部腳本:

  html>

  head>

  title>引入外部腳本/title>

  /head>

  bdoy>

  scripttype="text/javascript"src="1-3.js">/script>

  /body>

  /html>

  將上面代碼保存為1-3.html,并在同一目錄下創建一個JavaScript腳本文件,命名為1-3.js,輸入如下代碼:

  document.write("引入外部腳本");

  在瀏覽器中打開1-3.html,顯示”引入外部腳本“,外部腳本成功引入并執行。

  引入外部腳本,能夠很輕松的讓多個頁面使用相同的JavaScript代碼。外部腳本一般會被瀏覽器保存在緩存文件中,用戶再次訪問網頁時,無需重新載入,加快了網頁打開速度。

  注意:外部腳本一般保存為.js的文件。

  將JavaScript腳本嵌入到HTML文檔中有哪些方法

  三.在HTML屬性中直接嵌入

  在HTML屬性中嵌入JavaScript代碼主要是針對JavaScript事件。JavaScript事件是指用戶對網頁進行操作時,網頁做出相應的響應。

  【例1-4】鼠標單擊事件:

  html>

  head>

  title>鼠標單擊事件/title>

  /head>

  bdoy>

  ponclick="alert('你已經點擊了我!');">請點擊這里/p>

  /body>

  /html>

  html>

  head>

  title>鼠標雙擊事件/title>

  /head>

  bdoy>

  pondblclick="alert('你已經雙擊了我!');">請雙擊這里/p>

  /body>

  /html>

  【例1-5】鼠標移入事件:

  html>

  head>

  title>鼠標雙擊事件/title>

  /head>

  bdoy>

  ponmouseover="alert('你的鼠標已移動!');">請將鼠標移動到這里/p>

  /body>

  /html>

  實例演示:

  說明:alert()函數彈出一個警告框。

  嵌入腳本的位置

  script>標簽嵌入的腳本和外部引入的腳本可以放在head>標簽和body>標簽的任意位置。

  上面的幾個例子,都是將JavaScript代碼嵌入到body>標簽,下面演示在head>標簽中嵌入腳本。

  【例1-6】在head>標簽中引入外部腳本

  html>

  head>

  title>引入外部腳本/title>

  scripttype="text/javascript"src="1-3.js">/script>

  /head>

  bdoy>

  p>在head>標簽中引入外部腳本/p>

  /body>

  /html>

  【例1-6】通過script>標簽嵌入腳本

  html>

  head>

  title>引入外部腳本/title>

  /head>

  bdoy>

  pid="demo">請點擊這里/p>

  scripttype="text/javascript">

  document.getElementById("demo").onclick=function(){

  alert("你已經點擊了我");

  }

  /script>

  /body>

  /html>

  以上就是關于“將JavaScript腳本嵌入到HTML文檔中有哪些方法”的內容,希望對大家有用。更多資訊請關注學步園。學步園,您學習IT技術的優質平臺!

抱歉!評論已關閉.

奔驰宝马破解版下载 新疆十一选五 pk10赛车历史记录官网 白小姐预测 上证指数股票 加拿大28永久算式 快乐8平台能提现吗 2010年上证指数走势图 黑龙冮体彩11选5开结果 加拿大西部快乐8开奖 浙江20选5中奖规则及奖金 重庆幸运农场规则攻略 2011年上证指数 天津快乐10分一定牛 配资平台软件下载 福彩3d500期走势图 246天天好彩精选资料大全天下彩