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

1、JSP動態(tài)網(wǎng)站開發(fā),工商管理學院電子商務(wù)教研室,第2章 Web基礎(chǔ)知識,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 超文本標記語

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

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

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

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

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

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

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

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