重學 JS 之在 HTML 中使用 JavaScript

注意: 本文章爲 《重學js之JavaScript高級程序設計》系列第二章。
關於《重學js之JavaScript高級程序設計》是從新回顧js基礎的學習。

1. 如何在頁面中使用JavaScript

如今在HTML中使用JS 的方法主要是經過在頁面插入 javascript

元素內部使用方法:html

<script type="text/javascript">
    alert('abc')    
</script>
複製代碼

注意事項:

一、包含在 script 中的代碼將依次從上往下依次執行java

二、值得注意的是在js代碼解析的過程當中頁面中其餘內容將不會被加載和解析,直到該段js執行完成。瀏覽器

三、在書寫的過程要注意,在script代碼塊中,不能在代碼閉合標籤 以前在出現閉合標籤,這樣會致使代碼產生錯誤。安全

四、外部引用js的時候閉合標籤能夠省略,可是爲了在IE中正確執行,建議不省略async

五、若是你使用的是src引入外部js,那麼在script標籤之間不能再有內嵌js塊學習

六、src引用外域js文件的時候要注意安全,由於這樣可能會被替換js文件而致使安全問題。url

七、js 代碼塊在頁面中是順序執行的,只有第一個所有執行完成以後纔會順序執行後面的。spa

2. 標籤的位置

通常按照慣例js代碼的引入應該放在 之中,可是因爲 js 代碼在執行的時候頁面其餘元素將不能被加載這樣會致使頁面的交互性不好,因此如今通常將js代碼放在閉合標籤以前,全部頁面html 以後,這樣能夠不會由於js的加載而影響頁面的加載。設計

<html>
    <head>
        <title>demo</title>
    </head>
    <body>
        <script type="text/javascript" src="a.js"></script>
    </body>
</html
複製代碼

3. 延遲腳本 defer async

defer: 腳本在執行的時候不會影響頁面的構造,由於js的執行會被延遲到頁面所有加載以後才運行

async: 腳本和頁面的加載將同步執行。

4. 總結

在頁面中使用Javascript有兩種方式,一種經過src引入外部腳本,一種是在script標籤之間插入js代碼。

一、 使用這兩種方式都須要把 type 設置 爲 text/javascript

二、 在包含外部js文件的時候,必須將src 設置爲指向相應文件的url

三、 全部 script 代碼會按照他們在頁面的順序按序執行,只有以前的被執行完成後續的纔會被執行

四、 瀏覽器在呈現內容以前,必須先解析html以前的script代碼,因此必定要將script代碼放在頁面的最後

歡迎關注個人公衆號【小夭同窗】
相關文章
相關標籤/搜索