JavaScript技術講座-創建新對象_自動測試腳本語言

JavaScript技術講座-創建新對象

發表于：2007-06-21來源：作者：點擊數：標簽：

使用JavaScript可以創建自己的對象。雖然JavaScript內部和瀏覽器本身的功能已十分強大，但JavaScript還是提供了創建一個新對象的方法。使其不必像超文本標識語言那樣，求于或其它多媒體工具，就能完成許多復雜的工作。在JavaScript中創建一個新的對象是十分

使用JavaScript可以創建自己的對象。雖然JavaScript內部和瀏覽器本身的功能已十分強大，但JavaScript還是提供了創建一個新對象的方法。使其不必像超文本標識語言那樣，求于或其它多媒體工具，就能完成許多復雜的工作。

在JavaScript中創建一個新的對象是十分簡單的。首先它必須定義一個對象，而后再為該對象創建一個實例。這個實例就是一個新對象，它具有對象定義中的基本特征。

一、對象的定義

JavaScript對象的定義，其基本格式如下：

Function Object（屬性表）

This.prop1=prop1

This.prop2=prop2

...

This.meth=FunctionName1;

This.meth=FunctionName2;

...

在一個對象的定義中，可以為該對象指明其屬性和方法。通過屬性和方法構成了一個對象的實例。如以下是一個關于University對象的定義：

Function university(name,city,creatDate URL)

This.name=name

This.city=city

This.creatDate=New Date(creatDate)

This.URL=URL

其基本含義如下：

- Name－指定一個“單位”名稱。
- City－“單位”所在城市。
- CreatDate－記載university對象的更新日期。
- URL－該對象指向一個網址。

二、創建對象實例

一旦對象定義完成后，就可以為該對象創建一個實例了：

NewObject=New object();

其中Newobjet是新的對象，Object已經定義好的對象。例：

U1=New university(“云南省”，“昆明市”，"January 05,199712:00:00","http://www.YN.KM")

U2=New university(“云南電子科技大學”，“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")

三、對象方法的使用

在對象中除了使用屬性外，有時還需要使用方法。在對象的定義中，我們看到This.meth=FunctionName語句，那就是為定義對象的方法。實質對象的方法就是一個函數FunctionName，通過它實現自己的意圖。

例在university對象中增加一個方法，該方法是顯示它自己本身，并返回相應的字串。

function university(name,city,createDate,URL)

This.Name=Name;

This.city=city;

This.createDate=New Date(creatDate)；

This.URL=URL；

This.showuniversity=showuniversity;

其中This.showuniversity就是定義了一個方法－－－showuniversity()。

而showuniversity()方法是實現university對象本身的顯示。

function showuniversity()

For (var prop in this)

alert(prop+="+this[prop]+"");

其中alert是JavaScript中的內部函數，顯示其字符串。

四、JavaScript中的數組

使用New創建數組
JavaScript中沒有提供像其它語言具有明顯的數組類型，但可以通過function定義一個數組，并使用New對象操作符創建一個具有下標的數組。從而可以實現任何數據類型的存儲。
a、定義對象的數組

Function arrayName(size){

This.length=Size;

for(var X=; X<=size;X++)

this[X]=0;

Reture this;

}

其中arrayName是定義數組的一個名子，Size是有關數組大小的值（1-size），即數組元素的個數。通過for循環對一個當前對象的數組進行定義，最后返回這個數組。

從中可以看出，JavaScript中的數組是從1到size，這與其它０到size的數組表示方法有所不同，當然你可根據需要將數組的下標由１到size調整到０到size－１,可由下列實現:

Function arrayName (size)

For (var X=0; X<=size;X++)

this[X]=0;

this.lenght=size;

Return this;

從上面可以看出該方法是只是調整了this.lenght的位置，該位置是用于存儲數組的大小的。從而調整后的數組的下標將與其它語言一致。但請讀者注意正是由于數組下標順序由１到size，使得JavaScript中的對象功能更加強大。

b、創建數組實例

一個數組定義完成以后，還不能馬上使用，必須為該數組創建一個數組實例：

Myarray=New arrayName(n);

并賦于初值：

Myarray[1]=“字串１”；

Myarray[2]=“字串２”；

Myarray[3]=“字串３”；

...

Myarray[n]=“字串n”；

一旦給數組賦于了初值后，數組中就具有真正意義的數據了，以后就可以在程序設計過程中直接引用。
創建多維數組
Function creatMArray(row,col){
var indx=0;

this.length=(row*10)+col

for(var x=1;x<=row;x++)

for(var y=1;y<=col;y++)

indx=(x*10)+y;

this[indx]=””;

}

myMArray=new creatMArray();

之后可通過myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、

…來引用。
內部數組

在Java中為了方便內部對象的操作,可以使用窗體(Forms)、框架(Frames)、元素(element)、鏈接(links)和錨(Anchors)數組實現對象的訪問。

anchors[]:使用《A name=“anchorName“》標識來建立錨的鏈接。

links[]: 使用<A href=”URL”>來定義一個越文本鏈接項。

Forms[]: 在程序中使用多窗體時,建立該數組。

Elements[]:在一個窗口中使用從個元素時,建立該數組。

Frames[]:建立框架時,使用該數組

anchors[]用于窗體的訪問(它是通過《form name=“form1”》所指定的),link[]用于被鏈接到的錨點的訪問(它是通過《a href=URL》所指定的)。Forms[]反映窗體的屬性,而anchors[]反映Web頁面中的鏈接屬性。

有關錨數組的文檔：

<HTML><HEAD><BODY><A NAME=”MyAnchorsName1”> 定義第一個錨名HTML Code<A NAME=”MyAnchorsName2”> 定義第二個錨名HTML Code<A HREF=”#MyAnchorsName1”>建立錨的鏈接<A HREF=”#MyAnchorsName2”> 建立錨的鏈接….

該文檔段建立了兩面全錨的鏈接,可通過Anchors[]訪問這些錨。document.Anchors[0]反映第一個錨,而document.Anchors[1]反映第二個錨的有關信息。

五、范例

范例1：一個動態文字滾動的例子。

test5_1.htm

<html><head><title></title><script LANGUAGE="JavaScript">with (top.window.location){baseURL = href.substring (0,href.lastIndexOf ("/") + 1)}total_toc_items = 0;current_overID = "";last_overID = "";browser = navigator.appName;version = parseInt(navigator.appVersion);client=null;loaded = 0;if (browser == "Netscape" && version >= 3) client = "ns3";function toc_item (img_name,icon_col,width,height) {if (client =="ns3") {img_prefix = baseURL + img_name;this.icon_col = icon_col;this.toc_img_off = new Image (width,height);this.toc_img_off.src = img_prefix + "_off.gif";this.toc_img_on = new Image (width,height);this.toc_img_on.src = img_prefix + "_on.gif";}}function new_toc_item (img_name,icon_row,width,height) {toc_item [img_name] = new toc_item (img_name,icon_row,width,height);}function toc_mouseover (itemID) {if (client =="ns3") {current_overID = itemID;if (current_overID != last_overID) {document [current_overID].src = toc_item [current_overID].toc_img_on.src;if (last_overID != "") {document.images [last_overID].src = toc_item[last_overID].toc_img_off.src;}last_overID = current_overID;}}}function toc_mouseout () {if (client =="ns3") {if (current_overID != "") {document.images [current_overID].src = toc_item [current_overID].toc_img_off.src;}current_overID = "";last_overID = "";}}new_toc_item ("1",2,120,20);<!-- Beginfunction bannerObject(p){this.msg = MESSAGEthis.out = " "this.pos = POSITIONthis.delay = DELAYthis.i = 0this.reset = clearMessage}function clearMessage(){this.pos = POSITION}var POSITION = 50;var DELAY = 150;var MESSAGE = "這是一個動態JavaScript文字顯示的例子";var scroll = new bannerObject();function scroller(){scroll.out += " ";if(scroll.pos>0)for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out +=" " ; }if (scroll.pos>= 0)scroll.out += scroll.msgelsescroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)document.noticeForm.notice.value = scroll.outscroll.out = " ";scroll.pos--;scroll.pos--;if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout('scroller()',scroll.delay);}</script></head><body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"alink="#008080"text="#C0C0C0"><table border="0" cellspacing="0" cellpadding="0"><tr><td width="100%"><form NAME="noticeForm"><p><input TYPE="text" name="notice" size="40" style="background-color: rgb(192,192,192)"></p></form></td></tr></table></center></div></body></html>

范例2:顏色變化的例子。

test5_2.htm

<html>

<head>

<!--

function makearray(n) {

this.length = n;

for(var i = 1; i <= n; i++)

this[i] = 0;

return this;}

hexa = new makearray(16);

for(var i = 0; i < 10; i++)

hexa[i] = i;

hexa[10]="a";

hexa[11]="b";

hexa[12]="c";

hexa[13]="d";

hexa[14]="e";

hexa[15]="f";

function hex(i) {

if (i < 0)

return "00";

else if (i > 255)

return "ff";

else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setbgColor(r, g, b) {

var hr = hex(r);

var hg = hex(g);

var hb = hex(b);

document.bgColor = "#"+hr+hg+hb;}

function fade(sr, sg, sb, er, eg, eb, step) {

for(var i = 0; i <= step; i++) {

setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),

Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *

((step-i)/step) + eb * (i/step))); }}

function fadein() {

fade(255,0,0,0,0,255,100);

fade(0,0,255,0,255,0,100);

fade(0,255,0, 0,0,0, 100);}

fadein();

// -->

</script>

<body>

</body>

</html>

本講介紹了用戶自行創建對象的方法, 用戶可根據需要創建自己的對象。并介紹了JavaScript中建數組的方法。

原文轉自：http://www.kjueaiud.com

軟件測試 > 測試開發技術 > 軟件測試開發語言 > 自動測試腳本語言 >