JavaScript语言简介及简单实例

JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。之因此说它是一门基于对象的语言，主要是由于它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所建立的复杂对象统一块儿来，从而造成一个很是强大的对象系统。

　　　　虽然JavaScript语言是一门基于对象的，但它仍是具备一些面向对象的基本特征。它能够根据须要建立本身的对象，从而进一步扩大JavaScript的应用范围，加强编写功能强大的Web文档。

1、对象的基础知识 
一、对象的基本结构 
　　JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所须要行为的过程当中，实现信息的装载单位，从而与变量相关联；后者是指对象可以按照设计者的意图而被执行，从而与特定的函数相联。

二、引用对象的途径 
　　一个对象要真正地被使用，可采用如下几种方式得到： 
　　o 引用JavaScript内部对象； 
　　o 由浏览器环境中提供； 
　　o 建立新对象。 
　　这就是说一个对象在被引用以前，这个对象必须存在，不然引用将毫无心义，而出现错误信息。从上面中咱们能够看出JavaScript引用对象可经过三种方式获取。要么建立新的对象，要么利用现存的对象。

３、有关对象操做语句 
　　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做为一个新的日期对象了。 
　 
４、对象属性的引用 
　　对象属性的引用可由下列三种方式之一实现： 
（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"

５、对象的方法的引用 
在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)) 
　 
2、经常使用对象的属性和方法 
　　JavaScript为咱们提供了一些很是有用的经常使用内部对象和方法。用户不须要用脚原本实现这些功能。这正是基于对象编程的真正目的。 
　　在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。从而为编程人员快速开发强大的脚本程序提供了很是有利的条件。

一、经常使用内部对象 
　　在JavaScript中对于对象属性与方法的引用，有两种状况：其一是说该对象是静态对象，即在引用该对象的属性或方法时不须要为它建立实例；而另外一种对象则在引用它的对象或方法是必须为它建立一个实例，即该对象是动态对象。 
　　对JavaScript内部对象的引用，以是牢牢围绕着它的属性与方法进行的。于是明确对象的静动性对于掌握和理解JavaScript内部对象是具备很是重要的意义。

１)、串对象 
　　o string对象：内部静态性。 
　　o 访问properties和methods时，可以使用（.）运算符实现。 
　　o 基本使用格式：objectName.prop/methods 
（１）串对象的属性 
　　该对象只有一个属性，即length。它代表了字符串中的字符个数，包括全部符号。 
例： 
mytest="This is a JavaScript" 
mystringlength=mytest.length 
　　最后mystringlength返回mytest字串的长度为20。 
（２）串对象的方法 
　　string对象的方法共有１９个。主要用于有关字符串在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的字符所有返回。 
　 
２)、算术函数的math对象 
　功能：提供除加、减、乘、除之外的一引些自述运算。如对数，平方根等 。 
　静动性：静态对象 
（１）主要属性 
　　math中提供了６个属性，它们是数学中常常用到的常数Ｅ、以１０为底的天然对数ＬＮ１０、以２为底的天然对数LN二、3.14159的PI、1/2的平方根SQRT1-2,2的平方根为SQRT2。 
（２）主要方法 
　绝对值：abs() 
　正弦余弦值：sin(),cos() 
　反正弦反余弦 :asin(), acos() 
　正切反正切：tan(),atan() 
　四舍五入：round() 
　平方根：sqrt() 
　基于几方次的值：Pow(base,exponent) 
... 
３)、日期及时间对象 
　功能：提供一个有关日期和时间的对象。 
　静动性：动态性，即必须使用New运算符建立一个实例。例: 
MyDate=New Date() 
Date对象没有提供直接访问的属性。只具备获取和设置日期和时间的方法。 
　日期起始值:１７７０年１月１日００:００:００。 
1. 获取日期的时间方法 
　getYear(): 返回年数 
　getMonth():返回当月号数 
　getDate(): 返回当日号数 
　getDay():返回星期几 
　getHours():返回小时数 
　getMintes(:返回分钟数 
　getSeconds():返回秒数 
　getTime() : 返回毫秒数 
（２）设置日期和时间： 
　setYear();设置年 
　setDate():设置当月号数 
　setMonth():设置当月份数 
　setHours():设置小时数 
　setMintes():设置分钟数 
　setSeconds():设置秒数 
　setTime ():设置毫秒数 
... 
二、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字符串数 
　 
3、范例 
下面是一个时钟显示的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>   <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>