首頁  >  文章  >  web前端  >  在HTML文件中嵌入JavaScript的四種方法

在HTML文件中嵌入JavaScript的四種方法

青灯夜游
青灯夜游轉載
2018-10-08 15:49:361929瀏覽

本篇文章主要介紹了在HTML文件裡嵌入客戶端JavaScript程式碼有4中方法,有興趣的小夥伴們可以參考一下,具體如下:

在HTML裡嵌入JavaScript

在HTML文件裡嵌入客戶端JavaScript程式碼有4中方法:

1.內嵌,放置在3f1c4e4b6b16bbbd69b2ee476dc4f83a和3fa3f474cbb4b6d948eebecb1be5dde4標籤之間 (少);

2.放置在有3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤的src屬性指定的外部文件中  (多);

#3 .放置自HTML事件處理程序中,該事件處理程序由onclick或onmouseover這樣的HTML屬性值指定它  (很少);

4.放在一個URL裡,這個URL使用特殊的協定」javascript「協定  (很少);

1—附:腳本類型

JavaScript是Web的原始腳本語言,在預設情況下,3f1c4e4b6b16bbbd69b2ee476dc4f83a元素包含或引用JavaScript程式碼。如果要使用不標準的腳本語言,如VBScript,就必須用type屬性指定腳本的MIME類型,例如:

<script type="text/vbscript"> 
 ... ... 
</script>

type 屬性的預設值是 ”text/javascript“。

2——內嵌3f1c4e4b6b16bbbd69b2ee476dc4f83a元素

#例如:

 <script> 
 function displayTime(){ 
 ... ... 
 } 
 window.onload = displayTime; 
</script>

3——src屬性使用外部檔案中的腳本

3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤支援src屬性,這個屬性指定包含JavaScript程式碼的檔案的URL。它的用法如下:

<script src="../../scripts/util.js"></script>

使用src屬性時,3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0標籤之間的任何內容都會被忽略。

當在頁面中用src屬性包含一個腳本時,就給了腳本坐著完全控制Web頁面的權限。

4-HTML中的事件處理程序

當腳本所在的HTML檔案被載入瀏覽器時,這個腳本裡的JavaScript程式碼只會執行一次。 JavaScript程式碼可以透過把函數賦值給Element物件的屬性來註冊事件處理程序。這個Element物件表示文件裡的一個HTML元素。

例如:

<input type="checkbox" name="options" value="giftwrap" onchange="order.options.giftwrap = this.checked;">

HTML中定義的事件處理程序的屬性可以包含任意條JavaScript語句,彼此之間以逗號分隔。這些語句組成一個函數體,然後這個函數成為對應事件處理程序屬性的值。

4-URL中JavaScript

在URL後面跟著一個javascript:協定限定符,是另一個嵌入JavaScript程式碼到客戶端的方式。這個特殊的協定類型指定URL內容為任意字串,這個字串是會被JavaScript解釋器執行的JavaScript程式碼。它被當作單獨的一行程式碼對待,這意味著語句之間必須用分號隔開,而註解必須用/**/註解代替。 javascript:URL能辨識的資源是轉換成字串的執行程式碼的回傳值。如果程式碼回傳 undefined,那麼這個資源是沒有內容的。

javascript:URL可以在可以使用常規URL的任意地方:例如3499910bf9dac5ae3c52d5ede7383485標記的href屬性,ff9c23ada1bcecdd1a0fb5d5a0f18437的action屬性,甚至window.open()方法的參數。

超連結裡的JavaScript URL可以是這樣:

<a href="javascript:new Date().toLocaleTimeString();" rel="external nofollow" > 
What time is it? 
</a>

以上就是本章的全部內容,更多相關教學請造訪JavaScript影片教學

以上是在HTML文件中嵌入JavaScript的四種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:jb51.net。如有侵權,請聯絡admin@php.cn刪除