我學(xué)院：JavaScript初學(xué)者入門(mén)教程.doc

第1章 JavaScript語(yǔ)言入門(mén)1 為什么學(xué)習(xí)JavaScript提要：Javascript是學(xué)習(xí)腳本語(yǔ)言的首選。她兼容性好，絕大多數(shù)瀏覽器均支持Javascript，而且她功能強(qiáng)大，實(shí)現(xiàn)簡(jiǎn)單方便，入門(mén)簡(jiǎn)單，即使是程序設(shè)計(jì)新手也可以非?？焖偃菀椎厥褂肑avaScript進(jìn)行簡(jiǎn)單的編程。Javascript是由Netscape公司創(chuàng)造的一種腳本語(yǔ)言。為便于推廣，被定為javascript，但是javascript與java是兩門(mén)不相干的語(yǔ)言，作用也不一樣。作為一門(mén)獨(dú)立的編程語(yǔ)言，javascript可以做很多的事情，但它最主流的應(yīng)用還是在Web上創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)(即網(wǎng)頁(yè)特效)。Javascript在網(wǎng)絡(luò)上應(yīng)用廣泛，幾乎所有的動(dòng)態(tài)網(wǎng)頁(yè)里都能找到它的身影。目前流行的AJAX也是依賴(lài)于Javascript而存在的。Javascript與Jscript也不是一門(mén)相同的語(yǔ)言，Jscript和vbscript是微軟開(kāi)發(fā)的兩種腳本語(yǔ)言，微軟，Netscape公司以及其他語(yǔ)言開(kāi)發(fā)商為減少web開(kāi)發(fā)者的兼容麻煩，所以成立ECMA，該組織專(zhuān)門(mén)制定腳本語(yǔ)言的標(biāo)準(zhǔn)和規(guī)范。ECMA制定的標(biāo)準(zhǔn)腳本語(yǔ)言叫做 ECMAScript，Javascript符合ECMA的標(biāo)準(zhǔn)，其實(shí)Javascript也可以叫做ECMAScript.Jscript也ECMA的標(biāo)準(zhǔn)，但用戶較少。vbscript僅局限在微軟的用戶，Netscape不支持。概括地說(shuō)，JavaScript就是一種基于對(duì)象和事件驅(qū)動(dòng)，并具有安全性能的腳本語(yǔ)言，腳本語(yǔ)言簡(jiǎn)單理解就是在客戶端的瀏覽器就可以互動(dòng)響應(yīng)處理程序的語(yǔ)言，而不需要服務(wù)器的處理和響應(yīng)，當(dāng)然JavaScript也可以做到與服務(wù)器的交互響應(yīng)，而且功能也很強(qiáng)大。而相對(duì)的服務(wù)器語(yǔ)言像asp php jsp等需要將命令上傳服務(wù)器，由服務(wù)器處理后回傳處理結(jié)果。對(duì)象和事件是JavaScript的兩個(gè)核心。JavaScript可以被嵌入到HTML文件中，不需要經(jīng)過(guò)Web服務(wù)器就可以對(duì)用戶操作作出響應(yīng)，使網(wǎng)頁(yè)更好地與用戶交互；在利用客戶端個(gè)人電腦性能資源的同時(shí)，適當(dāng)減小服務(wù)器端的壓力，并減少用戶等待時(shí)間。2 將JavaScript 插入網(wǎng)頁(yè)的方法與在網(wǎng)頁(yè)中插入CSS的方式相似，使用標(biāo)簽在網(wǎng)頁(yè)中插入Javascript代碼。使用下面的代碼可以在網(wǎng)頁(yè)中插入JavaScript： .language=javascript表示使用JavaScript腳本語(yǔ)言，腳本語(yǔ)言還有vbscript、jsscript等，如果沒(méi)有l(wèi)anguage屬性，表示默認(rèn)使用JavaScript腳本。其中的.就是代碼的內(nèi)容。例如： document.write(我是菜鳥(niǎo)我怕誰(shuí)!);JavaScript使用document.write來(lái)輸出內(nèi)容。將會(huì)輸出在網(wǎng)頁(yè)上輸出：我是菜鳥(niǎo)我怕誰(shuí)!學(xué)過(guò)編程的人應(yīng)該知道，“我是菜鳥(niǎo)我怕誰(shuí)!”兩側(cè)雙引號(hào)代表字符串的意思。不過(guò)不理解這個(gè)概念也無(wú)所謂，學(xué)到后面就知道什么時(shí)候應(yīng)該加雙引號(hào)，什么時(shí)候不需要加了。有些瀏覽器可能不支持JavaScript，我們可以使用如下的方法對(duì)它們隱藏JavaScript代碼。 里的內(nèi)容對(duì)于不支持JavaScript的瀏覽器來(lái)說(shuō)就等同于一段注釋?zhuān)鴮?duì)于支持JavaScript的瀏覽器，這段代碼仍然會(huì)執(zhí)行。至于“/”符號(hào)則是JavaScript里的注釋符號(hào)，在這里添加它是為了防止JavaScript試圖執(zhí)行-。不過(guò)通常情況下，現(xiàn)在的瀏覽器幾乎都支持JavaScript，即使是不支持的，也會(huì)了解如何合理地處理含有JavaScript的網(wǎng)頁(yè)。JavaScript的插入位置不同，效果也會(huì)有所不同，還可以像CSS一樣，將JavaScript保存成一個(gè)外部文件，這些內(nèi)容會(huì)在下一節(jié)討論。3 插入JavaScript的位置JavaScript腳本可以放在網(wǎng)頁(yè)的head里或者body部分，而且效果也不相同。（1）放在body部分的JavaScript腳本在網(wǎng)頁(yè)讀取到該語(yǔ)句的時(shí)候就會(huì)執(zhí)行，例如：（2）在head部分的腳本在被調(diào)用的時(shí)候才會(huì)執(zhí)行，例如：.通常是在.定義函數(shù)，通過(guò)調(diào)用函數(shù)來(lái)執(zhí)行head里的腳本。（3）也可以像添加外部CSS一樣添加外部JavaScript腳本文件，其后綴通常為.js。例如：如果很多網(wǎng)頁(yè)都需要包含一段相同的代碼，那么將這些代碼寫(xiě)入一個(gè)外部JavaScript文件是最好的方法。此后，任何一個(gè)需要該功能的網(wǎng)頁(yè)，只需要引入這個(gè)js文件就可以了。注意：腳本文件里頭不能再含有標(biāo)簽。注：放在body里的函數(shù)是一個(gè)例外，它并不會(huì)被執(zhí)行，而是等被調(diào)用時(shí)才會(huì)執(zhí)行。關(guān)于函數(shù)與調(diào)用的概念將在后面講到。4 JavaScript 語(yǔ)句本節(jié)介紹Javasctipt中的語(yǔ)句，語(yǔ)句是編程的一個(gè)基本概念。先來(lái)看看我們之前例子。例子中的 document.write(我是菜鳥(niǎo)我怕誰(shuí)!);就是一個(gè)JavaScript語(yǔ)句，它可以告訴瀏覽器做出一個(gè)特定任務(wù)。特別的，這個(gè)語(yǔ)句是叫瀏覽器書(shū)寫(xiě)出一段內(nèi)容。我們已經(jīng)知道，document.write的功能是輸出文本，所以上面那個(gè)語(yǔ)句就是讓瀏覽器輸出“我是菜鳥(niǎo)我怕誰(shuí)!”。在JavaScript中，一行的結(jié)束就被認(rèn)定為語(yǔ)句的結(jié)束。但是最好還是要在結(jié)尾加上一個(gè)分號(hào)“;”來(lái)表示語(yǔ)句的結(jié)束。這是一個(gè)編程的好習(xí)慣，事實(shí)上在很多語(yǔ)言中句末的分號(hào)都是必須的。看看下面這個(gè)代碼塊document.write(This is a header);document.write(This is a paragraph);document.write(This is another paragraph);5 JavaScript 注釋 HTML、CSS里都有注釋?zhuān)琂avaScript里自然也有注釋?zhuān)曳譃閱涡凶⑨屌c普通注釋兩種。5.1單行注釋插入單行注釋的符號(hào)是“/”/ 我是注釋?zhuān)沂亲⑨宒ocument.write(我是菜鳥(niǎo)我怕誰(shuí)？); 5.2多行注釋多行注釋以/*開(kāi)始，以*/結(jié)束。/*誰(shuí)說(shuō)菜鳥(niǎo)不會(huì)編程？菜鳥(niǎo)不但會(huì)編程還有書(shū)寫(xiě)注釋的良好習(xí)慣*/document.write(我是菜鳥(niǎo)我怕誰(shuí)？);相信你已經(jīng)了解注釋的作用了。HTML的注釋不會(huì)被瀏覽器作為HTML解釋?zhuān)珻SS注釋也不會(huì)被瀏覽器解釋。同理，JavaScript的注釋也不會(huì)被執(zhí)行。注釋的作用就是記錄自己在編程時(shí)候的思路，以便以后自己閱讀代碼時(shí)可以馬上找到思路。同樣，注釋也有助于別人閱讀自己書(shū)寫(xiě)的JavaScript代碼?？傊畷?shū)寫(xiě)注釋是一個(gè)良好的編程習(xí)慣。6 JavaScript 變量 （1）什么是變量在代數(shù)中，我們會(huì)遇到下面的基礎(chǔ)問(wèn)題，如果a的值為5，b的值為6，那么a與b的和是多少？在這個(gè)問(wèn)題中，我們就可以把a(bǔ)和b看做變量，再設(shè)置一個(gè)變量c來(lái)保存a與b的和。那么，上面的這個(gè)問(wèn)題就可以用如下的JavaScript代碼表示：/ 計(jì)算a + b的和a = 5;/給變量a賦值b = 5;/給變量b賦值c = a + b;/c 為 a + b 的和document.write(c);/輸出c的值執(zhí)行結(jié)果：10在上面的例子中，我們用到了三個(gè)變量：a，b，c。這些都是變量的名字，在JavaScript中，我們需要用變量名來(lái)訪問(wèn)這個(gè)變量。在JavaScript中，變量名有如下規(guī)定： 變量名區(qū)分大小寫(xiě)，A與a是兩個(gè)不同變量。 變量名必須以字母或者下劃線開(kāi)頭。（2）聲明變量我們可以用var聲明變量,比如：var a ; /聲明一個(gè)變量aa = 5 ; /給變量賦值其實(shí)在第一個(gè)例子中我們已經(jīng)看到了，JavaScript中可以不聲明變量直接賦值。不過(guò)先聲明變量是一個(gè)良好的編程習(xí)慣。 （3）給變量賦值來(lái)看一個(gè)上面出現(xiàn)過(guò)的語(yǔ)句：a = 5 ; 這個(gè)語(yǔ)句怎么讀出來(lái)呢？“a等于5”？對(duì)不起，不對(duì)。應(yīng)該是“讓a等于5”，說(shuō)得專(zhuān)業(yè)一點(diǎn)，這叫“給a賦值”。我們之前已經(jīng)提到過(guò)，a是變量，是可以變的，所以從某種角度來(lái)說(shuō)，它不等于任何值，只是暫時(shí)的等于某個(gè)值。來(lái)看下面這個(gè)例子，進(jìn)一步熟悉一下賦值與等于的關(guān)系：a = 5;/讓a等于5，a的值暫時(shí)等于5a = 6;/讓a等于6，a的值暫時(shí)等于6 再次強(qiáng)調(diào)，如果JavaScript是你學(xué)習(xí)的第一門(mén)編程語(yǔ)言，一定要注意區(qū)分“等于”和“賦值”這兩個(gè)不同的概念。（4）變量的數(shù)據(jù)類(lèi)型其實(shí)，在JavaScript中，變量是無(wú)所不能的容器，你可以吧任何東西存儲(chǔ)在變量里，例如：var quanNeng1 = 123;/數(shù)字var quanNeng2 = 一二三/字符串其中，quanNeng2這個(gè)變量存儲(chǔ)了一個(gè)字符串，字符串需要用一對(duì)引號(hào)括起來(lái)。變量還可以存儲(chǔ)更多的東西，例如數(shù)組，對(duì)象，布爾值等等，我們會(huì)在后面介紹這些內(nèi)容。7 JavaScript操作符7.1運(yùn)算操作符 操作符是用于在JavaScript中指定一定動(dòng)作的符號(hào)，其中算術(shù)操作符主要用來(lái)完成類(lèi)似加減乘除的工作。 （1）操作符舉例看下面這段JavaScript代碼。c = a + b;其中的=和+都是操作符。JavaScript中還有很多這樣的操作符，例如，加減乘除是JavaScript中比較基本的幾個(gè)操作符，它們的意義與在數(shù)學(xué)中沒(méi)有什么差別。JavaScript中最常見(jiàn)的操作符是賦值操作符“=”，上一節(jié)我們已經(jīng)強(qiáng)調(diào)過(guò)，它不是等于。（2）操作符的優(yōu)先級(jí)我們都知道，在數(shù)學(xué)中，“a + b * c”這個(gè)式子中，乘法將先于加法運(yùn)算。同樣，在JavaScript中，這個(gè)式子會(huì)按相同的順序執(zhí)行。我們稱(chēng)之為“優(yōu)先級(jí)”，即“*”的優(yōu)先級(jí)高于“+”。與數(shù)學(xué)中一樣，改變運(yùn)算順序的方法是添加括號(hào)，JavaScript中改變優(yōu)先級(jí)的方法也是添加括號(hào)。例如：(a +) * c（3）字符串的連接在JavaScript中，“+”不知代表加法，同樣也可以使用它來(lái)諒解兩個(gè)字符串，例如：example = 烏 + 龜;在上面的例子中，example將包含“烏龜”這個(gè)字符串。這是由于“+”完成了“烏”和“龜”的連接，當(dāng)然了，你也可以把這種行為理解成字符串的加法。（4）自加一，自減一操作符這里我們來(lái)看兩個(gè)非常常用的運(yùn)算符，自加一“+”；自減一“-”。首先來(lái)看一個(gè)例子：a = 5;a+;/a的值變?yōu)?a-/a的值有變回5上面的例子中，a+使得a的值在原來(lái)的基礎(chǔ)上增加1，a-則讓a在現(xiàn)在的基礎(chǔ)上在減去1。所以，其實(shí)“a+”也可以寫(xiě)成“a = a + 1”;/等同于a+（5）復(fù)合操作符延續(xù)上面的例子，其實(shí)“a = a + 1”還可以寫(xiě)成：a += 1;/將a的值加1之后再賦給a這樣把運(yùn)算和賦值結(jié)合到一起的操作符叫做復(fù)合操作符。上面我們看到的是加法與賦值的結(jié)合，JavaScript中還有其它的符合運(yùn)算符：a += b;/ a = a + ba -= b;/ a = a - ba *= b;/ a = a * ba /= b;/ a = a / b 7.2比較操作符和邏輯操作符 操作符是用于在JavaScript中指定一定動(dòng)作的符號(hào)。（1）比較操作符比如：“=”符號(hào)，它是一個(gè)比較操作符，它表示的意思就是“相等嗎？”。例如：a=b表示：“a與b的值相等嗎？”在JavaScript中，這樣的比較操作符有很多，下面就列出這些操作符以及它們的含義。 “” a大于b嗎？ “=” a大于等于b嗎？ “b”在JavaScript中還表示為ab；數(shù)學(xué)中的“b大于a，b小于c”是“aba & 你可能已經(jīng)猜到了，“&”是而且的意思。if(條件1 & 條件2)/代碼只有條件1、2同時(shí)滿足，代碼才會(huì)得到執(zhí)行。類(lèi)似的操作符還有“或者(|)”和“非(!)”if(條件1 | 條件2)/代碼 “|”表示或者的意思，只要條件1或2中有一個(gè)滿足，代碼就會(huì)得到執(zhí)行。if(!條件)/代碼“！”表示非，也就是不是的意思，只有條件不滿足的時(shí)候，代碼才會(huì)得到執(zhí)行。8 JavaScript流程控制語(yǔ)句 8.1 if else語(yǔ)句（如果，否則） if else是所有編程語(yǔ)言里都有的功能，它使得程序具有簡(jiǎn)單的判斷能力。在介紹if之前，讓我們先來(lái)了解一下布爾值這個(gè)概念。(1)布爾(Bool)值在變量一節(jié)中，我們?cè)?jīng)說(shuō)過(guò)，變量可以用來(lái)存儲(chǔ)布爾值。哪么布爾值的作用究竟是什么呢？簡(jiǎn)單的說(shuō)，布爾值的作用就是用來(lái)表示“真的假的”。所以布爾值其實(shí)只有兩種取值：真(true)和假(false)。(2) if else結(jié)構(gòu)其實(shí)“if else”的意思和字面意思是一樣的，就是“如果”、“否則”。還是讓我們來(lái)看一個(gè)使用if的例子吧。Var hobby = “VbScript”;if (hobby = “JavaScript”) document.write(有發(fā)展);我們來(lái)解釋一下這段代碼。首先是一個(gè)“if”，它后面緊跟著一個(gè)括號(hào)，括號(hào)里則是一個(gè)條件，確切地說(shuō)是一個(gè)布爾值。當(dāng)條件成立的時(shí)候，這個(gè)值是true，“”里的語(yǔ)句將會(huì)得到執(zhí)行；否則這個(gè)值是flase，“”里的語(yǔ)句將被忽略。具體到我們的例子，因?yàn)閔obby 變量的值是“VbScript”，所以不做回答。如果hobby變量的值是“JavaScript”，則回答“有發(fā)展”。注意“=”這個(gè)符號(hào)，這個(gè)符號(hào)用來(lái)判斷左右兩邊是否相等。下一節(jié)會(huì)詳細(xì)地介紹。如果你的愛(ài)好不是JavaScript，那么沒(méi)有任何輸出。如果你希望它能對(duì)這種情況做出反應(yīng)，我們可以請(qǐng)else來(lái)幫忙，看下面的代碼：var hobby = JavaScriptif (hobby = JavaScript) document.write(有發(fā)展);else/如果愛(ài)好不是JavaScriptdocument.write(沒(méi)有評(píng)價(jià));上面的代碼用到了“else”，它會(huì)給if添加一種“否則”的狀態(tài)。當(dāng)hobby不是“JavaScript”的時(shí)候，它會(huì)表明“沒(méi)有評(píng)價(jià)”。（3）if else嵌套如果想做更多的判斷，可以用if的嵌套,看下面的代碼。var hobby = JavaScriptif ( hobby = JavaScript) document.write(有發(fā)展);else if ( hobby = football)/如果愛(ài)好是足球。/注意：這個(gè)if是嵌套在上一個(gè)if else中的else中的document.write(我X);else/既不是JavaScript又不是足球document.write(沒(méi)有評(píng)價(jià));第二個(gè)if只有在第一個(gè)if的條件不成立的時(shí)候才有機(jī)會(huì)執(zhí)行。8.2 JavaScript Switch語(yǔ)句 當(dāng)有很多種選項(xiàng)的時(shí)候，switch比if else使用更方便。上一節(jié)我們已經(jīng)看到，利用if else可以讓程序具有基本的判斷能力，而使用嵌套的if else則可以讓程序?qū)Χ喾N情況進(jìn)行判斷。但是當(dāng)情況的種類(lèi)比較多的時(shí)候，使用switch語(yǔ)句將更加合適。比如要實(shí)現(xiàn)如下功能的程序：輸入一個(gè)學(xué)生的考試成績(jī)，我們按照每十分一個(gè)等級(jí)將成績(jī)分等，程序?qū)⒏鶕?jù)成績(jī)的等級(jí)做出不同的評(píng)價(jià)。很明顯，用if else可以實(shí)現(xiàn)這樣的程序，但是代碼會(huì)很復(fù)雜。而如果使用switch語(yǔ)句，代碼則會(huì)簡(jiǎn)單一些，首先來(lái)看一下思路，再把它翻譯成JavaScript。思路：1. 將分?jǐn)?shù)轉(zhuǎn)化為特定等級(jí)以便于switch處理。2. 判斷分?jǐn)?shù)屬于哪種等級(jí)。3. 根據(jù)分?jǐn)?shù)等級(jí)做出評(píng)價(jià)：例如低于60給出掛科評(píng)價(jià)。 翻譯成JavaScript就是如下代碼(注意注釋)：/首先，我們用score變量來(lái)存儲(chǔ)分?jǐn)?shù)，假設(shè)為65 var score = 65;/用分?jǐn)?shù)除以10，parseInt的作用是把它轉(zhuǎn)換為整數(shù)，/暫時(shí)不用深究，()內(nèi)最后的結(jié)果為6 switch (parseInt(score / 10) /switch開(kāi)始實(shí)現(xiàn)判斷過(guò)程，case 6得到滿足 case 0: case 1: case 2: case 3: case 4: case 5:/根據(jù)不同的等級(jí)做出不同的行為。/冒號(hào)后面的語(yǔ)句就是行為/case0到5的行為都是下面這個(gè)語(yǔ)句 degree = 恭喜你，又掛了！; break; case 6: degree = 勉強(qiáng)及格; break; case 7: degree = 湊合，湊合 break; case 8: degree = 不錯(cuò)，不錯(cuò); break; case 9: case 10: degree = 高手高手，佩服佩服; /end of switch 記得在每個(gè)case所執(zhí)行的語(yǔ)句里添加上一個(gè)break語(yǔ)句。為了理解break的作用，我們來(lái)看看如果沒(méi)有break會(huì)怎么樣： switch (parseInt(score / 10) case 0: case 1: case 2: case 3: case 4: case 5: degree = 恭喜你，又掛了！; case 6: degree = 勉強(qiáng)及格; case 7: degree = 湊合，湊合 case 8: degree = 8錯(cuò)，8錯(cuò); case 9: case 10: degree = 高手高手，佩服佩服; /end of switch 在上面的代碼中，如果成績(jī)是50分，那么score/10就是5，則case 5后面的語(yǔ)句將會(huì)得到執(zhí)行，同樣，case6、7等等后面的語(yǔ)句都會(huì)得到執(zhí)行。也就是說(shuō)，我們會(huì)得到：”恭喜你，又掛了！勉強(qiáng)及格湊合，湊合8錯(cuò)，8錯(cuò)高手高手，佩服佩服“這樣沒(méi)有意義的評(píng)價(jià)。這就是swtitch語(yǔ)句的執(zhí)行邏輯，當(dāng)發(fā)現(xiàn)某個(gè)case滿足后，該switch中在該case后的所有語(yǔ)句都會(huì)得到執(zhí)行。第一個(gè)例子中的break就是為了讓switch”停下來(lái)“。8.3 JavaScript For 循環(huán) 所謂循環(huán)，就是重復(fù)執(zhí)行一段代碼。前面我們已經(jīng)看到了，if else和switch是JavaScript具有了判斷的能力，但是電腦的判斷能力和人比起來(lái)差遠(yuǎn)了。電腦更擅長(zhǎng)一件事情不停地重復(fù)。我們?cè)贘avaScript中把這叫做循環(huán)。for語(yǔ)句結(jié)構(gòu)如下：for(初始條件;判斷條件;循環(huán)后動(dòng)作) 循環(huán)代碼讓我們來(lái)看一個(gè)簡(jiǎn)單的例子吧：有十個(gè)菜鳥(niǎo)報(bào)數(shù)，“菜鳥(niǎo)1號(hào)、菜鳥(niǎo)2號(hào)”。有了for循環(huán)，很少的代碼就可以實(shí)現(xiàn)十個(gè)菜鳥(niǎo)的報(bào)數(shù)。var i=1;for (i=1;i=10;i+)document.write(菜鳥(niǎo)+i+號(hào));結(jié)果如下：菜鳥(niǎo)1號(hào)菜鳥(niǎo)2號(hào)菜鳥(niǎo)3號(hào)菜鳥(niǎo)4號(hào)菜鳥(niǎo)5號(hào)菜鳥(niǎo)6號(hào)菜鳥(niǎo)7號(hào)菜鳥(niǎo)8號(hào)菜鳥(niǎo)9號(hào)菜鳥(niǎo)10號(hào)在上面那個(gè)例子中，循環(huán)恰好執(zhí)行了10次，那么和“for (i=1;i=10;i+)”一句中的10是不是10次的意思呢？下面我們就來(lái)看看for循環(huán)的工作機(jī)制。首先i=1叫做初始條件，也就是說(shuō)從哪里開(kāi)始，特別的，我們的例子從i=1開(kāi)始。出現(xiàn)在第一個(gè)分號(hào)后面的i=10表示判斷條件，每次循環(huán)都會(huì)先判斷這個(gè)條件是否滿足，如果滿足則繼續(xù)循環(huán)，否則停止循環(huán)，繼續(xù)執(zhí)行for循環(huán)后面的代碼。你可能想問(wèn)了，我們?cè)O(shè)定了i=0，豈不是永遠(yuǎn)都小于等于10嗎？來(lái)看第三個(gè)部分。最后的i+表示讓i在自身的基礎(chǔ)上加1，這時(shí)每次循環(huán)后的動(dòng)作.也就是說(shuō)，每次循環(huán)結(jié)束，i都會(huì)比原來(lái)大1，執(zhí)行若干次循環(huán)之后，i=10的條件就不滿足了，這時(shí)循環(huán)結(jié)束。for循環(huán)后面的代碼將得到執(zhí)行。8.4 JavaScript While循環(huán) while循環(huán)重復(fù)執(zhí)行一段代碼，直到某個(gè)條件不再滿足。 （1）while循環(huán)的結(jié)構(gòu)：while(判斷條件)循環(huán)代碼 其實(shí)while循環(huán)和for循環(huán)的作用都是重復(fù)執(zhí)行代碼，例如下面這段代碼，和上一節(jié)for循環(huán)的輸出結(jié)果完全沒(méi)有區(qū)別。先來(lái)讀讀例子的代碼，下面會(huì)解釋為什么這個(gè)循環(huán)會(huì)和上一節(jié)的for循環(huán)等價(jià)。var i=0;while (i=10)document.write(菜鳥(niǎo)+i+號(hào));document.write();i=i+1;看起來(lái)好像比f(wàn)or循環(huán)少了點(diǎn)東西啊，只有一個(gè)判斷條件啊。其實(shí)這個(gè)循環(huán)也是有初始條件的，只不過(guò)在之前就已經(jīng)定義好了，例如上面例子中的var i=0;，至于變量i的增大，則是放到了循環(huán)體里面，其實(shí)這個(gè)過(guò)程和for沒(méi)有什么區(qū)別，也是變量i不斷變大，直到判斷條件不滿足，則循環(huán)結(jié)束。（2）do while循環(huán)的結(jié)構(gòu)do wile結(jié)構(gòu)的基本原理和while結(jié)構(gòu)是基本相同的，但是它保證循環(huán)體至少被執(zhí)行一次。因?yàn)樗窍葓?zhí)行代碼，后判斷條件。例子如下： i = 0; do document.write(The number is + i); document.write(); i+; while (i = 5)8.5 JavaScript Break 與 Continue Break可以跳出循環(huán)，Continue跳過(guò)本次循環(huán)。（1）breakbreak語(yǔ)句可以讓循環(huán)中途停止，直接執(zhí)行后面的代碼。格式如下：while (i10)if(特殊情況)break;循環(huán)代碼那么，當(dāng)特殊情況發(fā)生的時(shí)候，循環(huán)就會(huì)立即結(jié)束?？纯聪旅娴睦?，我們的菜鳥(niǎo)7號(hào)到10號(hào)在寢室打游戲var i=0;for (i=0;i=10;i+)if (i=6)break;/如果i是6的話就退出循環(huán)。document.write(菜鳥(niǎo)+i+號(hào));當(dāng)i=7的時(shí)候循環(huán)就會(huì)結(jié)束，不會(huì)輸出后面循環(huán)的內(nèi)容。（2）continuecontinue的作用是僅僅跳過(guò)本次循環(huán)，而整個(gè)循環(huán)體繼續(xù)執(zhí)行。它的格式如下：while (判斷條件)if(特殊情況)continue;循環(huán)代碼上面的循環(huán)中，當(dāng)特殊情況發(fā)生的時(shí)候，本次循環(huán)將被跳過(guò)，而后續(xù)的循環(huán)則不會(huì)受到影響，來(lái)看看下面的例子：菜鳥(niǎo)6號(hào)外出學(xué)習(xí)JavaScript去了。var i=0for (i=0;i=10;i+)if (i=3)continue;document.write(The number is + i);document.write();上面的代碼中，i=6的那次循環(huán)將被跳過(guò).8.6 JavaScript For.In循環(huán) Javascript中的for in循環(huán)通常用來(lái)遍歷數(shù)組首先要了解什么是數(shù)組，所謂數(shù)組，其實(shí)就是一個(gè)保存了一組類(lèi)似變量的一個(gè)集合。我們來(lái)看一個(gè)保存了愛(ài)好的數(shù)組實(shí)例：var x;var hobbies = new Array();/創(chuàng)建一個(gè)新的數(shù)組hobbies0 = JavaScript;hobbies1 = CSS;hobbies2 = 籃球;for (x in hobbies)/數(shù)組中的每一個(gè)變量document.write(hobbiesx + );輸出結(jié)果如下：JavaScriptCSS籃球我們來(lái)分析一下上面的例子：var hobbies = new Array();一句創(chuàng)建了一個(gè)新的數(shù)組。hobbies0 = JavaScript;以及之后的兩句則是給hobbies數(shù)組賦值。這與我們之前見(jiàn)過(guò)的變量賦值不太一樣，hobbies后面多出一個(gè)0，這個(gè)是變量的索引。我們之前已經(jīng)說(shuō)了，數(shù)組是變量的集合，因此我們?cè)谫x值之前需要指明給數(shù)組中的哪一個(gè)變量賦值。在這里，0表示的是hobbies數(shù)組所包含的第一個(gè)變量，沒(méi)錯(cuò)，數(shù)組的索引是從0開(kāi)始的，開(kāi)始可能有點(diǎn)別扭，慢慢就習(xí)慣了。最后的for in循環(huán)就很好理解了，for (x in hobbies)/數(shù)組中的每一個(gè)變量 document.write(hobbiesx + ); 表示遍歷hobbies數(shù)組的所有變量，并且將他們逐一輸出。9 JavaScript 彈出框 JavaScript中有三種彈出框:警告(alert)、確認(rèn)(confirm)以及提問(wèn)(prompt)。9.1警告(alert)在訪問(wèn)網(wǎng)站的時(shí)候，你遇到過(guò)這樣的情況嗎？“咚”的一聲，一個(gè)小窗口出現(xiàn)在你面前，上面寫(xiě)著一段警示性的文字，或是其它的提示信息。如果你不點(diǎn)擊確定，你就不能對(duì)網(wǎng)頁(yè)做任何的操作。沒(méi)錯(cuò)，這個(gè)“咚”的小窗口就是alert干的。下面的代碼是一段使用alert的實(shí)例。 alert(我是菜鳥(niǎo)我怕誰(shuí));9.2確認(rèn)(confirm)確認(rèn)框用于讓用戶選擇某一個(gè)問(wèn)題是否符合實(shí)際情況。來(lái)看下面的代碼：我們用confirm(你是菜鳥(niǎo)嗎？)向訪客提問(wèn)，變量r則保存了訪客的回應(yīng)，它只可能有兩種取值：true或false。沒(méi)錯(cuò)，它是一個(gè)布爾值。confirm后面的語(yǔ)句則是我們對(duì)訪客回答做出的不同回應(yīng)。 var r=confirm(你是菜鳥(niǎo)嗎); if (r=true) document.write(彼此彼此); else document.write(佩服佩服); 9.3提問(wèn)(prompt)prompt和confirm類(lèi)似，不過(guò)它允許訪客隨意輸入回答。我們來(lái)修改一下之前switch的例子，我們根據(jù)分?jǐn)?shù)來(lái)做出不同的評(píng)價(jià)，不過(guò)那段程序并不完整，它根本就沒(méi)問(wèn)我們分?jǐn)?shù)，而是假設(shè)我得了65分。這太不公平了?，F(xiàn)在我么就可以用prompt來(lái)向訪客提問(wèn)，用score存儲(chǔ)用戶輸入的回答，其余的事情就都由后面的switch來(lái)完成了。 function judge() var score;/分?jǐn)?shù) var degree;/分?jǐn)?shù)等級(jí) score = prompt(你的分?jǐn)?shù)是多少？) if (score 100) degree = 耍我？100分滿！; else switch (parseInt(score / 10) case 0: case 1: case 2: case 3: case 4: case 5: degree = 恭喜你，又掛了！; break; case 6: degree = 勉強(qiáng)及格; break; case 7: degree = 湊合，湊合 break; case 8: degree = 8錯(cuò)，8錯(cuò); break; case 9: case 10: degree = 高手高手，佩服佩服; /end of switch /end of else alert(degree); prompt( )方法除了可以給出提示信息外，還可以給出初始值，格式如下：prompt(“提示信息”，“初值”)10 JavaScript 函數(shù) 通常情況下，函數(shù)是完成特定功能的一段代碼。把一段完成特定功能的代碼塊放到一個(gè)函數(shù)里，以后就可以調(diào)用這個(gè)函數(shù)啦，這樣就省去了重復(fù)輸入大量代碼的麻煩。還記得我們上一節(jié)所使用的alert嗎？其實(shí)它就是一個(gè)函數(shù)，他是JavaScript提供的函數(shù)。一個(gè)函數(shù)的作用就是完成一項(xiàng)特定的任務(wù)。如果沒(méi)有函數(shù)時(shí)，完成一項(xiàng)任務(wù)可能需要五行、十行、甚至更多的代碼。每次需要完成這個(gè)任務(wù)的時(shí)候都重寫(xiě)一遍代碼顯然不是一個(gè)好主意。這是我們就可以編寫(xiě)一個(gè)函數(shù)來(lái)完成這個(gè)任務(wù)，以后只要調(diào)用這個(gè)函數(shù)就可以了。10.1定義一個(gè)函數(shù)說(shuō)了這么多，那么究竟如何定義一個(gè)函數(shù)呢？看看下面的格式：function 函數(shù)名()函數(shù)代碼;函數(shù)由關(guān)鍵字Function定義，把“函數(shù)名”替換為你想要的名字，把“代碼”替換為完成特定功能的代碼，函數(shù)就定義好了。了解了如何定義函數(shù)，我們就來(lái)自己編寫(xiě)一個(gè)實(shí)現(xiàn)兩數(shù)相加的簡(jiǎn)單函數(shù)吧。首先給函數(shù)起一個(gè)有意義的名字：“add2”，它的代碼如下：function add2() sum = 1 + 1; alert(sum);10.2函數(shù)的調(diào)用函數(shù)定義好了，如何調(diào)用呢？其實(shí)可以通過(guò)很多種方法調(diào)用上面的函數(shù)，我們這里使用最簡(jiǎn)單的函數(shù)調(diào)用方式按鈕的點(diǎn)擊事件，JavaScript事件會(huì)在后面介紹。試著點(diǎn)擊下面的按鈕調(diào)用定義好的函數(shù)：function add2()sum = 1 + 1; alert(sum);通過(guò)button按鈕的鼠標(biāo)單擊事件onclick調(diào)用add2()函數(shù)。10.3帶參數(shù)的函數(shù)上述Add2()函數(shù)不能實(shí)現(xiàn)任意指定兩數(shù)相加。其實(shí)，函數(shù)的定義可以是下面的格式：function(參數(shù)1,參數(shù)2,參數(shù)3)部分函數(shù)代碼按照這個(gè)格式，我們的函數(shù)應(yīng)該寫(xiě)成：function add2(x,y) sum = x + y; alert(sum);x和y則是我們函數(shù)的兩個(gè)參數(shù)，調(diào)用函數(shù)的時(shí)候，我們就可以通過(guò)這兩個(gè)參數(shù)把兩個(gè)加數(shù)傳遞給函數(shù)了。例如，add2(3，4)會(huì)求3+4的和，add2(56,65)則會(huì)求出56和65的和?！霸俚鹊龋∵@函數(shù)沒(méi)有用啊，這里只是把結(jié)果alert出來(lái)，我想對(duì)結(jié)果做些處理怎么辦?。俊?0.4帶返回值的函數(shù)好吧，我們把a(bǔ)lert(sum)一行改成下面的代碼：return sum;return后面的值叫做返回值。使用下面的語(yǔ)句調(diào)用函數(shù)就可以將這個(gè)返回值存儲(chǔ)在變量中了。result = add2(3,4);該語(yǔ)句執(zhí)行后，result變量中的值為7。值得說(shuō)明的是，我們的函數(shù)中，參數(shù)和返回值都是數(shù)字，其實(shí)它們也可以是字符串等其它類(lèi)型。 11 JavaScript事件 我們之前提到過(guò)函數(shù)的調(diào)用。函數(shù)定義之后，默認(rèn)是不會(huì)執(zhí)行的，這時(shí)候就需要一些事件來(lái)觸發(fā)這個(gè)函數(shù)的執(zhí)行。JavaScript很多有很多事件，例如鼠標(biāo)的點(diǎn)擊、移動(dòng)，網(wǎng)頁(yè)的載入和關(guān)閉。我們先來(lái)定義一個(gè)函數(shù)，再看幾個(gè)事件的實(shí)例。統(tǒng)一的示例函數(shù)：function displaymessage()alert(我是菜鳥(niǎo)我怕誰(shuí)!); 函數(shù)的事件很簡(jiǎn)單，只是顯示一條消息。11.1點(diǎn)擊事件使用點(diǎn)擊事件調(diào)用，需要給元素設(shè)置onclick屬性。示例代碼如下： onclick調(diào)用函數(shù)由于設(shè)置了onclick=displaymessage()，因此點(diǎn)擊按鈕則會(huì)調(diào)用函數(shù)。窗體頂端11.2鼠標(biāo)經(jīng)過(guò)、移出事件使用鼠標(biāo)經(jīng)過(guò)事件調(diào)用函數(shù)的代碼如下：鼠標(biāo)滑過(guò)調(diào)用函數(shù)當(dāng)鼠標(biāo)經(jīng)過(guò)按鈕時(shí)，觸發(fā)onmouseover事件，將會(huì)調(diào)用函數(shù)displaymessage()。使用鼠標(biāo)移出事件調(diào)用函數(shù)的代碼如下： 鼠標(biāo)移出調(diào)用函數(shù)把鼠標(biāo)移動(dòng)到這個(gè)按鈕里面，當(dāng)再移動(dòng)出去時(shí)，觸發(fā)onmouseout 事件，將會(huì)調(diào)用函數(shù)displaymessage()。11.3更多事件JavaScript中還有很多事件，完整的列表可以看看/learn/view/p/3/o/0/doc/jsref_events/。下面的列表列舉了可以插入HTML標(biāo)簽中來(lái)定義事件動(dòng)作的屬性，具體的用法請(qǐng)參考上面的網(wǎng)站。屬性事件發(fā)生時(shí)機(jī)onabort圖片下載被打斷時(shí)onblur元素失去焦點(diǎn)時(shí)onchange框內(nèi)容改變時(shí)onclick鼠標(biāo)點(diǎn)擊一個(gè)對(duì)象時(shí)ondblclick鼠標(biāo)雙擊一個(gè)對(duì)象時(shí)onerror當(dāng)加載文檔或圖片時(shí)發(fā)生錯(cuò)誤時(shí)onfocus當(dāng)元素獲取焦點(diǎn)時(shí)onkeydown按下鍵盤(pán)按鍵時(shí)onkeypress按下或按住鍵盤(pán)按鍵時(shí)onkeyup放開(kāi)鍵盤(pán)按鍵時(shí)onload頁(yè)面或圖片加載完成時(shí)onmousedown鼠標(biāo)被按下時(shí)onmousemove鼠標(biāo)被移動(dòng)時(shí)onmouseout鼠標(biāo)離開(kāi)元素時(shí)onmouseover鼠標(biāo)經(jīng)過(guò)元素時(shí)onmouseup釋放鼠標(biāo)按鍵時(shí)onreset重新點(diǎn)擊鼠標(biāo)按鍵時(shí)onresize當(dāng)窗口或框架被重新定義尺寸時(shí)onselect文本被選擇時(shí)onsubmit點(diǎn)擊提交按鈕時(shí)onunload用戶離開(kāi)頁(yè)面時(shí)12 JavaScript 特殊字符 JavaScript中有一些特殊的字符，如果想要在字符串中使用，需要加上一個(gè)反斜線。 我們?cè)谥耙呀?jīng)看過(guò)好多應(yīng)用字符串的例子，如果現(xiàn)在想輸出內(nèi)容將是：小明說(shuō)：我是菜鳥(niǎo)我怕誰(shuí)？。該怎么辦呢？雙引號(hào)被當(dāng)作javascript標(biāo)記字符串開(kāi)始和結(jié)束的符號(hào)，我們?cè)趺茨茉谧址镆腚p引號(hào)呢?看看下面這個(gè)例子。 document.write(小明說(shuō)：我是菜鳥(niǎo)我怕誰(shuí)？。);我們?cè)陔p引號(hào)前面加上一個(gè)反斜線就可以了。在JavaScript中有很多這樣具有功能的特殊字符，如果需要把它們插入字符串都需要在前面加上一個(gè)反斜線。特殊字符列表JavaScript特殊字符代碼代碼輸出單引號(hào)雙引號(hào)&與符號(hào)反斜線n換行r回車(chē)t制表符b后退f走紙換頁(yè)13 JavaScript 指導(dǎo)準(zhǔn)則 （1）在書(shū)寫(xiě)JavaScript的過(guò)程中，應(yīng)該記住它是區(qū)分大小寫(xiě)的，變量名和函數(shù)名都區(qū)分大小寫(xiě)。比如：Var A=1;Var a=2; A和a是兩個(gè)不同的變量。（2）代碼中多余的空格是被忽略的。例如下面兩個(gè)語(yǔ)句a=b+c;a = b + c ;他們是等價(jià)的。（3）”表示本行未完前面已經(jīng)說(shuō)過(guò)，瀏覽器讀到一行末尾會(huì)自動(dòng)判定本行已經(jīng)結(jié)束，不過(guò)我們可以通過(guò)在行末添加一個(gè)“”來(lái)告訴瀏覽器本行沒(méi)有結(jié)束。document.write(Hello World!)和document.write(我是菜鳥(niǎo)我怕誰(shuí)!)是完全一樣的。14 JavaScript 對(duì)象化編程 JavaScript 是使用“對(duì)象化編程”的，或者叫“面向?qū)ο缶幊獭钡?。所謂“對(duì)象化編程”，意思是把 JavaScript 能涉及的范圍劃分成大大小小的對(duì)象，對(duì)象下面還繼續(xù)劃分對(duì)象直至非常詳細(xì)為止，所有的編程都以對(duì)象為出發(fā)點(diǎn)，基于對(duì)象。小到一個(gè)變量，大到網(wǎng)頁(yè)文檔、窗口甚至屏幕，都是對(duì)象。JavaScript對(duì)象是可以是一段文字、一幅圖片、一個(gè)表單（Form）等等。每個(gè)對(duì)象有它自己的屬性、方法和事件。對(duì)象的屬性是反映該對(duì)象某些特定的性質(zhì)的，例如：字符串的長(zhǎng)度、圖像的長(zhǎng)寬、文字框（Textbox）里的文字等等；對(duì)象的方法能對(duì)該對(duì)象做一些事情，例如，表單的“提交”(Submit)，窗口的“滾動(dòng)”(Scrolling)等等；而對(duì)象的事件就能響應(yīng)發(fā)生在對(duì)象上的事情，例如提交表單產(chǎn)生表單的“提交事件”，點(diǎn)擊連接產(chǎn)生的“點(diǎn)擊事件”。不是所有的對(duì)象都有以上三個(gè)性質(zhì)，有些沒(méi)有事件，有些只有屬性。引用對(duì)象的任一“性質(zhì)”用“.”這種方法。JavaScript對(duì)象有：基本對(duì)象、全局對(duì)象、文檔對(duì)象。下面我們一一介紹。14.1基本對(duì)象（1）String 字符串對(duì)象我們?cè)谥暗膶W(xué)習(xí)中已經(jīng)就在使用字符串對(duì)象對(duì)象了，聲明一個(gè)字符串對(duì)象的方法就是直接賦值。比如：var s = 我有個(gè)7個(gè)字符;定義了s這個(gè)字符串之后，我們就有了一個(gè)字符串對(duì)象，我們可以訪問(wèn)它的屬性，使用它的方法。屬性length 用法：.length；返回該字符串的長(zhǎng)度。方法charAt() 用法：.charAt()；返回該字符串位于第位的單個(gè)字符。注意：字符串中的一個(gè)字符是第 0 位的，第二個(gè)才是第 1 位的，最后一個(gè)字符是第 length - 1 位的。ch