程序設計入門

1、Neusoft Institute of InformationIT Education & Training JavaScript 程序設計入門ASP.NET Web應用開發(fā)（C#） JavaScript程序設計入門 授課人： 黃 波 Email： Tel：82878185 QQ：569960256 Neusoft Institute of InformationIT Education & Training主體綱要 第一部分 JavaScript簡介 第二部分 JavaScript組成 第三部分 JavaScript案例演示 第四部分 JavaScript編程簡介 第五部分 JavaScr

2、ipt編程基礎 第六部分 BOM（瀏覽器對象模型） 第七部分 DOM（文檔對象模型）Neusoft Institute of InformationIT Education & Training第一部分 JavaScript簡介一、JavaScript的起源 1995年NetScape（網(wǎng)景瀏覽器）中出現(xiàn)，前身叫作LiveScript，NetScape公司與Sun公司聯(lián)手開發(fā)，為了利用Java這個時髦記匯，將其更名為JavaScript。 JavaScript和Java根本就是兩種語言！ 微軟為了進軍瀏覽器市場，開發(fā)了一個JavaScript的克隆版，叫JScript。 1997年，JavaS

3、cript作為一個草案提交給ECMA（歐洲計算機制造商協(xié)會），定義了ECMAScript.Neusoft Institute of InformationIT Education & Training二、JavaScript的特點 1、腳本編寫語言 它是一種腳本語言，采用小程序段的方式進行編程。它的基本結(jié)構形式如我們已學過的C#，但它不像C#必須先編譯，而網(wǎng)頁在瀏覽器中運行時逐行被“翻譯”，它與HTML標簽結(jié)合在一起。2、跨平臺性 JavaScript是依賴于瀏覽器本身，與操作系統(tǒng)無關。 3、基于對象 它是一種基于對象（Object Based）和事件驅(qū)動（Event Driver）的編程語言

4、，它本身提供了非常豐富的內(nèi)部對象供設計人員使用。Neusoft Institute of InformationIT Education & Training 4、用于客戶端 事先在網(wǎng)頁中編寫好代碼，此代碼隨HTML文件一起發(fā)送到客戶端的瀏覽器上，由瀏覽器對這些代碼進行解釋執(zhí)行，這樣就減輕了服務器的負擔。三、JavaScript的作用 1. 校驗用戶輸入內(nèi)容； 2. 動態(tài)顯示網(wǎng)頁內(nèi)容； 3. 為靜態(tài)網(wǎng)頁增加一些特效 4. AJAX程序的核心技術之一程序的核心技術之一 如果你有一些編程經(jīng)驗，會覺得JavaScript比較熟悉，即使沒有任何編程經(jīng)驗，也沒什么問題，網(wǎng)上有很多JavaScript特效

5、，你可以直接Copy進網(wǎng)頁使用。Neusoft Institute of InformationIT Education & Training第二部分 JavaScript的組成 ECMAScriptECMAScript：不與任何具體瀏覽器相綁定，只描述以下內(nèi)容：語法、類型、語句、關鍵字、保留字、運算符、對象。 DOMDOM：文檔對象模型，是HTML和XML的應用程序接口（API），DOM把整個頁面規(guī)劃成由節(jié)點層級構成的文檔。Neusoft Institute of InformationIT Education & Training Sample Page Hello World! DOM通

6、過創(chuàng)建樹來表示文檔，從而使開發(fā)者對文檔的內(nèi)容和結(jié)構具有空前的控制力。用DOM API可以輕松地刪除、添加和替換節(jié)點。Neusoft Institute of InformationIT Education & Training BOM：瀏覽器對象模型，可以對瀏覽器窗口進行訪問和操作，由于沒有相關的BOM標準，每種瀏覽器都有自己的BOM實現(xiàn)。 主要實現(xiàn)： 彈出新的窗口； 移動、關閉瀏覽器窗口以及調(diào)整大??； 提供用戶屏幕分辨詳細信息的屏幕對象 .Neusoft Institute of InformationIT Education & Training第三部分 Java案例演示 1. 一些有趣的

7、例子； 2. 見案例中的JavaScript各種特效.rar 3. 網(wǎng)絡資源： http:/ 收錄了很多JavaScript實現(xiàn)的特效； 4. 一個類似于Windows XP的網(wǎng)絡操作系統(tǒng)界面，這也是 JavaScript與其他技術結(jié)合完成的 請用FireFox訪問： http:/Neusoft Institute of InformationIT Education & TrainingNeusoft Institute of InformationIT Education & Training第四部分 JavaScript編程簡介一、編輯軟件 編輯JavaScript可以使用任何一種文本編

8、輯器，例如記事本，為降低JavaScript難度，我們使用1st JavaScript Editor，由于破解不完善，智能提示必須自己手工啟動 菜單：Edit Preference TextEditor IntelliSense二、調(diào)試器 使用VS.NET 2005，同樣支持斷點設置，F(xiàn)10、F11操作但有兩條必須注意： Neusoft Institute of InformationIT Education & Training設置IE中的Internet選項 將高級設置中的禁用腳本調(diào)試（Internet Explorer）（英文：Disable Script Debugging（Inter

9、net Explorer)關閉在VS.NET 2005 IDE中直接運行三、JavaScript的編寫形式直接把JavaScript嵌入在HTML任何標簽中 這里的document對象指的是當前的HTML文檔Neusoft Institute of InformationIT Education & Training2. 使用JavaScript函數(shù)時，將函數(shù)定義在標簽中Neusoft Institute of InformationIT Education & Training3. 使用單獨的.js文件 在標簽中鏈接外部.js文件 利用 Jscript.js內(nèi)容Neusoft Institu

10、te of InformationIT Education & Training第五部分 JavaScript編程基礎一、JavaScript的變量 區(qū)分大小寫，變量是弱類型的，ECMAScript中的變量無特定的類型，變量的聲明，使用關鍵字 var 可以隨時改變變量所存數(shù)據(jù)的類型 var color=“red”; var num = 25; var visible = false; 這種特性在.NET 3.5框架中已被引入！ 與C#中的變量不同，變量并不一定要被初始化Neusoft Institute of InformationIT Education & Training var tes

11、t; test=55; test=“hi”;二、 原始類型 ECMAScript有5種原始類型（primitive type)：undefined、null、boolean、number和string。 1、undefined類型 var oTemp； 聲明的變量未初始化時，該變量的初始值是undefined. 函數(shù)（function）無明確Neusoft Institute of InformationIT Education & Training2 、null類型 用于尚未存在的對象，值undefined實際是從值null派生的，ECMAScript把它們定義為相等 null = = un

12、defined;/ 這個表達式返回true3、 boolean類型 只有兩個值 true和false;4、 number類型 任何數(shù)字都被看作number類型的字面量 var num = 55; var num = 070；/56的八進制 var num = 0 x1f; /31的16進制 var num = 5.0;Neusoft Institute of InformationIT Education & Training 有一個特殊的值是NaN，表示非數(shù)（Not a Number）可以使用isNaN函數(shù)判斷，例如 :isNaN(“blue”); 返回true5、string類型 字符串類

13、型三、typeof運算符 對變量或值調(diào)用typeof運算符將返回下列的值之一： “undefined” 變量是undefined類型的 “boolean” 變量是boolean類型的 “number” 變量是number型的 “string” 變量是string型的 “object” 變量是一種引用類型或null類型 例： var i=2; alert(typeof(i); /得到number類型Neusoft Institute of InformationIT Education & Training四、 類型轉(zhuǎn)換 （1）轉(zhuǎn)換成字符串 3種主要的原始值 boolean、number和str

14、ing都有toString方法 （2）轉(zhuǎn)換成數(shù)字 parseInt方法和parseflota方法 只有對string類型調(diào)用這些方法，它們才能正確運行；對其他類型都返回NaN; parseInt方法首先檢查位置0處的字符，判斷它是否是個有效數(shù)字，若有效，再往下檢查，直到發(fā)現(xiàn)非數(shù)字，并返回前面的檢查結(jié)果。 例：var num1 = parseInt(“1234”); /得到1234 Neusoft Institute of InformationIT Education & Training var num2= parseInt（”1234blue”）;/返回1234 var num3 = pa

15、rseInt (“blue”）; /返回NaN parseFloat的使用類似： var fnum1 = parseFloat（”1234blue”); /返回1234.0 var fnum2 = parseFloat (“blue”）;/返回NaN五、 函數(shù) 1. 語法規(guī)則 function 函數(shù)名(參數(shù)1，參數(shù)2） return 值； Neusoft Institute of InformationIT Education & Training說明： （1）JavaScript的函數(shù)與C#的方法或函數(shù)不同，function后面不需要定義返回值類型； （2）當使用多個參數(shù)時，參數(shù)間以逗號隔開

16、； （3）JavaScript中函數(shù)的傳遞也是分兩種，按值傳遞和按引用傳遞；2. argument對象 使用特殊對象arguments，開發(fā)者無需指出參數(shù)名，就能訪問它們。例如：Neusoft Institute of InformationIT Education & Training function SayHi() if(arguments0 =bye) return; alert(arguments0); 調(diào)用形式調(diào)用形式1:1: SayHi(test);調(diào)用形式調(diào)用形式2 2： SayHi(test”,123); 與其他語言不同，ECMAScript不會驗證傳遞給函數(shù)的參數(shù)的個數(shù)是否

17、相等，函數(shù)可以接受任意個數(shù)的參數(shù)（Netscape的文檔最多25個），而不會引發(fā)任何錯誤。Neusoft Institute of InformationIT Education & Training 還可以在函數(shù)內(nèi)使用argument.length屬性檢測參數(shù)個數(shù) function HowManyArgs() alert(arguments.length); 利用arguments對象判斷傳遞給函數(shù)的參數(shù)個數(shù)，即可模擬函數(shù)重載。 Neusoft Institute of InformationIT Education & Training六、事件驅(qū)動及事件處理 Event Drive：Jav

18、aScript是基于對象(object-based）的語言，基于對象的基體特征，就是采用事件驅(qū)動（event drive) 事件：鼠標或鍵盤的動作； 事件驅(qū)動：由鼠標或鍵盤的動作引發(fā)的一連串程序的動作叫事件驅(qū)動（event drive） 事件處理程序（Event Handler）：通常由函數(shù)執(zhí)行。 網(wǎng)頁中的事件一般分為鼠標事件、鍵盤事件及其他事件。1. 一些常用的事件Neusoft Institute of InformationIT Education & Training 表表1 1 常用鼠標事件常用鼠標事件事件事件意義意義onmousedown按下鼠標鍵onmousemove移動鼠標on

19、mouseout鼠標離開某一個網(wǎng)頁對象onmouseover鼠標移動到某一個網(wǎng)頁對象onmouseup松開鼠標鍵onclick單擊鼠標鍵ondbclick雙擊鼠標鍵表表2 2 常用鍵盤事件常用鍵盤事件事件事件意義意義onkeydown按下一個鍵onkeyup松開一個鍵onkeypress按下然后松開一個鍵Neusoft Institute of InformationIT Education & Training 表表3 3 其他事件其他事件事件事件意義意義onfocus焦點到一個對象上onblur從一個對象失去焦點onload載入網(wǎng)頁文檔onunLoad卸載網(wǎng)頁文檔 onselect文本框中

20、選擇了文本內(nèi)容onchange文字變化或列表選項變化onerror出錯onsubmit 提交表單onreset重置表單onabort中斷顯示圖片Neusoft Institute of InformationIT Education & Training3. 用JavaScript處理事件 JavaScript語言與HTML文檔相關聯(lián)主要是通過“事件”，JavaScript的函數(shù)就是用于處理事件的程序，語法規(guī)則是： 事件 = “函數(shù)名”或 事件 = “JavaScript語句” 例如： （1） （2）也可以定義好函數(shù)后再調(diào)用 function message() alert(hello wor

21、ld); Neusoft Institute of InformationIT Education & Training4. JavaScript練習 （1） 當裝入HTML文檔時調(diào)用LoadForm（）函數(shù)，而退出 該文檔進入另一個HTML文檔時則首先調(diào)用 UnLoadForm（）函數(shù)，確認后方可進入 LoadForm（）函數(shù)：提示用戶“這是一個自動裝載例子”UnLoadForm（）函數(shù)：提示用戶“這是一個自動卸載的例子”Neusoft Institute of InformationIT Education & Training 無標題頁 function LoadForm() alert

22、(這是一個裝載的例子); function UnLoadForm() alert(這是一個卸載的例子); 測試Neusoft Institute of InformationIT Education & Training （2）一個輸入框中，當沒有輸入值時，提示用戶：請輸入！ 無標題頁 function validate() if(user.value=) alert(請輸入!); Neusoft Institute of InformationIT Education & Training 若要驗證form中提交的數(shù)據(jù) Neusoft Institute of InformationIT E

23、ducation & TrainingJavaScript腳本為： function validate() if(document.data.user.value=) alert(wrong); return false; Neusoft Institute of InformationIT Education & Training七、 數(shù)組對象 1. JavaScript數(shù)組的定義 （1）新建一個長度為0的數(shù)組 var myArray= new Array（）; （2）長度為n的數(shù)組 var myArray = new Array(n); （3）新建一個指定長度的數(shù)組，并賦初值 var my

24、Array = new Array(1,2,3); （4）訪問數(shù)組的某個元素 myArray2=4; var i = myArray2; Neusoft Institute of InformationIT Education & Training2. 動態(tài)數(shù)組 JavaScript的數(shù)組的長度不是固定不變，若要增加數(shù)組的長度，只要直接賦值。 例如： var myArray = new Array(1,2,3); myArray3 = 4; 這時myArray的長度為4 如果 var myArray = new Array(1,2,3); myArray4=4; 則長度為5,其中myArra3

25、的值為undefinedNeusoft Institute of InformationIT Education & Training3. 數(shù)組的常用屬性和方法（1）length屬性：獲取數(shù)組長度（2）concat方法 例：var a = new Array(1,2,3); var b = new Array(4,5,6); alert(a.concat(b); /輸出1,2,3,4,5,6 alert(a.length); /長度不變，仍為3 也可以直接連接數(shù)值 a.concat(4,5,6); （3）join方法，連接數(shù)組，缺省為”,” 例：var a = new Array(1,2,3)

26、; alert(a.join(); /輸出1,2,3 Neusoft Institute of InformationIT Education & Training 也可用指定的符號連接，例 alert(a.join(“-”);（4）push方法，在數(shù)組的結(jié)尾添加一個或多個項，同時更改數(shù)組的長度 例：var a = new Array(1,2,3); a.push(4,5,6); alert(a.length);/輸出為6（5）pop方法，刪除最后一個數(shù)組項，將其作為函數(shù)值返回 例：var a1=new Array(1,2,3); alert(a1.pop(); /輸出3 alert(a1.l

27、ength); /輸出2 Neusoft Institute of InformationIT Education & Training（6）shift方法:刪除數(shù)組中的第一個項，將其作為函數(shù)值返回 例如：var a1=new Array(1,2,3); alert(a1.shift(); /輸出1 alert(a1.length); /輸出2（7）unshift方法:添加元素至數(shù)組開始處 例如： var a1=new Array(1,2,3); a1.unshift(4,5,6) alert(a1); /輸出4,5,6,1,2,3Neusoft Institute of Informatio

28、nIT Education & Training（8）slice方法：返回數(shù)組的片斷。（或者說子數(shù)組）。有兩個參數(shù)，分別指定開始和結(jié)束的索引（不包括第二個參數(shù)索引本身）。如果只有一個參數(shù)該方法返回從該位置開始到數(shù)組結(jié)尾的所有項。如果任意一個參數(shù)為負的，則表示是從尾部向前的索引計數(shù)。比如-1 表示最后一個，-3 表示倒數(shù)第三個。 var a1=new Array(1,2,3,4,5); alert(a1.slice(1,3); /輸出2,3 alert(a1.slice(1); /輸出2,3,4,5 alert(a1.slice(1,-1); /輸出2,3,4 alert(a1.slice(-3

29、,-2); /輸出3Neusoft Institute of InformationIT Education & Training（9）splice方法：從數(shù)組中替換或刪除元素。第一個參數(shù)指定刪除或插入將發(fā)生的位置。第二個參數(shù)指定將要刪除的元素數(shù)目，如果省略該參數(shù)，則從第一個參數(shù)的位置到最后都會被刪除。splice()會返回被刪除元素的數(shù)組。如果沒有元素被刪，則返回空數(shù)組。例： var a1=new Array(1,2,3,4,5); alert(a1.splice(3); /輸出4,5 alert(a1.length); /輸出3 var a1=new Array(1,2,3,4,5); a

30、lert(a1.splice(1,3);/輸出2,3,4 alert(a1.length); /輸出2Neusoft Institute of InformationIT Education & Training（10）sort方法：數(shù)組排序 var a1=new Array(1,4,2,3,5); alert(a1.sort(); /輸出1,2,3,4,5 另外它的sort方法可以指定比較函數(shù)，根據(jù)比較函數(shù)進行排序，例： function compare(a,b) return (b-a); var a1=new Array(1,4,2,3,5); alert(a1.sort(compare

31、); /輸出5,4,3,2,1 （11）reverse方法：將數(shù)組倒序 Neusoft Institute of InformationIT Education & Training八、String對象主要屬性和方法 例如：var myString = “This is a sample”;（1）charAt：返回字串對象在指定位置處的字符 myString.charAt(2)；/返回i（2）charCodeAt：返回字串對象在指定位置處字符的10進制的ASCII碼 myString.charCodeAt(2)；/返回105（3）indexOf：要查找的字串在字串對象中的位置 myString

32、.indexOf(“is”)；/返回2（4）lastIndexOf：要查找的字串在字串對象中的最后位置 myString.lastIndexOf(“is”)；Neusoft Institute of InformationIT Education & Training（5）substr方法：截取字串 myString.substr(10,3)；/返回sam，其中10表示位置，3表示長度 （6）substring方法：截取字串 myString.substring(5,9)；/返回is a,其中5表示開始位置，9表示結(jié)束位置（7）split方法：分隔字串到一個數(shù)組中 var a = myStri

33、ng.split( ); /a0 = “This” a1=“is” a2=“a” a3=“sample”（8）replace方法 myString.replace(“sample”,”apple”); /結(jié)果”This is a apple”Neusoft Institute of InformationIT Education & Training（9）toLowerCase方法：變成小寫字母 myString.toLowerCase()；/ this is a sample（10）toUpperCase方法，變成大寫字母 myString. toUpperCase();/THIS IS A

34、 SAMPLE （11）prototype屬性 注：JavaScript中的string沒有像C#中的Trim（）方法，但可以利用prototype屬性為其添加 例如，我們設計三個函數(shù)LTrim、RTrim、Trim分別剪切字串的左邊多余空格、右邊多余空格、左右多余空格Neusoft Institute of InformationIT Education & Training function RTrim(str) var i= str.length-1; while(str.charAt(i) = & i=0) -i; str = str.substring(0,i+1); return

35、str;Neusoft Institute of InformationIT Education & Trainingfunction LTrim(str) var i =0; while(str.charAt(i) = & istr.length) +i; str = str.substring(i,str.length) return str;function Trim(str) return(LTrim(RTrim(str);Neusoft Institute of InformationIT Education & Training使用prototype屬性為String類添加Trim

36、方法 Stotype.Trim = function() return Trim(this); 這里表示為String類添加了一個方法叫作Trim方法，這個Trim方法調(diào)用Trim函數(shù)實現(xiàn)。同理，還可以為String類添加LTrim和RTrim方法 Stotype.LTrim = function() return LTrim(this); Stotype.RTrim = function()return RTrim(this);Neusoft Institute of InformationIT Education & Training第

37、六部分 BOM（瀏覽器對象模型） 它提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象一、體系結(jié)構Neusoft Institute of InformationIT Education & Training二、Window對象導航和打開新窗口 使用window.open（）方法，該方法接受4個參數(shù)，即url、新窗口的名字、特性字符串和說明是否用新載入的頁面替換當前載入的頁面的boolean值，一般只用前三個. 特性字符串是用逗號分隔的設置列表，它定義新創(chuàng)建的窗口的某些方面。 例： window.open(“1.htm”,”mywindow”,”height=150,width=300, 1. to

38、p=10,left=10,resizable=yes”); Neusoft Institute of InformationIT Education & Training 設置值說明left Number 新創(chuàng)建的窗口的左坐標，不能為負topNumber 新創(chuàng)建的窗口的頂坐標，不能為負heightNumber 高度，不能小于100widthNumber 寬度，不能小于100resizableyes,no 是否可拖動調(diào)整大小，缺省為falsescrollable yes,no不能容納內(nèi)容時是否滾動，缺省為falsetoolbaryes,no 是否顯示工具欄，缺省為falsestatusyes,n

39、o 是否顯示狀態(tài)欄，缺省為falselocationyes,no 是否顯示地址欄，缺省為false特性字符串設置特性字符串設置Neusoft Institute of InformationIT Education & Training2. 關閉窗口 window.close(); 關閉前有的瀏覽器（IE）會提示。系統(tǒng)對話框 （1）alert方法，顯示一個警告框； （2）confirm方法3. confirm（“你真的要刪除么?”);Neusoft Institute of InformationIT Education & Training 當用戶點擊確定，返回true，取消則返回false

40、 if(confirm(你真的要刪除么？) alert(刪除); else alert(不刪除); （3）prompt方法 接受兩個參數(shù)：顯示文本和缺省答案Neusoft Institute of InformationIT Education & Training 若點擊確定，則返回輸入值，取消則返回null值 var result= prompt(你的姓名, 黃波); if(result!=null) alert(result); 注：這三種對話框都是模式化的，即用戶不操作，不能在瀏覽器中作任何操作!Neusoft Institute of InformationIT Education

41、& Training4. 狀態(tài)欄 使用window.status=“”設置狀態(tài)欄信息；5. 時間間隔和暫停 所謂暫停，是在指定的毫秒數(shù)后執(zhí)行指定的代碼。時間間隔是指反復執(zhí)行指定的代碼，每次執(zhí)行之間等待指定的毫秒數(shù)。 （1）使用setTimeout實現(xiàn)暫停 setTimeout(“alert(hello)”,3000)； 或 setTimeout(函數(shù)名，3000);Neusoft Institute of InformationIT Education & Training function sayHello() alert(hello); 第一個參數(shù)使用函數(shù)指針或引用，例如 setTimeo

42、ut(sayHello,3000); 若有參數(shù)，則必須 setTimeout(function()sayHello(1,2);,3000); 調(diào)用setTimeout時，會創(chuàng)建一個數(shù)字暫停ID，要取消可使用clearTimeout，并把暫停ID傳給它 var tid= setTimeout(sayHello,3000); clearTimeout(tid); Neusoft Institute of InformationIT Education & Training（2）使用setInterval定義間隔 用法與setTimeout基本類似，如 setInterval(sayHello,30

43、00); 如果調(diào)用函數(shù)時要想傳遞參數(shù)，必須： setInterval(function()sayHello(1,2);,3000); 它也會創(chuàng)建間隔ID，若不取消，一直執(zhí)行，直到頁面卸載為止，使用clearInterval取消 var sid= setInterval(sayHello,3000); clearInterval(sid); Neusoft Institute of InformationIT Education & Training6. 歷史 后退： window.history.go（-1）; 后退一頁 與此類推 window.history.go(-2)；后退兩頁 前進 w

44、indow.history.go(1); 也可用： window.history.back(); window.history.forward();Neusoft Institute of InformationIT Education & Training三、document對象 這個對象比較獨特，它既屬于BOM，又屬于DOM。1. document對象集合集合集合說明說明anchors頁面中所有錨的集合（由表示）applets頁面中所有applet的集合embeds頁面中所有潛入對象的集合（由標簽表示forms頁面中所有表單的集合images頁面中所有圖像的集合links頁面中所有鏈接的集

45、合（由表示）Neusoft Institute of InformationIT Education & Training例如： 要訪問body中的img圖像，可用 document.images“imgHome” 訪問表單中的輸入框 document.forms“data”.txtEmail Neusoft Institute of InformationIT Education & Training 這時這些對象的所有特性都變成了該對象的屬性，可以進行設置或讀取，例如： function showMessage() alert(document.imagesimgHome.src); al

46、ert(document.formsdata.txtEmail.value); document.imagesimgHome.src=pop.gif; document.formsdata.txtEmail.value = 這是測試一下; Neusoft Institute of InformationIT Education & Training2. write和writeln方法 這兩個方法都接受一個字符串參數(shù)，在當前HTML文檔中輸出字符串，唯一區(qū)別：writeln在字串末尾加一個（n） 動態(tài)引入.js文件的辦法 document.write(); 注意：這種寫法會導致錯誤，因為瀏覽器一

47、遇到，它會假定其中代碼是完整的（即使它出現(xiàn)字符串中). document.write(“” + “”); /正確寫法，將分成兩部分 Neusoft Institute of InformationIT Education & Training四、location對象導航 使用location.href= URL 屬性 例： 重新載入 location.reload()；/重新從緩存中載入頁面 location.reload(true); /重新從服務器載入頁面清空網(wǎng)頁 location.href=“about:blank”; Neusoft Institute of InformationIT

48、 Education & Training五、frame對象 1. 框架實例：Neusoft Institute of InformationIT Education & Training2. 框架的使用 （1）創(chuàng)建普通的XHTML網(wǎng)頁； （2）創(chuàng)建框架集文檔 在框架集文檔也是XHTML頁面，在頁面中指示網(wǎng)頁瀏覽器將窗口分為幾個框架，并指定每一框架應顯示哪個網(wǎng)頁。 要注意的是，框架集的XHTML所使用的DOCTYPE必須是 XHTML 1.1不支持框架！Neusoft Institute of InformationIT Education & Training 例1：在一個窗口下同時顯示三個

49、頁面Neusoft Institute of InformationIT Education & Training 無標題頁 Neusoft Institute of InformationIT Education & Training 框架集文檔中，可以不使用body標簽，必須使用標簽，它有兩個屬性cols和rows，cols表示按列分布網(wǎng)頁，rows表示按行分布網(wǎng)頁。可以使用像素值或%，*表示盡可能占據(jù)窗口的可用空間。同時使用標簽，利用其src屬性指定鏈接的網(wǎng)頁url。 對于不支持框架的瀏覽器，可以在標簽中使用來顯示內(nèi)容例如： 這是瀏覽器不支持框架時顯示的內(nèi)容 Neusoft Instit

50、ute of InformationIT Education & Training 例2：既有行顯示，也有列顯示Neusoft Institute of InformationIT Education & Training 當框架中既有行顯示，也有列顯示時，必須使用框架標簽的嵌套 Neusoft Institute of InformationIT Education & Training 例3：框架的導航 在導航中地址欄的url是保持不變的Neusoft Institute of InformationIT Education & Training框架文件內(nèi)容： 左邊導航頁面的內(nèi)容： 淘寶網(wǎng)

51、 新浪這里表示在框架showframe中顯示Neusoft Institute of InformationIT Education & Training3.框架中一些特別的屬性 （1）控制邊框 在每個標簽中，使用屬性frameborder=“0”不顯示，frameborder=1顯示 （2）是否允許調(diào)整框架大小 在每個標簽中，使用屬性noresize=“noresize”控制； （3）是否有滾動條 在每個標簽中，使用屬性scrolling=“yes/no/auto”控制 Neusoft Institute of InformationIT Education & Training4. 標簽

52、它用來在一個HTML文檔內(nèi)部顯示一個框架，例如 這只是一個iframe的測試 Neusoft Institute of InformationIT Education & Training5. 框架(frame）對象控制上下框架：框架組窗口對象.document.body.rows=尺寸字串；左右框架：框架組窗口對象.document.body.cols=尺寸字串；例如：window.parent.document.body.rows=“50%,*”;Neusoft Institute of InformationIT Education & Training第七部分 DOM（文檔對象模型）

53、DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程的一套API接口，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，其中以Mozilla的瀏覽器最與標準接近，幾乎支持所有的DOM Level 2，以及部分DOM Level 3。Opera和Safari也支持所有的DOM Level1和大部分DOM Level 2。IE對DOM Level1的實現(xiàn)最差，還有待完善！Neusoft Institute of InformationIT Education & Training一、訪問指定節(jié)點 1. getElementsByTagName() 返回一個包含所有指

54、定標簽名的的集合返回一個包含所有指定標簽名的的集合 例如：返回文檔中所有元素的列表： var oImgs = document.getElementsByTagName(img); 在把所有的img標簽存儲在oImgs中后，可以使用序號或名稱進行子項的訪問 alert (oImgs0.tagName)；/ 輸出標簽名“IMG”或 alert(oImgs“img1”.tagName); /img1為某個img的name屬性 Neusoft Institute of InformationIT Education & Training 獲取所有元素 在FireFox等瀏覽器下： var oAllE

55、lement = document. getElementsByTagName（“*”）； 在IE 6.0下： var oAllElement = document. all; /使用這句，可用來判斷是否是IE瀏覽器2. getElementsByName（） 用來獲取所有用來獲取所有name屬性等于指定值的元素集合屬性等于指定值的元素集合 例如：獲取所有name屬性等于”img1”的所有元素 var oImgs = document.getElementsByName(img1); alert(oImgs0.alt); /輸出第一個元素的alt屬性值 Neusoft Institute of

56、 InformationIT Education & Training3. getElementById（） 返回返回id屬性等于指定值的元素屬性等于指定值的元素. 在HTML中，id是唯一的，這也是從DOM文檔樹中獲取單個指定元素的最快的方法。 例如：獲取id屬性為img1的元素 var oImgs = document.getElementById(img1); alert(oImgs.alt); /輸出找到元素的alt屬性值 注：IE中有個嚴重的Bug! Neusoft Institute of InformationIT Education & Training 當var oImgs

57、= document.getElementById(“img1”);時，由于第一個img標簽排在前面，它的name屬性也為img1，使用這個方法時，獲得的卻是第一個img標簽對象，使用 alert(oImgs.src); /輸出的是2.gif二、處理元素屬性getAttribute 獲取元素的某個屬性 例如： var oImgs = document.getElementById(“img1”); alert(oImgs. getAttribute(“src”);setAttribute 設置元素的某個屬性 Neusoft Institute of InformationIT Educatio

58、n & Training例如： var oImgs = document.getElementById(“img1”); oImgs.setAttribute(src,test.gif); /設置圖片對象的src屬性為test.gif3. removeAttribute 移除元素的某個屬性 例如：相移除email中的value屬性 可用 var iHid = document.getElementById(email); iHid.removeAttribute(“value”,1);/1表示忽略大小寫 但這個方法在IE上工作不正常 Neusoft Institute of Informati

59、onIT Education & Training三、一些高級DOM技術動態(tài)修改文檔內(nèi)容 （1）使用innerHTML 用來讀取、添加或刪除指定標簽中的內(nèi)容，其中改變后的內(nèi)容也可以包括HTML標簽 例如：頁面源代碼如下 Neusoft Institute of InformationIT Education & Training讀取 function test() var oDiv = document.getElementById(content); alert(oDiv.innerHTML); /輸出： 修改 function test() var oDiv = document.getE

60、lementById(content); oDiv.innerHTML= Neusoft Institute of InformationIT Education & Training（2）使用outerHTML 將刪除指定的標簽本身，把它替換成新的HTML內(nèi)容 例如： function test() var oDiv = document.getElementById(content); oDiv.outerHTML=; 將刪除div標簽本身，將其替換成 注：這個方法僅IE支持Neusoft Institute of InformationIT Education & Training2.