互聯(lián)網(wǎng)軟件開發(fā)與應(yīng)用chapPPT課件

1 網(wǎng)頁(yè)設(shè)計(jì)與制作 主講 狼哥QQ 1107095361 2 開始學(xué)習(xí)JavaScript 3 為什么要學(xué)習(xí)JavaScript VBScript和JavaScript兩種腳本語(yǔ)言有不同的特性 都掌握可以揚(yáng)長(zhǎng)避短 VBScript和JavaScript結(jié)合編程是ASP解決方案的一種理想選擇 JavaScript是一種通用的 基于原型的 面向?qū)ο蟮哪_本語(yǔ)言 JavaScript設(shè)計(jì)目標(biāo)是在不占用很多系統(tǒng)和網(wǎng)絡(luò)資源的情況下 可以在頁(yè)面做完整的程序 4 JavaScript是一種Script腳本語(yǔ)言 所謂的腳本語(yǔ)言就是可以和HTML語(yǔ)言混合使用的語(yǔ)言 VBScript也是Script語(yǔ)言中的一種 但是VBScript只有微軟的瀏覽器InternetExplore IE 才能完全支持 而JavaScript則不管是什么瀏覽器都可以運(yùn)行 這也是JavaScript的一個(gè)優(yōu)點(diǎn) JavaScript是一種高級(jí)的腳本描述性語(yǔ)言 并不需要依賴于特定的機(jī)器和操作系統(tǒng) 所以說它是獨(dú)立于操作平臺(tái)的 JavaScript1 0最初是在NetscapeNavigator2 0及NetscapeLiveWire1 0上實(shí)現(xiàn)的 目前JavaScript的版本是JavaScript1 2 JavaScript概述 5 JavaScript是由網(wǎng)景公司開發(fā)的一種跨平臺(tái) 面向?qū)ο?object oriented 的網(wǎng)頁(yè)腳本語(yǔ)言 WebScriptLanguage 是目前流行的網(wǎng)頁(yè)特效設(shè)計(jì)語(yǔ)言 JavaScript代碼可直接嵌入HTML文件中 隨網(wǎng)頁(yè)一起傳送到客戶端瀏覽器 然后通過瀏覽器來(lái)解釋執(zhí)行 JavaScript概述 6 什么是JavaScript腳本語(yǔ)言 1 腳本語(yǔ)言 ScriptingLanguage 由ASCII碼構(gòu)成 可直接用任何的文本編輯器開發(fā)完成 是一種不必事先編譯 只要利用適當(dāng)?shù)慕忉屍?Interpreter 就可以執(zhí)行的簡(jiǎn)單的解釋式程序 2 JavaScript JavaScript是由網(wǎng)景公司開發(fā)的一種跨平臺(tái) 純面向?qū)ο?object oriented 式的網(wǎng)頁(yè)式腳本語(yǔ)言 WebScriptLanguage JavaScript代碼可直接嵌入HTML文件中 隨網(wǎng)頁(yè)一起傳送到客戶端瀏覽器 然后通過瀏覽器的解釋器來(lái)解釋執(zhí)行 JavaScript概述 7 腳本編寫語(yǔ)言基于對(duì)象的語(yǔ)言簡(jiǎn)單性安全性動(dòng)態(tài)性跨平臺(tái) JavaScript的特點(diǎn) JavaScript概述 8 制作網(wǎng)頁(yè)特效提供表單前端驗(yàn)證窗口動(dòng)態(tài)操作提高系統(tǒng)工作效率 JavaScript的功能 JavaScript概述 9 JavaScript概述 利用JavaScript可以增強(qiáng)網(wǎng)頁(yè)的交互性 控制各種瀏覽器對(duì)象利用JavaScript還可以實(shí)現(xiàn)對(duì)用戶所輸入的數(shù)據(jù)進(jìn)行有效驗(yàn)證 從而減輕服務(wù)器的負(fù)擔(dān)JavaScript必須放在與標(biāo)記之間 以便將腳本代碼與HTML標(biāo)記區(qū)分開來(lái)Script塊可以放在HTML中與之間 也可以放在與之間 10 JavaScript與Java的區(qū)別 從本質(zhì)上說JavaScript和Java沒有什么聯(lián)系 但是同時(shí)作為語(yǔ)言 可以從下面的角度來(lái)區(qū)別 1 JavaScript是解釋型的語(yǔ)言 當(dāng)程序執(zhí)行的時(shí)候 瀏覽器一邊解釋一邊執(zhí)行 而Java是編譯型的語(yǔ)言 必須經(jīng)過編譯才能執(zhí)行 2 代碼格式不一樣 Java代碼經(jīng)過編譯后成為二進(jìn)制文件 而JavaScript是純文本的文件 3 在HTML中的嵌入方式不一樣 Java可以通過小應(yīng)用程序嵌入HTML文件 而JavaScript可直接寫入一個(gè)文本文件或HTML文件中 11 JavaScript編寫客戶端腳本 語(yǔ)法格式 12 在網(wǎng)頁(yè)中加入JavaScript 要在你的網(wǎng)頁(yè)中使用JavaScript 你首先必須要知道該將它放在哪兒 其實(shí)很簡(jiǎn)單 只要在你的網(wǎng)頁(yè) HTML文件 中插入和標(biāo)記對(duì) 你就可以在這兩個(gè)標(biāo)記隊(duì)之間插入你的JavaScript代碼了 例如 alert Helloworld 13 在網(wǎng)頁(yè)中加入JavaScript 另外 你也可以將JavaScript代碼放在另一個(gè)單獨(dú)的文件里 然后在網(wǎng)頁(yè) HTML文件 中使用 SRC 此單獨(dú)文件的路徑 地址 URL 來(lái)使用此單獨(dú)文件里的JavaScript程序代碼 一般將這個(gè)單獨(dú)的文件保存為擴(kuò)展名為 JS的文件 14 Javascript程序 在網(wǎng)頁(yè)打開時(shí) 彈出消息窗 window alert HelloMyJS 15 事件 在網(wǎng)頁(yè)打開時(shí) 彈出廣告 functiondd window open form2 htm 16 JAVASCRIPT語(yǔ)法基礎(chǔ) 基本的數(shù)據(jù)類型數(shù)值型 整數(shù)和實(shí)數(shù) 字符串型用 括起來(lái)的布爾型TRUE和FALSE空值NULL變量的申明方法VARMytest 17 Javascript 表達(dá)式 數(shù)學(xué)運(yùn)算表達(dá)式 關(guān)系運(yùn)算表達(dá)式 字符表達(dá)式 邏輯表達(dá)式 18 JavaScript語(yǔ)法基礎(chǔ) 語(yǔ)句 注釋 使用 來(lái)注釋一個(gè)單行 和 可以注釋多行 循環(huán) for do while等等 條件語(yǔ)句 if else switch case 19 條件分支語(yǔ)句 1 if 條件表達(dá)式 語(yǔ)句體1 else 語(yǔ)句體2 20 條件分支語(yǔ)句 2 Switch 表達(dá)式 case值1 語(yǔ)句體1 break case值2 語(yǔ)句體2 break default 語(yǔ)句體 21 循環(huán)控制語(yǔ)句 for i 1 ijavascript 應(yīng)用舉例 簡(jiǎn)單購(gòu)物系統(tǒng) 22 JavaScript的事件處理 主要內(nèi)容1 事件 Event 鼠標(biāo)或鍵盤的動(dòng)作稱為事件 2 事件驅(qū)動(dòng) EventDriver 由事件引發(fā)的一連串程序的動(dòng)作 稱為事件驅(qū)動(dòng) 3 事件處理程序 EventHandler 對(duì)事件進(jìn)行處理的程序或函數(shù) 4 事件處理程序語(yǔ)法 23 JavaScript的事件處理 1 常見事件 24 JavaScript的事件處理 2 事件處理程序語(yǔ)法將事件處理程序直接嵌入HTML標(biāo)記符中例如 嵌入 中直接寫在對(duì)象后面例如 document onLoad alert 這是事件處理程序 25 JavaScript的事件處理 3 應(yīng)用舉例例 請(qǐng)輸入基本資料 姓名 26 JavaScript包含兩類函數(shù) 系統(tǒng)函數(shù)用戶自定義函數(shù) JavaScript函數(shù) JavaScript編程基礎(chǔ) 27 函數(shù) functionfun number if number 0 return1 elsereturn 1 28 JavaScript的常用對(duì)象 JavaScript是面向?qū)ο缶幊痰?所謂 對(duì)象化編程 意思是把JavaScript能涉及的內(nèi)容分成大大小小的對(duì)象 對(duì)象下面還可繼續(xù)劃分對(duì)象直至非常詳細(xì) 所有的編程都以對(duì)象為出發(fā)點(diǎn) 小到一個(gè)變量 大到網(wǎng)頁(yè)文檔 窗口甚至屏幕 都是對(duì)象 JavaScript的對(duì)象可以是一段文字 一幅圖片 一個(gè)表單等 每個(gè)對(duì)象有特定的屬性 方法和事件 對(duì)象的屬性是反映該對(duì)象某些特定的性質(zhì)的 如字符串長(zhǎng)度 圖像的高寬 文本框的文字等 對(duì)象的方法能對(duì)該對(duì)象做一些操作 如表單的 提交 窗口的 滾動(dòng) 等 對(duì)象的事件能響應(yīng)發(fā)生在對(duì)象上的事情 如提交表單產(chǎn)生表單的 提交事件 點(diǎn)擊產(chǎn)生 點(diǎn)擊事件 不是所有的對(duì)象都有以上三個(gè)性質(zhì) 有些沒有事件而只有屬性 29 JavaScript提供了一些非常有用的常用內(nèi)部對(duì)象和方法 用戶不需要用腳本來(lái)實(shí)現(xiàn)這些功能 這正是基于對(duì)象編程的真正目的 主要有JavaScript提供的Window 窗口 string 字符串 math 數(shù)值計(jì)算 和Date 日期 內(nèi)置對(duì)象等 內(nèi)置對(duì)象都有自己的方法和屬性 訪問屬性的語(yǔ)法是 對(duì)象名 屬性名稱 訪問方法的語(yǔ)法是 對(duì)象名 方法名稱 參數(shù)表 所謂的方法就是一個(gè)普通的函數(shù)被封裝到一個(gè)對(duì)象中 JavaScript內(nèi)置對(duì)象 30 下面是一個(gè)文檔對(duì)象樹 31 JavaScript對(duì)象及其層次關(guān)系 Window Frame Document Location History Cookie Anchor Applet Area Form Image Link Layer CheckBox Radio Submit Hidden Passward FileUpload Text Textarea Select Reset Button Option 32 Window對(duì)象 Window對(duì)象是瀏覽器對(duì)象中大部分對(duì)象的祖先 下面列出一些常用Window對(duì)象的方法 1 open URL windowName parameterList open 方法創(chuàng)建一個(gè)新的瀏覽器窗口 并在新窗口中載入一個(gè)指定的URL地址 2 close close 方法關(guān)閉一個(gè)瀏覽器窗口 3 alert 彈出一個(gè)消息框 4 confirm 彈出一個(gè)確認(rèn)框 5 promt 彈出一個(gè)提示框 6 setTimeout expression time 定時(shí)設(shè)置 在一定的時(shí)間后自動(dòng)執(zhí)行expression的代碼 使用time設(shè)置時(shí)間 單位是毫秒 7 clearTimeout timer 取消利用setTimeout的定時(shí)設(shè)置 8 setIntervel expression time 設(shè)定一個(gè)時(shí)間間隔 可以定時(shí)反復(fù)的自動(dòng)執(zhí)行expression描述的代碼 使用time設(shè)置時(shí)間 單位是毫秒 33 Date對(duì)象 Date對(duì)象提供了兩類方法 從系統(tǒng)中獲得當(dāng)前的時(shí)間和日期 設(shè)置當(dāng)前時(shí)間和日期 下表列出了常用的方法 34 String對(duì)象字符串對(duì)象 一般利用String對(duì)象提供的函數(shù)來(lái)處理字符串 String對(duì)字符串的處理主要提供了下列方法 1 charAt idx 第一個(gè)字符位置是 0 返回指定位置處的字符 2 indexOf Chr 返回指定子字符串的位置 從左到右 找不到返回 1 3 lastIndexOf chr 返回指定子字符串的位置 從右到左 找不到返回 1 4 toLowerCase 將字符串中的字符全部轉(zhuǎn)化成小寫 5 toUpperCase 將字符串中的字符全部轉(zhuǎn)化成大寫 35 其它對(duì)象 1 Document對(duì)象 含有當(dāng)前網(wǎng)頁(yè)的各種特性 例如標(biāo)題 背景及使用的語(yǔ)言等 2 Math對(duì)象 數(shù)學(xué)對(duì)象 既是儲(chǔ)存數(shù)據(jù)運(yùn)算方法包 又是儲(chǔ)存通用常量的屬性包 3 Location對(duì)象 含有當(dāng)前網(wǎng)頁(yè)的URL地址 4 History對(duì)象 含有以前訪問過的網(wǎng)頁(yè)的URL地址 5 Forms對(duì)象 是從屬于瀏覽器對(duì)象document的一個(gè)數(shù)組 為處理表單及其中的界面對(duì)象提供屬性和方法 每一個(gè)表單是這個(gè)數(shù)組中的一個(gè)單獨(dú)元素 6 Anchors對(duì)象 是從屬于瀏覽器對(duì)象document的一個(gè)數(shù)組 為處理錨提供屬性和方法 每一個(gè)錨就是這個(gè)數(shù)組中的一個(gè)元素 7 Links對(duì)象 是從屬于瀏覽器對(duì)象document的一個(gè)數(shù)組 為處理超級(jí)連接提供屬性和方法 每一個(gè)超級(jí)連接就是這個(gè)數(shù)組中的一個(gè)元素 36 基于以上特點(diǎn) JavaScript在網(wǎng)頁(yè)設(shè)計(jì)中得到了廣泛的應(yīng)用 例1 一個(gè)簡(jiǎn)單的JavaScript程序 運(yùn)行結(jié)果如下圖所示 JavaScriptDemo1document writeln 歡迎使用JavaScript document writeln document writeln 悄悄的我走了 正如我悄悄的來(lái) document writeln 我揮一揮衣袖 不帶走一片云彩 37 例2 創(chuàng)建一個(gè)按鈕 當(dāng)單擊該按鈕時(shí)在對(duì)話框中顯示系統(tǒng)時(shí)間 functionshowdate alert Date JavaScript示例 38 例3 顯示頁(yè)面 等3秒鐘或點(diǎn) 開始 按鈕都進(jìn)入頁(yè)面 自動(dòng)執(zhí)行的例子functionNewWindow varmy open toolbar yes menubar yes width 600 heigth 200 若單擊開始按鈕或等待3秒鐘自動(dòng)進(jìn)入頁(yè)面 39 例4 折疊菜單 如果已顯示了子菜單 則折疊 否則展開子菜單 動(dòng)態(tài)折疊菜單BODY font size 12pt A font size 10pt red color red menu color blue cursor hand indent margin left 0 3in functionmenuChange varsrc varsubId src window ev