第1章 網(wǎng)頁開發(fā)基礎(chǔ)

1、 第一章 網(wǎng)頁開發(fā)基礎(chǔ)HTML的常用標(biāo)記JavaScript的使用CSS選擇器和常用屬性傳智書城首頁和注冊頁面設(shè)計 掌握HTML+CSS+JavaScript的開發(fā)基礎(chǔ)13 熟悉CSS選擇器和常用屬性2熟悉HTML的常用標(biāo)記掌握熟悉熟悉學(xué)習(xí)目標(biāo) 1.11.1HTML技術(shù)1.21.2CSS技術(shù)1.31.3JavaScript基礎(chǔ)1.41.4階段案例：傳智書城注冊頁面設(shè)計點(diǎn)擊查看本小節(jié)知識架構(gòu)點(diǎn)擊查看本小節(jié)知識架構(gòu)點(diǎn)擊查看本小節(jié)知識架構(gòu)點(diǎn)擊查看本小節(jié)知識架構(gòu)目錄 返回目錄1.1 HTML技術(shù)技術(shù)1.1.11.1.21.1.31.1.41.1.51.1.61.1.71.1.8HTML簡介單標(biāo)記和雙標(biāo)

2、記文件控制與文本樣式標(biāo)記圖像標(biāo)記表格標(biāo)記表單標(biāo)記列表標(biāo)記和超鏈接標(biāo)記標(biāo)記知識架構(gòu) 返回目錄1.2.11.2.21.2.3簡介CSS樣式的引用方式CSS選擇器和常用屬性1.2 CSS技術(shù)技術(shù)知識架構(gòu) 返回目錄1.3.11.3.21.3.3DOM相關(guān)知識JavaScript概述JavaScript的使用1.3 JavaScript基礎(chǔ)基礎(chǔ)知識架構(gòu) 返回目錄【任務(wù)1-1】傳智書城首頁設(shè)計【任務(wù)1-2】傳智書城注冊頁面設(shè)計1.4 JavaScript基礎(chǔ)基礎(chǔ)知識架構(gòu) HTML是英文Hyper Text Markup Language的縮寫，中文譯為“超文本標(biāo)記語言”，其主要作用是通過HTML標(biāo)記對網(wǎng)頁

3、中的文本、圖片、聲音等內(nèi)容進(jìn)行描述。HTML網(wǎng)頁就是一個后綴名為“.html”或“.htm”的文件，它可以用記事本打開，所以簡單的html代碼可以在記事本中編寫。編寫完成后，將文件后綴名修改為“.html”即可生成一個HTML網(wǎng)頁。 在實(shí)際開發(fā)中，項(xiàng)目的靜態(tài)頁面通常由專門的網(wǎng)頁制作人員設(shè)計，開發(fā)人員只需了解頁面元素，能夠使用和修改頁面中的元素，并在項(xiàng)目運(yùn)行時能夠展示出相應(yīng)的后臺數(shù)據(jù)即可。網(wǎng)頁制作人員通常會使用一些專業(yè)軟件來創(chuàng)建HTML頁面，由于本教材中，HTML技術(shù)只作為JavaWeb學(xué)習(xí)的輔助技術(shù)，所以這里不會詳細(xì)介紹如何使用專業(yè)工具制作網(wǎng)頁，只需要讀者了解頁面元素的構(gòu)成，會調(diào)試基本的頁面效

4、果即可。HTML簡介1.1 HTML技術(shù) 了解了什么是HTML后，接下來通過一個基本的HTML文檔來講解其內(nèi)部的構(gòu)成，請查看教材文件1-1。 案例代碼1.1 HTML技術(shù) 標(biāo)記標(biāo)記 標(biāo)記位于文檔的最前面，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種 HTML 標(biāo)準(zhǔn)規(guī)范，如文件1-1中使用的是HTML 4.01版本。網(wǎng)頁必需在開頭處使用標(biāo)記為所有的HTML文檔指定HTML版本和類型，只有這樣瀏覽器才能將該網(wǎng)頁作為有效的HTML文檔，并按指定的文檔類型進(jìn)行解析。標(biāo)記和瀏覽器的兼容性相關(guān)，刪除后，會把如何展示HTML頁面的權(quán)利交給瀏覽器，這時，有多少種瀏覽器，頁面就有可能有多少種顯示效果，在實(shí)際開發(fā)中，這是不被

5、允許的。標(biāo)記標(biāo)記 標(biāo)記位于 標(biāo)記之后，也稱為根標(biāo)記，用于告知瀏覽器其自身是一個 HTML 文檔， 標(biāo)記標(biāo)志著HTML文檔的開始，標(biāo)記標(biāo)志著HTML文檔的結(jié)束，在他們之間的是文檔的頭部和主體內(nèi)容。1.1 HTML技術(shù) 標(biāo)記標(biāo)記 標(biāo)記用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)記，緊跟在標(biāo)記之后，主要用來封裝其他位于文檔頭部的標(biāo)記，例如、及等，其中標(biāo)記用來描述文檔的標(biāo)題，標(biāo)記可提供有關(guān)頁面的元信息， 標(biāo)記用于定義文檔與外部資源的關(guān)系，其最常見的用途是鏈接樣式表，標(biāo)記用于為 HTML 文檔定義樣式信息。一個HTML文檔只能含有一對標(biāo)記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示在頁面中。標(biāo)記標(biāo)

6、記 標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于標(biāo)記內(nèi)，標(biāo)記中的信息才是最終展示給用戶看的。一個HTML文檔只能含有一對標(biāo)記，且標(biāo)記必須在標(biāo)記內(nèi)，位于頭部標(biāo)記之后，與標(biāo)記是并列關(guān)系。1.1 HTML技術(shù) 了解了文件1-1中的HTML標(biāo)記后，接下來講解一下HTML文件的創(chuàng)建以及運(yùn)行，請查看教材1.1.1小節(jié)。 案例代碼要資源？搶紅包？找播妞！QQ、微信：2086958271.1 HTML技術(shù) 不同標(biāo)記描述的內(nèi)容在瀏覽器中的顯示效果是不一樣的。頁面中的信息，必須放在相應(yīng)的HTML標(biāo)記中，才能被瀏覽器正確解析。大部分標(biāo)記都是成對出現(xiàn)

7、的，如頭部標(biāo)記、主體標(biāo)記，然而也有單個出現(xiàn)的標(biāo)記，如水平線標(biāo)記。通常將HTML標(biāo)記分為兩大類，分別是“單標(biāo)記”與“雙標(biāo)記”，對這兩個標(biāo)記的具體介紹如下：1單標(biāo)記單標(biāo)記 單標(biāo)記也稱空標(biāo)記，是指用一個標(biāo)記符號即可完整地描述某個功能的標(biāo)記。其基本語法格式如下：單標(biāo)記和雙標(biāo)記1.1 HTML技術(shù) 例如標(biāo)記就是單標(biāo)記，該標(biāo)記用于定義一條水平線。需要注意的是，在標(biāo)記名與“/”之間有一個空格，雖然在顯示效果上有沒有空格都一樣，但是按照規(guī)范的要求，建議加上空格。2雙雙標(biāo)記標(biāo)記 雙標(biāo)記也稱體標(biāo)記，是指由開始和結(jié)束兩個標(biāo)記符組成的標(biāo)記。其基本語法格式如下： 在上述的語法中，表示該標(biāo)記的作用開始，一般稱為開始標(biāo)記（

8、start tag），表示該標(biāo)記的作用結(jié)束，一般稱為結(jié)束標(biāo)記（end tag），和開始標(biāo)記相比，結(jié)束標(biāo)記只是在前面加了一個關(guān)閉符“/”。例如文件1-1中的、等都是雙標(biāo)記。1.1 HTML技術(shù) 多學(xué)一招：為什么要有單標(biāo)記？多學(xué)一招：為什么要有單標(biāo)記？ HTML標(biāo)記的作用原理就是選擇網(wǎng)頁內(nèi)容，從而進(jìn)行描述，也就是說需要描述誰，就選擇誰，所以才會有雙標(biāo)記的出現(xiàn)，用于定義標(biāo)記作用的開始與結(jié)束。而單標(biāo)記本身就可以描述一個功能，不需要選擇誰，例如水平線標(biāo)記,按照雙標(biāo)記的語法，它應(yīng)該寫成“”，但是水平線標(biāo)記不需要選擇誰，它本身就代表一條水平線，此時寫成雙標(biāo)記就顯得有點(diǎn)多余，但是又不能沒有結(jié)束符號。所以單標(biāo)記

9、的語法格式就是在標(biāo)記名稱后面加一個關(guān)閉符，即為。 多學(xué)一招 1段落標(biāo)記段落標(biāo)記和換行標(biāo)記和換行標(biāo)記 為了使網(wǎng)頁中的文字有條理地顯示出來，HTML提供了段落標(biāo)記，如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)記。2文本樣式標(biāo)記文本樣式標(biāo)記 在HTML中，使用標(biāo)記來控制網(wǎng)頁中文本的樣式，如字體、字號和顏色。其基本語法格式如下： 接下來通過案例來演示、和三個種標(biāo)記的使用，請查看教材文件1-2和1-3。 案例代碼1.1 HTML技術(shù) 要想在HTML網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)記。其基本的語法格式如下： 在上述的語法中，src屬性用于指定圖像文件的路徑，該屬性是標(biāo)記的必需屬性。要想在網(wǎng)頁中靈活地應(yīng)用標(biāo)

10、記，只使用src屬性是不行的，還需要其他屬性的配合。圖像標(biāo)記 接下來通過一個案例來演示標(biāo)記的用法，請查看教材文件1-4。 案例代碼1.1 HTML技術(shù) 在制作網(wǎng)頁時，為了使網(wǎng)頁中的數(shù)據(jù)能夠有條理地顯示，可以使用表格對網(wǎng)頁進(jìn)行規(guī)劃。在Word文檔中，要創(chuàng)建表格只需要插入表格，而在HTML網(wǎng)頁中要想創(chuàng)建表格，需要使用相關(guān)的表格標(biāo)記才能創(chuàng)建表格。 在HTML網(wǎng)頁中創(chuàng)建表格的基本語法格式如下所示： 在上述的語法中，包含三對HTML標(biāo)記，分別為、，它們是創(chuàng)建表格的基本標(biāo)記，缺一不可。用于定義一個表格，用于定義表格中的行，必須嵌套在標(biāo)記中，用于定義表格中的單元格，也可稱為表格中的列，必須嵌套 在標(biāo)記中。表

11、格標(biāo)記1.1 HTML技術(shù) 接下來，通過一個案例來演示標(biāo)記的使用，請查看教材文件1-5。 案例代碼1.1 HTML技術(shù) 學(xué)習(xí)表單標(biāo)記之前，首先需要理解表單的概念。簡單的說，表單就是在網(wǎng)頁上用于輸入信息的區(qū)域，它的主要功能是收集用戶信息收集用戶信息，并將這些信息傳遞給后臺服務(wù)器。其實(shí)表單在互聯(lián)網(wǎng)上隨處可見，例如注冊頁面中的用戶名和密碼輸入、性別選擇、提交按鈕等都是用表單中的相關(guān)標(biāo)記定義的。 表單主要由3部分構(gòu)成，分別為表單控件、提示信息和表單域表單控件、提示信息和表單域，詳細(xì)介紹如下所示： 表單控件：包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框提交按鈕等。 提示信息：一個表單中通

12、常還需要包含一些說明性的文字即表單控件前的文字說明，用于提示用戶進(jìn)行填寫和操作。 表單域：它相當(dāng)于一個容器，用來容納所有的表單控件和提示信息。表單標(biāo)記1.1 HTML技術(shù) 1創(chuàng)建表單創(chuàng)建表單 在HTML中，標(biāo)記用于定義表單域，即創(chuàng)建一個表單，其基本語法如下所示： 在上述的語法中，action、method、name為標(biāo)記的常用屬性，action屬性用于指定表單提交的地址，例如action=login.jsp表示表單數(shù)據(jù)會提交到名為login.jsp的頁面去處理。method屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為GET或POST，其中，GET為默認(rèn)值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中

13、，保密性差且有數(shù)據(jù)量限制，而使用POST提交方式不但保密性好，還可以提交大量的數(shù)據(jù)，所以開發(fā)中通常使用POST方式提交表單。1.1 HTML技術(shù) 2表單控件表單控件 瀏覽網(wǎng)頁時經(jīng)常會看到單行文本輸入框單行文本輸入框、單選按鈕單選按鈕、復(fù)選框復(fù)選框、重置按鈕重置按鈕等，使用控件可以在表單中定義這些元素，其基本語法格式如下： 在上述語法中type屬性為其最基本的屬性，取值有多種，用來指定不同的控件類型。除type屬性外，控件還可以定義很多其他屬性，其中，比較常用的如id、name、value、size，它們分別用來指定input控件的ID值、名稱、控件中的默認(rèn)值和控件在頁面中的顯示寬度。 接下來通

14、過一個案例來演示控件的使用，請查看教材文件8-1。 案例代碼1.1 HTML技術(shù) 多學(xué)一招多學(xué)一招：HTML的多行文本標(biāo)記的多行文本標(biāo)記 通過前面的學(xué)習(xí)可知，使用標(biāo)記可以定義單行文本輸入框。但是，如果需要輸入大量的文本信息，單行文本框?qū)o法顯示全部的輸入信息，為此HTML語言提供了標(biāo)記。通過此標(biāo)記可以創(chuàng)建多行文本框，其基本語法格式如下。 接下來通過一個案例來演示標(biāo)記的使用，請查看教材文件8-1。 案例代碼 多學(xué)一招 1無序列表無序列表 列表標(biāo)記分為有序列表有序列表和無無序列序列表表，由于在HTML中無序列表較為常用，所以下面針對無序列表進(jìn)行詳細(xì)的講解。為了使網(wǎng)頁更易讀，經(jīng)常將網(wǎng)頁信息以列表的形

15、式呈現(xiàn)，例如淘寶商城首頁的商品分類就是以列表的形式呈現(xiàn)的。無序列表的各個列表項(xiàng)之間沒有順序級別之分，通常是并列的。定義無須列表的基本語法格式如下所示。 在上述的語法中，標(biāo)記用于定義無序列表，標(biāo)記嵌套在標(biāo)記中，用于描述具體的列表項(xiàng)，每對中至少應(yīng)包含一對 。列表標(biāo)記和超鏈接標(biāo)記1.1 HTML技術(shù) 2超鏈接標(biāo)記超鏈接標(biāo)記 一個網(wǎng)站通常由多個頁面構(gòu)成，進(jìn)入網(wǎng)站時首先看到的是其首頁面，如果想從首頁面跳轉(zhuǎn)到子頁面，就需要在首頁面的相應(yīng)位置添加超鏈接超鏈接。在HTML中創(chuàng)建超鏈接非常簡單，只需用標(biāo)記環(huán)繞需要被鏈接的對象即可。其基本語法格式如下所示。 在上述語法中，標(biāo)記是一個行內(nèi)標(biāo)記行內(nèi)標(biāo)記，用于定義超鏈接

16、，href屬性用于指定鏈接指向的頁面的URL，當(dāng)在標(biāo)記中使用href屬性時，該標(biāo)記就具有了超鏈接的功能；target屬性用于指定頁面的打開方式，其取值有_self和_blank，其中_self為默認(rèn)值，意為在原窗口打開，_blank為在新窗口打開。接下來通過一個案例來演示標(biāo)記的使用。1.1 HTML技術(shù) 接下來通過一個案例來演示標(biāo)記和標(biāo)記的使用，請查看教材文件1-8和1-9。 案例代碼1.1 HTML技術(shù) div是英文DIVision的縮寫，意為“分割、區(qū)域”。標(biāo)記簡單而言就是一個區(qū)塊容器標(biāo)記區(qū)塊容器標(biāo)記，可以將網(wǎng)頁分割為獨(dú)立的、不同的部分，以實(shí)現(xiàn)網(wǎng)頁的規(guī)劃和網(wǎng)頁的規(guī)劃和布局布局。在HTML頁

17、面中，它以開頭，并以結(jié)尾，在與之間可以容納段落、標(biāo)題、圖像段落、標(biāo)題、圖像等各種網(wǎng)頁元素，也就是說大多數(shù)HTML標(biāo)記都可以嵌套在標(biāo)記中，并且還可以嵌套多層。在實(shí)際開發(fā)中標(biāo)記常常與CSS技術(shù)搭配使用，在下一小節(jié)講解CSS技術(shù)的過程中會對標(biāo)記的使用進(jìn)行舉例，這里不多贅述。標(biāo)記1.1 HTML技術(shù) CSS 是 Cascading Style Sheet 的縮寫，譯作“層疊樣式表單層疊樣式表單”，是用于(增強(qiáng))控制網(wǎng)頁樣式并允許將樣式信息樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。在實(shí)際開發(fā)中，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布

18、局等外觀顯示樣式。 CSS定義的規(guī)則具體如下： 在上述的樣式規(guī)則中，選擇器用于指定CSS樣式作用的HTML對象，花括號內(nèi)的屬性是對該對象設(shè)置的具體樣式。其中，屬性和屬性值以“鍵值對”的形式出現(xiàn)，例如字體大小、文本顏色等。屬性和屬性值之間用“:”（英文冒號）連接，多個“鍵值對”之間用 “;”（英文分號）進(jìn)行分隔。簡介1.1 HTML技術(shù) 接下來通過CSS樣式對標(biāo)記進(jìn)行設(shè)置，具體示例如下： 上面的代碼就是一個完整的CSS樣式。其中，div為選擇器，表示CSS樣式作用的HTML對象，border、width和height為CSS屬性，分別表示邊框、寬度和高度，其中border屬性有3個值“1px s

19、olid red;”分別表示該邊框?yàn)?像素、實(shí)心邊框線、紅色。 在CSS中，通常使用像素單位px作為計量文本、邊框等元素的標(biāo)準(zhǔn)量，px 是相對于顯示器屏幕分辨率而言的。而百分比（%）是相對于父對象而言的，例如一個元素呈現(xiàn)的寬度是400px，子元素設(shè)置為50%，那么子元素所呈現(xiàn)的寬度為200px。1.1 HTML技術(shù) 在CSS中顏色的取值方式有3種： 預(yù)定義的顏色值：如red、green、blue等。 十六進(jìn)制：如#FF0000、#FF6600、#29D794等。實(shí)際工作中，十六進(jìn)制是最常用的定義顏色的方式。 RGB代碼：如紅色可以用rgb(255,0,0)或rgb(100%,0%,0%)來表示

20、。如果使用RGB代碼百分比方式取顏色值時，即使值為0，也不能省略百分號，必須寫為0%。1.2 CSS技術(shù) 要想使用CSS修飾網(wǎng)頁，就需要在HTML文檔中引入CSS。引入CSS的方式有4種，分別為鏈入式、行內(nèi)式（也稱為內(nèi)聯(lián)樣式）、內(nèi)嵌式和導(dǎo)入式。下面對開發(fā)中常用的內(nèi)嵌式和鏈入式這2種引入方式進(jìn)行講解，具體如下：1內(nèi)嵌式內(nèi)嵌式 內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的頭部頭部標(biāo)記中，并用標(biāo)記定義，其基本語法格式如下：CSS樣式的引用方式1.2 CSS技術(shù) 在上述語法中，標(biāo)記一般位于標(biāo)記中的標(biāo)記之后，因?yàn)闉g覽器是從上到下解析代碼的，把CSS代碼放在頭部便于提前被加載和解析，以避免網(wǎng)頁內(nèi)容加載后沒有

21、樣式修飾帶來的問題。同時，必須設(shè)置type的屬性值為“text/css”，這樣瀏覽器才知道標(biāo)記包含的是CSS代碼。 接下來通過一個案例來學(xué)習(xí)如何在HTML文件中使用內(nèi)嵌式加入CSS，請查看教材文件1-10。 案例代碼1.2 CSS技術(shù) 2鏈入鏈入式式 鏈入式是將所有的樣式放在一個或多個以.css為擴(kuò)展名的外部樣式表文件中，通過標(biāo)記將外部樣式表文件鏈接到HTML文件中，其基本語法格式如下： 在上面語法中，標(biāo)記需要放在頭部標(biāo)記中，并且必須指定標(biāo)記的三個屬性，具體如下： href：定義所鏈接外部樣式表文件的地址，可以是相對路徑，也可以是絕對路徑。 type：定義所鏈接文檔的類型，這里需要指定為“te

22、xt/css”，表示鏈接的外部文件為CSS。 rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。1.2 CSS技術(shù) 接下來通過修改文件1-10 來演示鏈入式CSS的引用方式，請查看教材1.2.2小計。 案例代碼1.2 CSS技術(shù) 要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一樣式任務(wù)的部分被稱為選擇選擇器器。1標(biāo)記選擇器標(biāo)記選擇器 標(biāo)記選擇器標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器，按標(biāo)記名稱分類，為頁面中某一類標(biāo)記指定統(tǒng)一的樣式。其基本語法格式如下： 上述語法中，所有的HTML標(biāo)記都

23、可以作為標(biāo)記選擇器的標(biāo)記名，例如標(biāo)記、標(biāo)記、標(biāo)記等。用標(biāo)記選擇器定義的樣式對頁面中該類型的所有標(biāo)記都有效，這是它的優(yōu)點(diǎn)，但同時這也是其缺點(diǎn)，因?yàn)檫@樣不能設(shè)計差異化樣式。CSS選擇器和常用屬性1.2 CSS技術(shù) 2類選擇器類選擇器 類選擇器使用“.”（英文點(diǎn)號）進(jìn)行標(biāo)識，后面緊跟類名，語法格式如下： 上述語法中，類名即為HTML頁面中元素的class屬性值，大多數(shù)大多數(shù)HTML元素元素都可以定義class屬性。類選擇器最大的優(yōu)勢是可以為元素對象定義單獨(dú)或相同的樣式。3id選擇器選擇器 id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名，其基本語法格式如下： 上述語法中，id名即為HTML頁面中元素的i

24、d屬性值，大多數(shù)大多數(shù)HTML元素元素都可以定義id屬性，元素的id值是唯一的，只能對應(yīng)于文檔中某一個具體的元素。1.2 CSS技術(shù) 4通配符選擇器通配符選擇器 通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下： 例如下面使用通配符選擇器定義的樣式，該樣式能夠清除所有HTML標(biāo)記的默認(rèn)邊距。如下所示： 在實(shí)際網(wǎng)頁開發(fā)中，不建議使用通配符選擇器，因?yàn)樗O(shè)置的樣式對所有的HTML標(biāo)記都生效，這是其優(yōu)點(diǎn)也是其缺點(diǎn)，因?yàn)檫@樣不能設(shè)計差異化樣式。1.2 CSS技術(shù) 了解了幾種選擇器的語法結(jié)構(gòu)后，接下來通過一個案例來學(xué)習(xí)這幾種選擇器的使用，請查看教材文

25、件1-11。 案例代碼1.2 CSS技術(shù) 為了使讀者更方便的了解網(wǎng)頁中各種標(biāo)記的樣式，下面介紹一些常用的CSS屬性。如表所示：1.2 CSS技術(shù) DOM是Document Object Model（文檔對象模型）的簡稱，是W3C組織推薦的處理可擴(kuò)展標(biāo)志語言的標(biāo)準(zhǔn)編程接口，它可以以一種獨(dú)立于平臺和語言的方式訪問和修改一個文檔的內(nèi)容和結(jié)構(gòu)。W3C中將DOM標(biāo)準(zhǔn)分為3個不同的部分：核心核心DOM、XML DOM和和HTML DOM，其中核心 DOM 是針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型，XML DOM是針對XML文檔的標(biāo)準(zhǔn)模型，而HTML DOM是針對HTML文檔的標(biāo)準(zhǔn)模型。由于本章中主要講解的是網(wǎng)頁開發(fā)

26、的基礎(chǔ)知識，而主要涉及的DOM內(nèi)容就是HTML DOM，所以本節(jié)將主要介紹HTML DOM的知識。DOM相關(guān)知識1.3 JavaScript基礎(chǔ) HTML DOM模型被構(gòu)造為對象的樹，該樹的根節(jié)點(diǎn)是文檔（Document）對象，該對象有一個documentElement的屬性引用，表示文檔根元素的Element對象。HTML文檔中表示文檔根元素的Element對象是元素，和元素可以看做樹的枝干。 HTML DOM樹的結(jié)構(gòu)如右圖所示。 在圖中，每個元素被稱為一個節(jié)點(diǎn)，直接位于一個節(jié)點(diǎn)之下的節(jié)點(diǎn)被稱為該節(jié)點(diǎn)的子節(jié)點(diǎn)（childNode），直接位于一個節(jié)點(diǎn)之上的節(jié)點(diǎn)被稱為該節(jié)點(diǎn)的父節(jié)點(diǎn)（parent

27、Node），具有相同父節(jié)點(diǎn)的兩個節(jié)點(diǎn)稱為兄弟節(jié)點(diǎn)（siblingNode）。1.3 JavaScript基礎(chǔ) 1節(jié)點(diǎn)的訪問節(jié)點(diǎn)的訪問 在DOM中，HTML文檔的各個節(jié)點(diǎn)被視為各種類型的Node對象。如果想要通過某個節(jié)點(diǎn)的子節(jié)點(diǎn)找到該元素，其語法如下所示： Node對象的常用屬性如表所示。2獲取文檔中的指定元素獲取文檔中的指定元素 通過遍歷節(jié)點(diǎn)的訪問可以找到文檔中指定的元素，但是這種方法有些麻煩，document對象中提供了直接搜索文檔中指定元素的方法，具體如下。1.3 JavaScript基礎(chǔ) （1）通過元素的）通過元素的id屬性獲取元素屬性獲取元素 Document的getElementBy

28、Id()方法可以通過元素的id屬性獲取元素。例如，獲取id屬性值為userId節(jié)點(diǎn)的代碼如下所示：（2）通過元素的）通過元素的name屬性獲取元素屬性獲取元素 Document的getElementsByName()方法可以通過元素的name屬性獲取元素。由于多個元素可能有相同的name值，所以該方法返回值為一個數(shù)組，而不是一個元素。如果想獲得唯一的元素，可以通過獲取返回數(shù)組中下標(biāo)值為0的元素進(jìn)行獲取。例如，獲取name值為userName節(jié)點(diǎn)的代碼如下所示：1.3 JavaScript基礎(chǔ) JavaScript是Web中一種功能強(qiáng)大的腳本語言腳本語言，被設(shè)計為向 HTML 頁面增加交互性，常

29、用來為網(wǎng)頁添加各式各樣的動態(tài)功能動態(tài)功能，它不需要進(jìn)行編譯，直接嵌入在HTML頁面中，就可以把靜態(tài)的頁面轉(zhuǎn)變成支持用戶交互并響應(yīng)事件的動態(tài)頁面。1JavaScript的引入的引入 在HTML文檔中，較為常用的引入JavaScript的方式有兩種，一種是在HTML文檔中直接嵌入JavaScript腳本，稱為內(nèi)嵌式內(nèi)嵌式；另一種是鏈接外部JavaScript腳本文件，稱為外鏈?zhǔn)酵怄準(zhǔn)?。具體介紹如下： JavaScript概述1.3 JavaScript基礎(chǔ) （1）內(nèi)嵌式）內(nèi)嵌式 在HTML文檔中，通過標(biāo)簽及其相關(guān)屬性可以引入JavaScript代碼。當(dāng)瀏覽器讀取到標(biāo)簽時，就會解釋執(zhí)行其中的腳本。J

30、avaScript的內(nèi)嵌式的使用方式如下： 在上述代碼中，type屬性用來指定HTML文檔引用的腳本語言類型，當(dāng)type屬性的值為text/javascript時，表示元素中包含的是JavaScript腳本。 需要注意的是，在老舊的瀏覽器中，引入javascript腳本時type=” text/javascript”是必須編寫的，但現(xiàn)在已經(jīng)可以不使用了，因?yàn)镴avaScript是所有現(xiàn)代瀏覽器以及HTML5中的默認(rèn)腳本語言。1.3 JavaScript基礎(chǔ) JavaScript中有三種彈出對話框的方式，分別是使用alert()、confirm()以及以及prompt()。如果不想使用彈出對話框

31、，也可使用document.write()方法直接將信息顯示在頁面上。 alert() 方法用于顯示帶有一條指定消息和一個 OK 按鈕的警告框。 confirm() 方法用于顯示一個帶有指定消息和 OK 及取消按鈕的對話框。 prompt() 方法用于顯示可提示用戶進(jìn)行輸入的對話框。 了解了一些簡單的JavaScript知識后，接下來，通過一個具體的案例來演示如何在HTML文檔中使用內(nèi)嵌式JavaScript，請查看教材文件1-12。 案例代碼1.3 JavaScript基礎(chǔ) （2）外鏈?zhǔn)剑┩怄準(zhǔn)?當(dāng)腳本代碼比較復(fù)雜或者同一段代碼需要被多個網(wǎng)頁文件使用時，可以將這些腳本代碼放置在一個擴(kuò)展名為.

32、js的文件中，然后通過外鏈?zhǔn)揭朐搄s文件。在Web頁面中使用外鏈?zhǔn)揭隞avaScript文件的方式如下： 接下來，通過修改文件1-12，來演示如何在HTML文件中通過外鏈?zhǔn)揭隞avaScript，請查看教材文件1-13。 案例代碼1.3 JavaScript基礎(chǔ) 2數(shù)據(jù)類型數(shù)據(jù)類型 JavaScript中的幾種常見數(shù)據(jù)類型如表所示。3變量變量 在JavaScript中，使用var命令聲明變量，由于JavaScript是一種弱類型語言，所以在聲明變量時，不需要指定變量的類型，變量的類型將根據(jù)變量的賦值來確定，其語法格式如下所示。1.3 JavaScript基礎(chǔ) 變量的命名必須遵循命名規(guī)則，

33、變量名可以由字母、下劃線（_）、美元符號（$），甚至中文組成，但中文命名的方式不建議使用，中間可以是數(shù)字、字母或下劃線，但是不能有空格、加號、減號等符號，不能使用JavaScript的關(guān)鍵字。JavaScript中的關(guān)鍵字如下所示： 需要注意的是，以上關(guān)鍵字同樣不可以用作函數(shù)名、對象名及自定義的方法名等。1.3 JavaScript基礎(chǔ) 4運(yùn)算符運(yùn)算符 運(yùn)算符是程序執(zhí)行特定算術(shù)或操作的符號，用于執(zhí)行程序代碼運(yùn)算。JavaScript中的運(yùn)算符主要包括算術(shù)運(yùn)算符、比較運(yùn)算符、賦值運(yùn)算符、邏輯運(yùn)算符和條算術(shù)運(yùn)算符、比較運(yùn)算符、賦值運(yùn)算符、邏輯運(yùn)算符和條件運(yùn)算符件運(yùn)算符5種，具體介紹如下。（1）算術(shù)

34、運(yùn)算符）算術(shù)運(yùn)算符 算術(shù)運(yùn)算符用于連接運(yùn)算表達(dá)式，主要包括加（+）、減（-）、乘（*）、除（/）、取模（%）、自增（+）、自減（-）等運(yùn)算符，如表所示。1.3 JavaScript基礎(chǔ) （2）比較運(yùn)算符）比較運(yùn)算符 比較運(yùn)算符在邏輯語句中使用，用于判斷變量或值是否相等。返回布爾類型值true或false，常用的比較運(yùn)算符如表所示。1.3 JavaScript基礎(chǔ) （3）邏輯運(yùn)算符）邏輯運(yùn)算符 邏輯運(yùn)算符是根據(jù)表達(dá)式的值來返回真值或假值，常用的邏輯運(yùn)算符如表所示。1.3 JavaScript基礎(chǔ) （4）賦值運(yùn)算符）賦值運(yùn)算符 最基本的賦值運(yùn)算符是等于號“=”，用于對變量進(jìn)行賦值。其他運(yùn)算符可以和

35、賦值運(yùn)算符聯(lián)合使用，構(gòu)成組合賦值運(yùn)算符。如表所示。1.3 JavaScript基礎(chǔ) （5）條件運(yùn)算符）條件運(yùn)算符 條件運(yùn)算符是JavaScript中的一種特殊的三目運(yùn)算符，它與Java中的三目運(yùn)算符的使用類似，其語法格式如下。 如果操作數(shù)的值為true，則整個表達(dá)式的結(jié)果為“結(jié)果1”，否則為“結(jié)果2”。其示例代碼如下所示。 在上述js代碼中，由于聲明的變量a和b的值相同，所以通過使用比較運(yùn)算符“=”的比較結(jié)果為true，此時整個alert()語句的結(jié)果就為true；如果變量a與b的值不相等時，則整個語句的執(zhí)行結(jié)果為false。1.3 JavaScript基礎(chǔ) 5條件語句條件語句if 所謂條件語

36、句條件語句就是對語句中不同條件的值進(jìn)行判斷，進(jìn)而根據(jù)不同的條件執(zhí)行不同的語句。條件語句中最常用的是if判斷語句，它的使用與Java語言中的if判斷語句相似，是通過判斷條件表達(dá)式的值為true或者false，來確定是否執(zhí)行某一條語句。可將if語句分為單向判斷語句、雙向判斷語句和多向判斷語句，具體講解如下。（1）單向判斷語句）單向判斷語句 單向判斷語句是結(jié)構(gòu)最簡單的條件語句，如果程序中存在絕對不執(zhí)行某些指令的情況，就可以使用單向判斷語句，其語法格式如下：1.3 JavaScript基礎(chǔ) 在上面的語法結(jié)構(gòu)中，if可以理解為“如果”，小括號“()”內(nèi)用于指定if語句中的執(zhí)行條件，大括號“”內(nèi)用于指定滿

37、足執(zhí)行條件后需要執(zhí)行的語句，當(dāng)執(zhí)行語句只有一行時，也可以不寫。（2）雙向判斷語句）雙向判斷語句 雙向判斷語句是if條件語句的基礎(chǔ)形式，其基本語法格式如下： 雙向判斷語句的語法格式和單向判斷語句類似，只是在其基礎(chǔ)上增加了一個else從句。表示如果條件成立則執(zhí)行“語句1”，否則，則執(zhí)行“語句2”。1.3 JavaScript基礎(chǔ) （3）多向判斷語句）多向判斷語句 多向判斷語句是根據(jù)表達(dá)式的結(jié)果判斷一個條件，然后根據(jù)返回值做進(jìn)一步的判斷，其基本語法格式如下： 在多向判斷語句的語法中，通過else if語句可以對多個條件進(jìn)行判斷，并且根據(jù)判斷的結(jié)果執(zhí)行相關(guān)的語句。1.3 JavaScript基礎(chǔ) 1函數(shù)的定義及調(diào)用函數(shù)的定義及調(diào)用 在JavaScript中，定義函數(shù)是通過function語句實(shí)現(xiàn)的。其語法格式如下： 在上述語法中，functionName是必選項(xiàng)，用于指定函數(shù)名，在同一個頁面中，函數(shù)名必須是唯一的，并且區(qū)分大小寫；parameter1,parameter2,是可選項(xiàng)，代表參數(shù)列表，當(dāng)使用多個參數(shù)時，參數(shù)間使用逗號進(jìn)行分隔，一個函數(shù)最多可以有255個參數(shù)；statements是必選項(xiàng)，代表用于實(shí)現(xiàn)