初级JavaScript学习教程(四)

javascript|教程

  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 >
<p align="center"><big><span style="background-color: rgb(45,45,45)">
<font face="Arial">form</font>   <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" >
<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中常用内部对象属性、方法的使用。

时间: 2024-08-31 01:16:27

初级JavaScript学习教程(四)的相关文章

初级JavaScript学习教程(三)

javascript|教程 JavaScript脚本语言的基本构成是由控制语句.函数.对象.方法.属性等,来实现编程的. 一.程序控制流 在任何一种语言中,程序控制流是必须的,它能使得整个程序减小混乱,使之顺利按其一定的方式执行.下面是JavaScript常用的程序控制流结构及语句:1.if条件语句 基本格式if(表述式)语句段1:......else语句段2:..... 功能:若表达式为true,则执行语句段1:否则执行语句段2. 说明:if -else 语句是JavaScript中最基本的控

初级JavaScript学习教程(五)

javascript|教程 使用JavaScript可以创建自己的对象.虽然JavaScript内部和浏览器本身的功能已十分强大,但JavaScript还是提供了创建一个新对象的方法.使其不必像超文本标识语言那样,求于或其它多媒体工具,就能完成许多复杂的工作. 在JavaScript中创建一个新的对象是十分简单的.首先它必须定义一个对象,而后再为该对象创建一个实例.这个实例就是一个新对象,它具有对象定义中的基本特征. 一.对象的定义JavaScript对象的定义,其基本格式如下:Function

初级JavaScript学习教程(六)

javascript|教程 使用浏览器的内部对象系统, 可实现与HTML文档进行交互.它的作用是将相关元素组织包装起来,提供给程序设计人员使用,从而减轻编程人的劳动,提高设计Web页面的能力. 一.浏览器对象层次及其主要作用 除了前面提到过的文档document对象外,Navigator浏览器中还提供了窗口(Window)对象以及历史(History)和位置(Location)对象. 浏览器对象(Navigator) 提供有关浏览器的信息 窗口对象(Windows) Window对象处于对象层次

MyBatis学习教程(四)-如何快速解决字段名与实体类属性名不相同的冲突问题_java

在项目开发中,我们经常会遇到表中的字段名和表对应实体类的属性名称不一定都是完全相同的情况,下面小编给大家演示一下这种情况下的如何解决字段名与实体类属性名不相同的冲突问题,感兴趣的朋友一起学习吧. 一.准备演示需要使用的表和数据 CREATE TABLE orders( order_id INT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(20), order_price FLOAT ); INSERT INTO orders(order_no, or

Javascript 学习 笔记四

1.children和childNodes(参考:JavaScript中Element与Node的区别,children与childNodes的区别 children和childNodes) Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有: 节点类型 NodeType 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9 更多

Javascript学习教程:字符串连接

文章简介:JS内置功能之一:字符串连接. JS内置功能之一:字符串连接: 如果将加号(+)运算符用于数字,表示两数相加: 但将它作用于字符串,则表示字符串相连,将第二个字符串连接在第一个之后. var a = "Hello,"; var b = "world"; var s = a + b; //生成字符串"Hello,world": alert(s)://显示出字符串 alert(s.length)://显示字符串的长度 字符串其他的调用方法:

javascript学习笔记(四) Number 数字类型_基础知识

toFixed() 方法指定小数位个数 toExponential() 方法 用科学计数法表示数,参数指定小数位个数 toPrecision() 方法自动判断调用toFixed()或toExponential()方法,参数指定所有数的位数 复制代码 代码如下: var num = 99; alert(toFixed(2)); //99.00 alert(toExponential(1)); //9.0e+1 alert(toPrecision(1)); //9.0e+1 alert(toPrec

新手快速学习JavaScript免费教程资源汇总

  这篇文章主要介绍了新手快速学习JavaScript免费教程资源汇总,都是非常不错的学习站点,有需要的小伙伴可以参考下. "JavaScript"的名头相信大家肯定是耳熟能详,但只有一小部分人群了解它的使用与应用程序构建方式.这"一小部分"人指的当然是技术过硬的有为青年.网络程序员以及IT专业人员.但对于一位新手或者说外行人而言,"JavaScript"只不过是复杂计算机编程学科当中的另一个不知所云的术语. 那么,JavaScript到底是什么

新手快速学习JavaScript免费教程资源汇总_javascript技巧

"JavaScript"的名头相信大家肯定是耳熟能详,但只有一小部分人群了解它的使用与应用程序构建方式.这"一小部分"人指的当然是技术过硬的有为青年.网络程序员以及IT专业人员.但对于一位新手或者说外行人而言,"JavaScript"只不过是复杂计算机编程学科当中的另一个不知所云的术语. 那么,JavaScript到底是什么? 如果各位拥有在计算机领域的工作经验,那么绝对不能错过强大的JavaScript. 它是知名度最高的Web页面脚本语言.它