Web程序設(shè)計課件：Javascript_第1頁
Web程序設(shè)計課件：Javascript_第2頁
Web程序設(shè)計課件：Javascript_第3頁
Web程序設(shè)計課件：Javascript_第4頁
Web程序設(shè)計課件：Javascript_第5頁
已閱讀5頁，還剩55頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

Javascript2025/5/211主要內(nèi)容2025/5/21《Web程序設(shè)計》21Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理本章課程目標知識目標掌握Javascript的基本語法、DOM對象以及事件處理方法；能力要求：能夠認識到解決問題有多種解決方案，并運用文獻資料檢索研究尋找可替代的方案，具備多方案比較選擇能力；能夠理解并掌握Web程序設(shè)計中的基礎(chǔ)知識與工作原理，將知識與原理應(yīng)用于開發(fā)過程中的問題分析；2025/5/21《Web程序設(shè)計》34.1Javascript簡介Javascript是一種動態(tài)類型、弱類型、基于原型的腳本語言。是一種解釋性腳本語言，代碼不進行預(yù)編譯而直接執(zhí)行。JavaScript也有自己的基本語法、數(shù)據(jù)類型、運算符和流程控制語句。它的解釋器通常被稱為JavaScript引擎。JavaScript與Java語言在命名上有些相似，但與Java不是同一公司的產(chǎn)品，它是Netscape（網(wǎng)景）公司為擴充NetscapeNavigator瀏覽器的功能而開發(fā)的一種可以嵌入Web網(wǎng)頁的編程語言，前身叫LiveScript。2025/5/21《Web程序設(shè)計》4JavaScript腳本語言具有以下特點：

腳本語言。JavaScript是一種解釋型的腳本語言,不需要編譯，它是在程序的運行過程中逐行進行解釋的。

基于對象。JavaScript是一種基于對象的腳本語言,它不僅可以創(chuàng)建對象,也能使用現(xiàn)有的對象。

弱數(shù)據(jù)類型。JavaScript腳本語言中采用的是弱類型的變量類型。動態(tài)性。JavaScript是一種采用事件驅(qū)動的腳本語言，它可以在瀏覽器端不需要經(jīng)過Web服務(wù)器直接對用戶的輸入做出響應(yīng)。跨平臺性。JavaScript腳本語言僅需要瀏覽器的支持，不依賴于操作系統(tǒng)。2025/5/21《Web程序設(shè)計》5主要內(nèi)容2025/5/21《Web程序設(shè)計》61Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理語法Javascript代碼一般嵌入到網(wǎng)頁中的<script></script>標簽之內(nèi)，或保存一個單獨的js文件中。2025/5/21《Web程序設(shè)計》7<scripttype=”text/javascript”>vari,sum=0;for(i=0;i<=100;i++){sum+=i;}window.alert(‘總和為：’+sum);</script>JavaScript在編寫時，仍需注意以下事項：JavaScript區(qū)分大小寫。例如，變量Number與變量number是兩個不同的變量。Javascript中變量是弱類型的，因此在定義變量的時，只使用關(guān)鍵字var就可以將變量初始化任意的值。JavaScript可以使用雙斜線“//”開頭的單行注釋，也可以使用“/*”開頭，以“*/”結(jié)尾的多行注釋。JavaScript的變量名不能是系統(tǒng)的保留字（或關(guān)鍵字，如var、for、null等）數(shù)據(jù)類型Javascript雖然是弱數(shù)據(jù)類型，但仍然有數(shù)據(jù)類型及其運算規(guī)則。Javascript有6種數(shù)據(jù)類型，它們分別是：int（整型）float（浮點型）string（字符串類型）boolean（布爾型）object（對象類型）null（空類型）undefined（未定義類型）其中int型和float型為數(shù)值型。2025/5/21《Web程序設(shè)計》8字符串類型字符串是用雙引號（“”）或單引號（‘’）作為分界符的，字符的個數(shù)為字符串的長度。單雙引號也可嵌套使用。例如，“He’sakindman！”轉(zhuǎn)義字符用反斜杠“\”開頭2025/5/21《Web程序設(shè)計》9轉(zhuǎn)義字符含義轉(zhuǎn)義字符含義\b退格\t表示TAB符號\f換頁\'單引號\n換行\(zhòng)"雙引號\r回車\\反斜杠空類型與未定義類型空類型的值就是null，表示空值，這種空值通常是人為賦予的，例如在初始化時將該變量設(shè)置為null。未定義類型即undefined，指變量被聲明，但未給該變量賦值。undefined與null不同的是，undefined是變量聲明后自動具有的值，null是人為賦值的。2025/5/21《Web程序設(shè)計》10變量JavaScript中變量的命名規(guī)則如下：

必須以字母或下劃線開頭

變量名不能包含空格、加號或減號等一些特殊符號

不能使用JavaScript中的關(guān)鍵字JavaScript變量名是嚴格區(qū)分大小寫的。例如，Nchu與nchu表示兩個不同的變量在JavaScript中，使用變量之前可以先聲明變量，所有的變量都由關(guān)鍵字var聲明。2025/5/21《Web程序設(shè)計》11vara,b,c;//同時聲明a，b，c三個變量由于JavaScript采用弱類型的形式，所以在定義時可以不管變量的數(shù)據(jù)類型，把任意類型的數(shù)據(jù)賦值給變量，JavaScript將根據(jù)實際的值來確定變量的類型。例如：2025/5/21《Web程序設(shè)計》12varnumber=100;//數(shù)值數(shù)據(jù)類型varstr=“南昌航空大學”;//字符串類型varstatus=true;//布爾類型number=false;//修改number中的值為布爾類型主要內(nèi)容2025/5/21《Web程序設(shè)計》131Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理一個最簡單的程序是由若干條語句構(gòu)成的，程序按語句位置的先后次序，逐條按順序執(zhí)行，這種程序被稱為順序結(jié)構(gòu)。除了順序結(jié)構(gòu)外，還有用于判斷和重復執(zhí)行的控制流程，分別稱為選擇和循環(huán)結(jié)構(gòu)，這三種結(jié)構(gòu)都是用來控制程序執(zhí)行的流程。Javascript與C、Java等語言類似，也提供了相同的流程控制語句。2025/5/21《Web程序設(shè)計》14if語句2025/5/21《Web程序設(shè)計》15<html><head><metacharset="UTF-8"><title>if語句的簡單應(yīng)用</title></head><body><script>vardate=newDate();varhour=date.getHours();if(hour>=6&&hour<8)alert("當前時間為："+date.toLocaleString()+""+"早上好！");if(hour>=8&&hour<12)alert("當前時間為："+date.toLocaleString()+""+"上午好！");if(hour>=12&&hour<18)alert("當前時間為："+date.toLocaleString()+""+"下午好！");if(hour>=18&&hour<23)alert("當前時間為："+date.toLocaleString()+""+"晚上好！");if(hour>=23&&hour<=24||hour>0&&hour<6)alert("當前時間為："+date.toLocaleString()+""+"夜深了，休息吧");</script></body></html>循環(huán)whiledo-whilefor2025/5/21《Web程序設(shè)計》16<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>while語句的應(yīng)用</title><script>//求1+2+3+...+100的和varnum=1,sum=0;while(num<=100){sum=sum+num;num++;}document.write("1+2+3+...+100的和為："+sum);</script></head><body></body></html>主要內(nèi)容2025/5/21《Web程序設(shè)計》171Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理模塊化在解決復雜的問題時或較大的程序一般分為若干個較小的程序模塊，每一個模塊實現(xiàn)特定的功能。在Javascript語言中，每一個模塊就是一個函數(shù)。有時將常用的模塊編寫成函數(shù)，然后可以在程序中需要的地方重復調(diào)用，以增強代碼的重用性，提高代碼的可維護性。2025/5/21《Web程序設(shè)計》18模塊模塊模塊模塊模塊模塊函數(shù)定義參數(shù)說明如下：

函數(shù)名：函數(shù)的名稱，命名規(guī)范與變量名一致，不能與系統(tǒng)保留字沖突；

參數(shù)1，參數(shù)2：參數(shù)的名稱，可選的，是函數(shù)的形參，這里的參數(shù)只需要名稱，不需要數(shù)據(jù)類型；

代碼塊：函數(shù)的主體，即函數(shù)中要執(zhí)行的數(shù)據(jù)處理邏輯；return返回值：用于返回函數(shù)的計算結(jié)果，可選的，適用于需要返回的情形，如果不需要返回，則可省略。2025/5/21《Web程序設(shè)計》19function函數(shù)名（[參數(shù)1，參數(shù)2，…]）{代碼塊;[return返回值;]}<body><script>functiongetToday()//定義函數(shù){vartoday=newDate();returntoday.toLocaleString();}</script><h3>今天是：<span><scripttype=”text/javascript”>document.write(getToday());//調(diào)用函數(shù)</script></span></h3></body>函數(shù)參數(shù)參數(shù)是函數(shù)向內(nèi)部傳遞數(shù)據(jù)的通道。在函數(shù)定義的時候確定的參數(shù)稱為形式參數(shù)（形參），而真正的參數(shù)值（稱為實際參數(shù)，簡稱實參）是在調(diào)用該函數(shù)時，由調(diào)用方傳遞給所定義的函數(shù)，從而實現(xiàn)調(diào)用函數(shù)向被調(diào)用函數(shù)的數(shù)據(jù)傳遞。Javascript的函數(shù)參數(shù)不需要指定參數(shù)的類型，這是因為變量類型默認是自動識別的。2025/5/21《Web程序設(shè)計》20functionmyFunc(x,y){//判斷y是否傳入實際值if(y===undefined){y=0;......}}調(diào)用時，如果沒有給y傳入值，則y的值默認為0。這句代碼也可直接寫為“y=y||0”//EMCAScript6//支持默認參數(shù)functionmyFunc(x,y=0){......}JavaScript函數(shù)有個內(nèi)置的對象arguments對象，包含了函數(shù)調(diào)用的參數(shù)數(shù)組。2025/5/21《Web程序設(shè)計》21functionsumAll(){vari,sum=0;for(i=0;i<arguments.length;i++){sum+=arguments[i];}returnsum;}......x=sumAll(1,123,500,115,44,88);主要內(nèi)容2025/5/21《Web程序設(shè)計》221Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理基于對象（Object-based）Javascript語言是基于對象（Object-based）的程序設(shè)計語言，采用的是對象、事件驅(qū)動的編程機制。與Java類似的是，Javascript中的對象也具有一定的屬性和方法，可以根據(jù)需要進行聲明。但在類的聲明與實例時，與Java有較大的區(qū)別。2025/5/21《Web程序設(shè)計》23對象的定義Javascript對象是一種復合值：它將很多值（原始值或者其他對象）聚合在一起，可通過名字訪問這些值。對象也可看做是屬性的無序集合，每個屬性都是一個名/值對。2025/5/21《Web程序設(shè)計》24var對象名={屬性名：值,屬性名：值,......}對象名：要定義的對象名稱；屬性名：對象中的屬性名稱；值：為該屬性設(shè)置的值。定義時屬性名和值通常成對出現(xiàn)，也稱為“屬性-值”對，多個“屬性-值”對之間用逗號分隔。varperson={firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"};對象方法的定義Javascript中對象方法是通過函數(shù)的定義方式實現(xiàn)的，也可以將其看作是一個屬性，這個屬性是一個函數(shù)。2025/5/21《Web程序設(shè)計》25var對象名={/*屬性列表*/....../*方法列表*/

函數(shù)名:function(){

函數(shù)體;},......};對象名：聲明的對象名稱；函數(shù)名：聲明的函數(shù)名稱，是對象的成員函數(shù)；函數(shù)體：函數(shù)的具體實現(xiàn)邏輯代碼。varperson={fullName:“John”,lastName:“Doe”,showFullName:function(){returnfullName+lastName;}}內(nèi)置對象JavaScript腳本語言提供了一些內(nèi)置對象，這些內(nèi)置對象通常是一些工具對象，利用這些對象以及提供的方法可以輔助完成特定的功能。常用的內(nèi)置對象主要包括：Date對象String對象Math對象Array對象......2025/5/21《Web程序設(shè)計》26Date對象屬性/方法說

明getDate()獲取當前的日期getYear()獲取當前的年份（2000年以前返回年份數(shù)后兩位，2000年以后返回后四位）getFullYear()返回以4位整數(shù)表示的年份數(shù)getMonth()獲取當前的月份getDay()獲取當周的第幾天，即星期幾getHours()獲取當前的小時getMinutes()獲取當前的分鐘getSeconds()獲取當前的秒setDate()設(shè)置當前的日期setYear()設(shè)置當前的年份setMonth()設(shè)置當前的月份setHours()設(shè)置當前的小時setMinutes()設(shè)置當前的分鐘setSeconds()設(shè)置當前的秒setTime()設(shè)置當前的時間（單位是毫秒）toLocaleString()以本地時區(qū)格式顯示，并以字符串表示2025/5/21《Web程序設(shè)計》27String對象屬性/方法說

明length求字符串的長度charAt(下標)字符對象指定位置的字符indexOf(目標字符串)目標字符串在字串對象中首次出現(xiàn)的位置lastIndexOf(目標字符串)目標字符串在字串對象中最后一次出現(xiàn)的位置substr(開始位置[,長度])截取子串substring(索引值I,索引值j)截取從索引值i到j(luò)-1的字串split(分隔符)把字符串按分隔符拆成字符串數(shù)組replace(被代替的字符串,新字符串)用新的字符串代替舊的字符串toLowerCase()變?yōu)樾懽帜竧oUpperCase()變?yōu)榇髮懽帜竧oString()獲取String對象的字符串值2025/5/21《Web程序設(shè)計》28Math對象屬性/方法說

明abs(x)返回x的絕對值max(x,y)返回兩數(shù)間的較大值exp(x)返回x的e次方log(x)返回以e為底的對數(shù)值pow(x,y)返回x的y次方sqrt(x)返回x的平方根random()返回0和1之間的一個隨機數(shù)round(x)返回x四舍五入后的整數(shù)sin(x)、cos(x)、tan(x)分別返回x的正弦、余弦、正切值asin(x)、acos(x)、atan(x)分別返回x的反正弦、反余弦、反正切值2025/5/21《Web程序設(shè)計》29Array對象Array對象是Javascript中一個特殊的對象，專門用于數(shù)組的聲明。2025/5/21《Web程序設(shè)計》30對

象屬性/方法說

明Arraypush(元素1，元素2，…)添加元素，返回數(shù)組的長度reverse()倒序數(shù)組<head><metacharset="UTF-8"><title>Array對象應(yīng)用示例</title></head><body><script>varapple="蘋果",banana="香蕉",orange="橘子";vararray=newArray();array.push(apple,banana,orange);document.write("數(shù)組為："+array+"<br/>");varreverse_array=array.reverse();document.write("倒序數(shù)組為："+reverse_array);</script></body>瀏覽器對象瀏覽器對象也稱為瀏覽器內(nèi)置對象（BrowserObjectModel），這些內(nèi)置對象是瀏覽器自身已定義好的，可以直接使用。BOM可實現(xiàn)功能主要有：彈出新的瀏覽器窗口，移動、關(guān)閉瀏覽器窗口以及調(diào)整窗口的大小，頁面的前進、后退等。因此，瀏覽器對象主要有：window,location,history等。2025/5/21《Web程序設(shè)計》31window對象window對象表示一個瀏覽器窗口或一個框架。在該對象結(jié)構(gòu)圖中，窗口對象window是所有對象中的最高層對象。window對象會在<body>或<frameset>出現(xiàn)時自動創(chuàng)建。window對象是一個全局對象，在同一個窗口訪問其他對象時，可以省略2025/5/21《Web程序設(shè)計》32方法描述alert(信息字串)顯示帶消息和“確定”按鈕的對話框confirm(確認信息字串)確認對話框，有“確認”和“取消”兩個按鈕，單擊“確認”返回true，單擊“取消”返回falseprompt(提示字串,[默認值])提示輸入信息對話框，返回用戶輸入信息open(URL,窗口名稱[,窗口規(guī)格])打開新窗口scroll(x坐標,y坐標)窗口滾動到指定坐標位置setTimeout(函數(shù),毫秒)指定毫秒時間后調(diào)用函數(shù)setInterval(函數(shù),毫秒)每隔指定毫秒時間調(diào)用一次函數(shù)clearTimeout(定時器對象)清除以setTimeout定義的定時程序clearInterval(定時器對象)清除以setInterval定義的定時程序close()關(guān)閉當前瀏覽器窗口stop()停止加載網(wǎng)頁moveTo(x坐標,y坐標)將窗口移動到設(shè)置的位置moveBy(水平像素值,垂直像素值)按設(shè)置的值相對地移動窗口resizeTo(寬度像素值,高度像素值)按指定的寬度和高度調(diào)整窗口resizeBy(寬度像素值,高度像素值)按指定的值相對的調(diào)整窗口大小2025/5/2133屬性描述document提供窗口的文檔對象只讀引用location包含有關(guān)當前URL的信息navigator提供窗口的瀏覽器對象引用history提供窗口的歷史對象只讀引用defaultStatus設(shè)置狀態(tài)欄的默認信息status設(shè)置狀態(tài)欄的臨時信息screen提供窗口的屏幕對象引用frames提供窗口的框架對象引用name設(shè)置或返回存放窗口的名稱event提供窗口的事件對象引用self返回對當前窗口的引用top返回最頂層的先輩窗口parent返回父窗口window對象使用示例(alert方法)2025/5/21《Web程序設(shè)計》34<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>警告對話框的應(yīng)用</title><script>functioncheckPasswod(object){if(object.value.length<6)alert("密碼長度不得小于6位"); }</script></head><body>//當失去焦點時發(fā)生密碼：<inputtype="password"onblur="checkPasswod(this)"/></body></html>window對象使用示例(confirm方法)2025/5/21《Web程序設(shè)計》35<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><script>functionConfirm(){if(confirm("確認刪除嗎？"))alert("已刪除");elsealert("您取消了刪除");}</script></head><body><inputtype="button"value="刪除"onclick="Confirm()"/></body></html>定時器應(yīng)用示例2025/5/21《Web程序設(shè)計》36<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><script>functionshowtime(){document.getElementById("mytime").innerText=newDate().toLocaleString();}//每隔一秒種調(diào)用一次showtime()函數(shù)setInterval("showtime()",1000);</script></head><body><spanid="mytime"></span></body></html>location對象location對象是window對象的子對象，是瀏覽器內(nèi)置的一個靜態(tài)對象，它包含有關(guān)當前URL（統(tǒng)一資源定位符）信息。2025/5/21《Web程序設(shè)計》37屬性/方法描述href設(shè)置或返回完整的URLhost設(shè)置或返回URL的主機名和端口號hostname設(shè)置或返回URL的主機名port設(shè)置或返回URL的端口號pathname設(shè)置或返回URL的路徑部分protocol設(shè)置或返回URL的協(xié)議search設(shè)置或返回從“？”開始的URL部分（查詢部分）hash設(shè)置或返回從“#”開始的URL部（錨）reload()重新加載當前網(wǎng)頁replace(url)用url指定的網(wǎng)址代替當前的網(wǎng)頁assign(url)用url指定的網(wǎng)址加載新的網(wǎng)頁主要內(nèi)容2025/5/21《Web程序設(shè)計》381Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理DOM（DocumentObjectModel，文檔對象模型），是中立于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問、更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。當網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型。HTMLDOM模型被結(jié)構(gòu)化為對象樹如圖所示。2025/5/21《Web程序設(shè)計》39DOM用途通過這個對象模型，JavaScript可以完成以下內(nèi)容：JavaScript能改變頁面中的所有HTML元素JavaScript能改變頁面中的所有HTML屬性JavaScript能改變頁面中的所有CSS樣式JavaScript能刪除已有的HTML元素和屬性JavaScript能添加新的HTML元素和屬性JavaScript能對頁面中所有已有的HTML事件作出反應(yīng)JavaScript能在頁面中創(chuàng)建新的HTML事件2025/5/21《Web程序設(shè)計》40節(jié)點關(guān)系DOM模型節(jié)點樹中的節(jié)點通常存在一些層級關(guān)系?？梢酝ㄟ^父（parent）、子（child）和同胞（sibling）等術(shù)語來描述這些關(guān)系。父節(jié)點擁有子節(jié)點。同級的子節(jié)點被稱為同胞（兄弟或姐妹）。在節(jié)點樹中，頂端節(jié)點被稱為根（root）。每個節(jié)點都有父節(jié)點，除了根（它沒有父節(jié)點）。一個節(jié)點可擁有任意數(shù)量的子節(jié)點。同胞是擁有相同父節(jié)點的節(jié)點。2025/5/21《Web程序設(shè)計》412025/5/21《Web程序設(shè)計》42<html><head><metacharset="utf-8"><title>DOM教程</title></head><body><h1>DOM課程</h1><p>Helloworld!</p></body></html>訪問方法HTMLDOM方法是可以在節(jié)點（HTML元素）上執(zhí)行的動作。一些常用的HTMLDOM方法：getElementById(id)：獲取帶有指定id的節(jié)點（元素）appendChild(node)：插入新的子節(jié)點（元素）removeChild(node)：刪除子節(jié)點（元素）2025/5/21《Web程序設(shè)計》43方法描述getElementById()返回帶有指定ID的元素。getElementsByTagName()返回包含帶有指定標簽名稱的所有元素的節(jié)點列表（集合/節(jié)點數(shù)組）。getElementsByClassName()返回包含帶有指定類名的所有元素的節(jié)點列表。querySelectorAll()返回符合該CSS選擇器的所有元素的節(jié)點列表，IE8以下不適用appendChild()把新的子節(jié)點添加到指定節(jié)點。removeChild()刪除子節(jié)點。replaceChild()替換子節(jié)點。insertBefore()在指定的子節(jié)點前面插入新的子節(jié)點。createAttribute()創(chuàng)建屬性節(jié)點。createElement()創(chuàng)建元素節(jié)點。createTextNode()創(chuàng)建文本節(jié)點。getAttribute()返回指定的屬性值。setAttribute()把指定屬性設(shè)置或修改為指定的值。getElementById()方法該方法返回帶有指定ID的元素getElementsByTagName()方法該方法返回帶有指定標簽名的所有元素getElementsByClassName()方法該方法返回帶有指定class樣式名稱的所有元素2025/5/21《Web程序設(shè)計》44varobj=document.getElementById(ID);varobjs=document.getElementsByTagName(tagName);varobjs=document.getElementByClassName(className);例如，以下代碼實現(xiàn)了動態(tài)添加一個下拉框的功能2025/5/21《Web程序設(shè)計》45<html><body><pid="area"></p><script>vare=document.createElement("select");//創(chuàng)建下拉框節(jié)點e.options[0]=newOption("加載項1","");//添加選項e.options[1]=newOption("加載項2","");//添加下拉框document.getElementById("area").appendChild(e);</script></body></html>訪問屬性屬性是HTML元素預(yù)先定義好的標簽，涉及到HTML元素的外觀、樣式、文本、標簽等方面的屬性，通過元素屬性的訪問，可以實現(xiàn)客戶端動態(tài)改變網(wǎng)頁的效果。主要的公共屬性有以下幾種：innerHTML--表示元素的內(nèi)容，包含HTML標簽。nodeName--表示節(jié)點的標簽名稱，返回一個文本值。nodeValue--表示節(jié)點的值，返回一個文本值。nodeType--表示節(jié)點類型，返回一個整型值。2025/5/21《Web程序設(shè)計》46innerHTML示例2025/5/21《Web程序設(shè)計》47<!DOCTYPEhtml><html><head><metacharset="utf-8"></head><body><pid="intro"></p><script>//修改p標簽中的文本內(nèi)容varobj=document.getElementById("intro");obj.innerHTML=”早上好”;</script></body></html>修改元素樣式通過HTMLDOM，可以訪問HTML元素的樣式對象，實現(xiàn)動態(tài)改變HTML元素的樣式。主要通過元素的style屬性來完成。參數(shù)說明：obj，要訪問或修改的對象名稱樣式名，要訪問或修改的CSS樣式名稱2025/5/21《Web程序設(shè)計》48obj.style.樣式名obj.style.fontSize="12pt";主要內(nèi)容2025/5/21《Web程序設(shè)計》491Javascript簡介2Javascript語法3流程控制4函數(shù)5對象6文檔對象模型7事件處理Javascript事件Javascript事件實質(zhì)上是發(fā)生在HTML元素上的“事件”，例如鼠標點擊或鍵盤上有按鍵時，可以應(yīng)用JavaScript處理這些事件。當用戶點擊鼠標時

當網(wǎng)頁已加載時

當圖片已加載時

當鼠標移動到元素上時

當輸入字段被改變時

當HTML表單被提交時

當用戶觸發(fā)按鍵時2025/5/21《Web程序設(shè)計》50常用事件事件描述onclick鼠標單擊事件ondbclick鼠標雙擊事件onmousedown用戶按下鼠標時觸發(fā)事件onmouseup用戶按下鼠標后松開鼠標時觸發(fā)事件onmouseover鼠標移到某個對象上onmousemove鼠標移動時觸發(fā)事件onmouseout鼠標離開對象的時候onkeypress按下然后松開一個鍵onkeyup松開一個鍵onkeydown按下一個鍵onfocus當某個元素獲得焦點時觸發(fā)事件onblur當某個元素失去焦點時觸發(fā)事件onchange文本框內(nèi)容改變事件（text、textarea、select、password等對象）onselect文本框內(nèi)容被選中事件onerror加載文件或圖像發(fā)生錯誤時觸發(fā)事件onload頁面內(nèi)容加載完成時觸發(fā)事件onunload卸載網(wǎng)頁或關(guān)閉窗口時觸發(fā)事件onresize當窗口被調(diào)整大小時onscroll滾動條移動事件onhelp按F1鍵或單擊瀏覽器Help按鈕時發(fā)生onsubmit一個表單被提交時觸發(fā)事件onreset一個表單被重置時觸發(fā)事件2025/5/21《Web程序設(shè)計》51onclick事件示例2025/5/21《Web程序設(shè)計》52<divonclick=”show()”>顯示元素</div><script>functionshow(){alert(“點擊了顯示元素按鈕”);}</script>onload事件onload事件，當頁面上所有元素都獲取成功并在瀏覽器中加載完成后觸發(fā)，可以理解為頁面上所有元素都成功顯示后觸發(fā)。2025/5/21《Web程序設(shè)計》53<head><metacharset="UTF-8"><title>Document</title><scripttype="text/javascript">window.onload=function(){//定義onload事件處理程序document.getElementById("btn").onclick=function(){document.getElementById("box").style.width="400px";document.getElementById("box").style.height="400px";}</script></head><body><inputtype="button"name="btn"id="btn"value="確認"><divid="box"></div></body>onchange事件當某個元素的值發(fā)生變化時觸發(fā)。通?？梢詾槲谋据斎肟蚧蛳吕蜻x項發(fā)生變化時，進行相應(yīng)的處理。需要注意的

溫馨提示

  • 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

提交評論