分享
 
 
 

初级&#106avascript学习教程(五)

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

使用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,这与其它0到size的数组表示方法有所不同,当然你可根据需要将数组的下标由1到size调整到0到size-1,可由下列实现:

Function arrayName (size)

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

this[X]=0;

this.lenght=size;

Return this;

从上面可以看出该方法是只是调整了this.lenght的位置,该位置是用于存储数组的大小的。从而调整后的数组的下标将与其它语言一致。但请读者注意正是由于数组下标顺序由1到size,使得JavaScript中的对象功能更加强大。

b、创建数组实例

一个数组定义完成以后,还不能马上使用,必须为该数组创建一个数组实例:

Myarray=New arrayName(n);

并赋于初值:

Myarray[1]=“字串1”;

Myarray[2]=“字串2”;

Myarray[3]=“字串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?gt; 建立锚的链接

….

该文档段建立了两面全锚的链接,可通过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);

<!-- Begin

function bannerObject(p){

this.msg = MESSAGE

this.out = " "

this.pos = POSITION

this.delay = DELAY

this.i = 0

this.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.msg

else

scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)

document.noticeForm.notice.value = scroll.out

scroll.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>

<script>

<!--

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中建数组的方法。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有