《商務網(wǎng)站設計與開發(fā)》課件第04章 腳本語言JavaScript

內(nèi)容4.1JavaScript簡介4.2JavaScript的基本語法4.3JavaScript的面向對象特性4.4JavaScript在瀏覽器中的應用4.5JavaScript在HTML5中的應用4.6常用的JavaScript框架4.7思考題4.1JavaScript簡介JavaScript是由Netscape公司開發(fā)一種基于對象、事件驅動并具有相對安全性的客戶端腳本語言。JavaScript可以讓網(wǎng)頁產(chǎn)生動態(tài)、交互的效果，從而改善用戶體驗。JavaScript已成為Web客戶端開發(fā)的主流腳本語言。JavaScript由JavaScript核心語言、JavaScript客戶端擴展和JavaScript服務器端擴展三部分組成。4.1JavaScript簡介核心語言部分包括JavaScript的基本語法和JavaScript的內(nèi)置對象，在客戶端和服務器端均可運行?？蛻舳藬U展部分支持瀏覽器的對象模型DOM，可以很方便地控制頁面上的對象。服務器端擴展部分包含了在服務器上運行的對象，這些對象可以和數(shù)據(jù)庫連接，可以在應用程序之間交換信息，也可以對服務器上的文件進行操作。4.1JavaScript簡介JavaScript通過<script>元素在HTML文檔中嵌入腳本代碼，有兩種方法嵌入腳本：第一種方法，直接在HTML文檔中編寫JavaScript代碼。<scripttype="text/JavaScript">document.write("這是JavaScript！采用直接插入的方法！");</script>第二種方法，可以通過文件引用的方式將已經(jīng)編寫好的JavaScript文件（通常以.js為擴展名）引入進來。這種方式可以提高代碼的重用性和可讀性。例如：<scriptsrc＝“foo.js”language="JavaScript"type="text/JavaScript"></script>其中src屬性值就是腳本文件的地址。4.2JavaScript的基本語法常量和變量JavaScript程序中的數(shù)據(jù)根據(jù)值的特征分為常量和變量，常量是那些在程序中可預知結果的量，不隨程序的運行而變化，而變量則正好相反。常量和變量共同構成了程序操作數(shù)據(jù)的整體。JavaScript中的常量更接近“直接量”，它可以是數(shù)值、字符串或者布爾值。更一般地說，JavaScript的常量是那些只能出現(xiàn)在賦值表達式右邊的那些量。例如：3.1415、“Helloworld”、true、null等都是常量。JavaScript中用標識符來命名一個變量，合法標識符可以由字母、數(shù)字、下劃線以及$符號組成的，其中首字符不能是數(shù)字。在代碼vara=5，b=“test”，c=newObject()中，標識符a、b、c都是變量，它們可以出現(xiàn)在賦值表達式的左側。嚴格的說，有一個例外，在JavaScript中，undefined符號可以出現(xiàn)在賦值號的左邊，但是根據(jù)它的標準化含義，還是將它歸為常量。4.2JavaScript的基本語法常量和變量JavaScript是一種“弱類型”語言，即JavaScript的變量可以存儲任何類型的值。數(shù)據(jù)類型和變量不是綁定的，變量的類型通常要到運行時才能決定。在JavaScript中既可以在聲明變量時初始化，也可以在變量被聲明后賦值，例如：varnum=3或者：varnumnum=3因為JavaScript變量沒有類型規(guī)則的約定，所以JavaScript的使用從語法上來講就比較簡單靈活。但同時，也由于沒有變量類型的約束，對程序員也提出了更高的要求。4.2JavaScript的基本語法數(shù)據(jù)類型——（1）數(shù)值數(shù)值是最基本的數(shù)據(jù)類型，它們表示的是普通的數(shù)。JavaScript的數(shù)值并不區(qū)別整型或是浮點型。十六進制整數(shù)常量的表示方法是以“0X”或者“0x”開頭。例如：0xff，0xCAFE911。JavaScript中浮點型數(shù)值可以采用科學計數(shù)法表示，例如：3.14，234.3333，6.02e23，1.4738e-23。4.2JavaScript的基本語法數(shù)據(jù)類型——（2）字符串JavaScript中的字符串數(shù)據(jù)類型是由Unicode字符組成的序列。與C++或Java不同，JavaScript沒有char類型的數(shù)據(jù)，字符串是表示文本數(shù)據(jù)的最小單位。JavaScript的字符串常量是用單引號或雙引號括起來的字符序列，其中可以含有0個或多個Unicode字符。字符串中可以使用轉義符，比如“\n”。當用單引號來界定字符串時，字符串中如果有單引號字符，就必須用轉義序列（\’）來進行轉義。4.2JavaScript的基本語法數(shù)據(jù)類型——（3）布爾型布爾型是最簡單的一種基本數(shù)據(jù)類型，它只有兩個常量值，即true和false，代表著邏輯上的“真”和“假”。數(shù)據(jù)類型——（4）數(shù)組數(shù)組是元素的集合，數(shù)組中的每一個元素都具有唯一下標來標識，可以通過下標來訪問這些數(shù)值。數(shù)組下標是從0開始的連續(xù)整數(shù)。在JavaScript中，數(shù)組的元素可以是任何類型的數(shù)據(jù)?？梢酝ㄟ^數(shù)組的構造函數(shù)Array()來創(chuàng)建一個數(shù)組，數(shù)組一旦被創(chuàng)建，就可以給數(shù)組的任何元素賦值。4.2JavaScript的基本語法數(shù)據(jù)類型——（5）對象對象是JavaScript中的一種引用數(shù)據(jù)類型，也一種抽象和廣義的數(shù)據(jù)結構。JavaScript對象是一個非常重要的知識，將在后面章節(jié)專門討論。在這里僅先討論對象的基本形式和基本語法。JavaScript中，對象是通過調用構造函數(shù)來創(chuàng)建的。理論上任何JavaScript函數(shù)都可以作為構造函數(shù)來創(chuàng)建。對象一旦創(chuàng)建，就可以根據(jù)自己的意愿設計并使用它們的屬性了。4.2JavaScript的基本語法表達式和運算符JavaScript的表達式由變量、常量、布爾量和運算符按一定規(guī)則組成的集合，包括：算術表達式、串表達式和邏輯表達式。例如：number++"Hello"+"youarewelcome!"(a>5)&&(b=2)JavaScript中的運算符有：賦值運算符、算術運算符、邏輯運算符、比較運算符、字符串運算符和位運算符等。4.2JavaScript的基本語法算術運算符運算符描述例子+加x=y+2-減x=y-2*乘x=y*2/除x=y/2%求余數(shù)(保留整數(shù))x=y%2++累加x=++y--遞減x=--y4.2JavaScript的基本語法賦值運算符運算符例子等價于=x=y

+=x+=yx=x+y-=x-=yx=x-y*=x*=yx=x*y/=x/=yx=x/y%=x%=yx=x%y4.2JavaScript的基本語法邏輯運算符與比較運算符運算符描述例子&&邏輯“與”(x<10&&y>1)||邏輯“或”(x==5||y==5)!邏輯“非”!(x==y)4.2JavaScript的基本語法邏輯運算符與比較運算符運算符描述例子&&邏輯“與”(x<10&&y>1)||邏輯“或”(x==5||y==5)!邏輯“非”!(x==y)運算符描述例子==等于x==8!=不等于x!=8>

大于x>8<

小于x<8>=大于或等于x>=8<=小于或等于x<=84.2JavaScript的基本語法字符串運算符JavaScript只有一個字符串運算符“+”，使用字符串運算符可以把幾個串連接在一起。例如，“hello”+“,world”的返回值就是“hello,world”。4.2JavaScript的基本語法位運算符運算符描述例子&按位與運算A&B|按位或運算A|B^按位異或運算A^B~按位取反~A<<

左移運算A<<B>>

右移運算A>>B4.2JavaScript的基本語法條件運算符條件運算符是JavaScript中唯一的三目運算符。它的表達式如下：test？

語句1:語句2其中test、語句1、語句2是它的三個表達式。條件運算符首先計算它的第一個表達式test的值，如果它的值為true，則執(zhí)行語句1并返回其結果，否則執(zhí)行語句2并返回其結果。例如下面代碼可根據(jù)當前的時間返回am或pm的標志：varnow=newDate();varmark=(now.getHours()>12)？

"pm":"am";4.2JavaScript的基本語法逗號運算符逗號運算符是一個雙目運算符，它的作用是連接左右兩個運算數(shù)，先計算左邊的運算數(shù)，再計算右邊的運算數(shù)，并將右邊運算數(shù)的計算結果作為表達式的值返回。因此，x=（i=0，j=1，k=2）等價于：i=0；j=1；x=k=2；運算符通一般是在只允許出現(xiàn)一個語句的地方使用，在實際應用中，逗號運算符常與for循環(huán)語句聯(lián)合使用。對象運算符對象運算符是指作用于實例對象、屬性或者數(shù)組以及數(shù)組元素的運算符。JavaScript中對象運算符包括new運算符、delete運算符、in運算符、.運算符和[]運算符。4.2JavaScript的基本語法循環(huán)語句循環(huán)語句是JavaScript中允許執(zhí)行重復動作的語句。JavaScript中，循環(huán)語句主要有while語句和for語句兩種形式。vari=10;while(i--){document.write(i);}for(vari=0;i<10;i++){document.write(i);}4.2JavaScript的基本語法條件語句條件語句是一種帶有判定條件的語句，根據(jù)條件的不同，程序選擇性地執(zhí)行某個特定的語句。條件語句和后循環(huán)語句都是帶有從句的語句，它們是JavaScript中的復合語句。JavaScript中的條件語句包括if語句和switch語句。if(a!=null&&b!=null){a=a+b;b=a-b;}4.2JavaScript的基本語法<scripttype="text/JavaScript">functionconvert(x){switch(typeofx){case'number':returnx.toString(16);//把整數(shù)轉換成十六進制的整數(shù)break;case'string':return'"'+x+'"';//返回引號包圍的字符串break;case'boolean':returnx.toString().toUpperCase();//轉換為大寫break;default:returnx.toString();//直接調用x的toString()方法進行轉換

}}document.write(convert(110)+"<br/>");//轉換數(shù)值document.write(convert("ab")+"<br/>");//轉換字符串document.write(convert(true)+"<br/>");//轉換布爾值</script>4.2JavaScript的基本語法函數(shù)函數(shù)是封裝在程序中可以多次使用的模塊。函數(shù)必須先定義，后使用。通過function語句來定義函數(shù)有兩種方式，分別是命名方式和匿名方式，例如：functionf1(){alert()};//命名方式varf1=function(){alert()};//匿名方式有時候也將命名方式定義函數(shù)的方法稱為“聲明式”函數(shù)定義，而把匿名方式定義函數(shù)的方法稱為引用式函數(shù)定義或者函數(shù)表達式。functionsquare(x){returnx*x;}4.3JavaScript的面向對象特性JavaScript是一種基于對象的語言。所謂“基于對象”，通常指該語言不一定支持面向對象的全部特性，比如不支持面向對象中“繼承”或“多態(tài)”的特點。JavaScript具有封裝的特點，并可以使用封裝好的對象，調用對象的方法，設置對象的屬性?；\統(tǒng)地說：“基于對象”也是一種“面向對象”。4.3JavaScript的面向對象特性對象是對具有相同特性的實體的抽象描述，實例對象是具有這些特征的單個實體。對象包含屬性（properties）和方法（methods）兩種成分。屬性是對象靜態(tài)特征的描述，是對象的數(shù)據(jù)，以變量表征；方法是對象動態(tài)特征的描述，也可以是對數(shù)據(jù)的操作，用函數(shù)描述。JavaScript中的對象可通過函數(shù)由new運算符生成的。生成對象的函數(shù)被稱為類或者構造函數(shù)，生成的對象被稱為類的實例對象，簡稱為對象。vara=newObject();a.x=1,a.y=2;也可以通過對象直接量來構造對象，這種方式使用了對象常量，實際上可以看成是new運算符方法的快捷表示法。例如:varb={x:1,y:2};4.3JavaScript的面向對象特性JavaScript是一種弱類型的語言，一方面體現(xiàn)在JavaScript的變量、參數(shù)和返回值可以是任意類型的,另一方面也體現(xiàn)在JavaScrip可以對對象任意添加屬性和方法,這樣無形中就淡化了“類型”的概念。vara=newObject();varb=newObject();a.x=1,a.y=2;b.x=1,b.y=2,b.z=3;4.3JavaScript的面向對象特性<html><head><title>對象和對象的構造</title></head><body><scripttype="text/JavaScript">varo=newDate();//o是一個Date對象Complex=function(r,i)//自定義Complex類型，表示復數(shù){this.re=r;this.im=i;}varc=newComplex(1,2);//c是一個復數(shù)對象document.writeln(o.toLocaleString());document.write("<br>");document.write(c.re+","+c.im);</script></body></html>4.3JavaScript的面向對象特性對象運算符“.”和“[]”都是用來存取對象和數(shù)組元素的雙目運算符。它們的第一個運算數(shù)都是對象或者數(shù)組。它們的區(qū)別是運算符“.”將第二個運算數(shù)作為對象的屬性來讀寫，而“[]”將第二個運算數(shù)作為數(shù)組的下標來讀寫。運算符“.”要求第二個運算數(shù)只能是合法的標識符，而運算符“[]”的第二個運算數(shù)可以是任何類型的值甚至undefined，但不能是未定義的標識符。vara=newObject();a.x=1;alert(a["x"]);//a.x和a[“x”]是等價的表示形式varb=[1,2,3];alert(b[1]);//對于數(shù)組b，b[1]通過下標“1”訪問數(shù)組的第二個元素上述代碼執(zhí)行時，會彈出對話框以顯示數(shù)組a和b的值。4.3JavaScript的面向對象特性另一種構造對象的方法是先定義類型，再實例化對象。functionPoint(x,y){this.x=x;this.y=y;}varp1=newPoint(1,2);varp2=newPoint(3,4);上述代碼使用function定義了一個構造函數(shù)Point，實際上也同時定義了Point類型。p1和p2是同一種類型的對象，它們都是Point類的實例。4.3JavaScript的面向對象特性（1）內(nèi)置對象——Math對象Math對象是一個靜態(tài)對象，這意味著不能用它來構造實例。程序可以通過調用Math.sin()這樣的靜態(tài)函數(shù)來實現(xiàn)一定的功能。Math對象主要為JavaScript核心提供了對數(shù)值進行代數(shù)計算的一系列方法（比如三角函數(shù)、冪函數(shù)等）以及幾個重要的數(shù)值常量（比如圓周率PI等）。4.3JavaScript的面向對象特性（2）內(nèi)置對象——Date對象Date對象是JavaScript中用來表示日期和時間的數(shù)據(jù)類型?？梢酝ㄟ^幾種類型的參數(shù)來構造它，最簡單的形式是缺省參數(shù)：varnow=newDate();其次可以是依次表示“年”、“月”、“日”、“時”、“分”、“秒”、“毫秒”的數(shù)值，這些數(shù)值除了“年”和“月”之外，其他的都可以缺省。例如：vartime=newDate(1999,1,2);以這種形式構造日期時應當注意的是，JavaScript中的月份是從0開始計算的，因此上面的例子構造的日期是2月2日，而不是1月2日。4.3JavaScript的面向對象特性（2）內(nèi)置對象——Date對象第三種構造日期的方式是通過一個表示日期的字符串，例如：vard=newDate(“1999/01/0212:00:01”);//這一次表示的是1月份JavaScript為Date對象提供了許多有用的方法，下面通過一個例子給出了構造Date對象和使用Date對象方法的示范。<script>vartoday=newDate();varyear=today.getFullYear();//獲取年份varmonth=today.getMonth()+1;//JavaScript中月份是從0開始的vardate=today.getDate();//獲取當月的日期//表示星期的中文varweeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];//輸出結果document.write("今天是:");document.write(year);document.write("年");document.write(month);document.write("月");document.write(date);document.write("日");document.write(""+weeks[today.getDay()]);</script>4.3JavaScript的面向對象特性（3）內(nèi)置對象——String對象字符串對象是JavaScript基本數(shù)據(jù)類型中最復雜的一種類型，也是使用頻率很高的數(shù)據(jù)類型。String對象有兩種創(chuàng)建方式：一是直接聲明方式，二是通過構造函數(shù)newString()創(chuàng)建一個新的字符串對象。例如：vars1="abcdef";vars2=newString("Hello,world");String對象的屬性不多，常用的是lenth屬性，用于標識字符串的長度。String對象的方法比較多，而且功能也比較強大。4.3JavaScript的面向對象特性（4）內(nèi)置對象——Error對象JavaScript中的Error對象是用來在異常處理中保存異常信息。Error對象包括Error及其派生類的實例，Error的派生類是EvalError、RangeError、TypeError和SyntaxError。（5）內(nèi)置對象——RegExp對象在JavaScript中，正則表達式由RegExp對象表示，它是對字符串執(zhí)行模式匹配的強大工具。每一條正則表達式模式對應一個RegExp實例。4.3JavaScript的面向對象特性異常處理機制所謂異常（exception）是一個信號，說明當前程序發(fā)生了某種意外狀況或者錯誤。拋出（throw）一個異常就是用信號通知運行環(huán)境，程序發(fā)生了某種意外。捕捉（catch）一個異常，就是處理它，采取必要或適當?shù)膭幼鲝漠惓顟B(tài)恢復。try{Bug}//這里將會引發(fā)一個SystaxErrorcatch(e){//產(chǎn)生的SystaxError在這里會被接住alert(e);}//異常對象將被按照默認的方式顯示出來finally{alert(“finally”);//不論如何，程序最終執(zhí)行finally語句}4.4JavaScript在瀏覽器中的應用在開發(fā)網(wǎng)站前臺程序時，對瀏覽器對象的調用是必不可少的。4.4JavaScript在瀏覽器中的應用window對象是瀏覽器提供的第一類對象，它的含義是瀏覽器窗口，每個獨立的瀏覽器窗口或者窗口中的框架都是用一個window對象的實例來表示的。window對象是內(nèi)建對象中的最頂層對象，它的下層對象有event對象、frame對象、document對象等，其中最主要的是document對象，它指的是HTML頁面對象。屬性名稱說明范例name當前窗口的名字parent當前窗口的父窗口self當前打開的窗口self.status=“你好”top窗口集合中的最頂層窗口status設置當前打開窗口狀態(tài)欄的顯示數(shù)據(jù)self.status=“歡迎”defaultStatus當前窗口狀態(tài)欄的顯示數(shù)據(jù)self.defaultStatus=“歡迎”4.4JavaScript在瀏覽器中的應用window對象的主要方法方法名稱說明范例alert()創(chuàng)建一個帶“確定”按鈕的對話框window.alert(‘輸入錯誤！’)confirm()創(chuàng)建一個帶“確定”和“取消”按鈕的對話框window.confirm(‘是否繼續(xù)！’)close()關閉當前打開的瀏覽器窗口window.close()open()打開一個新的瀏覽器窗口window.open(URL,‘新窗口名’,‘新窗口屬性設置’)prompt()創(chuàng)建一個帶“確定”、“取消”按鈕及輸入字符串字段的對話框mpt(‘請輸入姓名’)setTimeout()設置一個時間控制器window.setTimeout(“fun()”,3000)clearTimeout清除原來時間控制器內(nèi)的時間設置window.clearTimeout()4.4JavaScript在瀏覽器中的應用<html><head><title>window對象示例</title></head><body><buttonid="btn"onclick="link('張三')">ClickMe!</button><scripttype="text/JavaScript">varbtn=document.getElementById("btn");btn.value="點擊我";functionlink(str){varmyStr=prompt("請輸入姓名");if(myStr==str){//如果驗證姓名輸入正確if(confirm(myStr+"你好！你想打開新的窗口?"))window.open("");}else{alert("對不起，用戶名信息錯誤！");}return;}</script></body></html>4.4JavaScript在瀏覽器中的應用document對象是瀏覽器的一個重要對象，它代表著瀏覽器窗口的文檔內(nèi)容。瀏覽器裝載一個新的頁面時，總是初始化一個新的document對象。window對象的document屬性總是引用當前已初始化的document元素。document對象的屬性可以用來設置Web頁面的特性，例如標題、前景色、背景色和超鏈接顏色等。主要用來設置當前HTML文件的顯示效果。4.4JavaScript在瀏覽器中的應用document對象的主要屬性屬性名稱說明范例alinkColor頁面中活動超鏈接的顏色document.alinkColor=“red”bgColor頁面背景顏色document.bgColor=“ff0000”fgColor頁面前景顏色document.bgColor=“ff000f”linkColor未訪問的超鏈接的顏色document.linkColor=“red”vlinkColor已訪問的超鏈接的顏色document.vlinkColor=“green”lastModified最后修改頁面的時間date=lastModifiedlocation頁面的URL地址url_inf=document.locationtitle頁面的標題title_inf=document.title4.4JavaScript在瀏覽器中的應用document對象的主要方法方法名稱說明范例clear()清楚文檔窗口內(nèi)的數(shù)據(jù)document.clear()close()關閉文檔document.close()open()打開文檔document.open()write()向當前文檔寫入數(shù)據(jù)document.write(“你好！”)writeln()向當前文檔寫入數(shù)據(jù),并換行document.writeln(“你好！”)4.4JavaScript在瀏覽器中的應用事件驅動與界面交互在瀏覽器文檔模型中，事件是指因為某種具體的交互行為發(fā)生，而導致文檔內(nèi)容需要作某些處理的場合。在這種情況下，通常由被作用的元素發(fā)起一個消息，并向上傳播，在傳播的途徑中，將該消息進行處理的行為，被稱為事件響應或者事件處理。瀏覽器事件的種類很多，包括鼠標點擊、鼠標移動、鍵盤輸入、失去與獲得焦點、裝載、選中文本等等。瀏覽器的DOM提供了基本的事件處理方式，它被廣泛應用于Web應用程序的開發(fā)中。HTML標準規(guī)定了每個元素支持多種不同的事件類型。把一個腳本函數(shù)與事件關聯(lián)起來被稱為事件綁定，被綁定的腳本函數(shù)成為事件的句柄。4.4JavaScript在瀏覽器中的應用HTML元素的事件屬性可以將合法的JavaScript代碼字符串作為值，這一種綁定被稱為“靜態(tài)綁定”，例如下面代碼中onclick的屬性值：<buttonid="btn"onclick="link('張三')">ClickMe!</button>除了靜態(tài)綁定之外，JavaScript還支持直接對DOM對象的事件屬性賦值，對應地，這種綁定稱為“動態(tài)綁定”，例如：<html><body><buttonid="btn">ClickMe!</button><scripttype="text/JavaScript">btn.onclick=function(){