Javascript對象(六)

 
  • 屏幕對象:

    描述屏幕的顯示及顏色屬性。

  • 屏幕對象的屬性:

    格式: screen.屬性
availHeight 屏幕區域的可用高度
availWidth 屏幕區域的可用寬度
colorDepth 顏色深度 256/8 16/16 32M/32
height 屏幕區域的實際高度
width 屏幕區域的實際寬度

例1:
<Script>

with (document) {
     write ("您的屏幕顯示設定值如下:<P>");
     write ("屏幕的實際高度爲", screen.availHeight, "<BR>");
     write ("屏幕的實際寬度爲", screen.availWidth, "<BR>");
     write ("屏幕的色盤深度爲", screen.colorDepth, "<BR>");
     write ("屏幕區域的高度爲", screen.height, "<BR>");
     write ("屏幕區域的寬度爲", screen.width);
}

</Script>

例2:
<Script>

if ( screen.width < 800 || screen.colorDepth < 8 ){
     var msg = "本網站最佳瀏覽模式爲 800 * 600 * 256";
     alert(msg);
}

</Script>

 

  • 事件對象:

    當事件發生時,瀏覽器自動建立該對象,幷包含該事件的類型、鼠標座標等。
  • 事件對象的屬性:

    格式:event.屬性
data 返回拖拽對象的URL字符串(dragDrop)
width 該窗口或框架的高度
height 該窗口或框架的高度
pageX 光標相對於該網頁的水平位置
pageY 光標相對於該網頁的垂直位置
screenX 光標相對於該屏幕的水平位置
screenY 光標相對於該屏幕的垂直位置
target 該事件被傳送到的對象
type 事件的類型
which 數值表示的鍵盤或鼠標鍵:1/2/3(左鍵/中鍵/右鍵)
layerX 光標相對於事件發生層的水平位置
layerY 光標相對於事件發生層的垂直位置
x 相當於layerX
y 相當於layerY

例1:
<Script>

function getEvent(evnt) {
eventWin = open ('','','width=200,height=100');
with (eventWin.document) {
      write("事件類型:", event.type);
      write("<br>鼠標的x座標:", event.screenX);
      write("<br>鼠標的y座標:", event.screenY);
}
}

document.write ("單擊...")
document.onmousedown = getEvent;
</Script>

例2:
<Script>

function getCoordinate(evnt) {

if (document.all) {
    x = event.screenX;
    y = event.screenY;
}
else {
    x = evnt.screenX;
    y = evnt.screenY;
}
status = "水平座標:"+ x + ";垂直座標:"+ y;
}

document.onmousemove = getCoordinate;

</Script>

例3:
<Script>

function whichKey(evnt) {

if (document.all) {
     x = event.button;
     if( x==1 ) alert("你單擊了左鍵");
     if( x==2 ) alert("你單擊了右鍵");
}

else {
     x = evnt.button;
     if( x==1 ) alert("你單擊了左鍵");
     if( x==3 ) alert("你單擊了右鍵");
     return false;
}
}

document.onmousedown = whichKey;
document.write("請單擊鼠標左/右鍵");

</Script>

 

  • 歷史對象:

    用以存儲客戶端最近訪問的網址清單。

    格式:

    history.屬性
    history.方法(參數)

  • 歷史對象的屬性:

    current 當前歷史記錄的網址
    length 存儲在記錄清單中的網址數目
    next 下一個歷史記錄的網址
    previous 上一個歷史記錄的網址

  • 歷史對象的方法:

    back() 回到上一個歷史記錄中的網址
    forward() 回到下一個歷史記錄中的網址
    go(整數或URL) 前往歷史記錄中的網址

例1:
history.go(-1)

newWin.history.back()

parent.downFrame.histroy.back()

例2:
<A HREF="#" onClick="history.back()">上一頁</A>

<A HREF="javascript:history.back()">上一頁</A>

 

  • 位置對象:

    用來代表特定窗口的URL信息。

    格式:

    location.屬性
    location.方法(參數)

  • URL的格式:

    protocol//host:port/path#hash?search

  • URL的種類:

    javascript: javascript程序代碼
    view-source: 顯示源代碼
    http:
    file:
    ftp:
    mailto:
    news:
    gopher

  • 位置對象的屬性:

    hash 錨點名稱
    host 主機名稱
    hostname host:port
    href 完整的URL字符串
    pathname 路徑
    port 端口
    protocol 協議
    search 查詢信息

  • 位置對象的方法:

    reload() 重新加載
    replace(網址) 用指定的網頁取代當前網頁

例1:

按下按鈕前往「文哥網絡技術學習網」<P>
<INPUT TYPE="button" VALUE="走吧!" onClick="location.href='http://www.hubert.idv.tw/'">

例2:

<FONT COLOR="red"
onClick="location='http://www.hubert.idv.tw/'">
文哥網絡技術學習網</FONT><P>

<FONT COLOR="blue" STYLE="cursor:hand"
onClick="location='http://www.hubert.idv.tw/'">
文哥網絡技術學習網</FONT>

例3:
<Script>

var sec = 5;

function countDown() {
if (sec > 0) {
     num.innerHTML = sec--;
}
else
     location = "http://www.hubert.idv.tw/";
}
</Script>

<BODY onLoad="setInterval('countDown()', 1000)">
<CENTER>
文哥網絡技術學習網
<H2>http://www.hubert.idv.tw/</H2>
五秒鐘後自動帶你前往<BR>
<FONT ID="num" SIZE="7" FACE="impact">5</FONT>

例4:

<A HREF="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.hubert.idv.tw/');"><FONT COLOR="red"><U>設爲首頁</U></FONT></A><P>

<A HREF="javascript:window.external.AddFavorite('http://www.hubert.idv.tw/', '文哥網絡技術學習網');"><FONT COLOR="red"><U>加入收藏</U></FONT></A>

發佈了5 篇原創文章 · 獲贊 5 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章