【文章內(nèi)容簡介】 /script /body/html 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript編程基礎(chǔ) 6. 流程控制 ? continue和 break語句 – continue語句強(qiáng)制本輪循環(huán)結(jié)束，進(jìn)入下一輪循環(huán)；例如： while (i100){ if (j==0) continue。 else {語句體 } j++。 } – break語句強(qiáng)制結(jié)束循環(huán)。例如： while (i100){ if (j==0) break。 else {語句體 } j++。 } 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript編程基礎(chǔ) 7. 事件觸發(fā)和處理 ? JavaScript是基于對象（ Objectbased）的語言，而基于對象的基本特征，就是采用 事件驅(qū)動 （ Eventdriven）。 ? 事件（ Events）是指對計(jì)算機(jī)進(jìn)行一定的操作而得到的結(jié)果，例如將鼠標(biāo)移到某個超鏈接上、按下鼠標(biāo)按鈕等都是事件。由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動作，稱為事件驅(qū)動（ Event Driver）。 ? 對事件進(jìn)行處理的程序或函數(shù)，稱為 事件處理程序（ Event Handler）。 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript編程基礎(chǔ) JavaScript常用事件表 事 件 名 發(fā)生的對象 說 明 事件處理名 Click 表單的 button， radio， checkbox，submit， reset， link（超鏈接） 單擊了表單元素或超鏈接 onClick Load HTML的 body元素 在瀏覽器中載入頁面 onLoad Unload HTML的 body元素 退出當(dāng)前頁面 onUnload MouseOver link 鼠標(biāo)移到超鏈接上 onMouseOver MouseOut link 鼠標(biāo)移出超鏈接 onMouseOut Submit form 用戶提交了表單 onSubmit 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript編程基礎(chǔ) 【 例 55】 MouseOver和 MouseOut事件處理用法示例。 htmlheadtitle事件觸發(fā)和事件處理 /title script language=JavaScript var Images=new Array( )。 Images[0]=new Image( )。 Images[0].src=。 Images[1]=new Image( )。 Images[1].src=。 function changeImg(ImgIndex) { =Images[ImgIndex].src。} /script/headbodycenter a href= onMouseOver=changeImg(1)。 return true onMouseOut=changeImg(0)。 return true img src= name=imgs border=0 width=30 height=30font size=5軟件設(shè)計(jì) /font /a/center /body/html 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript編程基礎(chǔ) 【 例 56】 簡易計(jì)算器設(shè)計(jì)。 ? 首先，需要設(shè)置數(shù)字按鍵和功能按鍵： – 可使用表單按鈕（ button）來表示。 – 例如，使用如下語句： input type=button value=1 onClick=SetVal(39。139。) 顯示數(shù)字“ 1”的按鍵，當(dāng)按下該按鍵時，將執(zhí)行 SetVal(39。139。)操作。 input type=button value=+ onClick=SetOpr(39。+39。) 顯示運(yùn)算符“ +”的按鍵，當(dāng)按下該按鍵時，將執(zhí)行 SetOpr(39。+39。)操作。 又如以下語句： input type=button value== onClick=Compute() 顯示功能按鍵“ =”，當(dāng)按下該鍵時，將計(jì)算用戶輸入的表達(dá)式的值。 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript編程基礎(chǔ) 【 例 56】 簡易計(jì)算器設(shè)計(jì)。 ? 其次，需要一個顯示輸入計(jì)算式和結(jié)果的地方，可使用 HTML表單的 text（單行文本框）元素來表示，例如： input type=text value= name=OutText ? 最后，要考慮這些設(shè)置和計(jì)算任務(wù)如何來完成。 ① SetVal操作 ：將用戶按下的鍵所代表的數(shù)字連接到整個輸入串的尾部，并判斷這是第幾個操作數(shù)，將其存入相應(yīng)的變量中； ② SetOpr操作 ：將用戶按下的鍵所代表的運(yùn)算連接到整個輸入串的尾部； ③ Compute操作 ：利用系統(tǒng)預(yù)定義函數(shù) eval( )求出表達(dá)式的值； ④ Clear操作 ：清除輸入框的內(nèi)容。 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript對象 ? 在 JavaScript中，對象是對客觀事物或事物之間的關(guān)系的刻畫。 ? 兩類 JavaScript的對象： – 內(nèi)建對象 – 內(nèi)建對象包含了對瀏覽器各成分的描述，是 JavaScript程序設(shè)計(jì)中應(yīng)用最多的部分； – 用戶自定義對象 – 用戶自定義對象允許用戶根據(jù)需要創(chuàng)建自己的對象，從而進(jìn)一步擴(kuò)大 JavaScript的應(yīng)用范圍，增強(qiáng)編寫功能強(qiáng)大的Web文檔。 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript對象 ? JavaScript中的對象是由 屬性 （ Properties）和 方法（ Methods）兩個基本元素構(gòu)成的：屬性成員是對象的數(shù)據(jù)；方法成員是對數(shù)據(jù)的操作。 ? 要使用一個對象，可采用以下 三種方式 ： ① 引用 JavaScript內(nèi)建對象。 ② 由瀏覽器環(huán)境提供，即引用瀏覽器對象。 ③ 創(chuàng)建自定義對象。 ?注意： 一個對象在被引用之前，這個對象必須存在，否則將出現(xiàn)錯誤。實(shí)際上，引用對象要么創(chuàng)建新的對象，要么利用現(xiàn)存的對象。 1. JavaScript對象概述 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript對象 ? 用戶定義自己的對象包括兩部分： – 構(gòu)造對象的屬性 – 定義對象的方法 ? 定義對象的步驟是： – 首先定義對象的各個方法成員，每個方法成員就是一個普通函數(shù)。 – 然后定義對象的構(gòu)造函數(shù)，其中包含每個屬性成員的定義和初始化，以及每個方法成員的初始化。 2. 自定義對象 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript對象 【 例 57】 “書”對象的定義。 function print( ) {//方法成員定義，輸出各屬性成員值 (書名為++br)。 (作者為++br)。 (出版社為++br)。 (出版時間為++br)。 (印數(shù)為++br)。 } function book(name,author,publisher,date,num) {//構(gòu)造函數(shù) =name。 //書名，屬性成員 =author。 //作者，屬性成員 =publisher。 //出版社，屬性成員 =date。 //出版時間，屬性成員 =num。 //印數(shù)，屬性成員 =print。 //方法成員 } 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript對象 ? 構(gòu)造函數(shù)特殊性： ① 構(gòu)造函數(shù)的名字就是對象的名字；如例 47所定義的對象的名字就是構(gòu)造函數(shù) book的名字 ——book。 ② 在構(gòu)造函數(shù)中常使用關(guān)鍵字 this來為對象的屬性成員和方法成員初始化， this本身是一個特殊對象，即當(dāng)前構(gòu)造函數(shù)正在創(chuàng)建的對象。 ③ 每個對象都必須定義構(gòu)造函數(shù)。 2. 自定義對象 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript對象 ? 引用對象的二件工作： – 先用保留字 new創(chuàng)建對象的實(shí)例。 – 創(chuàng)建了對象實(shí)例后，就可通過該實(shí)例引用對象的屬性和方法成員。 ? 創(chuàng)建對象實(shí)例的方法是： var對象實(shí)例名 =new對象名（實(shí)在參數(shù)表）； – 創(chuàng)建對象實(shí)例時，要注意實(shí)在參數(shù)表與對象構(gòu)造函數(shù)的形式參數(shù)表的對應(yīng)關(guān)系。 – 例如：對例 47定義的 book對象創(chuàng)建實(shí)例。 var book1=new book(語文 ,集體編 ,人民教育出版社 ,1999,10000)。 ? 對象屬性成員的引用格式是： 對象實(shí)例名 .屬性成員名 ? 對象方法成員的引用格式是： 對象實(shí)例名 .方法成員名 3. 對象的引用 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript對象 ? 兩條語句： （ 1） for..in語句。 這是一條循環(huán)語句，格式如下： for（變量名 in 對象實(shí)例名） 該語句用于對已有對象實(shí)例的所有屬性進(jìn)行操作的控制循環(huán)，它將一個對象實(shí)例的所有屬性反復(fù)置給指定的變量來實(shí)現(xiàn)循環(huán)。該語句的優(yōu)點(diǎn)就是無須知道對象中屬性的個數(shù)即可進(jìn)行操作。 （ 2） with語句。 其語法格式是： with object{ //在其中引用 object的成員時，可不加前綴 } 在該語句體內(nèi)，任何對變量的引用被認(rèn)為是這個對象的屬性，以節(jié)省一些代碼。 4. 有關(guān)對象操作的語句 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 JavaScript對象 function Show(obj) //定義通用函數(shù) Show { var prop。 for (prop in obj) (obj[prop]+ )。 (br)。 } 【 例 58】 下列函數(shù) Show顯示其參數(shù)對象各屬性的值。 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 常用的內(nèi)建對象和函數(shù) ? JavaScript的常用內(nèi)建對象和方法如下： ① Array（數(shù)組）對象。 JavaScript的數(shù)組可通過該內(nèi)建對象來實(shí)現(xiàn)。 ② String（字符串）對象。封裝了字符串及有關(guān)操作。 ③ Math（數(shù)學(xué)）對象。封裝了一些常用的數(shù)學(xué)運(yùn)算。 ④ Date（日期時間）對象。封裝了對日期和時間的操作。 ⑤ Number對象、 Boolean對象、 Function對象。 腳本語言 JavaScript 《 Web程序設(shè)計(jì) 》 (第 4版 )，電子工業(yè)出版社， 2022， ISBN： 9787121260360 常用的內(nèi)建對象和函數(shù) ? 數(shù)組是若干元素的有序集合，每個數(shù)組有一個名字作為其標(biāo)識。 ? 在幾乎所有的高級語言中，數(shù)組都是得到支持的數(shù)據(jù)類型，但在 JavaScript中，沒有明顯的數(shù)組類型。 ? 在 JavaScript中