JavaScript編程基礎(chǔ)(修正)_第1頁
JavaScript編程基礎(chǔ)(修正)_第2頁
JavaScript編程基礎(chǔ)(修正)_第3頁
JavaScript編程基礎(chǔ)(修正)_第4頁
JavaScript編程基礎(chǔ)(修正)_第5頁
已閱讀5頁，還剩82頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第一次作業(yè)創(chuàng)立并運行假設(shè)干簡單的網(wǎng)頁，包含以下內(nèi)容：(1)完成教材15頁的本章實驗，并截圖顯示在網(wǎng)頁上證實自己的機器上已經(jīng)部署好IIS、SQLServer、VS或VWD等根本軟件；(2)你的個人介紹，方方面面的個人信息〔不涉及個人隱私〕；(3)你對本專業(yè)以及本門課程的理解、建議與期望等。(4)要使用CSS將網(wǎng)頁風(fēng)格化。每人一個以長學(xué)號命名的文件夾【例如：2023344436】第3章JavaScript編程根底本章主要內(nèi)容3.1JavaScript簡介3.2JavaScript編程根底3.3瀏覽器對象模型3.4文檔對象模型3.5客戶端動態(tài)網(wǎng)頁編程3.1JavaScript簡介3.1.1JavaScript的起源20世紀90年代，上網(wǎng)越來越流行，對開發(fā)客戶端腳本的需求也逐漸增大。此時，網(wǎng)頁已經(jīng)不斷地變得更大和更復(fù)雜，而大局部Internet用戶還僅僅通過28.8kbit/s的速率連接到網(wǎng)絡(luò)，更加加劇用戶痛苦的是，僅僅為了簡單的表單有效性驗證，就要與效勞器進行屢次往返交互。在Microsoft公司進軍瀏覽器市場后，有3種不同的JavaScript版本同時存在：NetscapeNavigator3.0中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。與其他編程語言不同的是，JavaScript并沒有一個標準來統(tǒng)一其語法或特性，而這3種不同的版本恰恰突出了這個問題。幾點說明：語法習(xí)慣上，JavaScript與Java、C#非常相似。Java與JavaScript，并無太多關(guān)系。W3C教程JQuery是一個JavaScript庫，

極大地簡化了JavaScript編程，很容易學(xué)習(xí)。3.1.2JavaScript的特點JavaScript是一種腳本語言，采用小程序段的方式進行編程。JavaScript是一種功能強大的語言，它可以和HTML完美地結(jié)合在一起。JavaScript是一種基于對象〔ObjectBased〕和事件驅(qū)動〔EventDriver〕的編程語言。JavaScript用于客戶端。3.1.3JavaScript的作用JavaScript可以彌補HTML的缺陷，可以制作出多種網(wǎng)頁特效，其主要作用有：〔1〕增加動態(tài)效果〔2〕讀寫HTML元素〔3〕響應(yīng)事件〔4〕驗證表單數(shù)據(jù)〔5〕檢查瀏覽器〔6〕創(chuàng)立Cookies3.1.4JavaScript的組成JavaScript作為一種網(wǎng)絡(luò)客戶端的腳本語言，由以下3局部組成：〔1〕ECMAScript〔2〕文檔對象模型〔DocumentObjectModel，DOM〕〔3〕瀏覽器對象模型〔BrowserObjectModel，BOM〕3.1.5JavaScript程序的編輯和調(diào)試JavaScript的編寫形式有以下3種：

1．直接把JavaScript嵌入HTML的任何標簽中2．使用JavaScript函數(shù)時，將函數(shù)定義在<head>標簽中3．使用單獨的.js文件第一個JavaScript程序<html><head><scripttype="text/javascript">functiondisplaymessage(){alert("HelloWorld!")}</script></head><body><form><inputtype="button"value="Clickme!"onclick="displaymessage()"></form></body></html><html><body><scripttype="text/javascript">document.write("HelloWorld!");</script></body></html><html><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>實時顯示時間</title><scripttype="text/javascript"><!--setInterval("showTime()",1000);functionshowTime(){vard,s;d=newDate();s=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();="<h1>當前時間：<fontcolor=blue>"+timetxt.innerHTMLs+"</font></h1>";}//--></script></head><body><divid="timetxt"align="center"></div></body></html>在網(wǎng)頁中嵌入JavaScript腳本JavaScript腳本的引入方法通過<script>與</script>標簽對引入。將JavaScript腳本代碼放在<script>與</script>之間，瀏覽器自動識別該標簽對并逐行解釋其間的代碼。通過<script>標簽的src屬性引入。將包含在<script>與</script>標簽對之間的代碼放入擴展名為.js的腳本文件中，然后在HTML文檔中通過<script>標簽的src屬性來引用該腳本文件。在網(wǎng)頁中嵌入JavaScript腳本JavaScript腳本的引入方法通過JavaScript偽協(xié)議引入。偽協(xié)議是非標準化通信機制的統(tǒng)稱，JavaScript偽協(xié)議的一般格式為：javascript:URL。其中“javascript:〞是偽協(xié)議說明符，URL的主體可以是任意的JavaScript代碼，多個語句之間使用分號進行分隔。例如：<imgsrc="hua.jpg"onClick="javascript:vard1=(newDate()).getTime();vard2=(newDate(2023,1,28)).getTime();vardays=Math.floor((d2-d1)/(1000*60*60*24));alert('距離2023年春節(jié)還剩下'+days+'天!')">JavaScript消息框警告框alert("文本")警告框經(jīng)常用于確保用戶可以得到某些信息。當警告框出現(xiàn)后，用戶需要點擊確定按鈕才能繼續(xù)進行操作。確認框confirm("文本")確認框用于使用戶可以驗證或者接受某些信息。當確認框出現(xiàn)后，用戶需要點擊確定或者取消按鈕才能繼續(xù)進行操作。如果用戶點擊確認，那么返回值為true。如果用戶點擊取消，那么返回值為false。提示框prompt("文本","默認值")提示框經(jīng)常用于提示用戶在進入頁面前輸入某個值。當提示框出現(xiàn)后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續(xù)操縱。如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為null。在網(wǎng)頁中嵌入JavaScript腳本JavaScript腳本的引入方法通過HTML的事件屬性引入。HTML元素的事件屬性用于指示如何處理特定的事件，方法是將腳本指定為事件屬性的值，以響應(yīng)系統(tǒng)或用戶的動作。事件屬性名稱由事件名稱加一個“on〞前綴構(gòu)成，如onClick，onMouseOver等。例如：<scripttype="text/javascript"><!--functionshowMsg(){vard1=(newDate()).getTime();vard2=(newDate(2023,1,28)).getTime();vardays=Math.floor((d2-d1)/(1000*60*60*24));alert('距離2023年春節(jié)還剩下'+days+'天!');}//--></script><imgsrc="hua.jpg"onClick="showMsg()">在網(wǎng)頁中嵌入JavaScript腳本嵌入JavaScript腳本的位置

JavaScript腳本可放在HTML文檔中任何需要的位置。一般來說，可以在<head>與</head>標簽對、<body>與</body>標簽對之間放置JavaScript腳本代碼。放置在<head>與</head>標簽對之間的JavaScript腳本一般用于提前載入，以響應(yīng)用戶的頁面動作，且一般不影響HTML文檔的瀏覽器顯示格局。如果需要在頁面載入時動態(tài)生成頁面內(nèi)容，應(yīng)將JavaScript腳本放置在<body>與</body>標簽對之間。使用單獨的.js文件考慮到代碼的復(fù)用性和移植性，將JavaScript代碼單獨放到擴展名為.js的獨立文件中，在需要的頁面使用src指明文件的位置即可。<html><head><scripttype="text/JavaScript"src="JSript.js"></script></head><body><scripttype="text/JavaScript">write();</script></body></html>3.2JavaScript編程根底3.2.1JavaScript的變量無論是編程語言還是腳本語言，變量都是最根本的元素，在腳本運行時，往往需要用一個有名稱的單元將信息存儲起來，這個有名稱的單元就是變量。詞法規(guī)那么標識符的第一個字符必須是字母、下劃線或美元符號，后續(xù)字符可以是字母、數(shù)字、下劃線或美元符號。不能使用JavaScript中的關(guān)鍵字、保存字作為標識符。JavaScript是一種區(qū)分大小寫的腳本語言。注意處理與HTML的關(guān)系。以分號作為語句結(jié)束。單行注釋//，多行注釋/*….*/。1．變量的聲明方式JavaScript中變量的名稱區(qū)分大小寫，使用關(guān)鍵字var來聲明變量。JavaScript并沒有強制要求變量必須先聲明才使用，但是先聲明變量再使用是一種良好的編程風(fēng)格。2．變量類型JavaScript不要求預(yù)先確定變量的數(shù)據(jù)類型，但實際上，每個JavaScript變量都對應(yīng)一個數(shù)據(jù)類型的值，例如，如果box=3，那就認為box變量是數(shù)值類型的變量。JavaScript是一種弱類型語言，弱類型語言中變量賦值的數(shù)據(jù)類型是可以發(fā)生變化的。ECMAScript中定義了5種原始類型〔primitivetype)：undefined、null、boolean、number和string?！?〕undefined類型：聲明的變量未初始化時，該變量的初始值是undefined?！?〕null類型：用于尚未存在的對象，值undefined實際是從值null派生的。〔3〕boolean類型：只有兩個值true和false。〔4〕number類型：任何數(shù)字都被看做是number類型的字面量〔5〕string類型：字符串類型。根本數(shù)據(jù)類型根本數(shù)據(jù)類型和常量當某種根本類型的數(shù)據(jù)項直接出現(xiàn)在程序中時，稱之為常量，即值不能被改變的量。數(shù)值型：最根本的數(shù)據(jù)類型，包括整型和浮點型整型常量：可以使用十進制、八進制或十六進制表示，如1234、0745、0x93C等。浮點型常量：可以使用小數(shù)或指數(shù)方法表示，如12.34、5.9e7、4.3e-5等。特殊的數(shù)值型常量：Infinity表示正無窮大，-Infinity表示負無窮大，NaN表示“不是一個數(shù)值〞、“沒有意義的運算〞或“無法轉(zhuǎn)換成數(shù)值類型〞。如5/0的運算結(jié)果為Infinity，-5/0的運算結(jié)果為-Infinity，0/0的運算結(jié)果為NaN。根本數(shù)據(jù)類型根本數(shù)據(jù)類型和常量字符串型：表示文本的數(shù)據(jù)類型字符串常量：用""或''括起來的假設(shè)干個字符，如"JavaScript"、'ThisisabookofC++'等。轉(zhuǎn)義字符：以反斜杠\開頭的具有特殊功能的字符。轉(zhuǎn)義字符功能說明\b退格\f換頁\n換行\(zhòng)r回車\t制表\'單引號\"雙引號\\反斜線根本數(shù)據(jù)類型根本數(shù)據(jù)類型和常量布爾型：表示狀態(tài)的數(shù)據(jù)類型布爾常量：只有兩個可能的值true和false，表示“真〞和“假〞兩種狀態(tài)。如5>3的運算結(jié)果為true，“Chinese〞<“China〞的運算結(jié)果是false。變量變量是存放常量的容器，主要作用是存取數(shù)據(jù)。變量的聲明：在JavaScript中，可以先通過關(guān)鍵字var來聲明變量，然后再使用。例如：varnum;varstr,flag;num=100;str="JavaScriptLanguage";flag=true;根本數(shù)據(jù)類型變量的初始化：變量可以在聲明的同時指定初始值。例如：varnum=100;varstr="JavaScriptLanguage",flag=true;

僅用var聲明但未初始化的變量獲得默認初值undefined。變量的類型實際類型視變量內(nèi)容而定。例如，上例中的num為數(shù)值型變量，str為字符串型變量，flag為布爾型變量。變量的類型可以根據(jù)變量內(nèi)容的改變而自動更改。例如：varnum=1;//num為數(shù)值型變量

num="HelloWorld!";//num為字符串型變量變量可以不經(jīng)過var聲明就直接使用，而在變量賦值時自動聲明該變量。例如：num=100;str="JavaScriptLanguage";flag=true;好的編程風(fēng)格：所有變量在第一次使用前都用var進行聲明！3．typeof運算符使用typeof可以得到一個變量或值的類型。例如：varsTemp="teststring";alert(typeofsTemp);//輸出"string"alert(typeof86);//輸出"number"4．類型轉(zhuǎn)換〔1〕轉(zhuǎn)換成字符串:toString()varboo=newBoolean(true);document.write(boo.toString());〔2〕轉(zhuǎn)換成數(shù)字parseInt(),parseFloat()varx=parseInt("123");varx=parseFloat("123mm");〔3〕強制類型轉(zhuǎn)換varx=String(123);varx=Number("123");3.2.2數(shù)組1．數(shù)組的定義JavaScript中的數(shù)組是內(nèi)部類型Array的對象，因此，可以使用如下方式創(chuàng)立數(shù)組。varmyArray=newArray();//創(chuàng)立一個長度為0的數(shù)組varmyArray=newArray(n);//創(chuàng)立一個擁有n個元素的數(shù)組，每個元素為undefined類型varmyArray=newArray(1,2,"abc");//創(chuàng)立一個長度為3的數(shù)組，并賦初值同時，也支持使用括號來定義數(shù)組，例如：varmyArray=[];//創(chuàng)立一個長度為0的數(shù)組varmyArray=[1,2,"abc"];//創(chuàng)立一個長度為3的數(shù)組2．數(shù)組元素的訪問數(shù)組元素按索引進行訪問，索引號從0開始記。例如：myArray[2]=4;//將4賦值給myArray數(shù)組的第3個元素vari=myArray[2];//將myArray數(shù)組的第3個元素的值賦給變量i3．動態(tài)數(shù)組JavaScript數(shù)組的長度不是固定不變的，假設(shè)要增加數(shù)組的長度，直接賦值即可。例如：varmyArray=newArray(1,2,3);myArray[3]=4;這時myArray的長度為4，如果varmyArray=newArray(1,2,3);myArray[4]=4;那么長度為5，其中myArra[3]的值為undefined。4．數(shù)組的常用屬性和方法length屬性：獲取數(shù)組長度。concat方法：連接兩個或更多的數(shù)組，并返回結(jié)果。也可以直接連接數(shù)值，例如：a.concat(4,5,6);join方法：連接數(shù)組，缺省的連接符號為“，〞。push方法：在數(shù)組的結(jié)尾添加一個或多個項，同時更改數(shù)組的長度。pop方法：刪除最后一個數(shù)組項，將其作為函數(shù)值返回。shift方法：刪除數(shù)組中的第一個項，將其作為函數(shù)值返回。unshift方法：添加元素至數(shù)組開始處。slice方法：返回數(shù)組的片斷〔或者說子數(shù)組〕。splice方法：從數(shù)組中替換或刪除元素。sort方法：數(shù)組排序。sort方法可以指定比較函數(shù)，根據(jù)比較函數(shù)進行排序。reverse方法：將數(shù)組倒序。3.2.3string類型字符串〔string〕類型在JavaScript中用得很多，這里簡單介紹其主要屬性和方法。字符串由多個字符組成，使用雙引號或單引號可定義一個字符串常量，并可賦給一個字符串類型的變量，利用length屬性可獲取字符串的長度。*參見教材40頁3.2.4JavaScript的函數(shù)1．函數(shù)的定義2．a(chǎn)rguments對象無需指明參數(shù)名，也不限參數(shù)個數(shù)3．函數(shù)是對象function是Function類的實例化函數(shù)在JavaScript中，函數(shù)用來封裝那些在程序中反復(fù)使用的程序段，常作為事件處理程序被調(diào)用。函數(shù)的根本組成函數(shù)定義一般格式：function函數(shù)名([參數(shù)列表]){函數(shù)體;[return返回值;]}說明：function：定義函數(shù)的關(guān)鍵字。函數(shù)名：函數(shù)的標識符，表示函數(shù)的入口地址。參數(shù)列表：包含假設(shè)干個參數(shù)，不同參數(shù)間用逗號間隔。當調(diào)用函數(shù)時，可以向參數(shù)列表中傳入常量值、變量值或其它表達式的值，函數(shù)內(nèi)的程序語句可以通過參數(shù)名稱來引用傳進來的這些值。參數(shù)列表也可以為空。函數(shù)體：實現(xiàn)函數(shù)功能的程序語句。return：指定函數(shù)返回值的關(guān)鍵字。return語句負責將函數(shù)的執(zhí)行結(jié)果返回到程序中函數(shù)調(diào)用的位置，一個函數(shù)中最多只能有一條return語句。函數(shù)例定義一個求階乘的函數(shù)

functionfact(n){vars=1,i; for(i=1;i<=n;i++) s=s*i; returns;}定義函數(shù)的關(guān)鍵字函數(shù)名參數(shù)列表函數(shù)體返回函數(shù)的執(zhí)行結(jié)果函數(shù)函數(shù)調(diào)用一般格式：函數(shù)名(實參列表);說明：實參列表中包含假設(shè)干個實際參數(shù)，參數(shù)之間用逗號間隔，實參個數(shù)應(yīng)與函數(shù)定義時參數(shù)列表中的參數(shù)個數(shù)相等。實參的表示形式可以是常量、變量或者表達式，所有實參都必須得到具體的賦值。函數(shù)調(diào)用時的參數(shù)傳遞都是以值傳遞的方式進行的。也就是說，在函數(shù)中將某個傳進來的變量值改變了，并不會影響原來函數(shù)外的變量值。例如：functioninc(n){n++;alert(n);}varx=5;inc(x);alert(x);函數(shù)調(diào)用參數(shù)傳遞函數(shù)定義程序運行結(jié)果：

n=6x=5函數(shù)函數(shù)的作用域在函數(shù)外部聲明的變量稱為全局變量，全局變量在程序的任何地方都可以使用。在函數(shù)內(nèi)部聲明的變量稱為局部變量，局部變量應(yīng)用關(guān)鍵字var聲明，沒有用var聲明的局部變量在函數(shù)執(zhí)行完畢后會變成全局變量。程序運行結(jié)果：

sum=8程序運行結(jié)果：

y未定義functioninc(n){y=++n;returny;}varx=3;varsum=inc(x)+y;alert(sum);functioninc(n){vary=++n;returny;}varx=3;varsum=inc(x)+y;alert(sum);函數(shù)函數(shù)的嵌套與遞歸函數(shù)的嵌套：嵌套定義是指在定義一個函數(shù)的過程中定義另一個函數(shù)，定義在某個函數(shù)內(nèi)部的函數(shù)稱為局部函數(shù)，其作用域局限在所屬的框架函數(shù)。嵌套調(diào)用是指在調(diào)用一個函數(shù)的過程中又調(diào)用另一個函數(shù)。例如：functionlcm(m,n){//框架函數(shù)，求最小公倍數(shù)

varres;functiongcd(m,n){//局部函數(shù)，求最大公約數(shù)

vara,b,t;if(m<n){t=m;m=n;n=t;}a=m;b=n;while((r=a%b)!=0){a=b;b=r;}returnb;}res=m*n/gcd(m,n);//嵌套調(diào)用gcd函數(shù)

alert(m+"和"+n+"的最小公倍數(shù)是"+res);}函數(shù)函數(shù)的遞歸：遞歸調(diào)用是指函數(shù)在調(diào)用過程中直接或間接調(diào)用自身，是一種特殊的嵌套調(diào)用。例如：functionfac(n){varres;if(n==1)res=1;elseres=n*fac(n-1);//遞歸調(diào)用

returnres;}varn=parseInt(prompt("請輸入整數(shù)",""));varf=fac(n);alert(n+"的階乘是"+f);2.Arguments對象

JavaScript不要求函數(shù)的實參與形參完全一致。使用特殊對象Arguments，無須指出參數(shù)名，就能訪問它們。例如，如下函數(shù)SayHi()就可以有兩種調(diào)用形式。functionSayHi(){

if(arguments[0]=="bye"){return;}alert(arguments[0]);}調(diào)用形式1：<scriptlanguage="javascript">

SayHi("test");</script>433.2.4JavaScript的函數(shù)調(diào)用形式2：<scriptlanguage="javascript">

SayHi("test",123);</script>函數(shù)可以接受多個參數(shù)而不會引發(fā)錯誤。443.2.4JavaScript的函數(shù)例：利用Arguments對象求和。<htmlxmlns=":///1999/xhtml"><head><title>JavaScript的函數(shù)參數(shù)數(shù)組</title><scripttype="text/javascript">functionsumInteger()//使用參數(shù)數(shù)組獲取傳遞的參數(shù){vartotal=0;for(vari=0;i<sumInteger.arguments.length;i++)//獲取傳遞的所有參數(shù) {total+=sumInteger.arguments[i];}returntotal;}</script></head>453.2.4JavaScript的函數(shù)<body><h2>JavaScript的函數(shù)參數(shù)數(shù)組</h2><hr/><scripttype="text/javascript">varintTotal=0;//聲明變量

intTotal=sumInteger(1,100,98,29);document.write("函數(shù)sumInteger(1,100,98,29)="+intTotal+"<br/>");</script></body></html>463.2.4JavaScript的函數(shù)3.2.5JavaScript對象化編程創(chuàng)立對象最簡單的方法是使用“屬性名：值〞格式項的集合。屬性名要求是一個JavaScript的有效標識符或者是一個字符串，屬性值可以是一個常量、一個表達式或一個函數(shù)，項之間使用逗號分隔。例如：varpose={x:0,y:0,theta:0};2．添加、刪除對象的屬性JavaScript中的對象在定義好后還可以添加或刪除其屬性，例如：varpose={x:0};pose.y=0;pose.theta=0;上述代碼中的第一句還可以改寫成為：varpose={};//或者為varpose=newObject();pose.x=0;使用delete關(guān)鍵字可以刪除一個對象的屬性，屬性刪除之后自然就不能再訪問了。例如，下面的代碼完成對pose對象theta屬性的刪除。deletepose.theta;3．添加對象的方法如果對象的屬性保存的是一個函數(shù)，那么此函數(shù)稱為對象的方法，例如，下面的代碼給pose對象添加了一個showInfo()方法，然后調(diào)用它。varpose={x:0,y:0,theta:0};//添加對象的方法pose.showInfo=function(){return"x="+pose.x+",y="+pose.y+",theta="+pose.theta;}//調(diào)用對象的方法alert(pose.showInfo());4．構(gòu)造函數(shù)在默認情況下JavaScript不會為對象創(chuàng)立構(gòu)造函數(shù)，這樣前面例子中定義的pose對象就無法通過“newpose()〞表達式直接創(chuàng)立，而只能先創(chuàng)立一個Object對象，然后再向這個已創(chuàng)立的對象添加需要的屬性和方法，這樣就不能表達出類型的特點。給對象定義相應(yīng)的構(gòu)造函數(shù)就可以解決這個問題。5．prototype屬性//定義student類functionstudent(sname,ssex,sscore){=sname;this.sex=ssex;this.score=sscore;}//創(chuàng)立兩個對象varst1=newstudent("張三","男",59);varst2=newstudent("李四","女",38);//給st1添加一個方法showInfo1st1.showInfo1=function(str){alert(str);}//調(diào)用兩個對象都有的showInfo方法st1.showInfo();st2.showInfo();//調(diào)用新添加的方法st1.showInfo1("調(diào)用st1的showInfo1方法");st2.showInfo1("調(diào)用st2的showInfo1方法");//該行運行會報錯：對象不支持此屬性或方法3.2.6事件驅(qū)動及事件處理JavaScript是基于對象的語言，基于對象的根本特征就是采用事件驅(qū)動機制，這里的事件包括鼠標或鍵盤的動作。所謂事件驅(qū)動，是指由鼠標或鍵盤的動作引發(fā)的一連串程序的動作；瀏覽器為了響應(yīng)某個事件而進行的處理過程稱為事件處理。瀏覽器在程序運行的大局部時間里都在等待交互時間的發(fā)生，并在事件發(fā)生時，自動調(diào)用事件處理程序完成事件處理過程。<ahref="/index.html"onmouseover="alert('Welcome');returnfalse"></a>常見的事件常見的事件常見的事件用JavaScript處理事件JavaScript語言與HTML文檔相關(guān)聯(lián)主要是通過“事件〞，JavaScript的函數(shù)就是用于處理事件的程序，事件的語法規(guī)那么如下。事件=“函數(shù)名〞或事件=“JavaScript語句〞例如：<inputtype="button"value="[測試]"onclick="alert('helloworld');"/>也可以定義好函數(shù)后再調(diào)用，例如：functionmessage(){alert('helloworld');}<inputtype="button"value="[測試]"onclick="message();〞/>3.實例練習(xí)實例1：裝載與卸載<head><title>用JavaScript處理事件</title><scripttype="text/javascript">functionLoadForm(){alert("這是一個裝載的例子");}functionUnLoadForm(){alert("這是一個卸載的例子");}</script></head><bodyonload="LoadForm();"onunload="UnLoadForm();"><ahref="t.htm">測試</a></body></html>3.實例練習(xí)實例2：驗證輸入<head><title>無標題文檔</title><scripttype="text/javascript"language="javascript">functionvalidate(){if(user.value==""){alert("請輸入?。?！");}}</script></head><body><inputtype="text"name="user"/><inputtype="submit"value="提交"onclick="validate();"/></body>3.3瀏覽器對象模型3.3.1體系結(jié)構(gòu)

瀏覽器對象模型3.3.2window對象

在客戶端JavaScript中，Window對象是全局對象，所有的表達式都在當前的環(huán)境中計算。也就是說，要引用當前窗口根本不需要特殊的語法，可以把那個窗口的屬性作為全局變量來使用。例如，可以只寫document，而不必寫window.document。同樣，可以把當前窗口對象的方法當作函數(shù)來使用，如只寫alert()，而不必寫window.alert()。要引用窗口中的一個框架，可以使用如下語法。frame[i] //當前窗口的框架self.frame[i] //當前窗口的框架w.frame[i] //窗口w的框架要引用一個框架的父窗口〔或父框架〕，可以使用下面的語法。parent //當前窗口的父窗口self.parent //當前窗口的父窗口w.parent //窗口w的父窗口要從頂層窗口含有的任何一個框架中引用它，可以使用如下語法。top //當前框架的頂層窗口self.top //當前框架的頂層窗口f.top //框架f的頂層窗口使用window對象完成的常用功能1．導(dǎo)航和翻開新窗口2．關(guān)閉窗口3．系統(tǒng)對話框4．時間間隔和暫停例如：翻開一個窗口，加載頁面1.html，窗口設(shè)有工具欄、地址欄、狀態(tài)欄，沒有菜單欄、滾動欄和目錄按鈕，窗口高300像素、寬300像素，具體實現(xiàn)的代碼如下：varwindow1=window.open(“1.html〞,null,“toolbar=yes,location=yes,status=yes,directories=no,menubar=no,scrollbars=no,height=300,width=300〞);//null代表默認值2.關(guān)閉窗體：window.close();1.window對象例：JavaScript對話框<htmlxmlns=":///1999/xhtml"><head><title>JavaScript對話框</title><scripttype="text/javascript">functionbtnAlert_onclick(){alert("這是一個警告對話框，常用于輸出一些信息");}functionbtnConfirm_onclick(){varret=confirm("這是確認操作對話框，提供兩個按鈕供用戶選擇");varinfo=document.getElementById("info");//返回指定對象的引用if(ret==true)info.innerHTML="你按了確定按鈕";elseinfo.innerHTML="你按了取消按鈕";}3．系統(tǒng)對話框functionbtnPrompt_onclick(){varret=prompt("這是一個提示信息","用戶請在此輸入");varinfo=document.getElementById("info");if(ret!="")info.innerHTML="您輸入了："+ret;if(ret=="")info.innerHTML="您按了確定按鈕，但沒有輸入信息";if(ret==null)info.innerHTML="您按了取消按鈕";}</script></head>3．系統(tǒng)對話框<bodystyle="text-align:center;"><h2>JavaScript對話框</h2><hr/><inputid="btnAlert"type="button"value="alert:警告對話框"onclick="return

btnAlert_onclick()"/><br/><br/><inputid="btnConfirm"type="button"value="confirm：確認操作對話框"onclick="returnbtnConfirm_onclick()"/><br/><br/><inputid="btnPrompt"type="button"value="prompt：用戶輸入對話框"onclick="returnbtnPrompt_onclick()"/><br/><br/><divid="info"></div></body></html>3．系統(tǒng)對話框4．時間間隔和暫停<htmlxmlns=":///1999/xhtml"><head><title>顯示當前時間</title><scripttype="text/javascript">functionShowTime(){varShowTimeDiv=document.getElementById("currentTime");if(ShowTimeDiv){ShowTimeDiv.innerHTML=“當前時間：〞+(newDate).toLocaleTimeString();//時間局部轉(zhuǎn)為字符串}}varintervalID;functionBeginShowTime(){intervalID=setInterval(ShowTime,1000);setTimeout("alert('隔3秒后彈出此消息框，只顯示一次。')",3000);}

4．時間間隔和暫停functionStopShowTime(){clearInterval(intervalID);}</script></head><bodystyle="text-align:center;"><h2>顯示當前時間</h2>展示setTimeout和setInterval的用法。<br/><hr/><divid="currentTime"></div><br/><inputname="btnStart"type="button"value="顯示時間"onclick="BeginShowTime();"/><inputname="btnEnd"type="button"value="停止刷新顯示時間"onclick="StopShowTime();"/></body></html>3.3.3Document對象Document對象比較獨特，它既屬于BOM，又屬于DOM。每個載入瀏覽器的HTML文檔都會成為Document對象，Document對象使用戶可以從腳本中訪問HTML頁面中的所有元素。Document對象是Window對象的一局部，可通過window.document屬性對其進行訪問。Document對象實例例如：<body><imgsrc="logo.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;2．Document對象的方法Document對象的常用方法有write、writeln、clear、open和close等。write將字符串寫到一個新文檔中；writeln將字符串寫到一個新文檔，并在字符串末尾加上換行符；clear去除文檔當前內(nèi)容；open和close翻開一個新文檔并關(guān)閉當前文檔。Document對象的方法實例動態(tài)引入.js文件的功能。在該例中將</script>進行了拆分，這是因為瀏覽器一遇到</script>，就會假定其中的代碼是完整的〔即使它出現(xiàn)在字符串中〕，這樣就會忽略后面的代碼。<scripttype="text/javascript">document.write("<scripttype='text/javascript'src='1.js'>"+"</scr"+"ipt>");</script>3.3.4Location對象Location對象提供當前頁面的URL信息，它有一組屬性，用于存儲URL的各個組成局部。它的方法可以重載當前頁面或載入新頁面。例如，有如下的URL。://zjl.xom:80/book/1.html#section11．Location對象的屬性屬性說明在上例中的應(yīng)用情況hash如果頁面中有頁面內(nèi)跳轉(zhuǎn)的錨標，則hash屬性返回href中#號后面的字符串用location.hash可以獲得錨標為#section1（接下來只列出屬性值）host提供URL頁面所在的Web服務(wù)器主機名稱和端口號:80hostname提供URL的主機名稱部分href提供整個URL:/book/1.html#section1pathname提供文檔在主機上的路徑及文件名book/1.htmlport返回URL中的端口部分80protocol協(xié)議名稱HTTPsearch提供完整URL中“?”后面的查詢字符串2．Location對象的方法Location對象的方法有reloa

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論