在HTML中使用JavaScript

JavaScript要被放到Web中,就不能忽略HTML的感覺。爲了使HTML與JavaScript共存,你們商討出來要讓Web增長對腳本的支持。商量結果就是:使用<script>元素。javascript

在HTML中使用<script>標籤,這個標籤擁有6個屬性,而且這些屬性都是可選的並非必須的:

  • async--該屬性只對於外部腳本的操做,表示是馬上下載腳本,可是不該該妨礙頁面中的其它操做。
  • charset--指定js代碼的字符集,這個屬性不多人使用。
  • defer--該屬性也是對外部腳本的操做,表示腳本能夠延時到文檔本徹底加載顯示之後再執行。
  • language--表示標籤包含的代碼是使用什麼語言編寫的。
  • src--表示我要引用哪一個外部文件。
  • type--language的替代品,表示使用的腳本代碼所使用語言的內容(MIME)類型。約定俗成的默認的type屬性的值爲text/javascript。

使用<script>標籤的方式有兩種:

  • 直接將js代碼嵌入到<script>標籤中
  • 使用src屬性引入外部js代碼

使用<script>標籤嵌入js代碼的語法很簡單,只須要設置type屬性,而後將js代碼直接放在元素內部便可:

<script type="text/javascript">
     function sayHello() {
         // body...
     }
</script>    

引入外部js文件,那麼只須要設置src屬性的值便可。

<script type="text/javascript" src="example.js"></script>

注意:不要在使用了src的<script>標籤中再包含其它js代碼,由於這些新被包含進來的代碼不會被解析,瀏覽器只會下載外部引用的代碼。java

由於src屬性能夠引入外部代碼因此<script>引入來自網絡中的js文件也是可行的,好比咱們引入一個JavaScript框架jquery:jquery

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

延遲腳本--defer屬性的使用方式:瀏覽器

<script type="text/javascript" defer="defer" src="tes.js"></script>

當引入外部js代碼時,若是咱們使用了async屬性,那麼瀏覽器就不會讓頁面去等待腳本文件的下載和執行。異步腳本執行在頁面load事件前,可是不能肯定和DOMContentLoaded的執行屬性,因此在使用async時要加載的js腳本代碼中不要修改DOM的操做。網絡

<script type="text/javascript" defer="defer" async src="tes.js"></script>
相關文章
相關標籤/搜索