第二章 在HTML頁面裡使用javaScript

來源:互聯網
上載者:User

標籤:

目錄:一、在html裡使用js的方式二、<script>標籤的參數三、javaScript代碼的位置四、<noscript>標籤的意思一、主要有兩種方式:

1、第一種是在HTML裡嵌入:

<!DOCTYPE html><html lang="zh-CN"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>高3</title></head><body><h1>HTML裡使用javaScript</h1><script>alert("hello world!");</script></body></html>

運行此代碼會彈出顯示hello world!的對話方塊。

2、外部引入javaScript:

  HTML代碼:

<!DOCTYPE html><html lang="zh-CN"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>高3</title></head><body><h1>HTML裡使用javaScript</h1><script src="lesson1.js"></script>   <!-- 這裡引用了外部檔案,檔案名稱為lesson1.js --></body></html>

  lesson1.js代碼:

alert("hello world!");
二、<script>標籤的參數:

<script>標籤有好幾個參數,如下:

  • async:可選。表示應該立即下載指令碼,但不應該妨礙頁面中的其他動作,比如下載其他資源或其他指令碼。只對外部指令碼有效,也就是第二種方式加這個參數才有效。
  • charset:可選。表示通過src屬性置頂的代碼的字元集,第二種方式才有用,不過實際意義基本沒用。
  • defer:可選。表示指令碼可以延遲到文檔完全被解析和顯示之後再執行。只對外部指令碼有效,也就是第二種方式。IE7以前對嵌入式指令碼也有效。
  • language:可選。沒用處。。。。。
  • src:可選。但是第二種方式必須。
  • type:可選。代表編寫代碼使用的指令碼語言的內容類型。用與不用都行,建議不用。(因為不加的話預設就有的,跟MIME有關)

async和defer的區別:這兩個都是順延強制指令碼,也就是頁面載入完後執行指令碼,但是如果外部參考多個指令碼的話,defer會按照引用順序執行,async就不能保證了。

三、javaScript在頁面的位置:

目前推薦的是放在</body>之前,其實隨意放在哪都可以,為什麼放在頁面最後呢?是主要因為兩個原因:

一、放在head裡的話,瀏覽器的內容會在全部JavaScript代碼都被下載、解析、執行完成以後,才開始呈現頁面內容(瀏覽器碰到body標籤才開始展示內容)。如果代碼很多,會花一定時間來進行前邊的各種操作,進而導致瀏覽器有空白期。(外部指令碼可以通過上邊的defer,async屬性解決)

二、DOM找不到的問題,有些在初始化裡操作DOM,但是實際DOM瀏覽器還沒解析出來,會導致報錯。

四、<noscript>標籤:

瀏覽器不支援指令碼或者禁用指令碼的時候,<noscript></noscript>標籤裡的內容會被顯示出來。

<noscript>您的瀏覽器不支援javaScript</noscript>

 

第二章 在HTML頁面裡使用javaScript

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.