版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
Web應用程序開發(fā)技術電子工業(yè)出版社Web應用程序開發(fā)技術電子工業(yè)出版社1第1章Web技術概述本章導讀本章通過實際生活中的實例,介紹了Web應用程序開發(fā)所涉及的基本概念,以及構成Web體系結構的五大基本元素。Web應用中的每一次信息交換都要涉及客戶端和服務端,介紹了客戶端/服務器模型的兩種形式:C/S結構和B/S結構。也介紹了客戶端的瀏覽器:IE瀏覽器、火狐瀏覽器及服務器中常用的Web服務器:IIS、Apache和Tomcat服務器,讀者應重點掌握瀏覽器從Web服務器獲得Web頁面的過程。通過本章的學習,讀者會對Web應用程序有一個整體的框架結構,為后面各部分內容的學習有非常大的幫助。第1章Web技術概述本章導讀2
1-1Web技術
Web是一個分布式的超媒體(Hypermedia)信息系統(tǒng),它將大量的信息分布于整個因特網上。Web的任務就是向人們提供多媒體網絡信息服務。Web是一種典型的分布式應用結構。Web應用中的每一次信息交換都要涉及客戶端和服務端。因此,Web開發(fā)技術大體上也可以被分為客戶端技術和服務器端技術兩大類。1-1Web技術
Web是一個分布式的超媒體(Hyp31-1-1Web技術基礎
1.超文體、超媒體和超鏈接Internet采用超文本和超媒體的信息組織方式,將信息的鏈接擴展到整個Internet上。2.HTMLHTML是用來制作網頁的標記語言,是構成Web頁面的主要工具。
3.統(tǒng)一資源定位器(URL)統(tǒng)一資源定位器就是用來標識Web文檔位置的唯一標識符。
4.Web的特點
Web是圖形化和易于導航的、Web與平臺無關、Web是分布式的、Web是動態(tài)的
1-1-1Web技術基礎1.超文體、超媒體和超鏈接241-1-2HTTP協(xié)議
1.HTTP協(xié)議即超文本傳輸協(xié)議(HypertextTransferProtocol)這個協(xié)議是在Internet中進行信息傳送的協(xié)議,瀏覽器默認使用這個協(xié)議。
2.HTTP協(xié)議的工作過程。3.HTTP協(xié)議是無狀態(tài)協(xié)議。1-1-2HTTP協(xié)議1.HTTP協(xié)議即超文51-2客戶端/服務器模型
1.C/S模式的結構和工作原理
2.B/S模式的結構、工作原理和特點
圖1.1二層C/S結構圖圖1.2典型的三層B/S結構圖
圖1.3B/S原理示意圖
1-2客戶端/服務器模型1.C/S模式的結構和工作原理61-3瀏覽器
1-3-1IE瀏覽器
1-3-2Firfox瀏覽器
1-3瀏覽器1-3-1IE瀏覽器71-4服務器服務器是一種高性能計算機,作為網絡的節(jié)點,存儲、處理網絡上80%的數據、信息,因此也被稱為網絡的靈魂。做一個形象的比喻:服務器就像是郵局的交換機,而微機、筆記本電腦、PDA、手機等固定或移動的網絡終端,就如散落在家庭、各種辦公場所、公共場所等處的電話機。我們與外界日常的生活、工作中的電話交流、溝通,必須經過交換機,才能到達目標電話;同樣如此,網絡終端設備如家庭、企業(yè)中的微機上網,獲取資訊,與外界溝通、娛樂等,也必須經過服務器,因此也可以說是服務器在“組織”和“領導”這些設備。
1-4服務器服務器是一種高性能計81-4-1Web服務器
Web服務器的主要功能有:
1.信息的發(fā)布2.充當其他網絡服務的平臺
圖1.4Web瀏覽器從Web服務器獲得Web頁面的過程
1-4-1Web服務器Web服務器的主要功能有:圖1.91-4-2IIS服務器
IIS是InternetInformationServer的縮寫,它是微軟公司主推的服務器,是目前最流行的Web服務器之一,它提供了強大Internet和Intranet服務功能,最新的版本是Windows2003里面包含的IIS6.0,IIS與WindowNTServer完全集成在一起,因而用戶能夠利用WindowsNTServer和NTFS(NTFileSystem,NT的文件系統(tǒng))內置的安全特性,建立強大,靈活而安全的Internet和Intranet站點。
1-4-2IIS服務器IIS是Intern101-4-3Apache服務器Apache是一種開放源碼的支持HTTP協(xié)議的一種Web服務器,由于其多平臺和安全性的特點,被廣泛使用,是最流行的Web服務器端軟件之一,它可以運行在幾乎所有廣泛使用的計算機平臺上。Apache源于NCSAhttpd服務器,經過多次修改,成為世界上最流行的Web服務器軟件之一。
1-4-3Apache服務器Apache是一種開放源碼的111-4-4Tomcat服務器
Tomcat服務器是一個免費的開放源代碼的Web應用服務器,Tomcat是Apache軟件基金會(ApacheSoftwareFoundation)的Jakarta項目中的一個核心項目,由Apache、Sun和其他一些公司及個人共同開發(fā)而成。由于有了Sun的參與和支持,最新的Servlet和JSP規(guī)范總是能在Tomcat中得到體現,Tomcat5支持最新的Servlet2.4和JSP2.0規(guī)范。因為Tomcat技術先進、性能穩(wěn)定,而且免費,因而深受Java愛好者的喜愛并得到了部分軟件開發(fā)商的認可,成為目前比較流行的Web應用服務器。
1-4-4Tomcat服務器Tomcat服務121-5Web應用程序
Web應用程序首先是“應用程序”,和用標準的程序語言,如C、C++等編寫出來的程序沒有什么本質上的不同。然而Web應用程序又有自己獨特的地方,它是基于Web的,而不是采用傳統(tǒng)方法運行的。換句話說,它是典型的瀏覽器/服務器(B/S)架構的產物,Web應用程序一般都是B/S結構的。一個Web應用程序是一種經由Internet或Intranet以Web方式訪問的應用程序。它也是一個計算機軟件應用程序,這個應用程序用基于瀏覽器的語言(如HTML、ASP、PHP、Perl、Python等)編碼,依賴于通用的Web瀏覽器來表現它的執(zhí)行結果。
1-5Web應用程序Web應用程序首131-5-1Web應用程序的執(zhí)行過程Web應用程序的執(zhí)行過程如下:瀏覽器根據輸入的地址找到相應的服務器,不同的網站對應不同的服務器。這個服務器通常稱為Web服務器,可以接收瀏覽器發(fā)送的請求。Web服務器把這個請求交給相應的應用服務器。應用服務器接收到這個請求后,查找相應的文件,加載并執(zhí)行這個文件。執(zhí)行的結果通常是HTML文檔。應用服務器把執(zhí)行的結果返回給Web服務器,Web服務器再把這個結果返回給瀏覽器。瀏覽器解析HTML文檔,然后把解析后的網頁顯示給用戶。
1-5-1Web應用程序的執(zhí)行過程Web應用程序的執(zhí)行141-5-2Web應用程序的開發(fā)步驟
1.項目的立項及角色劃分2.客戶的需求分析3.總體設計4.詳細設計1)整體形象設計2)開發(fā)制作3)調試完善1-5-2Web應用程序的開發(fā)步驟1.項目的立項及角色劃15第2章HTML標記語言本章導讀
HTML語言是Web開發(fā)的基礎,是真正的瀏覽器語言,是B/S結構的客戶表現形式。本章從網頁的基本結構開始,通過實例詳細介紹了HTML語言中常用標簽的意義,屬性和用法,并結合頁面的美化,較系統(tǒng)地介紹了CSS樣式表的定義和使用。其中,重點介紹了鏈接<a>、表格<table>、表單<form>、輸入<input>4個標簽,它們是動態(tài)網頁和靜態(tài)網頁的鏈接,也是學習的重點和難點。最后本章通過兩個較完整的開發(fā)實例,系統(tǒng)地將整個HTML語言知識綜合應用。通過本章的學習,了解了網頁制作的基本原理并掌握了頁面的制作方法,為后面章節(jié)的學習打下了基礎。
第2章HTML標記語言本章導讀162-1HTML介紹超文本標記語言(HyperTextMarkupLanguage,HTML)是為“網頁創(chuàng)建和其他可在網頁瀏覽器中看到的信息”設計的一種標記語言。HTML被用來結構化信息,例如標題、段落和列表等,也可用來在一定程度上描述文檔的外觀和語義。HTML只是一個純文本文檔。創(chuàng)建一個HTML文檔(或稱為HTML文件),只需要兩個工具,一個是HTML編輯器,另一個是Web瀏覽器。HTML編輯器是用于生成和保存HTML文檔的應用程序。Web瀏覽器是用來打開Web網頁文檔,提供給我們查看Web資源的客戶端程序。包含HTML內容的文檔最常用的擴展名是.html,但是像DOS這樣的舊操作系統(tǒng)限制擴展名為最多3個字符,所以.htm擴展名也被使用。2-1HTML介紹超文本標記語言(Hy172-2頁面布局2-2-1html和body標簽
2-2-2head和title標簽
2-2-3p標簽
2-2-4div和span標簽
2-2-5img標簽
2-2-6a標簽
2-2-7br和hr標簽
2-2-8ol和li標簽
2-2頁面布局2-2-1html和body182-2-1html和body標簽
<html>標簽是一個成對標簽,用于定義整個HTML文檔的總結構,<html></html>在文檔的最外層,文檔中的所有文本和html標簽都包含在其中,它表示該文檔是以超文本標識語言(html)編寫的。
關于<body>標簽,主要有如下屬性,見表2-1。屬性描述link設定頁面默認的鏈接顏色alink設定鼠標正在單擊時的鏈接顏色vlink設定訪問后鏈接文字的顏色background設定頁面背景圖像bgcolor設定頁面背景顏色leftmargin設定頁面的左邊距topmargin設定頁面的上邊距text設定頁面文字的顏色2-2-1html和body標簽<html192-2-2head和title標簽
<head></head>是HTML文檔的頭部標簽,在此標簽中可以插入其他標簽,用以說明文檔的標題和整個文檔的一些公共屬性。若不需頭部信息則可省略此標簽,良好的習慣是不省略。<title>和</title>是嵌套在<head>頭部標簽中的,標簽之間的文本是文檔標題,它被顯示在瀏覽器窗口的標題欄。
例2.1最基本的頁面結構。<html><head><title>HTML示例</title></head><body>我的第一個HTML頁面</body></html>本頁面效果如圖2.1所示。2-2-2head和title標簽<h202-2-3p標簽例2.2段落標簽<p>的使用。<html><head><title>段落標簽的使用</title></head><body><p>超文本標記語言……</p><p>HTML語言于1982年,……</p></body></html><p>標簽是段落標簽,由<p>標簽所標識的文字,代表同一個段落的文字。單獨使用時,下一個<p>的開始就意味著上一個<p>的結束。良好的習慣是成對使用?;靖袷綖椋?lt;p>或<palign=屬性值>
圖2.2加入段落標簽后的效果具體效果如圖2.2所示。2-2-3p標簽例2.2段落標簽<p>的使用。<212-2-4div和span標簽<div>標簽可定義文檔中的分區(qū)或節(jié)。<div>標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具,并且不使用任何格式與其關聯。如果用id或class來標記<div>,那么該標簽的作用會變得更加有效。本章后面的內容將會具體介紹<div>標簽和css的結合使用。<span>標簽被用來組合文檔中的行內元素。<span>標簽沒有固定的格式表現。當對它應用css時,它才會產生視覺上的變化。2-2-4div和span標簽<div222-2-5img標簽網頁中插入圖片用單標簽<img>,當瀏覽器讀取到<img>標簽時,就會顯示此標簽所設定的圖像。表2-2<img>標簽的主要屬性屬性名描述src圖像的url路徑alt提示文字width寬度,通常設為圖片的真實大小以免失真,改變圖片大小時,最好使用圖像工具height高度,通常設為圖片的真實大小以免失真,改變圖片大小時,最好使用圖像工具lowsrc設定低分辨率圖片,若所加入的是一張很大的圖片,可先顯示圖片align圖像和文字之間的排列屬性border邊框hspace水平間距vlign垂直間距2-2-5img標簽網頁中插入圖片用單標232-2-6a標簽例2.4用于鏈接文檔中的特定位置的書簽鏈接。<html><body><p><ahref="#C4">查看第4章</a></p><h2>第1章</h2><p></p>……<a>和</a>標簽是用來建立超鏈接的標簽,其格式為:<ahref="資源地址"target="打開鏈接的窗口名稱"title="指向連接時顯示的文字">超鏈接名稱</a>
本頁面效果如圖2.4所示
屬性描述備注href定義了這個鏈接所指的目標地址target指定打開鏈接的目標窗口,有四種方式供選擇,其默認方式是原窗口_parent:在上一級窗口中打開,一般使用在有框架頁面中_blank:在新窗口中打開_self:在本窗口中打開,默認值_top:在瀏覽器的整個窗口中打開,忽略任何框架title用于指定指向鏈接時所顯示的標題文字2-2-6a標簽例2.4用于鏈接文檔中的特定位置242-2-7br和hr標簽換行標簽<br>是個單標簽,也稱空標簽,不包含任何內容,起到一個換行的作用。水平分隔線標簽<hr>是單獨使用的標簽,用于段落與段落之間的分隔,使文檔結構清晰明了,
表2-4<hr>標簽的主要屬性屬性參數功能單位默認值size設置水平分隔線的粗細pixel(像素)2width設置水平分隔線的寬度pixel(像素)或%100%alignleftcenterright設置水平分隔線的對齊方式centercolor設置水平分隔線的顏色blacknoshade取消水平分隔線的3d陰影表2-4<hr>標簽的主要屬性2-2-7br和hr標簽換行標簽<br>是252-2-8ol和li標簽例2.6序列標簽的使用。
<olstart="2"type="A"><li>數學</li><li>英語</li><li>語文</li></ol>……<ulstart="2"type="A"><li>數學</li><li>英語</li><li>語文</li></ul>……<ol>標簽用于表示有序列表,<ul>標簽用于表示無序列表具體效果如下圖2.6所示。屬性描述備注start編號開始的數字也可以在包含的<li>標簽中設定value="n"來改變列表行項目的特定編號,例如<livalue="7">type用于編號的數字、字母等的類型type=1表示列表項目用數字標號(1,2,3…)type=A表示列表項目用大寫字母標號(A,B,C…)type=a表示列表項目用小寫字母標號(a,b,c…)type=I表示列表項目用大寫羅馬數字標號(Ⅰ,Ⅱ,Ⅲ…)type=I表示列表項目用小寫羅馬數字標號(i,ii,iii…)2-2-8ol和li標簽例2.6序列標簽的使用。262-3表格2-3-1table標簽
2-3-2tr和td標簽
表格在網站中的應用非常廣泛,可以方便靈活地排版,很多網站也都是借助表格排版,表格可以把相互關聯的信息元素集中定位,使頁面一目了然。所以說要制作好網頁,就要學好表格。
2-3表格2-3-1table標簽272-3-1table標簽
表2-6<TABLE>標簽的主要屬性屬性描述align排列表格。不贊成使用。請使用樣式取而代之??蛇x值:left;center;rightbgcolor規(guī)定表格的背景顏色。不贊成使用。請使用樣式取而代之。border規(guī)定表格邊框的寬度??赏ㄟ^設置border="0"來顯示無邊框的表格。cellpadding規(guī)定單元邊沿與其內容之間的空白。cellspacing規(guī)定單元格之間的空白。width規(guī)定表格的寬度。2-3-1table標簽表2-6<TABLE>282-3-2tr和td標簽
在一個最基本的表格中,必須包含一組<table>標簽,一組標簽<tr>和一組<td>標簽。其中,<tr>在表格中定義一行;<td>定義表格中的一個單元格。例2.7基本表格。……<p>每個表格由table標簽開始。</p>……<h4>一行一列:</h4><tableborder="1"><tr><td>100</td></tr></table><h4>兩行三列:</h4><tableborder="1"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table>……本頁面的效果圖如圖2.7所示。2-3-2tr和td標簽在一個最基本的表格中292-4表單2-4-1
form標簽2-4-2input標簽2-4-3select和option標簽
表單在Web網頁中用來給用戶填寫信息,從而能采集客戶端信息,使網頁具有交互的功能。表單是由窗體和控件組成的,一個表單一般應該包含用戶填寫信息的輸入框,提交和按鈕等,這些輸入框、按鈕叫做控件,表單很像容器,它能夠容納各種各樣的控件。
2-4表單2-4-1form標簽表單在W302-4-1form標簽
<form>標簽具有action、method和target屬性,各屬性見下表2-7。屬性描述備注action用來接收表單信息并處理表單的程序的url地址如果這個屬性是空值則當前文檔的url將被使用method用來定義處理程序從表單中獲得信息的方式可取值為GET和POST的其中一個:a)
GET方法,瀏覽器會與表單處理服務器建立連接,然后直接在一個傳輸步驟中發(fā)送所有的表單數據:瀏覽器會將數據直接附在表單的actionURL之后。這兩者之間用問號進行分隔。b)
POST方法,瀏覽器首先將與action屬性中指定的表單處理服務器建立聯系,一旦建立連接之后,瀏覽器就會按分段傳輸的方法將數據發(fā)送給服務器。GET是html默認傳送方法。target用來指定目標窗口可選值:當前窗口:_self父級窗口:_parent頂層窗口:_top空白窗口:_blank基本的表單標簽的使用格式如下:<formaction="url"method=get|postname="myform"target="_blank"><!--表單內容-->2-4-1form標簽<form>標簽具有actio312-4-2input標簽用于獲取用戶的輸入信息,該標簽是單個標簽,沒有結束標簽。<INPUTtype="">標簽用來定義一個用戶輸入區(qū),用戶可在其中輸入信息。此標簽必須放在<form></form>標簽對之間。<inputtype="">標簽中共提供了9種類型的輸入區(qū)域,具體是哪一種類型由type屬性來決定。type屬性取值輸入區(qū)域類型控件的屬性及說明<inputtype="text"size=""maxlength="">單行的文本輸入區(qū)域,size與maxlength屬性用來定義此種輸入區(qū)域顯示的尺寸大小與輸入的最大字符數。(1)name定義控件名稱(2)value指定控件初始值,該值就是瀏覽器被打開時在文本框中的內容(3)size指定控件寬度,表示該文本輸入框所能顯示的最大字符數。(4)maxlength表示該文本輸入框允許用戶輸入的最大字符數。(5)onchang當文本改變時要執(zhí)行的函數(6)onselect當控件被選中時要執(zhí)行的函數(7)onfocus當文本接受焦點時要執(zhí)行的函數<inputtype="button">普通按鈕,當這個按鈕被點擊時,就會調用屬性onclick指定的函數;在使用這個按鈕時,一般配合使用value指定在它上面顯示的文字,用onclick指定一個函數,一般為JavaScript的一個事件。這三個按鈕有下面共同的屬性:(1)name指定按鈕名稱(2)value指定按鈕表面顯示的文字(3)onclick指定單擊按鈕后要調用的函數(4)onfocus指定按鈕接受焦點時要調用的函數<inputtype="submit">提交到服務器的按鈕,當這個按鈕被點擊時,就會連接到表單form屬性action指定的url地址。<inputtype="reset">重置按鈕,單擊該按鈕可將表單內容全部清除,重新輸入數據。2-4-2input標簽用于獲取用戶的輸322-4-2input標簽(續(xù)屬性表)<inputtype="checkbox"checked>一個復選框,checked屬性用來設置該復選框缺省時是否被選中。checkbox用于多選,有以下屬性:(1)name定義控件名稱(2)value定義控件的值(3)checked設定控件初始狀態(tài)是被選中的(4)onclick定義控件被選中時要執(zhí)行的函數(5)onfocus定義控件為焦點時要執(zhí)行的函數<inputtype="hidden">隱藏區(qū)域,用戶不能在其中輸入,用來預設某些要傳送的信息。hidden隱藏控件,用于傳遞數據,對用戶來說是不可見的;屬性有:(1)name控件名稱(2)value控件默認值(3)hidden隱藏控件的默認值會隨表單一起發(fā)送給服務器,例如:<inputtype="Hidden"name="ss"value="688">控件的名稱設置為ss,設置其數據為"688",當表單發(fā)送給服務器后,服務器就可以根據hidden的名稱ss,讀取value的值688;<inputtype="image"src="圖片的url地址">使用圖像來代替Submit按鈕,圖像的源文件名由src屬性指定,用戶點擊后,表單中的信息和點擊位置的X、Y坐標一起傳送給服務器。(1)name指定圖像按鈕名稱(2)src指定圖像的url地址<inputtype="password">輸入密碼的區(qū)域,當用戶輸入密碼時,區(qū)域內將會顯示"*"號。password口令控件表示該輸入項的輸入信息是密碼,在文本輸入框中顯示"*",屬性有:(1)name定義控件名稱(2)value指定控件初始值,該值就是瀏覽器被打開時在文本框中的內容(3)size指定控件寬度,表示該文本輸入框所能顯示的最大字符數。(4)maxlegnth表示該文本輸入框允許用戶輸入的最大字符數。<inputtype="radio">單選按鈕類型,checked屬性用來設置該單選框缺省時是否被選中。radio用于單選(1)name定義控件名稱(2)value定義控件的值(3)checked設定控件初始狀態(tài)是被選中的(4)onclick定義控件被選中時要執(zhí)行的函數(5)onfocus定義控件為焦點時要執(zhí)行的函數當為單選項時,所有按鈕的name屬性必需相同。2-4-2input標簽(續(xù)屬性表)<inputt332-4-2input標簽(例題)例2.9通過頁面獲得用戶的輸入信息。<html><body>問卷調查<br/><formaction="#"method="POST">1.你的姓名:<inputtype="text"name="year"/><br/>2.你的性別:<inputtype="radio"name="sex"checked="true"/>男<inputtype="radio"name="sex"/>女<br/><inputtype="submit"value="提交我的問卷"/></form></body></html>本頁面中,在表單中定義了4個輸入控件,一個文本框,一對單選按鈕和一個提交按鈕,當用戶輸入數據并單擊“提交我的問卷”按鈕,生成的參數就可以提交到表單標簽中action屬性指定的url地址,在本例中“#”表示提交到本頁面。具體效果如圖2.9所示。圖2.9通過頁面獲得用戶的輸入信息
2-4-2input標簽(例題)例2.9通過頁面342-4-3select和option標簽<select></select>標簽對用來創(chuàng)建一個菜單下拉列表框。<option>標簽用來指定列表框中的一個選項,它放在<select></select>標簽對之間。
例2.10一個簡單的下拉選項框。<html><head><title>下拉選項框</title></head><body><form>請選擇你喜歡的車型:<selectname="cars"><optionvalue="volvo">Volvo</option><optionvalue="saab">Saab</option><optionvalue="fiat">Fiat</option><optionvalue="audi">Audi</option></select></form></body></html>本例中,當你選擇了某種車型,例如選擇“Audi”,表單將會提交參數cars=audi,將數據交給form標簽中的action屬性指定的url地址。本頁面效果如圖2.10所示。圖2.10一個簡單的下拉選項框
2-4-3select和option標簽<sel352-5頁面美化
2-5-1font標簽2-5-2strong和b標簽2-5-3i和u標簽2-5-4marquee標簽2-5-5CSS標簽2-5-6CSS綜合運用2-5頁面美化2-5-1font標簽362-5-1font標簽
<font>標簽用于控制文字的字體,大小和顏色。控制方式是利用屬性設置得以實現的。關于<font>標簽,主要有如下屬性,見表2-9。屬性描述默認值face設置文字使用的字體宋體size設置文字的大小3color設置文字的顏色黑色<font>標簽的一般使用格式為:<fontface="屬性值"size="屬性值"color="屬性值">文字</font>
2-5-1font標簽<font>標簽372-5-2strong和b標簽在有關文字的顯示中,常常會使用一些特殊的字形或字體來強調、突出、區(qū)別以達到提示的效果。其中,<strong>標簽用于特別強調的文本,該標簽修飾的文字內容顯示為粗體字。<b>標簽為粗體標簽,放在<b>與</b>標簽對之間的文字將以粗體方式顯示。2-5-2strong和b標簽在382-5-3i和u標簽
例2.11文字標簽的綜合運用。<html><body>文字標簽的應用<br/><p>本段文字使用了<fontface="黑體"size="10"color="red">font標簽</font>來定義字體。</p><p>本段文字包含了<b>粗體</b>,<strong>強調</strong>,<i>斜體</i>,和<u>下畫線</u>等多種修飾文字。</p></body></html>
<i>標簽為斜體標簽,放在<i>與</i>標簽對之間的文字將以斜體方式顯示。<u>標簽為下畫線標簽,放在<u>與</u>標簽對之間的文字將以下畫線方式顯示。圖2.11文字標簽的綜合應用本例效果如圖2.11所示。示。2-5-3i和u標簽例2.11文字標簽的綜合運392-5-4marquee標簽<marquee>標簽可以實現元素在網頁中移動的效果,以達到動感十足的視覺效果。<marquee>標簽是一個成對的標簽,其應用格式為:<marquee>...</marquee><marquee>標簽有很多屬性,用來定義元素的移動方式,具體屬性見下表2-10。
屬性描述備注align指定對齊方式top,middle,bottombehavior指定移動方式scroll表示單向滾動slide表示滾動到一方后停止alternate表示滾動到一方后向相反方向滾動。bgcolor設定文字滾動范圍的背景顏色loop設定文字滾動次數其值可以是正整數或infinite表示無限次,默認為無限循環(huán)height設定字幕高度width設定字幕寬度scrollamount指定每次滾動的速度數值越大滾動越快scrolldelay文字每一次滾動的停頓時間,單位是毫秒。時間越短滾動越快hspace指定字幕左右空白區(qū)域的大小vspace指定字幕上下空白區(qū)域的大小direction設定文字的滾動方向可選值:left表示向左right表示向右up表示往上滾動down表示向下滾動2-5-4marquee標簽<marquee>標簽可402-5-4marquee標簽(例題)例2.12滾動效果的實例<html><head><title></title></head><body><marquee>我會跑了</marquee><p><marqueeheight="200"direction="up"hspace="200">我會往上跑了</marquee><p><marqueewidth="500"behavior="alternate">我來回地跑</marquee><P><marqueescrolldelay="300">我要走走停停</marquee><p><marquee><imgsrc="go.jpg">圖片也可以</marquee></body></html>
本頁面的效果如圖2.12所示,頁面中文本和圖片可以按預定的方向和速度移動,為頁面增加了動感效果。圖2.12滾動效果的實例效果圖2-5-4marquee標簽(例題)例2.12412-5-5CSS
CSS是CascadingStyleSheets(層疊樣式表單)的簡稱。很多人把它稱作樣式表。CSS用于設計網頁樣式,借助CSS的強大功能,網頁將在設計者豐富的想象力下千變萬化。CSS語法非常簡單,組成CSS語法的元素只有CSS選擇符與CSS屬性。每個CSS選擇符由1個或多個CSS屬性組成。CSS對大小寫不敏感,在CSS語法中推薦使用小寫。網頁引用CSS有三種方式:外部引用、內部引用、內聯引用。其中外部引用是W3C推茬的方式。
2-5-5CSSCSS是Casc422-5-6CSS綜合運用例2.13CSS的綜合應用(為使讀者能對比css代碼,本例采用內部引用方式)。<html><head><styletype="text/css">a:link{color:RED;font-size:9PT;text-decoration:NONE}a:VISITED{color:BLUE;font-size:9PT;text-decoration:NONE}A:HOVER{color:GREEN;font-size:15PT;text-decoration:UNDERLINE}
.littlered{color:RED;font-size:10px}.littlegreen{color:GREEN;font-size:24px}
#yellowp{color:YELLOW}</style></head><body><ahref="#">使用標簽選擇器的超級鏈接,靠近并點擊查看效果。</a><br><br><divclass="littlered">本段采用紅色,而且比較小。</div><pclass="littlegreen">本段采用綠色,而且比較大。</p><pid=yellowp>本段采用ID選擇符號。</P></body></html>本頁面的效果圖如圖2.13所示。圖2.13css的綜合應用2-5-6CSS綜合運用例2.13CSS的綜合應432-6框架2-6-1iframe標簽2-6-2frameset和frame標簽框架就是把一個瀏覽器窗口劃分為若干個小窗口,每個窗口可以顯示不同的網頁。使用框架可以非常方便地在瀏覽器中同時瀏覽不同的頁面,也可以非常方便地完成導航工作。
2-6框架2-6-1iframe標簽442-6-1iframe標簽
<iframe>是內嵌框架標簽,它的作用是在瀏覽器窗口中可以嵌入一個框來顯示另一個網頁或其他文件。frame>的參數設定格式如下:<iframesrc="iframe.html"name="test"align="MIDDLE"width="300"height="100"marginwidth="1"marginheight="1"frameborder="1"scrolling="Yes">屬性描述src浮動窗框中的要顯示的頁面文件的路徑,可以是相對或絕對路徑name此框窗名稱,這是連接標記的target參數所需要的align可選值為left,right,top,middle,bottom,作用不大height框窗的高,以pixels為單位width框窗的寬,以pixels為單位marginwidth該插入的文件與框邊所保留的空間marginheight該插入的文件與框邊所保留的空間frameborder使用1表示顯示邊框,0則不顯示。(可以是Yes或No)scrolling使用Yes表示允許卷動(內定),No則不允許卷動<iframe>標簽主要屬性見下表2-11
2-6-1iframe標簽<iframe>是內嵌452-6-2frameset和frame標簽為區(qū)獲得更靈活的框架結構,需要組合使用frameset>標簽和<frame>標簽?;窘Y構格式如下:<html><head></head><frameset><framesrc="url地址1"><framesrc="url地址2">
<frameset></html>
<frameset>標簽的主要屬性如下表2.12屬性描述border設置邊框粗細,默認是5像素bordercolor設置邊框顏色frameborder指定是否顯示邊框:"0"代表不顯示邊框,"1"代表顯示邊框cols用于水平方向的分割。用"像素數"或"%"分割左右窗口,"*"表示剩余部分rows用于垂直方向的分割。用"像素數"或"%"分割上下窗口,"*"表示剩余部分framespacing表示框架與框架間的保留空白的距離noresize設定框架不能夠調節(jié)2-6-2frameset和frame標簽462-6-2frameset和frame標簽(續(xù))
<frame>標簽的主要屬性如下表2.13屬性描述src指定在子框架中要加載的文件的url地址bordercolor設置邊框顏色frameborder指定是否要邊框,“1”表示顯示邊框,“0”表示不顯示邊框border設置邊框粗細name指定框架名稱,是連接標簽的target所要的參數noresize指定不能調整窗口的大小,省略此項時就可調整scorlling指定是否要滾動條,“auto”表示根據需要自動出現,“Yes”表示有滾動條,“No”表示無滾動條marginwidth設置內容與窗口左右邊緣的距離,默認為“1”marginheight設置內容與窗口上下邊緣的邊距,默認為“1”width框窗的寬及高默認為width="100",height="100"align可選值為left,right,top,middle,bottom例2.15一個嵌套排列的框架。<html><head></head><framesetrows="20%,*,15%"framespacing="1"frameborder="yes"border="1"><framesrc="frame1.html"><framesetcols="20%,*"framespacing="1"frameborder="yes"border="1"><framesrc="frame2.html"><framesrc="frame3.html"></frameset><framesrc="frame4.html"></frameset><noframes></noframes></html>本頁面是由4個頁面組成的,通過<frameset>標簽進行了組合,具體效果如圖2.15所示。2-6-2frameset和frame標簽(續(xù))47第3章Dreamweaver本章導讀
Dreamweaver作為最常用的靜態(tài)網頁設計工具,是從事Web開發(fā)必須要掌握的一個工具。本章先從Dreamweaver的安裝和基本界面開始介紹,通過以常用網頁開發(fā)實例,較詳細介紹了Dreamweaver的使用和其中命令和參數的意義,并結合一些簡單但頗具特點的實例,給出了常規(guī)的操作步驟。其中,重點介紹了框架,模板和CSS的操作步驟和注意事項,這也是學習和使用Dreamweaver的重點和難點。最后本章通過一個完整的網站開發(fā)實例,將整個HTML語言,CSS的設計,以及Dreamweaver的使用進行了綜合。通過本章的學習,進一步了解了網頁制作的方法并掌握了網頁制作的重要工具之一——Dreamweaver的使用,為后面章節(jié)的學習打下了基礎
第3章Dreamweaver本章導讀483-1概述Dreamweaver是由Macromedia公司(該公司于2005年被Adobe公司收購)推出的,用于網頁開發(fā)和網站管理的專業(yè)化設計工具。它歷經多年發(fā)展,和Flash,Flreworks并稱為網頁制作三劍客。目前的最新版本為DreamweaverCS4,本書采用Dreamweaver8進行介紹。Dreamweaver采用了所見即所得技術,具有設計和開發(fā)網站過程中需要的網站管理、網站設計、頁面制作、多媒體制作和動畫制作等豐富實用的功能;它具有友好的操作界面,在文檔窗口中可以打開各種浮動面板,同時還可以使用系統(tǒng)內置的多種對象進行操作,利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。Dreamweaver有一個最主要的缺點。在所見即所得網頁編輯器中制作的網頁,在瀏覽器中瀏覽時,很難完全達到在Dreamweaver中設計時的效果。3-1概述Dreamweaver是由M493-1-1安裝Dreamweaver8的安裝非常簡單。首先運行已經獲得的Dreamweaver8安裝程序,出現如圖3.1所示安裝界面。
3-1-1安裝Dreamweaver8的安裝非常503-1-2操作界面菜單欄插入面板組
文檔工具欄屬性面板浮動面板3-1-2操作界面菜單欄插入面板組文檔工具欄屬性513-1-3站點管理利用“管理站點”工具創(chuàng)建站點的步驟:執(zhí)行“站點”→“管理站點→”新建”為站點命名靜/動態(tài)站點選擇選擇站點文件存貯位置設置站點如何與遠程服務器連接設置完成完成按鈕已建好的站點3-1-3站點管理利用“管理站點”工具創(chuàng)建站點的步驟523-2頁面布局
3-2-1創(chuàng)建內容豐富的頁面3-2-2表格3-2-3表單3-2-4模板3-2-5框架3-2頁面布局3-2-1創(chuàng)建內容豐富的頁面533-2-1創(chuàng)建內容豐富的頁面創(chuàng)建內容豐富的頁面可分6個部分:(1)插入文本
(2)編輯文本格式
(3)插入特殊字符
(4)插入圖片
(5)設置圖像屬性
(6)設置超鏈接
3-2-1創(chuàng)建內容豐富的頁面創(chuàng)建內容豐富的頁面可分6個部543-2-2表格表格的操作可以分為4個部分:(1)插入表格
(2)設置表格屬性(3)設置單元格屬性(4)拆分與合并單元格利用單元格屬性面板上的“拆分”按鈕和“合并”按鈕即可
“常用”快捷工具欄中的“表格”按鈕表格屬性對話框單元格屬性對話框3-2-2表格表格的操作可以分為4個部分:利用單元格屬553-2-3表單執(zhí)行“插入”→“表單”菜單命令,或選擇“插入”欄上的“表單”類別都可以在頁面上插入表單,利用“表單屬性”對話框可以對表單進行設置表單屬性對話框“動作”文本框中指定處理該表單的動態(tài)或腳本的路徑?!胺椒ā毕吕斜碇?,選擇將表單數據傳輸到服務器的方法。表單“方法”有:POST和GET方法。“目標”彈出式菜單指定一個窗口,在該窗口中顯示調用程序所返回的數據。3-2-3表單執(zhí)行“插入”→“表單”菜單命令,或選擇“563-2-4模板創(chuàng)建模板:利用“窗口”→“資源”菜單命令,打開“資源”面板可建立模板使用模板:(1)執(zhí)行“文件”→“新建”菜單命令,打開“新建文檔”對話框。(2)然后在類別中選擇“模板頁”,并選取相關的模板類型,直接單擊“創(chuàng)建”按鈕即可。3-2-4模板創(chuàng)建模板:利用“窗口”→“資源”菜573-2-5框架創(chuàng)建和使用框架(1)使用預制框架集快捷工具欄中單擊“布局”按鈕,接著單擊“框架”按鈕,在右圖中選擇框架結構(2)保存框架保存時,可以執(zhí)行“文件”→“保存全部”菜單命令,將整個框架集保存為index.html,上方框架保存為top.html,左側框架保存為left.html,右側框架保存為right.html。(3)編輯框架利用框架面板(4)添加鏈接打開框架選擇框架結構框架面板選擇要打開鏈接的子框架3-2-5框架創(chuàng)建和使用框架(1)使用預制框架583-3頁面美化3-3-1樣式表3-3-2層3-3-3動態(tài)效果3-3-4插入Flash動畫3-3-5插入視頻3-3頁面美化3-3-1樣式表593-3-1樣式表CSS樣式表的創(chuàng)建,可以統(tǒng)一定制網頁文字的大小、字體、顏色、邊框、鏈接狀態(tài)等效果。使用Dreamweaver創(chuàng)建CSS(1)執(zhí)行“窗口”→“CSS樣式”菜單命令,打開CSS樣式面板
(2)單擊“CSS樣式”面板右下角的“新建CSS規(guī)則”按鈕
(3)為新建CSS樣式輸入或選擇名稱或選擇器
(4)在“定義”項中選擇定義的樣式位置
(5)在“CSS規(guī)則定義”對話框中設置CSS規(guī)則定義
“CSS規(guī)則定義”對話框(2)“新建CSS規(guī)則”對話框CSS樣式面板3-3-1樣式表CSS樣式表的創(chuàng)建,可以統(tǒng)一定制網頁文字603-3-2層層是CSS中的定位技術,在Dreamweaver8中對其進行了可視化操作
創(chuàng)建普通層(1)插入層。執(zhí)行“插入”→“布局對象”→“層”菜單命令,即可將層插入頁面中。(2)拖放層(3)繪制層創(chuàng)建嵌套層(1)將光標放入某層內,執(zhí)行“插入”→“布局對象”→“層”菜單命令,則可創(chuàng)建嵌套層。(2)打開層面板,從中選擇需要嵌套的層,此時按住“Ctrl”鍵同時拖動該層到另一個層上,直到出現圖標后,釋放“Ctrl”鍵和鼠標,這樣普通層就轉換為嵌套層了。(3)設置層的屬性,可以通過“層屬性對話框”來設置。層屬性對話框3-3-2層層是CSS中的定位技術,在Dreamw613-3-3動態(tài)效果
要設置標簽的行為,首先需要選中相應的標簽。由于不同的標簽具有不同的行為,選中某個標簽后,在浮動窗口選擇“標簽”窗口中的“行為”選項卡,單擊“+”按鈕,就可以看到該標簽可以添加的行為。右圖是選中<body>標簽時的行為。“行為”選項卡3-3-3動態(tài)效果要設置標簽的623-3-4插入Flash動畫執(zhí)行菜單欄中的“插入”→“媒體”→“Flash”命令。在彈出的“選擇文件”對話框中,選擇要插入的swf文件。單擊“確定”按鈕后,插入的Flash動畫并不會在文檔窗口中顯示內容,而是以一個帶有字母F的灰色框來表示,如右圖。
可以在屬性面板中設置它的屬性
插入的Flash動畫
動畫屬性面板3-3-4插入Flash動畫執(zhí)行菜633-3-5
插入視頻
執(zhí)行“插入”→“媒體”→“ActiveX”菜單命令。在彈出的“對象標簽輔助功能屬性”對話框中,為要插入的視頻文件設置一個標題和訪問鍵
可以通過視頻屬性面板插入的視頻文件視頻屬性面板“對象標簽輔助功能屬性”對話框3-3-5插入視頻執(zhí)行“插入”→“媒64第4章Web應用程序的開發(fā)環(huán)境本章導讀Web應用程序是在客戶端瀏覽器和服務器端的Web服務器兩端執(zhí)行,所以,程序的開發(fā)環(huán)境設置包括客戶端的瀏覽器設置,服務器端IIS的設置、開發(fā)ASP應用程序的DreamWeaver設置,以及開發(fā)ASP.NET應用程序的VisualStudio的設置。本章詳細介紹了ASP和ASP.NET開發(fā)環(huán)境的配置,即客戶端的IE瀏覽器和服務器端的IIS服務器,對于開發(fā)環(huán)境則需要安裝DreamWeaver和VisualStudio。
第4章Web應用程序的開發(fā)環(huán)境本章導讀654-1瀏覽器設置對客戶端的瀏覽器進行必要的設置可以簡化很多測試過程和避免一些開發(fā)問題。就以IE瀏覽器為例來講解瀏覽器的設置。首先打開IE瀏覽器,選擇工具菜單里面的Internet選項,(如下圖所示)便可進行設置,在Web程序開發(fā)中主要設置“高級”、“安全”(包括“隱私”)兩大項。4-1瀏覽器設置對客戶端的瀏覽器進行必要的664-1-1Internet選項設置
Web應用程序的客戶端腳本程序要在瀏覽器中執(zhí)行,而且服務器端應用程序執(zhí)行的結果也要在瀏覽器中反映,所以必須對Internet選項中“高級”選項卡中的以下四項進行設置,如下圖。
“顯示每個腳本錯誤的通知”要選中:標明在每一個客戶端腳本的執(zhí)行錯誤都要顯示在瀏覽器的左下角
“顯示友好http錯誤信息”在開發(fā)過程中必須關閉。
“禁用腳本調試”必須關閉:表明如果客戶端的腳本發(fā)生錯誤,系統(tǒng)會提示使用相應的程序跟蹤調試程序,如下圖所示。提示腳本錯誤調試4-1-1Internet選項設置Web應用程序的客戶674-1-2安全設置安全設置包括:安全和隱私兩項。隱私:選擇“隱私”標簽,設置相應的Cookie級別,一般選擇“中”即可。安全:選擇“安全”標簽,在“區(qū)域的安全級別”中設置相應的安全級別,或選擇“自定義級別”,如下圖:4-1-2安全設置安全設置包括:安全和隱私兩項。隱私:選擇684-2ASP開發(fā)環(huán)境開發(fā)ASP應用程序之前必須安裝Web服務器,在Windows操作系統(tǒng)中通常安裝IIS作為Web服務器,程序開發(fā)環(huán)境通常采用DreamWeaver或者文本編輯器。4-2-1IIS的安裝
安裝:“控制面板”“添加/刪除”“添加/刪除Windows組件”選中“Internet信息服務(IIS)”,下一步即可。
啟動IIS管理器:(1)從“運行”對話框中啟動IIS管理器,執(zhí)行“開始”→“運行”菜單命令,然后在打開的對話框中輸入“inetmgr”,單擊“確定”按鈕即可打開IIS管理器。(2)通過控制面板的管理工具中的快捷方式啟動IIS管理器。IIS主界面4-2ASP開發(fā)環(huán)境開發(fā)ASP應用程序之前必須安裝Web694-2-2IIS的配置
IIS安裝后,通常會有一個默認網站,IIS的配置就是通過“默認網站屬性”對話框來實現的“默認網站屬性”對話框IIS的配置分為以下內容:1.網站標識設置2.主目錄設置3.默認文檔設置4.ASP開發(fā)環(huán)境的測試4-2-2IIS的配置IIS安裝后,通常704-3ASP.NET開發(fā)環(huán)境
4-3-1IIS的配置
IIS即可以作為ASP環(huán)境的Web服務器,也可以作為ASP.NET的Web服務器。在IIS所在的服務器上面安裝Microsoft.NETFramework即可作為ASP.NET的Web服務器,用于開發(fā)的計算機,安裝了VisualStudio2005就可以作為ASP.NET的Web服務器。4-3-2安裝VisualStudio2005VisualStudio2005是一套完整的開發(fā)工具集,用于開發(fā)ASP.NET應用程序、桌面應用程序和移動應用程序等,VisualStudio2005的安裝非常簡單,從安裝光盤啟動安裝程序,打開其安裝界面,按提示操作便可安裝完成。4-3ASP.NET開發(fā)環(huán)境4-3-1IIS的配置714-3-3VisualStudio2005的使用1.集成開發(fā)環(huán)境2.項目系統(tǒng)3.編輯器和設計器4.生成和調試工具5.產品文檔VisualStudio2005主界面
調試工具窗口解決方案資源管理器調試代碼窗口設計視圖代碼視圖4-3-3VisualStudio2005的使用1.724-3-4ASP.NET開發(fā)環(huán)境應用
創(chuàng)建一個新站點
添加一個HelloWorld頁面
為頁面編寫代碼
在ASPX文件中調用SayHello方法
編譯網站并從VisualStudio2005中運行該Web站點
發(fā)布網站
4-3-4ASP.NET開發(fā)環(huán)境應用創(chuàng)建一個新站點73第5章客戶端程序設計
本章導讀
通過前面章節(jié)的學習,已經知道Web頁面首先在服務器端執(zhí)行服務器端程序,然后通過網絡把服務器端形成的HTML文檔傳送到客戶端,客戶端解釋HTML標記并且執(zhí)行客戶端腳本程序。本章主要介紹客戶端腳本程序的編寫??蛻舳四_本程序的編寫可以采用VBScript,也可以采用JavaScript,JavaScript使用比較普遍,語法結構也簡單,所以本章只介紹使用JavaScript編寫客戶端程序。
第5章客戶端程序設計本章導讀745-1JavaScript介紹
JavaScript一些基本的語法:JavaScript是一種解釋型的、基于對象的腳本語言。
JavaScript是一種寬松類型的腳本語言。JavaScript程序是語句的集合,一條語句由一個或多個表達式、關鍵字或者運算符組成。不能使用JavaScript來編寫獨立運行的應用程序JavaScript只能在某個解釋器或“宿主”上運行。HTML文檔包含HTML標記和腳本程序,兩者融合在一起就形成了HTML文檔。5-1JavaScript介紹JavaScript一些755-2客戶端嵌入并執(zhí)行腳本程序
5-2-1把腳本嵌入HTML標簽中
(1)通過script標簽插入腳本程序塊,這種方式通過在HTML標簽中添加script標簽,標簽頭為<scriptlanguage="javascript">,標簽尾為</script>,在標簽頭和尾中間加入JavaScript程序代碼。
(2)通過script腳本的src屬性包含JS文件,這種方式通過在HTML中添加script標簽,標簽頭為<scriptsrc=“xxx.js”>,標簽尾為</script>。以上兩種嵌入腳本方式的區(qū)別是:第一種方式的腳本程序在script標簽頭和標簽尾中間,第二種方式的腳本程序在xxx.js這個腳本程序文件里面。
(3)通過HTML對象的事件嵌入腳本程序,這種方式通過HTML對象的一系列事件處理函數嵌入腳本。(4)通過script標簽定義HTML對象的事件方式嵌入腳本程序,這種方式和第三種方式都是通過定義HTML對象的事件來嵌入腳本程序,這種方式定義對象的事件和第三種方式定義對象的事件所使用的代碼方式不同。5-2客戶端嵌入并執(zhí)行腳本程序5-2-1把腳本嵌入765-2-2腳本嵌入HTML中的位置
腳本程序可以通過四種方式嵌入HTML文檔中的任何位置,但是為了程序的邏輯關系清楚、可讀性強,一般把腳本程序插入在HTML文檔的以下幾個地方:(1)插入在<head>標簽中,<title>標簽后;(2)插入在<head>標簽之后,<body>標簽之前;(3)插入在<body>標簽中間;(4)插入在HTML文檔最后;(5)插入在HTML對象的事件處理函數中。
5-2-2腳本嵌入HTML中的位置腳本程序可以通過四種775-2-3腳本程序執(zhí)行
嵌入在HTML文檔中的JavaScript,在Web頁面加載完成后就要在客戶端的瀏覽器中解釋執(zhí)行,腳本的執(zhí)行有以下三種方式。
(1)腳本順序執(zhí)行。(2)HTML對象事件觸發(fā)執(zhí)行。(3)庫函數控制執(zhí)行。例:<html><head><title>腳本程序插入的位置演示</title><scriptlanguage="javascript">varStr="Java";</script></head><scriptlanguage="javascript">Str+="Script";</script><body><scriptlanguage="javascript">Str+="Example";</script><inputtype="button"value="按鈕"name="Obj"onclick="alert(Str);"></body></html><scriptlanguage="javascript">alert(Str);</script>
執(zhí)行效果圖5-2-3腳本程序執(zhí)行嵌入在HTML文檔中的Java785-3IE內置對象
5-3-1HTML對象
HTML標簽嵌套在一起就形成一個HTML文檔,瀏覽器解釋HTML文檔形成一個可視化的網頁窗口,每一個HTML標簽就對應窗口中的一個對象。例如HTML代碼:<body><p><b>HTML</b>實例</p></body>,body標簽通過瀏覽器解釋后就是頁面的主體對象,內部的p標簽和b標簽以及文本都是主體對象的內容,p標簽通過瀏覽器解釋后就是段落對象,同樣,p標簽內部的b標簽和文本就是段落對象的內容。
5-3IE內置對象5-3-1HTML對象795-3-2Document對象
Document對象有很多屬性、方法和事件,常用屬性、方法和事件如下:(1)bgColor屬性,設置或獲取表明對象后面的背景顏色的值。(2)URL屬性,設置或獲取當前文檔的URL地址。(3)readyState屬性,獲取Document對象的當前狀態(tài)的值。(4)all集合,返回Document對象所包含的元素集合的引用。(5)forms集合,獲取以源順序排列的文檔中所有表單對象的集合。(6)frames集合,獲取給定文檔定義或與給定窗口關聯的文檔定義的所有窗口對象的集合。(7)write方法,在指定窗口的文檔中寫入一個或多個HTML表達式。(8)writeln,在指定窗口的文檔中寫入一個或多個HTML表達式,后面追加一個換行符。
5-3-2Document對象Document對象有很805-3-3
Window對象
Window對象常用的屬性和方法如下:(1)top屬性,獲取最頂層的窗口對象。(2)defaultStatus屬性,設置或獲取要在窗口底部的狀態(tài)欄上顯示的默認信息。(3)Alert(字符串)方法,顯示包含由應用程序自定義消息的對話框。(4)close()方法,關閉當前瀏覽器窗口或HTML應用程序。(5)Confirm(字符串)方法,顯示一個確認對話框,其中包含一個可選的消息和確定取消按鈕。(6)focus()方法,使得元素得到焦點并執(zhí)行由onfocus事件指定的代碼。(7)Open(URL地址)方法,打開新窗口并裝入給定URL的文檔。
5-3-3Window對象Window對象常用的屬性815-4JavaScript語法
標識符:(1)第一個字符必須是字母或者下畫線;(2)后續(xù)的字符必須是字母、數字或者下畫線;(3)標識符不能和關鍵字沖突。變量:顯式和隱式,兩種定義變量方式不同數據類型:基本數據類型、復合數據類型和特殊數據類型,其中基本數據類型有字符串、數值、布爾,復合數據類型有對象、數組,特殊數據類型有Null、Undefined。5-4-1變量和標識符
運算結果數值與字符串相加將數值強制轉換為字符串布爾值與字符串相加將布爾值強制轉換為字符串數值與布爾值相加將布爾值強制轉換為數值數據類型轉換5-4JavaScript語法標識符:5-4-1825-4-2運算符和表達式
運算符(1)算術運算符:其中包括+、++、-、--、*、/、%(2)位運算符:與“&”、或“|”異或“^”取非“~”(單目)、左移“<<”、右移“>>”邏輯右移“>>>”(3)邏輯運算符:&&、||、?。?)關系運算符:等于“==”、不等于“!=”、小于“<”、大于“>”、小于等于“<=”、大于等于“>=”、嚴格等于“===”、嚴格不等于“!==”(5)賦值運算符:“=”、“+=”、“-=”、“*=”、“/=”、“%=”、“&=”、“|=”、“^=”、“<<=”、“>>=”、“>>>=”、(6)其他運算符:條件操作符“(條件表達式)?:表達式1,表達式2”、成員選擇運算符“.”、下標運算符“[]”、逗號運算符“,”、函數調用運算符“()”、“delete”、“new”、“typeof”、“void”、“this”。5-4-2運算符和表達式運算符83運算符的優(yōu)先級優(yōu)先級運算符1成員選擇、括號、函數調用、數組下標2!、-(負號)、++、--、typeof、new、void、delete3*、/、%4+、-5<<、>>、>>>6<、<=、>、>=7==、!=、===、!==8&9^10|11&&12||13?:14=、+=、-=、*=、/=、%=、<<==、>>==、>>>==、&=、|=、^=15逗號運算符(,)表達式:表達式就是由運算符、常量和變量組成的式子,按照使用的運算符不同,可以把表達式分成算數表達式、邏輯表達式、關系表達式等,表達式的值按照運算符的優(yōu)先級進行運算。運算符的優(yōu)先級優(yōu)先級運算符1成員選擇、括號845-4-3控制語句1.if語句其基本的格式如下:if(表達式){語句組;}2.if-else語句if-else語句的格式如下:if(表達式){語句組1;}else{語句組2;}3、switch語句基本格式如下:switch(表達式){case常量表達式1:語句組1;break;case常量表達式2:語句
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 單位管理制度呈現合集【人員管理篇】十篇
- 單位管理制度呈現大合集【人力資源管理篇】
- 3D視覺傳感器公司企業(yè)文化管理方案
- 《病歷標準性書寫》課件
- 《電子商務復習》課件
- 2024年大學生暑期個人社會實踐總結
- 中小學開學第一課373
- 電商行業(yè)行政后勤工作總結
- 七夕之愛 讓企業(yè)生輝
- 2023-2024年項目安全培訓考試題鞏固
- 《電工技術》課件-電氣安全及電氣火災預防
- 湖南省湘西州吉首市2023屆九年級上學期期末素質監(jiān)測數學試卷(含解析)
- 2023-2024學年湖北省武漢市東西湖區(qū)三年級(上)期末數學試卷
- GB/T 31771-2024家政服務母嬰護理服務質量規(guī)范
- 2023-建筑施工技02課件講解
- 期末試卷:福建省廈門市集美區(qū)2021-2022學年八年級上學期期末歷史試題(原卷版)
- 美容院2024年度規(guī)劃
- 裝飾裝修巡查記錄表
- 公司安全生產事故隱患內部報告獎勵工作制度
- 艾滋病預防知識講座
- 零售服務質量提升
評論
0/150
提交評論