首頁 > web前端 > js教程 > 主體

HTML文件內嵌入JS方法匯總

php中世界最好的语言
發布: 2018-05-31 10:32:50
原創
1993 人瀏覽過

這次帶給大家HTML文檔內嵌入JS方法匯總,HTML文檔內嵌入JS的注意事項有哪些,下面就是實戰案例,一起來看一下。

在HTML裡嵌入JavaScript

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

1 .內嵌,放置在<script>和</script>標籤之間  (少);

2.放置在有<script>標籤的src屬性指定的外部文件中  (多) ;</p> <p style="text-align: left;">3.放置自<a href="http://www.php.cn/code/8922.html" target="_blank">HTML事件處理程序</a>中,該事件處理程序由onclick或<a href="http://www.php.cn/wiki/1457.html" target="_blank">onmouseover</a>這樣的HTML屬性值指定它  (很少);</p> <p style="text-align: left;">4.放在一個URL裡,這個URL使用特殊的協定」javascript「協定  (很少);</p> <p style="text-align: left;"><span style="color: #0000ff">0—附:腳本類型</span></p> <p style="text-align: left;">JavaScript是Web的原始腳本語言,在預設情況下,<script>元素包含或引用JavaScript程式碼。如果要使用不標準的腳本語言,如VBScript,就必須用type屬性指定腳本的MIME類型,例如:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;script type=&quot;text/vbscript&quot;&gt;   ... ...  &lt;/script&gt;</pre><div class="contentsignin">登入後複製</div></div> <p style="text-align: left;"><span style="color: #ff0000">type 屬性的預設值是 ”text/javascript“。 </span></p> <p style="text-align: left;"><span style="color: #0000ff">1——內嵌<script>元素</span></p> <p style="text-align: left;">#例如:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;script&gt;   function displayTime(){   ... ...   }   window.onload = displayTime;  &lt;/script&gt;</pre><div class="contentsignin">登入後複製</div></div> <p style="text-align: left;"><span style="color: #0000ff">2——src屬性使用外部檔案中的腳本</span></p> <p style="text-align: left;"><script>標籤支援src屬性,這個屬性指定包含JavaScript程式碼的檔案的URL。它的用法如下:</p> <p style="text-align: left;"><span style="text-decoration:underline;">複製程式碼</span> 程式碼如下:</p> <p style="text-align: left;"><script src="../../scripts/util.js">< /script></p> <p style="text-align: left;">使用src屬性時,<script></script>標籤之間的任何內容都會被忽略。

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

3-HTML中的事件處理程序

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

例如:

複製程式碼 程式碼如下:

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

4-URL中JavaScript

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

javascript:URL可以在可以使用常規URL的任意地方:例如標記的href屬性,

的action屬性,甚至window.open ()方法的參數。

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

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

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

怎麼使用Vue實作樹狀視圖資料

怎麼使用V-Distpicker元件

#

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!