模板
教程
環境
性能
功能
管理
JavaScript與DHTML技術
1 使用客戶端腳本 1.1 使用SCRIPT標記符 1.1.1 什么是客戶端腳本 腳本（Script）實際上就是一段程序，用來完成某些特殊的功能。腳本程序有可以在服務器端運行的，稱為服務器端腳本，例如：PHP、ASP等；也有在瀏覽器端運行的，稱為客戶端腳本，例如：JavaScript和VBScript。 1.1.2 使用SCRIPT標記符插入腳本 在網頁中最常用的一個插入腳本的方法是：把腳本標記符<SCRIPT>...</SCRIPT>置于網頁上的HEAD部分或BODY部分，然后在其中加入腳本程序。其語法格式如下： <SCRIPT language="JavaScript" type="text/javascript"> <!-- 在此編寫JavaScript代碼 //--> </SCRIPT>
或者：
<HEAD> <META http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT> <!-- 在此編寫JavaScript代碼 //--> </SCRIPT> </HEAD> |
1.2 直接添加腳本
與直接在標記符內使用style屬性指定CSS樣式一樣，也可以直接在HTML表單的輸入元素標記符內添加腳本，以響應輸入元素的事件。
例如：
<html> |
1.3 鏈接腳本文件
如果同一段腳本可以在若干網頁中使用，則可以將腳本放在單獨的一個文件里，然后在需要文件的網頁中引用。語法格式如下：
<SCRIPT type="text/javascript"
src=腳本文件URL></SCRIPT>
說明：JavaScript文件是純文本文件，可以用任何文本編輯器進行編輯，然后程序應以.js為擴展名保存。
2 JavaScript 簡介
2.1 JavaScript語言基礎
2.1.1 JavaScript基本數據類型
JavaScript 有六種數據類型。主要的類型有:
- number
- string
- object
- Boolean
- null
- undefined
JavaScript采用弱數據類型的形式，因而一個數據的變量或常量不必首先作聲明，而是在使用或賦值時確定其數據的類型的。當然也可以先聲明該數據的類型，它是通過在賦值時自動說明其數據類型的。
變量的聲明使用關鍵字 var ，變量名可以是任意長度的字母、數字和下劃線組成（“_”），同時變量名第一個字符不能是數字。
注意：JavaScript 是對大小寫敏感的，也就是說區分大小寫，如變量 count 和變量 Count 是兩個不同的變量！
2.1.2 JavaScript運算符與表達式
(1)運算符
運算符完成操作的一系列符號，在JavaScript中包括以下運算符：
- 算術運算符
JavaScript中的算術運算符有單目運算符和雙目運算符。
雙目運算符：
+（加） 、-（減）、 *（乘）、 /（除）、 %（取模）。
單目運算符：
-（取反）、++（遞加1）、--（遞減1）。
- 比較運算符
比較運算符它的基本操作過程是，首先對它的操作數進行比較，爾后再返回一個true或False值，有８個比較運算符:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。
- 布爾邏輯運算符
包括&&(邏輯與）、||（邏輯或）、?。ㄟ壿嫹牵?。
- 位操作運算符
包括|（按位或）、&(按位與)、^（按位異或）、<<（左移）、 >>（右移）、 >>>（右移，零填充）。
- 字符串運算符：+（字符串的連接操作）
- 三目操作符
操作數？結果１：結果２
若操作數的結果為真，則表述式的結果為結果１，否則為結果２。
- 賦值運算符： = 、op=
(2)表達式
在定義完變量后，就可以對它們進行賦值、改變、計算等一系列操作，這一過程通常又叫稱一個叫表達式來完成，可以說它是變量、常量、布爾及運算符的集合，因此表達式可以分為算術表述式、字串表達式、賦值表達式以及布爾表達式等。
2.1.3 JavaScript語句
JavaScript腳本語言的基本構成是由控制語句、函數、對象、方法、屬性等,來實現編程的。
(1)條件語句
- if語句
基本格式
| if（表述式） 語句段１； ...... else 語句段２； ..... |
功能：若表達式為true，則執行語句段１；否則執行語句段２。
- switch語句
分支語句switch可以根據一個變量的不同取值采取不同的處理方法。 語法如下：
| switch (expression) { case label1: 語句串1； case label2: 語句串2； case label3: 語句串3； ... default: 語句串3； } |
如果表達式取的值同程序中提供的任何一條語句都不匹配，將執行default 中的語句。
(2)For循環語句
- for語句
基本格式
for（初始化；條件；增量）{ |
功能：實現條件循環，當條件成立時，執行語句集，否則跳出循環體。
- while循環
基本格式
| while（條件）{ 語句集； } |
該語句與For語句一樣，當條件為真時，重復循環，否則退出循環。
For與while語句都是循環語句，使用For語句在處理有關數字時更易看懂，也較緊湊；而while循環對復雜的語句效果更特別。
- do ... while 語句
do while語句是while語句的變體，格式如下：
| do{ 語句集； }while(條件); |
- break語句 結束當前的各種循環，并執行循環的下一條語句。
- continue語句 結束當前的循環，并馬上開始下一個循環。
- with語句
基本語法如下：
| with (對象名稱){ 執行語句 } |
作用是這樣的：如果你想使用某個對象的許多屬性或方法時，只要在with語句的（）中寫出這個對象的名稱，然后在下面的執行語句中直接寫這個對象的屬性名或方法名就可以了。
- return語句：用于返回函數調用的值。
- for in語句：用于對一個對象的所有屬性進行循環，直到每個屬性都訪問到。
2.1.4 JavaScript函數
(1) 定義函數
基本語法：
| function 函數名 （參數列表）{ 函數體; return 表達式; } |
(2) JavaScript全局函數
JavaScript中包含以下7個全局函數，用于完成一些常用的功能：
- escape(character) 返回字符的編碼
- eval(String) 返回字符串表達式中的值
- isFinite( ) 用于確定一個變量是否有界，如果有界則返回true，否則為false。
- isNaN( ) 用于確定一個變量是NaN，如果是返回true，否則返回false。
- parseFloat(floatstring) 返回實數，若字符串不是以數字開頭，則返回NaN。
- parseInt(numbestring ,radix) 返回不同進制的數，若字符串不是以數字開頭，則返回NaN。
- unescape( ) 返回字符串ASCI碼，它完成escape( )函數的逆操作。
2.2 使用JavaScript對象
2.2.1 什么是對象
對象是由屬性和方法兩個基本的元素的構成的。對象的屬性是指對象的背景色，長度，名稱等。對象的方法是指對屬性所進行的操作，就是一個對象自己所屬的函數。
在JavaScript中可以操作的對象通常包括兩種類型：瀏覽器對象和JavaScript內部對象。
2.2.2 Array對象
Array對象也就是數組對象，具體對象的產生必須使用new Array()命令，由new Array()產生的數組都是動態數組，也就是數組的大小是不定的。也可以由new Array(arrayLength)來產生一個指定大小的數組，該對象常用的只有一個length屬性，表示一個數組中元素的個數。
Array對象的常用方法有：
- reverse()：將一個數組順序取反；
- sort()：按字典順序對數組元素重新排序
2.2.3 Date對象
日期對象屬于一個內置對象，只提供了對象結構，可以采用下述方法產生一個具體的對象實例。
Now=new Date();
以當前的系統日期、時間產生一個對象實例。
常用方法如下：
- getDate(): 當月日期部分，1~31
- getDay()：返回該星期的第幾天0~6
- getMonth(): 返回月份，0～11
- getTime(): 返回自1970年1月1日00：00：00以來的毫秒數
- getYear(): 在2000年以前，返回后兩位，2000年以后返回4位
- getHours():返回小時數
- getMintes():返回分鐘數
- getSeconds():返回秒數
- setYear();設置年
- setDate():設置當月號數
- setMonth():設置當月份數
- setHours():設置小時數
- setMintes():設置分鐘數
- setSeconds():設置秒數
- setTime ():設置毫秒數
2.2.4 Math對象
Math對象包含用來進行數學計算的屬性和方法，其屬性也就是標準的數學常量，其方法則構成了數學函數庫。
- 常用屬性
| Math.E | e | 2.71828459045 |
| Math.LN2 | ln2 | 0.69314718056 |
| Math.LN10 | ln10 | 2.30258509299 |
| Math.LOG2E | log2e | 1.44269504889 |
| Math.LOG10E | log10e | 0.43429448190 |
| Math.PI | 圓周率 | 3.14159265359 |
- 常用方法
| floor(num) | 返回小于等于num的最大整數 |
| max(n1,n2) | 取n1、n2中的最大值 |
| min(n1,n2) | 取n1、n2中的最小值 |
| pow(n1,n2) | 返回n1的n2次方 |
| random() | 產生0-1之間的隨機數 |
| sqrt(n) | 返回n的平方根 |
| toString() | 返回對象的字符串 |
2.3 使用瀏覽器對象
2.3.1 文檔對象模型
文檔對象模型（DOM）：用于表示HTML元素以及WEB瀏覽器信息的一個模型。一個對象是所有能與腳本交互的某種事物，而對象模型就是所有那些對象組成的總體。是一種為了命名所有那些事物的系統，該命名系統是建立在對象層次的基礎上。
2.3.2 document對象
窗口內的內容就是document，因此它是最主要的對象之一。文檔對象有很多的屬性和方法，文檔對象的屬性大部分可以由HTML標識符定義，但JavaScript提供了動態更改頁面屬性的方法，如動態更改頁面背景色。
(1) document對象的常用屬性
- bgColor - 頁面的背景色；
- fgColor - 頁面的前景色，即文本的顏色；
- linkColor - 超文本鏈接的顏色
- lastModified - 此頁面 (HTML 文件) 最后被修改的時間；
- forms - 表單 (form) 對象組成的數組，數組中的每一個元素對應于網頁中的每一個 <FORM> 標記，數組元素對應的順序是在 HTML 文件代碼中標記出現的先后順序；
- links - 超文本鏈接對象組成的數組，數組中的每一個元素對應于網頁中的每一個 <A> 標記，數組元素對應的順序是在 HTML 文件代碼中標記出現的先后順序；
- title - 當前頁面的標題
(2)document對象的常用事件
事件(event)在此的含義就是用戶與Web頁面交互時產生的操作。對于document對象來說，非常有用的事件有：
- onClick 當用戶單擊鼠標按鈕時，產生onClick事件。同時onClick指定的事件處理程序或代碼將被調用執行。
- onLoad 當文檔載入時，產生該事件。
- onUnload 當網頁退出時引發onUnload事件。
(3)document對象的常用方法
document對象最常用的方法為write()，表示在文檔中寫內容。
2.3.3 window對象
window對象是最頂級的對象，它是其他對象的父對象。
(1) window對象的常用屬性
- document 表示窗口中顯示的當前文檔
- history 表示最近訪問過的URL列表
- location 表示窗口中顯示的當前URL
- status 表示窗口狀態欄中的臨時信息
(2) window對象的常用方法
- alert() 它是一個彈出對話框，用以提示用戶某些注意事項。
- confirm() 它是一個消息框，有兩個按鈕"確認"和"取消"，單擊確認返回true，單擊取消，返回false，利用返回值可以作進一步的工作。
- prompt() 這是一個消息框，不過該消息框允許用戶輸入某種信息。該信息被當作prompt()的結果返回。
- open() 該方法打開一個新的瀏覽器窗口，原窗口不變。新打開的窗口可以定義大小、有無工具欄、有無狀態欄、有無地址欄、可否改變尺寸、有無滾動條。
- close() 關閉當前瀏覽的窗口。
- blur()從窗口中移走焦點。在很多系統中，該操作把窗口送往后臺。
- focus()使窗口獲得焦點。在很多系統中，該操作把窗口送往前臺。
2.3.4 Form對象
Form對象封裝了<form>標簽定義的表單中的相關信息。它的幾個數值屬性基本是和<form>標簽中相對應的，有type、name、action、method、encoding、target等。除了上面和HTML標簽相對應的屬性外，還有兩個屬性是和表單內的元素有關的，一個是elements，它是一個數組，數組中的每一個元素都是由<input>定義的一個對象，另一個是length，它是elements數組的元素的個數。
Form對象的方法較少，只有兩個：submit()和reset()，submit()方法會觸發submit事件。
3 DHTML技術
3.1 什么是DHTML
DHTML（Dynamic HTML，簡稱DHTML），其實并不是一門新的語言，它是建立在原有技術的基礎上，可分為三個方面：
- HTML
- CSS
- 客戶端腳本（如：JavaScript）
