分享
 
 
 

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

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

JavaScript语言是基于对象的(Object-Based),而不是面向对象的(object-oriented)。之所以说它是一门基于对象的语言,主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统。

虽然JavaScript语言是一门基于对象的,但它还是具有一些面向对象的基本特征。它可以根据需要创建自己的对象,从而进一步扩大JavaScript的应用范围,增强编写功能强大的Web文档。

一、对象的基础知识

1、对象的基本结构

JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中,实现信息的装载单位,从而与变量相关联;后者是指对象能够按照设计者的意图而被执行,从而与特定的函数相联。

2、引用对象的途径

一个对象要真正地被使用,可采用以下几种方式获得:

o 引用JavaScript内部对象;

o 由浏览器环境中提供;

o 创建新对象。

这就是说一个对象在被引用之前,这个对象必须存在,否则引用将毫无意义,而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象,要么利用现存的对象。

3、有关对象操作语句

JavaScript不是一纯面向对象的语言,它设有提供面向对象语言的许多功能,因此JavaScript设计者之所以把它你“基于对象”而不是面向对象的语言,在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。

(1) For...in语句

格式如下:

For(对象属性名 in 已知对象名)

说明:

o 该语句的功能是用于对已知对象的所有属性进行操作的控制循环。它是将一个已知对象的所有属性反复置给一个变量;而不是使用计数器来实现的。

o 该语句的优点就是无需知道对象中属性的个数即可进行操作。

例:下列函数是显示数组中的内容:

Function showData(object)

for (var X=0; X<30;X++)

document.write(object[i]);

该函数是通过数组下标顺序值,来访问每个对象的属性,使用这种方式首先必须知道数组的下标值,否则若超出范围,则就会发生错误。而使For...in语句,则根本不需要知道对象属性的个数,见下:

Function showData(object)

for(var prop in object)

document.write(object[prop]);

使用该函数时,在循环体中,For自动将的属性取出来,直到最后为此。

(2) with语句

使用该语句的意思是:在该语句体内,任何对变量的引用被认为是这个对象的属性,以节省一些代码。

with object{

...}

所有在with语句后的花括号中的语句,都是在后面object对象的作用域的。

(3) this关键字

this是对当前的引用,在JavaScript由于对象的引用是多层次,多方位的,往往一个对象的引用又需要对另一个对象的引用,而另一个对象有可能又要引用另一个对象,这样有可能造成混乱,最后自己已不知道现在引用的那一个对象,为此JavaScript提供了一个用于将对象指定当前对象的语句this。

(4) New运算符

虽然在JavaScript中对象的功能已经是非常强大的了。但更强大的是设计人员可以按照需求来创建自己的对象,以满足某一特定的要求。使用New运算符可以创建一个新的对象。其创建对象使用如下格式:

Newobject=NEW Object(Parameters table);

其中Newobject创建的新对象:object是已经存在的对象; parameters table参数表;new是JavaScript中的命令语句。

如创建一个日期新对象

newData=New Data()

birthday=New Data (December 12.1998)

之后就可使NewData、birthday作为一个新的日期对象了。

4、对象属性的引用

对象属性的引用可由下列三种方式之一实现:

(1)使用点(.)运算符

university.Name=“云南省”

university.city=“昆明市”

university.Date="1999"

其中university是一个已经存在的对象,Name、City、Date是它的三个属性,并通过操作对其赋值。

(2)通过对象的下标实现引用

university[0]=“云南”

university[1]=“昆明市”

university[2]="1999"

通过数组形式的访问属性,可以使用循环操作获取其值。

function showunievsity(object)

for (var j=0;j<2; j++)

document.write(object[j])

若采用For...in则可以不知其属性的个数后就可以实现:

Function showmy(object)

for (var prop in this)

docament.write(this[prop]);

(3)通过字符串的形式实现

university["Name"]=“云南”

university["City"]=“昆明市”

university["Date"]="1999"

5、对象的方法的引用

在JavaScript中对象方法的引用是非常简单的。

ObjectName.methods()

实际上methods()=FunctionName方法实质上是一个函数。 如引用university对象中的showmy()方法,则可使用:

document.write (university.showmy())

或:document.write(university)

如引用math内部对象中cos()的方法

则:

with(math)

document.write(cos(35));

document.write(cos(80));

若不使用with则引用时相对要复杂些:

document.write(Math.cos(35))

document.write(math.sin(80))

二、常用对象的属性和方法

JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。

在JavaScript提供了string(字符串)、math(数值计算)和Date(日期)三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了非常有利的条件。

1、常用内部对象

在JavaScript中对于对象属性与方法的引用,有两种情况:其一是说该对象是静态对象,即在引用该对象的属性或方法时不需要为它创建实例;而另一种对象则在引用它的对象或方法是必须为它创建一个实例,即该对象是动态对象。

对JavaScript内部对象的引用,以是紧紧围绕着它的属性与方法进行的。因而明确对象的静动性对于掌握和理解JavaScript内部对象是具有非常重要的意义。

1)、串对象

o string对象:内部静态性。

o 访问properties和methods时,可使用(.)运算符实现。

o 基本使用格式:objectName.prop/methods

(1)串对象的属性

该对象只有一个属性,即length。它表明了字符串中的字符个数,包括所有符号。

例:

mytest="This is a JavaScript"

mystringlength=mytest.length

最后mystringlength返回mytest字串的长度为20。

(2)串对象的方法

string对象的方法共有19个。主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。

其主要方法如下:

o 锚点anchor():该方法创建如用Html文档中一样的anchor标记。使用anchor如用Html中(A Name="")一样。通过下列格式访问:string.anchor(anchorName)。

o 有关字符显示的控制方法

big字体显示, Italics()斜体字显示,bold()粗体字显示,blink()字符闪烁显示,small()字符用小体字显示,fixed()固定高亮字显示、fontsize(size)控制字体大小等。

o 字体颜色方法;fontcolor(color)

o 字符串大小写转换

toLowerCase()-小写转换,toUpperCase()大写转换。下列把一个给定的串分别转换成大写和小写格式:

string=stringValue.toUpperCase和string=stringValue.toLowerCase。

o 字符搜索:indexOf[charactor,fromIndex]

从指定formIndtx位置开始搜索charactor第一次出现的位置。

返回字串的一部分字串:substring(start,end)

从start开始到end的字符全部返回。

2)、算术函数的math对象

功能:提供除加、减、乘、除以外的一引些自述运算。如对数,平方根等 。

静动性:静态对象

(1)主要属性

math中提供了6个属性,它们是数学中经常用到的常数E、以10为底的自然对数LN10、以2为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。

(2)主要方法

绝对值:abs()

正弦余弦值:sin(),cos()

反正弦反余弦 :asin(), acos()

正切反正切:tan(),atan()

四舍五入:round()

平方根:sqrt()

基于几方次的值:Pow(base,exponent)

...

3)、日期及时间对象

功能:提供一个有关日期和时间的对象。

静动性:动态性,即必须使用New运算符创建一个实例。例:

MyDate=New Date()

Date对象没有提供直接访问的属性。只具有获取和设置日期和时间的方法。

日期起始值:1770年1月1日00:00:00。

1. 获取日期的时间方法

getYear(): 返回年数

getMonth():返回当月号数

getDate(): 返回当日号数

getDay():返回星期几

getHours():返回小时数

getMintes(:返回分钟数

getSeconds():返回秒数

getTime() : 返回毫秒数

(2)设置日期和时间:

setYear();设置年

setDate():设置当月号数

setMonth():设置当月份数

setHours():设置小时数

setMintes():设置分钟数

setSeconds():设置秒数

setTime ():设置毫秒数

...

2、JavaScript中的系统函数

JavaScript中的系统函数又称内部方法。它提供了与任何对象无关的系统函数,使用这些函数不需创建任何实例,可直接用。

1.返回字符串表达式中的值:

方法名:eval(字串表达式),例:

test=eval("8+9+5/2");

2. 返回字符串ASCI码:

方法名:unEscape (string)

3.返回字符的编码:

方法名:escape(character)

4.返回实数:

parseFloat(floustring);

5.返回不同进制的数:

parseInt(numbestring ,rad.X)

其中radix是数的进制,numbs字符串数

三、范例

下面是一个时钟显示的JavaScript文档。在文档中用了非常多的函数。

Test4_1.htm

<html>

<head>

<style TYPE="text/css">

<style>

</style>

<title>时钟</title>

<script LANGUAGE="JavaScript">

function showClock() {

}

function hideClock() {

}

var timerID = null

var timerRunning = false

function stopClock() {

if(timerRunning)

clearTimeout(timerID);

timerRunning = false

document.clock.face.value = "";

}

function showTime() {

var now = new Date();

var year = now.getYear();

var month = now.getMonth() + 1;

var date = now.getDate();

var hours = now.getHours();

var mins = now.getMinutes();

var secs = now.getSeconds();

var timeVal = "";

timeVal += ((hours <= 12) ? hours : hours - 12);

timeVal += ((mins < 10) ? ":0" : ":") + mins;

timeVal += ((secs <= 10) ? ":0" : ":") + secs;

timeVal += ((hours < 12) ? "AM" : "PM");

timeVal += ((month < 10) ? " on 0" : " on ") + month + "-";

timeVal += date + "-" + year;

document.clock.face.value = timeVal;

timerID = setTimeout("showTime()", 1000);

timerRunning = true

}

function startClock() {

stopClock();

showTime();

}

function windowOpener( indexnum ){

var loadpos="date.html"+"#"+indexnum;

controlWindow=window.open(loadpos,"date","toolbar=no,location=no,

directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,

width=620,height=400");

}

</script>

</head>

<body onLoad="startClock()" >

<p align="center"><big><span style="background-color: rgb(45,45,45)">

<font face="Arial">form</font> &nbsp; <font face="宋体">时钟</font>

</span></big></p>

<p align="center"></p>

<div align="center"><center>

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="100%"><form NAME="clock" onSubmit="0">

<div align="center"><center><p><input TYPE="text" NAME="face" size="20"

VALUE style="background-color: rgb(192,192,192)"> </p>

</center></div>

</form>

</td>

</tr>

</table>

</center></div>

</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- 王朝網路 版權所有