版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
JavaScript程序設(shè)計(jì)入門?ASP.NETWeb應(yīng)用開(kāi)發(fā)（C#）——JavaScript程序設(shè)計(jì)入門授課人：黃波Email：huangbo@Tel：82878185QQ：569960256
主體綱要第一部分JavaScript簡(jiǎn)介第二部分JavaScript組成第三部分JavaScript案例演示第四部分JavaScript編程簡(jiǎn)介第五部分JavaScript編程基礎(chǔ)第六部分BOM（瀏覽器對(duì)象模型）第七部分DOM（文檔對(duì)象模型）第一部分JavaScript簡(jiǎn)介一、JavaScript的起源
1995年NetScape（網(wǎng)景瀏覽器）中出現(xiàn)，前身叫作LiveScript，NetScape公司與Sun公司聯(lián)手開(kāi)發(fā)，為了利用Java這個(gè)時(shí)髦記匯，將其更名為JavaScript。
JavaScript和Java根本就是兩種語(yǔ)言?。。。∥④洖榱诉M(jìn)軍瀏覽器市場(chǎng)，開(kāi)發(fā)了一個(gè)JavaScript的克隆版，叫JScript。
1997年，JavaScript作為一個(gè)草案提交給ECMA（歐洲計(jì)算機(jī)制造商協(xié)會(huì)），定義了ECMAScript.二、JavaScript的特點(diǎn)1、腳本編寫(xiě)語(yǔ)言它是一種腳本語(yǔ)言，采用小程序段的方式進(jìn)行編程。它的基本結(jié)構(gòu)形式如我們已學(xué)過(guò)的C#，但它不像C#必須先編譯，而網(wǎng)頁(yè)在瀏覽器中運(yùn)行時(shí)逐行被“翻譯”，它與HTML標(biāo)簽結(jié)合在一起。2、跨平臺(tái)性
JavaScript是依賴于瀏覽器本身，與操作系統(tǒng)無(wú)關(guān)。3、基于對(duì)象它是一種基于對(duì)象（ObjectBased）和事件驅(qū)動(dòng)（EventDriver）的編程語(yǔ)言，它本身提供了非常豐富的內(nèi)部對(duì)象供設(shè)計(jì)人員使用。
4、用于客戶端事先在網(wǎng)頁(yè)中編寫(xiě)好代碼，此代碼隨HTML文件一起發(fā)送到客戶端的瀏覽器上，由瀏覽器對(duì)這些代碼進(jìn)行解釋執(zhí)行，這樣就減輕了服務(wù)器的負(fù)擔(dān)。三、JavaScript的作用
1.校驗(yàn)用戶輸入內(nèi)容；
2.動(dòng)態(tài)顯示網(wǎng)頁(yè)內(nèi)容；
3.為靜態(tài)網(wǎng)頁(yè)增加一些特效
4.AJAX程序的核心技術(shù)之一如果你有一些編程經(jīng)驗(yàn)，會(huì)覺(jué)得JavaScript比較熟悉，即使沒(méi)有任何編程經(jīng)驗(yàn)，也沒(méi)什么問(wèn)題，網(wǎng)上有很多JavaScript特效，你可以直接Copy進(jìn)網(wǎng)頁(yè)使用。第二部分JavaScript的組成
ECMAScript：不與任何具體瀏覽器相綁定，只描述以下內(nèi)容：語(yǔ)法、類型、語(yǔ)句、關(guān)鍵字、保留字、運(yùn)算符、對(duì)象。
DOM：文檔對(duì)象模型，是HTML和XML的應(yīng)用程序接口（API），DOM把整個(gè)頁(yè)面規(guī)劃成由節(jié)點(diǎn)層級(jí)構(gòu)成的文檔。<html><head><title>SamplePage</title></head><body><p>HelloWorld!</p></body></html>
DOM通過(guò)創(chuàng)建樹(shù)來(lái)表示文檔，從而使開(kāi)發(fā)者對(duì)文檔的內(nèi)容和結(jié)構(gòu)具有空前的控制力。用DOMAPI可以輕松地刪除、添加和替換節(jié)點(diǎn)。
BOM：瀏覽器對(duì)象模型，可以對(duì)瀏覽器窗口進(jìn)行訪問(wèn)和操作，由于沒(méi)有相關(guān)的BOM標(biāo)準(zhǔn)，每種瀏覽器都有自己的BOM實(shí)現(xiàn)。主要實(shí)現(xiàn)：彈出新的窗口；移動(dòng)、關(guān)閉瀏覽器窗口以及調(diào)整大??；提供用戶屏幕分辨詳細(xì)信息的屏幕對(duì)象
…….第三部分Java案例演示
1.一些有趣的例子；
2.見(jiàn)案例中的JavaScript各種特效.rar3.網(wǎng)絡(luò)資源：
/tech/web/2006/3330.asp
收錄了很多JavaScript實(shí)現(xiàn)的特效；
4.一個(gè)類似于WindowsXP的網(wǎng)絡(luò)操作系統(tǒng)界面，這也是
JavaScript與其他技術(shù)結(jié)合完成的請(qǐng)用FireFox訪問(wèn)：
第四部分JavaScript編程簡(jiǎn)介一、編輯軟件編輯JavaScript可以使用任何一種文本編輯器，例如記事本，為降低JavaScript難度，我們使用1stJavaScriptEditor，由于破解不完善，智能提示必須自己手工啟動(dòng)
菜單：Edit–Preference–TextEditor–IntelliSense二、調(diào)試器使用VS.NET2005，同樣支持?jǐn)帱c(diǎn)設(shè)置，F(xiàn)10、F11操作但有兩條必須注意：
設(shè)置IE中的Internet選項(xiàng)將高級(jí)設(shè)置中的禁用腳本調(diào)試（InternetExplorer）（英文：DisableScriptDebugging（InternetExplorer))關(guān)閉在VS.NET2005IDE中直接運(yùn)行三、JavaScript的編寫(xiě)形式直接把JavaScript嵌入在HTML任何標(biāo)簽中
這里的document對(duì)象指的是當(dāng)前的HTML文檔2.使用JavaScript函數(shù)時(shí)，將函數(shù)定義在<head>標(biāo)簽中3.使用單獨(dú)的.js文件在<head>標(biāo)簽中鏈接外部.js文件利用<script>
<scriptlanguage="javascript"type="text/javascript"src="JScript.js"></script>
Jscript.js內(nèi)容第五部分JavaScript編程基礎(chǔ)一、JavaScript的變量區(qū)分大小寫(xiě)，變量是弱類型的，ECMAScript中的變量無(wú)特定的類型，變量的聲明，使用關(guān)鍵字var
可以隨時(shí)改變變量所存數(shù)據(jù)的類型
varcolor=“red”;varnum=25;varvisible=false;
這種特性在.NET3.5框架中已被引入?。。?！
與C#中的變量不同，變量并不一定要被初始化
vartest;test=55;test=“hi”;二、原始類型
ECMAScript有5種原始類型（primitivetype)：undefined、null、boolean、number和string。
1、undefined類型
varoTemp；聲明的變量未初始化時(shí)，該變量的初始值是undefined.
函數(shù)（function）無(wú)明確2、null類型用于尚未存在的對(duì)象，值undefined實(shí)際是從值null派生的，ECMAScript把它們定義為相等
null==undefined;//這個(gè)表達(dá)式返回true3、boolean類型只有兩個(gè)值true和false;4、number類型任何數(shù)字都被看作number類型的字面量
varnum=55;varnum=070；//56的八進(jìn)制
varnum=0x1f;//31的16進(jìn)制
varnum=5.0;
有一個(gè)特殊的值是NaN，表示非數(shù)（NotaNumber）可以使用isNaN函數(shù)判斷，例如:isNaN(“blue”);返回true5、string類型字符串類型三、typeof運(yùn)算符對(duì)變量或值調(diào)用typeof運(yùn)算符將返回下列的值之一：
“undefined”變量是undefined類型的
“boolean”變量是boolean類型的
“number”變量是number型的
“string”變量是string型的
“object”變量是一種引用類型或null類型例：vari=2;alert(typeof(i));//得到number類型四、
類型轉(zhuǎn)換（1）轉(zhuǎn)換成字符串
3種主要的原始值boolean、number和string都有toString方法（2）轉(zhuǎn)換成數(shù)字
parseInt方法和parseflota方法只有對(duì)string類型調(diào)用這些方法，它們才能正確運(yùn)行；對(duì)其他類型都返回NaN;parseInt方法首先檢查位置0處的字符，判斷它是否是個(gè)有效數(shù)字，若有效，再往下檢查，直到發(fā)現(xiàn)非數(shù)字，并返回前面的檢查結(jié)果。
例：varnum1=parseInt(“1234”);//得到1234
varnum2=parseInt（”1234blue”）;//返回1234varnum3=parseInt(“blue”）;//返回NaNparseFloat的使用類似：
varfnum1=parseFloat（”1234blue”);//返回1234.0varfnum2=parseFloat(“blue”）;//返回NaN五、
函數(shù)
1.語(yǔ)法規(guī)則
function函數(shù)名(參數(shù)1，參數(shù)2）
{
return值；}說(shuō)明：（1）JavaScript的函數(shù)與C#的方法或函數(shù)不同，function后面不需要定義返回值類型；（2）當(dāng)使用多個(gè)參數(shù)時(shí)，參數(shù)間以逗號(hào)隔開(kāi)；
（3）JavaScript中函數(shù)的傳遞也是分兩種，按值傳遞和按引用傳遞；2.argument對(duì)象使用特殊對(duì)象arguments，開(kāi)發(fā)者無(wú)需指出參數(shù)名，就能訪問(wèn)它們。例如：functionSayHi(){if(arguments[0]=="bye"){return;}alert(arguments[0]);}調(diào)用形式1:<scriptlanguage="javascript">SayHi("test");</script>調(diào)用形式2：<scriptlanguage="javascript">SayHi("test”,123);</script>
與其他語(yǔ)言不同，ECMAScript不會(huì)驗(yàn)證傳遞給函數(shù)的參數(shù)的個(gè)數(shù)是否相等，函數(shù)可以接受任意個(gè)數(shù)的參數(shù)（Netscape的文檔最多25個(gè)），而不會(huì)引發(fā)任何錯(cuò)誤。還可以在函數(shù)內(nèi)使用argument.length屬性檢測(cè)參數(shù)個(gè)數(shù)
functionHowManyArgs(){alert(arguments.length);}
利用arguments對(duì)象判斷傳遞給函數(shù)的參數(shù)個(gè)數(shù)，即可模擬函數(shù)重載。
六、事件驅(qū)動(dòng)及事件處理
EventDrive：JavaScript是基于對(duì)象(object-based）的語(yǔ)言，基于對(duì)象的基體特征，就是采用事件驅(qū)動(dòng)（eventdrive)
事件：鼠標(biāo)或鍵盤的動(dòng)作；事件驅(qū)動(dòng)：由鼠標(biāo)或鍵盤的動(dòng)作引發(fā)的一連串程序的動(dòng)作叫事件驅(qū)動(dòng)（eventdrive）事件處理程序（EventHandler）：通常由函數(shù)執(zhí)行。網(wǎng)頁(yè)中的事件一般分為鼠標(biāo)事件、鍵盤事件及其他事件。1.一些常用的事件
表1常用鼠標(biāo)事件事件意義onmousedown按下鼠標(biāo)鍵onmousemove移動(dòng)鼠標(biāo)onmouseout鼠標(biāo)離開(kāi)某一個(gè)網(wǎng)頁(yè)對(duì)象onmouseover鼠標(biāo)移動(dòng)到某一個(gè)網(wǎng)頁(yè)對(duì)象onmouseup松開(kāi)鼠標(biāo)鍵onclick單擊鼠標(biāo)鍵ondbclick雙擊鼠標(biāo)鍵表2常用鍵盤事件事件意義onkeydown按下一個(gè)鍵onkeyup松開(kāi)一個(gè)鍵onkeypress按下然后松開(kāi)一個(gè)鍵
表3其他事件事件意義onfocus焦點(diǎn)到一個(gè)對(duì)象上onblur從一個(gè)對(duì)象失去焦點(diǎn)onload載入網(wǎng)頁(yè)文檔onunLoad卸載網(wǎng)頁(yè)文檔onselect文本框中選擇了文本內(nèi)容onchange文字變化或列表選項(xiàng)變化onerror出錯(cuò)onsubmit提交表單onreset重置表單onabort中斷顯示圖片3.用JavaScript處理事件
JavaScript語(yǔ)言與HTML文檔相關(guān)聯(lián)主要是通過(guò)“事件”，JavaScript的函數(shù)就是用于處理事件的程序，語(yǔ)法規(guī)則是：事件=“函數(shù)名”或事件=“JavaScript語(yǔ)句”例如：（1）
<inputtype="button"value="[測(cè)試]“onclick="alert('helloworld');"/>
（2）也可以定義好函數(shù)后再調(diào)用
functionmessage(){alert('helloworld');}
<inputtype="button"
value="[測(cè)試]“
onclick=“message();”/>4.JavaScript練習(xí)（1）當(dāng)裝入HTML文檔時(shí)調(diào)用LoadForm（）函數(shù)，而退出該文檔進(jìn)入另一個(gè)HTML文檔時(shí)則首先調(diào)用
UnLoadForm（）函數(shù)，確認(rèn)后方可進(jìn)入
LoadForm（）函數(shù)：提示用戶“這是一個(gè)自動(dòng)裝載例子”UnLoadForm（）函數(shù)：提示用戶“這是一個(gè)自動(dòng)卸載的例子”<head><title>無(wú)標(biāo)題頁(yè)</title><scripttype="text/javascript"language="javascript">functionLoadForm(){alert("這是一個(gè)裝載的例子");}
functionUnLoadForm(){alert("這是一個(gè)卸載的例子");}</script></head><bodyonload="LoadForm();"onunload="UnLoadForm();"><ahref="t.htm">測(cè)試</a></body>（2）一個(gè)輸入框中，當(dāng)沒(méi)有輸入值時(shí)，提示用戶：請(qǐng)輸入！<head><title>無(wú)標(biāo)題頁(yè)</title><scripttype="text/javascript"language="javascript">functionvalidate(){if(user.value==""){alert("請(qǐng)輸入!!!");}}</script></head><body><inputtype="text"name="user"/><inputtype="button"value="提交"onclick="validate();"/></body>若要驗(yàn)證form中提交的數(shù)據(jù)<body><formname="data"action="#"method="get"onsubmit="returnvalidate()"><inputtype="text"name="user"/><inputtype="submit"value="提交"/></form></body>JavaScript腳本為：
<scriptlanguage="javascript"type="text/javascript">functionvalidate(){if(document.data.user.value==""){alert("wrong");
returnfalse;}}</script>七、數(shù)組對(duì)象
1.JavaScript數(shù)組的定義（1）新建一個(gè)長(zhǎng)度為0的數(shù)組
varmyArray=newArray（）;
（2）長(zhǎng)度為n的數(shù)組
varmyArray=newArray(n);
（3）新建一個(gè)指定長(zhǎng)度的數(shù)組，并賦初值varmyArray=newArray(1,2,3);
（4）訪問(wèn)數(shù)組的某個(gè)元素
myArray[2]=4;vari=myArray[2];
2.動(dòng)態(tài)數(shù)組
JavaScript的數(shù)組的長(zhǎng)度不是固定不變，若要增加數(shù)組的長(zhǎng)度，只要直接賦值。例如：
varmyArray=newArray(1,2,3);myArray[3]=4;
這時(shí)myArray的長(zhǎng)度為4
如果
varmyArray=newArray(1,2,3);myArray[4]=4;
則長(zhǎng)度為5,其中myArra[3]的值為undefined3.數(shù)組的常用屬性和方法（1）length屬性：獲取數(shù)組長(zhǎng)度（2）concat方法例：vara=newArray(1,2,3);varb=newArray(4,5,6);alert(a.concat(b));//輸出1,2,3,4,5,6alert(a.length);//長(zhǎng)度不變，仍為3
也可以直接連接數(shù)值
a.concat(4,5,6);
（3）join方法，連接數(shù)組，缺省為”,”
例：vara=newArray(1,2,3);alert(a.join());//輸出1,2,3
也可用指定的符號(hào)連接，例
alert(a.join(“-”));（4）push方法，在數(shù)組的結(jié)尾添加一個(gè)或多個(gè)項(xiàng)，同時(shí)更改數(shù)組的長(zhǎng)度例：vara=newArray(1,2,3);a.push(4,5,6);alert(a.length);//輸出為6（5）pop方法，刪除最后一個(gè)數(shù)組項(xiàng)，將其作為函數(shù)值返回例：vara1=newArray(1,2,3);alert(a1.pop());//輸出3alert(a1.length);//輸出2
（6）shift方法:刪除數(shù)組中的第一個(gè)項(xiàng)，將其作為函數(shù)值返回
例如：vara1=newArray(1,2,3);alert(a1.shift());//輸出1alert(a1.length);//輸出2（7）unshift方法:添加元素至數(shù)組開(kāi)始處例如：
vara1=newArray(1,2,3);a1.unshift(4,5,6)alert(a1);//輸出4,5,6,1,2,3（8）slice方法：返回?cái)?shù)組的片斷。（或者說(shuō)子數(shù)組）。有兩個(gè)參數(shù)，分別指定開(kāi)始和結(jié)束的索引（不包括第二個(gè)參數(shù)索引本身）。如果只有一個(gè)參數(shù)該方法返回從該位置開(kāi)始到數(shù)組結(jié)尾的所有項(xiàng)。如果任意一個(gè)參數(shù)為負(fù)的，則表示是從尾部向前的索引計(jì)數(shù)。比如-1表示最后一個(gè)，-3表示倒數(shù)第三個(gè)。
vara1=newArray(1,2,3,4,5);alert(a1.slice(1,3));//輸出2,3alert(a1.slice(1));//輸出2,3,4,5alert(a1.slice(1,-1));//輸出2,3,4alert(a1.slice(-3,-2));//輸出3（9）splice方法：從數(shù)組中替換或刪除元素。第一個(gè)參數(shù)指定刪除或插入將發(fā)生的位置。第二個(gè)參數(shù)指定將要?jiǎng)h除的元素?cái)?shù)目，如果省略該參數(shù)，則從第一個(gè)參數(shù)的位置到最后都會(huì)被刪除。splice()會(huì)返回被刪除元素的數(shù)組。如果沒(méi)有元素被刪，則返回空數(shù)組。例：vara1=newArray(1,2,3,4,5);alert(a1.splice(3));//輸出4,5alert(a1.length);//輸出3vara1=newArray(1,2,3,4,5);alert(a1.splice(1,3));//輸出2,3,4alert(a1.length);//輸出2（10）sort方法：數(shù)組排序
vara1=newArray(1,4,2,3,5);alert(a1.sort());//輸出1,2,3,4,5
另外它的sort方法可以指定比較函數(shù)，根據(jù)比較函數(shù)進(jìn)行排序，例：functioncompare(a,b){return(b-a);}vara1=newArray(1,4,2,3,5);
alert(a1.sort(compare));//輸出5,4,3,2,1
（11）reverse方法：將數(shù)組倒序
八、String對(duì)象主要屬性和方法例如：varmyString=“Thisisasample”;（1）charAt：返回字串對(duì)象在指定位置處的字符
myString.charAt(2)；//返回i（2）charCodeAt：返回字串對(duì)象在指定位置處字符的10進(jìn)制的ASCII碼myString.charCodeAt(2)；//返回105（3）indexOf：要查找的字串在字串對(duì)象中的位置myString.indexOf(“is”)；//返回2（4）lastIndexOf：要查找的字串在字串對(duì)象中的最后位置myString.lastIndexOf(“is”)；（5）substr方法：截取字串
myString.substr(10,3)；//返回sam，其中10表示位置，3表示長(zhǎng)度（6）substring方法：截取字串
myString.substring(5,9)；//返回isa,其中5表示開(kāi)始位置，9表示結(jié)束位置（7）split方法：分隔字串到一個(gè)數(shù)組中vara=myString.split("");
//a[0]=“This”a[1]=“is”a[2]=“a”a[3]=“sample”（8）replace方法
myString.replace(“sample”,”apple”);//結(jié)果”Thisisaapple”（9）toLowerCase方法：變成小寫(xiě)字母
myString.toLowerCase()；//thisisasample（10）toUpperCase方法，變成大寫(xiě)字母
myString.toUpperCase();//THISISASAMPLE
（11）prototype屬性注：JavaScript中的string沒(méi)有像C#中的Trim（）方法，但可以利用prototype屬性為其添加例如，我們?cè)O(shè)計(jì)三個(gè)函數(shù)LTrim、RTrim、Trim分別剪切字串的左邊多余空格、右邊多余空格、左右多余空格
functionRTrim(str){vari=str.length-1;while(str.charAt(i)==""&&i>=0){--i;}str=str.substring(0,i+1);returnstr;}functionLTrim(str){vari=0;while(str.charAt(i)==""&&i<str.length){++i;}str=str.substring(i,str.length)returnstr;}functionTrim(str){return(LTrim(RTrim(str)));}使用prototype屬性為String類添加Trim方法
Stotype.Trim=function(){returnTrim(this);}
這里表示為String類添加了一個(gè)方法叫作Trim方法，這個(gè)Trim方法調(diào)用Trim函數(shù)實(shí)現(xiàn)。同理，還可以為String類添加LTrim和RTrim方法
Stotype.LTrim=function(){returnLTrim(this);}
Stotype.RTrim=function(){returnRTrim(this);}第六部分BOM（瀏覽器對(duì)象模型）它提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象一、體系結(jié)構(gòu)二、Window對(duì)象導(dǎo)航和打開(kāi)新窗口使用window.open（）方法，該方法接受4個(gè)參數(shù)，即url、新窗口的名字、特性字符串和說(shuō)明是否用新載入的頁(yè)面替換當(dāng)前載入的頁(yè)面的boolean值，一般只用前三個(gè).
特性字符串是用逗號(hào)分隔的設(shè)置列表，它定義新創(chuàng)建的窗口的某些方面。例：
window.open(“1.htm”,”mywindow”,”height=150,width=300,top=10,left=10,resizable=yes”);
設(shè)置值說(shuō)明leftNumber新創(chuàng)建的窗口的左坐標(biāo)，不能為負(fù)topNumber新創(chuàng)建的窗口的頂坐標(biāo)，不能為負(fù)heightNumber高度，不能小于100widthNumber寬度，不能小于100resizableyes,no是否可拖動(dòng)調(diào)整大小，缺省為falsescrollableyes,no不能容納內(nèi)容時(shí)是否滾動(dòng)，缺省為falsetoolbaryes,no是否顯示工具欄，缺省為falsestatusyes,no是否顯示狀態(tài)欄，缺省為falselocationyes,no是否顯示地址欄，缺省為false特性字符串設(shè)置2.關(guān)閉窗口
window.close();
關(guān)閉前有的瀏覽器（IE）會(huì)提示。系統(tǒng)對(duì)話框（1）alert方法，顯示一個(gè)警告框；（2）confirm方法
confirm（“你真的要?jiǎng)h除么?”);當(dāng)用戶點(diǎn)擊確定，返回true，取消則返回falseif(confirm("你真的要?jiǎng)h除么？")){alert("刪除");}else{alert("不刪除");}
（3）prompt方法接受兩個(gè)參數(shù)：顯示文本和缺省答案
若點(diǎn)擊確定，則返回輸入值，取消則返回null值
varresult=prompt("你的姓名","黃波");if(result!=null){alert(result);}注：這三種對(duì)話框都是模式化的，即用戶不操作，不能在瀏覽器中作任何操作!!!4.狀態(tài)欄使用window.status=“”設(shè)置狀態(tài)欄信息；5.時(shí)間間隔和暫停所謂暫停，是在指定的毫秒數(shù)后執(zhí)行指定的代碼。時(shí)間間隔是指反復(fù)執(zhí)行指定的代碼，每次執(zhí)行之間等待指定的毫秒數(shù)。（1）使用setTimeout實(shí)現(xiàn)暫停
setTimeout(“alert(‘hello’)”,3000)；或
setTimeout(函數(shù)名，3000);
functionsayHello(){alert("hello");}第一個(gè)參數(shù)使用函數(shù)指針或引用，例如setTimeout(sayHello,3000);
若有參數(shù)，則必須
setTimeout(function(){sayHello(1,2);},3000);
調(diào)用setTimeout時(shí)，會(huì)創(chuàng)建一個(gè)數(shù)字暫停ID，要取消可使用clearTimeout，并把暫停ID傳給它
vartid=setTimeout(sayHello,3000);clearTimeout(tid);
（2）使用setInterval定義間隔用法與setTimeout基本類似，如
setInterval(sayHello,3000);
如果調(diào)用函數(shù)時(shí)要想傳遞參數(shù)，必須：setInterval(function(){sayHello(1,2);},3000);
它也會(huì)創(chuàng)建間隔ID，若不取消，一直執(zhí)行，直到頁(yè)面卸載為止，使用clearInterval取消
varsid=setInterval(sayHello,3000);clearInterval(sid);
6.歷史后退：
window.history.go（-1）;后退一頁(yè)與此類推window.history.go(-2)；后退兩頁(yè)
前進(jìn)
window.history.go(1);
也可用：
window.history.back();window.history.forward();三、document對(duì)象
這個(gè)對(duì)象比較獨(dú)特，它既屬于BOM，又屬于DOM。1.document對(duì)象集合集合說(shuō)明anchors頁(yè)面中所有錨的集合（由<aname="anchorname"></a>表示）applets頁(yè)面中所有applet的集合embeds頁(yè)面中所有潛入對(duì)象的集合（由<embed/>標(biāo)簽表示forms頁(yè)面中所有表單的集合images頁(yè)面中所有圖像的集合links頁(yè)面中所有鏈接的集合（由<ahref=""></a>表示）例如：
<body><imgsrc=“l(fā)ogo.gif"name="imgHome"/><formmethod="post"action="1.htm"name="data"><inputtype="text"name="txtEmail"/><inputtype="submit"value="提交"/></form></body>要訪問(wèn)body中的img圖像，可用
document.images[“imgHome”]
訪問(wèn)表單中的輸入框
document.forms[“data”].txtEmail
這時(shí)這些對(duì)象的所有特性都變成了該對(duì)象的屬性，可以進(jìn)行設(shè)置或讀取，例如：functionshowMessage(){alert(document.images["imgHome"].src);alert(document.forms["data"].txtEmail.value);document.images["imgHome"].src="pop.gif";document.forms["data"].txtEmail.value="這是測(cè)試一下";}2.write和writeln方法這兩個(gè)方法都接受一個(gè)字符串參數(shù)，在當(dāng)前HTML文檔中輸出字符串，唯一區(qū)別：writeln在字串末尾加一個(gè)（\n）
動(dòng)態(tài)引入.js文件的辦法<scripttype="text/javascript">
document.write("<scripttype='text/javascript‘src='1.js'></script>");</script>注意：這種寫(xiě)法會(huì)導(dǎo)致錯(cuò)誤，因?yàn)闉g覽器一遇到</script>，它會(huì)假定其中代碼是完整的（即使它出現(xiàn)字符串中).document.write(“<scripttype=‘text/javascript’src=‘1.js’>”+“</scr”+“ipt>”);//正確寫(xiě)法，將</script>分成兩部分
四、location對(duì)象導(dǎo)航使用location.href=URL屬性例：
<inputtype=“button”value=“注冊(cè)”onclick=“alert(‘注冊(cè)成功');location.href='index.htm'"/>重新載入
location.reload()；//重新從緩存中載入頁(yè)面
location.reload(true);//重新從服務(wù)器載入頁(yè)面清空網(wǎng)頁(yè)
location.href=“about:blank”;
五、frame對(duì)象
1.框架實(shí)例：2.框架的使用（1）創(chuàng)建普通的XHTML網(wǎng)頁(yè)；（2）創(chuàng)建框架集文檔在框架集文檔也是XHTML頁(yè)面，在頁(yè)面中指示網(wǎng)頁(yè)瀏覽器將窗口分為幾個(gè)框架，并指定每一框架應(yīng)顯示哪個(gè)網(wǎng)頁(yè)。要注意的是，框架集的XHTML所使用的DOCTYPE必須是<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML1.1不支持框架?。。?！
例1：在一個(gè)窗口下同時(shí)顯示三個(gè)頁(yè)面<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd"><htmlxmlns="/1999/xhtml"><head><title>無(wú)標(biāo)題頁(yè)</title></head>
<framesetcols="25%,45%,*"><framesrc=""/><framesrc=""/><framesrc=""/></frameset></html>框架集文檔中，可以不使用body標(biāo)簽，必須使用<frameset>標(biāo)簽，它有兩個(gè)屬性cols和rows，cols表示按列分布網(wǎng)頁(yè)，rows表示按行分布網(wǎng)頁(yè)?？梢允褂孟袼刂祷?，*表示盡可能占據(jù)窗口的可用空間。同時(shí)使用<frame>標(biāo)簽，利用其src屬性指定鏈接的網(wǎng)頁(yè)url。對(duì)于不支持框架的瀏覽器，可以在<framset>標(biāo)簽中使用<noframes>來(lái)顯示內(nèi)容例如：
<noframes><body><p>這是瀏覽器不支持框架時(shí)顯示的內(nèi)容</p></body></noframes>
例2：既有行顯示，也有列顯示當(dāng)框架中既有行顯示，也有列顯示時(shí)，必須使用框架標(biāo)簽<frameset>的嵌套<framesetrows="30%,*"><framesrc=""/><framesetcols="50%,*"><framesrc=""/><framesrc=""/></frameset></frameset>例3：框架的導(dǎo)航
在導(dǎo)航中地址欄的url是保持不變的框架文件內(nèi)容：<framesetcols="20%,*"><framesrc="menu.htm"/><framesrc=“”name="showframe"/></frameset>左邊導(dǎo)航頁(yè)面的內(nèi)容：
<ul><li><ahref=""target="showframe">淘寶網(wǎng)</a></li><li><ahref=""target="showframe">新浪</a></li></ul>這里表示在框架showframe中顯示3.框架中一些特別的屬性（1）控制邊框
在每個(gè)<frame>標(biāo)簽中，使用屬性frameborder=“0”不顯示，frameborder=1顯示（2）是否允許調(diào)整框架大小在每個(gè)<frame>標(biāo)簽中，使用屬性noresize=“noresize”控制；（3）是否有滾動(dòng)條在每個(gè)<frame>標(biāo)簽中，使用屬性scrolling=“yes/no/auto”控制
4.<iframe>標(biāo)簽它用來(lái)在一個(gè)HTML文檔內(nèi)部顯示一個(gè)框架，例如<body><p>這只是一個(gè)iframe的測(cè)試</p>
<iframesrc=""style="width:580px;height:320px;"></iframe></body>5.框架(frame）對(duì)象控制上下框架：框架組窗口對(duì)象.document.body.rows=尺寸字串；左右框架：框架組窗口對(duì)象.document.body.cols=尺寸字串；例如：window.parent.document.body.rows=“50%,*”;第七部分DOM（文檔對(duì)象模型）DOM是文檔對(duì)象模型(DocumentObjectModel，是基于瀏覽器編程的一套API接口，W3C出臺(tái)的推薦標(biāo)準(zhǔn)，每個(gè)瀏覽器都有一些細(xì)微的差別，其中以Mozilla的瀏覽器最與標(biāo)準(zhǔn)接近，幾乎支持所有的DOMLevel2，以及部分DOMLevel3。Opera和Safari也支持所有的DOMLevel1和大部分DOMLevel2。IE對(duì)DOMLevel1的實(shí)現(xiàn)最差，還有待完善！一、訪問(wèn)指定節(jié)點(diǎn)
1.getElementsByTagName()
返回一個(gè)包含所有指定標(biāo)簽名的的集合例如：返回文檔中所有<img/>元素的列表：
varoImgs=document.getElementsByTagName("img");在把所有的img標(biāo)簽存儲(chǔ)在oImgs中后，可以使用序號(hào)或名稱進(jìn)行子項(xiàng)的訪問(wèn)
alert(oImgs[0].tagName)；//輸出標(biāo)簽名“IMG”或alert(oImgs[“img1”].tagName);//img1為某個(gè)img的name屬性
獲取所有元素
在FireFox等瀏覽器下：
varoAllElement=document.getElementsByTagName（“*”）；在IE6.0下：
varoAllElement=document.all;//使用這句，可用來(lái)判斷是否是IE瀏覽器2.getElementsByName（）
用來(lái)獲取所有name屬性等于指定值的元素集合
例如：獲取所有name屬性等于”img1”的所有元素varoImgs=document.getElementsByName("img1");
alert(oImgs[0].alt);//輸出第一個(gè)元素的alt屬性值
3.getElementById（）
返回id屬性等于指定值的元素.
在HTML中，id是唯一的，這也是從DOM文檔樹(shù)中獲取單個(gè)指定元素的最快的方法。例如：獲取id屬性為img1的元素
varoImgs=document.getElementById("img1");
alert(oImgs.alt);//輸出找到元素的alt屬性值
注：IE中有個(gè)嚴(yán)重的Bug!!!!!!!!!<div><imgsrc="2.gif"alt=""name="img1"/></div><imgsrc="1.gif"alt="img1"id="img1"/>
當(dāng)varoImgs=document.getElementById(“img1”);時(shí)，由于第一個(gè)img標(biāo)簽排在前面，它的name屬性也為img1，使用這個(gè)方法時(shí)，獲得的卻是第一個(gè)img標(biāo)簽對(duì)象，使用
alert(oImgs.src);//輸出的是2.gif二、處理元素屬性getAttribute
獲取元素的某個(gè)屬性例如：
var
oImgs=document.getElementById(“img1”);
alert(oImgs.getAttribute(“src”));setAttribute
設(shè)置元素的某個(gè)屬性
例如：
varoImgs=document.getElementById(“img1”);
oImgs.setAttribute("src","test.gif");
//設(shè)置圖片對(duì)象的src屬性為test.gif3.removeAttribute
移除元素的某個(gè)屬性例如：相移除email中的value屬性
<inputtype="hidden"value="abc@163.com"id="email"/>
可用variHid=document.getElementById("email");iHid.removeAttribute(“value”,1);//1表示忽略大小寫(xiě)
但這個(gè)方法在IE上工作不正常
三、一些高級(jí)DOM技術(shù)動(dòng)態(tài)修改文檔內(nèi)容（1）使用innerHTML
用來(lái)讀取、添加或刪除指定標(biāo)簽中的內(nèi)容，其中改變后的內(nèi)容也可以包括HTML標(biāo)簽例如：頁(yè)面源代碼如下
<body><divid="content"><inputtype="button"value="test"onclick="test();"/></div></body>
讀取
functiontest(){varoDiv=document.getElementById("content");alert(oDiv.innerHTML);
//輸出：<inputtype="button"value="test"onclick="test();"/>}修改
functiontest(){varoDiv=document.getElementById("content");oDiv.innerHTML="<imgsrc='pop.gif'alt='測(cè)試'/>"}（2）使用outerHTML
將刪除指定的標(biāo)簽本身，把它替換成新的HTML內(nèi)容例如：
functiontest(){varoDiv=document.getElementById("content");oDiv.outerHTML="<imgsrc='pop.gif'alt='測(cè)試'/>";}將刪除div標(biāo)簽本身，將其替換成
<imgsrc=“pop.gif”alt=“測(cè)試”/>
注：這個(gè)方法僅IE支持2.樣式表編程（1）style對(duì)象style對(duì)象包含與每個(gè)CSS樣式對(duì)應(yīng)的特性，雖然格式不同，但它的樣式屬性有一定的規(guī)律，和CSS樣式能對(duì)應(yīng)起來(lái)例如：
CSS樣式特性JavaScript樣式屬性
background-colorstyle.backgroundColorcolorstyle.colorfont-familystyle.fontFamily
練習(xí)1：在body中有個(gè)層div，其id為”content”，請(qǐng)實(shí)現(xiàn)一個(gè)翻轉(zhuǎn)效果，當(dāng)鼠標(biāo)放置在層上時(shí)，控制該層的背景色為藍(lán)色，鼠標(biāo)離開(kāi)時(shí)，層的背景恢復(fù)成紅色。層的設(shè)計(jì)：
<divid="content"style="background-color:red;height:100px;width:200px;“>
</div>
要用到的事件為：onmouseover（放置）和onmouseout（離開(kāi)）functionChangeBlue(){varoDiv=document.getElementById("content");oDiv.style.backgroundColor="Blue";}functionChangeRed(){varoDiv=document.getElementById("content");oDiv.style.backgroundColor="Red";}
<divid="content"style="backgroundcolor:red;height:100px;width:200px;"onmouseover="ChangeBlue();"onmouseout="ChangeRed();">練習(xí)2：（2）訪問(wèn)內(nèi)聯(lián)樣式表但是，style對(duì)象用來(lái)讀取樣式時(shí)，只能獲取在HTML標(biāo)簽的Style屬性中定義的CSS樣式。當(dāng)css樣式是在<style>標(biāo)簽中定義或在外部的.css文件定義時(shí)，無(wú)法使用style對(duì)象獲取某個(gè)元素的Css樣式。例如：
<divid="Content"></div>
#Content{height:100px;width:200px;background-color:red;}varoDiv=document.getElementById("Content");alert(oDiv.style.width);打印出來(lái)的是空值（3）獲取標(biāo)簽樣式表的集合
document.styleSheets可以代表樣式表的集合。document.styleSheets[0]代表1.css樣式表集合
document.styleSheets[1]代表<style>樣式表集合反之若<style>標(biāo)簽排在<link>標(biāo)簽前，則document.styleSheets[0]代表<style>樣式
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 昆明學(xué)院《現(xiàn)代辦公技能訓(xùn)練A》2023-2024學(xué)年第二學(xué)期期末試卷
- 2025年非接觸溫度計(jì)項(xiàng)目合作計(jì)劃書(shū)
- 蘇州城市學(xué)院《場(chǎng)景特效》2023-2024學(xué)年第二學(xué)期期末試卷
- 噴槍及類似器具項(xiàng)目效益評(píng)估報(bào)告
- 全國(guó)川教版信息技術(shù)八年級(jí)上冊(cè)第9課《編輯工作表》教學(xué)設(shè)計(jì)
- 桂林師范高等專科學(xué)?！稊?shù)字繪畫(huà)技術(shù)》2023-2024學(xué)年第二學(xué)期期末試卷
- 農(nóng)村打井簡(jiǎn)易合同范本
- 揚(yáng)州大學(xué)《展具設(shè)計(jì)》2023-2024學(xué)年第二學(xué)期期末試卷
- 上海立達(dá)學(xué)院《食品營(yíng)養(yǎng)與衛(wèi)生管理》2023-2024學(xué)年第二學(xué)期期末試卷
- 河南2024年河南信陽(yáng)師范大學(xué)招聘專職輔導(dǎo)員30人筆試歷年參考題庫(kù)附帶答案詳解
- 《彰化縣樂(lè)樂(lè)棒球》課件
- 深度解讀DeepSeek技術(shù)體系
- 2024-2025年第二學(xué)期團(tuán)委工作計(jì)劃（二）
- 駱駝養(yǎng)殖開(kāi)發(fā)項(xiàng)目可行性報(bào)告設(shè)計(jì)方案
- 物理-河南省鄭州市2024-2025學(xué)年高二上學(xué)期期末考試試題和答案
- 《幼兒教育政策與法規(guī)》教案-單元3 幼兒園的開(kāi)辦與管理
- 南通市2025屆高三第一次調(diào)研測(cè)試（一模）生物試卷（含答案 ）
- 新時(shí)代中國(guó)特色社會(huì)主義理論與實(shí)踐2024版研究生教材課件全集6章
- 《由宋城集團(tuán)的成功》課件
- (2024)湖北省公務(wù)員考試《行測(cè)》真題及答案解析
- 信息經(jīng)濟(jì)學(xué) 課件（1至6章）
評(píng)論
0/150
提交評(píng)論