書接上文,上文提到若干條JavaScript的基礎性知識,大部分都是一些概念性的東西,本着認真嚴謹的態度,我們要認真對待,有些條目的問題是某個知識點的周邊延伸,為節約篇幅,就一起整理了,如有描述不對的地方或者是描述不足的地方,望大家批評指正,下面是我給我”參考答案“,也只是僅供參考:
1.JavaScript運行在html中,引用有幾種方式?
我知道的方法有3種:
第一種:外部引用遠程JavaScript文件,如<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>(相對路勁)或者是<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>(絕對路勁);
第二種:直接用寫在頁面上,如:
<script type="text/javascript"> document.write('這里是一行JavaScript代碼1'); </script>
第三種:在JavaScript代碼中引用外部js:
<script> window.onload = function(){ var script = document.createElement("script"); script.setAttribute("type","text/javascript"); script.src = "http://common.cnblogs.com/script/jquery.js"; document.getElementsByTagName("head")[0].appendChild(script); } </script>
2.JavaScript通常寫在頁面的什么位置?
javascript的書寫位置大致有3個地方:
第一個地方:是head頭部,比如:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>javascript引用方式</title> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> <script> window.onload = function(){ var script = document.createElement("script"); script.setAttribute("type","text/javascript"); script.src = "http://common.cnblogs.com/script/index.js"; document.getElementsByTagName("head")[0].appendChild(script); } </script> </head>
第二個地方:body的任何位置,如:
<body> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> <p>這里是一段文本!</p> <script> window.onload = function(){ var script = document.createElement("script"); script.setAttribute("type","text/javascript"); script.src = "http://common.cnblogs.com/script/jquery.js"; document.getElementsByTagName("head")[0].appendChild(script); } </script> </body>
第三個地方:以事件的形式寫在標簽上,如:
<p onClick="javascript:alert('叫你點,你就點啊!')">點我點我!</p>
3.改變js加載順序的方法有什么?
JavaScript是有加載順序的,不同的加載順序可以會導致不同的結果,舉個栗子:
<script> var txt = document.getElementById("txt"); alert(txt.innerHTML); </script> <div id="txt">我是一段文本,你不能找到我!</div> <div id="val">我也是一段文本,你能找到我!</div> <script> var txt = document.getElementById("val"); alert(txt.innerHTML); </script>
第一段js執行會出錯,因為html代碼運行是至上而下加載的,第一段JavaScript代碼先執行,才執行下面的html代碼,所以根本就找不到該DOM節點,就會報錯,如果html先執行,在運行JavaScript代碼,就像第二段,就可以運行成功!當然,我不是說一定要先執行html代碼,在執行JavaScript代碼,這個要依情況而定;
再舉一個栗子:
<script> $(".calculator").fancybox(); </script> <script type="text/javascript" src="../js/jquery.fancybox.js"></script>
上面的fancybox插件如果像上面這樣的加載順序去加載的話,一定是不能執行的,因為代碼執行所依賴的js庫是后面執行的,這里要講的內容主要是想說明,如果是在使用一個插件,依賴某個js文件,一定要在前面先運行,不管是放在head頭部,還是body中;
上面的例子說明一點,不同的js執行順序,執行的內容是不一樣的,所以改變js文件的位置,就可以改變js的加載順序(注:這里指的是單獨的JavaScript文件或片段,不包含函數的順序)。
2015.11.05補充:感謝@橘色大耳朵貓 同學的提醒,這里的js的加載順序指的是js文件在頁面上的加載順序,不是js程序的加載順序,先理解這一點,如果說行內js事件代碼也算是一個獨立的js文件的話(也可以這么理解,畢竟可以獨立運行),那這里的加載順序也是自上而下的,和其他的文件的加載順序是一樣的,但是有一個非常特殊的事件例外,那就是“onload”事件,onload 事件會在頁面或圖像加載完成后立即發生(w3school上的解釋),好難理解,通俗的講就是,這個事件是在頁面上的所以內容加載完成了,我才來執行這個函數,不管我這個時間定義在哪里都一樣,沒有順序而言(本來嘛,我反正都是最后一個執行的,位置對於我來說已經沒有意義了);除了onload,其他的事件都是按照順序執行的。
可能有人會問了,唉,不對啊,如果我是onclick事件,我點擊之后,可能下一行運行的函數在我事件的前面呢,這不是改變了js執行的順序嗎?這怎么解釋呢?
如果你還是有這個疑惑,那請注意我在上一句描述上說的是“改變了js的執行順序”,是執行順序,不是加載順序,執行順序是程序內,加載順序是文件之間的,比如說點擊事件,你點擊了,那js就已經經歷了加載,然后執行了,如果你還是不理解,我就給你舉一個現實生活中的例子:
我手上有4個盒子,盒子里面有不同的東西,每個盒子都有編號(1,2,3,4),現在我把這4個盒子依次在桌子上,編號順序隨機,然后從左到右依次看一遍,盒子是開的,我就把東西拿出來(這里表示js自動執行);如果是關着的,就看下一個(這里表示是需要事件來出發的,如打開盒子這個動作),直到最后一個盒子看完,整個就完了,那盒子的順序就是查看盒子的順序,跟編號沒關系(這里說的是文件的名字),onclick這樣的事件就是盒子我已經過了一遍,現在有沒有打開的盒子,我現在打開了,就是執行了這個事件,然而前面我們說了,盒子已經過了一遍,所以這個動作就不涉及整個過場順序問題了,那onload是怎么回事呢,就是我有一個盒子放在一邊,等其他盒子都看了,再看這個盒子(就是最后執行這個事件,onload是自動觸發執行的),理解了嗎?自己擺一擺。要是還不理解,那就去面壁思考吧!
4.type屬性都有哪些常用的值?代表什么意思?
打開Dreamweaver(我比較喜歡用這個編輯器,習慣了他給的提示,別說我low哦),在<script>上打一個type,會有很多type屬性,我們把他寫下來,看看都有哪些:
application/ecmascript application/javascript application/x-ecmascript application/x-javascript text/ecmascript text/javascript text/jscript text/livescript text/tcl text/x-ecmascript text/x-javascript
oh,mygod!這么多!嚇死寶寶了!
在<link>上面打一下:
text/css text/javascript
還好只有2個!
type屬性在js上表示腳本的類型,即MIME類型,在link上表示疊層樣式表的MIME類型,常用的就是2種(其他的不常用,也不知道是什么意思,用在什么情況,哪位大神幫忙科普一下):
text/css (css文本,告訴瀏覽器是加載css樣式)
text/javascript (JavaScript文本,告訴瀏覽器加載js代碼)
貌似解釋的有點牽強,呵呵!
5.除了type屬性還有其他的什么屬性?
再次打開Dreamweaver,給的提示有這幾個:async,defer,language,runat,src
async:定義腳本是否異步執行,值為:async;
defer:指示腳本不會生成任何文檔內容,瀏覽器可繼續解析並繪制頁面。意思就是等文檔加載完畢了再執行此js,要是想深入了解這個屬性,可以參考這里,如果你英文比較好,可以看這里。
language:規定腳本的語言,現在使用type來替代了;
runat:其值為server,表示是在服務器上運行此代碼,客戶端不運行,不常用;
src:指外部腳本文件的引用路徑
6.js中常用的輸出方式?
js的輸出方式大概有下面幾種:
<div id="demo"></div> <script> //第一種 document.write("<p>你在干嘛,你媽媽叫你回家吃飯!</p>"); //第二種 document.getElementById("demo").innerHTML = "我再玩會,我媽媽飯還沒熟呢!"; //第三種,提示框 alert("誰家能叫我吃飯啊!"); </script>
行文倉促,可能會有表述不對的地方,如有發現,希望能批評指正!謝謝!如果覺得不錯,希望你能推薦給正在學習js 的同學,不勝感激!