當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript教程--从入门到精通

發布時間：2025/3/14 javascript 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript教程--从入门到精通小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript是由Netscape公司開發并隨Navigator導航者一起發布的、介于Java與HTML之間、基于對象事件驅動的編程語言，正日益受到全球的關注。因它的開發環境簡單，不需要Java編譯器，而是直接運行在Web瀏覽器中，而因倍受Web設計者的所愛。　　這一套JavaScript教程分九個章節從什么是JavaScript、JavaScript的簡單應用一直介紹到如何用JavaScript實現復雜的交互，對于JavaScript初學者和進階者來說，都是一部不可多得的優秀教程。

　　JavaScript教程語言概況

　　Internet時代，造就了我們新的工作和生活方式，其互聯性、開放性和共享信息的模式，打破了傳統信息傳播方式的重重壁壘，為我們帶來了新的機遇。隨著計算機和信息時代的到來，人類社會前進的腳步在逐漸加快，每一天都有新的事情發生，每一天都在創造著奇跡。隨著Internet技術的突飛猛進，各行各業都在加入Internet的行業中來。無論從管理方面，還是從商業角度來看，Internet都可以帶來無限生機。通過Internet，可以實現地區、集體乃至個人的連接，從而達到一種“統一的和諧”。那么怎樣把自己的或公司的信息資源加入到WWW 服務器，是廣大用戶日益關心的問題。采用超鏈技術（超文本和超媒體技術）是實現這個目標最簡單的、最快速的手段和途徑。具體實現這種手段的支持環境，那就是HTML超文本標識語言。通過它們可制作所需的Web網頁。
　　通過超文本(Hyper Text)和超媒體(Hyper Media)技術結合超鏈接(Hyper link)的鏈接功能將各種信息組織成網絡結構(web)，構成網絡文檔(Document)，實現Internet上的“漫游”。通過HTML符號的描述就可以實現文字、表格、聲音、圖像、動畫等多媒體信息的檢索。
　　然而采用這種超鏈技術存在有一定的缺陷，那就是它只能提供一種靜態的信息資源，缺少動態的客戶端與服務器端的交互。雖然可通過CGI(Common Gateway Interface)通用網關接口實現一定的交互，但由于該方法編程較為復雜，因而在一段時間防礙了Internet技術的發展。而JavaScript的出現，無凝為Internet網上用戶帶來了一線生機。可以這樣說,JavaScript的出現是時代的需求,是當今的信息時代造就了JavaScript。
　　JavaScript的出現，它可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關系，而是實現了一種實時的、動態的、可交式的表達能力。從而基于CGI靜態的HTML頁面將被可提供動態實時信息，并對客戶操作進行反應的Web頁面的取代。JavaScript腳本正是滿足這種需求而產生的語言。它深受廣泛用戶的喜愛的歡迎。它是眾多腳本語言中較為優秀的一種，它與WWW的結合有效地實現了網絡計算和網絡計算機的藍圖。無凝Java家族將占領Internet網絡的主導地位。因此，盡快掌握JavaScript腳本語言編程方法是我國廣大用戶日益關心的。
　　一、什么是JavaScript
　　JavaScript是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java 腳本語言（Java小程序）一起實現在一個Web頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發客戶端的應用程序等。它是通過嵌入或調入在標準的HTML語言中實現的。它的出現彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇，具有以下幾個基本特點：
　　腳本編寫語言
　　JavaScript是一種腳本語言，它采用小程序段的方式實現編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言，它提供了一個易的開發過程。
　　它的基本結構形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運行過程中被逐行地解釋。它與HTML標識結合在一起，從而方便用戶的使用操作。
　　基于對象的語言
　　JavaScript是一種基于對象的語言，同時以可以看作一種面向對象的。這意味著它能運用自己已經創建的對象。因此，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。
　　簡單性
　　JavaScript的簡單性主要體現在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設計, 從而對于學習Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴格的數據類型。
　　安全性
　　JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數據存入到服務器上，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。
　　動態性
　　JavaScript是動態的，它可以直接對用戶或客戶輸入做出響應，無須經過Web服務程序。它對用戶的反映響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁(Home Page)中執行了某種操作所產生的動作，就稱為“事件”(Event)。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后，可能會引起相應的事件響應。
　　跨平臺性
　　JavaScript是依賴于瀏覽器本身，與操作環境無關，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執行。從而實現了“編寫一次，走遍天下”的夢想。
　　實際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個字處理軟件及一瀏覽器，無須WEB服務器通道，通過自己的電腦即可完成所有的事情。
　　綜合所述JavaScript 是一種新的描述語言，它可以被箝入到 HTML 的文件之中。 JavaScript語言可以做到回應使用者的需求事件 (如： form 的輸入) ，而不用任何的網路來回傳輸資料，所以當一位使用者輸入一項資料時，它不用經過傳給伺服端 (server)處理，再傳回來的過程，而直接可以被客戶端 (client) 的應用程式所處理。
　　JavaScript 和 Java 很類似，但到底并不一樣！ Java 是一種比 JavaScript 更復雜許多的程式語言，而 JavaScript 則是相當容易了解的語言。JavaScript 創作者可以不那麼注重程式技巧，所以許多 Java 的特性在 Java Script 中并不支援。　　

二、JavaScript和Java的區別

　　雖然JavaScript與Java有緊密的聯系，但卻是兩個公司開發的不同的兩個產品。Java是SUN公司推出的新一代面向對象的程序設計語言，特別適合于Internet應用程序開發；而JavaScript是Netscape公司的產品，其目的是為了擴展Netscape Navigator功能，而開發的一種可以嵌入Web頁面中的基于對象和事件驅動的解釋性語言，它的前身是Live Script；而Java的前身是Oak語言。下面對兩種語言間的異同作如下比較：
　　基于對象和面向對象
　　Java是一種真正的面向對象的語言，即使是開發簡單的程序，必須設計對象。
　　JavaScript是種腳本語言，它可以用來制作與網絡無關的，與用戶交互作用的復雜軟件。它是一種基于對象（Object Based）和事件驅動（Event Driver）的編程語言。因而它本身提供了非常豐富的內部對象供設計人員使用。
　　解釋和編譯
　　兩種語言在其瀏覽器中所執行的方式不一樣。Java的源代碼在傳遞到客戶端執行之前，必須經過編譯，因而客戶端上必須具有相應平臺上的仿真器或解釋器，它可以通過編譯器或解釋器實現獨立于某個特定的平臺編譯代碼的束縛。
　　JavaScript是一種解釋性編程語言，其源代碼在發往客戶端執行之前不需經過編譯，而是將文本格式的字符代碼發送給客戶編由瀏覽器解釋執行。
　　強變量和弱變量
　　兩種語言所采取的變量是不一樣的。
　　Java采用強類型變量檢查，即所有變量在編譯之前必須作聲明。如:
　　Integer x;
　　String y;
　　x=1234;
　　x=4321;
　　其中X=1234說明是一個整數，Y=4321說明是一個字符串。
　　JavaScript中變量聲明，采用其弱類型。即變量在使用前不需作聲明，而是解釋器在運行時檢查其數據類型，如：
　　x=1234;
　　y＝"4321";
　　前者說明x為其數值型變量，而后者說明y為字符型變量。
　　代碼格式不一樣
　　Java是一種與HTML無關的格式，必須通過像HTML中引用外媒體那么進行裝載，其代碼以字節代碼的形式保存在獨立的文檔中。
　　JavaScript的代碼是一種文本字符格式，可以直接嵌入HTML文檔中，并且可動態裝載。編寫HTML文檔就像編輯文本文件一樣方便。
　　嵌入方式不一樣
　　在HTML文檔中，兩種編程語言的標識不同，JavaScript使用<Script>...</Script>來標識，而Java使用<applet>...</applet>來標識。
　　靜態聯編和動態聯編
　　Java采用靜態聯編，即Java的對象引用必須在編譯時的進行，以使編譯器能夠實現強類型檢查。
　　JavaScript采用動態聯編，即JavaScript的對象引用在運行時進行檢查，如不經編譯則就無法實現對象引用的檢查。
　　三、JavaScript程序運行環境
　　Java運行環境
　　軟件環境：
　　Windows 95/98或Windows NT。
　　Netscape Navigator x.0或Internet Explorer x.0。
　　用于編輯HTML文檔的字符編輯器(WS、WPS、Notepad、WordPad等)或HTML文檔編輯器。
　　硬件配置：
　　首先必須具備運行Windows 95/98或Windows NT的基本硬件配置環境。推薦：
　　基本內存32M。
　　CRT只少需要256顏色，分辨率在640X480以上。
　　CPU只少233以上。
　　鼠標和其它外部設置（根據需要選用）。
　　四、編寫第一個JavaScript程序
　　下面我們通過一個例子，編寫第一個JavaScript程序。通過它可說明JavaScript的腳本是怎樣被嵌入到HTML文檔中的。
test1.html文檔：
<html>
<head>
<Script Language ="JavaScript">
// JavaScript Appears here.
alert("這是第一個JavaScript例子!");
alert("歡迎你進入JavaScript世界!");
alert("今后我們將共同學習JavaScript知識！");
</Script>
</Head>
</Html>
在Internet Explore5.0中運行行后的結果見圖1－1所示。

說明：test.html是HTML文檔，其標識格式為標準的HTML格式；如同HTML標識語言一樣， JavaScript程序代碼是一些可用字處理軟件瀏覽的文本，它在描述頁面的HTML相關區域出現。　　JavaScript代碼由 <Script Language ="JavaScript">...</Script>說明。在標識<Script Language ="JavaScript">...</Script>之間就可加入JavaScript腳本。
　　alert()是JavaScript的窗口對象方法，其功能是彈出一個具有OK對話框并顯示（）中的字符串。
　　通過標識說明：若不認識JavaScript代碼的瀏覽器，則所有在其中的標識均被忽略；若認識，則執行其結果。使用注釋這是一個好的編程習慣，它使其他人可以讀懂你的語言。
JavaScript 以 </Script> 標簽結束。

　　從上面的實例分析中我們可以看出，編寫一個JavaScript程序確實非常容易的。 JavaScript基本數據結構 　　JavaScript提供腳本語言的編程與C++非常相似，它只是去掉了Ｃ語言中有關指針等容易產生的錯誤，并提供了功能強大的類庫。對于已經具備Ｃ++或Ｃ語言的人來說，學習JavaScript腳本語言是一件非常輕松愉快的事。
　　一、JavaScript代碼的加入
　　JavaScript的腳本包括在HTML中，它成為HTML文檔的一部分。與HTML標識相結合，構成了一個功能強大的Internet網上編程語言。可以直接將JavaScript腳本加入文檔：
<Script Language ="JavaScript">
JavaScript語言代碼；
JavaScript 語言代碼;
....
</Script>
　　說明：
　通過標識<Script>...</Script>指明JavaScript腳本源代碼將放入其間。
　通過屬性Language ="JavaScript"說明標識中是使用的何種語言，這里是JavaScript語言, 表示在JavaScript中使用的語言。
　　下面是將JavaScript腳本加入Web文檔中的例子:
Test2.html
<HTML>
<Head>
<Script Language ="JavaScript">
document. Write("這是賽迪網互動學校");
document. close();
</Script>
</Head>
</HTML>
　　在瀏覽器的窗口中調用test2.html，則顯示“這是賽迪網互動學校”字串。見圖2所示。

圖2
說明:
　　Document. write()是文檔對象的輸出函數，其功能是將括號中的字符或變量值輸出到窗口；document. close()是將輸出關閉。
可將<Script>...</Script>標識放入head>.. </Head>或<Body> ...</Body>之間。將JavaScript標識放置<Head>... </Head>在頭部之間，使之在主頁和其余部分代碼之前裝載，從而可使代碼的功能更強大；可以將JavaScript標識放置在<Body>... </Body>主體之間以實現某些部分動態地創建文檔。
　　二、基本數據類型
　　JavaScript腳本語言同其它語言一樣，有它自身的基本數據類型、表達式和算術運算符以及程序的基本框架結構。JavaScript提供了四種基本的數據類型用來處理數字和文字, 而變量提供存放信息的地方, 表達式則可以完成較復雜的信息處理。
　　1、基本數據類型
　　在JavaScript中四種基本的數據類型：數值（整數和實數）、字符串型（用“”號或‘’括起來的字符或數值）、布爾型（使True或False表示）和空值。在JavaScript的基本類型中的數據可以是常量，也可以變量。由于JavaScript采用弱類型的形式，因而一個數據的變量或常量不必首先作聲明，而是在使用或賦值時確定其數據的類型的。當然也可以先聲明該數據的類型，它是通過在賦值時自動說明其數據類型的。
2、常量
　整型常量
JavaScript的常量通常又稱字面常量，它是不能改變的數據。其整型常量可以使用十六進制、八進制和十進制表示其值。
　實型常量
實型常量是由整數部分加小數部分表示，如12.32、193.98 。可以使用科學或標準方法表示：5E7、4e5等。
　　布爾值
　　布爾常量只有兩種狀態：True或False。它主要用來說明或代表一種狀態或標志，以說明操作流程。它與Ｃ＋＋是不一樣的,Ｃ＋＋可以用１或０表示其狀態,而JavaScript只能用True或False表示其狀態。
　　字符型常量
　　使用單引號（‘）或雙引號（“）括起來的一個或幾個字符。如 "This is a book of JavaScript "、"3245"、"ewrt234234" 等。
　空值
JavaScript中有一個空值null,表示什么也沒有。如試圖引用沒有定義的變量,則返回一個Null值。
　特殊字符
同Ｃ語言一樣，JavaScript中同樣以有些以反斜杠（／）開頭的不可顯示的特殊字符。通常稱為控制字符。
　
　　3、變量
　　變量的主要作用是存取數據、提供存放信息的容器。對于變量必須明確變量的命名、變量的類型、變量的聲明及其變量的作用域。
　變量的命名
JavaScript中的變量命名同其計算機語言非常相似，這里要注意以下兩點：
Ａ、必須是一個有效的變量，即變量以字母開頭，中間可以出現數字如test1、text2等。除下劃線（－）作為連字符外，變量名稱不能有空格、（＋）、（－）、（，）或其它符號。
Ｂ、不能使用JavaScript中的關鍵字作為變量。
在JavaScript中定義了４０多個類鍵字，這些關鍵是JavaScript內部使用的，不能作為變量的名稱。如Var、int、double、true不能作為變量的名稱。
　　在對變量命名時，最好把變量的意義與其代表的意思對應起來，以免出現錯誤。
　　變量的類型
　　在JavaScript中，變量可以用命令Var作聲明:
var mytest;
該例子定義了一個mytest變量。但沒有賦予它的值。
Var mytest=”This is a book”
該例子定義了一個mytest變量, 同時賦予了它的值。
在JavaScript中，變量以可以不作聲明，而在使用時再根據數據的類型來確其變量的類型。
如：
x=100
y="125"
xy= True
cost=19.5等。
其中x整數，y為字符串，xy為布爾型，cost為實型。
　變量的聲明及其作用域
JavaScript變量可以在使用前先作聲明，并可賦值。通過使用var關鍵字對變量作聲明。對變量作聲明的最大好處就是能及時發現代碼中的錯誤；因為JavaScript是采用動態編譯的，而動態編譯是不易發現代碼中的錯誤，特別是變量命名的方面。
對于變量還有一個重要性──那就是變量的作用域。在JavaScript中同樣有全局變量和局部變量。全局變量是定義在所有函數體之外，其作用范圍是整個函數；而局部變量是定義在函數體之內，只對其該函數是可見的，而對其它函數則是不可見的。

三、表達式和運算符
　　１、表達式
　　在定義完變量后，就可以對它們進行賦值、改變、計算等一系列操作，這一過程通常又叫稱一個叫表達式來完成，可以說它是變量、常量、布爾及運算符的集合，因此表達式可以分為算術表述式、字串表達式、賦值表達式以及布爾表達式等。
　　２、運算符
　　運算符完成操作的一系列符號，在JavaScript中有算術運算符，如＋、-、*、/等；有比較運算符如!＝、＝＝等; 有邏輯布爾運算符如！（取反）、|、||; 有字串運算如＋、＋＝等。
　　在JavaScript主要有雙目運算符和單目運算符。其雙目運算符由下列組成：
操作數１運算符操作數２
　　即由兩個操作數和一個運算符組成。如50＋40、"This"+"that"等。單目運算符，只需一個操作數，其運算符可在前或后。
（１）算術運算符
　　JavaScript中的算術運算符有單目運算符和雙目運算符。
雙目運算符：
+（加）、-（減）、 *（乘）、 /（除）、 %（取模）、|（按位或）、&(按位與)、<<（左移）、 >>（右移）、 >>>（右移，零填充）。
單目運算符：
-（取反）、~（取補）、++（遞加1）、--（遞減1）。
（２）比較運算符
　　比較運算符它的基本操作過程是，首先對它的操作數進行比較，爾后再返回一個true或False值，有８個比較運算符:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。
（３）布爾邏輯運算符
　　在JavaScript中增加了幾個布爾邏輯運算符:
!（取反)、&=（與之后賦值）、 &（邏輯與）、 |=（或之后賦值）、 |（邏輯或）、 ^=（異或之后賦值）、 ^（邏輯異或）、 ?:（三目操作符）、||（或）、==(等于)、|=(不等于)。
　　其中三目操作符主要格式如下：
操作數？結果１：結果２
　　若操作數的結果為真，則表述式的結果為結果１，否則為結果２。
　　四、范例
　　下面是一個跑馬燈效果的JavaScript文檔。
Test2_1.html
<html>
<head>
<script Language="JavaScript">
var msg="這是一個跑馬燈效果的JavaScript文檔";
var interval = 100;
var spacelen = 120;
var space10=" ";
var seq=0;
function Scroll() {
len = msg.length;
window.status = msg.substring(0, seq+1);
seq++;
if ( seq >= len ) {
??seq = spacelen;
??window.setTimeout("Scroll2();", interval );
}
else
??window.setTimeout("Scroll();", interval );
}
function Scroll2() {
var out="";
for (i=1; i<=spacelen/space10.length; i++)
??out +=
space10;
out = out + msg;
len=out.length;
window.status=out.substring(seq, len);
seq++;
if ( seq >= len )
{
?? seq = 0;
??};
window.setTimeout("Scroll2();", interval );
}
Scroll();
</script>
<body>
</body>
</html>
　　本文介紹了JavaScript腳本是如何加入Web頁面, 并學習了JavaScript語言中的基本數據類型、變量、常量、操作運算符等。可以看出，對于已經掌握Ｃ＋＋語言的人來說，學習JavaScript真是一件非常輕松愉快的事。
JavaScript程序構成

　　JavaScript腳本語言的基本構成是由控制語句、函數、對象、方法、屬性等,來實現編程的。
一、程序控制流
　　在任何一種語言中，程序控制流是必須的，它能使得整個程序減小混亂，使之順利按其一定的方式執行。下面是JavaScript常用的程序控制流結構及語句:
１、if條件語句
　基本格式
if（表述式）
語句段１；
......
else
語句段２；
.....
　功能：若表達式為true，則執行語句段１；否則執行語句段２。
　說明：
if -else 語句是JavaScript中最基本的控制語句，通過它可以改變語句的執行順序。
表達式中必須使用關系語句，來實現判斷，它是作為一個布爾值來估算的。
它將零和非零的數分別轉化成false和true。
若if后的語句有多行，則必須使用花括號將其括起來。
　
if語句的嵌套
if（布爾值）語句１；
else（布爾值）語句２；
else if（布爾值）語句３；
……
else 語句４；
　
在這種情況下，每一級的布爾表述式都會被計算，若為真，則執行其相應的語句，否則執行else后的語句。
　
２、For循環語句
　基本格式
for（初始化；條件；增量）
語句集；
　功能：實現條件循環，當條件成立時，執行語句集，否則跳出循環體。
　說明：
初始化參數告訴循環的開始位置，必須賦予變量的初值；
條件：是用于判別循環停止時的條件。若條件滿足，則執行循環體，否則跳出。
增量：主要定義循環控制變量在每次循環時按什么方式變化。
三個主要語句之間，必須使用逗號分隔。
　
３、while循環
　基本格式
while（條件）
語句集；
該語句與For語句一樣，當條件為真時，重復循環，否則退出循環。
　For與while語句
　　兩種語句都是循環語句，使用For語句在處理有關數字時更易看懂，也較緊湊；而while循環對復雜的語句效果更特別。
４、break和continue語句
　　與C++語言相同，使用break語句使得循環從For或while中跳出，continue使得跳過循環內剩余的語句而進入下一次循環。
二、函數
　　函數為程序設計人員提供了一個豐常方便的能力。通常在進行一個復雜的程序設計時，總是根據所要完成的功能，將程序劃分為一些相對獨立的部分，每部分編寫一個函數。從而，使各部分充分獨立，任務單一，程序清晰，易懂、易讀、易維護。JavaScript函數可以封裝那些在程序中可能要多次用到的模塊。并可作為事件驅動的結果而調用的程序。從而實現一個函數把它與事件驅動相關聯。這是與其它語言不樣的地方。
１、JavaScript函數定義
Function 函數名（參數,變元）{
函數體;.
Return 表達式;
}
說明：
　當調用函數時,所用變量或字面量均可作為變元傳遞。
　函數由關鍵字Function定義。
　函數名：定義自己函數的名字。
　參數表，是傳遞給函數使用或操作的值，其值可以是常量，變量或其它表達式。
　通過指定函數名（實參）來調用一個函數。
　必須使用Return將值返回。
　函數名對大小寫是敏感的。
　
２、函數中的形式參數：
　　在函數的定義中，我們看到函數名后有參數表，這些參數變量可能是一個或幾個。那么怎樣才能確定參數變量的個數呢？在JavaScript中可通過arguments .Length來檢查參數的個數。
例：
Function function_Name(exp1,exp2,exp3,exp4)
Number =function _Name . arguments .length;
if (Number>1）
document.wrile(exp2);
if (Number>2)
document.write(exp3);
if(Number>3)
document.write(exp4);
...
三、事件驅動及事件處理
１、基本概念
　　JavaScript是基于對象(object-based)的語言。這與Java不同,Java是面向對象的語言。而基于對象的基本特征，就是采用事件驅動(event-driven)。它是在用形界面的環境下，使得一切輸入變化簡單化。通常鼠標或熱鍵的動作我們稱之為事件（Event），而由鼠標或熱鍵引發的一連串程序的動作，稱之為事件驅動（Event Driver）。而對事件進行處理程序或函數，我們稱之為事件處理程序（Event Handler）。
２、事件處理程序
　　在JavaScript中對象事件的處理通常由函數(Function)擔任。其基本格式與函數全部一樣，可以將前面所介紹的所有函數作為事件處理程序。
格式如下：
Function 事件處理名（參數表）{
事件處理語句集；
……
}
３、事件驅動
　　JavaScript事件驅動中的事件是通過鼠標或熱鍵的動作引發的。它主要有以下幾個事件：
（１）單擊事件onClick
　　當用戶單擊鼠標按鈕時，產生onClick事件。同時onClick指定的事件處理程序或代碼將被調用執行。通常在下列基本對象中產生：
button（按鈕對象）
checkbox（復選框）或（檢查列表框）
radio （單選鈕）
reset buttons（重要按鈕）
submit buttons（提交按鈕）
例：可通過下列按鈕激活change()文件：
<Form>
<Input type="button" Value=“ ” >
</Form>
　　在onClick等號后，可以使用自己編寫的函數作為事件處理程序，也可以使用JavaScript中內部的函數。還可以直接使用JavaScript的代碼等。例：
<Input type="button" value=" " ("這是一個例子"）;
（２）onChange改變事件
　　當利用text或texturea元素輸入字符值改變時發該事件，同時當在select表格項中一個選項狀態改變后也會引發該事件。
例：
<Form>
<Input type="text" name="Test" value="Test" >
</Form>
（３）選中事件onSelect
　　當Text或Textarea對象中的文字被加亮后，引發該事件。
（４）獲得焦點事件onFocus
　　當用戶單擊Text或textarea以及select對象時，產生該事件。此時該對象成為前臺對象。
（５）失去焦點onBlur
　　當text對象或textarea對象以及select對象不再擁有焦點、而退到后臺時，引發該文件，他與onFocas事件是一個對應的關系。
（６）載入文件onLoad
　　當文檔載入時，產生該事件。onLoad一個作用就是在首次載入一個文檔時檢測cookie的值，并用一個變量為其賦值，使它可以被源代碼使用。
（７）卸載文件onUnload
　　當Web頁面退出時引發onUnload事件，并可更新Cookie的狀態。四、范例
　　范例1：下例程序是一個自動裝載和自動卸載的例子。即當裝入HTML文檔時調用loadform()函數,而退出該文檔進入另一HTML文檔時則首先調用unloadform()函數,確認后方可進入。
test3_1.htm
<HTML>
<HEAD>
<script Language="JavaScript">

</Script>
</HEAD>
<BODY??>
<a href="test.htm">調用</a>
</BODY>
</HTML>
　
范例2：這是一個獲取瀏覽器版本號的程序。該程序首先顯示一個波浪一提示信息。之后顯示瀏覽器的版本號有關信息。
test3_2.htm
<html>
<head>
<script language="JavaScript">
function makeArray(n){
this.length=n
return this
}
function hexfromdec(num) {
hex=new makeArray(1);
var hexstring="";
var shifthex=16;
var temp1=num;
for(x=1; x>=0; x--) {
hex[x]=Math.round(temp1/shifthex - .5);
hex[x-1]=temp1 - hex[x] * shifthex;
temp1=hex[x-1];
shifthex /= 16;
}
for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); }
return (hexstring);
}
　
function getletter(num) {
if (num < 10) { return num; }
else {
if (num == 10) { return "A" }
if (num == 11) { return "B" }
if (num == 12) { return "C" }
if (num == 13) { return "D" }
if (num == 14) { return "E" }
if (num == 15) { return "F" }
}
}
function rainbow(text){
var color_d1;
var allstring="";
for(i=0;i<text.length;i=i+2){
color_d1=255*Math.sin(i/(text.length/3));
color_h1=hexfromdec(color_d1);
allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";
}
return allstring;
}
　
function sizefont(text){
var color_d1;
var allstring="";
var flag=0;
for(i=0,j=0;i<text.length;i=i+1){
if (flag==0) {
j++;
if (j>=7) {
flag=1;}}
if (flag==1) {
j=j-1;
if (j<=0) {
flag=0; }}
allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>";
}
return allstring;
}
document.write("<font size=8><CENTER>")
document.write("<BR><BR>")
document.write( sizefont("這是一個獲取WEB瀏覽器的程序"))
document.write("</CENTER></font>")
document.write("瀏覽器名稱: "+navigator.appName+"<br>");
document.write("版本號: "+navigator.appVersion+"<br>");
document.write("代碼名字: "+navigator.appCodeName+"<br>");
document.write("用戶代理標識: "+navigator.userAgent);
</script>
<body>
</body>
</html>
輸出結果圖1所示。
圖1
　　本講介紹了JavaScript程序設計的有關內容。程序流、函數、事件是我們學習掌握JavaScript編程的重點。
基于對象的JavaScript語言
　　JavaScript語言是基于對象的（Object-Based），而不是面向對象的（object-oriented）。之所以說它是一門基于對象的語言，主要是因為它沒有提供象抽象、繼承、重載等有關面向對象語言的許多功能。而是把其它語言所創建的復雜對象統一起來，從而形成一個非常強大的對象系統。
　　　　雖然JavaScript語言是一門基于對象的，但它還是具有一些面向對象的基本特征。它可以根據需要創建自己的對象，從而進一步擴大JavaScript的應用范圍，增強編寫功能強大的Web文檔。
一、對象的基礎知識
1、對象的基本結構
　　JavaScript中的對象是由屬性(properties)和方法(methods)兩個基本的元素的構成的。前者是對象在實施其所需要行為的過程中，實現信息的裝載單位，從而與變量相關聯；后者是指對象能夠按照設計者的意圖而被執行，從而與特定的函數相聯。
2、引用對象的途徑
　　一個對象要真正地被使用，可采用以下幾種方式獲得：
　　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)；
該函數是通過數組下標順序值，來訪問每個對象的屬性，使用這種方式首先必須知道數組的下標值，否則若超出范圍，則就會發生錯誤。而使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))
二、常用對象的屬性和方法
　　JavaScript為我們提供了一些非常有用的常用內部對象和方法。用戶不需要用腳本來實現這些功能。這正是基于對象編程的真正目的。
　　在JavaScript提供了string（字符串）、math（數值計算）和Date（日期）三種對象和其它一些相關的方法。從而為編程人員快速開發強大的腳本程序提供了非常有利的條件。
1、常用內部對象
　　在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中提供了６個屬性，它們是數學中經常用到的常數Ｅ、以１０為底的自然對數ＬＮ１０、以２為底的自然對數LN2、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 ():設置毫秒數
...
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;
c.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中常用內部對象屬性、方法的使用。
在JavaScript中創建新對象
　　使用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，這與其它０到size的數組表示方法有所不同，當然你可根據需要將數組的下標由１到size調整到０到size－１,可由下列實現:
Function arrayName (size)
For (var X=0; X<=size;X++)
this[X]=0;
this.lenght=size;
Return this;
從上面可以看出該方法是只是調整了this.lenght的位置，該位置是用于存儲數組的大小的。從而調整后的數組的下標將與其它語言一致。但請讀者注意正是由于數組下標順序由１到size，使得JavaScript中的對象功能更加強大。
b、創建數組實例
一個數組定義完成以后，還不能馬上使用，必須為該數組創建一個數組實例：
Myarray=New arrayName(n);
并賦于初值：
Myarray[1]=“字串１”；
Myarray[2]=“字串２”；
Myarray[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=http://www.cnblogs.com/”URL”>來定義一個越文本鏈接項。
　Forms[]: 在程序中使用多窗體時,建立該數組。
　Elements[]:在一個窗口中使用從個元素時,建立該數組。
　Frames[]:建立框架時,使用該數組
　anchors[]用于窗體的訪問(它是通過《form name=“form1”》所指定的),link[]用于被鏈接到的錨點的訪問(它是通過《a href=http://www.cnblogs.com/URL》所指定的)。Forms[]反映窗體的屬性,而anchors[]反映Web頁面中的鏈接屬性。
有關錨數組的文檔：
<HTML>
<HEAD>
<BODY>
<A NAME=”MyAnchorsName1”> 定義第一個錨名
HTML Code
<A NAME=”MyAnchorsName2”> 定義第二個錨名
HTML Code
<A HREF=http://www.cnblogs.com/”#MyAnchorsName1”>建立錨的鏈接
<A HREF=http://www.webjx.com/htmldata/2005-02-26/”#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);

</script>
<body>
</body>
</html>
　
　　本講介紹了用戶自行創建對象的方法, 用戶可根據需要創建自己的對象。并介紹了JavaScript中建數組的方法。
vJavaScript對象系統的使用　　使用瀏覽器的內部對象系統, 可實現與HTML文檔進行交互。它的作用是將相關元素組織包裝起來，提供給程序設計人員使用，從而減輕編程人的勞動，提高設計Web頁面的能力。
一、瀏覽器對象層次及其主要作用
　　除了前面提到過的文檔document對象外，Navigator瀏覽器中還提供了窗口（Window）對象以及歷史（History）和位置（Location）對象。
　　瀏覽器對象(Navigator)
　　　　提供有關瀏覽器的信息
　　窗口對象(Windows)
　　　　Window對象處于對象層次的最頂端，它提供了處理Navigator窗口的方法和屬性。
　　位置對象(Location)
　　　　Location對象提供了與當前打開的URL一起工作的方法和屬性，它是一個靜態的對象。
　　歷史對象(History)
　　　　History對象提供了與歷史清單有關的信息。
　　文檔對象(Document)
　　　　document對象包含了與文檔元素(elements)一起工作的對象，它將這些元素封裝起來供編程人員使用。
　　編程人員利用這些對象，可以對WWW瀏覽器環境中的事件進行控制并作出處理。在JavaScript中提供了非常豐富的內部方法和屬性,從而減輕了編程人員的工作,提高編程效率。這正是基于對象與面向對象的根本區別所在。在這些對象系統中,文檔對象屬于非常重要的,它位于最低層,但對于我們實現Web頁面信息交互起作關鍵作用。因而它是對象系統的核心部分。
二、文檔對象功能及其作用
　　在Navigator瀏覽器中，document文檔對象是核心是，同時也是最重要的。見表6-1所示。
LinksAnchor FormMethod Prop 鏈接對象錨對象窗體對象方法對象

表6－1 document對象　　從表6-1中可以看出，document對象的主要作用就是把這些基本的元素（如links,anchor等）包裝起來，提供給編程人員使用。從另一個角度看，document對象中又是由屬性和方法組成。
　
１、document中三個主要的對象
在document中主要有：links,anchor,form等三個最重要的對象：
（１）anchor錨對象：
anchor對象指的是<A Name=...> </A>標識在HTML源碼中存在時產生的對象。它包含著文檔中所有的anchors信息。
（２）鏈接links對象
　　link對象指的是用<A Href=http://www.webjx.com/htmldata/2005-02-26/...> </A>標記的連接一個超文本或超媒體的元素作為一個特定的URL。
（３）窗體（Form）對象
　　窗體對象是文檔對象的一個元素，它含有多種格式的對象儲存信息，使用它可以在JavaScript腳本中編寫程序進行文字輸入，并可以用來動態改變文檔的行為。通過document. Forms[]數組來使得在同一個頁面上可以有多個相同的窗體,使用forms[]數組要比使用窗體名字要方便得多。
例:下面就是一個使用窗體數組和窗體名字的例子。該程序使得兩個窗體中的字段內容保持一致。
Test6_1.htm
<Html>
<head>
</head>
<body>
<form >
<input type=text??>
</form>
<form NAME="my">
<input type=text >
</form>
</body>
</html>
　　其中用了OnChnge事件(當窗體內容改變時激發)。第一個使用窗體名字標識my,第二個使用窗體數組Forms[]。其效果是一致。
　
２、文檔對象中的attribute屬性
　　document對象中的attribute屬性，主要用于在引用Href標識時，控制著有關顏色的格式和有關文檔標題、文檔原文件的URL以及文檔最后更新的日期。這部分元素的主要含義如下：
（１）鏈接顏色：alinkcolor
這個元素主要用于，當選取一個鏈接時，鏈接對象本身的顏色就按alinkcolo r指定改變。
（２）鏈接顏色：linkcolor
當用戶使用<A Href=http://www.webjx.com/htmldata/2005-02-26/...> Text string </A>鏈接后，Textstring的顏色就會按Linkcolor所指定的顏色更新。
（３）瀏覽過后的顏色：VlinkColor
該屬性表示的是已被瀏覽存儲為已瀏覽過的鏈接顏色。
（４）背景顏色：bgcolor
該元素包含文檔背景的顏色。
（５）前景顏色：Fgcolor
該元素包含HTML文檔中文本的前景顏色。
　
３、文檔對象的基本元素
（１）窗體屬性：
　　窗體屬性是與HTML文檔中<Form>...</Form>相對應的一組對象在HTML文檔所創建的窗體數，由length指定。通過document.forms.length反映該文檔中所創建的窗體數目。
（２）錨屬性：anchors
　　該屬性中，包含了HTML文檔的所有<A> </A>標記為Name=...的語句標識。所有“錨”的數目保存在document.anchors.length中。
（３）鏈接屬性：links
　　鏈接屬性是指在文檔中<A>...</A>的由Href=http://www.webjx.com/htmldata/2005-02-26/...指定的數目，其鏈接數目保存在document.links.length中。
三、范例
例1:下面我們通過一個例子來說明文檔對象的綜合應用。輸出結果見圖6-2所示。
Test6_2.htm
<html>
<head>
</HEAD>
<BOdy>
<Form Name="mytable">
請輸入數據：
<Input Type="text" Name="text1" Value="">
</Form>
<A name="Link1" href="test31.htm">鏈接到第一個文本</a><br>
<A name="Link2" href="test32.htm">鏈接到第二個文本</a><br>
<A name="Link2" href="test33.htm">鏈接到第三個文本</a><br>
<A href="#Link1">第一錨點</a>
<A href="#Link2">第二錨點</a>
<A Href="#Link3">第三錨點</a>
<BR>
<Script Language="JavaScript">
document.write("文檔有"+document.links.length+"個鏈接"+"<br>");
document.write("文檔有"+document.anchors.length+"個錨點"+"<br>");
document.write("文檔有"+document.forms.length+"個窗體");
</script>
</body>
</HTML>
圖6-2　
例子2：下列程序隨機產生每日一語。
test6_3.html
<HTML>
<HEAD>
<script Language="JavaScript">

</Script>
</BODY>
</HTML>
從上面程序可以看出：
　可通過write()和prompt()方法實現交互。
　在JavaScript腳本語言中可以使用HTML標識語言的代碼。從而實現混合編程。其中<H1>和<Br>就是HTML標識符。
三、范例
下列程序演示了你進入主頁所停留的時間。
test7_2.htm
<html>
<form name="myform">
<td vAlign="top" width="135">您在此停留了：
<input name="clock" size="8" value="在線時間"></td>
</form>
<script language="JavaScript">
var id, iM = 0, iS = 1;
start = new Date();
function go()
{
now = new Date();
time = (now.getTime() - start.getTime()) / 1000;
time = Math.floor( time);
iS = time % 60;
iM = Math.floor( time / 60);
if ( iS < 10)
document.myform.clock.value = " " + iM + " 分 0" + iS + " 秒";
else
document.myform.clock.value = " " + iM + " 分 " + iS + " 秒";
id = setTimeout( "go()", 1000);
}
go();
</script>
</body>
</html>
在瀏覽器中的結果，見圖2所示。
用JavaScript腳本實現Web頁面信息交互

　　要實現動態交互，必須掌握有關窗體對象(Form)和框架對象(Frames)更為復雜的知識。
一、窗體基礎知識
　　窗體對象可以使設計人員能用窗體中不同的元素與客戶機用戶相交互，而用不著在之前首先進行數據輸入，就可以實現動態改變Web文檔的行為。
１、什么是窗體對象
窗體（Form）:它構成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體，使用Forms[]數組來實現不同窗體的訪問。
<form Name=Form1>
<INPUT type=text...>
<Input type=text...>
<Inpup byne=text...>
</form>
<form Name=Form2>
<INPUT type=text...>
<Input type=text...>
</form>
　　在Forms[0]中共有三個基本元素，而Forms[1]中只有兩個元素。
　　窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關的HTML代碼：
<Form
Name ="表的名稱"
Target ="指定信息的提交窗口"
action ="接收窗體程序對應的URL"
Method =信息數據傳送方式(get/post)
enctype ="窗體編碼方式"
[onsubmit ="JavaScript代碼"]>
</Form>
　
２、窗體對象的方法
　　窗體對象的方法只有一個--submit()方法，該方法主要功用就是實現窗體信息的提交。如提交Mytest窗體,則使用下列格式：
document.mytest.submit()
　
３、窗體對象的屬性
　　窗體對象中的屬性主要包括以下：elements name action target encoding method.
　　除Elements外，其它幾個均反映了窗體中標識中相應屬性的狀態，這通常是單個窗體標識；而elements常常是多個窗體元素值的數組，例：
elements[0].Mytable.elements[1]
　
４、訪問窗體對象
在JavaScript中訪問窗體對象可由兩種方法實現：
（１）通過訪問窗體
　　在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標識訪問窗體如：document.Mytable()。
（２）通過數組來訪問窗體
　　除了使用窗體名來訪問窗體外，還可以使用窗體對象數組來訪問窗體對象。但需要注意一點，因窗體對象是由瀏覽器環境的提供的，而瀏覽器環境所提供的數組下標是由0到n。所以可通過下列格式實現窗體對象的訪問：
document.forms[0]
document.forms[1]
document.forms[2]...
　
５、引用窗體的先決條件
　　在JavaScript中要對窗體引用的條件是：必須先在頁面中用標識創建窗體，并將定義窗體部分放在引用之前。
二、窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪問這些基本元素，必須通過對應特定的窗體元素的數組下標或窗體元素名來實現。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下:
formName.elements[].methadName (窗體名.元素名或數組.方法)
formName.elemaent[].propertyName(窗體名.元素名或數組.屬性)
　
下面分別介紹：
　
１、Text單行單列輸入元素
　功能：對Text標識中的元素實施有效的控制。
　基本屬性：
Name：設定提交信息時的信息名稱。對應于HTML文檔中的Name。
Value：用以設定出現在窗口中對應HTML文檔中Value的信息。
defaultvalue：包括Text元素的默認值
　基本方法：
blur()：將當前焦點移到后臺。
select()：加亮文字。
　主要事件：
onFocus：當Text獲得焦點時，產生該事件。
OnBlur：從元素失去焦點時，產生該事件。
Onselect：當文字被加亮顯示后，產生該文件。
onchange：當Text元素值改變時，產生該文件。
例：...
<Form name="test">
<input type="text" name="test" value="this is a javascript" >
</form>
...
<script language ="Javascirpt">
document.mytest.value="that is a Javascript";
document.mytest.select();
document.mytest.blur();
</script>
　
２、textarea多行多列輸入元素
　功能：實施對Textarea中的元素進行控制。
　基本屬性
name：設定提交信息時的信息名稱，對應HTML文檔Textarea的Name。
Value：用以設定出現在窗口中對應HTML文檔中Value的信息。
Default value：元素的默認值。
　方法：
blur()：將輸入焦點失去
select()：將文字加亮后
　事件：
onBlur:當失去輸入焦點后產生該事件
onFocus:當輸入獲得焦點后，產生該文件
Onchange:當文字值改變時，產生該事件
Onselect:當文字加亮后，產生該文件
　
３、Select選擇元素
　功能：實施對滾動選擇元素的控制。
　屬性：
name:設定提交信息時的信息名稱，對應文檔select中的name。
Length:對應文檔select中的length
options:組成多個選項的數組
selectIndex;該下標指明一個選項
select在中每一選項都含有以下屬性：
Text:選項對應的文字
selected:指明當前選項是否被選中
Index:指明當前選項的位置
defaultselected:默認選項
　
　事件：
OnBlur：當select選項失去焦點時，產生該文件。
onFocas:當select獲得焦點時，產生該文件。
Onchange:選項狀態改變后，產生該事件。
　
４、Button按鈕
　功能：實施對Button按鈕的控制。
　屬性：
Name:設定提交信息時的信息名稱，對應文檔中button的Name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息。
　方法：
click()該方法類似于一個按下的按鈕。
　事件：
onclick當單擊button按鈕時，產生該事件。
例：
<Form name="test">
<input type="button" name="testcall" ()>
</form>
...
<script language="javascirpt">
document.elements[0].value="mytest"; //通過元素訪問
或
document.testcallvalue="mytest"; // 通過名字訪問
</script>
.....
　
５、checkbox檢查框
　功能：實施對一個具有復選框中元素的控制。
　屬性：
name:設定提交信息時的信息名稱。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息。
Checked:該屬性指明框的狀態true/false.
defauitchecked:默認狀態
　方法：
click()該方法使得框的某一個項被選中。
　事件：
onclick:當框的選被選中時，產生該事件。　
６、radio無線按鈕
　功能：實施對一個具單選功能的無線按鈕控制。
　屬性：
name:設定提交信息時的信息名稱，對應HTML文檔中的radio的name相同
value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中的radio的name。
length:單選按鈕中的按鈕數目。
defalechecked:默認按鈕。
checked:指明選中還是沒有選中。
index:選中的按鈕的位置。
　方法：
chick():選定一個按鈕。
　事件：
onclick:單擊按鈕時，產生該事件。
　
７、hidden:隱藏
　功能：實施對一個具有不顯示文字并能輸入字符的區域元素的控制。
　屬性：
name:設定提交信息時的信息名稱，對應HTML文檔的hidden中的Name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔hidden中的value。
defaleitvalue:默認值
　
８、Password口令
　功能：實施對具有口令輸入的元素的控制。
　屬性：
Name:設定提交信息時的信息名稱，對應HTML文檔中password中的name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中password中的Value。
defaultvalu:默認值
　方法
select():加亮輸入口令域。
blur():使這丟失passward輸入焦點。
focus():獲得password輸入焦點。
　
９、submit提交元素
　功能：實施對一個具有提交功能按鈕的控制。
　屬性：
name:設定提交信息時的信息名稱，對應HTML文檔中submit。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中value。
　方法
click()相當于按下submit按鈕。
　事件：
onclick()當按下該按鈕時，產生該事件。
三、范例
下面我們演示通過點擊一個按鈕（red）來改變窗口顏色，點擊“調用動態按鈕文檔”調用一個動態按鈕文檔。
test8_1.htm
<html>
<head>
<Script Language="JavaScript">
//原來的顏色
document.bgColor="blue";
document.vlinkColor="white";
document.linkColor="yellow";
document.alinkcolor="red";
//動態改變顏色
function changecolor(){
document.bgColor="red";
document.vlinkColor="blue";
document.linkColor="green";
document.alinkcolor="blue";
}
</script>
</HEAD>
<body bgColor="White" >
<A href=http://www.webjx.com/htmldata/2005-02-26/"test8_2.htm"> 調用動態按鈕文檔</a>
<form >
<Input type="button" Value="red" >
</form>
</BODY>
</HTML>
輸出結果見圖1所示。
圖1動態按鈕程序。
test8_2.htm
<HTML>
<HEAD>
</HEAD>
<p align="center">　</p>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="form2" >
<p><input type="submit" name="banner" VALUE="Submit"
> <br>
<script language="JavaScript">
var id,pause=0,position=0;
function banner() {
// variables declaration
var i,k,;// increase msg
k=(30/msg.length)+1;
for(i=0;i<=k;i++) msg+=" "+msg;
// show it to the window
document.form2.banner.value=msg.substring(position,position-30);
// set new position
if(position++==msg.length) position=0;
// repeat at entered speed
id=setTimeout("banner()",60); }
// end -->
banner();
</script></p>
</form>
</td>
</tr>
</table>
</center></div>
<p>　</p>
<BODY>
<A href=http://www.webjx.com/htmldata/2005-02-26/"test8_1.htm"> 返回</a>
</BODY>
</HTML>
輸出結果見圖2所示。
圖2　　本講介紹了使用JavaScript腳本實現Web頁面信息交互的方法。其中主要介紹了窗體中的基本元素的主要功能和使用。
用JavaScript實現更復雜的交互
　　一、什么是框架
　　框架Frames最主要功用是"分割"視窗，使每個"小視窗"能顯示不同的HTM L文件，不同框架之間可以互動(interact)，這就是說不同框架之間可以交換訊息與資料。例如:假設您開了兩個frames，第一個frame可顯示書的目錄，第二個frame則顯示章節的具體內容。
　　框架可以將屏幕分割成不同的區域，每個區域有自己的URL，通過Frames[]數組對象來實現不同框架的訪問。實際上框架對象本身也一類窗口，它繼承了窗口對象的所有特征，并擁有所有的屬性和方法。下面我們先看一下框架的例子。見圖9-1所示。
圖9-1 框架對象<HTML>
<HEAD>
</HEAD>
<Frameset Rows="20%,80%">
<frame src="test9_1.html">
<Frameset Cols="50%,50%">
<frame src="test9_2.html">
<frame src="test9_3.html">
</Frameset>
</Frameset>
</HTML>
　　以上HTML標識將屏幕分成三個框架。先將窗口分成以二行為單位的窗口，之后再按分成二個窗口。并在相應的框架中放入自己的HTML文檔。
　　通過[Framset ]告訴瀏覽器您要設置幾個框架；rows這項參數告訴瀏覽器您想將視窗分割成幾列；而 cols這項參數是告訴瀏覽器您想將視窗分割成幾行。
　　可以用很多組的 <frameset...> tags 將視窗分割得更復雜。
　　可以給每個frame一個"名字" (name)。frame的名字在JavaScript語法中的地位非常重要。　　　　可以用 <src> 告訴瀏覽器您要載入哪一個 HTML文件。
二、如何訪問框架
　　在前面我們介紹過使用document.forms[]實現單一窗體中不同元素的訪問。而要實現框架中多窗體的不同元素的訪問，則必須使用window對象中的Frames屬性。Frames屬性同樣也是一個數組，他在　　父框架集中為每一個子框架設有一項。通過下標實現不同框架的訪問:
parent.frames[Index1].docuement.forms
　　通過parent.frames.length確定窗口中窗體的數目。除了使用數組下標來訪問窗體外還可以使用框架名和窗體名來實現各元素的訪：
parent.framesName.decument.formNames.elementName.(m/p)
三、范例
　　下面我們通過一個具體的實例, 來說明利用JavaScript腳本在WEB中實現更為復雜的信息交互。該例子是在一個多窗口中實現窗體信息的動態交互,在程序中首先在瀏覽器窗口中制作三個用于窗體交互的窗口,每個窗體窗口實現不同信息的動態交互。
　　tset9.html為主調用文檔它首先將窗口劃分為具有二行的窗體,爾后再將第二行的窗體劃分為具有二列的窗體；
test9-1.html為顯示標題文檔；
test9_2.html為第二框架文檔其中需要注意的是:
通過JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”；
test7_3.html為第三框架文檔。
　主調文檔
主要作用是將窗口劃分為具有二行的窗體,爾后再將第二行的窗體劃分為具有二列的窗體。
Test9.htm
<HTML>
<HEAD>
</HEAD>
<Frameset Rows="10%,90%">
<frame src="test9_1.htm">
<Frameset Cols="40%,60%">
<frame src="test9_2.htm">
<frame src="test9_3.htm">
</Frameset>
</Frameset>
</HTML>
第一個框架
主要作用是顯示標題文檔。
Test9_1.htm
<HTML>
<HEAD>
</HEAD>
<H2>使用框架實現WEB交互</H2>
</HTML>
　
第二個框架
主要作用是實現交互。可以通過JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”。
Test9_2.htm
<HTML>
<HEAD>
</HEAD>
<Body>
<Form name="test9_1">
請選擇城市：<BR>
<Select name="select1" Multiple>
<Option>云南省
<Option>四川省
<Option>貴州省
<Option>山東省
<Option>江蘇省
<Option>浙江省
<Option>安徽省
<Option>河南省
</select><BR>
<HR>
<Input Type="Submit" name="" value="提交">
<Input Type="reset" name="" value="復位">
</Form>
<pre>
<script language="JavaScript">
document.test9_1.elements[0].options[0].text="昆明市";
document.test9_1.elements[0].options[1].text="成都市";
</script>
</pre>
</Body>
</HTML>
第三個框架
主要作用是實現交互。
Test9_3.htm
<HTML>
<HEAD>
</HEAD>
<Body>
<Form name="test9_2">
請輸入用戶名：
<Input Type="text" name="text1" Value="" Size=20><BR>
<HR>
請選擇:
<Input Type="Checkbox" name="checkbox1" Value="qb">全部信息<BR>
<Input Type="Checkbox" name="checkbox2" Value="bf">部分信息<BR>
<Input Type="Checkbox" name="checkbox3" Value="sy">所有城市<br>
<HR>
<Input Type="Submit" name="" value="提交">
<Input Type="reset" name="" value="復位">
<BR>
</Form>
<script language="JavaScript">
document.test9_2.elements[0].value="勞動和社會保障";
document.test9_2.elements[1].checked=true;
document.test9_2.elements[2].checked=true;
document.test9_2.elements[3].checked=false;
</script>
</Body>
</HTML>
　　在瀏覽器中的結果見圖9-2所示。
圖 9-2 在瀏覽器中結果　
　　本講介紹框架中的基本元素的主要功能和使用，利用JavaScript腳本可以非常方便、靈活地實現Web頁面更為復雜的信息交互，這是HTML標識語言所不能具備的。從中可以看出JavaScript是多么的吸引眾多的Web設計人員。

轉載于:https://www.cnblogs.com/freedom831215/archive/2009/10/03/1577594.html

總結

以上是生活随笔為你收集整理的JavaScript教程--从入门到精通的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： .net读写更新删除(操作)xml文
下一篇：新一轮的心情整理（有二年没来这里了）

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

javascript

JavaScript教程--从入门到精通

總結