1、JavaScript程序設(shè)計基礎(chǔ),JavaScript簡介 JavaScript編程基礎(chǔ) JavaScript中的對象編程 JavaScript的動態(tài)網(wǎng)頁編程技術(shù),JavaScript是什么？是Web頁面中的一種腳本編程語言，可用于Web系統(tǒng)的客戶端和服務器端編程。JavaScript的前身叫做LiveScript，是Netscape公司開發(fā)的腳本語言。Sun公司推出Java語言后， Netscape公司和Sun公司于1995年一起重新設(shè)計了LiveScript，并將其更名為JavaScript。,JavaScript簡介,JavaScript的基本特點 腳本編程語言：與HTML代碼結(jié)合在一起

2、，通常由瀏覽器解釋執(zhí)行。 基于對象的語言： JavaScript的許多功能來自于腳本環(huán)境中對象的方法與腳本的相互作用。 安全性：在HTML頁面中JavaScript不能訪問本地硬盤，也不能對網(wǎng)絡文檔進行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互。 跨平臺：在HTML頁面中JavaScript的執(zhí)行環(huán)境依賴于瀏覽器本身，只要安裝了支持JavaScript的瀏覽器， JavaScript程序就可以執(zhí)行。,JavaScript簡介（續(xù)1）,JavaScript的應用 客戶端應用：將客戶端的JavaScript腳本程序嵌入或鏈接到HTML文件，當用戶通過瀏覽器請求這樣的HTML頁面時， Java

3、Script的腳本程序與HTML一起被下載到客戶端，由客戶端的瀏覽器讀取HTML文件，若包含JavaScript解釋執(zhí)行。,JavaScript簡介（續(xù)2）,服務器端應用：JavaScript可以用來開發(fā)服務器端的Web應用程序。當用戶通過瀏覽器請求URL時，服務器執(zhí)行JavaScript腳本程序，將生成的數(shù)據(jù)以HTML格式返回瀏覽器。,JavaScript簡介（續(xù)3）,對于JavaScript的客戶端應用和服務器端應用，要根據(jù)實際情況進行選擇。從程序保密性的角度來看，采用服務器端應用更為妥當（例如，用戶注冊）。如果只是對數(shù)據(jù)進行驗證，可采用客戶端應用來實現(xiàn)，這樣效率更高。 在Web頁面中使用

4、JavaScript 在HTML中嵌入JavaScript：在HTML中通過 引入JavaScript代碼。當瀏覽器讀取到標記時，解釋執(zhí)行其中的腳本。在使用標記時，必須通過Language屬性指定塊中包含的是何種類型的腳本。,JavaScript簡介（續(xù)4）,舉例：S01_02.htm 嵌入JavaScript代碼 /腳本標記 document.write(Hello World!) /在頁面上顯示一行文字 ,JavaScript簡介（續(xù)5）,鏈接JavaScript文件：如果腳本程序較長或者同一段腳本可以在若干Web頁中使用，則可以將腳本程序單獨放在一個文件里（.js），然后鏈接到需要它的H

5、TML文件，相當于將其中的腳本填入鏈接處。具體可通過標記的SRC屬性來指定外部腳本文件的URL。舉例：S01_03.htm，其中，文件S01_03.js與S01_03.htm放在同一個文件夾中，并含有以下內(nèi)容： document.write(Hello World!),JavaScript簡介（續(xù)6）,S01_03.htm文件內(nèi)容如下： 鏈接JavaScripte代碼 ,JavaScript簡介（續(xù)7）,編寫JavaScript的工具 使用純文本編輯器：早期的腳本編程人員通常使用純文本編輯器（如Windows的記事本）來編寫JavaScript腳本程序。這種方法適合于少量腳本的編寫和修改。 使

6、用專業(yè)化腳本編輯工具：利用可視化工具（如Frontpage、Dreamweaver和Flash等）可以很容易的在 Web頁面中加入腳本來完成一些功能。 JavaScript的專業(yè)化開發(fā)工具具有許多處理JavaScript特性的功能（如代碼生成、語法敏感編輯和調(diào)試等），開發(fā)人員經(jīng)常使用這些工具進行Web程序的開發(fā)，以便提高效率。,JavaScript簡介（續(xù)8）,JavaScript中的常量、變量及表達式 常量：數(shù)值型（整數(shù)、浮點數(shù)）、字符串和布爾型。 變量 可以使用關(guān)鍵字“var”聲明變量。如var name,age,weight; 變量賦值：var name=“張三”; name=“李四”;

7、 運算符 算術(shù)運算符：+、-、*、/、%（取余數(shù)）、+、- 關(guān)系運算符：、=、= =、= = =（嚴格等于）、!=、 != = （嚴格不等于） 邏輯運算符： 警示對話框顯示一些文本信息和一個“確定”按鈕。 ,JavaScript編程基礎(chǔ)（續(xù)1）,確認對話框confirm( ) 該方法返回一個布爾值 舉例，S04_02.htm 確認對話框 var visited,show_text; visited=confirm(您來過燕大嗎？); show_text = visited?您也認為燕大很美吧！:歡迎您有機會來燕大參觀!; document.write(show_text); ,JavaScri

8、pt編程基礎(chǔ)（續(xù)2）,提示對話框prompt( ) 舉例，S04_03.htm 提示對話框 var name; name=prompt(請輸入您的姓名:,); document.write(name+您好！歡迎您進入我的主頁！); ,JavaScript編程基礎(chǔ)（續(xù)3）,JavaScript的流程控制語句 分支結(jié)構(gòu)：包括if語句和switch語句。語法結(jié)構(gòu)同C語言類似。舉例：輸入兩個數(shù)，求其最大值（S04_05.htm），選擇回答問題（S04_10.htm） 循環(huán)結(jié)構(gòu)：包括for語句、while語句和do while語句。語法結(jié)構(gòu)同C語言類似。 舉例，利用for語句在頁面上通過腳本顯示6級標題

9、（S04_12.htm），使用while語句求1+2+3+100的累加和（S04_13.htm），利用do while語句編寫一個二位整數(shù)相加的測試程序（S04_15.htm），利用循環(huán)的嵌套在頁面上顯示一個“99乘法表”（ S04_18.htm）,JavaScript編程基礎(chǔ)（續(xù)4）,JavaScript的函數(shù) 預定義函數(shù)：包eval()計算字符串表達式的值、parseFloat() 將字符串開頭的整數(shù)或浮點數(shù)分解出來,轉(zhuǎn)換為浮點數(shù)、parseInt() 將字符串開頭的整數(shù)分解出來,轉(zhuǎn)換為整數(shù)。 函數(shù)定義和調(diào)用： 無參函數(shù)的定義和調(diào)用（S05_03.htm），有參函數(shù)的定義和調(diào)用（S05_0

10、4.htm、S05_06.htm ）,JavaScript編程基礎(chǔ)（續(xù)5）,對象的基本概念 對象的屬性和方法：對象包含兩個要素，一個是用來描述對象的一組數(shù)據(jù)，即若干變量，通常稱為屬性；另一個是用來操作對象的若干動作（或函數(shù)），通常稱為方法。在JavaScript中，對象就是屬性和方法的集合。方法是作為對象成員的函數(shù)，表明對象所具有的行為；屬性是作為對象成員的變量，表明對象的狀態(tài)。因此，我們可以通過調(diào)用對象的方法來對對象進行各種操作。 在JavaScript 中使用對象：可以使用三種對象，即內(nèi)置對象、自定義對象和瀏覽器對象。在JavaScript中，可通過new運算符來創(chuàng)建對象，即變量名= ne

11、w 對象名() 。將新創(chuàng)建的對象賦予一個變量（也叫對象變量）后，就可以通過這個變量訪問對象的屬性和方法。,JavaScript中的對象編程,JavaScript中的幾個常用內(nèi)置對象 Date對象：該對象主要提供獲取和設(shè)置日期和時間的方法。例如，getFullYear()（返回日期的完整年份，4位整數(shù)）、getMonth()-返回日期的月份值（011）、getDate ()-返回日期的日值（131）、 getDay ()-返回星期幾的序號（06） 。舉例，在Web頁面中顯示當前日期（S06_3.htm） String對象：該對象提供了對字符串進行處理的屬性和方法。使用該對象時，首先要創(chuàng)建一個字符

12、串對象變量?？梢允褂胣ew運算符來創(chuàng)建，也可以直接將字符串賦給變量。,JavaScript中的對象編程（續(xù)1）,String對象的最常用對象和方法：求字符串長度length、將字符串中的字母轉(zhuǎn)換為小寫字母toLowerCase()、將字符串中的字母轉(zhuǎn)換為大寫字母toUpperCase()、取子串substr (start，len) 。舉例，將輸入的字符串反向輸出到頁面上，并且要求將其中的小寫字母轉(zhuǎn)換為大寫字母。實現(xiàn)文件S06_07.htm內(nèi)容如下：,JavaScript中的對象編程（續(xù)2）,使用String var origin_s,upper_s,i; origin_s = prompt(請

13、輸入一行文字:,); upper_s = origin_s.toUpperCase(); for(i=upper_s.length-1;i=0;i-) document.write(upper_s.charAt(i); ,JavaScript中的對象編程（續(xù)3）,Array對象：在JavaScript中，使用內(nèi)置對象Array創(chuàng)建數(shù)組對象。格式如下： var arrayname=new Array(arraysize) 舉例，在頁面上顯示當前日期和時間,并顯示是星期幾。實現(xiàn)文件S06_09.htm內(nèi)容如下：,JavaScript中的對象編程（續(xù)4）,顯示星期幾 var week,today,w

14、eek_i; week=new Array(星期日,星期一,星期二,星期三,星期四,星期五,星期六); today=new Date(); week_i=today.getDay(); document.write(today.toLocaleString()+weekweek_i); ,JavaScript中的對象編程（續(xù)5）,返回日期的字符串表示,Array對象最常用的屬性和方法：計算數(shù)組的長度length、返回一個包含數(shù)組中所有元素的字符串toString()。 舉例，使用toString() 方法輸出數(shù)組對象變量的內(nèi)容。實現(xiàn)文件S06_11.htm內(nèi)容如下：,JavaScript中的對

15、象編程（續(xù)6）,使用Array對象的屬性和方法 var classmates,i classmates = new Array(張月,李良,王力,何芳); document.write(我的同學有:+classmates.toString(); ,JavaScript中的對象編程（續(xù)7）,動態(tài)網(wǎng)頁編程技術(shù)：是指在HTML文檔中使用腳本語言，通過文檔對象模型和事件驅(qū)動（Event-Driven）技術(shù)，控制裝載到瀏覽器中的頁面及其元素。 引用文檔對象模型中的對象：文檔對象模型為層次結(jié)構(gòu)，所有下層對象都是其上層對象的子對象。子對象其實就是父對象的屬性，其引用方式與對象屬性的引用相同。例如，引用doc

16、ument對象，可用window.document.write(“Hello”);,JavaScript的動態(tài)網(wǎng)頁編程技術(shù),由于window對象是默認的最上層對象，因此引用其對象時可以不使用window。如， document.write(“Hello”); 當引用較低層次的對象時，要根據(jù)對象的包含關(guān)系，使用成員引用操作符“.”一層一層地引用對象。例如，引用文檔中表單（form1）的文本輸入框yourname，使用document.form1. yourname。 舉例，使用腳本為表單中的文本輸入框給出一個初值。實現(xiàn)文件S07_01.htm,JavaScript的動態(tài)網(wǎng)頁編程技術(shù)（續(xù)1）,事件

17、驅(qū)動的基本概念：用戶操作事件（操作鼠標或按鍵的動作）或系統(tǒng)操作事件（如載入頁面等）引起一連串程序動作的執(zhí)行方式，稱為事件驅(qū)動。為了響應某個事件而進行的處理過程，稱為事件處理。對事件進行處理的過程或函數(shù)，稱為事件處理程序。 處理事件：在JavaScript中，使用事件有2種方法，即使用HTML標記或使用JavaScript語句。,JavaScript的動態(tài)網(wǎng)頁編程技術(shù)（續(xù)2）,許多HTML標記允許加上以事件名為名的屬性，如在按鈕標記中加上onclick事件屬性，并為該屬性給出值。舉例，設(shè)計一個表單，放入兩個按鈕，單擊它們時將顯示不同問候語。實現(xiàn)文件：S07_02.htm 使用事件的另一種方法是使

18、用JavaScript語句: 對象.事件=函數(shù)名 舉例，設(shè)計一個表單，放入1個按鈕，單擊它時將顯示一條問候語。實現(xiàn)文件：S07_03.htm,JavaScript的動態(tài)網(wǎng)頁編程技術(shù)（續(xù)3）,表單處理：當用戶單擊了表單中的提交按鈕之后，用戶在表單中填寫或選擇的內(nèi)容將被傳送到服務器端特定的程序（由action屬性指定，通常為ASP程序、JSP程序或Java Servlet程序）中，由該程序進行具體的處理。 驗證表單：由于表單正式提交到服務器之前，需要onSubmit的值為true，因此可以通過為onSubmit事件指定的處理函數(shù)來進行表單數(shù)據(jù)的驗證。舉例：設(shè)計一個表單，該表單有姓名和卡號（格式為XXXX-XXXX-XXXX-XXXX，每個X代表一位數(shù)字），要求在用戶單擊提交按鈕“發(fā)送”之前，驗證輸入數(shù)據(jù)的有效性。（S08_11.htm),JavaScript的動態(tài)網(wǎng)頁編程技術(shù)（續(xù)4）,處理表單元素舉例：以下例子中用到的表單元素對象的屬性和方法：focus()將焦點移動到對象上，onChange當對象的值改變時觸發(fā)，onClick當單擊按鈕、單選框或復選框時觸發(fā)。例子：處理文本框-驗證在文本框中輸入的年齡是否在10100之間（ S08_12.htm) ；處理按鈕設(shè)計3個按鈕，單擊它們時分別使頁面的背景色變成紅、藍、綠（ S08_13.htm) ；,JavaScript的