1.2 在HTML中使用JavaScript

在HTML中使用JavaScript有兩種方法:直接在頁面中嵌入引入外部的JS腳本

直接嵌入和引入都需要用到,這裏先介紹一下該標籤:

<script></script>標籤是雙標記,需要成對出現(在XHTML中,可以簡寫成<script />,但是HTML標準不支持),該標籤可以出現在頁面的任何位置,該標籤的可選參數有6個,廢棄的和不常用的不再研究,部分如下:

async:異步腳本,只針對於引入外部腳本,表示立即下載腳本,因爲在使用時如果要有多個異步腳本要確保或不依賴,所以一般不推薦使用,也不經常使用,瞭解就好;

defer:延遲腳本,等文檔完全被加載後在下載該腳本,也是隻對於外部腳本有效,因爲HTML5會忽略,所以不必使用,瞭解就好;

src**:外部腳本的路徑地址,引入腳本必須;

type:使用腳本語言的內容類型(MIME類型),一般爲t,也會用text/javascript,在非IE系的瀏覽器,也可以是application/javascript或application/ecmascript,但是除了text/javascrip都不常用,其在HTML5裏面,這一項可以省略,而且推薦省略。

在頁面中直接嵌入JavaScript代碼,實例如下:

<script>
    //javascripe code
</script>
//如果是HTML5以前一般指定type
<script type="text/javascript">
    //javascripe code
</script>

因爲JavaScript是從上往下依次解釋的, 所以在嵌入時要考慮到邏輯順序(例如在獲取一個節點的時候不可以在主體加載以前)

引入外部的腳本,實例代碼如下:

<script src="xx/xxx.js"></script>

不要在引入的<script></script>標籤 之間寫腳本代碼,會被忽略,且加載外部腳本也是從上向下加載的,要注意邏輯關係。

因爲自上往下加載的特性,我們一般將腳本的加載放在主體的最後,以避免加載JS的時候造成HTML無法加載,造成的瀏覽器長時間空白造成的不良好用戶體驗(雖然這一點可以用defer延遲腳本實現,但是不推薦):

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這裏放內容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>

<noscript>元素,指在不支持JavaScript或腳本被禁止的時候,顯示,否則,不會顯示,現在已經很少使用了,因爲目前絕大多數瀏覽器都默認支持JavaScript,使用如下:

<noscript>
<p>本頁面需要瀏覽器支持(啓用) JavaScript。
</noscript>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章