首頁 > 開發者 > JavaScript
Javascript 對象 和類
Javascript是基於對象而非物件導向的程式設計語言，它不支援類和繼承，Javascript在物件導向方面與Java的嚴謹相比，顯得非常隨便。
建立對象
Javascript通過實現包含屬性說明和方法定義的構造方法來聲明類，並沒有專門的class類定義。
如：用來聲明Oven類的構造方法
function Oven(color,type,time)
{this.color=color;
this.type=type;
this.time=time;
this.info=info;
}
function info()
{document.writeln("<B>顏色:</B>",this.color);
document.writeln("<B>類型:</B>",this.type);
document.writeln("<B>出廠日期:</B>",this.time);
}
建立Oven類對象執行個體：
oven1=new Oven("紅色","精巧型","99.1.1");
oven2=new Oven("藍色","典雅型","99.10.1");
oven3=new Oven("黃色","實用型","2000.1.1");
jscript1.html:
<HTML>
<HEAD>
<TITLE> "歡迎選購"</TITLE>
<s cript LANGUAGE="Javas cript" >
function Oven(color,type,time)
{this.color=color;
this.type=type;
this.time=time;
this.info=info;
}
function info()
{document.writeln("<B>顏色:</B>",this.color,"<BR>");
document.writeln("<B>類型:</B>",this.type,"<BR>");
document.writeln("<B>出廠日期:</B>",this.time,"<BR>");
}
</script>
</HEAD>
<BODY>
<H2>烤箱商品</H2>
<script>
oven1=new Oven("紅色","精巧型","1999年1月1日");
oven2=new Oven("藍色","典雅型","1999年10月1日");
oven3=new Oven("黃色","實用型","2000年1月1日");
</script >
<HR>
<s cript>
oven1.info();
</script>
<HR>
<script>
oven2.info();
</script>
<HR>
<script>
oven3.info();
</script>
<HR>
</BODY>
</HTML>
Javascript還可通過下列方法方便地建立一個對象且可隨意添加屬性：
var oven1=new Object();
oven1.color="c1";
oven1.type="t1";
oven1.time="t1";
Javascript的可用對象有：
anchor
applet
button
checkbox
Date
document
form
history
link
location
Math
password
radioButton
reset
selection
string
submit
text
textArea
window
Navigator的對象繼承樹
navigator
window
history
document
anchors
forms
links
location
一：window對象
window對象是 Javascript的最高層對象，它包含除了Navigator對象外的所有對象。
註：有些方法和屬性只有支援Javascript1.2的瀏覽器才能使用。
1.屬性：
defaultStatus:設定狀態行預設字串，唯讀。
status:描述狀態行字串，可讀寫。
frames：包含視窗中所有FRAME的對象數組，frames.length可取得FRAME個數。
frame:一個FRAME對象。
self：當前視窗。
parent：父視窗或frameset。
top：當前視窗的最高層視窗。
name:視窗的名字。
innerHeight:給出瀏覽器視窗內部高度。
innerWidth:給出瀏覽器視窗內部寬度。
outerHeight:給出整個瀏覽器視窗高度。
outerWidth:給出整個瀏覽器視窗寬度。
locationbar:設定顯示或隱藏瀏覽器地址欄，如：locationbar=true
menubar:設定顯示或隱藏瀏覽器功能表列，如：menubar=false
personalbar:設定顯示或隱藏瀏覽器指示欄，如：personalbar=false
scrollbars:設定顯示或隱藏視窗捲軸，如：scrollbars=true
statusbar:設定顯示或隱藏瀏覽器狀態列，如：statusbar=true
toolbar:設定顯示或隱藏瀏覽器工具列，如：toolbar=false
java:提供訪問JAVA API類屬性和方法，如：java.lang.Math.random。
netscape:提供引用netscape.*工具包。
sun:提供引用sun.*工具包。
document:視窗中當前所包含的文檔對象。
location:指定當前文檔URL的字串。
history:與視窗關聯的history對象。
2. 方法
alert("string"):開啟一個警告對話方塊並顯示string資訊。
confirm("string"):開啟一個帶有OK和Cancel按鈕的對話方塊並顯示string資訊，若使用者選擇OK返回true，選擇Cancel返回false。
prompt("string"): 開啟一個顯示string資訊並帶有單行文本輸入欄位的對話方塊，對話方塊關閉時返回使用者輸入的字串。(見視窗舉例1)
setTimeout:以毫秒為單位為一將要發生事件設定時間。（見視窗舉例2和3）
clearTimeout:重設setTimeout所作的設定。
captureEvent(eventType):設定視窗捕捉指定類型的事件。
releaseEvents(eventType):停止捕捉指定類型事件。
handleEvent(event):若設定了captureEvent()，則指定類型的事件將傳遞給handleEvent()方法。
focus():使視窗得到輸入焦點。
blur():除去當前視窗中的輸入焦點。
stop():停止當前檔案的下載，相當按下“Stop”按鈕。
close()：關閉視窗。
open(url,name,features,replaceFlag)：尋找一視窗或開啟一新視窗。（見視窗舉例2）
url:指定視窗中顯示的資源，Null 字元串將開啟一空白視窗。
name:是視窗的名字。
replaceFlag:值為true時，新視窗將取代原視窗在記錄中的位置。
features:給出逗號分隔視窗屬性值，如：menubar=no。
features:
alwaysLowered=yes|no:視窗是否總在其它視窗下面。
alwaysRaised=yes|no:視窗是否總在其它視窗上方。
dependent=yes|no:視窗是否依附於父視窗，即父視窗關閉時它也關閉。
hotkeys=yes|no:是否取消熱鍵。
location=yes|no:是否顯示當前URL。
menubar=yes|no:是否顯示功能表列。
resizable=yes|no:是否允許使用者改變視窗大小。
scrollbars=yes|no:是否帶捲軸。
status=yes|no:是否顯示視窗底部的狀態列。
titlebar=yes|no:是否顯示標題列。
toolbar=yes|no:是否顯示工具列。
z-lock=yes|no:是否固定視窗位置。
height|innerHeight=象素值:視窗內容區高度。
width|innerWidth=象素值:視窗內容區寬度。
outerHeight=象素值:視窗高度。
outerWidth=象素值:視窗寬度。
screenX=象素值:視窗左邊框位置。
screenY=象素值:視窗上邊框位置。
3.視窗事件
onBlur():視窗失去焦點時。
onDragdrop():當檔案或捷徑被拖動到視窗時。
onError:當出現Javascript錯誤時。
onFocus():視窗獲得焦點時。
onLoad():瀏覽器裝入頁面時。
onMove():視窗被移動時。
onResize():視窗被改變大小時。
onUnload():使用者離開頁面時。
4.視窗舉例
例1： promptdemo.html
<HTML>
<HEAD>
<TITLE>javascript prompt demo</TITLE>
</HEAD>
<BODY>
<script Language="Javascript">
document.write("<H1>prompt demo<br><br>");
msg= prompt ("請輸入內容:");
document.write(msg+"</H1>");
document.close();
</script>
</BODY>
</HTML>
例2： windowDemo.html
<script language="Javascript">
function newwindow()
{ window. open ("../script1.htm","localwindow","toolbar=no,statusbar=no,menubar=no,
scrollbars=yes,resizable=no,width=200,height=200");
}
window. status ="我只待一會兒！";
setTimeout ("erase()",3000);
function erase()
{
window.status="";
}
</script>
<html>
<head>
<title>Javascript window Demo</title>
</head>
<body >
<h1>這是視窗大小使用示範，請注意看一下狀態列！<br><br><br>
</body>
</html>
例二： windowdemo2.html
<s cript LANGUAGE="Javascript">
function scroll(seed)
{var msg="歡迎來到袁方JAVA講壇,講壇網址：www.triworks.com.cn";
var out = " ";
var c = 1;
if (seed > 100)
{seed--;
var cmd="scroll(" + seed + ")";
timerTwo=window.setTimeout(cmd,100);
}
else
if (seed <= 100 && seed > 0)
{for (c=0 ; c < seed ; c++)
{out+=" ";
}
out+=msg;
seed--;
var cmd="scroll(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else
if (seed <= 0)
{if (-seed < msg.length)
{out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scroll(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else
{window.status=" ";
timerTwo=window.setTimeout("scroll(100)",7);
}
}
}
timerONE=window.setTimeout('scroll(100)',50);
</script>
<html>
<head>
<title>Javascript window Demo2</title>
</head>
<body>
<br><br><br>
<h1>這是"跑馬燈",請
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
