當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JavaScript教程--从入门到精通

發(fā)布時(shí)間：2025/3/14 javascript 54 豆豆

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

JavaScript是由Netscape公司開(kāi)發(fā)并隨Navigator導(dǎo)航者一起發(fā)布的、介于Java與HTML之間、基于對(duì)象事件驅(qū)動(dòng)的編程語(yǔ)言，正日益受到全球的關(guān)注。因它的開(kāi)發(fā)環(huán)境簡(jiǎn)單，不需要Java編譯器，而是直接運(yùn)行在Web瀏覽器中，而因倍受Web設(shè)計(jì)者的所愛(ài)。　　這一套JavaScript教程分九個(gè)章節(jié)從什么是JavaScript、JavaScript的簡(jiǎn)單應(yīng)用一直介紹到如何用JavaScript實(shí)現(xiàn)復(fù)雜的交互，對(duì)于JavaScript初學(xué)者和進(jìn)階者來(lái)說(shuō)，都是一部不可多得的優(yōu)秀教程。

　　JavaScript教程語(yǔ)言概況

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

二、JavaScript和Java的區(qū)別

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

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

　　從上面的實(shí)例分析中我們可以看出，編寫一個(gè)JavaScript程序確實(shí)非常容易的。 JavaScript基本數(shù)據(jù)結(jié)構(gòu) 　　JavaScript提供腳本語(yǔ)言的編程與C++非常相似，它只是去掉了Ｃ語(yǔ)言中有關(guān)指針等容易產(chǎn)生的錯(cuò)誤，并提供了功能強(qiáng)大的類庫(kù)。對(duì)于已經(jīng)具備Ｃ++或Ｃ語(yǔ)言的人來(lái)說(shuō)，學(xué)習(xí)JavaScript腳本語(yǔ)言是一件非常輕松愉快的事。
　　一、JavaScript代碼的加入
　　JavaScript的腳本包括在HTML中，它成為HTML文檔的一部分。與HTML標(biāo)識(shí)相結(jié)合，構(gòu)成了一個(gè)功能強(qiáng)大的Internet網(wǎng)上編程語(yǔ)言?？梢灾苯訉avaScript腳本加入文檔：
<Script Language ="JavaScript">
JavaScript語(yǔ)言代碼；
JavaScript 語(yǔ)言代碼;
....
</Script>
　　說(shuō)明：
　通過(guò)標(biāo)識(shí)<Script>...</Script>指明JavaScript腳本源代碼將放入其間。
　通過(guò)屬性Language ="JavaScript"說(shuō)明標(biāo)識(shí)中是使用的何種語(yǔ)言，這里是JavaScript語(yǔ)言, 表示在JavaScript中使用的語(yǔ)言。
　　下面是將JavaScript腳本加入Web文檔中的例子:
Test2.html
<HTML>
<Head>
<Script Language ="JavaScript">
document. Write("這是賽迪網(wǎng)互動(dòng)學(xué)校");
document. close();
</Script>
</Head>
</HTML>
　　在瀏覽器的窗口中調(diào)用test2.html，則顯示“這是賽迪網(wǎng)互動(dòng)學(xué)校”字串。見(jiàn)圖2所示。

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

三、表達(dá)式和運(yùn)算符
　　１、表達(dá)式
　　在定義完變量后，就可以對(duì)它們進(jìn)行賦值、改變、計(jì)算等一系列操作，這一過(guò)程通常又叫稱一個(gè)叫表達(dá)式來(lái)完成，可以說(shuō)它是變量、常量、布爾及運(yùn)算符的集合，因此表達(dá)式可以分為算術(shù)表述式、字串表達(dá)式、賦值表達(dá)式以及布爾表達(dá)式等。
　　２、運(yùn)算符
　　運(yùn)算符完成操作的一系列符號(hào)，在JavaScript中有算術(shù)運(yùn)算符，如＋、-、*、/等；有比較運(yùn)算符如!＝、＝＝等; 有邏輯布爾運(yùn)算符如！（取反）、|、||; 有字串運(yùn)算如＋、＋＝等。
　　在JavaScript主要有雙目運(yùn)算符和單目運(yùn)算符。其雙目運(yùn)算符由下列組成：
操作數(shù)１運(yùn)算符操作數(shù)２
　　即由兩個(gè)操作數(shù)和一個(gè)運(yùn)算符組成。如50＋40、"This"+"that"等。單目運(yùn)算符，只需一個(gè)操作數(shù)，其運(yùn)算符可在前或后。
（１）算術(shù)運(yùn)算符
　　JavaScript中的算術(shù)運(yùn)算符有單目運(yùn)算符和雙目運(yùn)算符。
雙目運(yùn)算符：
+（加）、-（減）、 *（乘）、 /（除）、 %（取模）、|（按位或）、&(按位與)、<<（左移）、 >>（右移）、 >>>（右移，零填充）。
單目運(yùn)算符：
-（取反）、~（取補(bǔ)）、++（遞加1）、--（遞減1）。
（２）比較運(yùn)算符
　　比較運(yùn)算符它的基本操作過(guò)程是，首先對(duì)它的操作數(shù)進(jìn)行比較，爾后再返回一個(gè)true或False值，有８個(gè)比較運(yùn)算符:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。
（３）布爾邏輯運(yùn)算符
　　在JavaScript中增加了幾個(gè)布爾邏輯運(yùn)算符:
!（取反)、&=（與之后賦值）、 &（邏輯與）、 |=（或之后賦值）、 |（邏輯或）、 ^=（異或之后賦值）、 ^（邏輯異或）、 ?:（三目操作符）、||（或）、==(等于)、|=(不等于)。
　　其中三目操作符主要格式如下：
操作數(shù)？結(jié)果１：結(jié)果２
　　若操作數(shù)的結(jié)果為真，則表述式的結(jié)果為結(jié)果１，否則為結(jié)果２。
　　四、范例
　　下面是一個(gè)跑馬燈效果的JavaScript文檔。
Test2_1.html
<html>
<head>
<script Language="JavaScript">
var msg="這是一個(gè)跑馬燈效果的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頁(yè)面, 并學(xué)習(xí)了JavaScript語(yǔ)言中的基本數(shù)據(jù)類型、變量、常量、操作運(yùn)算符等?？梢钥闯?#xff0c;對(duì)于已經(jīng)掌握Ｃ＋＋語(yǔ)言的人來(lái)說(shuō)，學(xué)習(xí)JavaScript真是一件非常輕松愉快的事。
JavaScript程序構(gòu)成

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

</Script>
</HEAD>
<BODY??>
<a href="test.htm">調(diào)用</a>
</BODY>
</HTML>
　
范例2：這是一個(gè)獲取瀏覽器版本號(hào)的程序。該程序首先顯示一個(gè)波浪一提示信息。之后顯示瀏覽器的版本號(hào)有關(guān)信息。
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("這是一個(gè)獲取WEB瀏覽器的程序"))
document.write("</CENTER></font>")
document.write("瀏覽器名稱: "+navigator.appName+"<br>");
document.write("版本號(hào): "+navigator.appVersion+"<br>");
document.write("代碼名字: "+navigator.appCodeName+"<br>");
document.write("用戶代理標(biāo)識(shí): "+navigator.userAgent);
</script>
<body>
</body>
</html>
輸出結(jié)果圖1所示。
圖1
　　本講介紹了JavaScript程序設(shè)計(jì)的有關(guān)內(nèi)容。程序流、函數(shù)、事件是我們學(xué)習(xí)掌握J(rèn)avaScript編程的重點(diǎn)。
基于對(duì)象的JavaScript語(yǔ)言
　　JavaScript語(yǔ)言是基于對(duì)象的（Object-Based），而不是面向?qū)ο蟮?#xff08;object-oriented）。之所以說(shuō)它是一門基于對(duì)象的語(yǔ)言，主要是因?yàn)樗鼪](méi)有提供象抽象、繼承、重載等有關(guān)面向?qū)ο笳Z(yǔ)言的許多功能。而是把其它語(yǔ)言所創(chuàng)建的復(fù)雜對(duì)象統(tǒng)一起來(lái)，從而形成一個(gè)非常強(qiáng)大的對(duì)象系統(tǒng)。
　　　　雖然JavaScript語(yǔ)言是一門基于對(duì)象的，但它還是具有一些面向?qū)ο蟮幕咎卣?。它可以根?jù)需要?jiǎng)?chuàng)建自己的對(duì)象，從而進(jìn)一步擴(kuò)大JavaScript的應(yīng)用范圍，增強(qiáng)編寫功能強(qiáng)大的Web文檔。
一、對(duì)象的基礎(chǔ)知識(shí)
1、對(duì)象的基本結(jié)構(gòu)
　　JavaScript中的對(duì)象是由屬性(properties)和方法(methods)兩個(gè)基本的元素的構(gòu)成的。前者是對(duì)象在實(shí)施其所需要行為的過(guò)程中，實(shí)現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)；后者是指對(duì)象能夠按照設(shè)計(jì)者的意圖而被執(zhí)行，從而與特定的函數(shù)相聯(lián)。
2、引用對(duì)象的途徑
　　一個(gè)對(duì)象要真正地被使用，可采用以下幾種方式獲得：
　　o 引用JavaScript內(nèi)部對(duì)象；
　　o 由瀏覽器環(huán)境中提供；
　　o 創(chuàng)建新對(duì)象。
　　這就是說(shuō)一個(gè)對(duì)象在被引用之前，這個(gè)對(duì)象必須存在，否則引用將毫無(wú)意義，而出現(xiàn)錯(cuò)誤信息。從上面中我們可以看出JavaScript引用對(duì)象可通過(guò)三種方式獲取。要么創(chuàng)建新的對(duì)象，要么利用現(xiàn)存的對(duì)象。
３、有關(guān)對(duì)象操作語(yǔ)句
　　JavaScript不是一純面向?qū)ο蟮恼Z(yǔ)言，它設(shè)有提供面向?qū)ο笳Z(yǔ)言的許多功能，因此JavaScript設(shè)計(jì)者之所以把它你“基于對(duì)象”而不是面向?qū)ο蟮恼Z(yǔ)言，在JavaScript中提供了幾個(gè)用于操作對(duì)象的語(yǔ)句和關(guān)鍵字及運(yùn)算符。
（1） For...in語(yǔ)句
格式如下：
For（對(duì)象屬性名 in 已知對(duì)象名）
說(shuō)明：
o 該語(yǔ)句的功能是用于對(duì)已知對(duì)象的所有屬性進(jìn)行操作的控制循環(huán)。它是將一個(gè)已知對(duì)象的所有屬性反復(fù)置給一個(gè)變量；而不是使用計(jì)數(shù)器來(lái)實(shí)現(xiàn)的。
o 該語(yǔ)句的優(yōu)點(diǎn)就是無(wú)需知道對(duì)象中屬性的個(gè)數(shù)即可進(jìn)行操作。
例：下列函數(shù)是顯示數(shù)組中的內(nèi)容：
Function showData(object)
for (var X=0; X<30;X++)
document.write(object)；
該函數(shù)是通過(guò)數(shù)組下標(biāo)順序值，來(lái)訪問(wèn)每個(gè)對(duì)象的屬性，使用這種方式首先必須知道數(shù)組的下標(biāo)值，否則若超出范圍，則就會(huì)發(fā)生錯(cuò)誤。而使For...in語(yǔ)句，則根本不需要知道對(duì)象屬性的個(gè)數(shù)，見(jiàn)下：
Function showData(object)
for(var prop in object)
document.write(object[prop])；
使用該函數(shù)時(shí)，在循環(huán)體中，For自動(dòng)將的屬性取出來(lái)，直到最后為此。
（2） with語(yǔ)句
使用該語(yǔ)句的意思是：在該語(yǔ)句體內(nèi)，任何對(duì)變量的引用被認(rèn)為是這個(gè)對(duì)象的屬性，以節(jié)省一些代碼。
with object{
...}
所有在with語(yǔ)句后的花括號(hào)中的語(yǔ)句，都是在后面object對(duì)象的作用域的。
（3） this關(guān)鍵字
this是對(duì)當(dāng)前的引用，在JavaScript由于對(duì)象的引用是多層次，多方位的，往往一個(gè)對(duì)象的引用又需要對(duì)另一個(gè)對(duì)象的引用，而另一個(gè)對(duì)象有可能又要引用另一個(gè)對(duì)象，這樣有可能造成混亂，最后自己已不知道現(xiàn)在引用的那一個(gè)對(duì)象，為此JavaScript提供了一個(gè)用于將對(duì)象指定當(dāng)前對(duì)象的語(yǔ)句this。
（4） New運(yùn)算符
雖然在JavaScript中對(duì)象的功能已經(jīng)是非常強(qiáng)大的了。但更強(qiáng)大的是設(shè)計(jì)人員可以按照需求來(lái)創(chuàng)建自己的對(duì)象，以滿足某一特定的要求。使用New運(yùn)算符可以創(chuàng)建一個(gè)新的對(duì)象。其創(chuàng)建對(duì)象使用如下格式：
Newobject=NEW Object(Parameters table);
其中Newobject創(chuàng)建的新對(duì)象：object是已經(jīng)存在的對(duì)象； parameters table參數(shù)表；new是JavaScript中的命令語(yǔ)句。
如創(chuàng)建一個(gè)日期新對(duì)象
newData=New Data()
birthday=New Data (December 12.1998)
之后就可使NewData、birthday作為一個(gè)新的日期對(duì)象了。
　
４、對(duì)象屬性的引用
　　對(duì)象屬性的引用可由下列三種方式之一實(shí)現(xiàn)：
（1）使用點(diǎn)（.）運(yùn)算符
university.Name=“云南省”
university.city=“昆明市”
university.Date="1999"
其中university是一個(gè)已經(jīng)存在的對(duì)象，Name、City、Date是它的三個(gè)屬性，并通過(guò)操作對(duì)其賦值。
（2）通過(guò)對(duì)象的下標(biāo)實(shí)現(xiàn)引用
university[0]=“云南”
university[1]=“昆明市”
university[2]="1999"
通過(guò)數(shù)組形式的訪問(wèn)屬性，可以使用循環(huán)操作獲取其值。
function showunievsity(object)
for (var j=0;j<2; j++)
document.write(object[j])
若采用For...in則可以不知其屬性的個(gè)數(shù)后就可以實(shí)現(xiàn)：
Function showmy(object)
for (var prop in this)
docament.write(this[prop]);
（3）通過(guò)字符串的形式實(shí)現(xiàn)
university["Name"]=“云南”
university["City"]=“昆明市”
university["Date"]="1999"

５、對(duì)象的方法的引用
在JavaScript中對(duì)象方法的引用是非常簡(jiǎn)單的。
ObjectName.methods()
實(shí)際上methods()=FunctionName方法實(shí)質(zhì)上是一個(gè)函數(shù)。如引用university對(duì)象中的showmy（）方法，則可使用：
document.write (university.showmy())
或：document.write(university)
如引用math內(nèi)部對(duì)象中cos()的方法
則：
with(math)
document.write(cos(35));
document.write(cos(80));
若不使用with則引用時(shí)相對(duì)要復(fù)雜些：
document.write(Math.cos(35))
document.write(math.sin(80))
二、常用對(duì)象的屬性和方法
　　JavaScript為我們提供了一些非常有用的常用內(nèi)部對(duì)象和方法。用戶不需要用腳本來(lái)實(shí)現(xiàn)這些功能。這正是基于對(duì)象編程的真正目的。
　　在JavaScript提供了string（字符串）、math（數(shù)值計(jì)算）和Date（日期）三種對(duì)象和其它一些相關(guān)的方法。從而為編程人員快速開(kāi)發(fā)強(qiáng)大的腳本程序提供了非常有利的條件。
1、常用內(nèi)部對(duì)象
　　在JavaScript中對(duì)于對(duì)象屬性與方法的引用，有兩種情況：其一是說(shuō)該對(duì)象是靜態(tài)對(duì)象，即在引用該對(duì)象的屬性或方法時(shí)不需要為它創(chuàng)建實(shí)例；而另一種對(duì)象則在引用它的對(duì)象或方法是必須為它創(chuàng)建一個(gè)實(shí)例，即該對(duì)象是動(dòng)態(tài)對(duì)象。
　　對(duì)JavaScript內(nèi)部對(duì)象的引用，以是緊緊圍繞著它的屬性與方法進(jìn)行的。因而明確對(duì)象的靜動(dòng)性對(duì)于掌握和理解JavaScript內(nèi)部對(duì)象是具有非常重要的意義。
１)、串對(duì)象
　　o string對(duì)象：內(nèi)部靜態(tài)性。
　　o 訪問(wèn)properties和methods時(shí)，可使用（.）運(yùn)算符實(shí)現(xiàn)。
　　o 基本使用格式：objectName.prop/methods
（１）串對(duì)象的屬性
　　該對(duì)象只有一個(gè)屬性，即length。它表明了字符串中的字符個(gè)數(shù)，包括所有符號(hào)。
例：
mytest="This is a JavaScript"
mystringlength=mytest.length
　　最后mystringlength返回mytest字串的長(zhǎng)度為20。
（２）串對(duì)象的方法
　　string對(duì)象的方法共有１９個(gè)。主要用于有關(guān)字符串在Web頁(yè)面中的顯示、字體大小、字體顏色、字符的搜索以及字符的大小寫轉(zhuǎn)換。
其主要方法如下：
　　o 錨點(diǎn)anchor()：該方法創(chuàng)建如用Html文檔中一樣的anchor標(biāo)記。使用anchor如用Html中(A Name="")一樣。通過(guò)下列格式訪問(wèn):string.anchor(anchorName)。
　　o 有關(guān)字符顯示的控制方法
big字體顯示, Italics()斜體字顯示，bold()粗體字顯示，blink()字符閃爍顯示，small（）字符用小體字顯示，fixed()固定高亮字顯示、fontsize(size)控制字體大小等。
　　o 字體顏色方法；fontcolor(color)
　　o 字符串大小寫轉(zhuǎn)換
toLowerCase()－小寫轉(zhuǎn)換，toUpperCase()大寫轉(zhuǎn)換。下列把一個(gè)給定的串分別轉(zhuǎn)換成大寫和小寫格式:
string=stringValue.toUpperCase和string=stringValue.toLowerCase。
　　o 字符搜索：indexOf[charactor,fromIndex]
從指定formIndtx位置開(kāi)始搜索charactor第一次出現(xiàn)的位置。
返回字串的一部分字串：substring(start,end)
從start開(kāi)始到end的字符全部返回。
　
２)、算術(shù)函數(shù)的math對(duì)象
　功能：提供除加、減、乘、除以外的一引些自述運(yùn)算。如對(duì)數(shù)，平方根等。
　靜動(dòng)性：靜態(tài)對(duì)象
（１）主要屬性
　　math中提供了６個(gè)屬性，它們是數(shù)學(xué)中經(jīng)常用到的常數(shù)Ｅ、以１０為底的自然對(duì)數(shù)ＬＮ１０、以２為底的自然對(duì)數(shù)LN2、3.14159的PI、1/2的平方根SQRT1-2,2的平方根為SQRT2。
（２）主要方法
　絕對(duì)值：abs()
　正弦余弦值：sin(),cos()
　反正弦反余弦 :asin(), acos()
　正切反正切：tan(),atan()
　四舍五入：round()
　平方根：sqrt()
　基于幾方次的值：Pow(base,exponent)
...
３)、日期及時(shí)間對(duì)象
　功能：提供一個(gè)有關(guān)日期和時(shí)間的對(duì)象。
　靜動(dòng)性：動(dòng)態(tài)性，即必須使用New運(yùn)算符創(chuàng)建一個(gè)實(shí)例。例:
MyDate=New Date()
Date對(duì)象沒(méi)有提供直接訪問(wèn)的屬性。只具有獲取和設(shè)置日期和時(shí)間的方法。
　日期起始值:１７７０年１月１日００:００:００。
1. 獲取日期的時(shí)間方法
　getYear(): 返回年數(shù)
　getMonth():返回當(dāng)月號(hào)數(shù)
　getDate(): 返回當(dāng)日號(hào)數(shù)
　getDay():返回星期幾
　getHours():返回小時(shí)數(shù)
　getMintes(:返回分鐘數(shù)
　getSeconds():返回秒數(shù)
　getTime() : 返回毫秒數(shù)
（２）設(shè)置日期和時(shí)間：
　setYear();設(shè)置年
　setDate():設(shè)置當(dāng)月號(hào)數(shù)
　setMonth():設(shè)置當(dāng)月份數(shù)
　setHours():設(shè)置小時(shí)數(shù)
　setMintes():設(shè)置分鐘數(shù)
　setSeconds():設(shè)置秒數(shù)
　setTime ():設(shè)置毫秒數(shù)
...
2、JavaScript中的系統(tǒng)函數(shù)
　　JavaScript中的系統(tǒng)函數(shù)又稱內(nèi)部方法。它提供了與任何對(duì)象無(wú)關(guān)的系統(tǒng)函數(shù)，使用這些函數(shù)不需創(chuàng)建任何實(shí)例,可直接用。
1．返回字符串表達(dá)式中的值：
　方法名：eval（字串表達(dá)式），例：
test=eval("8+9+5/2");
2. 返回字符串ASCI碼：
　方法名：unEscape (string)
3．返回字符的編碼：
　方法名：escape(character)
4．返回實(shí)數(shù)：
parseFloat(floustring);
5．返回不同進(jìn)制的數(shù)：
parseInt(numbestring ,rad.X)
其中radix是數(shù)的進(jìn)制，numbs字符串?dāng)?shù)

三、范例
下面是一個(gè)時(shí)鐘顯示的JavaScript文檔。在文檔中用了非常多的函數(shù)。
Test4_1.htm
<html>
<head>
<style TYPE="text/css">
<style>
</style>
<title>時(shí)鐘</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="宋體">時(shí)鐘</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>
　　本講介紹了基于對(duì)象的JavaScript中常用內(nèi)部對(duì)象屬性、方法的使用。
在JavaScript中創(chuàng)建新對(duì)象
　　使用JavaScript可以創(chuàng)建自己的對(duì)象。雖然JavaScript內(nèi)部和瀏覽器本身的功能已十分強(qiáng)大，但JavaScript還是提供了創(chuàng)建一個(gè)新對(duì)象的方法。使其不必像超文本標(biāo)識(shí)語(yǔ)言那樣，求于或其它多媒體工具，就能完成許多復(fù)雜的工作。
　　在JavaScript中創(chuàng)建一個(gè)新的對(duì)象是十分簡(jiǎn)單的。首先它必須定義一個(gè)對(duì)象，而后再為該對(duì)象創(chuàng)建一個(gè)實(shí)例。這個(gè)實(shí)例就是一個(gè)新對(duì)象，它具有對(duì)象定義中的基本特征。
一、對(duì)象的定義
JavaScript對(duì)象的定義，其基本格式如下：
Function Object（屬性表）
This.prop1=prop1
This.prop2=prop2
...
This.meth=FunctionName1;
This.meth=FunctionName2;
...
在一個(gè)對(duì)象的定義中，可以為該對(duì)象指明其屬性和方法。通過(guò)屬性和方法構(gòu)成了一個(gè)對(duì)象的實(shí)例。如以下是一個(gè)關(guān)于University對(duì)象的定義：
Function university(name,city,creatDate URL)
This.name=name
This.city=city
This.creatDate=New Date(creatDate)
This.URL=URL
其基本含義如下：
Name－指定一個(gè)“單位”名稱。　
City－“單位”所在城市。　
CreatDate－記載university對(duì)象的更新日期。　
URL－該對(duì)象指向一個(gè)網(wǎng)址。
二、創(chuàng)建對(duì)象實(shí)例
一旦對(duì)象定義完成后，就可以為該對(duì)象創(chuàng)建一個(gè)實(shí)例了：
NewObject=New object();
其中Newobjet是新的對(duì)象，Object已經(jīng)定義好的對(duì)象。例：
U1=New university(“云南省”，“昆明市”，"January 05,199712:00:00","http://www.YN.KM")
U2=New university(“云南電子科技大學(xué)”，“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")
　
三、對(duì)象方法的使用
在對(duì)象中除了使用屬性外，有時(shí)還需要使用方法。在對(duì)象的定義中，我們看到This.meth=FunctionName語(yǔ)句，那就是為定義對(duì)象的方法。實(shí)質(zhì)對(duì)象的方法就是一個(gè)函數(shù)FunctionName，通過(guò)它實(shí)現(xiàn)自己的意圖。
例在university對(duì)象中增加一個(gè)方法，該方法是顯示它自己本身，并返回相應(yīng)的字串。
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就是定義了一個(gè)方法－－－showuniversity()。
而showuniversity()方法是實(shí)現(xiàn)university對(duì)象本身的顯示。
function showuniversity()
For (var prop in this)
alert(prop+="+this[prop]+"");
其中alert是JavaScript中的內(nèi)部函數(shù)，顯示其字符串。
四、JavaScript中的數(shù)組　
使用New創(chuàng)建數(shù)組
JavaScript中沒(méi)有提供像其它語(yǔ)言具有明顯的數(shù)組類型，但可以通過(guò)function定義一個(gè)數(shù)組，并使用New對(duì)象操作符創(chuàng)建一個(gè)具有下標(biāo)的數(shù)組。從而可以實(shí)現(xiàn)任何數(shù)據(jù)類型的存儲(chǔ)。
a、定義對(duì)象的數(shù)組
Function arrayName(size){
This.length=Size;
for(var X=; X<=size;X++)
this[X]=0;
Reture this;
}
其中arrayName是定義數(shù)組的一個(gè)名子，Size是有關(guān)數(shù)組大小的值（1-size），即數(shù)組元素的個(gè)數(shù)。通過(guò)for循環(huán)對(duì)一個(gè)當(dāng)前對(duì)象的數(shù)組進(jìn)行定義，最后返回這個(gè)數(shù)組。
從中可以看出，JavaScript中的數(shù)組是從1到size，這與其它０到size的數(shù)組表示方法有所不同，當(dāng)然你可根據(jù)需要將數(shù)組的下標(biāo)由１到size調(diào)整到０到size－１,可由下列實(shí)現(xiàn):
Function arrayName (size)
For (var X=0; X<=size;X++)
this[X]=0;
this.lenght=size;
Return this;
從上面可以看出該方法是只是調(diào)整了this.lenght的位置，該位置是用于存儲(chǔ)數(shù)組的大小的。從而調(diào)整后的數(shù)組的下標(biāo)將與其它語(yǔ)言一致。但請(qǐng)讀者注意正是由于數(shù)組下標(biāo)順序由１到size，使得JavaScript中的對(duì)象功能更加強(qiáng)大。
b、創(chuàng)建數(shù)組實(shí)例
一個(gè)數(shù)組定義完成以后，還不能馬上使用，必須為該數(shù)組創(chuàng)建一個(gè)數(shù)組實(shí)例：
Myarray=New arrayName(n);
并賦于初值：
Myarray[1]=“字串１”；
Myarray[2]=“字串２”；
Myarray[3]=“字串３”；
...
Myarray[n]=“字串n”；
一旦給數(shù)組賦于了初值后，數(shù)組中就具有真正意義的數(shù)據(jù)了，以后就可以在程序設(shè)計(jì)過(guò)程中直接引用。
創(chuàng)建多維數(shù)組
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();
之后可通過(guò)myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、
…來(lái)引用。
內(nèi)部數(shù)組
在Java中為了方便內(nèi)部對(duì)象的操作,可以使用窗體(Forms)、框架(Frames)、元素(element)、鏈接(links)和錨(Anchors)數(shù)組實(shí)現(xiàn)對(duì)象的訪問(wèn)。
　anchors[]:使用《A name=“anchorName“》標(biāo)識(shí)來(lái)建立錨的鏈接。
　links[]: 使用<A href=http://www.cnblogs.com/”URL”>來(lái)定義一個(gè)越文本鏈接項(xiàng)。
　Forms[]: 在程序中使用多窗體時(shí),建立該數(shù)組。
　Elements[]:在一個(gè)窗口中使用從個(gè)元素時(shí),建立該數(shù)組。
　Frames[]:建立框架時(shí),使用該數(shù)組
　anchors[]用于窗體的訪問(wèn)(它是通過(guò)《form name=“form1”》所指定的),link[]用于被鏈接到的錨點(diǎn)的訪問(wèn)(它是通過(guò)《a href=http://www.cnblogs.com/URL》所指定的)。Forms[]反映窗體的屬性,而anchors[]反映Web頁(yè)面中的鏈接屬性。
有關(guān)錨數(shù)組的文檔：
<HTML>
<HEAD>
<BODY>
<A NAME=”MyAnchorsName1”> 定義第一個(gè)錨名
HTML Code
<A NAME=”MyAnchorsName2”> 定義第二個(gè)錨名
HTML Code
<A HREF=http://www.cnblogs.com/”#MyAnchorsName1”>建立錨的鏈接
<A HREF=http://www.webjx.com/htmldata/2005-02-26/”#MyAnchorsName2?gt; 建立錨的鏈接
….
該文檔段建立了兩面全錨的鏈接,可通過(guò)Anchors[]訪問(wèn)這些錨。document.Anchors[0]反映第一個(gè)錨,而document.Anchors[1]反映第二個(gè)錨的有關(guān)信息。
五、范例
范例1：一個(gè)動(dòng)態(tài)文字滾動(dòng)的例子。
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>
　
　　本講介紹了用戶自行創(chuàng)建對(duì)象的方法, 用戶可根據(jù)需要?jiǎng)?chuàng)建自己的對(duì)象。并介紹了JavaScript中建數(shù)組的方法。
vJavaScript對(duì)象系統(tǒng)的使用　　使用瀏覽器的內(nèi)部對(duì)象系統(tǒng), 可實(shí)現(xiàn)與HTML文檔進(jìn)行交互。它的作用是將相關(guān)元素組織包裝起來(lái)，提供給程序設(shè)計(jì)人員使用，從而減輕編程人的勞動(dòng)，提高設(shè)計(jì)Web頁(yè)面的能力。
一、瀏覽器對(duì)象層次及其主要作用
　　除了前面提到過(guò)的文檔document對(duì)象外，Navigator瀏覽器中還提供了窗口（Window）對(duì)象以及歷史（History）和位置（Location）對(duì)象。
　　瀏覽器對(duì)象(Navigator)
　　　　提供有關(guān)瀏覽器的信息
　　窗口對(duì)象(Windows)
　　　　Window對(duì)象處于對(duì)象層次的最頂端，它提供了處理Navigator窗口的方法和屬性。
　　位置對(duì)象(Location)
　　　　Location對(duì)象提供了與當(dāng)前打開(kāi)的URL一起工作的方法和屬性，它是一個(gè)靜態(tài)的對(duì)象。
　　歷史對(duì)象(History)
　　　　History對(duì)象提供了與歷史清單有關(guān)的信息。
　　文檔對(duì)象(Document)
　　　　document對(duì)象包含了與文檔元素(elements)一起工作的對(duì)象，它將這些元素封裝起來(lái)供編程人員使用。
　　編程人員利用這些對(duì)象，可以對(duì)WWW瀏覽器環(huán)境中的事件進(jìn)行控制并作出處理。在JavaScript中提供了非常豐富的內(nèi)部方法和屬性,從而減輕了編程人員的工作,提高編程效率。這正是基于對(duì)象與面向?qū)ο蟮母緟^(qū)別所在。在這些對(duì)象系統(tǒng)中,文檔對(duì)象屬于非常重要的,它位于最低層,但對(duì)于我們實(shí)現(xiàn)Web頁(yè)面信息交互起作關(guān)鍵作用。因而它是對(duì)象系統(tǒng)的核心部分。
二、文檔對(duì)象功能及其作用
　　在Navigator瀏覽器中，document文檔對(duì)象是核心是，同時(shí)也是最重要的。見(jiàn)表6-1所示。
LinksAnchor FormMethod Prop 鏈接對(duì)象錨對(duì)象窗體對(duì)象方法對(duì)象

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

</Script>
</BODY>
</HTML>
從上面程序可以看出：
　可通過(guò)write()和prompt()方法實(shí)現(xiàn)交互。
　在JavaScript腳本語(yǔ)言中可以使用HTML標(biāo)識(shí)語(yǔ)言的代碼。從而實(shí)現(xiàn)混合編程。其中<H1>和<Br>就是HTML標(biāo)識(shí)符。
三、范例
下列程序演示了你進(jìn)入主頁(yè)所停留的時(shí)間。
test7_2.htm
<html>
<form name="myform">
<td vAlign="top" width="135">您在此停留了：
<input name="clock" size="8" value="在線時(shí)間"></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>
在瀏覽器中的結(jié)果，見(jiàn)圖2所示。
用JavaScript腳本實(shí)現(xiàn)Web頁(yè)面信息交互

　　要實(shí)現(xiàn)動(dòng)態(tài)交互，必須掌握有關(guān)窗體對(duì)象(Form)和框架對(duì)象(Frames)更為復(fù)雜的知識(shí)。
一、窗體基礎(chǔ)知識(shí)
　　窗體對(duì)象可以使設(shè)計(jì)人員能用窗體中不同的元素與客戶機(jī)用戶相交互，而用不著在之前首先進(jìn)行數(shù)據(jù)輸入，就可以實(shí)現(xiàn)動(dòng)態(tài)改變Web文檔的行為。
１、什么是窗體對(duì)象
窗體（Form）:它構(gòu)成了Web頁(yè)面的基本元素。通常一個(gè)Web頁(yè)面有一個(gè)窗體或幾個(gè)窗體，使用Forms[]數(shù)組來(lái)實(shí)現(xiàn)不同窗體的訪問(wèn)。
<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]中共有三個(gè)基本元素，而Forms[1]中只有兩個(gè)元素。
　　窗體對(duì)象最主要的功能就是能夠直接訪問(wèn)HTML文檔中的窗體，它封裝了相關(guān)的HTML代碼：
<Form
Name ="表的名稱"
Target ="指定信息的提交窗口"
action ="接收窗體程序?qū)?yīng)的URL"
Method =信息數(shù)據(jù)傳送方式(get/post)
enctype ="窗體編碼方式"
[onsubmit ="JavaScript代碼"]>
</Form>
　
２、窗體對(duì)象的方法
　　窗體對(duì)象的方法只有一個(gè)--submit()方法，該方法主要功用就是實(shí)現(xiàn)窗體信息的提交。如提交Mytest窗體,則使用下列格式：
document.mytest.submit()
　
３、窗體對(duì)象的屬性
　　窗體對(duì)象中的屬性主要包括以下：elements name action target encoding method.
　　除Elements外，其它幾個(gè)均反映了窗體中標(biāo)識(shí)中相應(yīng)屬性的狀態(tài)，這通常是單個(gè)窗體標(biāo)識(shí)；而elements常常是多個(gè)窗體元素值的數(shù)組，例：
elements[0].Mytable.elements[1]
　
４、訪問(wèn)窗體對(duì)象
在JavaScript中訪問(wèn)窗體對(duì)象可由兩種方法實(shí)現(xiàn)：
（１）通過(guò)訪問(wèn)窗體
　　在窗體對(duì)象的屬性中首先必須指定其窗體名，而后就可以通過(guò)下列標(biāo)識(shí)訪問(wèn)窗體如：document.Mytable()。
（２）通過(guò)數(shù)組來(lái)訪問(wèn)窗體
　　除了使用窗體名來(lái)訪問(wèn)窗體外，還可以使用窗體對(duì)象數(shù)組來(lái)訪問(wèn)窗體對(duì)象。但需要注意一點(diǎn)，因窗體對(duì)象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數(shù)組下標(biāo)是由0到n。所以可通過(guò)下列格式實(shí)現(xiàn)窗體對(duì)象的訪問(wèn)：
document.forms[0]
document.forms[1]
document.forms[2]...
　
５、引用窗體的先決條件
　　在JavaScript中要對(duì)窗體引用的條件是：必須先在頁(yè)面中用標(biāo)識(shí)創(chuàng)建窗體，并將定義窗體部分放在引用之前。
二、窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪問(wèn)這些基本元素，必須通過(guò)對(duì)應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來(lái)實(shí)現(xiàn)。每一個(gè)元素主要是通過(guò)該元素的屬性或方法來(lái)引用。其引用的基本格式見(jiàn)下:
formName.elements[].methadName (窗體名.元素名或數(shù)組.方法)
formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)
　
下面分別介紹：
　
１、Text單行單列輸入元素
　功能：對(duì)Text標(biāo)識(shí)中的元素實(shí)施有效的控制。
　基本屬性：
Name：設(shè)定提交信息時(shí)的信息名稱。對(duì)應(yīng)于HTML文檔中的Name。
Value：用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng)HTML文檔中Value的信息。
defaultvalue：包括Text元素的默認(rèn)值
　基本方法：
blur()：將當(dāng)前焦點(diǎn)移到后臺(tái)。
select()：加亮文字。
　主要事件：
onFocus：當(dāng)Text獲得焦點(diǎn)時(shí)，產(chǎn)生該事件。
OnBlur：從元素失去焦點(diǎn)時(shí)，產(chǎn)生該事件。
Onselect：當(dāng)文字被加亮顯示后，產(chǎn)生該文件。
onchange：當(dāng)Text元素值改變時(shí)，產(chǎn)生該文件。
例：...
<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多行多列輸入元素
　功能：實(shí)施對(duì)Textarea中的元素進(jìn)行控制。
　基本屬性
name：設(shè)定提交信息時(shí)的信息名稱，對(duì)應(yīng)HTML文檔Textarea的Name。
Value：用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng)HTML文檔中Value的信息。
Default value：元素的默認(rèn)值。
　方法：
blur()：將輸入焦點(diǎn)失去
select()：將文字加亮后
　事件：
onBlur:當(dāng)失去輸入焦點(diǎn)后產(chǎn)生該事件
onFocus:當(dāng)輸入獲得焦點(diǎn)后，產(chǎn)生該文件
Onchange:當(dāng)文字值改變時(shí)，產(chǎn)生該事件
Onselect:當(dāng)文字加亮后，產(chǎn)生該文件
　
３、Select選擇元素
　功能：實(shí)施對(duì)滾動(dòng)選擇元素的控制。
　屬性：
name:設(shè)定提交信息時(shí)的信息名稱，對(duì)應(yīng)文檔select中的name。
Length:對(duì)應(yīng)文檔select中的length
options:組成多個(gè)選項(xiàng)的數(shù)組
selectIndex;該下標(biāo)指明一個(gè)選項(xiàng)
select在中每一選項(xiàng)都含有以下屬性：
Text:選項(xiàng)對(duì)應(yīng)的文字
selected:指明當(dāng)前選項(xiàng)是否被選中
Index:指明當(dāng)前選項(xiàng)的位置
defaultselected:默認(rèn)選項(xiàng)
　
　事件：
OnBlur：當(dāng)select選項(xiàng)失去焦點(diǎn)時(shí)，產(chǎn)生該文件。
onFocas:當(dāng)select獲得焦點(diǎn)時(shí)，產(chǎn)生該文件。
Onchange:選項(xiàng)狀態(tài)改變后，產(chǎn)生該事件。
　
４、Button按鈕
　功能：實(shí)施對(duì)Button按鈕的控制。
　屬性：
Name:設(shè)定提交信息時(shí)的信息名稱，對(duì)應(yīng)文檔中button的Name。
Value:用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng)HTML文檔中Value的信息。
　方法：
click()該方法類似于一個(gè)按下的按鈕。
　事件：
onclick當(dāng)單擊button按鈕時(shí)，產(chǎn)生該事件。
例：
<Form name="test">
<input type="button" name="testcall" ()>
</form>
...
<script language="javascirpt">
document.elements[0].value="mytest"; //通過(guò)元素訪問(wèn)
或
document.testcallvalue="mytest"; // 通過(guò)名字訪問(wèn)
</script>
.....
　
５、checkbox檢查框
　功能：實(shí)施對(duì)一個(gè)具有復(fù)選框中元素的控制。
　屬性：
name:設(shè)定提交信息時(shí)的信息名稱。
Value:用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng)HTML文檔中Value的信息。
Checked:該屬性指明框的狀態(tài)true/false.
defauitchecked:默認(rèn)狀態(tài)
　方法：
click()該方法使得框的某一個(gè)項(xiàng)被選中。
　事件：
onclick:當(dāng)框的選被選中時(shí)，產(chǎn)生該事件。　
６、radio無(wú)線按鈕
　功能：實(shí)施對(duì)一個(gè)具單選功能的無(wú)線按鈕控制。
　屬性：
name:設(shè)定提交信息時(shí)的信息名稱，對(duì)應(yīng)HTML文檔中的radio的name相同
value:用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng)HTML文檔中Value的信息，對(duì)應(yīng)HTML文檔中的radio的name。
length:單選按鈕中的按鈕數(shù)目。
defalechecked:默認(rèn)按鈕。
checked:指明選中還是沒(méi)有選中。
index:選中的按鈕的位置。
　方法：
chick():選定一個(gè)按鈕。
　事件：
onclick:單擊按鈕時(shí)，產(chǎn)生該事件。
　
７、hidden:隱藏
　功能：實(shí)施對(duì)一個(gè)具有不顯示文字并能輸入字符的區(qū)域元素的控制。
　屬性：
name:設(shè)定提交信息時(shí)的信息名稱，對(duì)應(yīng)HTML文檔的hidden中的Name。
Value:用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng)HTML文檔中Value的信息，對(duì)應(yīng)HTML文檔hidden中的value。
defaleitvalue:默認(rèn)值
　
８、Password口令
　功能：實(shí)施對(duì)具有口令輸入的元素的控制。
　屬性：
Name:設(shè)定提交信息時(shí)的信息名稱，對(duì)應(yīng)HTML文檔中password中的name。
Value:用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng)HTML文檔中Value的信息，對(duì)應(yīng)HTML文檔中password中的Value。
defaultvalu:默認(rèn)值
　方法
select():加亮輸入口令域。
blur():使這丟失passward輸入焦點(diǎn)。
focus():獲得password輸入焦點(diǎn)。
　
９、submit提交元素
　功能：實(shí)施對(duì)一個(gè)具有提交功能按鈕的控制。
　屬性：
name:設(shè)定提交信息時(shí)的信息名稱，對(duì)應(yīng)HTML文檔中submit。
Value:用以設(shè)定出現(xiàn)在窗口中對(duì)應(yīng)HTML文檔中Value的信息，對(duì)應(yīng)HTML文檔中value。
　方法
click()相當(dāng)于按下submit按鈕。
　事件：
onclick()當(dāng)按下該按鈕時(shí)，產(chǎn)生該事件。
三、范例
下面我們演示通過(guò)點(diǎn)擊一個(gè)按鈕（red）來(lái)改變窗口顏色，點(diǎn)擊“調(diào)用動(dòng)態(tài)按鈕文檔”調(diào)用一個(gè)動(dòng)態(tài)按鈕文檔。
test8_1.htm
<html>
<head>
<Script Language="JavaScript">
//原來(lái)的顏色
document.bgColor="blue";
document.vlinkColor="white";
document.linkColor="yellow";
document.alinkcolor="red";
//動(dòng)態(tài)改變顏色
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"> 調(diào)用動(dòng)態(tài)按鈕文檔</a>
<form >
<Input type="button" Value="red" >
</form>
</BODY>
</HTML>
輸出結(jié)果見(jiàn)圖1所示。
圖1動(dòng)態(tài)按鈕程序。
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>
輸出結(jié)果見(jiàn)圖2所示。
圖2　　本講介紹了使用JavaScript腳本實(shí)現(xiàn)Web頁(yè)面信息交互的方法。其中主要介紹了窗體中的基本元素的主要功能和使用。
用JavaScript實(shí)現(xiàn)更復(fù)雜的交互
　　一、什么是框架
　　框架Frames最主要功用是"分割"視窗，使每個(gè)"小視窗"能顯示不同的HTM L文件，不同框架之間可以互動(dòng)(interact)，這就是說(shuō)不同框架之間可以交換訊息與資料。例如:假設(shè)您開(kāi)了兩個(gè)frames，第一個(gè)frame可顯示書的目錄，第二個(gè)frame則顯示章節(jié)的具體內(nèi)容。
　　框架可以將屏幕分割成不同的區(qū)域，每個(gè)區(qū)域有自己的URL，通過(guò)Frames[]數(shù)組對(duì)象來(lái)實(shí)現(xiàn)不同框架的訪問(wèn)。實(shí)際上框架對(duì)象本身也一類窗口，它繼承了窗口對(duì)象的所有特征，并擁有所有的屬性和方法。下面我們先看一下框架的例子。見(jiàn)圖9-1所示。
圖9-1 框架對(duì)象<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標(biāo)識(shí)將屏幕分成三個(gè)框架。先將窗口分成以二行為單位的窗口，之后再按分成二個(gè)窗口。并在相應(yīng)的框架中放入自己的HTML文檔。
　　通過(guò)[Framset ]告訴瀏覽器您要設(shè)置幾個(gè)框架；rows這項(xiàng)參數(shù)告訴瀏覽器您想將視窗分割成幾列；而 cols這項(xiàng)參數(shù)是告訴瀏覽器您想將視窗分割成幾行。
　　可以用很多組的 <frameset...> tags 將視窗分割得更復(fù)雜。
　　可以給每個(gè)frame一個(gè)"名字" (name)。frame的名字在JavaScript語(yǔ)法中的地位非常重要。　　　　可以用 <src> 告訴瀏覽器您要載入哪一個(gè) HTML文件。
二、如何訪問(wèn)框架
　　在前面我們介紹過(guò)使用document.forms[]實(shí)現(xiàn)單一窗體中不同元素的訪問(wèn)。而要實(shí)現(xiàn)框架中多窗體的不同元素的訪問(wèn)，則必須使用window對(duì)象中的Frames屬性。Frames屬性同樣也是一個(gè)數(shù)組，他在　　父框架集中為每一個(gè)子框架設(shè)有一項(xiàng)。通過(guò)下標(biāo)實(shí)現(xiàn)不同框架的訪問(wèn):
parent.frames[Index1].docuement.forms
　　通過(guò)parent.frames.length確定窗口中窗體的數(shù)目。除了使用數(shù)組下標(biāo)來(lái)訪問(wèn)窗體外還可以使用框架名和窗體名來(lái)實(shí)現(xiàn)各元素的訪：
parent.framesName.decument.formNames.elementName.(m/p)
三、范例
　　下面我們通過(guò)一個(gè)具體的實(shí)例, 來(lái)說(shuō)明利用JavaScript腳本在WEB中實(shí)現(xiàn)更為復(fù)雜的信息交互。該例子是在一個(gè)多窗口中實(shí)現(xiàn)窗體信息的動(dòng)態(tài)交互,在程序中首先在瀏覽器窗口中制作三個(gè)用于窗體交互的窗口,每個(gè)窗體窗口實(shí)現(xiàn)不同信息的動(dòng)態(tài)交互。
　　tset9.html為主調(diào)用文檔它首先將窗口劃分為具有二行的窗體,爾后再將第二行的窗體劃分為具有二列的窗體；
test9-1.html為顯示標(biāo)題文檔；
test9_2.html為第二框架文檔其中需要注意的是:
通過(guò)JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”；
test7_3.html為第三框架文檔。
　主調(diào)文檔
主要作用是將窗口劃分為具有二行的窗體,爾后再將第二行的窗體劃分為具有二列的窗體。
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>
第一個(gè)框架
主要作用是顯示標(biāo)題文檔。
Test9_1.htm
<HTML>
<HEAD>
</HEAD>
<H2>使用框架實(shí)現(xiàn)WEB交互</H2>
</HTML>
　
第二個(gè)框架
主要作用是實(shí)現(xiàn)交互?？梢酝ㄟ^(guò)JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”。
Test9_2.htm
<HTML>
<HEAD>
</HEAD>
<Body>
<Form name="test9_1">
請(qǐng)選擇城市：<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="復(fù)位">
</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>
第三個(gè)框架
主要作用是實(shí)現(xiàn)交互。
Test9_3.htm
<HTML>
<HEAD>
</HEAD>
<Body>
<Form name="test9_2">
請(qǐng)輸入用戶名：
<Input Type="text" name="text1" Value="" Size=20><BR>
<HR>
請(qǐng)選擇:
<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="復(fù)位">
<BR>
</Form>
<script language="JavaScript">
document.test9_2.elements[0].value="勞動(dòng)和社會(huì)保障";
document.test9_2.elements[1].checked=true;
document.test9_2.elements[2].checked=true;
document.test9_2.elements[3].checked=false;
</script>
</Body>
</HTML>
　　在瀏覽器中的結(jié)果見(jiàn)圖9-2所示。
圖 9-2 在瀏覽器中結(jié)果　
　　本講介紹框架中的基本元素的主要功能和使用，利用JavaScript腳本可以非常方便、靈活地實(shí)現(xiàn)Web頁(yè)面更為復(fù)雜的信息交互，這是HTML標(biāo)識(shí)語(yǔ)言所不能具備的。從中可以看出JavaScript是多么的吸引眾多的Web設(shè)計(jì)人員。

轉(zhuǎn)載于:https://www.cnblogs.com/freedom831215/archive/2009/10/03/1577594.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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