《javascript進階程式設計》學習筆記（七）：瀏覽器中的javascript

 

隨著javascript和使用者對體驗的要求，web瀏覽器得到了長足的發展，這一章討論瀏覽器中的javascript。

1.各種語言中的<script>標籤

(1).作為最早的支援javascript的語言，HTML中的<script>標籤是這樣定義的：

引入外部檔案：
<script language="JavaScript" src="../test.js"></script>

內嵌：
<script language="JavaScript">
var i=0;
</script>

早先，對於一些老的不支援js的瀏覽器，開發人員們創造了如下方法屏蔽javascript代碼：
<script language="JavaScript"><!--hidden from older browsers
 function test(){
  alert("test");
 }
 //-->
</script>

此法巧用了html的注釋和javascript的注釋，使得不支援js的瀏覽器忽略js代碼，而支援js的瀏覽器則執行代碼。
你現在能從很多web網站看到這些特徵的代碼。今天它已經不是必需的了，因為基本沒有不支援js的瀏覽器了，即使
某個瀏覽器不支援，他也會忽略js代碼

(2).後來出現的XHTML（可擴充的html），<script>標籤進化成這樣了：

引入外部檔案：
<script type="text/javascript" src="../test.js"></script>

內嵌：
<script language="JavaScript">
var i=0;
</script>

大多數開發人員如今都使用type這一方法聲明javascript，從而更好地支援XHTML。而省略language則不會帶來任何問題。

(3).SVG中的javascript：

引入外部檔案：
<script type="text/javascript" xlink:href="../test.js"></script>

內嵌：
<script type="text/javascript"><![CDATA[
var i=0;
]]></script>

注意：type特性是必需的，language特性是不合法的，使用xlink:href代替src特性。內嵌的程式碼片段必須使用CDATA段。

2.windows對象

（筆者按：由於定位的是“進階程式設計”，top，parent，self等等這些眾所周知的都不在贅述。這裡只記錄一些進階的或者容易遺忘的知識點。後面章節同。）

視窗操作：
moveBy(dx,dy),movtTo(x,y),resizeBy(dw,dh),resizeTo(w,h);
IE提供了window.screenLeft、window.screenTop、document.body.offsetWidth、document.body.offsetHeight來判斷視窗位置和視口的大小(沒有判斷視窗大小的方法)
Mozilla,Opera,Safari則提供了window.screenX、window.screeenY、 window.innerWidth、window.innerHeight、window.outerWidth、 window.outerHeight來判斷視窗位置，視口大小和視窗大小

confirm()和prompt()的區別：
prompt除了ok，cancel按鈕，還有文字框來擷取使用者輸入的某些資料。

var iTimeOutId = setTimeOut(method,millisecond);//自觸發時起，等待多少毫秒執行method方法
clearTimeOut(iTimeOutId);

var iIntervalId = setInterval(method,millisecond);//自觸發時起，迴圈間隔多少毫秒執行method方法，迴圈
clearInterval(iIntervalId);

3.document對象

document對象中的alinkColor,bgColor,fgColor,linkColor,vlinkColor等屬性引用了舊的HTML特性，建議以後不要使用，而使用樣式表指令碼來代替他們。

document.write(string)和doucument.writeln(string)的唯一區別就是後者會在字串末尾加上分行符號(\n).

記住：要插入頁面內容屬性，必須在完全載入頁面前調用write(string)或writeln(string)方法。否則，它們將抹去頁面的內容，只顯示你寫入的內容string

document.write可以用來動態引入javascript，但是要注意：
<script type="text/javascript">
 document.write("<script type=\"text/javascript\" src =\"test.js\">"
 + "</scr" +"ipt>");
</script>

第三行，寫入串後面的"</script>"必須被分開寫，這是必要的。因為瀏覽器會自動閉合<script>標籤，這樣會使頁面標籤混亂並報錯。

4.location對象

有hash,host,hostname,href,pathname,port,protocal,search等眾多屬性

location.href="http://punkchen.cnblogs.com" 和 location.assign("http://punkchen.cnblogs.com")效果相同
location.replace("http://punkchen.cnblogs.com")與它們的不同之處在於。replace方法刪除了瀏覽器曆史中你定位到新頁面的原始頁面，使你不能通過瀏覽器上
的“前進”[上一頁] 按鈕訪問它
location.reload()方法，重新載入頁面，reload(true)表示從伺服器端重新載入頁面；reload()和reload(false)表示從緩衝裡重新載入頁面

由於瀏覽器的提示（是否重新載入頁面？），開發人員經常用到的頁面重新整理方法是：
location.href = location.href;

5.navigator對象

用於提供瀏覽器資訊。但是標準的缺失阻礙了navigator對象的發展。不同瀏覽器對其支援相差很大。（標準化是多麼重要啊！）
有弊必有利，你可以利用navigator這個特性，判斷當前頁面是用哪個瀏覽器瀏覽的。網上很多方法，一找一大堆。