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