網頁制作案例教程-清華大學出版社-第10章-JavaScript概述

1、 網頁制作案例教程 毋建軍 鄭寶昆 郭銳 編著 清華大學出版社第10章 Javascript概述 本章學習目標（知識要點）nJavaScript基本概念nJavaScript基本特點及主要功能nJavaScript在網頁中應用的基本方式nJavaScript基礎語法 本章學習導航nJavaScript是制作網站中網頁動態(tài)效果的一項基本技術，了解JavaScript的基本概念及作用并在網站中使用它可以作出普通技術無法實現(xiàn)頁面動態(tài)效果及驗證功能。本章主要從JavaScript基本概念、在網頁HTML中引用方式、JavaScript基礎語法方面介紹了JavaScript的基礎知識。n本章內容在全書知

2、識結構中所處位置如圖所示 基礎篇HTML篇CSS篇JavaScript篇提高篇網 頁 設 計 與 開 發(fā) 流 程（AscentSys醫(yī)藥商務系統(tǒng)）網頁制作基礎HTML基礎網頁基本元素設計網頁布局規(guī)劃設計交互式網頁表單的設計與使用利用模板和庫創(chuàng)建網頁CSS樣式表使用CSS布局規(guī)劃網頁JavaScript網頁應用Javascript概述網頁中常見Flash制作Web服務器創(chuàng)建網站發(fā)布、測試和維護10.1 Javascript簡介簡介 nJavascript是一種解釋性的，基于對象的腳本語言(an interpreted, object-based scripting language)。 nJav

3、aScript 正式的標準是ECMA-262。這個標準基于 JavaScript (Netscape) 和 JScript (Microsoft)。標準由 ECMA 組織發(fā)展和維護。 nJavascript主要是基于客戶端運行的，用戶點擊帶有Javascript的網頁，網頁里的Javascript就傳到瀏覽器，由瀏覽器對此作處理。 n目前為止，最新的JavaScript的版本是JavaScript 2.1。目前支持JavaScript 2.1的瀏覽器有Firefox 2.0.x等。 10.2 Javascript特點及主要功能特點及主要功能nJavaScript是一種基于對象(Object B

4、ased)和事件驅動(Event Driven)并具有安全性能（Security）的腳本語言。n1、JavaScript特點 n它是一種腳本編寫語言 n基于對象的語言 n簡單性 n安全性 n動態(tài)性 n 2、 JavaScript功能 n客戶端應用 n服務器端應用 n3、JavaScript作用 n校驗用戶輸入的內容n有效地組織網頁內容n動態(tài)地顯示網頁內容n彌補靜態(tài)網頁不能實現(xiàn)的功能n動畫顯示n 4、JavaScript與Java的區(qū)別 10.3 在在HTML頁面中使用頁面中使用JavascriptnJavaScript是一種解釋性編程語言，其源代碼在被網絡傳送到客戶端執(zhí)行之前不需經過編譯，而是

5、將文本格式的字符代碼發(fā)送給客戶，由瀏覽器解釋執(zhí)行。 nJavaScript的代碼是一種文本字符格式，可是直接嵌入HTML文檔中，并且可動態(tài)裝載。 n 在JavaScript中，可以添加注釋來對 JavaScript 進行解釋，或者提高其可讀性。nJavaScript的注釋分為兩種：一種是單行注釋，以/開始。一種是多行注釋，/* 開始，以 */結束，/* */配對使用。 n在HTML頁面中使用JavaScript的方法有兩種：n一種是直接加入到HTML文件中；n另外一種是引用方式。10.3.1直接加入到直接加入到HTML文檔中方式文檔中方式n 一個簡單的JavaScript開發(fā)包含選擇開發(fā)工具、

6、編輯源代碼、測試、運行四步 n1）選擇開發(fā)工具 n2）編輯源代碼 n（1）創(chuàng)建并寫出簡單的HTML頁面基本結構。 n（2）在HTML文件標簽中或者中任意地方添加配對標簽，JavaScript腳本代碼用配對標簽進行標識，設置語言屬性Language =JavaScript說明標識中是使用的何種語言 代碼如下：/ JavaScript代碼document.write(Welcome To Ascent Technologies); n3）運行程序10.3.2 引用方式引用方式n如果已經存在一個Javascript源文件（以js為擴展名），則可以采用這種引用的方式，以提高程序代碼的利用率。其基本格式

7、如下：n 其中的Url就是程序文件的地址。 n實現(xiàn)上述“直接插入方式”中所舉例子的效果，步驟如下： n1）首先創(chuàng)建一個Javascript源代碼文件“as.js”，其內容如下：document.writeln(這是Javascript！采用引用的方法！);n2） 在網頁中中添加代碼： 。 n3）運行程序，雙擊welcome.html文件，即可打開 10.4 Javascript基礎語法基礎語法n10.4.1 Javascript字符集、標識符和關鍵字n1）字符集 n常見的標準字符集有ASCII、ISO、LATIN-1、GBK和UNICODE。 n與字符集相關的需要注意的一個問題是，通常瀏覽器本

8、身支持多種類型的編碼器。因此作為嵌入頁面文檔的程序腳本，不但要考慮自身編碼，還要充分考慮瀏覽器編碼器的兼容性。對于強制指定了不支持Unicode的編碼器的瀏覽器，JavaScript將會因為腳本代碼的注釋里的中文不能正確解析而導致執(zhí)行失敗。 n2）標識符 n標識符可以由任意順序的大小字母、下劃線（_）、美元符號（$）組成，但標識符不能以數(shù)字開始，不能是JavaScript中的保留字 .n3）關鍵字 nJavaScript同其他語言一樣也擁有自己的關鍵字，即保留字，是系統(tǒng)定義的具有特定含義的特殊標識符，用戶不能用來作為自定義標識符。nJavaScript的關鍵字有許多，大致可分為兩種類型：Jav

9、aScript保留關鍵字和ECMA擴展的保留字。 10.4.2 Javascript數(shù)據類型、變量和常量n1、數(shù)據類型 n數(shù)值型（整數(shù)和浮點數(shù)）n字符串型（用“”號或括起來的字符或數(shù)值）n布爾型（使True或False表示）n特殊數(shù)據類型： Null（空值），Undefinedn2、變量nJavaScript 支持使用變量，變量根據使用范圍的不同分為：全局變量和局部變量。全局變量可以在應用中的任何地方使用，局部變量只能在當前的函數(shù)中使用。 nJavaScript是一種對數(shù)據類型變量要求不太嚴格的語言，所以不必聲明每一個變量的類型，變量聲明盡管不是必須的，但在使用變量之前先進行聲明是一種好的習慣

10、?？梢允褂?var 語句來進行變量聲明。 n聲明全局變量： X=0；全局變量也可以使用var語句，但不是必須的。是在之間聲明的變量n聲明局部變量方法：局部變量在函數(shù)中定義，并帶有var關鍵字。如：var men = true; / men 中存儲的值為 Boolean 類型。 n對于變量必須明確變量的命名、變量的類型、變量的聲明及其變量的作用域。 n3、常量n整型常量 n實型常量 n布爾值 n字符型常量 n空值 n特殊字符 10.4.3表達式和運算符表達式和運算符n、表達式 n在JavaScript中表達式由常量、變量以及運算符構成，在定義完變量后，就可以對它們進行賦值、改變、計算等一系列操作

11、 n表達式可以分為算術表述式、字串表達式、賦值表達式以及布爾表達式等。 n、運算符n算術運算符n 關系運算符 n邏輯運算符 n賦值運算符 10.4.4 Javascript控制語句n1、if條件語句 基本格式if（表述式）語句段；.else語句段；.nif語句可以嵌套使用：if（表達式）語句；else if（表達式）語句；else if（表達式）語句；else 語句； n2、switch語句 switch語句根據條件值改變程序執(zhí)行的順序，其基本格式如下：swith(val)case 1:語句1;break;case 2:語句2;break;default:缺省語句;break;n說明：1）sw

12、itch后面的表達式只能是整型、字符型或枚舉類型。 case后面的常量表達式的類型必須與其一致。2） “case 常量表達式”起到語句標號的作用，各常量表達式 的值必須互不相等。3） 各case和default出現(xiàn)的次序可以任意。4） 多個case可共用一組執(zhí)行語句，即允許case常量表達式 后無語句。5）break語句在switch語句中是可選的，它用來跳過后面的 case語句，結束switch語句，從而達到分支的目的。 n3、for語句 n如果在已知循環(huán)次數(shù)的情況下，可以使用JavaScript提供的for語句，for語句能夠使程序變得更為簡潔，基本格式如下：for（初始表達式；條件表達式

13、；增量表達式）語句組；n4、while循環(huán) nwhile語句用于當滿足指定條件時需要循環(huán)執(zhí)行一組語句的情況，它的語法格式如下：while（條件表達式）語句組；while語句執(zhí)行時，首先判斷表達式的值，如果表達式的值為“真”，就重復執(zhí)行語句組，直到表達式的結果變?yōu)椤凹佟睘橹埂?n5、do while循環(huán)ndo while語句與while語句相似，也是用于在滿足指定條件時反復執(zhí)行的一組語句，但是兩者之間存在著差別，該語句的基本格式如下：do語句組； while（條件表達式）; n6、forin nJavaScript 提供了一種特別的循環(huán)方式來遍歷一個對象的所有用戶定義的屬性或者一個數(shù)組的所有元素

14、，即for.in 循環(huán)。其基本格式：for（變量 in 數(shù)組或對象）語句組；forin語句在執(zhí)行時，對數(shù)組或對象中的每一個元素，重復執(zhí)行語句組的內容，直到處理完最后一個元素為止。 n7、break和continue語句 n使用break語句使得循環(huán)從for或while中跳出，continue使得跳過循環(huán)內剩余的語句而進入下一次循環(huán)。 10.4.5 Javascript函數(shù)函數(shù)n1、函數(shù)定義和調用 n1）函數(shù)的定義n函數(shù)一般定義在HTML文檔的部分，位于標記內部，函數(shù)可以出現(xiàn)在任何位置。此外，函數(shù)也可以在單獨的腳本文件中定義，并保存在外部文件中，在適用的位置根據函數(shù)名和所在的外部文件名引用。 定

15、義函數(shù)的語法格式為：function 函數(shù)名（形式參數(shù)1，形式參數(shù)2，形式參數(shù)n）語句組；n2）函數(shù)的調用 n函數(shù)定義后只有調用該函數(shù)，才會實現(xiàn)該函數(shù)的功能，這稱作函數(shù)調用。調用函數(shù)的方法非常簡單，只要寫上函數(shù)名，圓括號以及在圓括號中寫上要傳遞的參數(shù)或值就可以了。n調用函數(shù)的語法格式如下： 函數(shù)名（實際參數(shù)1，實際參數(shù)2, 實際參數(shù)n）說明：函數(shù)名要與定義函數(shù)時使用的名稱相同。n3）函數(shù)定義和使用實例n2、 函數(shù)的嵌套調用函數(shù)的嵌套調用n1）函數(shù)嵌套語法n函數(shù)嵌套是指在一個函數(shù)內部定義和使用另一個或多個函數(shù)的情況。函數(shù)嵌套的語法格式為：function funcA()/這里是函數(shù)funcA（）

16、的一條或多條語句，其中包括對myfuncB（）的調用function.funcB()/這里是函數(shù)funcB()的一條或多條語句，可以使用funcA中聲明的變量n2）函數(shù)的嵌套調用實例n3、遞歸函數(shù)、遞歸函數(shù)n遞歸函數(shù)的另外一種形式是在幾個函數(shù)之間循環(huán)調用，從而形參隱含遞歸。n 例如，下面的是在函數(shù)f1()中調用f2()函數(shù)，又在f2()函數(shù)中調用f1()函數(shù)，從而形成遞歸調用。 function f1() f2(); function f2() f1(); n遞歸函數(shù)效率很低，但遞歸函數(shù)的結構有利于理解和解決現(xiàn)實問題。有些問題用遞歸方法解決起來會非常簡單，如求遞歸函數(shù)的值，漢諾塔問題等。 10.5 項目案例項目案例學習目標學習目標 案例描述案例描述 學習JavaScript的基本語法、日期函數(shù)及其格式化應用、CSS和DIV的應用以及系統(tǒng)函數(shù)運用等知識 定義獲取系統(tǒng)時間函數(shù)，獲取的計算機系統(tǒng)當前時間，以格式化的格式把時間顯示在DIV和CSS設置的網頁布局中固定位置，并動態(tài)更新時間。 案例要點案例要點 DIV和CSS設置網頁布局、時間函數(shù)、Span標簽使用 案例實施案例實施 1、定義格式化的日期函數(shù)，為