網頁的簡單制作

上傳人：2*** IP屬地：湖北上傳時間：2023-02-01 格式：PPT 頁數：98 大小：944KB 積分：28 舉報 版權申訴

已閱讀5頁，還剩93頁未讀，繼續免費閱讀

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第8章網頁制作學習要點：

HTML語言基本知識

JavaScript腳本語言第8章網頁建立與維護

8.1網頁的建立

8.2網頁的制作語言

8.3網頁腳本語言——JavaScript

退出

8.1.1HTML語言的結構

8.1.3超文本鏈接指針

8.1.2構成網頁的基本元素

8.1.4在HTML文件中使用圖像

8.1.6表單的應用

8.1.5框架結構的使用

8.1.7HTML中的表格8.1

網頁的制作語言返回

HTML（超文本標記語言）是一種描述文檔結構的標注語言，它使用一些約定的標記對WWW上的各種信息進行標注。當用戶瀏覽WWW上的信息時，瀏覽器會自動解釋這些標記的含義，并按照一定的格式在屏幕上顯示這些被標記的文件。HTML的優點是其跨平臺性。即任何可以運行瀏覽器的計算機都能閱讀并顯示HTML文件，不管其操作系統是什么，并且顯示結果相同。

HTML文件是標準的ASCII文件，且其后綴名為htm或html的文件。HTML文件看起來象是加入了許多被稱為鏈接簽（tag）的特殊字符串的普通文本文件。從結構上講，HTML文件由元素（element）組成，組成HTML文件的元素有許多種，用于組織文件的內容和指導文件的輸出格式。絕大多數元素是“容器”，即它有起始標記和結尾標記。元素的起始標記叫做起始鏈接簽（starttag），元素結束標記叫做結尾鏈接簽（endtag），在起始鏈接簽和結尾鏈接簽中間的部分是元素體。每一個元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內標明。8.1.1HTML語言的結構下面來看一個HTML文件，它在瀏覽器中顯示的結果如圖8-15所示。

<HTML><HEAD><TITLE>武漢工業學院</TITLE></HEAD><BODYbgcolor=yellow><P>這是一HTML的測試文件</P></BODY></HTML>

<TITLE>標記用來給網頁命名，網頁的名稱寫在<TITLE>與</TITLE>標記之間，顯示在瀏覽器的標題欄中。例如，在圖8-15中所示的瀏覽器頁面中，其標題欄所顯示的“武漢工業學院”是在HTML文件中的由<TITLE>武漢工業學院</TITLE>所定義的。8.12構成網頁的基本元素1．<TITLE>標記

<H1>…</H1>到<H6>…</H6>標題元素有6種，用于表示文章中的各種題目。字體大小<H1>到<H6>順序減小。下面這個例子中分別使用了<H1>到<H6>的標題。其HTML文件如下所示，在瀏覽器中的顯示效果如圖8-16所示。2．<Hn>標記源文件3．預格式化文本標記<pre>源文件

HTML的輸出是基于窗口的，因而HTML文件在輸出時都是要重新排版的，即把文本上任何額外的的字符（如空格、制表符和回車符）都忽略，若確實不需要重新排版的內容，可以用<pre>…<／pre>通知瀏覽器。在圖8-17和圖8-18中顯示了有無預格式化文本標記<pre>的對比。4．<BR>和<P>標記源文件

<BR>用于強制換行。<P>表示一個段落的開始。</P>一般可不用。5．<B><I><U><STRONG><S>標記

這幾個標記都是用來修飾所包含文檔的。<B>標記使文本加粗；<I>標記使文本傾斜；<U>標記給文本加下劃線；<S>標記給文本加刪除線；<STRONG>標記使文本字體加重。下面給出一個HTML源文件，其顯示結果如圖8-19所示。6．<FONT>標記

<FONT>…</FONT>用來修改字體和顏色。其中COLOR屬性指定文字顏色，顏色的表示可以用6位十六進制代碼，如<FONTCOLOR=#00FF00>；SIZE屬性指定相對尺寸。另外，如果用戶想要設置網頁的背景色和文字顏色，可以將<BODY>標記擴充為：<BODYbgcolor=#text=#link=#alink=#vlink=#background=”imageURL”>其中各個元素的說明如表8-1所示，表8-2列出了一些常用顏色的RGB值。標記說明Bgcolor設置網頁背景顏色Text設置網頁非可鏈接文字的顏色Link設置網頁可鏈接文字的顏色Alink設置網頁正被點擊的可鏈接文字的顏色Vlink設置網頁已經點擊的可鏈接文字的顏色Background設置網頁背景圖案ImageURL設置網頁背景圖案的URL地址#代表顏色RGB值（格式為rrggbb）。它是用16進制的紅-綠-藍（red-green-blue，RGB）值來表示。各種常見的顏色的RGB值如表9-2所示。顏色RGB顏色RGB黑色（Black）000000橄欖色（Olive）808000紅色（Red）FF0000深表色（Teal）008080綠色（Green）008000灰色（Gray）808080藍色（Blue）0000FF深藍色（Navy）000080白色（White）FFFFFF淺綠色（Lime）00FF00黃色（Yellow）FFFF00紫紅色（Fuchsia）FF00FF銀色（Silver）C0C0C0紫色（Purple）800080淺色（Aqua）00FFFF茶色（Maroon）800000

超文本鏈接指針是HTML最吸引人的優點之一，可以這樣說，如果沒有超文本鏈接指針，就沒有萬維網。使用超文本鏈接指針可以使順序存放的文件具有一定程度上隨機訪問的能力，這更加符合人類的踴躍思維方式。超文本鏈接指針是指把并不連續的兩段文字或兩個文件聯系起來。8.1.3超文本鏈接指針1．統一資源定位器URL統一資源定位器（UniformResourceLocator）是文件名的擴展。在單機系統中，如果要找一個文件，需要知道該文件所在的路徑和文件名；在互連網上同樣找一個文件，除了要知道以上內容之外，顯然還需要知道該文件存放在哪個網絡的哪臺主機中才行。與單機系統不一樣的是，在單機系統中所有的文件都由統一的操作系統來管理，因而不必給出訪問該文件的方法；而在互連網上，每個網絡，每臺主機的操作系統都不一樣，因此必須指定訪問該文件的方法。一個URL包括了以上所有的信息。它的構成為：

protocol://[:port]／directory／filename2．建立一個鏈接（1）鏈接到其它站點在HTML文件中用鏈接指針指向一個目標。其基本格式為：

<ahref="…">zzz</a>

其中zzz可以是文字或圖片并顯示在網頁中，當用戶單擊它時，瀏覽器就會顯示由href屬性中的統一資源定位器（URL）所指向的目標，實際上這個ZZZ在HTML文件中充當指針的角色，它一般顯示為藍色。href中的h表示超文本，而ref表示“訪問”或“引用”的意思。例如：

<ahref="http:///">武漢工業學院</a>

用戶用鼠標單擊“武漢工業學院”，即可看到武漢工業學院的主頁內容。在這個例子中，充當指針的是“武漢工業學院”。（2）同一個文件中的鏈接超鏈可以指向自己的計算機中的某一個文件這種鏈接方式叫做本地鏈接。前面曾提到過一個超文本鏈接指針包括兩個部分，一個指向目標的鏈接指針，另一個是被指向的目標。標識一個目標的方法為：

<ANAME="KKK">…….<／A>NAME屬性將放置該標記的地方標記為“KKK”，KKK是一個全文唯一的標記串，<A>和

</A>之間的內容可有可無。這樣，就把放置標記的地方做了一個叫做“KKK”的標記（如果對MicrosoftWord很熟悉的話，這就相當于在Word中的定義“書簽”）。做好標記后，可以用下列方法來指向它。

<ahref="#KKK">轉向下一處</a>

這時就可以點擊“轉向下一處”這段文字，瀏覽器就從標記名為KKK的部分開始顯示此HTML文件的內容了。8.1.4在HTML文件中使用圖像1．在HTML文件中顯示圖像

在瀏覽器上顯示的圖像必須有特定的格式，目前使用的瀏覽器通常支持GIF和JPEG格式的圖像。在HTML網頁中加圖像是通過<IMG>標記實現的，它有幾個較為重要的屬性。其中：SRC屬性：指明圖形的URL地址；HEIGHT屬性：決定圖形的高度；WIDTH屬性：決定圖形的寬度；BORDER屬性：決定邊框線的寬度，

0-表示無邊框；ALT屬性：指明圖像顯示的備用文本；源文件2．在HTML文件中利用圖像建立鏈接如果在鏈接標記<A>和</A>的中間放置一個<IMG>標記，這個圖像將會成為一個可擊點，產生一個鏈接。例如：

<AHREF=”default.asp”> <IMGSRC=”images/center1.gif”ALIGN=LEFT> </A>

當用戶單擊這個圖像后，瀏覽器就會顯示“default.asp”這個文件的內容了。8.1.5框架結構的使用框架能夠將頁面分成數個獨立變化的窗口，每個窗口可以顯示不同的Web頁面，并可以不斷更換顯示的對象。使用框架結構，可以使屏幕的信息量增大，使Web網頁更加吸引讀者。有關框架內容的HTML語法為：

其中<noframes>...</noframes>中的內容顯示在不支持分框的瀏覽器窗口中，因而這里指向一個普通版本的HTML文件，以便使用不支持分框瀏覽器的用戶閱讀。分框由<frameset>指定，并且可以嵌套，分區中各部分顯示的內容用<frame>指定。需要說明的是，frame是一個新出現的元素，許多瀏覽器不支持它。分框可以將窗口橫向分成幾個部分，也可以縱向分成幾個部分，還可以混合分框。

框架結構標記可以嵌套，用以實現大框架中的小框架。它主要有兩個屬性：ROWS和COLS，它們可以將瀏覽器頁面分為N行M列，當然也可以各自獨立使用。下面來看一個框架結構的例子。如圖8-21，其HTML源文件如下所示。

<html><head><title>武漢工業學院</title>

<framesetcols="*,140"><framesetrows="*,80"><framesrc="a.htm"name="f1"><framesrc="b.htm"name="f2" scrolling="no"></frameset>

<framesetrows="*,80"> <framesrc="c.htm"name="f3">

<framesrc="d.htm" name="f4"></frameset></frameset></head>

<frame>標記有以下主要屬性：SRC屬性指定框架單元的URL源，如第6行中指出的是當前主機當前目錄下的“a.htm”文件。即在此框中顯示“a.htm”的內容。NAME屬性為該框架單元起個標識名，主要用來為將來改變框架內容提供入口。SCROLLING屬性設置框架是否使用滾動務。有YES、NO和AUTO三個值，分別表示強制使用滾動條，禁止使用滾動條和自動判斷使用滾動條。8.1.6表單的應用

HTML提供的表單是用來將用戶數據從瀏覽器傳遞給Web服務器的。例如可以利用表單建立一個錄入界面，也可以利用表單對數據庫進行查詢。在這里需要聲明的是，表單的操作是與服務器進行交互的操作，而服務器端的操作是通過服務器端的程序來實現的。實現在服務器端的操作有許多種方式，其中ASP（動態服務網頁）的方式就是一種，它可以通過ADO方式與多種數據庫相連。

ASP（ActiveServerPage）程序是在服務器端工作，并且通過服務器端的編譯動態地送出HTML文件給客戶端，它負責處理HTML文件與運行在服務器端的程序之間的數據交換。當用戶輸入他們的信息（這個信息可以是查詢條件，也可以是傳送給服務器的某些內容）并提交給服務器后，便激活了一個ASP程序。該ASP程序又可以調用操作系統下的其他程序（例如數據庫管理系統）完成讀者的查詢任務，當操作系統下的程序完成查詢之后，便把查詢結果傳給ASP，通過ASP傳給Web服務器。由此可以看出，ASP程序在用戶與服務器之間進行交互查詢時所起的重要作用。1.什么是表單表單就是為Internet網絡用戶在瀏覽器上建立一個交互接口，使Internet網絡用戶可以在這個接口上輸入自己的信息，然后使用提交按鈕，將Internet網絡用戶的輸入信息傳送給Web服務器。在HTML中，有一個專門的標記FORM提供表單的功能，由表單開始標記<FORM>和表單結束標記</FORM>組成，表單中可以設置文本框、按鈕或下拉菜單，它們也是通過標記完成。在表單的開始標記中帶有兩個屬性：ACTION和METHOD。書寫表單的HTML格式如下<FORMACTION=“…”METHOD=”…”>…</FORM>2.表單的標記

FORM標記有以下主要屬性：（1）ACTION屬性是用來指出，當這個FORM提交后需要執行的駐留在Web服務器上的程序名（包括路徑）是什么。一旦Internet網絡用戶提交輸入信息后服務器便激活這個程序，完成某種任務。例如：<FORMACTION=”login.asp”METHOD=POST>…</FORM>當用戶點擊“提交”按鈕以后，Web服務器上的“login.asp”將接收用戶輸入的信息，以登記用戶信息。（2）METHOD屬性是用來說明從客戶端瀏覽器將Internet網絡用戶輸入的信息傳送給Web服務器時所使用的方式，它有兩種方式：POST和GET。默認的方式是GET，這兩者的區別是在使用POST時，表單中所有的變量及其值都按一定的規律放入報文中，而不是附加在ACTION所設定的URL之后。在使用GET時將FORM的輸入信息作為字符串附加在ACTION所設定的URL的后面，中間用“？”隔開，即在客戶端瀏覽器的地址欄中可以直接看見這些內容。2.表單的標記

HTML中的INPUT標記是表單中最常用的標記。我們在網頁上所見到的文本框、按鈕等等都由這個標記引出的。下面是INPUT標記的標準格式：<INPUTTYPE=“…”VALUE=“…”>其中TYPE屬性是用來說明提供給用戶進行信息輸入的類型是什么。例如是文本框、單選按鈕或多選按鈕。它的取值如下：TYPE=“TEXT” 表示在表單中使用單行文本框

=“PASSWORD”表示在表單中為用戶提供密碼輸入框

=“RADIO” 表示在表單中使用單選按鈕

=“CHECKBOX”表示在表單中使用多選按鈕

=“SUBMIT” 表示在表單中使用提交按鈕

=“RESET” 表示在表單中使用重置按鈕

3．HTML中的INPUT標記用一個例子說明文字輸入和密碼輸入的制作。（1）文字輸入和密碼輸入

<HTML><HEAD> <TITLE>這是個測試頁</TITLE></HEAD><BODY>

<FORMACTION=“REG.ASP”METHOD=POST>

請輸入您的真實姓名:<INPUTTYPE=TEXTNAME=姓名><BR>

您的主頁的網址:<INPUTTYPE=TEXTNAME=網址VALUE=HTTP://><BR>

密碼:<INPUTTYPE=PASSWORDNAME=密碼><BR><INPUTTYPE=SUBMITVALUE="發送"><INPUTTYPE=RESETVALUE="重設">

</FORM></BODY></HTML>（2）復選框（Checkbox）和單選框（RadioButton）<HTML><HEAD> <TITLE>這是個測試頁</TITLE></HEAD><BODY><FORMACTION=“REG1.ASP”METHOD=POST>

選擇一種你喜愛的水果:<br><INPUTtype=radioname=水果value=”香蕉”>香蕉

<br><INPUTtype=radioname=水果checkedvalue=”草莓”>草莓

<br><INPUTtype=radioname=水果value="橘子">橘子

<br>選擇你所喜愛的運動:<br><INPUTtype="checkbox"name=ra1checkedvalue="足球">足球

<br><INPUTtype="checkbox"name=ra2checkedvalue="籃球">籃球

<br><INPUTtype="checkbox"name=ra3value="排球">排球

<br><INPUTTYPE=SUBMITVALUE="發送"><INPUTTYPE=RESETVALUE="重設"></FORM></BODY></HTML>（3）按鈕的制作

在上面幾個例子中，都有兩個按扭，一個是“發送”按鈕，另一個“重置”按鈕。其實“發送”按鈕真正的含義叫“提交”即當Internet網絡用戶用鼠標單擊這個按鈕后，用戶輸入的信息便提交給一個駐留在Web服務器上的程序，讓服務器進行處理，其典型的格式：<INPUTTYPE=”SUBMIT”VALUE=”發送”>。提交按鈕在FORM中是必不可少的，前幾個例子只是說明INPUT語句中類型的使用，作為FORM語句并不完整，每個FORM中有且僅有一個提交按鈕。當設置“提交”按鈕標記時，如果缺省VALUE屬性，則瀏覽器窗口中的按鈕上出現“SUBMIT”的字樣，這個字樣也可以自己設定，改變按鈕上的提示。例如：VALUE=“提交”。另一種在瀏覽器常用的按鈕叫“重置”按鈕，當Internet網絡用戶用鼠標單擊這個按鈕后，網絡用戶輸入的信息被清除，讓網絡用戶重新輸入信息。其典型的格式：<INPUTTYPE=“RESET”VALUE=”重新輸入”>，而且在這個標記設置中如果缺省VALUE屬性，則瀏覽器窗口中的按鈕上出現“RESET”的字樣，這個字樣也可以自己設定，來改變按鈕上的提示，例如：VALUE=“重新輸入”。（4）HTML中的SELECT標記

在制做HTML文件時，使用<FORM>…</FORM>標記可以在瀏覽器窗口中設置下拉式菜單或帶有滾動條的菜單，Internet網絡用戶可以在菜單中選中一個或多個選項。

<HTML><HEAD> <TITLE>武漢工業學院</TITLE></HEAD><BODY>

請從下面課程中選擇幾門選擇課:<FORMaction="h1.asp"method=POSTid=form1name=form1><SELECTname=x1multiple> <OPTION>網絡技術

<OPTION>書法

<OPTION>音樂欣賞<OPTION>現代文學

<OPTION>多媒體技術

</SELECT></FORM>

</BODY></HTML>8.1.7HTML中的表格下面看一個表格的例子從這個例子可以看出一個表格有一個標題（Caption），它表明表格的主要內容，并且一般位于表的上方；表格中由行和列分割成的單元叫做“表元”（Cell），它又分為表頭（用TH標記來表示）和表數據（用TD標記來表示）；表格中分割表示的行列線稱為“框線”（Border）。一個表格的基本框架如下所示：<TABLEWIDTH=75%BORDER=1CELLSPACING=1CELLPADDING=1> <CAPTION></CAPTION> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> </TR>1．表格的標記

<TR> <TD></TD> <TD></TD> <TD></TD> </TR></TABLE>（1）TABLE標記一個表格至少一個TABLE標記，由它來決定一個表格的開始和結束，而且TABLE標記可以嵌套。TABLE標記有以下五種屬性：BORDER屬性，指定圍繞表格的框的寬度（只能用像素）。CELLSPACING屬性，指定框線的寬度CELLPADDING屬性，用于設置表元內容與邊框線之間的間距。ALIGN屬性用來控制表格本身在頁面上的對齊方式。其取值可是LEFT（左對齊）、CENTER（居中對齊）、RIGHT（右對齊）。WIDTH屬性，用來設置表格的寬度，可以以像素為單位，也可用占瀏覽器窗口的百分比來定義。（2）CATION標記

CATION標記用來標注表格標題的。CATION標記必須緊接在TABLE開始標記之后放在第一個TR標記之前。通過該標記所定義的表格標題一般顯示在表格的上方，而且其水平方向是居中對齊。另外，如需要對表格的標題突出顯示，可以在CATION標記之間加入其它對字體進行加重顯示的標記。如：<TABLEWIDTH=75%BORDER=1CELLSPACING=1CELLPADDING=1> <CAPTION> <H2>表格標題強調</H2> </CAPTION> <TR> ………. </TR></TABLE>（3）TR標記定義表格的一行。TR標記中有兩個屬性，一個是ALIGN屬性，用來設置表行中的每個表元在水平方向的對齊方式，其取值可以是LEFT（左對齊）、CENTER（居中對齊）、RIGHT（右對齊）；另一個是VLIGN屬性，用來設置表行中的每個表元在垂直方向的對齊方式，其取值可以是TOP（向上對齊）、CENTER（居中對齊）、BOTTOM（向下對齊）。例如，要使表行中各單元的內容水平方向右對齊、垂直方向居中對齊，可使用如下源代碼：

<TRALIGN=RIGHTVALIGH=TOP>（4）TH標記

TH標記用來表示一個表行中的各個單元。TH標記內幾乎可以包含所有的HTML標記，甚至還可以嵌套表格。該標記與TR標記同樣具有ALIGN和VALIGN屬性，如果在TH標記和TR標記中都設置了ALIGN和VALIGN屬性，而且它們所設置的屬性值不相同，這時以TH標記所設置的屬性值為準。另外，TH標記還有兩個屬性，一個是WIDTH屬性，用來設置表元的寬度，另一個HEIGHT屬性，用來設置表元的高度。這兩個屬性的取值單位都是像素。在同一行中將多個表元設置為不同高度，或者在同一列中將多個表元設置為不同寬度，都有可能導致不可預料的結果。在這個實例中，通過制作一個登記表格來給大家來說明如何制作一個比較復雜的表格。在表格中經常會出現跨多行、多列的表元，這就要利用TD標記另外兩個屬性，即COLSPAN和ROWSPAN屬性。例如

<THCOLSPAN=3>登記照<TH>

表示這個表項標題將橫跨三個表項的位置；

<THROWSPAN=3>登記照<TH>

表示這個表項標題將縱跨三個表項的位置；另外每個表元還可以設置其背景顏色。例如<THCOLSPAN=3BGCOLOR=yellow>登記照<TH>

還可以在表格中插入超級鏈接或在表格中插入圖片，如果能對這個例子舉一反三的話，那么僅需制作一個無框線的表格，就可以把各種數據按照自己所希望的形式在頁面進行布置。2．表格使用實例下面就給出一個具體的實例<HTML><HEAD><TITLE>表格綜合實例</TITLE></HEAD><BODY><TABLEborder=1cellPadding=1cellSpacing=1width="75%"> <caption><h3>大獎賽登記表</h3></caption><TR> <TDbgcolor=LightGoldenrodYellow>報名號</TD> <TD>757</TD> <TDbgcolor=LightYellow>性別</TD> <TD>女</TD> <TDrowspan=2><IMGSRC="image\center.gif"></TD></TR><TR> <TDbgcolor=FloralWhite>姓名</TD> <TDcolspan=3><Ahref="http://">江小麗</A></TD></TR>

<TR><TDbgcolor=Cornsilk>推薦單位</TD><TDcolspan=4>宇宙公司</TD></TR></TABLE></P></BODY></HTML>下面就給出一個具體的實例

8.2.1JavaScript的基礎知識

8.2.2JavaScript語言

8.2.3JavaScript中的函數

8.2.4JavaScript的事件8.2網頁腳本語言

——JavaScript

8.2.5JavaScript中的對象返回8.2.1JavaScript的基礎知識腳本語言是一種簡單的描術性語言，它是針對HTML語言不能很好地解決動態交互這個缺點而引入的，它能對Web頁面中的元素進行控制。一般來說，腳本語言是通過一個<Script>的標記嵌入到HTML文檔中，并可以被瀏覽器解釋執行，插入的腳本語言就如同子程序一樣被HTML元素所調用，成為HTML的一部分。目前比較流行的腳本語言有網景公司（Netscope）的JavaScript和微軟公司（Microsoft）的VBScript。

JavaScript是基于Netscape瀏覽器的，類似于Java編程語言的腳本語言，并且是一種基于對象的、面向Internet或Intranet的編程語言，使用它可以開發關于Internet或Intranet客戶端和服務器的應用程序，也可以方便地嵌入到計算機文件中。由于JavaScript是第一個在WWW上使用的腳本語言，因而它一度是最流行的Web站點腳本語言，用它可以方便地編排HTML網頁，同時還可以控制動態HTML。

VBScript是Microsoft公司在VisualBasic編程語言的基礎上設計的，由于其在企業界廣為流行，且與Microsoft公司的其它產品有著密切的聯系，VBScript的使用范圍越來越大，逐漸會成為一種主要的腳本語言。1．什么是腳本語言

JavaScript語言起初并不叫此名稱，它的早期是Netscape的開發者們稱之為“Mocha”的語言，開始在網上進行β測試（由軟件的多個用戶在其實際的使用環境下進行的測試叫β測試）時，名字改為“LiveScript”，Sun公司推出Java之后，Netscape引進了Sun的有關概念，在其發行Netscape2.0β測試版時才稱其為“JavaScript”。它不僅支持Java的Applet小程序，同時向Web頁的制作者提供一種嵌入HTML文檔進行編程的、基于對象的Script（腳本）程序設計語言，采用的許多結構與Java相似。

支持JavaScript的Navigator2.0的網絡瀏覽器能夠解釋并執行嵌在HTML中的用JavaScript語言書寫的“程序”。JavaScript具有很多采用CGI/PERL編寫的Script（腳本）的能力，其優點是可以引用主機資源，響應位于服務器Web頁中相應語法元素要完成的功能，而又不與主機服務器進行交互會話。2．JavaScript的產生與發展

JavaScript的編程工作復雜與否和HTML文檔所提供的功能大小密切相關，下面用一個簡單的例子來介紹它的編程特點。

3．一個簡單的例子

＜HTML＞＜HEAD＞＜TITLE＞Thisisatest＜/TITLE＞＜/HEAD＞＜BODY＞

你好＜SCRIPTLANGUAGE="JavaScript"＞

document.write"Hello，JavaScript!"

＜/SCRIPT＞

＜/BODY＞＜/HTML＞

JavaScript源代碼被嵌在一個HTML文檔中，而且它可以出現在文檔頭部（HEAD節）和文檔體部(BODY節)。SCRIPT標記的一般格式為：＜SCRIPTLANGUAGE="JavaScript"＞＜!-- JavaScript語句串··· --＞＜/SCRIPT＞

為了使老版本的瀏覽器（即Navigator2.0版以前的瀏覽器）避開不識別的“JavaScript語句串”，用JavaScript編寫的源代碼可以用注解括起來，即使用HTML的注解標記＜!--…--＞，而Navigator2.x可以識別放在注解行中的JavaScript源代碼。

說明：＜SCRIPT＞標記可聲明一個腳本程序，LANGUAGE屬性聲明該腳本是一個用JavaScript語言編寫的腳本。在<Script>和</Script>之間的任何內容都視為腳本語句，會被瀏覽器解釋執行。在JavaScript腳本中，用“//”作為行的注釋標注。8.2.2JavaScript語言在JavaScript中，數據類型是十分寬松的，程序員在聲明變量時可以不指定該變量的數據類型，JavaScript會自動地按照需要來分配適當的數據類型。這一點和JAVA或C++是截然不同的。JavaScript有以下幾種基本的數據類型：1．JavaScript數據類型（1）數字類型如:34，3.14表示為十進制數；034表示為八進制數，用十進行表示其值為28；0x34表示為十六進制數，用十進行表示其值為52。（2）字符串類型如："Hello!"；（3）邏輯值類型其取值僅可能是“真”或“假”，用True或False來表示。（4）空值當你定義一個變量后未賦初值時，則該變量為空值。例如：varch1; //此時ch1就為空值，它不屬于任何一種數據類型。它的定義要求與C語言相仿，例如以字母或下劃線開始，變量不能是保留字（如int，var等），不能使用數字作為變量名的第一個字母等等。但它的定義方法與C語言有很大的差別。

C語言的變量定義格式為：

inta=1;floatf1=3.14

而JavaScript的變量定義格式:

Var

變量名；或者Var

變量名=初始值；

JavaScript并不是在定義變量時來說明變量的數據類型，而是在給變量賦初始值時來確定該變量的數據類型；JavaScript對字母的大小寫是敏感的。如Varmy；VarMy，JavaScript認為這是兩個不同的變量。說明：在使用變量之前，最好對每個變量使用關鍵字VAR進行變量聲明，防止發生變量的有效區域沖突的問題。2．JavaScript變量

JavaScript常量分為4類：整數、浮點數、布爾值和字符串。下面分別加以說明。

3．JavaScript常量（1）整數常量在JavaScript中，整數可以表示為：十進制數：即一般的十進制整數，它前面不可有前導0。例：75。八進制數：以0為前導，表示八進制數。例：075。16進制數：以0x為前導，表示16進制數。例：0x0F。（2）浮點數常量浮點數可以用一般的小數格式來表示，也可以使用科學計數法來表示。例如：7.54343，3.0e9（3）布爾型常量布爾型常量只有兩個值：True和False。（4）字符串常量字符串常量是用單引號或雙引號括起來的0個或多個字符組成。例如：“TestString”，”12345”在JavaScript的語法規則中，每一條語句的最后必須使用一個分號，例如： document.write(“kkk”);//此語句的功能在瀏覽器中輸出“kkk”字符串在編寫JavaScript程序時，一定要有一個良好的習慣，最好是一行寫一條語句，如果使用復合語句塊時，注意把復合語句塊用大括號括起來，并且根據每一句作用范圍的不同，應有一定的縮進。另外一個好的編程風格是要適當加一些注釋。例如：4．JavaScript語句的結構＜SCRIPTLANGUAGE="JavaScript"＞

varSUM,P,i; SUM=0; //初始化累加和

P=1;FOR(i=1;i<100;i++){SUM+=i;//求累加和

P*=i;}＜/SCRIPT＞

JavaScript常量分為4類：整數、浮點數、布爾值和字符串。下面分別加以說明。

JavaScript擁有一般編程語言（如Ｃ語言）的運算符，包括算術運算符、比較運算符、連接運算符5．JavaScript運算符和表達式（1）算術運算符用于連接運算表達式的各種算術運算符如表8-1所示。運算符運算符定義舉例說明+加法符號X=A+B-減法符號X=A-B*乘法符號X=A*B/除法符號X=A+B%取模符號X=A%B X等于Ａ除以Ｂ所得的余數++加１

A++A的內容加1--減1A--A的內容減1（2）位運算符位操作運算符對兩個表達式相同位置上的位進行位對位運算。JavaScript支持的位操作運算符如表8-2所示。運算符運算符定義舉例說明~按位求反X=~A<<左移X=B<<A(A為移動次數，左邊移入0)>>右移X=B>>A(A為移動次數，右邊移入0)>>>無符號右移X=B>>>A(A為移動次數，右邊移入符號位)&位“與”X=B&A^位“異或”X=B^A|位“或”X=B|A（3）復合賦值運算符復合賦值運算符執行的是一個表達式的運算。在JavaScript中，合法的復合賦值運算符如表8-3所示。運算符運算符定義舉例說明+=加X+=AX=X+A-=減X-=AX=X-A*=乘X*=AX=X*A/=除X/=AX=X/A%=模運算X%=AX=X%A<<=左移X<<=AX=X<<A>>=右移X>>=AX=X>>A>>>=無符號右移X>>>=AX=X>>>A&=位“與”X&=AX=X&A^=位“異或”X^=AX=X^A|=位“或”X|=AX=X|A（4）比較運算符比較運算符用于比較兩個對象之間的相互關系，返回值為True和False。各種比較運算符如表8-4所示。運算符運算符定義舉例說明==等于A==BA等于B時為真>大于A>BA大于B時為真<小于A<BA小于B時為真!=不等于A!=BA不等于B時為真>=大于等于A>=BA大于等于B時為真<=小于等于A<=BA小于

等于B時為真?:條件選擇

E？A：BE為真時選A，否則選B（5）邏輯運算符邏輯運算符返回True和False，其主要作用是連接條件表達式，表示各條件間的邏輯關系。各種邏輯運算符如表8-5所示。運算符運算符定義舉例說明&&邏輯“與”A&&BA與B同時為True時，結果為True!邏輯“非”!A如A原值為True,結果為False||邏輯“或”A||BA與B有一個取值為True時，結果為True（6）運算符的優先級運算符說明.[]()字段訪問、數組下標以及函數調用++--~!typeofnewvoiddelete一元運算符、返回數據類型、對象創建、未定義值*/%乘法、除法、取模+-+加法、減法、字符串連接<<>>>>>移位<<=>>=小于、小于等于、大于、大于等于==!==等于、不等于、恒等、不恒等&按位與^按位異或|按位或&&邏輯與||邏輯或?:條件=賦值（7）表達式

JavaScript表達式可以用來計算數值，也可以用來連接字符串和進行邏輯比較。JavaScript表達式可以分為三類：

算術表達式算術表達式用來計算一個數值，例：2*4.5/3

字符串表達式字符串表達式可以連接兩個字符串，例如：”hello”+”world!”，該表達式的計算結果“helloworld!”

邏輯表達式

邏輯表達式計算結果為一個布爾型常量（True或False）。

例如：12>24其返回值為：False

JavaScript允許加一些注釋。并且有兩種注釋方法：單行注釋和多行注釋。單行注釋：以“//”開始，以同一行的最后一個字符作為結束。多行注釋：以“/*”開始，以“*/”結束，符號“*/”可放在同一個行或一個不同的行中。下面舉例說明怎樣使用這兩種注釋方法：

<Scriptlanguage=”JavaScript”> /*這是多行注釋的第一行這是多行注釋的第二行*/ k=24*7； //這是一個單行注釋的例子

</Script>6．腳本語言的注釋

JavaScript的腳本語言同C++語言類似的，提供了相同的程序流程控制語句。這些語句分別是if、switch、for、do和while語句。（1）條件語句

If語句

If語句是一個條件判斷語句，它根據一定的條件執行相應的語句塊，其定義格式如下所示：If(expr) {code_block1 }else {code_block2}

這里，expr是一個布爾型的值或表達式（特別強調：expr一定要用小括號將其括起來），code_block1和code_block2是由多個語句組成的語句塊。當expr值為“真”時，執行code_block1，當expr值為“假”時，執行code_block2。7．JavaScript程序流程控制另外有一點要說明的是，if語句是可以嵌套的，即在if語句的模塊中，還可以包含其它的if語句。例如：If(expr) { code_block1 if(expr1){code_block3} }else { code_block2 }②switch語句switch語句測試一個表達式并有條件的執行一段語句，其語法格式如下：

switch(表達式){case值1：code_block1 break; case值2：code_block2 break; case值3：code_block3 break; … default：code_blockn

}switch語句首先計算表達式的值，然后根據表達式所計算出的值來選擇與之匹配的CASE后面的值，并執行該CASE后面的語句，直到遇到了一個break語句為止，如果所計算出的值與任何一個CASE后面的值都不相符的話，則執行default后的語句。下面舉例說明switch語句的用法：

<HTML><HEAD><TITLE>例9-3顯示</TITLE><SCRIPTLANGUAGE=javascript><!-- document.write("switch語名測試");

switch(14%3){ case0:sth="您好"; break; case1:sth="大家好"; break; default:sth="世界好"; break; }

document.write(sth);//--></SCRIPT></HEAD><BODY></BODY></HTML>（2）循環語句有許多時候，需要把一個語句塊重復執行多次，每次執行僅改變部分參數的值，這時可以使用循環語句，直到某一個條件不成立為止。

for語句

for語句用來產生一段程序循環，其語法格式如下：

for(init;test;incre) {

code_block }

這里init和incre是兩個語句，test是一個表達式。init語句只執行一次，用來初始化循環變量。test表達式在每次循環后都要被計算一次，如果其運算值為“假”，則循環中止并立即繼續執行for語句之后的語句，否則執行code_block語句塊，循環完成后執行一次incre語句塊，循環完成后，執行一次incre

語句。使用break語句可用來從循環中退出。For語句一般用在已知循環次數的場合，而且init、test、incre三個語句之間要用分號隔開。下面舉例說明for語句的用法：

<SCRIPTLANGUAGE=javascript>

varsum=0;

for(n=1;n<11;n++) { sum=sum+n

document.write(n,"SUM=",sum,"<br>"); }</SCRIPT>②

while語句對于有些程序，如果不知道其循環體要執行多少次時，就不能使用for循環語句了。這時就可以考慮使用while語句，while語句也是產生一段程序循環，其語法格式如下：

while(expr){

code_block; }

這里，當表達式expr為“真”時，code_block循環體被執行，執行完該循環體后，會再次判斷表達式expr的運算結果是否為“True”，以決定是否再次執行該循環體；如果expr開始時便為“假”，則語句塊code_block將一次也不會被執行。使用break語句可從這個循環中退出。其實while語句非常好理解，只要知道“表達式為真則執行循環體”即可。下面舉例說明while語句的用法。下面舉例說明while語句的用法：

<SCRIPTLANGUAGE=javascript><!--

var

i,sum; i=1; sum=0;

while(i<=10){ sum+=i;

document.write(i,"",sum,"<br>"); i++; }//--></SCRIPT>③

do…while語句

do…while語句與while語句所執行的功能完全一樣，唯一的不同之處就是do…while語句不管條件是否成立，其循環體至少執行一次，然后再去判斷表達式的取值是否為真。do…while語句的語法格式如下：

do{code_block }while(expr);

這里，無論表達式expr的值是否為“真”，code_block循環體都被執行，即語句塊code_block至少執行一次。另外，使用break語句可從循環中退出。下面舉一個例子，來說明其條件并不成立，但其循環體卻執行一次。

下面舉例說明do…while語句的用法：

<SCRIPTLANGUAGE=javascript><!--

var

i,sum;i=1;sum=0;do{sum+=i;

document.write(i,"",sum*100,"<br>");

document.write("i小于10條件不成立,但本循環體卻執行一次!");i++;}while(i>10)//--></SCRIPT>（3）轉移語句①

Break語句

Break語句的作用就是使程序跳出各種流程。它常常是用在異常情況下終止流程。在循環體中，可以使用多個Break語句，一個Break語句只會影響和它最近的循環。但是最好不要過多使用Break語句，否則程序運行結果將難以預料。②

Continue語句有時，在循環體中，在某個特定的情況下，希望不再執行下面的循環體，但是又不想退出循環，這時就要使用Continue語句。在for循環中，執行到Continue語句后，程序立即跳轉到迭代部分，然后到達循環條件表達式，而對While循環，程序立即跳轉到循環條件表達式。8.3.3JavaScript中的函數把相關的語句組織在一起，并給它們標注相應的名稱，利用這種方法把程序分塊，這種形式的組合就稱為函數，往函數中傳遞信息的方法是用參數，有些函數不需要任何參數，有些函數可以帶多個參數。函數的定義方法如下所示：

Function函數名([參數][，參數]){

函數語句塊

} 1．JavaScript函數概述下面通過一個具體實例來看一下JavaScript中函數的定義和調用方法。其源代碼如下：

<HTML><HEAD><TITLE>一個JavaScripte程序測試

</TITLE><SCRIPTLANGUAGE=javascript><!--

functiontotal(i,j){

varsum; sum=i+j;

return(sum); }

document.write("調用這個函數total(100,20),結果為:",total(100,20))//--></SCRIPT></HEAD><BODY></BODY></HTML>在面向對象編程語言中，函數一般是作為對象的方法來定義的。而有些函數由于其應用的廣泛性，可以作為獨立的函數定義，還有一些函數根本無法歸屬于任何一個對象，這些函數是JavaScript腳本語言所固有的，并且沒有任何對象的相關性，這些函數就稱為內部函數，由于篇幅限制不能一一講述，在此僅通過一個例子來說明。

IsNaN（變量），如果變量的值不是數值類型，則返回“True”，否則返回“False”。這個函數可以用來對用戶的輸入進行判斷，看其輸入是否是數值類型。2．內部函數下面通過一個例子來說明，當用戶在瀏覽器的輸入對話框中輸入一個值，如果輸入的值不是數值類型時，則給用戶一個提示，當用戶輸入的值是數字型時，也同樣給出一個提示。這個例子的源代碼如下：

<SCRIPTLANGUAGE=javascript><!--var

str;str=prompt("請你輸入一個值,如3.14","");if(isNaN(str)){

document.write("唉?受不了您,有例子都輸不對!!!");}else{document.write("您真棒,輸入正確(數值類型)!!!");}//--></SCRIPT>在JavaScript中，可以定義自己的函數。下面舉例說明，其在瀏覽器中的顯示結果如圖8-37所示。3.用戶自定義函數

＜HTML＞＜HEAD＞＜TITLE＞Thisisafunction'stest＜/TITLE＞＜SCRIPTLANGUAGE="JavaScript"＞

functionsquare(i){document.write("Thecallpassed",i,"tothesquarefunction.","<BR>")returni*i}document.write("Thefunctionre-turned",”<BR>”)document.write(square(8))

＜/SCRIPT＞＜/HEAD＞＜BODY＞＜BR＞

Alldone.＜/BODY＞＜/HTML＞8.2.4JavaScript的事件

JavaScript語言是一個事件驅動的編程語言。事件是腳本處理響應用戶動作的唯一途徑，它利用了瀏覽器對用戶輸入的判斷能力，通過建立事件與腳本的一一對應關系，把用戶輸入狀態的改變準確地傳給腳本，并予以處理，然后把結果反饋給用戶，這樣就實現了一個周期的交互過程。

JavaScript對事件的處理分為定義事件和編寫事件腳本兩個階段，可以定義的事件類型幾乎影響到HTML的每一個元素，例如：瀏覽器窗口、窗體文檔、圖形、鏈接等。下面給出表8-7列出事件類型和它們的說明：1．JavaScript事件事件名稱事件說明Abort用戶中斷圖形裝載Blur元素失去焦點Change元素內容發生改變，如文本域中的文本和選擇框的狀態Click點擊鼠標按鈕或鍵盤按鍵Dragdrop瀏覽器外的物體被拖到瀏覽器中Error元素裝載發生錯誤Focus元素得到焦點Keydown用戶按下一個鍵Keypress用戶按住一個鍵不放Keyup用戶將按下的鍵抬起Load元素裝載Mousemove鼠標移動Mouseover鼠標移過元素上方Mouseout鼠標從元素上方移開Mousedown鼠標按鍵按下Mouseup鼠標按鍵抬起Move幀或者窗體移動Reset表單內容復位Resize元素大小屬性發生改變Submit表單提交Select元素內容發生改變，如文本域中的文本和下拉選單中的選項Unload元素卸載

接下來要為這些事件編寫處理的函數，這些函數就是腳本函數。這些腳本函數包含在<Script>和</Script>標記之間。下面通過一個腳本實例，看看它是如何工作的。這個例子的功能是建立一個按鈕，當單擊按鈕后彈出一個對話框，對話窗中顯示“XX，久仰大名,請多多關照”。其源代碼如下所示。2．為事件編寫腳本<HTML><HEAD><TITLE>一個JavaScripte程序測試</TITLE><SCRIPTLANGUAGE=javascript>functionkkk(){do{username=prompt("請問您是何方神圣,報上名來","");}while(username=="")

document.write(username,",久仰大名,請多多關照.");}</SCRIPT></HEAD><BODY><INPUTtype="button"value=你敢碰我嗎?name=button1onclick="kkk()"></BODY></HTML>8.2.5JavaScript中的對象面向對象的系統包含三個要素：對象、類、繼承。JavaScript語言是一種基于對象的語言，它不能算是一個面向對象的語言，因為它不支持類和繼承。下面來介紹一下對象的概念。對象：從概念級上說，表示客觀世界的客體，任何實物都可以被稱為對象；從物理實現說：一個對象是一個狀態和一系列可被外部調用的操作方法的一個封裝體，即指的是狀態和操作的組合，狀態通過一組屬性來確定，而操作通過一組方法來確定。例如：我們以一個飲料機為例來說明封裝對象的概念。一臺飲料機可以被認為是封裝的，因為它的功能被密封在一個金屬盒子內。它有兩個方法：制一杯水；制一杯咖啡；這個對象的狀態由剩余的茶葉量、咖啡量、牛奶量、糖量和水量等屬性給出。與這個對象的接口是由盒子前分別標以“咖啡”和“茶”的兩個按鈕提供，這兩個按鈕提供用戶能夠執行這個對象的方法。1．基本概念

與一個對象的操作接口被限制在僅是用戶需要的上面，而方法的實現，外部是不可見的，也就是說，具有了信息隱藏，這是封裝的主要目的，它阻止非法的訪問，因為金屬盒阻止這臺機器的用戶（當然這個用戶從末研究過飲料機這種復雜難懂的機器）改動這臺機器。操作接口的另一個很重要的方面是，它提供了一個對象的行為視圖，即所知道的僅是這個對象提供了某種功能，除此之外，對其它細節一無所知。在處理某個復雜的問題時，這一點是很重

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

網頁的簡單制作

文檔簡介

溫馨提示

最新文檔

評論

網頁的簡單制作

文檔簡介

溫馨提示

最新文檔

評論

相關文檔