javascript
JavaScript高级程序设计(二)：在HTML中使用JavaScript
一、使用<script>元素
1、<script>元素定義了6個(gè)屬性：
async:可選。表示應(yīng)該立即下載腳本，但不應(yīng)該妨礙頁(yè)面中的其他操作，比如下載其他資源或等待加載其他腳本。只對(duì)外部腳本文件有效。
charset:可選。表示通過src屬性指定的代碼的字符集。很少人用。
defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行。只對(duì)外部文件有效。
language：已廢棄。
src:可選。表示包含要執(zhí)行代碼的外部文件。
type:可選。表示編寫代碼使用的腳本語(yǔ)言的內(nèi)容類型【MIME類型】。例如：text/javascript、text/ecmascript。實(shí)際上服務(wù)器在傳送JavaScript文件時(shí)使用的MIME類型通常是application/x-javascript。但是為了兼容性和約定俗稱，目前type屬性的值依舊還是text/javascript。
2、<script>元素的使用
使用<script>元素的方式有兩種：直接在頁(yè)面引入和外部js的引入。
? ? ? ? ? ?1）頁(yè)面直接引入js時(shí)，只須為<script>指定type屬性。例如：
<scritpt type="text/javascript">function sayhi(){alert('hi,world!');} </script>注意：A、直接引入的js的解析是從上到下的。
B、在使用<script>嵌入JavaScript代碼時(shí)，記住不要在代碼中的任何地方出現(xiàn)“</script>”字符串。例如：瀏覽器在加載下面代碼時(shí)就會(huì)產(chǎn)生一個(gè)錯(cuò)誤：
<script type="text/javascript">function sayScript(){alert('</script>'); } </script>因?yàn)榘凑战馕銮度胧酱a的規(guī)則，當(dāng)瀏覽器遇到字符串“</script>”時(shí)，就會(huì)認(rèn)為那是結(jié)束的</script>標(biāo)簽。但是通過把這個(gè)字符串分割為兩部分可以解決這個(gè)問題，例如：
<script type="text/javascript">function sayScript(){alert('<\/script>'); } </script>2）外部引入js，src屬性是必需的，這個(gè)屬性的值是一個(gè)指向外部JavaScript文件的鏈接，例如：
<script type='text/javascript' src='example.js'></script>特別提示：
1)、? 通過<script>元素的src屬性還可以包含來自外部域的JavaScript。這一點(diǎn)即使<script>元素倍顯強(qiáng)大，又讓它備受爭(zhēng)議。在這一點(diǎn)上，<script>與<img>元素非常相似，即它的src屬性可以是指向當(dāng)前HTML頁(yè)面所在域之外的某個(gè)域中的URL，例如：
<script type='text/javascript' src="http://www.joyplus.com/example.js"></script>不過，在訪問自己不能控制的服務(wù)器上的JavaScript文件時(shí)則要多加小心。
2)、? 無論如何包含代碼，只要不存在defer和ansync屬性，瀏覽器都會(huì)按照<script>元素在頁(yè)面中出現(xiàn)的先后順序?qū)λ鼈円来芜M(jìn)行解析。
3、<script>元素標(biāo)簽的位置
按照慣例，所有<script>元素都應(yīng)該放在頁(yè)面<head>元素中。例如：
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Demo</title><script type='text/javascript' src='example1.js'></script><script type='text/javascript' src='example2.js'></script></head><body><!--主題內(nèi)容--></body> </html>這種做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方?？墒?#xff0c;在文檔的<head>元素中包含所有JavaScript文件，意味著必須等到全部JavaScript代碼都被下載、解析和執(zhí)行完成以后，才能開始呈現(xiàn)頁(yè)面的內(nèi)容。這無疑導(dǎo)致瀏覽器在呈現(xiàn)頁(yè)面時(shí)出現(xiàn)明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。為了避免這個(gè)問題，現(xiàn)代web應(yīng)用程序一般都把全部JavaScript引用到<body>元素內(nèi)容后面，例如：
?
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Demo</title></head><body><!--主題內(nèi)容--></body><script type='text/javascript' src='example1.js'></script><script type='text/javascript' src='example2.js'></script> </html>這樣就加快了用戶看到頁(yè)面的時(shí)間。
4、<script>延遲腳本【屬性defer】
defer屬性和async屬性都可以起到頁(yè)面不受<head>元素中外部引入的js文件的下載而現(xiàn)實(shí)緩慢。例如：
defer屬性：
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Demo</title><script type='text/javascript' defer='defer' src='example1.js'></script><script type='text/javascript' defer='defer' src='example2.js'></script></head><body><!--主題內(nèi)容--></body> </html>外部腳本文件延遲到瀏覽器遇到</html>標(biāo)簽后再執(zhí)行。HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行，因此第一個(gè)延遲腳本會(huì)先于第二個(gè)延遲腳本執(zhí)行。但在實(shí)際中，延遲腳本并不一定會(huì)按照順序執(zhí)行。因此最好只包含一個(gè)延遲腳本。
由于并非所有瀏覽器都支持defer屬性，所以，把延遲腳本放在頁(yè)面底部仍然是最佳選擇。
5、異步腳本【屬性async】
async屬性：只適用于外部腳本，并告訴瀏覽器立即下載文件。但是js腳本的執(zhí)行的先后順序就不能保證了。因此，使用async屬性的腳本之間確保不能相互依賴。
async屬性:目的是不讓頁(yè)面等待兩個(gè)腳本下載和執(zhí)行，從而異步加載頁(yè)面其他內(nèi)容。為此，建議異步腳本不要在加載期間修改DOM。
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Demo</title><script type='text/javascript' async='async' src='example1.js'></script><script type='text/javascript' async='async' src='example2.js'></script></head><body><!--主題內(nèi)容--></body> </html>
6、<script>元素在XHTML中的使用
XHTML，是將HTML作為XML的應(yīng)用而重新定義的一個(gè)標(biāo)準(zhǔn)。即可擴(kuò)展超文本標(biāo)記語(yǔ)言。
編寫XHTML代碼的規(guī)則要比編寫HTML嚴(yán)格得多，而且直接影響能否在嵌入JavaScript代碼時(shí)使用<script>標(biāo)簽。如下代碼：在HTML中有效，但在XHTML中無效。
<script type='text/javascript'>function compare(a,b){if(a<b){alert("a is less than b!");}else if(a>b){alert("a is greater than b!");}else{alert("a is equals to b!");}} </script>在XHTML中無效的原因是：?
比較語(yǔ)句a<b中的小于號(hào)（<）在XHTML中被當(dāng)做開始一個(gè)新標(biāo)簽來解析。但是作為標(biāo)簽來講，小于號(hào)后面不能跟空格，因此就會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤。
避免在XHTML中出現(xiàn)類似語(yǔ)法錯(cuò)誤的方法有兩個(gè)：
一是用相應(yīng)的HTML實(shí)體替換（<）代碼中的所有小于號(hào)；如：
<script type='text/javascript'>function compare(a,b){if(a < b){alert("a is less than b!");}else if(a>b){alert("a is greater than b!");}else{alert("a is equals to b!");}} </script>這種方法，是代碼不好理解。因此，我們可以使用另一種方法?！ ?/p>
二是使用CDATA片段來包含js代碼。在CDATA片段中可以使用任意字符，且不會(huì)導(dǎo)致語(yǔ)法錯(cuò)誤。具體代碼如下：
<script type='text/javascript'>//<![CDATA[ function compare(a,b){if(a<b){alert("a is less than b!");}else if(a>b){alert("a is greater than b!");}else{alert("a is equals to b!");}}//]]> </script>但是由于不是所有瀏覽器都兼容XHTML的CDATA片段的語(yǔ)法，因此，在使用js注釋將CDATA標(biāo)記注釋掉就可以了。
二、嵌入腳本與外部腳本
Js嵌入代碼與外部文件，最好的做法還是盡可能使用外部文件包含js代碼。優(yōu)點(diǎn)是：
可維護(hù)性強(qiáng)：單獨(dú)將js放到一個(gè)文件中，維護(hù)方便，且變成也方便。
可緩存：多個(gè)HTML都是用一個(gè)js文件時(shí)，那么js文件只需下載一次。加快了頁(yè)面加載的速度。
適應(yīng)未來：外部文件無須使用XHTML或注釋hack。Html和XHTML包含外部文件的語(yǔ)法相同?！咀⑨宧ack：CDATA片段】
三、考慮禁用JavaScript的場(chǎng)景【<noscript>元素】
<noscript>元素只有在下列情況下才會(huì)顯示出來：
1） 瀏覽器不支持腳本；
2） 瀏覽器支持腳本，但腳本被禁用。
符合上述任何一個(gè)條件，瀏覽器都會(huì)顯示<noscript>中的內(nèi)容。而除此之外的請(qǐng)他情況下，瀏覽器不會(huì)呈現(xiàn)<noscript>中的內(nèi)容。
這個(gè)頁(yè)面會(huì)在腳本無效的情況下向用戶顯示一條消息。而在啟用了腳本的瀏覽器中，用戶永遠(yuǎn)也不會(huì)看到它。
?
轉(zhuǎn)載于:https://www.cnblogs.com/renxiaoren/p/5780801.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript高级程序设计(二)：在HTML中使用JavaScript的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hihocoder 1260
- 下一篇： shell脚本接收输入