Web開發(fā)（技術講解）_第1頁
Web開發(fā)（技術講解）_第2頁
Web開發(fā)（技術講解）_第3頁
Web開發(fā)（技術講解）_第4頁
Web開發(fā)（技術講解）_第5頁
已閱讀5頁，還剩262頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

培訓資料名稱：Web開發(fā)（技術講解）所屬班組：xx匯報人：xxJavascript對象

Javasmp提供了非常有用的內置對象來幫助網頁編程人員編寫更精彩實用的頁面。一個Javascript對象是由屬性和方法兩個基本要素構成的。屬性主要是指對象內部所包含的一些自己的情況。方法是表示對象可以做的事情，例如，人可以吃飯、睡覺、學習等；而飛機可以起飛、降落等。通過訪問或者設置對象的屬性，并且調用對象的方法，就可以使對象具有各種各樣的形態(tài)，完成各種各樣的任務。對象包含屬性和方法，使用對象也就是調用它的屬性和方法。在調用對象的屬性和方法時，最常用的方法是采用“對象屬性”和“對象、方法”的方式來完成的。Javascript的內置對象1、預定義對象預定義對象是系統(tǒng)（Javascript或瀏覽器）提供的已經定義好了的對象，用戶可以直接使用它們。預定義對象包括Javascript的內置對象和瀏覽器對象。①內置對象Javascript將一些非常常用的功能預先定義成對象，用戶可以直接使用，這種對象就是內置對象。這些內置對象可以幫助用戶在設計自己的腳本時實現(xiàn)一些最常用最基本的功能。

②瀏覽器對象瀏覽器對象是瀏覽器提供的對象?，F(xiàn)在，大部分瀏覽器可以根據(jù)系統(tǒng)當前的配置和所裝載的頁面為Javascript提供一些可供使用的對象。例如，在前面用到的document對象就是一個十分常用的瀏覽器對象。在Javascript程序中可以通過訪問這些瀏覽器對象，獲得一些相應的服務。Javascript內置對象Math對象；Date對象；String對象；Array對象；Number對象；Boolean對象；Function對象；Global對象；Object對象；RegExp對象；Event對象。2、用戶自定義對象雖然可以在Javascript中通過使用預先定義的對象完成強大的功能，但是一些高級用戶還需要按照某些特定的需求創(chuàng)建自己的對象，Javascript為他們提供了自己創(chuàng)建對象的支持。在這里就不做介紹了。Math對象

Math對象是Javascript提供的數(shù)學運算對象，它為用戶提供了進行所有基本數(shù)學計算的功能和常量的屬性和方法。

Math對象的屬性是數(shù)學中經常要用到的常量，如圓周率PI、1／2的平方根、log10E等。而Math對象擁有的方法則是一些十分常用的數(shù)學函數(shù)，如sin()、tan（）、random()等。Math方法例1在調用Math對象的屬性和方法時，直接寫成：Math.屬性和Math.方法。<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">radius=prompt("請輸入園的半徑:","請在這里輸入圓的半徑");alert("圓的周長"+2*Math.PI*radius+"，圓的面積是"+Math.PI*radius*radius+"。");</script></HEAD></HTML>例2<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">con=true;while(con==true){r1=Math.round(Math.random()*10);r2=Math.round(Math.random()*10);r3=Math.round(Math.random()*10);result1=prompt(String(r1)+"+"+String(r2)+"+"+String(r3)+"=?","請在這里寫出加法結果");result2=r1+r2+r3;

if(Number(result1)==result2){con=confirm("你真聰明，答對了！再來一遍嗎？");if(con==false){alert("歡迎下次再來。");break;}}else{con=confirm("對不起，你沒有答對，再來一遍嗎");if(con==false){alert("歡迎下次再來。");break;}}}</script></HEAD></HTML>new運算符和對象操作語句new運算符是Javascript的一個十分重要而且常用的對象運算符。在Javascript的內置對象中，除了Math對象以外，其他對象都要使用new運算符來為它們創(chuàng)建一個變量，完成這個工作后，就可以使用內置對象的屬性和方法了。例如：month=newArray()

Javasmp還有一個對象運算符delete運算符，它的作用是刪除一個對象的變量或者從數(shù)組變量中刪除數(shù)組單元，甚至可以刪除整個數(shù)組。例如：deletemonth[2];//刪除數(shù)組的第三個元素對象操作語句1、forin語句可以用來來處理數(shù)組，forin語句還可以用來循環(huán)處理對象的所有屬性。對于每一個屬性，循環(huán)體內的語句被執(zhí)行一遍。forin語句處理對象的基本格式是：在這樣的循環(huán)中，每一個循環(huán)給予循環(huán)變量的值是由Javascript解釋器內部決定的，不能人為地指定循環(huán)的順序，因此也不必要知道對象中屬性的個數(shù)就可以使用form語句對對象進行操作，使用起來十分方便。例子<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">document.write("<H4>document對象屬性如下：<H4>")for(variindocument){document.write(i+"<br>")}</script></HEAD></HTML>2．With語句

with語句提供了一種簡單而清晰的方法來表示對象與它的屬性和方法之間的關系。如果在程序中要使用某個對象的多個屬性和方法，就可以將這個對象用W訕語句包含起來，這樣在代碼塊中就可以直接使用它的方法和屬性。下面是with語句的格式為：例子<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">with(Math){document.write("<H3>"+"sin(30)="+sin(30)+"<H3>"+"<P>");document.write("cos(30)="+cos(30)+"<P>");document.write("tan(30)="+tan(30));}</script></HEAD></HTML>Array對象Array對象是Javascript提供的一個實現(xiàn)數(shù)組特性的常用的內置對象。

Array對象有兩個屬性，一個是length屬性，用于返回數(shù)組中最大下標加1的數(shù)字。

Array對象的另一個屬性是prototype屬性，用于在Array對象中添加新的屬性和方法。有時，當一個對象的屬性或者方法不夠用時，就可以用prototype屬性來添加新的屬性或方法。例1：<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE></HEAD><BODY><scriptLanguage="javascript">vardata=newArray("one","two","three","four","five");document.write("data的初始內容為："+data+",");functionfun(){if(this.length!=0)document.write("此數(shù)組的長度為"+this.length+"。"+"<BR>")elsedocument.write("此數(shù)組的長度為0。"+"<BR>");}Atotype.fun=fun;data.fun();data=newArray();document.write("<P>"+"數(shù)組被清零后");data.fun();</script></BODY></HTML>通過這個例子，可以看到，要為Array對象添加新的方法，只要做到以下幾步就能實現(xiàn)：

(1)首先定義好相關的函數(shù)。

(2)使用語句Atotype.函數(shù)名=函數(shù)名，就將方法添加到Array對象中了。注意，賦值號（=）右邊只是函數(shù)名，并沒有括號。String對象String對象是Javascript提供的字符串處理對象，它提供了對字符串進行處理的屬性和方法。在使用String時，首先要做的是為它創(chuàng)建一個字符串變量。由于Sirius對象與Javasmp腳本語言本身結合得十分緊密，因此，在創(chuàng)建一個字符串變量時，可以使用new運算符來創(chuàng)建，也可以直接將字符串賦給變量。例如：

newstring=“Thisisanewstring”與

newstring=newString(“Thisisanewstring”)等價。string對象的屬性和方法

String對象最常用的屬性是length屬性，通過調用String對象的length屬性可以獲得字符串中字符的個數(shù)（字符串長度）。String對象的另一個屬性是pfototype屬性，可以用來為String對象增加新的屬性或方法。String對象的方法主要用于有關字符串在Web頁面中的顯示格式、字體大小、字體顏色、字符的搜索以及字符的大小寫轉換方面的功能。string對象的字符串處理方法根據(jù)參數(shù)傳入的正則表達式或者分隔符來分隔調用此方法的字符串string對象的字符串格式設置方法例子<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">varname=prompt("請輸入你的英文名字","請在這里輸入");document.write("你的英文名字是"+name.bold()+"<br>");

document.write("你的英文名字是"+name.toUpperCase()+"<br>");

document.write("你的英文名字是"+name.fontsize(6)+"<br>");

document.write("你的英文名字有"+name.length+"個字符"+"<br>");

document.write("你的英文名字的前4個字符是"+name.substring(0,4)+"<br>");

</script></HEAD></HTML>Date對象Date對象為用戶提供了獲取和設置日期和時間的屬性和方法，可以用來幫助網頁制作人員提取日期和時間的某一部分及定義日期和時間。Date對象沒有提供直接訪問的屬性，只有一個屬性prototype，用于在Date對象中添加新的屬性和方法，其使用方法與Array對象的prototype屬性的使用方法基本上是一樣的。Javascript為Date()提供了許多用于操作日期和時間的方法返回表示轉換成世界時間的星期中的某一天(0~6,0表示星期日，6表示星期一)例子：<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">today=newDate();year=today.getFullYear();month=today.getMonth()+1;day=today.getDate();theweek=today.getDay();switch(theweek){case0:week="星期日";break;case1:week="星期一";break;case2:week="星期二";break;case3:week="星期三";break;case4:week="星期四";break;case5:week="星期五";break;case6:week="星期六";break;}

document.write("<h3>"+"今天是"+year+"年"+month+"月"+day+"日"+week+"<h3>"+"<br>");document.write("<h2>"+"歡迎來訪"+"<h2>");</script></HEAD></HTML>getFullyear是對所有年份都返回一個4位數(shù)，這樣所有年份都可以返回了，getyear方法則是對于1900－1999之間的年份返回兩位數(shù)，而對于此范圍之外的年份則返回4位數(shù)。getMonth方法返回的月份是0－11。getDay方法返回一個介于D－6之間的數(shù)，對應于一個星期的7天，所以在腳本中使用了Switch語句來進行選擇輸出星期幾。today=newDate(2001,4,25,10,30);一句中，將括號內指定的日期和時間返回給例2：簡易電子時鐘<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">functionshowTime(){now=newDate();hours=now.getHours();mins=now.getMinutes();secs=now.getSeconds();timeVal="";timeVal+=hours;timeVal+=((mins<10)?":0":":")+mins;timeVal+=((secs<10)?":0":":")+secs;timeVal+=((hours<12)?"AM":"PM");

document.clock.time.value=timeVal;timerID=setTimeout("showTime()",1000);}</script></HEAD><bodyonLoad="showTime()"><formname="clock">電子時鐘：<inputtype="text"name="time"size="20"value=""></form></body></HTML>Global對象在Javascript中除了可以自己定義函數(shù)外，還提供了一些內置函數(shù)，用于完成一些常用的功能。這些函數(shù)從屬于Global對象，它們是Global對象的方法。作為Javascript的內置對象，Global對象包含了兩個屬性，一個是Infinity，用于表示正無窮大，另一個是NaN，表示非數(shù)。Global對象方法eval（）方法在Global對象中，eval（）方法是最常用的。eval（）方法括號內的x可以接收一個字符串形式的參數(shù)（表達式或者也可以是Javascript的命令），并且將它作為一個Javascript的源代碼來執(zhí)行，eval（）將返回執(zhí)行表達式或Javascript命令后的結果。例如：eval(“document.write(‘我只是試一試’)”)；相當于document.write(‘我只是試一試’)；例子：簡單計算器例子<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">functioncompute(x){x.result.value=eval(x.expression.value);}</script></HEAD><body><h2>一個簡單的計算器：<h2><formname="form1">請輸入表達式：<inputtype="text"name="expression"size="20"><br><inputtype="button"value="請單擊這里的計算表達式"onClick="compute(form1)"><br>表達式的計算結果是：<inputtype="text"name="result"size="20"></form></body></HTML>Number對象NUmer對象可以將數(shù)字作為對象直接進行訪問。例：利用number對象返回數(shù)值范圍<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">document.write("你可以使用的數(shù)的范圍如下："+"<br>");document.write("最小值是"+Number.MIN_VALUE);document.write("，最大值是"+Number.MAX_VALUE+"<br>");document.write("注意可別超出范圍。");</script></HEAD></HTML>Boolean對象

Boolean對象可以將邏輯值作為對象進行訪問。要使用Boolean對象，首先要使用new運算符為它指定一個變量名，格式是：變量名=newBoolean（參數(shù)）。括號里的參數(shù)可以是邏輯值trUe或false，也可以是其他類型的值。如果是NaN、null和0，則Javascript認為它是false，其他的值認為是trUe。Boolean對象有一個屬性ptototype，用于為Boolean對象添加新的屬性和方法。Boolean對象有兩個方法，toString（）方法返回表示Boolean對象的邏輯值字符串（true和false）。valueOf()方法返回Boolean對象的原始值。<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><h3>Boolean對象的方法使用示例如下：</h3><scriptLanguage="javascript">b1=newBoolean(true);b2=newBoolean(false);b3=newBoolean(10);b4=newBoolean(null);document.write("b1=newBoolean(true),");document.write("b1.toString()="+b1.toString()+"<br>");document.write("b2=newBoolean(true),");document.write("b2.toString()="+b2.toString()+"<br>");document.write("b3=newBoolean(10),");document.write("b3.toString()="+b3.toString()+"<br>");document.write("b4=newBoolean(null),");document.write("b4.toString()="+b4.toString()+"<br>");</script></HEAD></HTML>使用Function對象

Function對象可以將函數(shù)作為對象來進行訪問，并且可以在程序執(zhí)行的過程中動態(tài)地生成函數(shù)并且調用函數(shù)。使用Funtion對象創(chuàng)建一個函數(shù)時要給出函數(shù)的參數(shù)以及函數(shù)體，其格式是：函數(shù)名=newFunction（”參數(shù)1”，”參數(shù)2”，”參數(shù)n”，”函數(shù)體”）。括號內的參數(shù)1\參數(shù)n就是指的形式參數(shù)。調用該函數(shù)時，需要在函數(shù)名后面加上一對小括號()，并且給出與形式參數(shù)對應的實在參數(shù)。例如，newFun=newFunction(“x”,”y”,”returnx+y”);調用函數(shù)newFun,例如newFun(10,20)，實在參數(shù)10和20分別被傳遞給對應的形式參數(shù)，然后參加函數(shù)體returnx+y的運算，得到的結果為30。例子：簡單的加法計算器<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">newfun=newFunction("x","y","z=x+y;returnz");x=prompt("請輸入x的值：","請在這里輸入");y=prompt("請輸入y的值：","請在這里輸入");x=Number(x);y=Number(y);alert(x+"+"+y+"="+newfun(x,y))</script></HEAD></HTML>其他對象Event對象將在介紹事件處理時再做介紹。Object對象可以用來派生其他對象，其屬性和方法也可以派生給其他對象。RegExp對象表示一個用來進行模式匹配的正則表達式。Object對象和RegExp對象對于一般用戶來說使用難度較大，涉及到一些比較復雜的概念，因此在本課中我們不再做介紹，僅僅列出它們的常用屬性和方法供大家參考。Object對象屬性和方法RegExp對象和方法瀏覽器對象：document對象使用瀏覽器，用戶首先接觸到的是頁面文檔，因此document對象是Javascript實現(xiàn)網頁各種功能中最常用最基本的對象之一；它代表瀏覽器窗口中的文檔，可以用來處理文檔，訪問文檔中包含的BTML元素，如各種表單、圖像、超級鏈接等。與Javascript的內置對象不一樣，它不是由Javascript提供的，而是由瀏覽器提供的，它可以在Javascript中使用，它使Javascript更緊密地與瀏覽器結合在一起，這種對象稱為瀏覽器對象。document對象的屬性、方潔使用document對象訪問和處理文檔<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">document.writeln("<pre><h3>在頁面上顯示信息并換行</h3><pre>");document.write("<h3>在頁面上顯示信息</h3>");</script></HEAD></HTML>例2：顯示頁面的一些元素信息<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">document.write("當前文檔的標題："+document.title+"<br>");document.write("當前文檔的URL："+document.URL+"<br>");document.write("當前文檔的背景色："+document.bgcolor+"<br>");document.write("當前文檔的最后修改日期："+document.lastModified);</script></HEAD></HTML>例3：<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">functiondateinfo(){alert(Date())}</script></HEAD><bodylink="red"vlink="blue"><ahref=""">超級鏈接1</a><ahref=""">超級鏈接2</a><imgsrc="asd.jpg"height="100"width="120"><form><inputtype="button"value="請單擊這里顯示當前日期和時間"onClick="dateinfo()"></form><script>document.write("當前文檔包含"+document.links.length+"個超級鏈接"+"<br>");document.write("當前文檔包含"+document.forms.length+"個表單"+"<br>");document.write("當前文檔未被訪問的超級鏈接顏色是"+document.linkColor+"<br>");document.write("當前文檔已被訪問的超級鏈接顏色是"+document.vlinkColor);</script></body></HTML>Javascript的事件模型document對象還可以處理一些事件，包括keydown、keyup、keypress、Click、Dbklick、MouseDown、MouseUp、Load、Unload等事件。關于事件，使用事件來處理函數(shù)使用戶與頁面的交互性能做得更漂亮。對應于窗口、文檔、表單、超鏈接和圖像等對象也定義了多個事件。利用這些事件可以更好地使用對象編寫交互性更好的網頁。使用事件句柄事件句柄就是事件處理程序，其格式為：on事件名=事件處理函數(shù)（或javascript語句）在實際中進行事件處理時，需要將具體的事件與事件句柄結合起來，為HTML元素指定事件句柄，將“on事件名”稱為該事件的事件屬性，例如，onClick稱為Click事件的事件屬性，其等號后面的內客就是事件的處理過程。事件處理過程可以用事件處理函數(shù)來表示，也可以直接使用javascript語句來表示。例1<html><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">functionstatusinfo(){window.status="這是最精彩的網站之一";}

</script></HEAD><body><ahref=""OnMouseOver="statusinfo()">請將鼠標移到這里！</a>

</body></html>例2：統(tǒng)計單擊按鈕的次數(shù)<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">count=0;</script></HEAD><body><form><inputtype="button"onClick="count++;alert('你已經單擊這里'+count+'次了！')"value="請單擊這里"></form></body></html>例3<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">count=0;functionnum(){count++;alert('你已經單擊這里'+count+'次了！')}</script></HEAD><body><form><inputtype="button"onClick="num()"value="請單擊這里"></form></body></html>通過對象指定事件處理過程前面的所有例子都是在HTML標記符中使用事件句柄，人們經常習慣使用這種方法。還有一種方法是允許在HTML標記符之外，將一個事件處理函數(shù)的調用賦給對象的事件屬性。例子<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE></HEAD><body><formname=form1><inputtype="button"name=button1value="請單擊這里"></form><scriptLanguage="javascript">count=0;functionnum(){count++;alert('你已經單擊這里'+count+'次了！')}

document.form1.button1.onclick=num;</script></body></html>在這個例子中通過＜FORM＞標記符定義了頁面上的一個按鈕，按鈕的NAME屬性值為button1。在document.forml.button1.onclick=num一句中，onclick是按鈕button1的事件屬性，它的值為num。注意此處的函數(shù)名后面役有括號。函數(shù)num()是在第1個＜SCRIPT＞標記塊中定義的。document.forml.button1.onclick=num是在第2個<SCRIPT＞標記塊中，而不是在HTML標記塊中使用的。從這個例子中知道，如果要通過對象指定事件處理過程，必須做到以下兩步：如果事件處理過程是事件處理函數(shù)，則要在<SCRIPT＞標記塊中定義該函數(shù)，這個＜sCRIPT＞標記塊最好放在<HEAD>標記塊間，使頁面裝載時一起被裝載進來。通過特定對象指定事件處理過程的代碼也是放在叱＜sCRIPT＞塊中的。注意：此時如果事件處理過程是時間處理函數(shù)，則只是將函數(shù)名賦給特定的對象的事件屬性，后面不加括號。Event對象簡介Event對象是一種只與事件處理過程有關的特殊的對象，它屬于Javascript的內置對象，可以通過一些屬性來描述一個Javascipt事件。Event對象能夠接收到有關事件以及事件發(fā)生時瀏覽器和頁面的狀態(tài)信息。當頁面上發(fā)生一個事件時，該對象可以作為參數(shù)傳遞到事件的句柄上。例如，當鼠標單擊頁面時，Event對象就包括了事件類型鼠標單擊）、鼠標在事件發(fā)生時的坐標位置等信息。Event對象對于IE和Netscape具有不同的屬性，我們僅介紹和IE有關的屬性Event對象的屬性例子1<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">functionclk(){name=event.type;alert("產生事件對象的事件是"+name+"事件。");}</script></HEAD><bodyonLoad="clk()"><form><inputtype="button"onClick="clk()"value="請單擊這里"></form></body></html>例子2<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">functionposition(){x=event.x;y=event.y;window.status="當前鼠標坐標是X="+x+"Y="+y;}</script></HEAD><bodyonMouseMove="position()"></body></html>例3：不允許使用快捷菜單<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">functionnomenu(){alert("對不起，本網頁不能使用快捷菜單！");event.returenValue=false;}</script></HEAD><bodyonContextmenu="nomenu()"></body></html>（1）Contextmenu事件是當用戶鼠標右擊企圖打開快捷菜單時被觸發(fā)的事件，當該事件發(fā)生時，就調用函數(shù)———nomenu(）通過使用Even對象的returnnValue屬性，并將該屬性的值設置成false來取梢Contextmenu事件，使該事件不再發(fā)生。Javascript的常用事伴用戶在與頁面交互時，通過鼠標、鍵盤或者其他一些動作會產生很多事件。在Javascript中可以充分使用事件來使頁面更精彩。Click事件與Dbclick事件Click事件：當一個頁面的一個位置、按鈕、復選框或者一個超級鏈接被用戶單擊時，就會產生一個Click事件。Dbclick事件：當用戶用鼠標雙擊一個超級鏈接或其他頁面元素時就會產生一個Dbclick事件。Dbclick事件只在IE4.0以上版本和較高版本的NetcapeNevigator中存在。在IE4.0中，Dbclick事件的第1次被單擊會觸發(fā)Click事件。Click事件案例<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">functionshowdate(){today=newDate();hour=today.getHours();minute=today.getMinutes();second=today.getSeconds();alert("現(xiàn)在是"+hour+"點"+minute+"分"+second+"秒“)}</script></HEAD><body><form><inputtype="button"value="按下這里顯示時間"onclick="showdate()"></form></body></html>MouseDown事件與MouseUp事件MouseDown事件：當用戶按下鼠標上的一個鍵時就會產生一個MouseDown事件。MouseUp事件：當用戶釋放鼠標上的一個鍵時就會產生一個MouseUp事件。這兩個事件是伴隨著Click事件發(fā)生的，它們的組合就構成了Click事件，這無論是用在按鈕、頁面任意位置，還是某個超級鏈接上都是一樣的。但是，如果用戶只是在超級鏈接上按下鼠標不放，并將鼠標移到超級鏈接之外再釋放鼠標，這時鏈接上只有MouseDown事件發(fā)生，而有MouseUp事件發(fā)生。Mouseup和Mousedown事件<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">functionpulldown(){mytext.style.fontSize="50pt";mytext.style.fontStyle="italic"mytext.style.weight="bold"}functionfreeup(){mytext.style.fontSize="20pt";mytext.style.fontStyle="normal"mytext.style.weight="normal"}</script></HEAD><body><form><pid=mytextonMouseDown="pulldown()"onMouseUp="freeup()">歡迎訪問我們的網站！

</form></body></html>Mouseover、Mouseout和MouseMove事件Mouseover事件：當用戶將鼠標移過(移到或離開）一個超級鏈接或者其他頁面元素時就會產生一個Mouseover事件。

Mouseout事件：Mouseout事件總是伴隨Mouseover事件。因為當用戶將鼠標移開并脫離一個超級鏈接或者其他頁面元素時就會發(fā)生Mouseout事件。MouseMove：當用戶移動鼠標時就會產生MouseMove事件。Mouseover事件<HTML><HEAD><TITLE>編寫Javascript腳本</TITLE><scriptLanguage="javascript">functionoutinfo(){alert("真可惜，你不打開它！")}</script></HEAD><body><ahref=""onMouseOut="outinfo()">請將鼠標移到這里！</a></body></html>KeyDown事件、KeyPress事件和KeyUp事件

KeyDown事件：當用戶按下鍵盤上的一個鍵并且不放時就產生了KeyDown事件。

KeyUp事件：當用戶松開鍵盤上的一個鍵時就產生了KeyUp事件。

KeyPress事件：KeyPress事件是KeyDOwn事件和KeyUp事件的組合。在鍵盤上按下一個鍵時或松手時就產生了KeyPress事件。例子<html><head><title>編寫Javascript腳本</title><scriptLanguage="javascript">functiondown(){window.status="按住了別松手，松手會彈出警示框!"}functionup(){alert("按不住了？");}</script></head><bodyonKeyDown="down()"onKeyUp="up()"></body></html>Load事件與UnLoad事件

Load事件：Load事件一般是在瀏覽器提取頁面之后，在＜BODY＞標記塊的內容顯示出來之前發(fā)生。

Load事件也可以在＜framset>標記中或者與Load事件相關的頁面元素中調用。例如，加載圖像時調用。Unload事件：當瀏覽器卸載一個文檔時就發(fā)生了Unload事件。<html><head><title>編寫Javascript腳本</title><scriptLanguage="javascript">functionmessage(){alert("加載圖像成功!")}</script></head><body><IMGSRC="asd.jpg"height="100"width="140"onLoad="message()"></body></html>Focus事件與Bur事件當用戶使用鼠標或者鍵盤選中一個頁面元素，如一個文本框，使得用戶可以在其中進行輸入時就產生了一個Focus事件，則稱這個元素獲得了焦點。當一個元素獲得焦點時，其他元素也就失去了焦點。對于窗口或者框架（幀）來說，當一個窗口或者框架（幀）激活時，稱為得到焦點，如果被釋放，則稱為失去焦點。當頁面元素、窗口或框架（幀）失去焦點時，就會產生Blur事件。<html><head><title>編寫Javascript腳本</title><scriptLanguage="javascript">functionbefore(){alert("包括學歷背景和工作經歷");}functionafter(){alert("我已經輸入完了");}</script></head><body><P>請在框里輸入你的個人簡歷：</P><textarearows="4"columns="15"onFocus="before()"onBlur="after()"></textarea><P><inputtype=submitvalue="發(fā)送"><inputtype=resetvalue="重設"></body></html>Submit事件與Reset事件Submit事件：當用戶單擊表單中的一個提交按鈕，準備向服務器提交信息時就會發(fā)生Submit事件。Submit事件只能從＜FORM＞標記塊內獲得，它也是伴隨著Click事件的。當用戶單擊提交按鈕時就會產生Click事件，當Click事件處理完后，Subndt事件才會被觸發(fā)。Reset事件：當一個表單被重置時就會產生一個Reset事件事件。當用戶對于輸入的內容不滿意時，就要進行表單重置，也就是將以前輸入的內容全部清除。<html><head><title>編寫Javascript腳本</title><scriptLanguage="javascript">functioncheckdata(){inputdata=document.form1.text1.value;if(0<inputdata&&inputdata<100)return(true);else{alert("你輸入的數(shù)值"+inputdata+"超出范圍了！");return(false);}}</script></head>

<body><center><formname="form1"method="post"onSubmit="checkdata()"><P>請輸入100以內的正整數(shù)：

<inputtype="text"name="text1"value="1"size="5"></p><br><inputtype="submit"value="提交輸入的數(shù)字"></center></body></html>Change事件與Select事件

Change事件：當一個頁面元素如文本框、多行文本框失去鼠標或鍵盤的焦點，或者值被改變時就會產生Change事件。Select事件：當用戶選擇了文本框或多行文本框內的一個文本時就會產生Select事件。它與單選按鈕、復選框或者選擇列表沒有關系，只是針對文本的。<html><head><title>編寫Javascript腳本</title><scriptLanguage="javascript">functioninfo(){alert("我已經選擇好關鍵字了！");}</script></head><body><P>請在框里輸入你的個人簡歷：</p><textarearows="4"columns="15"onSelect="info()"></textarea><br><inputtype="submit"value="提交輸入的數(shù)字"></body></html>Move事件、DragDrop事件和Resize事件

Reaize事件：當用戶調整窗口或框架（幀）大小時，就會產生一個Resize事件。Move事件：當用戶移動窗口或框架（幀）就會產生Move事件。DragDrop事件：當用戶將一個對象如URL拖放到窗口或者框架（幀），就會產生DragDrop事件。<html><head><title>編寫Javascript腳本</title><scriptLanguage="javascript">functioninfo(){alert("窗口大小被改變了！");}</script></head><bodyonResize="info()"></body></html>Error事件與Abort事件Error事件：當窗口、框架（幀）、圖像或者文檔在加載過程中發(fā)生錯誤時，就會產生一個Error事件。用戶可以使用Error事件來處理裝載或運行時的錯誤。

Abort事件：當用戶單擊瀏覽器上的STOP按鈕或者選擇了一個新的超級鏈接使圖像被中斷裝載時，就會產生一個Abort事件。<html><head><title>編寫Javascript腳本</title><scriptLanguage="javascript">functionimgerror(){alert("窗口加載失??！");}</script></head><body><imgsrc=“no.jpg"height="100"width="140"onError="imgerror()"></body></html>window對象和frame對象文檔對象模型在使用瀏覽器的時候看到頁面上有各種各樣的內客（元素），例如，窗口的標題、頁面的顏色、各種按鈕、圖像等，網頁與瀏覽器是密不可分的，那么能訪問與瀏覽器本身的配置和屬性有關的內容嗎？Javascript提供了一種與網頁關系密切的對象，可以幫助你完成這個工作。支持Javascript的瀏覽器，如IE和Netscape，在裝入web頁面時會根據(jù)頁面的內客為Javascript創(chuàng)建出多個與相應網頁相對應的對象，這樣就形成了一部分瀏覽器對象。在Javascript中可以通過這些對象來訪問頁面上所感興趣的元素，從而獲得一定的操作效果，例如，在每章中都用到的document對象就是一個十分常用的瀏覽器對象。各種瀏覽器對象形成了一種層次模型，將它稱為文檔對象模型（DocumentobjectModel，簡稱DOM），如圖在文檔對象模型中，下層對象與上層對象之間是一種從屬的關系，即下層對象從屬于上層對象，例如，窗口包含了文檔，文檔又可以包含表單、圖像和超級鏈接等。在Javascript中，一個對象的上層的對象可以稱為這個對象的父對象，而它則可以稱為是其上一層對象的子對象。這些對象也提供了多種屬性和方法來供網頁編程人員使用，而且因為用戶經常會通過各種動作來與網頁打交道，所以還提供了一些事件處理。如何引用冽覽器對象對應于文檔對象模型中的層次關系，Javascript對瀏覽器對象的引用是簡單地一層一層地引用的。例如，在引用document對象時，應該使用window.document；在引用用screen對象時，應該使用window.screen；在引用forms對象時，應該使用window.document.forms，在引用text對象時，則應該使用window.document.forms.text。在文檔對象模型中，有些對象屬于數(shù)組型對象，如document對象下一層的imasgs、links、forms等對象，這種對象代表一個頁面文檔中的若干個圖像、超級鏈接和表單。在引用這種數(shù)組型的對象時，可以使用對象在數(shù)組中的位置（下標）來引用，如window.document.forms[0]，表示引用文檔中的第1個表單。還可以通過對象的name屬性來訪問，例如，如果該表單的name屬性為form1，則可以用window.document.form1來引用。window對象作為文檔對象模型中最頂層的對象，Javascript認為它是默認的，因此在引用它的下層對象時，可以不寫出window。例如，在本書中經常用到document對象的write()方法時，使用的是document.write()如果要使用表單form1，就可以寫成document.forml。同樣在使用window對象的屬性和方法時，也可以不寫window，而直接引用。經常用到的alert()實際上就是window.alert()使用window對象window對象也就是窗口對象，它處于文檔對象模型的層次的最頂層。WindoW對象是Web瀏覽器所有內客的客器，所以它的地位是十分特殊而重要的。只要一打開瀏覽器窗口，即使役有在窗口中加載任何文檔內客，瀏覽器也會在內存中創(chuàng)建一個window對象。window對象代表著當前的瀏覽器窗口，因為它的特殊位置，它是所有其他瀏覽器對象的父對象。每個打開的瀏覽器窗口都對應Javascript腳本程序中的一個window對象。除了窗口中的頁面內容之外，一個窗口還包含其他特性，例如，窗口的尺寸以及所有的窗口中所包含的其他各種“元素”內滾動條、工具欄、菜單欄以及狀態(tài)欄等），對于這些“元素”，WindoW對象提供了若干的屬性和方法來幫助使用者對這些“元素”實施一定的控制。還可以利用window對象方便地在刎覽器上創(chuàng)建一個附加的窗口，這個窗口可以按照使用者所需要的尺寸及其他的一些“元素”來創(chuàng)建。window對象包含的屬性、方潔window對象和其他對象一樣也提供了許多屬性和方法，利用這些屬性、方法，再配合一些相應的事件處理就可以實現(xiàn)對刎覽器窗口的許多功能，開發(fā)出既美觀，交互性又好的頁面。window方法window方法使用window對象window對象的屬性與方法的引用，最通常的做法就是采用一般對象的屬性與方法的引用方法，即Window.屬性和window．方法例如：W和window.closedWindow.stop()和window.close()一個window對象還可以使用標識符self代替window引用當前窗口的屬性和方法，self代表當前刎覽器窗口。引用形式為：self.屬性和self.方法還有一種引用window對象的屬性和方法的方法在前面已經說明了，就是在Javasedpt中可以不寫標識符window或Self而是直接寫出當前窗口的屬性和方法。<html><head><title>編寫Javascript腳本</title><scriptLanguage="javascript">window.alert("使用標記符window引用window對象的方法");self.alert("使用標記符self引用window對象的方法");alert("不加標記符，直接引用window對象的方法");</script></head></html>打開或關閉一個窗口當瀏覽器打開一個URL或文件時就創(chuàng)建了一個窗口，這個窗口稱為主窗口，相應的頁面就是裝載在主窗口中的。通常主窗口被打開后，就一直開著，而當瀏覽器打開一個新的URL或文件時，只是更換了主窗口中的內容，而不是重新打開了一個新的窗口。那么如果需要在主窗口下再打開一個新的窗口，應該怎么做呢？這可以在瀏覽器中選擇相應的創(chuàng)建新窗口的菜單項來完成，也可以在Javascript中利用window對象的open()方法來完成。對于IE和NetscapeNavigator這兩種測覽器來說，在瀏覽器中選擇相應的菜單項來創(chuàng)建新窗口的方法不太一樣。IE使用Newwindows菜單項，而NetscapeNavigator則使用File菜單項中的WebBrowser來完成。打開窗口在Javascript中可以使用window對象的open（）方法和close（）方法來打開或關閉一個窗口。open（）方法的格式如下：open（URL，windowname[,windowfeatures]）可以看到，在open()括號內有3個參數(shù)：兩個必選參數(shù)URL和windowname以及一個可選參數(shù)（windowfeatures）這3個參數(shù)的含義是：URL是所要裝入到新窗口的文檔的URL；windowname是所打開的新窗口的名稱；window.features是新窗口的實際的特性(窗口的外觀)。在了解了open()方法的格式和有關參數(shù)后，就可以創(chuàng)建自己所希望的窗口了。例如，下面的這一句就是創(chuàng)建并打開一個新窗口mywindow:<html><head><scriptlanguage="javascript">window.open("new.html","mywindow","menubar=no,height=200,width=300");</script></head></html>關閉窗口當要關閉一個打開的新窗口時，使用Window對象的close（），即window.close()或者self.close()，就可以關閉這個窗口。下面來看一個簡單的例子，通過它進一步說明如何使用window對象來創(chuàng)建窗口和關閉窗口。<html><head><title>編寫javascript腳本</title><scriptlanguage="javascript">functioncreatwindow(){window.open("new.html","mywindow","menubar=no,height=200,width=300");}functionclosewindow(){window.close()}</script></head><body><form><inputtype="button"value="創(chuàng)建新窗口"onClick="creatwindow()"><inputtype="button"value="關閉窗口"onClick="closewindow()"></form></body>進行定時設置在頁面上有時會有一些元素，它們需要在一定時間內存在，超出一定時間后就應該消失了。例如，動畫效果，它需要一個圖像在一定時間內處在一個位置上，超出時間就應該不在這個位置上，而是換到其他的位置上。再例如，在網頁上經常看到的記時器、倒記時器等，window對象提供的定時方法就可以幫助我們來實現(xiàn)這種功能。window對象的定時方法包括setTimeout(),clearTimeout()以及setInterval()和clearlnterval()，它們提供的定時機制允許在一定的時間之內自動地完成一定的功能。這種機制在編程應用上十分有用。例如，在實現(xiàn)動畫效果時就可以采用這些定時方法。setTimeout()和clearTimeout()setTimeout()方法的格式如下：variable=setTimeout(expression,time)Variable是一個變量，setTimeout()將返回一個表示時間的值給它，這個值可以供clearTimeout()方法使用。因此Variable也可以稱為定時器變量。

eXptession可以是一個一般表達式或函數(shù)，

time是以毫秒為單位的時間。setTimeout()方法的作用是在time所規(guī)定的時間之后執(zhí)行expression一次。例如，timer=setTimeout(showmessage(),1000)clearTimeout(timer)<html><head><title>編寫javascript腳本</title><scriptlanguage="javascript">functionstartload(){mytimer=window.setTimeout("alert('時間很晚了，該離開了')",5000);}functionstop(){window.clearTimeout(mytimer);con=confirm("真的想結束瀏覽嗎？");if(con==true)window.close();}</script></head><bodyonLoad="startload()"><form><center><h3>請在5秒鐘以內單擊一下按鈕以結束你的瀏覽：</h3><inputtype="button"value="請在5秒內決定是否單擊此按鈕"onClick="stop()"></center></form></body></html>setlnterval（）方法和clearlnterval（）方法setlnterval（）方法的格式如下：variable=setInterval(expression,time,[args])在setlnterval（）括號內有3個參數(shù)：兩個必選參數(shù)和一個可選參數(shù)。參數(shù)expression，［args］是可選項，它表示如果expression代表的函數(shù)有參數(shù)，則用tw，吧么，mp來表示。setlnterval方法也是返回一個表示時間的值給變量variable。但是setlnterval每隔time所規(guī)定的時間就會自動執(zhí)行expression一次，因而是重復執(zhí)行的。這個方法設定的定時操作可以被clearlnterval()方法取消。<html><head><title>編寫javascript腳本</title><scriptlanguage="javascript">functionstartload(){mytimer=window.setInterval("alert('時間很晚了，該離開了')",5000);}functionstop(){window.clearInterval(mytimer);con=confirm("真的想結束瀏覽嗎？");if(con==true)window.close();}</script></head><bodyonLoad="startload()"><form><center><h3>請在5秒鐘以內單擊一下按鈕以結束你的瀏覽：</h

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論