js002-在HTML中使用JavaScript
js002-在HTML中使用JavaScript
2.1??????????? <script>元素
? 定義了以下6個屬性
?
| async: 可選。表示應該立即下載腳本，但不妨礙頁面中的其他操作，比如下載其他資源或者等待加載其他腳本。只對外部腳本文件有效。(異步的) |
| charset：可選。表示通過src屬性指定的代碼的字符集。 |
| defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執行，只對外部腳本有效。IE7及其更早的版本也支持這個屬性。（延遲，延期） |
| src：可選。表示包含要執行代碼的外部文件。 |
| type：可選。可以看成是language的替代屬性，表示編寫代碼使用的腳本語言的內同類型 |
<script type="text/javascript"></script>
使用<script>元素的方法有兩種在：直接嵌入Javascript代碼和包含外部Javascript文件
?
2.1.1直接嵌入Javascript代碼：
| <script type="text/javascript"> ?????? function sayhi(){ ????????????? alert("hi~"); ?????? } </script> |
直接嵌入Javascript代碼時，不要再代碼中出現</script>，否則瀏覽器會認為那是一個結束標簽，通過轉義符可以解決這個問題
| 有問題： <script type="text/javascript"> ?????? function sayhi(){ ?????? ?????? alert("</script>"); ?????? } </script> | 解決問題： <script type="text/javascript"> ?????? function sayhi(){ ?????? ?????? alert("<\/script>"); ?????? } </script> |
?
2.1.2 引入外部Javascript文件
?必須包含src屬性，這個屬性值是一個指向外部Javascript文件的鏈接。
| <script type="text/javascript" src="example.js"> ?????? function sayhi(){ ????????????? alert("hi~"); ?????? } </script> |
?
?
?
?
?
2.1.3標簽的位置
一般放在頁面的<head>元素里面
| <!DOCTYPE html> <html> ?????? <head> ????????????? <title>example page</title> ????????????? <script type="text/javascript" src="example1.js"></script> ????????????? <script type="text/javascript" src="example2.js"></script> ?????? </head> ?????? <body> ???? （內容） ?????? </body> </html> |
?
?
放在所有內容的后面，這樣瀏覽器在解析Javascript代碼之前就把整個頁面展示出來了，這樣加快了打開速度。
| <!DOCTYPE html> <html> ?????? <head> ????????????? <title>example page</title> ?????? </head> ?????? <body> ???? （內容） <script type="text/javascript" src="example1.js"></script> ????????????? <script type="text/javascript" src="example2.js"></script> ?????? </body> </html> |
?
2.1.4延遲腳本 defer屬性 （只適用于外部文件）
在<script>元素中使用defer屬性，相當于告訴瀏覽器立即下載，單延遲執行。（在遇到</html>元素后才執行）
| <!DOCTYPE html> <html> ?????? <head> <title>example page</title> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script> ?????? </head> ?????? <body> ???? （內容） </body> </html> |
在html文檔中，要把defer屬性設置為defer="defer"。
2.1.5異步腳本 async屬性，用來改變處理腳本的行為，只適用于外部腳本
| <!DOCTYPE html> <html> ?????? <head> ????????????? <title>example page</title> ????????????? <script type="text/javascript" async="async" src="example1.js"></script> ????????????? <script type="text/javascript" async="async" src="example2.js"></script> ?????? </head> ?????? <body> ? ?????? </body> </html> |
第二個腳本可能會在第一個腳本之前執行，所以保證兩個腳本的不相關性很重要。
在html文檔中，要把sync屬性設置為async="async"
?
2.1.6在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 equal to B"); ????????????? } ?????? } </script> |
用(<)? 替換代碼中的小于號(<)
| 如：if (a < b) |
?
2.2??????????? 嵌入代碼與外部文件
最好適用外部文件，外部文件有以下優點：
| 可維護性：維護代碼比較輕松 |
| 可緩存：瀏覽器能根據具體的設置緩存連接的所有外部Javascript文件 |
| 適應未來： |
?
2.3??????????? 文檔模式
??? 混雜模式和標準模式
2.4??????????? <noscript>元素
? ?在以下集中情況中會顯示出來（一般放在body中）
| 瀏覽器不支持腳本 |
| 瀏覽器支持腳本，但是腳本被禁用 |
?
2.5??????????? ?
?
?
版權聲明：未經作者同意，不得私自轉載。http://www.cnblogs.com/lal-fighting/
轉載于:https://www.cnblogs.com/lal-fighting/p/5139996.html
總結
以上是生活随笔為你收集整理的js002-在HTML中使用JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 钉钉服务器端SDK PHP版
- 下一篇： JSONP跨域的原理解析及其实现介绍