《JavaScript程序設(shè)計(jì)教程》項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)

JavaScript程序設(shè)計(jì)教程項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)很多網(wǎng)站，特別是一些商業(yè)網(wǎng)站、企業(yè)網(wǎng)站及論壇等都實(shí)行會(huì)員制，因此都具有會(huì)員注冊(cè)與登錄功能。

本項(xiàng)目將介紹網(wǎng)上廣為使用的會(huì)員注冊(cè)網(wǎng)頁(yè)的JavaScript設(shè)計(jì)與實(shí)現(xiàn)方法，并對(duì)項(xiàng)目中應(yīng)用到的HTML和JavaScript相關(guān)知識(shí)進(jìn)行介紹。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.1功能與技術(shù)分析1.1.1會(huì)員注冊(cè)網(wǎng)頁(yè)會(huì)員注冊(cè)網(wǎng)頁(yè)，可以填寫注冊(cè)者相關(guān)的信息，不同的網(wǎng)站在注冊(cè)時(shí)需要填寫的信息會(huì)有所不同，注冊(cè)時(shí)基本信息如圖所示。

項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.1功能與技術(shù)分析1.1.2功能分析會(huì)員注冊(cè)網(wǎng)頁(yè)需實(shí)現(xiàn)的功能有：

1)填寫、顯示用戶名、所在專業(yè)和班級(jí)、聯(lián)系電話；

2)密碼的填寫和確認(rèn)不回顯；

3)利用單選框選擇性別；

4)利用復(fù)選框選擇愛好；

項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.1功能與技術(shù)分析1.1.2功能分析會(huì)員注冊(cè)網(wǎng)頁(yè)需實(shí)現(xiàn)的功能有：5)在下拉列表中選擇特長(zhǎng)；

6)點(diǎn)擊“重置”按鈕可以清除所填內(nèi)容。

7)點(diǎn)擊“提交”按鈕后會(huì)觸發(fā)“單擊事件onClick”，彈出“注冊(cè)信息對(duì)話框”。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.1功能與技術(shù)分析1.1.3技術(shù)分析除了使用JavaScript的基本知識(shí)外，還需要了解的知識(shí)點(diǎn)有：

(1)HTML的界面設(shè)計(jì)。

(2)JavaScript的輸入與輸出。

(3)JavaScript的基本數(shù)據(jù)類型。

(4)JavaScript的變量概念及使用。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.1塊區(qū)域標(biāo)記塊區(qū)域標(biāo)記<div></div>可定義HTML文檔中的分區(qū)或節(jié)，可以把文檔分割為獨(dú)立的、不同的部分。

<div>是一個(gè)塊級(jí)元素。所謂塊級(jí)元素，是指在瀏覽器中以另起一行的方式顯示的元素?？梢酝ㄟ^<div>的屬性class或id應(yīng)用額外的樣式。class和id的區(qū)別在于，class用于元素組項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)，而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.1塊區(qū)域標(biāo)記還可對(duì)<div>的其他屬性進(jìn)行設(shè)置例如，把文檔中的一個(gè)部分顯示為綠色：<divstyle="color:#00FF00">

<h3>Thisisaheader</h3>

<p>Thisisaparagraph.</p></div>項(xiàng)目的LOGO可以利用<div>標(biāo)記設(shè)計(jì)，代碼如下：<divclass="logo">

<imgalt="考研聯(lián)盟"src="1.jpg">

//

在此設(shè)置了LOGO的背景圖片</div>項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.2表格表格是網(wǎng)頁(yè)設(shè)計(jì)中常用的頁(yè)面元素。在頁(yè)面中使用表格可以加強(qiáng)對(duì)文本位置和顯示數(shù)據(jù)的控制，從而使得頁(yè)面更加直觀、清晰。表格所涉及的標(biāo)記有：

(1)表格標(biāo)記<table>…</table>

<table>用來說明表格，<table>與</table>之間就是整個(gè)表格的內(nèi)容。該標(biāo)記有許多屬性用來設(shè)置表格背景、表格邊框?qū)挾鹊?。?xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.2表格表格是網(wǎng)頁(yè)設(shè)計(jì)中常用的頁(yè)面元素。在頁(yè)面中使用表格可以加強(qiáng)對(duì)文本位置和顯示數(shù)據(jù)的控制，從而使得頁(yè)面更加直觀、清晰。表格所涉及的標(biāo)記有：

(2)標(biāo)題標(biāo)記<caption>…</caption>該標(biāo)記用來設(shè)置一種比較特殊的單元格，即標(biāo)題單元格。標(biāo)題單元格位于整個(gè)表格的上方，并居中顯示，起到顯示表格標(biāo)題的作用。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.2表格表格是網(wǎng)頁(yè)設(shè)計(jì)中常用的頁(yè)面元素。在頁(yè)面中使用表格可以加強(qiáng)對(duì)文本位置和顯示數(shù)據(jù)的控制，從而使得頁(yè)面更加直觀、清晰。表格所涉及的標(biāo)記有：

(3)行標(biāo)記<tr>…</tr>表格由行和列組成，<tr>即用來表示表格中的一行。在表格中包含幾組<tr>，即表示表格中有幾行。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.2表格表格是網(wǎng)頁(yè)設(shè)計(jì)中常用的頁(yè)面元素。在頁(yè)面中使用表格可以加強(qiáng)對(duì)文本位置和顯示數(shù)據(jù)的控制，從而使得頁(yè)面更加直觀、清晰。表格所涉及的標(biāo)記有：

(4)表頭標(biāo)記<th>…</th>在表格中有一行比較特殊的單元格，稱為表頭，或稱為表格每一列的標(biāo)題欄。這個(gè)內(nèi)容可有<th>來標(biāo)記。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.2表格表格是網(wǎng)頁(yè)設(shè)計(jì)中常用的頁(yè)面元素。在頁(yè)面中使用表格可以加強(qiáng)對(duì)文本位置和顯示數(shù)據(jù)的控制，從而使得頁(yè)面更加直觀、清晰。表格所涉及的標(biāo)記有：

(5)單元格標(biāo)記<td>…</td>

<td>標(biāo)記表示一列，準(zhǔn)確的說，應(yīng)是某一行中的一列，即單元格。單元格中的內(nèi)容可以是文本、圖片、列表、段落、表單、水平線、表格等。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.2表格以三行兩列表格為例：<table>

<caption>表格標(biāo)題</caption>

<tr>

<th>第一列標(biāo)題</th>

<th>第二列標(biāo)題</th>

</tr>

<tr>

<td>第一行，第一列</td>

<td>第一行，第二列</td>

</tr><tr>

<td>第二行，第一列</td>

<td>第二行，第二列</td>

</tr></table>項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象表單是一個(gè)包含表單元素的區(qū)域，允許用戶在表單中輸入信息。表單使用標(biāo)記<form>定義。理論上，表單元素可以是文本輸入框、復(fù)選框、單選按鈕、提交按鈕等等，這些表單元素作為對(duì)象也有自己的屬性和方法。常用的表單元素有輸入域、列表框和文本區(qū)域等。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象1.輸入域標(biāo)記<input>與</input>該標(biāo)記用于在表單中定義文本框、密碼框、單選框、復(fù)選框、按鈕等表單元素，具體類型由<input>的type屬性決定，如表1-1所示。type可選屬性值說明text單行文本框password密碼文本框，回顯字符為*radio單選框chechbox復(fù)選框hidden隱藏文本框file文件選擇框image圖像按鈕submit提交按鈕reset重置按鈕項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象1.輸入域標(biāo)記<input>與</input>

(1)文本框標(biāo)記<inputtype="text"＞用于在網(wǎng)頁(yè)上創(chuàng)建單行文本輸入?yún)^(qū)域，每個(gè)單行文本輸入?yún)^(qū)域都具有如下幾個(gè)典型的屬性：

size指定文本輸入?yún)^(qū)域的寬度，以字符個(gè)數(shù)為度量單位。

value指定顯示在輸入?yún)^(qū)域中的文本內(nèi)容。

maxlength指定用戶能夠輸入的最大字符串長(zhǎng)度。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象1.輸入域標(biāo)記<input>與</input>

(1)文本框標(biāo)記<inputtype="text"＞用于在網(wǎng)頁(yè)上創(chuàng)建單行文本輸入?yún)^(qū)域，每個(gè)單行文本輸入?yún)^(qū)域都具有如下幾個(gè)典型的屬性：readonly屬性存在時(shí)，文本輸入?yún)^(qū)域可以獲得焦點(diǎn)，但訪問者不能改變文本輸入?yún)^(qū)域中的值。

disabled屬性存在時(shí)，文本輸入?yún)^(qū)域不能獲得焦點(diǎn)，訪問者也不能改變文本輸入?yún)^(qū)域中的值。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象1.輸入域標(biāo)記<input>與</input>

(2)復(fù)選框標(biāo)記<inputtype="checkbox">用于在網(wǎng)頁(yè)上添加一個(gè)復(fù)選框。

復(fù)選框典型的一個(gè)屬性是checked，該屬性用來設(shè)置瀏覽器在首次顯示此復(fù)選框時(shí)是否被選中，這是一個(gè)不需要賦值的屬性，只要設(shè)置了該屬性，復(fù)選框的初始狀態(tài)即為選中。

復(fù)選框的value屬性指定復(fù)選框被選中時(shí)該對(duì)象所代表的結(jié)果值。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象1.輸入域標(biāo)記<input>與</input>

(3)單選按鈕標(biāo)記<input

type=

"radio"＞用于添加一個(gè)單選按鈕，它的使用方式與復(fù)選框類似。

需要聯(lián)合使用一組單選按鈕才有意義，只要將若干單選按鈕的name屬性設(shè)置為一樣，它們就形成了一組單選按鈕。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象1.輸入域標(biāo)記<input>與</input>

(4)密碼框標(biāo)記<inputtype="password"＞用于添加一個(gè)密碼輸入?yún)^(qū)域.

密碼輸入?yún)^(qū)域是單行文本區(qū)域的一種變體。當(dāng)訪問者在密碼區(qū)域輸入字符時(shí)，瀏覽器將每個(gè)字符都顯示為星號(hào)(*)，以使得文本的內(nèi)容不可見。

密碼區(qū)域用在不希望他人從計(jì)算機(jī)屏幕上看見訪問名輸入信息的各種場(chǎng)合。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象1.輸入域標(biāo)記<input>與</input>

(5)標(biāo)準(zhǔn)按鈕標(biāo)記<inputtype="button">用于添加一個(gè)普通類型的按鈕，這種普通按鈕類型通常要與某個(gè)程序代碼相聯(lián)系，用來告訴瀏覽器在訪問者單擊該按鈕時(shí)去執(zhí)行怎樣的動(dòng)作。

按鈕的value屬性為顯示在按鈕上的文本。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象1.輸入域標(biāo)記<input>與</input>

(6)插入文件使用<inputtype=

"file">標(biāo)記，瀏覽器會(huì)自動(dòng)生成一個(gè)文本輸入框和一個(gè)“瀏覽…”按鈕，供用戶選擇上傳到服務(wù)器的文件。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象2.列表框標(biāo)記<select>與</select>該標(biāo)記用來定義列表框，列表框的項(xiàng)目則由<option></option>標(biāo)記表示，列表框標(biāo)記<select>與選項(xiàng)標(biāo)記<option>的屬性分別如表1-2和表1-3所示。屬性說明取值id元素ID屬性值為字符串name元素名稱屬性值為字符串size列表框顯示的項(xiàng)目數(shù)屬性值為數(shù)字形式的字符串，如取“1”，則表示下拉列表框multiple是否允許多選無屬性值。加入該屬性即表示可按住Ctrl進(jìn)行多選項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象2.列表框標(biāo)記<select>與</select>該標(biāo)記用來定義列表框，列表框的項(xiàng)目則由<option></option>標(biāo)記表示，列表框標(biāo)記<select>與選項(xiàng)標(biāo)記<option>的屬性分別如表1-2和表1-3所示。屬性說明取值value項(xiàng)目列表的值屬性值為字符串。如省略，則為<option></option>之間的內(nèi)容selected項(xiàng)目是否被選中無屬性值。加入該屬性即表示該項(xiàng)目被選中項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象2.列表框標(biāo)記<select>與</select>例如：<selectid="education"

size=”1”>

<optionvalue="高中">高中</option>

<optionvalue="大專">大專</option>

<optionvalue="本科">本科</option>

<optionvalue="碩士">碩士</option>

<optionvalue="博士">博士</option></select>項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.2HTML中的界面設(shè)計(jì)1.2.3表單中的對(duì)象3.文本區(qū)域<textaera>與</textaera>該標(biāo)記用來定義文本區(qū)域（或稱多行文本框），常用于輸入大量文字內(nèi)容的應(yīng)用中。常用的屬性如表1-4所示。舉例如下：<textareaid="introduction"cols="45"rows="5"></textarea>屬性說明取值id元素ID屬性值為字符串name元素名稱屬性值為字符串rows高度屬性值為數(shù)字，表示行數(shù)cols寬度屬性值為數(shù)字，表示列數(shù)項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入

JavaScript，也稱作ECMAScript，是一種被廣泛應(yīng)用于客戶端網(wǎng)頁(yè)開發(fā)的腳本語(yǔ)言。JavaScript最早只是在HTML上使用，用來給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器。將JavaScript代碼嵌入到HTML文檔中通常有以下3種方法：

使用<script>標(biāo)記；

使用JavaScript文件；

通過HTML文檔事件處理程序引入。下面分別介紹JavaScript腳本的幾種標(biāo)準(zhǔn)引入方法：項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.1使用<script>標(biāo)記

HTML是基于標(biāo)記的文本，因此在其中嵌入JavaScript代碼也需要使用標(biāo)記，這個(gè)標(biāo)記就是<script>。

將JavaScript代碼寫到<script>和</script>中間，這樣當(dāng)瀏覽器讀取<script>標(biāo)記時(shí)，就會(huì)自動(dòng)解釋執(zhí)行其中的代碼。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.1使用<script>標(biāo)記【例1-1】在網(wǎng)頁(yè)中通過<script>標(biāo)記嵌入JavaScript代碼。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.1使用<script>標(biāo)記【例1-1】在網(wǎng)頁(yè)中通過<script>標(biāo)記嵌入JavaScript代碼。注：(1)代碼：<scripttype="text/javascript">

document.write("<h1>歡迎學(xué)習(xí)JavaScript</h1>");</script>中的<script>和</script>標(biāo)記對(duì)JavaScript代碼封裝，同時(shí)告訴瀏覽器其間的代碼為JavaScript代碼，然后調(diào)用document文檔對(duì)象的write()方法寫字符串到HTML文檔中。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.1使用<script>標(biāo)記【例1-1】在網(wǎng)頁(yè)中通過<script>標(biāo)記嵌入JavaScript代碼。注：(2)根據(jù)需要，<script>標(biāo)記可以放在<body>標(biāo)記中，也可以放在<head>標(biāo)記中，如果有多條<script>標(biāo)記，還可以分別放在<body>標(biāo)記和<head>標(biāo)記中。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.2使用JavaScript文件如果JavaScript代碼比較簡(jiǎn)短，把它放在HTML代碼中不會(huì)顯得凌亂。

但是，如果JavaScript代碼非常多，則會(huì)使得HTML代碼看起來非常凌亂，在以后修改和維護(hù)的過程中可能會(huì)遇到很多問題。

另外，也是為了有利于代碼的重用，可以把代碼寫到一個(gè)單獨(dú)的JavaScript文件（擴(kuò)展名是.js）中，然后在<script>標(biāo)記中通過src屬性引入外部的JavaScript文件，其作用與把代碼直接寫在頁(yè)面里是一樣的。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.2使用JavaScript文件【例1-2】通過使用外部JavaScript文件實(shí)現(xiàn)和例1-1相同的效果。其中JavaScript文件javascript1.js的內(nèi)容如下：document.write("<h1>歡迎學(xué)習(xí)JavaScript</h1>");注：(1)JavaScript文件的擴(kuò)展名必須是.js。

(2)JavaScript文件就是普通的文本文件。

(3)JavaScript文件中不需要使用<SCRIPT>標(biāo)記，直接寫JavaScript代碼就可以。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.3通過HTML事件處理器引入事件處理器的值是一個(gè)或一系列以分號(hào)隔開的JavaScript表達(dá)式、方法和函數(shù)調(diào)用，并用引號(hào)引起來。當(dāng)事件發(fā)生時(shí)，瀏覽器會(huì)執(zhí)行這些代碼。【例1-3】使用onmouseover和onmouseout屬性改變網(wǎng)頁(yè)上的圖片。程序運(yùn)行后，將鼠標(biāo)指向圖片，觸發(fā)事件處理器onmouseover，圖片變?yōu)椤澳瞎稀?，?dāng)鼠標(biāo)移出圖片時(shí)，觸發(fā)時(shí)間處理器onmouseout，圖片又變回“玫瑰花”，如圖1-2所示。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.3通過HTML事件處理器引入【例1-3】使用onmouseover和onmouseout屬性改變網(wǎng)頁(yè)上的圖片。注：(1)在事件處理程序中編寫JavaScript代碼的語(yǔ)法格式為：<標(biāo)記…事件="事件處理程序"[事件="事件處理程序"…]>此種方式適合事件處理器代碼較短的情況。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.3通過HTML事件處理器引入【例1-3】使用onmouseover和onmouseout屬性改變網(wǎng)頁(yè)上的圖片。注：(2)其他常用的事件處理器見表1-5。屬性事件響應(yīng)屬性事件響應(yīng)onload加載某個(gè)頁(yè)面或圖像onunload用戶退出頁(yè)面onblur元素失去焦點(diǎn)onfocus元素獲得焦點(diǎn)onchange用戶改變域的內(nèi)容onselect文本被選定onclick鼠標(biāo)點(diǎn)擊某個(gè)對(duì)象ondblclick鼠標(biāo)雙擊某個(gè)對(duì)象onkeydown按下鍵盤的某鍵onkeyup松開鍵盤的某鍵onkeypress按住鍵盤的某鍵onmousemove鼠標(biāo)被移動(dòng)onmousedown按下某個(gè)鼠標(biāo)按鍵onmouseup松開某個(gè)鼠標(biāo)按鍵onreset重置按鈕被點(diǎn)擊onsubmit提交按鈕被點(diǎn)擊onresize窗口或框架被調(diào)整尺寸

項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.3通過HTML事件處理器引入【例1-4】將例1-3改為使用按鈕的交互。程序運(yùn)行后，用鼠標(biāo)單擊“南瓜”按鈕，觸發(fā)該按鈕的onclick事件處理器，圖片變?yōu)椤澳瞎稀?，用鼠?biāo)單擊“花”按鈕，觸發(fā)該按鈕的onclick事件處理器，圖片又變回“花”，如圖1-3所示。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.3通過HTML事件處理器引入注：(1)按鈕是能嵌入網(wǎng)頁(yè)的HTML元素，使用input標(biāo)記生成，類型為button。按鈕用于在網(wǎng)頁(yè)中發(fā)起行動(dòng)，這是使用onclick事件處理器實(shí)現(xiàn)的。

(2)HTML標(biāo)記不區(qū)分大小寫，但是JavaScript是大小寫敏感的，夾在<Script>和</Script>標(biāo)記對(duì)中的JavaScript代碼必須確保所有字母大小寫的正確，否則將導(dǎo)致錯(cuò)誤的發(fā)生。(3)id屬性是元素關(guān)聯(lián)唯一性的標(biāo)示符，以便由網(wǎng)頁(yè)中的其他元素引用。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.3JavaScript程序的引入1.3.4注釋注釋也是JavaScript的語(yǔ)句，像其他所有語(yǔ)言一樣，JavaScript的注釋在運(yùn)行時(shí)也是被忽略的。注釋只給程序員提供方便理解程序的消息。

JavaScript注釋有兩種：?jiǎn)涡凶⑨尯投嘈凶⑨?。單行注釋用雙反斜杠“//”表示。而多行注釋是用“/*”和“*/”括起來的一行到多行文字。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.4

JavaScript的輸入與輸出輸入與輸出是程序設(shè)計(jì)中的重要環(huán)節(jié)。沒有輸出操作的程序不會(huì)有什么實(shí)用價(jià)值，而沒有輸入的程序則缺乏靈活性。

除了例1-1中使用document.write進(jìn)行輸出的方法外，JavaScript還有兩類實(shí)現(xiàn)信息輸入與輸出的方法，一類是使用對(duì)話框，一類是使用Document對(duì)象及其子對(duì)象的方法和屬性。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.4

JavaScript的輸入與輸出1.4.1使用對(duì)話框的輸入與輸出

Window對(duì)象的alert()、confirm()和prompt()方法可以通過簡(jiǎn)單的對(duì)話框與用戶進(jìn)行交互。

(1)alert()方法用于顯示帶有一條指定消息和一個(gè)“確定”按鈕的警告框。其格式為：alert(message)其中，message表示彈出對(duì)話框中顯示的純文本（而非HTML文本）內(nèi)容。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.4

JavaScript的輸入與輸出1.4.1使用對(duì)話框的輸入與輸出

Window對(duì)象的alert()、confirm()和prompt()方法可以通過簡(jiǎn)單的對(duì)話框與用戶進(jìn)行交互。

(2)confirm()方法用于顯示一個(gè)帶有指定消息和“確定”及“取消”按鈕的對(duì)話框。其格式為：confirm(message)其中message同上。如果用戶點(diǎn)擊“確定”按鈕，則confirm()返回true。如果點(diǎn)擊“取消”按鈕，則confirm()返回false。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.4

JavaScript的輸入與輸出1.4.1使用對(duì)話框的輸入與輸出

Window對(duì)象的alert()、confirm()和prompt()方法可以通過簡(jiǎn)單的對(duì)話框與用戶進(jìn)行交互。

(3)prompt()方法用于顯示可提示用戶進(jìn)行輸入的對(duì)話框。其格式為：prompt(text,defaultText)其中text可選，是要在對(duì)話框中顯示的純文本（而不是HTML格式的文本）；defaultText可選，是默認(rèn)的輸入文本。如果用戶單擊提示框的“取消”按鈕，返回null。如果用戶單擊“確定”按鈕，則返回輸入字段當(dāng)前顯示的文本。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.4

JavaScript的輸入與輸出1.4.1使用對(duì)話框的輸入與輸出

Window對(duì)象的alert()、confirm()和prompt()方法可以通過簡(jiǎn)單的對(duì)話框與用戶進(jìn)行交互。在調(diào)用alert()、confirm()和prompt()方法時(shí)，將暫停對(duì)JavaScript代碼的執(zhí)行，在用戶作出響應(yīng)之前，不會(huì)執(zhí)行下一條語(yǔ)句。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.4

JavaScript的輸入與輸出1.4.1使用對(duì)話框的輸入與輸出【例1-5】通過對(duì)話框輸入與輸出。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.4

JavaScript的輸入與輸出1.4.2使用文本框的輸入與輸出為了進(jìn)一步提升網(wǎng)頁(yè)的交互性，可以使用文本框來輸入和輸出信息。

文本框是允許用戶在指定區(qū)域輸入信息的一種HTML元素。與按鈕元素相似，文本框也是input元素的一種具體類型。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.4

JavaScript的輸入與輸出1.4.2使用文本框的輸入與輸出【例1-6】通過文本框輸入與輸出。注：文本框也是能嵌入網(wǎng)頁(yè)的HTML元素，使用input標(biāo)記生成，類型為text。文本框用于在網(wǎng)頁(yè)中接受輸入數(shù)據(jù)，也可以用于輸出數(shù)據(jù)。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.4

JavaScript的輸入與輸出1.4.3使用innerHTML屬性的輸出有時(shí)候希望將輸出的內(nèi)容直接顯示在網(wǎng)頁(yè)上而不是通過文本框，可以使用一些HTML元素的innerHTML屬性。

JavaScript語(yǔ)句將文本賦給這些元素的innerHTML屬性之后，文本會(huì)插入那個(gè)元素并在網(wǎng)頁(yè)上顯示。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.4

JavaScript的輸入與輸出1.4.3使用innerHTML屬性的輸出【例1-7】使用innerHTML屬性的輸出。其中“確定”按鈕的事件處理器調(diào)用函數(shù)Myclick()，在<head></head>中插入如下JavaScript代碼：<scriptlanguage="JavaScript"type="text/javascript">

functionMyclick(){

str=w1.value+"先生，歡迎您參加JavaScript團(tuán)隊(duì)！";

document.getElementById("w2").innerHTML=str;

}</script>項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.5

JavaScript的基本數(shù)據(jù)類型在實(shí)現(xiàn)預(yù)定功能的程序代碼中，一般需定義變量來存儲(chǔ)數(shù)據(jù)（作為初始值、中間值、終值或函數(shù)參數(shù)等）。

變量包含多種類型，JavaScript常用的基本數(shù)據(jù)類型包括Number型、String型、Boolean型,分別對(duì)應(yīng)于不同的存儲(chǔ)空間匯總?cè)绫?-6所示：類型舉例簡(jiǎn)要說明

Number45,-34,32.13,3.7E-2數(shù)值型數(shù)據(jù)

String"name",'Tom'字符型數(shù)據(jù)，需加雙引號(hào)或單引號(hào)

Booleantrue,flase布爾型數(shù)據(jù)，不加引號(hào)，表示邏輯真或假項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.5

JavaScript的基本數(shù)據(jù)類型1.5.1數(shù)值型數(shù)值型（Number）數(shù)據(jù)包括整數(shù)型和浮點(diǎn)型，整數(shù)型數(shù)制可以使用十進(jìn)制、八進(jìn)制以及十六進(jìn)制標(biāo)識(shí)，而浮點(diǎn)型為包含小數(shù)點(diǎn)的實(shí)數(shù)，且可用科學(xué)計(jì)數(shù)法來表示。

一般來說，數(shù)值型數(shù)據(jù)為不在括號(hào)內(nèi)的數(shù)字，例如：8、6.3分別為整數(shù)8和浮點(diǎn)數(shù)6.3。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.5

JavaScript的基本數(shù)據(jù)類型1.5.2字符型字符型（String）數(shù)據(jù)又稱為文本型數(shù)據(jù)。

JavaScript不區(qū)分單個(gè)字符和字符串，任何字符或字符串都可以用雙引號(hào)或單引號(hào)引起來。

如果字符串本身含有雙引號(hào)，則應(yīng)使用單引號(hào)將字符串括起來；若字符串本身含有單引號(hào)，則應(yīng)使用雙引號(hào)將字符串引起來。

一般來說，在編寫腳本過程中，雙引號(hào)或單引號(hào)的選擇在整個(gè)JavaScript腳本代碼中應(yīng)盡量保持一致，以養(yǎng)成好的編程習(xí)慣。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.5

JavaScript的基本數(shù)據(jù)類型1.5.3布爾型布爾型（Boolean）數(shù)據(jù)取值為true或false，分別表示邏輯真和假，且任何時(shí)刻都只能使用兩種狀態(tài)中的一種，不能同時(shí)出現(xiàn)。值得注意的是，布爾型變量賦值時(shí)，不能在true或false外面加引號(hào)項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.5

JavaScript的基本數(shù)據(jù)類型1.5.4其他類型

JavaScript的基本數(shù)據(jù)類型還包括：Undefined型（未定義類型）、Null型（表示空值）和Function型（函數(shù)類型）。

JavaScript除了支持上述六種基本數(shù)據(jù)類型外，也支持組合類型，如數(shù)組Array和對(duì)象Object等。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量幾乎任何一種程序語(yǔ)言都會(huì)引入變量（variable），包括變量標(biāo)識(shí)符、變量申明和變量作用域等內(nèi)容。JavaScript腳本語(yǔ)言中也將涉及到變量，其主要作用是存取數(shù)據(jù)以及提供存放信息的容器。

在實(shí)際腳本開發(fā)過程中，變量為開發(fā)者與腳本程序交互的主要工具。下面分別介紹變量標(biāo)識(shí)符、變量申明和變量作用域等內(nèi)容。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.1變量的命名

JavaScript中變量的命名必須符合如下原則：

(1)變量名只能由字母、數(shù)字、“$”和下劃線組成，并且首字母必須為字母、“$”或下劃線。

(2)JavaScript語(yǔ)言對(duì)大小寫敏感，不同大小寫的變量名，如name、Name、NAME視為不同。

(3)不能使用關(guān)鍵詞和保留字作為變量名。這些關(guān)鍵詞和保留字是在JavaScript內(nèi)部使用的，不能作為變量的名稱。表1-7和表1-8分別為JavaScript中的關(guān)鍵詞與保留字。breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtry項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.1變量的命名

JavaScript中變量的命名必須符合如下原則：

(1)變量名只能由字母、數(shù)字、“$”和下劃線組成，并且首字母必須為字母、“$”或下劃線。

(2)JavaScript語(yǔ)言對(duì)大小寫敏感，不同大小寫的變量名，如name、Name、NAME視為不同。

(3)不能使用關(guān)鍵詞和保留字作為變量名。這些關(guān)鍵詞和保留字是在JavaScript內(nèi)部使用的，不能作為變量的名稱。表1-7和表1-8分別為JavaScript中的關(guān)鍵詞與保留字。abstractbooleanbytecharclassconst debuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile

項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.2變量的使用在JavaScript中，可以不聲明所使用的變量，但這不是好的編程方式，程序中應(yīng)該明確地聲明所需要使用的變量。如果存在需要使用而沒有聲明的變量，那么JavaScript會(huì)自動(dòng)將該變量聲明為全局變量。一般來說，為培養(yǎng)良好的編程習(xí)慣，同時(shí)為了使程序結(jié)構(gòu)更加清晰易懂，建議在使用變量前對(duì)變量進(jìn)行聲明。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.2變量的使用

(1)變量的聲明在JavaScript語(yǔ)言中，聲明變量的過程相當(dāng)簡(jiǎn)單，例如通過下面的代碼聲明名為age和name的變量：varage,name;注意：使用同一個(gè)var關(guān)鍵字定義多個(gè)變量的時(shí)候，不同變量要用逗號(hào)分隔，用分號(hào)表示變量聲明語(yǔ)句的結(jié)束。

變量賦值和變量聲明可以同時(shí)進(jìn)行，例如下面的代碼聲明變量的同時(shí)給變量賦初值：varage=35,name="tom";項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.2變量的使用

(2)變量的重復(fù)聲明在JavaScript中可以重復(fù)聲明同一個(gè)變量而不會(huì)產(chǎn)生任何語(yǔ)法鍺誤。

如果重復(fù)聲明語(yǔ)句中不帶有初始化的數(shù)據(jù)，那么重復(fù)的聲明不會(huì)對(duì)以前的代碼產(chǎn)生任何改變;

如果重復(fù)聲明語(yǔ)句中帶有初始化的數(shù)據(jù)，那么重復(fù)的聲明等同于對(duì)這個(gè)變量的賦值語(yǔ)句。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.2變量的使用【例1-8】變量的重復(fù)聲明。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.3局部變量和全局變量變量分為局部變量和全局變量。局部變量是指只能在一段程序中發(fā)揮作用的變量，而全局變量是指在整個(gè)JavaScript代碼中都可以發(fā)揮作用的變量。

通常，在函數(shù)之內(nèi)聲明的變量都是局部的，而在函數(shù)之外聲明的變量是全局性的。

局部變量和全局變量可以同名，也就是說，即便在函數(shù)體外聲明了一個(gè)變量，在函數(shù)體內(nèi)還可以再聲明一個(gè)同名的變量。不過在函數(shù)體內(nèi)部，局部變量的優(yōu)先級(jí)高于全局變量，即在函數(shù)體內(nèi)，那個(gè)同名的全局變量被忽略了。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.3局部變量和全局變量需要格外注意的是：專用于函數(shù)體內(nèi)部的變量一定要用var關(guān)鍵字聲明，否則該變量將被定義成全局變量，如果函數(shù)體外部有同名的變量，那么將有可能導(dǎo)致其數(shù)據(jù)被計(jì)劃之外的代碼所修改。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.4弱類型

JavaScript語(yǔ)言像其他程序語(yǔ)言一樣，其變量都有數(shù)據(jù)類型。高級(jí)程序語(yǔ)言如C++、Java等為強(qiáng)類型語(yǔ)言，而JavaScript腳本語(yǔ)言是弱類型語(yǔ)言

在變量聲明時(shí)不需顯式地指定其數(shù)據(jù)類型，變量的數(shù)據(jù)類型將根據(jù)變量的具體內(nèi)容推導(dǎo)出來，且根據(jù)變量?jī)?nèi)容的改變而自動(dòng)更改

而強(qiáng)類型語(yǔ)言在變量聲明時(shí)必須顯式地指定其數(shù)據(jù)類型。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.4弱類型變量聲明時(shí)不需顯式指定其數(shù)據(jù)類型既是JavaScript腳本語(yǔ)言的優(yōu)點(diǎn)也是缺點(diǎn)，優(yōu)點(diǎn)是編寫腳本代碼時(shí)不需要指明數(shù)據(jù)類型，使變量聲明過程簡(jiǎn)單明了，而且已經(jīng)定義數(shù)據(jù)類型的變量可以在表達(dá)式中自動(dòng)轉(zhuǎn)換數(shù)據(jù)類型；缺點(diǎn)就是有可能造成因微妙的拼寫不當(dāng)而引起致命的錯(cuò)誤。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.6

JavaScript的變量1.6.4弱類型因?yàn)镴avaScript中的變量是弱類型的，所以它們可以存放任何類型的數(shù)據(jù)，并且同一個(gè)變量在不同的位置可以被賦予不同類型的數(shù)據(jù)。

例如，可以聲明一個(gè)變量，初始化為數(shù)字類型，然后在程序的其他地方將字符串賦給它：varage=35;age

="test";項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.7會(huì)員注冊(cè)網(wǎng)頁(yè)的設(shè)計(jì)1.7.1會(huì)員注冊(cè)網(wǎng)頁(yè)的界面設(shè)計(jì)為了界面的整齊規(guī)范，使用表格來設(shè)計(jì)網(wǎng)頁(yè)的界面。表格為8行2列，左邊一列是輸入內(nèi)容的名稱信息，右邊一列則是用于輸入的各種表單子對(duì)象：文本框、密碼框、單選按鈕、復(fù)選框和下拉列表框。

(1)表格兩列的寬度在第一行的列標(biāo)記中給出：<tdwidth="130"align="right">用戶名：</td><tdwidth="200"><inputtype="text"id="t1"></td>其中左邊單元格的對(duì)齊方式為right，右邊單元格中文本框的id為t1，輸入的內(nèi)容將被t1獲取。項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.7會(huì)員注冊(cè)網(wǎng)頁(yè)的設(shè)計(jì)1.7.1會(huì)員注冊(cè)網(wǎng)頁(yè)的界面設(shè)計(jì)

(2)性別一欄，由于每個(gè)人的性別只能是一種，要么是男要么就是女，所以用單選按鈕“radio”來選擇。需要注意的是：在下面命名時(shí)必須一致，也即都是name="r1"。否則就可以同時(shí)選中，這與要求不符。<tdalign="right">性別：</td><td><inputtype="radio"name="r1"id="s1">男

<inputtype="radio"name="r1"id="s2">女</td>項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.7會(huì)員注冊(cè)網(wǎng)頁(yè)的設(shè)計(jì)1.7.1會(huì)員注冊(cè)網(wǎng)頁(yè)的界面設(shè)計(jì)

(3)確認(rèn)密碼一欄，當(dāng)光標(biāo)離開文本框時(shí)希望驗(yàn)證一下兩次輸入的內(nèi)容是否一樣，所以激活onblur事件處理函數(shù)check()。<tdalign="right">確認(rèn)密碼：</td><td><inputtype="password"id="t4"onblur="check()"></td>項(xiàng)目1：會(huì)員注冊(cè)網(wǎng)頁(yè)1.7會(huì)員注冊(cè)網(wǎng)頁(yè)的設(shè)計(jì)1.7.1會(huì)員注冊(cè)網(wǎng)頁(yè)的界面設(shè)計(jì)

(4)個(gè)人愛好一欄，每個(gè)人的愛好可能有多項(xiàng)，因此選用復(fù)選框“