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>