《HTML+CSS+JavaScript網(wǎng)頁設(shè)計教程》課件-6. 第四章 JavaScript

目錄CONTENTS第一章網(wǎng)頁設(shè)計綜述第二章HTML語言第三章CSS第四章JavaScript第五章網(wǎng)頁設(shè)計綜合案例04第四章JavaScript目錄JavaScript概述標識符、變量和基本數(shù)據(jù)類型運算符與表達式流程控制函數(shù)事件DOM模型BOM模型HTML、CSS和JavaScript各司其職，方能設(shè)計出一個豐富多彩、功能多樣的網(wǎng)頁：HTML語言定義了網(wǎng)頁元素的內(nèi)容；CSS樣式表描述網(wǎng)頁中各元素的布局；JavaScript腳本語言則用于定義網(wǎng)頁元素的行為。JavaScript是一種解釋性的腳本語言，它具有以下特點：1.代碼可以嵌入在網(wǎng)頁中，或者寫在單獨的文本文件中。2.JavaScript的代碼無需編譯，由瀏覽器解釋執(zhí)行。3.用于添加HTML元素的交互行為。4.具有跨平臺的特性，在瀏覽器的支持下，可以在Android、Windows和Linux等平臺上運行。JavaScript概述在網(wǎng)頁中引入JavaScript的代碼由兩種方式：1.使用<script>標簽，將代碼直接嵌入在網(wǎng)頁中；

放在<script></script>標簽之間，當瀏覽器解釋到<script>標簽時，就會執(zhí)行其中的代碼。2.將代碼放在單獨的文本文件中，該文件的擴展名一般為.js，然后使用<script>標簽的src屬性，將代碼引入到網(wǎng)頁中。

注意：存放JavaScript代碼的文本文件中，不需要再使用<script></script>標簽。

例如：<scriptsrc=“js/hello.js”></script>

將js目錄下的hello.js文件引入到當前網(wǎng)頁文件中4.1JavaScript概述4.2標識符、變量和數(shù)據(jù)類型標識符是指變量、函數(shù)或者屬性的名稱，JavaScript中標識符的命名規(guī)則是：1.首字符必須是字母、下劃線或者美元符號（$）;2.其他字符可以是字母、下劃線、美元符號（$）或者數(shù)字。JavaScript的標識符是嚴格區(qū)分大小寫的，例如變量username和UserName是兩個不同的變量。在設(shè)計網(wǎng)頁當中，這一點要特別注意，不要與HTML語言不區(qū)分大小寫的特性混淆在一起。4.2.1標識符JavaScript這門語言自身用到了一些特定的詞，這些詞作為保留字。在給變量或者函數(shù)命名時，要注意不能使用JavaScript的保留字。abstractargumentsbooleanbreakbytecasecatchcharclass*constcontinuedebuggerdefaultdeletedodoubleelseenum*evalexport*extends*falsefinalfinallyfloatforfunctiongotoifimplementsimport*ininstanceofintinterfaceletlongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuper*switchsynchronizedthisthrowthrowstransientTRUEtrytypeofvarvoidvolatilewhilewithyield

4.2.2變量標識符、變量和數(shù)據(jù)類型變量在程序中是用來存儲信息的容器，也可以理解為一個命名的內(nèi)存空間。JavaScript是一種弱數(shù)據(jù)類型的編程語言，也就是變量不區(qū)分數(shù)據(jù)類型，一個變量聲明后，可以存儲任意類型的數(shù)據(jù)。JavaScript使用var關(guān)鍵字來聲明變量，如果要聲明多個變量，多個變量名之間要用“,”分隔開。例如，我們要聲明名字為x，y的兩個變量，既可以這樣分別聲明：varx;vary;也可以合在一起這樣聲明：varx,y;標識符、變量和數(shù)據(jù)類型JavaScript變量主要有兩種類型：基本類型：是指數(shù)字（Number）、字符串（String）、布爾類型（Boolen）等這些簡單數(shù)據(jù)類型引用類型：是指對象（Object）、數(shù)組（Array）、日期（Date）、函數(shù)（Function）等數(shù)據(jù)類型。標識符、變量和數(shù)據(jù)類型4.2.3基本數(shù)據(jù)類型JavaScript中有5種基本的數(shù)據(jù)類型：Number、String、Boolean、Undefined和Null。1.數(shù)值類型（Number）數(shù)值類型是一種基本的數(shù)據(jù)類型，在JavaScript中，既可以使用原始數(shù)據(jù)，也可以使用Number對象對原始數(shù)據(jù)進行封裝。JavaScript支持十進制、十六進制（以0X或者0x開頭）、八進制（以0開頭）的數(shù)據(jù)表示方法，也可以使用“number1”E“number2”的科學(xué)計數(shù)法來表示數(shù)據(jù)。vara,b,c;//定義了a，b，c三個變量a=0x13;//十六進制表示的數(shù)據(jù)，十六進制數(shù)13b=014;//八進制表示的數(shù)據(jù)，八進制數(shù)14c=3E5;//科學(xué)計數(shù)法表示的數(shù)據(jù)，表示3*10的5次方。2.字符串類型（String）在JavaScript中，將字符放在兩個“"”之間來表示一個字符串。例如： varstr="Helloworld";

定義了一個名字為str的字符串變量，其中存儲的字符為“Helloworld”。標識符、變量和數(shù)據(jù)類型JavaScript對String類型的數(shù)據(jù)提供了大量的屬性和操作方法，例如，可以使用length屬性來獲取一個字符串中字符的個數(shù)。JavaScript常用的方法和屬性如下表所示：標識符、變量和數(shù)據(jù)類型方法/屬性描述length返回字符串的長度charAt()返回指定索引位置的字符concat()連接兩個或多個字符串，返回連接后的字符串indexOf()返回字符串中檢索指定字符第一次出現(xiàn)的位置lastIndexOf()返回字符串中檢索指定字符最后一次出現(xiàn)的位置match()找到一個或多個正則表達式的匹配replace()替換與正則表達式匹配的子串search()檢索與正則表達式相匹配的值slice()提取字符串的片斷，并在新的字符串中返回被提取的部分split()把字符串分割為子字符串數(shù)組substr()從起始索引號提取字符串中指定數(shù)目的字符substring()提取字符串中兩個指定的索引號之間的字符toLowerCase()把字符串轉(zhuǎn)換為小寫toString()返回字符串對象值toUpperCase()把字符串轉(zhuǎn)換為大寫trim()移除字符串首尾空白valueOf()返回某個字符串對象的原始值3.布爾類型（Boolean）JavaScript中，布爾類型數(shù)據(jù)的取值有兩種：true和false。4.未定義類型（Undefined）JavaScript中，如果定義了一個變量而沒有對其進行初始化，則使用該變量時會提示“undefined”。例如，下面這段代碼定了一個變量v1，但是未進行初始化，我們在控制臺輸出該變量時，會顯示“undefined”。標識符、變量和數(shù)據(jù)類型5.空類型（Null）Null可以認為是一個特殊的值，表示“非對象”的意思。在DOM模型中，使用getElementById（）方法獲取某個HTML元素對象時，如果所查找的對象不存在，就會返回一個“Null”。標識符、變量和數(shù)據(jù)類型標識符、變量和數(shù)據(jù)類型4.2.4復(fù)合數(shù)據(jù)類型：數(shù)組復(fù)合數(shù)據(jù)類型是指有多種基本數(shù)據(jù)類型（包括復(fù)合類型）組成的數(shù)據(jù)體。在JavaScript中，數(shù)組（Array）是一種很重要的復(fù)合數(shù)據(jù)類型。數(shù)組是指用一個單獨的變量名存儲的一系列數(shù)據(jù)，通過變量名加索引的方式來訪問具體的數(shù)組元素。注意：JavaScript中，數(shù)組元素的索引值從0開始編號，即第一個數(shù)組元素的索引為0，第二個數(shù)組元素的索引為1，其他元素以此類推。JavaScript中數(shù)組的定義方法非常靈活，在一個數(shù)組中，可以存儲不同類型的數(shù)據(jù)，數(shù)組的大小（長度）是可以動態(tài)變化的，不存在數(shù)組訪問越界等問題。使用[]運算符，或者new一個Array()對象，都可以創(chuàng)建一維數(shù)組。注意：JavaScript中，所有數(shù)組下標都是從0開始編號的。一維數(shù)組例如，下面這段代碼中，分別定義了三個數(shù)組a，b和c。var a=[0,1,2];

var b=[];

varc=newArray();數(shù)組a在定義時就進行了初始化，第一個元素a[0]的值為0，第二個元素a[1]的值為1，第三個元素a[2]的值為2。數(shù)組b在定義時未進行初始化，這是一個空數(shù)組，但是在后面的代碼中，我們直接對該數(shù)組的元素進行賦值。

數(shù)組c是使用new操作符定義的一個Array對象。二維和多維數(shù)組Javascript不支持真正的多維數(shù)組，例如下面這種定義一個10*10的二維數(shù)組的方法，在JavaScript中是錯誤的：

vartwo=newArray[10][10];但是我們可以利用JavaScript面向?qū)ο蟮奶匦?，把?shù)組作為一個數(shù)組元素的內(nèi)容來實現(xiàn)二維或者多維數(shù)組的定義。訪問二維數(shù)組中的元素，只要使用兩次[]操作符即可。例如，下面這段代碼就展示了如何定義和使用二維數(shù)組的方法：vartwo=newArray();two[0]=newArray();two[0][1]="Hello";two[0][2]=3.15;標識符、變量和數(shù)據(jù)類型4.2.5對象和this關(guān)鍵字對象只是帶有屬性和方法的特殊數(shù)據(jù)類型，在JavaScript中，幾乎所有的事物都是對象。我們可以使用字符來定義和創(chuàng)建JavaScript對象，例如，下面這段代碼就創(chuàng)建了一個名字為Person的對象：varPerson={firstName:"John",lastName:"Doe",age:30,eyeColor:"Blue",information:function(){returnthis.firstName+"eyecoloris"+this.eyeColor;}}這個名為Person的對象，共有四個屬性：firstName、lastName、age和eyeColor，一個方法：information。標識符、變量和數(shù)據(jù)類型訪問對象的屬性和方法的基本語法格式是： 對象名.屬性名 對象名.方法名()例如，我們要訪問上面代碼所定義的Person對象的firstName屬性，可以使用如下的代碼： console.log(Person.firstName);訪問Person對象的information方法的代碼如下： console.log(Prmation());標識符、變量和數(shù)據(jù)類型JavaScript的內(nèi)置對象為了便于使用，JavaScript定義了很多內(nèi)置的對象，常用的內(nèi)置對象有Number（數(shù)字）、String（字符串）、Date（日期）、Array（數(shù)組）、Boolean（布爾）、Math（數(shù)學(xué)）和RegExp（正則表達式）等。這些對象提供了豐富的屬性和方法，例如，Date（日期）對象提供了豐富的對日期進行操作的方法：（1）get/setDate()：返回或設(shè)置日期。（2）get/setFullYear():返回或設(shè)置年份，用四位數(shù)表示。（3）get/setYear():返回或設(shè)置年份。（4）get/setMonth():返回或設(shè)置月份。0為一月（5）get/setHours():返回或設(shè)置小時，24小時制（6）get/setMinutes():返回或設(shè)置分鐘數(shù)。（7）get/setSeconds():返回或設(shè)置秒鐘數(shù)。（8）get/setTime():返回或設(shè)置時間（毫秒為單位）標識符、變量和數(shù)據(jù)類型this關(guān)鍵字面向?qū)ο笳Z言中this表示當前對象的一個引用。但在JavaScript中this不是固定不變的，它會隨著執(zhí)行環(huán)境的改變而改變，主要有以下幾種情況：（1）在方法中，this表示該方法所屬的對象。（2）在函數(shù)中，this表示全局對象。（3）在事件中，this表示接收事件的元素。例如上面定義的Person這個對象，在該對象的information()這個方法中，使用this引用了該對象的firstName屬性和eyeColor屬性。在使用JavaScript對網(wǎng)頁元素進行控制時，經(jīng)常要使用this關(guān)鍵字來引用當前接收事件的網(wǎng)頁元素。4.3運算符與表達式JavaScript提供了豐富的運算符，可以進行算術(shù)、邏輯或者賦值等運算，以實現(xiàn)對數(shù)據(jù)的運算和處理。主要有賦值運算符、算術(shù)運算符和邏輯運算符等。4.3.1賦值運算符賦值運算符“=”用于進行賦值運算，實現(xiàn)把“=”右邊的表達式的結(jié)果賦值給左邊的變量，例如，下面這段代碼：vara=10;a=a+20;運算符運算符與表達式4.3.2算術(shù)運算符JavaScript的算術(shù)運算符用于進行加、減、乘、除等算術(shù)運算。常用運算符及說明如下表所示：假定變量y的值為5，下面的表格解釋了算術(shù)運算符的運算結(jié)果和運算符方法：運算符描述例子結(jié)果+加x=y+2x=7-減x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余數(shù)(保留整數(shù))x=y%2x=1++累加x=++yx=6--遞減x=--yx=4運算符與表達式算術(shù)運算符和賦值運算符相結(jié)合，可以得到精簡的算術(shù)運算表達式，如下表所示：假定變量x的值為10，y的值為5，下面的表格解釋了賦值運算符和算術(shù)運算符相結(jié)合的運算方式：運算符例子等價于結(jié)果=x=y

x=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0運算符與表達式4.3.3位運算符計算機中所有的數(shù)據(jù)都是以二進制的形式存儲的。位運算就是對數(shù)據(jù)按照二進制位進行操作，也就是把兩個二進制數(shù)進行運算得到一個新的二進制數(shù)。JavaScript的位運算符機器運算規(guī)則如下表所示：運算符描述例子類似于結(jié)果十進制&與（AND）x=5&10101&000111|或（OR）x=5|10101|00011015~取反x=~5~01011010-6^異或x=5^10101^00011004<<

左移x=5<<10101<<1101010>>

右移x=5>>10101>>1102運算符與表達式4.3.4比較運算符比較運算符用于進行是否相等、大小關(guān)系等邏輯判斷。JavaScript提供了豐富的比較運算符進行邏輯運算。假設(shè)變量x的值為5，比較運算符及其運算結(jié)果如下表所示：運算符描述比較結(jié)果==

等于x==8false

x==5true===

值及類型均相等（恒等于）x==="5"false

x===5true!=不等于x!=8true!==

值與類型均不等（不恒等于）x!=="5"true

x!==5false>

大于x>8false<

小于x<8true>=大于或等于x>=8false<=小于或等于x<=8true運算符與表達式4.3.5邏輯運算符JavaScript中的邏輯運算符主要有&&、||、！，分別用于表示比較復(fù)雜的并且、或者等邏輯運算。假設(shè)變量x的值為6，y的值為3,JavaScript的邏輯運算符及其運算結(jié)果如下表所示：運算符描述例子&&和(x<10&&y>1)為true||或(x==5||y==5)為false!非!(x==y)為true運算符與表達式4.3.6條件運算符（三元運算符）為了便于表示根據(jù)邏輯表達式結(jié)果進行不同賦值的運算，JavaScript提供了一個條件運算符：“?:”，其語法格式為：(expression)?true-statement:false-statement;這個條件運算符的執(zhí)行邏輯是：先求表達式(expression)的值，如果為true，則執(zhí)行true-statement，否則執(zhí)行false-statement。例如，下面這段代碼實現(xiàn)了找出兩個變量中值較大的變量，在控制臺中我們可以看到輸出“20”。 vara=10,b=20; console.log(a>b?a:b);4.4流程控制計算機程序的執(zhí)行流程一般為順序、分支和循環(huán)三種方式，JavaScript對這三種程序結(jié)構(gòu)也提供了相應(yīng)的支持和語法規(guī)定。1.順序程序結(jié)構(gòu)順序結(jié)構(gòu)，是指程序中按照代碼出現(xiàn)的先后次序依次執(zhí)行。注意：JavaScript中，語句結(jié)束符號為“;”，也就是說當遇到“;”時，表示該語句執(zhí)行結(jié)束。例如，下面這段代碼就是一個典型的順序結(jié)構(gòu)程序：vardate=newDate();//生成一個Date對象

varyear=date.getFullYear();//獲取當前日期的年

varmonth=date.getMonth()+1;//獲取當前日期的月

varday=date.getDate();//獲取當前日期的日

console.log("今天是："+year+"年"+month+"月"+day+"日");通過調(diào)用Date()對象的相關(guān)方法，在控制臺窗口中輸出系統(tǒng)的當前時間中的年月日的信息。流程控制2.分支程序結(jié)構(gòu)分支結(jié)構(gòu)程序的執(zhí)行不是嚴格按照語句出現(xiàn)的物理順序，而是根據(jù)邏輯判斷的結(jié)果選擇適當?shù)姆种?。JavaScript提供了多種分支語句。（1）if語句 if語句是一種基本的控制語句，JavaScript中if語句的語法格式為： if(條件){

當條件為true時，執(zhí)行的代碼; }流程控制（2）ifelse語句

if..else語句的語法格式為：

if(條件){

當條件為true時，執(zhí)行的代碼; } else{

當條件為false時，執(zhí)行的代碼; }流程控制（3）ifelseifelse語句

if..elseif..else語句用于多分支的程序執(zhí)行邏輯。

例如，我們要對某個學(xué)生的成績進行判定：

大于等于90分，在控制臺輸出“優(yōu)秀”；

大于等于80分，在控制臺輸出“良好”；

大于等于70分，在控制臺輸出“中等”；

大于等于60分，在控制臺輸出“合格”； 60分以下，在控制臺輸出“不及格”；

要實現(xiàn)上面的成績判定，就需要用到多分支的if..else語句。源代碼如下：流程控制functioncheck(){varscore=document.getElementById("score");score=parseInt(score.value);if(score>=90){console.log("優(yōu)秀");}elseif(score>=80){console.log("良好");}elseif(score>=70){console.log("中等");}elseif(score>=60){console.log("合格");}else{console.log("不及格");}}流程控制（4）switch語句

除了上面的多分支if..else語句之外，JavaScript還提供了switch語句，用于根據(jù)不同的條件來執(zhí)行不同的代碼塊，其語法格式為：switch(n){case1:

執(zhí)行代碼塊1break;case2:

執(zhí)行代碼塊2break;default:

與case1和case2不同時執(zhí)行的代碼}注意：switch語句，首先設(shè)置表達式n（通常是一個變量或者一個表達式），隨后表達式的值會與結(jié)構(gòu)中的每個case的值做比較。如果存在匹配，則與該case關(guān)聯(lián)的代碼塊會被執(zhí)行。

注意：每個case后面都有一個break語句，用來阻止代碼自動地向下一個case運行。流程控制3.循環(huán)程序結(jié)構(gòu)在設(shè)計程序時，經(jīng)常會遇到需要重復(fù)執(zhí)行的代碼，這時候就要用循環(huán)程序結(jié)構(gòu)了。JavaScript提供了多種循環(huán)結(jié)構(gòu)的語法。（1）while語句while語句用于當滿足某個條件時，需要重復(fù)執(zhí)行的代碼。其語法格式為： while(條件){

重復(fù)執(zhí)行的代碼 }當條件為true時，則執(zhí)行{}之間的代碼。設(shè)計while循環(huán)的時候，要注意{}之間的代碼，在重復(fù)執(zhí)行規(guī)定的次數(shù)后，要能使得while的條件變?yōu)閒alse，否則的話，就會產(chǎn)生“死循環(huán)”的問題，也就是一個循環(huán)始終無法執(zhí)行結(jié)束，導(dǎo)致循環(huán)后面的代碼無法執(zhí)行。例如：我們使用while語句來設(shè)計一段計算1+2+3+……+100之和的代碼：<script>varsum=0;vari=1;while(i<=100){sum=sum+i;i++;}console.log("求和結(jié)果為："+sum);</script>流程控制2.dowhile語句do..while是另外一種表示循環(huán)的語句，其語法格式為：

do{

重復(fù)執(zhí)行的代碼; }while(條件)該語句表示：重復(fù)執(zhí)行{}之間的代碼，直到while后面的條件變?yōu)閒alse，循環(huán)執(zhí)行結(jié)束。do..while語句與while語句的區(qū)別在于：do..while語句{}之間的代碼至少會執(zhí)行一次。流程控制3.for語句for語句是另外一種實現(xiàn)循環(huán)邏輯的語句，該語句的表示形式更簡潔，其語法格式為：for(語句1;語句2;語句3){

重復(fù)執(zhí)行的代碼;}for語句的執(zhí)行邏輯是：先執(zhí)行一次語句1，然后再執(zhí)行循環(huán)。循環(huán)的執(zhí)行邏輯是：如果語句2的結(jié)果為true，則執(zhí)行{}之間的代碼，再執(zhí)行語句3。一直到語句2的結(jié)果為false，循環(huán)結(jié)束。for語句語法的“語句1”通常用于進行變量的初始化操作，“語句3”通常用于對循環(huán)控制變量進行調(diào)整。例如：我們使用for語句來設(shè)計一段計算1+2+3+……+100之和的代碼：<script>varsum=0;vari=1;for(i=1;i<=100;i++){sum=sum+i;}console.log("求和結(jié)果為："+sum);</script>流程控制4.forin語句for..in語句用于對數(shù)組元素或者某個對象的屬性進行遍歷操作。其語法格式為：for(變量in數(shù)組或?qū)ο?{

重復(fù)執(zhí)行的代碼;}注意：對于數(shù)組而言，每次循環(huán)，變量取得的是數(shù)組的從“0”開始的下標值，直到數(shù)組最后一個元素的下標值。如果使用for..in語句對一個對象進行遍歷，則每次循環(huán)，變量取得的是該對象的屬性或者方法名。5.break和continue語句正常的循環(huán)結(jié)構(gòu)中，每次循環(huán)都是從滿足條件開始執(zhí)行，直到不滿足循環(huán)的條件，結(jié)束循環(huán)為止。在實際程序設(shè)計過程中，有時候需要提前終止整個循環(huán)，或者提前結(jié)束當次循環(huán)，這時候就要用到break和continue語句來解決這些實際問題。（1）break語句break語句的作用是立即結(jié)束當前循環(huán)，轉(zhuǎn)到執(zhí)行循環(huán)體后面的語句。例如，下面這段代碼：vari=0;for(i=0;i<10;i++){if(i==3){break;}console.log("Thenumberis"+i);}（2）continue語句continue語句的作用是提前結(jié)束循環(huán)體的本次循環(huán)，也就是說當執(zhí)行到循環(huán)體中的continue語句時，循環(huán)體后面的語句都不會再被執(zhí)行，而提前結(jié)束當次循環(huán)。例如下面這段代碼：vari=0;for(i=0;i<10;i++){if(i==3){continue;}console.log("Thenumberis"+i);}4.5函數(shù)在設(shè)計程序時，如果一段代碼被多次執(zhí)行或者調(diào)用，這時候就需要定義一個函數(shù)，把這段代碼作為函數(shù)的函數(shù)體。函數(shù)需要指定一個名字，通過函數(shù)名對其進行調(diào)用來執(zhí)行函數(shù)體中的代碼。在JavaScript中，每個函數(shù)都是一個對象，函數(shù)內(nèi)的“this”執(zhí)行該函數(shù)對象。4.5函數(shù)函數(shù)4.5.1定義函數(shù)JavaScript中使用function關(guān)鍵字來定義一個函數(shù)，其語法格式為：

function函數(shù)名(參數(shù)列表){

函數(shù)體; }其中，函數(shù)名的命名規(guī)則和變量名的命名規(guī)則相同，參數(shù)列表中如果有多個參數(shù)，參數(shù)之間要用“,”分隔。函數(shù)體中的代碼在函數(shù)被調(diào)用時執(zhí)行，一直遇到函數(shù)體結(jié)束的“}”或者遇到return語句為止。return語句可以在函數(shù)執(zhí)行結(jié)束時，返回數(shù)據(jù)。函數(shù)4.5.2調(diào)用函數(shù)定義一個函數(shù)后，這個函數(shù)不會立即執(zhí)行，只有在調(diào)用該函數(shù)時，函數(shù)體中的代碼才會被執(zhí)行。JavaScript中，函數(shù)的調(diào)用方法很靈活，既可以按照函數(shù)名調(diào)用函數(shù)，也可以把函數(shù)作為某個對象的屬性來調(diào)用，也可以使用函數(shù)的構(gòu)造函數(shù)來調(diào)用。形參是指函數(shù)定義時的參數(shù)，而實參是指函數(shù)調(diào)用時，在函數(shù)名后面括號中的參數(shù)。函數(shù)在調(diào)用時，會進行實參和形參之間的數(shù)據(jù)傳遞，也就是把實參傳遞給形參。函數(shù)4.5.3函數(shù)和調(diào)用實例下面我們設(shè)計一個網(wǎng)頁，來詳細了解一下JavaScript中函數(shù)的定義和調(diào)用方法。這個網(wǎng)頁有兩個文本框和一個按鈕，按下按鈕后，可以找出兩個文本框中輸入的最大數(shù)，將其輸出在控制臺中。源代碼如下：<script>functionmax(a,b){returna>b?a:b;}functionjudge(){varnum1=document.getElementById("num1

varnum2=document.getElementById("num2

num1=parseInt(num1.value);

num2=parseInt(num2.value);/*使用三元運算符找出num1和num2中大數(shù)*/console.log("大數(shù)是："+max(num1,num2));}</script>事件JavaScript的事件是指發(fā)生在HTML元素上的事情，或者發(fā)生在瀏覽器中的事情。如網(wǎng)頁中文本框中的內(nèi)容發(fā)生改變、瀏覽器窗口大小發(fā)生改變、用戶用鼠標點擊了某個HTML元素等，都是JavaScript可以處理或響應(yīng)的事件。通過對這些事件的響應(yīng)，可以對用戶輸入的表單數(shù)據(jù)合法性進行驗證，響應(yīng)用戶單擊某個按鈕時執(zhí)行特定動作，或者在頁面加載或者關(guān)閉時執(zhí)行特定操作等。JavaScript的事件機制和函數(shù)是密切相關(guān)的。一些常用的HTML事件如下表所示：4.6事件事件事件描述onchangeHTML元素改變onclick用戶點擊HTML元素onmouseover用戶在一個HTML元素上移動鼠標onmouseout用戶從一個HTML元素上移開鼠標onmousedown一個HTML元素上鼠標被按下onkeydown用戶按下鍵盤按鍵onkeyup按鍵被松開onload瀏覽器已完成頁面的加載onblur元素失去焦點事件鼠標事件實例我們來實現(xiàn)一個獲取鼠標點擊位置坐標的例子，來進一步學(xué)習一下JavaScript的事件機制。這個例子會把鼠標當前點擊位置的x軸、y軸坐標顯示在控制臺中。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>JavaScript事件實例</title><scripttype="text/javascript">functionposition(){x=event.screenX;//獲取event對象的x坐標軸的屏幕位置

y=event.screenY;//獲取event對象的y坐標軸的屏幕位置

console.log("x="+x+",y="+y);}</script></head><bodyonmouseup="position();"><h4>在窗口的任意位置單擊鼠標，位置坐標會顯示在控制臺中。</h4></body></html>事件表單是B/S架構(gòu)Web應(yīng)用與用戶進行交互的常用方式。我們在網(wǎng)上進行用戶注冊、發(fā)表評論或者登錄驗證時都要用到表單。對用戶在表單中填寫的數(shù)據(jù)完整性、正確性需要進行驗證，驗證的方法通常有兩種：一是在數(shù)據(jù)傳輸?shù)椒?wù)器端后，由服務(wù)器端應(yīng)用程序進行驗證，這種方法需要數(shù)據(jù)在客戶端和服務(wù)器端之間的傳輸，驗證效率不高，并且會加大服務(wù)器端應(yīng)用負載；第二種方法是在數(shù)據(jù)發(fā)送到服務(wù)器端之前，使用JavaScript對用戶在表單中輸入數(shù)據(jù)的完整性進行驗證，在數(shù)據(jù)正確性和完整性的驗證通過以后，再把表單中的數(shù)據(jù)提交給服務(wù)器端的應(yīng)用。這種數(shù)據(jù)驗證的方式效率高，并且用戶體驗度也好。在對文本輸入框、下拉列表框、單選按鈕、復(fù)選按鈕等表單元素進行操作時，都會觸發(fā)相應(yīng)的事件。4.6.1表單事件事件（1）

表單事件：獲得/失去焦點事件所謂的表單元素獲得焦點，是指該表單元素目前是可接收輸入的，可以通過鼠標點擊或者鍵盤的“Tab”按鍵來切換表單元素的焦點。例如對于文本輸入框，當用鼠標點擊該輸入框時，即可使得其獲得焦點。當點擊表單中的其他區(qū)域時，該表單元素就會失去焦點。獲得/失去焦點事件通常用于對用戶輸入的數(shù)據(jù)進行即時驗證。表單元素要響應(yīng)獲得焦點事件，需要為該元素的onfocus屬性指定一個處理獲得焦點事件的句柄，然后在該句柄對應(yīng)的函數(shù)中，編寫響應(yīng)的JavaScript代碼。響應(yīng)失去焦點事件，則需要為該元素的onblur屬性指定一個事件處理句柄。事件（2）

表單事件：選擇和內(nèi)容改變事件在表單中，當我們用鼠標或者鍵盤選擇了文本框<input>，或者多行文本框<textarea>中的文字時，就會觸發(fā)選擇（select）事件。當<input>文本輸入框、<textarea>多行文本輸入框失去焦點，或者<select>下拉列表框選項狀態(tài)發(fā)生改變時，就會觸發(fā)改變（change）事件。這個事件一般常用于多個下拉列表聯(lián)動的設(shè)計事件（3）

表單事件：提交和重置事件表單的提交按鈕，一般是提供將<input>標簽的type屬性設(shè)置為“submit”來實現(xiàn)的，<inputtype="reset">可以實現(xiàn)重置按鈕。當單擊“提交”按鈕后，就會觸發(fā)提交（submit）事件，單擊“重置”按鈕，就會觸發(fā)重置（reset）事件。提交事件通常用于在把客戶端（瀏覽器）的表單中輸入的數(shù)據(jù)提交給服務(wù)器端之前，對數(shù)據(jù)合法性進行檢查，合格后再把時間提交給服務(wù)器端。事件 4.6.2鼠標事件鼠標事件，是指用鼠標對網(wǎng)頁中控件進行單擊或者雙擊操作時觸發(fā)的事件。用鼠標對網(wǎng)頁中的表單元素進行單擊、雙擊等操作，或者鼠標在網(wǎng)頁元素上移動時，都會觸發(fā)鼠標相關(guān)的事件。1. 鼠標單擊、雙擊事件用鼠標左鍵單擊就會觸發(fā)單擊事件（click），雙擊鼠標時就會觸發(fā)雙擊事件（dbclick）,設(shè)置相應(yīng)網(wǎng)頁元素的onclick屬性、ondblclick屬性的處理函數(shù)，即可相應(yīng)單擊或者雙擊事件。2.鼠標移動事件當鼠標在網(wǎng)頁元素移動時，就會觸發(fā)響應(yīng)的鼠標移動事件。當鼠標移入時，會觸發(fā)鼠標移入事件（MouseOver）；當鼠標移出時，就會觸發(fā)鼠標移出事件（MouseOut）。這兩個事件通常用于菜單的動態(tài)顯示效果，即當鼠標移入時，顯示隱藏菜單，鼠標移出后，菜單隱藏的效果。事件 4.6.3鍵盤事件鍵盤事件是指當用戶在網(wǎng)頁中，或者文本輸入框等網(wǎng)頁元素中按下鍵盤時觸發(fā)的事件。鍵盤事件主要有三個，也是平常開發(fā)過程中，尤其是在響應(yīng)文本框輸入有關(guān)的事件時經(jīng)常用到的：keydown：當用戶按下鍵盤上的任意鍵時觸發(fā)，如果按住不放會重復(fù)觸發(fā)。keypress：當用戶按下鍵盤上的字符鍵時觸發(fā)，如果按住不放會重復(fù)觸發(fā)。（按下ESC鍵也會觸發(fā)）keyup：當用戶釋放鍵盤上的鍵時觸發(fā)。這三個事件的觸發(fā)順序是：當用戶按了一個鍵盤上的字符鍵時，首先觸發(fā)keydown事件，然后緊跟著是keypress事件，最后會觸發(fā)keyup事件。其中，keydown和keypress都是在文本框發(fā)生變化之前被觸發(fā)的；而keyup是在文本框已經(jīng)改變之后觸發(fā)的。DOM模型DOM（DocumentObjectModel）稱為文檔對象模型，是一個表示和處理HTML文檔的應(yīng)用程序接口。當網(wǎng)頁被瀏覽器加載時，瀏覽器會創(chuàng)建網(wǎng)頁的文檔對象模型，通過DOM模型，JavaScript可以訪問HTML文檔中的所有元素，以實現(xiàn)動態(tài)訪問、更新HTML文檔的內(nèi)容、結(jié)構(gòu)或者樣式。DOM模型中，HTML文檔中各元素對象的層次結(jié)構(gòu)被稱為節(jié)點樹。例如，下面這段簡單的HTML文檔對應(yīng)的DOM節(jié)點樹4.7DOM模型DOM模型一個文檔的DOM節(jié)點樹就是有各種不同類型的節(jié)點組成的，其中html、head等都是節(jié)點。DOM模型中有三種類型的節(jié)點：元素節(jié)點、屬性節(jié)點、文本節(jié)點。元素節(jié)點是指HTML文檔中的標簽，屬性節(jié)點是指HTML標簽的屬性值，文本節(jié)點是指HTML標簽之間的文本。這三種類型節(jié)點的nodeType屬性的值分別為1、2、3。DOM模型使用JavaScript對網(wǎng)頁中的HTML元素進行控制，要先獲取到指定的元素。DOM模型中提供了以下三種獲取網(wǎng)頁元素的方法。1.使用指定的id屬性獲取元素網(wǎng)頁中的HTML元素都有一個id屬性，使用document對象的getElementById()方法獲取指定id屬性的網(wǎng)頁元素。如果能夠找到指定的網(wǎng)頁元素，則返回該元素節(jié)點對象，否則返回一個Null。例如：varoDiv1=document.getElementById("myDiv");獲取的就是當前網(wǎng)頁中id號為"myDiv"的元素，將其賦值給變量oDiv1。4.7.1獲取HTML元素DOM模型2.使用指定的name屬性獲取網(wǎng)頁元素HTML元素的name屬性一般用于設(shè)定表單的名字，在表單數(shù)據(jù)提交給服務(wù)器時可以通過指定的name屬性獲取相應(yīng)元素所輸入的值。使用document.getElementsByName()方法，可以獲得指定name屬性的網(wǎng)頁元素。注意：因為name屬性的值不唯一，所以該方法返回的是一個節(jié)點集合（NodeList），可以按照索引來訪問指定的節(jié)點。DOM模型3.使用指定的標簽名獲取網(wǎng)頁元素document對象的getElementsByTagName()方法可以獲取當前網(wǎng)頁中，指定標簽名的所有HTML元素。例如，假設(shè)當前網(wǎng)頁中有三個<p>標簽?zāi)敲?，我們要使用getElementsByTagName()方法獲取第二個<p>標簽元素，代碼實例如下： varobj=document.getElementsByTagName("p")[1];注意：JavaScript中數(shù)組（集合）元素的下標從0開始編號。DOM模型4.使用指定的class屬性獲取網(wǎng)頁元素HTML元素的class屬性用于指定該元素所屬的樣式，既可以指定一個樣式，也可以使用空格隔開多個樣式名來指定該元素應(yīng)用的多個樣式。并且，可以有多個網(wǎng)頁元素的class屬性值相同。JavaScript中，使用getElementsByClassName()方法來獲取指定class屬性的網(wǎng)頁元素，所獲得的網(wǎng)頁元素存放在一個NodeList集合中。例如： varobj=document.getElementsByClassName("myClass")[1];這個代碼獲得的是所有class屬性值為"myClass"的網(wǎng)頁元素集合中的第二個網(wǎng)頁元素。DOM模型在DOM模型中，獲得了指定的HTML元素后，就可以利用JavaScript面向?qū)ο蟮奶匦?，來讀取或者修改指定HTML元素的屬性，也可以根據(jù)DOM模型節(jié)點樹的特點，來動態(tài)的增加、刪除相關(guān)的HTML元素。1.改變HTML元素的內(nèi)容或?qū)傩詣討B(tài)改變一個HTML元素內(nèi)容的最簡單方法就是使用innerHTML屬性。該屬性用于設(shè)置標簽內(nèi)容,或返回開始和結(jié)束標簽之間的HTML內(nèi)容。4.7.2讀取或修改HTML元素的屬性2.改變HTML元素的樣式使用JavaScript動態(tài)地改變HTML元素的樣式，與上一節(jié)中修改指定元素屬性的方法類似，只不過在獲取了指定的HTML元素后，要使用其style屬性來修改指定的樣式。DOM模型3.動態(tài)增加、刪除HTML元素使用JavaScript向網(wǎng)頁中動態(tài)添加HTML元素，需要用到document對象的createElement()和createTextNode方法：createElement()方法用于創(chuàng)建一個HTML元素。createTextNode()方法用于創(chuàng)建一個文本元素對象，該對象主要是作為網(wǎng)頁標簽之間的內(nèi)容。例如，我們要動態(tài)的創(chuàng)建這樣一個HTML元素：<option>選項5</option>第一步，先要創(chuàng)建一個<option>元素對象：varoOption=document.createElement("option");第二步，創(chuàng)建一個文本元素對象，作為<option></option>之間的內(nèi)容：varoTextnode=document.createTextNode("選項5");第三步，把文本元素對象添加為<option>對象的孩子：oOption.appendChild(oTextnode);BOM模型BOM是（BrowserObjectModel）瀏覽器對象模型縮寫，BOM是Web編程的核心，該模型提供了很多對象和方法，用于對瀏覽器的訪問。BOM模型的核心對象是window對象，它表示當前瀏覽器窗口的一個實例。例如前面代碼中多次用到的document就是window對象的一個很重要的屬性。window對象的常用屬性如下表所示：4.8BOM模型屬性描述closed返回窗口是否已被關(guān)閉。defaultStatus設(shè)置或返回窗口狀態(tài)欄中的默認文本。document對Document對象的只讀引用。history對History對象的只讀引用。innerheight返回窗口的文檔顯示區(qū)的高度。innerwidth返回窗口的文檔顯示區(qū)的寬度。length設(shè)置或返回窗口中的框架數(shù)量。location用于窗口或框架的Location對象。name設(shè)置或返回窗口的名稱。Navigator對Navigator對象的只讀引用。opener返回對創(chuàng)建此窗口的窗口的引用。outerheight返回窗口的外部高度。outerwidth返回窗口的外部寬度。pageXOffset設(shè)置或返回當前頁面相對于窗口顯示區(qū)左上角的X位置。pageYOffset設(shè)置或返回當前頁面相對于窗口顯示區(qū)左上角的Y位置。parent返回父窗口。Screen對Screen對象的只讀引用。self返回對當前窗口的引用。等價于Window屬性。status設(shè)置窗口狀態(tài)欄的文本。top返回最頂層的先輩窗口。windowwindow屬性等價于self屬性，它包含了對窗口自身的引用。screenLeft、screenTop、screenX、screenY只讀整數(shù)。聲明了窗口的左上角在屏幕上的的x坐標和y坐標。IE、Safari和Opera支持screenLeft和screenTop，而Firefox和Safari支持screenX和screenY。BOM模型方法描述alert()顯示帶有一段消息和一個確認按鈕的警告框。blur()把鍵盤焦點從頂層窗口移開。clearInterval()取消由setInterval()設(shè)置的timeout。clearTimeout()取消由setTimeout()方法設(shè)置的timeout。close()關(guān)閉瀏覽器窗口。confirm()顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。createPopup()創(chuàng)建一個pop-up窗口。focus()把鍵盤焦點給予一個窗口。moveBy()可相對窗口的當前坐標把它移動指定的像素。moveTo()把窗口的左上角移動到一個指定的坐標。open()打開一個新的瀏覽器窗口或查找一個已命名的窗口。print()打印當前窗口的內(nèi)容。prompt()顯示可提示用戶輸入的對話框。resizeBy()按照指定的像素調(diào)整窗口的大小。resizeTo()把窗口的大小調(diào)整到指定的寬度和高度。scrollBy()按照指定的像素值來滾動內(nèi)容。scrollTo()把內(nèi)容滾動到指定的坐標。setInterval()按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。window對象的常用方法如下表所示BOM模型BOM模型history對象包含用戶（在瀏覽器中）訪問的URL?？梢酝ㄟ^window.history屬性來訪問用戶的瀏覽歷史。1.history的length屬性Length屬性用于返回瀏覽器訪問歷史列表中的URL的數(shù)量。2.history方法（1）back()方法：加載history列表中的前一個URL.（2）forward()：加載history列表中的后一個URL.（3）go(n)：加載history列表中的某個具體頁面。n>0向后跳轉(zhuǎn)，n<0向前跳轉(zhuǎn)。go(1)等同于forward()方法,go(-1)等同于back()方法4.8.1history對象BOM模型window.navigator對象包含有關(guān)瀏覽器版本、廠商等信息。navigator對象的相關(guān)屬性和方法如下表所示：4.8.2navigator對象屬性/方法描述appCodeName返回瀏覽器的代碼名。