《Web基礎(chǔ)知識(shí)》PPT課件

1、JSP動(dòng)態(tài)網(wǎng)站開發(fā),工商管理學(xué)院電子商務(wù)教研室,第2章 Web基礎(chǔ)知識(shí),2,一、Web發(fā)展及HTTP協(xié)議,1、客戶端技術(shù)： HTML( HyperText Markup Language )； JavaScript； CSS( Cascading Style Sheets )。,2、服務(wù)器端技術(shù)： ASP( Active Server Pages )：Windows系統(tǒng)下Web服務(wù)器端的主流開發(fā)技術(shù)； 1997年Servlet技術(shù)問世，1998年JSP技術(shù)誕生； Web的未來：語義Web XML( EXtensible Markup Language)。,B/S,3,二、HTML 超文本標(biāo)記語

2、言,1、為什么要學(xué)HTML： 制作任何類型網(wǎng)頁的基礎(chǔ) HTML是JSP和Servlet的基礎(chǔ)； JSP = 含有Java代碼的HTML頁面 hello.jsp； Servlet = 含有HTML的Java程序 hello.java 。,2、HTML標(biāo)記結(jié)構(gòu)：, this is my HTML page. ,4,HTML 標(biāo)記,（、 ）,（、 、 、 ）,（、),（、 ),（、 、 、),HTML標(biāo)記分類,5,結(jié)構(gòu)化標(biāo)記,功能：用來描述Web頁面的整體結(jié)構(gòu)。 Html基本結(jié)構(gòu)：, 網(wǎng)頁的標(biāo)題 網(wǎng)頁的內(nèi)容 , 網(wǎng)頁的標(biāo)題 網(wǎng)頁的內(nèi)容 ,6,xx.htm,網(wǎng)頁標(biāo)題 ,HTML文件結(jié)構(gòu),7,文本標(biāo)記,

3、功能：編排文本內(nèi)容的布局和格式； 包含的標(biāo)記： 文本布局：、 文本格式：、 color屬性：可以是16種預(yù)定義標(biāo)準(zhǔn)色，也可以是6位16進(jìn)制的色彩。,8,結(jié)構(gòu)化標(biāo)記, align：對(duì)齊方式，和常用的屬性； 常用于將內(nèi)容分層次，常和CSS聯(lián)合使用。 列表標(biāo)記：,無序列表：星期日星期一,有序列表： 星期日星期一 ,2.2格式排版1,類似于Word文檔中的標(biāo)題，事先定義好文字的字體、大小的一組標(biāo)簽，成對(duì)出現(xiàn)；,每行標(biāo)題后會(huì)自動(dòng)添加一行空白。,段落、 換行、 預(yù)格式化、 水平線、 對(duì)齊方式,設(shè)計(jì)時(shí)的排版與瀏覽時(shí)相同，保留代碼中的回車換行和空格。,Size=“” Width=“”noshade, , ,2

4、.2格式排版2,標(biāo)簽,src：圖像文件的路徑，推薦使用相對(duì)路徑，此屬性值必須提供；,圖像以單獨(dú)的文件形式存在，設(shè)計(jì)時(shí)要保證圖像的src屬性正確指向圖像文件。,alt：替代圖像的信息文字，或鼠標(biāo)停留在圖上時(shí)跟隨鼠標(biāo)的小提示；,2.2格式排版3,以定義好三種列表方式；,無序列表,有序列表,項(xiàng)目1 項(xiàng)目2 項(xiàng)目3, 項(xiàng)目1 項(xiàng)目2 項(xiàng)目3 ,start=“整數(shù)”，設(shè)置列表的起始項(xiàng)屬性,type=“1/i/I/a/A”，設(shè)置列表的起始項(xiàng)屬性,項(xiàng)目1 項(xiàng)目2 項(xiàng)目3, 項(xiàng)目1 項(xiàng)目2 項(xiàng)目3 ,，空格，引號(hào)等符號(hào)在HTML語言中都有特殊意義；,一個(gè)字符實(shí)體一定由三部分組成：,HTML代碼只會(huì)按照符號(hào)在H

5、TML語言中的特定意義來處理；,當(dāng)在網(wǎng)頁上不能正常顯示這些符號(hào)時(shí)，可以使用字符實(shí)體（如空格用表示）；,最常用的幾個(gè)字符實(shí)體,空格(),2.2格式排版4,alert(今后我們將共同學(xué)習(xí)JavaScript知識(shí)！); ,alert()是JavaScript的窗口對(duì)象方法，其功能是彈出一個(gè)具有OK對(duì)話框并顯示參數(shù)中的字符串,在HTML文檔中，JavaScript使用.來標(biāo)識(shí)。,28,三、JavaScript-讓網(wǎng)頁動(dòng)起來,3、JavaScript語言的組成： 基本數(shù)據(jù)類型、表達(dá)式和運(yùn)算符 控制流程 函數(shù) 事件 對(duì)象,29,基本數(shù)據(jù)類型、表達(dá)式和運(yùn)算符,基本數(shù)據(jù)類型：數(shù)值型、字符型、布爾型、空值。,變

6、量：用命令 var 作聲明:,如：var mytest;定義了一個(gè)mytest變量，但沒有賦予它的值；,var mytest = “Welcome ! ”;定義了一個(gè)mytest變量，同時(shí)賦予它字符串類型的值。,聲明變量簡單，不需要提前指定變量的數(shù)據(jù)類型,30,控制流程,if條件語句 for循環(huán)語句 while循環(huán) break和continue語句,31,函數(shù),JavaScript函數(shù)定義 function 函數(shù)名（參數(shù)列表）函數(shù)體;.return 表達(dá)式; ,函數(shù)名對(duì)大小寫是敏感的。,32,事件,單擊事件onClick當(dāng)用戶單擊鼠標(biāo)按鈕時(shí)，產(chǎn)生onClick事件，同時(shí)onClick指定的事件

7、處理程序或代碼將被調(diào)用執(zhí)行。 通常在下列基本對(duì)象中產(chǎn)生： button（按鈕對(duì)象） radio （單選鈕） checkbox（復(fù)選框） reset（重置按鈕） select（列表框） submit（提交按鈕）,如 或Input type=button value=測(cè)試 onclick=alert(這是一個(gè)例子); ,在onClick等號(hào)后，可以使用自己編寫的函數(shù)作為事件處理程序，也可以使用JavaScript內(nèi)部的函數(shù)，還可以直接使用JavaScript的代碼等,33,事件,改變事件onChange 當(dāng)text或textarea元素中輸入的內(nèi)容改變時(shí)發(fā)該事件，同時(shí)當(dāng)在select列表項(xiàng)中一個(gè)選

8、項(xiàng)狀態(tài)改變后也會(huì)引發(fā)該事件。 獲得焦點(diǎn)事件onFocus/失去焦點(diǎn)事件onBlur 載入文件事件onLoad/卸載文件事件onUnload,function loadform( )alert(歡迎光臨! ); ,34,可根據(jù)網(wǎng)頁中元素的名稱定位具體的元素，如網(wǎng)頁中有一個(gè)名為“form1”的表單，可用 document.form1來定位,內(nèi)部對(duì)象,String對(duì)象：字符串，掌握其常用屬性和方法： Length：屬性，返回字符串的長度。 Date對(duì)象：日期和時(shí)間 getFullYear( )、getMonth( )、getDate( ) 常結(jié)合window.setTimeOut(方法名( ); ,

9、 毫秒數(shù)); 使用，刷新時(shí)間。,window對(duì)象：瀏覽器窗口對(duì)象 該對(duì)象通常包括三個(gè)對(duì)象：document：當(dāng)前HTML文檔對(duì)象；location：當(dāng)前地址對(duì)象； document.write( );或document.writeln( );,35,JavaScript文件,JavaScript程序可以直接嵌入在HTML中，也可以獨(dú)立文件的形式出現(xiàn)：后綴名：.js 以“*.js”形式存在的JavaScript程序有更高的重用性，可以被多個(gè)HTML文件引用；,引用方式： 將原來寫在中的JavaScript程序直接剪切出來，另存為check.js； 將原來的修改為：,36,具體應(yīng)用：表單校驗(yàn),form表單：, 用戶名： 密碼： ,驗(yàn)證要求： 用戶沒填用戶名即提交：提示用戶名不能為空； 用戶密碼小于6位：提示用戶密碼不能低于6位。,37,具體應(yīng)用：表單校驗(yàn),form表單：, function check( ) var name = document.form1.uname.value; var pwd = document.form1.upwd.value; if(name.length = 0) alert(請(qǐng)輸入您的用戶名!); document.form1.uname.focus( ); return